* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; height: 100%;
background: #14171b;
font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
:root {
--z: 1; /* кратность холста, ставит viewport.js */
--ui: calc(1 + (var(--z) - 1) * 0.55); /* интерфейс растёт мягче: текст не надо удваивать */
}
#wrap { position: relative; width: 800px; max-width: 100vw; }
#game {
display: block; width: 100%; height: auto;
image-rendering: pixelated;
image-rendering: crisp-edges;
background: #8ec6e8;
border-radius: 6px;
box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}
/* весь левый верхний угол — одна колонка, чтобы блоки не наезжали друг на друга */
#hudLeft {
position: absolute; top: 12px; left: 14px;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
pointer-events: none;
}
#place {
background: rgba(20,20,24,0.72);
color: #ffe9a8; padding: calc(6px * var(--ui)) calc(12px * var(--ui));
border-radius: 8px; font-size: calc(14px * var(--ui)); font-weight: bold;
border: 1px solid rgba(255,215,94,0.5);
}
#quest {
background: rgba(20,20,24,0.72);
color: #b9e6a0; padding: calc(5px * var(--ui)) calc(11px * var(--ui));
border-radius: 8px; font-size: calc(13px * var(--ui)); font-weight: bold;
border: 1px solid rgba(150,220,120,0.45);
}
/* ---- характеристики героя ---- */
#stats {
background: rgba(20,20,24,0.72);
border: 1px solid rgba(255,215,94,0.35);
border-radius: 8px; padding: calc(7px * var(--ui)) calc(10px * var(--ui));
display: flex; flex-direction: column; gap: calc(4px * var(--ui));
}
#stats .row { display: flex; align-items: center; gap: 9px; }
#stats .lbl {
width: calc(62px * var(--ui)); font-size: calc(11px * var(--ui)); color: #cfc6b4; letter-spacing: .3px;
transition: color 0.25s;
}
#stats .pips { display: flex; gap: 3px; }
#stats .pips i {
width: calc(7px * var(--ui)); height: calc(7px * var(--ui)); border-radius: 2px;
background: rgba(255,255,255,0.13);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
transition: background 0.25s;
}
#stats .pips i.on { background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 0 5px var(--c); }
#stats .num {
margin-left: auto;
font-size: calc(12px * var(--ui)); font-weight: bold; color: #fff; min-width: calc(9px * var(--ui)); text-align: right;
transition: color 0.25s;
}
/* вспышка на строке, у которой характеристика только что выросла */
@keyframes statUp {
0% { transform: none; }
30% { transform: translateX(3px); }
100% { transform: none; }
}
#stats .row.up .lbl, #stats .row.up .num { color: #9cf07a; }
#stats .row.up { animation: statUp 0.5s ease-out; }
#prompt {
position: absolute;
background: rgba(0,0,0,0.85);
color: #ffd75e; padding: calc(4px * var(--ui)) calc(10px * var(--ui));
border-radius: 8px; font-size: calc(13px * var(--ui)); font-weight: bold;
transform: translate(-50%, -100%);
white-space: nowrap; border: 1px solid #ffd75e;
pointer-events: none;
}
.hidden { display: none !important; }
#dialogue {
position: absolute; left: 20px; right: 20px; bottom: 18px;
background: rgba(15,15,20,0.94);
border: 2px solid #ffd75e; border-radius: 12px;
padding: calc(14px * var(--ui)) calc(16px * var(--ui)); color: #fff;
}
#dialogueName { color: #ffd75e; font-weight: bold; font-size: calc(13px * var(--ui)); margin-bottom: calc(6px * var(--ui)); }
#dialogueText { font-size: calc(15px * var(--ui)); line-height: 1.4; margin-bottom: calc(10px * var(--ui)); white-space: pre-line; }
#dialogueOptions { display: flex; gap: 8px; flex-wrap: wrap; }
#dialogueOptions button {
background: #d8b24a; border: none; padding: calc(8px * var(--ui)) calc(14px * var(--ui));
border-radius: 8px; font-size: calc(14px * var(--ui)); cursor: pointer;
font-weight: bold; color: #3a2b00;
transition: background 0.1s, transform 0.08s;
}
/* выделенный вариант — им управляют и мышь, и клавиатура */
#dialogueOptions button.sel {
background: #fff2c0;
transform: translateY(-1px);
box-shadow: 0 0 0 3px #fff2c0, 0 0 0 5px #8a6b1f;
}
#hint {
position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.55); font-size: calc(12px * var(--ui)); white-space: nowrap;
}
/* ---------- меню и пауза ---------- */
.screen {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(10,8,14,0.72);
backdrop-filter: blur(2px);
border-radius: 6px;
}
.screen .panel {
background: rgba(22,19,28,0.96);
border: 2px solid #ffd75e;
border-radius: calc(14px * var(--ui));
padding: calc(22px * var(--ui)) calc(30px * var(--ui));
display: flex; flex-direction: column; align-items: stretch;
gap: calc(10px * var(--ui));
min-width: calc(260px * var(--ui));
box-shadow: 0 18px 60px rgba(0,0,0,0.6);
text-align: center;
}
.screen h1 {
margin: 0; color: #ffd75e; font-size: calc(30px * var(--ui)); letter-spacing: 1px;
}
.screen h2 {
margin: 0 0 calc(4px * var(--ui)); color: #ffd75e; font-size: calc(22px * var(--ui));
}
.screen .sub {
margin: 0 0 calc(10px * var(--ui)); color: #a99f8c; font-size: calc(13px * var(--ui));
}
.screen .note {
margin: 0; font-size: calc(11px * var(--ui)); color: #8d8574;
}
.screen button.big {
background: #ffd75e; border: none; color: #3a2b00; font-weight: bold; cursor: pointer;
padding: calc(11px * var(--ui)) calc(18px * var(--ui));
border-radius: calc(9px * var(--ui)); font-size: calc(15px * var(--ui));
font-family: inherit; transition: background .12s, transform .08s;
}
.screen button.big:hover { background: #ffe58a; transform: translateY(-1px); }
.screen .row {
display: flex; align-items: center; gap: calc(9px * var(--ui));
color: #cfc6b4; font-size: calc(13px * var(--ui));
margin: calc(4px * var(--ui)) 0;
}
.screen .row input[type=range] { flex: 1; accent-color: #ffd75e; cursor: pointer; }
.screen .row span { width: calc(38px * var(--ui)); text-align: right; color: #fff; }