@font-face {
  font-family: 'Tiny5';
  font-display: swap;
  src: url(../fonts/tiny5-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tiny5';
  font-display: swap;
  src: url(../fonts/tiny5-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2190-21FF, U+25A0-25FF, U+2600-26FF;
}

:root {
  /* --u = один игровой пиксель на экране (канвас 320x180) */
  --u: calc(min(100vw, 100vh * 16 / 9) / 320);
  --ink: #1a1426;
  --paper: #f4e8d0;
  --accent: #ffcf6b;
}
@supports (height: 100dvh) {
  :root { --u: calc(min(100vw, 100dvh * 16 / 9) / 320); }
}

html, body {
  margin: 0;
  height: 100%;
  background: #0d0b14;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body, button {
  font-synthesis: none;
  font-family: 'Tiny5', 'Courier New', monospace;
}

#wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage {
  position: relative;
  width: calc(var(--u) * 320);
  height: calc(var(--u) * 180);
  overflow: hidden;
  color: var(--paper);
}
#screen {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  font-size: calc(var(--u) * 6.5);
  pointer-events: none;
  text-shadow: calc(var(--u) * .7) calc(var(--u) * .7) 0 #000a;
}
#goal { flex: 1; color: var(--accent); }
#goal:empty { visibility: hidden; }
#cringe { color: #ff8fa3; white-space: nowrap; }
#cringe-bar { letter-spacing: calc(var(--u) * .5); }
#items { display: flex; gap: calc(var(--u) * 2); }
#items .item {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 10);
  background: #9fd4f5;
  border: calc(var(--u) * 1) solid #3f7fb5;
  box-sizing: border-box;
}
#score { color: #f4e8d0; white-space: nowrap; }
#meter { color: #ffcf6b; white-space: nowrap; display: flex; align-items: center; gap: calc(var(--u) * 2); }
#meter .bar {
  display: inline-block;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 5);
  background: #1a1426;
  border: calc(var(--u) * 1) solid #f4e8d0;
  box-sizing: border-box;
}
#meter-fill { display: block; height: 100%; width: 0; transition: width .4s steps(8); }
.input-row { display: flex; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2); }
.input-row input {
  flex: 1;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: calc(var(--u) * 1) solid var(--accent);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  outline: none;
  min-width: 0;
  -webkit-user-select: text;
  user-select: text;
}
.input-row button {
  font-size: inherit;
  color: var(--ink);
  background: var(--accent);
  border: calc(var(--u) * 1) solid var(--ink);
  padding: 0 calc(var(--u) * 5);
  cursor: pointer;
}
.input-err { color: #ff8fa3; margin-top: calc(var(--u) * 1.5); min-height: calc(var(--u) * 8); font-size: calc(var(--u) * 6.5); }
#love { color: #ff8fa3; white-space: nowrap; display: flex; align-items: center; gap: calc(var(--u) * 2); }
#love-bar {
  display: inline-block;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 5);
  background: #1a1426;
  border: calc(var(--u) * 1) solid #f4e8d0;
  box-sizing: border-box;
}
#love-fill { display: block; height: 100%; width: 0; background: #ff4d6d; transition: width .5s steps(8); }
#finish {
  position: absolute;
  right: calc(var(--u) * 3);
  top: calc(var(--u) * 15);
  font-size: calc(var(--u) * 6.5);
  color: var(--ink);
  background: var(--accent);
  border: calc(var(--u) * 1) solid var(--ink);
  box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #0008;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  cursor: pointer;
}
body.in-dialog #finish { visibility: hidden; }
#mute, #menu-btn {
  pointer-events: auto;
  font-size: calc(var(--u) * 7);
  line-height: 1;
  color: var(--paper);
  background: #0006;
  border: calc(var(--u) * 1) solid #fff5;
  padding: calc(var(--u) * 1) calc(var(--u) * 2.5);
  cursor: pointer;
}
#mute.off { opacity: .45; text-decoration: line-through; }

#hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 6);
  transform: translateX(-50%);
  font-size: calc(var(--u) * 7);
  background: #000b;
  border: calc(var(--u) * 1) solid var(--accent);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 4);
  white-space: nowrap;
  cursor: pointer;
}
#hint b { color: var(--accent); font-weight: 700; }

#toast {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 30);
  transform: translateX(-50%);
  font-size: calc(var(--u) * 7);
  background: var(--accent);
  color: var(--ink);
  padding: calc(var(--u) * 2) calc(var(--u) * 5);
  border: calc(var(--u) * 1) solid var(--ink);
  box-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #0008;
  text-align: center;
  white-space: nowrap;
}

body.in-dialog #hud > :not(#mute) { visibility: hidden; }

/* ---------- диалог ---------- */
#dialog {
  position: absolute;
  left: calc(var(--u) * 5);
  right: calc(var(--u) * 5);
  top: calc(var(--u) * 12);
  min-height: calc(var(--u) * 34);
  box-sizing: border-box;
  background: #1a1426f2;
  border: calc(var(--u) * 1.5) solid var(--paper);
  box-shadow: 0 0 0 calc(var(--u) * 1) var(--ink), calc(var(--u) * 2.5) calc(var(--u) * 2.5) 0 #0007;
  padding: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 4);
  font-size: calc(var(--u) * 7.5);
  line-height: 1.25;
  cursor: pointer;
}
#dialog-name {
  position: absolute;
  left: calc(var(--u) * 5);
  top: calc(var(--u) * -6);
  padding: calc(var(--u) * .5) calc(var(--u) * 3);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: calc(var(--u) * 7);
}
#dialog-name:empty { display: none; }
#dialog-text { white-space: pre-wrap; }
#dialog-choices { margin-top: calc(var(--u) * 2); }
#dialog-choices:empty { display: none; }
.choice {
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  margin-top: calc(var(--u) * 1);
  border: calc(var(--u) * .8) solid transparent;
}
.choice::before { content: '  '; white-space: pre; }
.choice.sel {
  border-color: var(--accent);
  color: var(--accent);
  background: #ffffff10;
}
.choice.sel::before { content: '▶ '; }
.choice.done { opacity: .55; }
#dialog-next {
  position: absolute;
  right: calc(var(--u) * 4);
  bottom: calc(var(--u) * 2);
  font-size: calc(var(--u) * 5);
  color: var(--accent);
  animation: bob .6s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(calc(var(--u) * 1)); } }

/* ---------- титры / карточки ---------- */
#card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0d0b14;
  cursor: pointer;
  padding: calc(var(--u) * 12);
}
#card.clear {
  justify-content: flex-start;
  padding-top: calc(var(--u) * 14);
  background: linear-gradient(#0d0b14dd 0%, #0d0b14aa 45%, #0d0b1400 62%);
}
#card.clear #card-press { margin-top: calc(var(--u) * 6); }
#card-title {
  font-size: calc(var(--u) * 17);
  font-weight: 700;
  color: var(--accent);
  text-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 #7a2d4a;
}
#card-sub {
  margin-top: calc(var(--u) * 5);
  font-size: calc(var(--u) * 8);
  white-space: pre-wrap;
  line-height: 1.3;
}
#card-press {
  margin-top: calc(var(--u) * 9);
  font-size: calc(var(--u) * 6.5);
  color: #fff9;
  animation: blink 1s steps(2) infinite;
}
#card-press:empty { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- вход по паролю ---------- */
#gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 38%, #3a2050 0%, #1a1030 45%, #0d0b14 100%);
  transition: opacity .4s steps(6);
}
#gate.open { opacity: 0; }
#gate-panel {
  width: calc(var(--u) * 190);
  box-sizing: border-box;
  text-align: center;
  background: #1a1426;
  border: calc(var(--u) * 1.5) solid var(--paper);
  box-shadow: 0 0 0 calc(var(--u) * 1) var(--ink), calc(var(--u) * 3) calc(var(--u) * 3) 0 #0008;
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
}
#gate-panel.shake { animation: gate-shake .3s steps(6); }
@keyframes gate-shake { 25% { transform: translateX(calc(var(--u) * -3)); } 75% { transform: translateX(calc(var(--u) * 3)); } }
#gate-title { font-size: calc(var(--u) * 15); color: var(--accent); text-shadow: calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0 #7a2d4a; }
#gate-title::after { content: ' ♥'; color: #ff4d6d; text-shadow: none; }
#gate-sub { margin: calc(var(--u) * 4) 0 calc(var(--u) * 6); font-size: calc(var(--u) * 7.5); line-height: 1.3; }
#gate-lock-sub { margin: calc(var(--u) * 4) 0 calc(var(--u) * 6); font-size: calc(var(--u) * 7.5); }
#gate-timer { display: flex; justify-content: center; gap: calc(var(--u) * 4); }
#gate-timer > div {
  min-width: calc(var(--u) * 30);
  background: #0d0b14;
  border: calc(var(--u) * 1) solid var(--accent);
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
}
#gate-timer b { display: block; font-weight: 400; font-size: calc(var(--u) * 16); color: var(--accent); line-height: 1; }
#gate-timer span { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 5.5); color: #fff9; }
#gate-lock-when { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 6.5); color: #ff8fa3; }
#gate-row { display: flex; gap: calc(var(--u) * 3); }
#gate-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: calc(var(--u) * 11);
  text-align: center;
  letter-spacing: calc(var(--u) * 1.5);
  color: var(--ink);
  background: var(--paper);
  border: calc(var(--u) * 1) solid var(--accent);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
#gate-ok {
  font-size: calc(var(--u) * 8);
  color: var(--ink);
  background: var(--accent);
  border: calc(var(--u) * 1) solid var(--ink);
  padding: 0 calc(var(--u) * 6);
  cursor: pointer;
}
#gate-err { min-height: calc(var(--u) * 9); margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 6.5); color: #ff8fa3; }
#gate-hint-btn {
  margin-top: calc(var(--u) * 1);
  font-size: calc(var(--u) * 6.5);
  color: #fff9;
  background: none;
  border: none;
  border-bottom: calc(var(--u) * .7) dashed #fff6;
  cursor: pointer;
  padding: 0;
}
#gate-hint { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 6.5); color: var(--accent); line-height: 1.3; }

/* ---------- титры ---------- */
#credits {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 46%;
  overflow: hidden;
  background: linear-gradient(90deg, #0d0b1400 0%, #0d0b14e6 22%, #0d0b14f2 100%);
  pointer-events: none;
}
#credits-roll {
  position: absolute;
  left: 22%; right: 4%;
  top: 0;
  text-align: center;
  font-size: calc(var(--u) * 7);
  line-height: 1.35;
  will-change: transform;
}
#credits-roll h2 { font-size: calc(var(--u) * 13); color: var(--accent); margin: 0 0 calc(var(--u) * 4); font-weight: 400; text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #7a2d4a; }
#credits-roll h3 { font-size: calc(var(--u) * 6); color: #ff8fa3; margin: calc(var(--u) * 12) 0 calc(var(--u) * 3); font-weight: 400; letter-spacing: calc(var(--u) * .6); }
#credits-roll p { margin: 0 0 calc(var(--u) * 3); }
#credits-roll p span { display: block; color: #fff9; font-size: calc(var(--u) * 5.5); }
#credits-roll .end { margin-top: calc(var(--u) * 24); color: var(--accent); font-size: calc(var(--u) * 9); }

/* ---------- главное меню ---------- */
#menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--u) * 4);
  background: linear-gradient(#0d0b14ee 0%, #0d0b14dd 80%, #0d0b14aa 100%);
}
#menu-title {
  font-size: calc(var(--u) * 14);
  color: var(--accent);
  text-shadow: calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0 #7a2d4a;
  font-size: calc(var(--u) * 11) !important;
  margin-bottom: calc(var(--u) * 3);
}
#menu-list {
  width: calc(var(--u) * 250);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ffcf6b #1a1426;
  padding-right: calc(var(--u) * 2);
  touch-action: pan-y;
}
.level {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 4);
  margin-bottom: calc(var(--u) * 1);
  border: calc(var(--u) * 1) solid #ffffff33;
  background: #1a1426cc;
  font-size: calc(var(--u) * 7.5);
  cursor: pointer;
}
.level .s { display: none !important; }
.level.sel .s { display: block !important; }
.level .n { color: var(--accent); width: calc(var(--u) * 8); }
.level .t { flex: 1; }
.level .s { display: block; font-size: calc(var(--u) * 5.5); color: #fff9; margin-top: calc(var(--u) * .5); }
.level .st { font-size: calc(var(--u) * 6); color: #8fe3a0; white-space: nowrap; }
.level.locked { opacity: .45; cursor: default; }
.level.locked .st { color: #fff9; }
.level.sel { border-color: var(--accent); background: #3a2f52; }
.level.small { font-size: calc(var(--u) * 6.5); padding: calc(var(--u) * 1.2) calc(var(--u) * 4); }
#menu-foot { margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); font-size: calc(var(--u) * 5.5); color: #fff8; }

/* ---------- сенсорное управление ---------- */
#controls {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}
@media (pointer: coarse) {
  #controls { display: flex; }
}
body.in-dialog #controls { visibility: hidden; }
#controls .pad { display: flex; gap: 12px; }
#controls button {
  pointer-events: auto;
  width: 64px;
  height: 64px;
  font-size: 26px;
  color: #fff;
  background: #ffffff22;
  border: 3px solid #ffffff66;
  border-radius: 50%;
  touch-action: none;
}
#controls .swim-only { display: none; }
body.swim #controls .swim-only { display: block; }
#controls button.act { background: #ffcf6b55; border-color: #ffcf6b; font-weight: 700; }
#controls button.down { background: #ffffff66; }
@media (orientation: portrait) {
  #wrap { align-items: flex-start; padding-top: 12vh; }
}