:root {
  --bg:#15131f; --panel:#262238; --line:#3a3550;
  --accent:#d98a9a;   /* dusty rose */
  --accent2:#7fb8b0;  /* soft teal */
  --gold:#e9d8a6;     /* cream gold */
  --ink:#f2efe9; --muted:#9b93b5;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { height: 100%; overflow: hidden; }
body {
  background: var(--bg) url('../assets/img/bg.png') center center / cover no-repeat;
  color: var(--ink); font-family: 'Handjet', monospace; font-weight: 700;
  letter-spacing: .03em;
  height: 100dvh; min-height: 100svh;
  overflow: hidden; overscroll-behavior: none;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  -webkit-font-smoothing: none; image-rendering: pixelated;
}
.cabinet {
  width: 100%; max-width: 760px; padding: clamp(16px,4vw,40px);
  background: rgba(21,19,31,.82); border: 3px solid var(--line);
  border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.45);
  text-align: center;
  max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.screen { display: none; }
.screen--active { display: flex; flex-direction: column; align-items: center; gap: clamp(12px,2.5vw,22px); }

.mute-btn { position: fixed; top: 12px; right: 12px; z-index: 10; background: none; border: 0; font-size: 28px; cursor: pointer; line-height: 1; }
.back-btn {
  position: fixed; top: 12px; left: 12px; z-index: 10; cursor: pointer;
  font-family: inherit; font-weight: 700; color: var(--ink);
  background: rgba(38,34,56,.9); border: 2px solid var(--line);
  border-radius: 8px; padding: 8px 12px; font-size: clamp(13px,3vw,16px); min-height: 40px;
}
.back-btn:active { transform: translateY(2px); }

.coin { color: var(--gold); font-size: clamp(14px,3.5vw,20px); animation: blink 1.4s steps(2,end) infinite; margin: 0; }
.title { color: var(--accent); font-size: clamp(28px,8vw,64px); font-weight: 900; margin: 0; line-height: .95; }
.player { color: var(--accent2); font-size: clamp(16px,4vw,24px); margin: 0; }
.difficulty { color: var(--muted); font-size: clamp(12px,3vw,18px); margin: 0; }
.level { color: var(--gold); font-size: clamp(16px,4vw,26px); margin: 0; }
.hint { color: var(--muted); font-size: clamp(12px,3vw,18px); margin: 0; }
.question { color: var(--ink); font-size: clamp(22px,6vw,40px); margin: 0; }

.start, .btn {
  font-family: inherit; font-weight: 900; cursor: pointer; color: var(--bg);
  background: var(--accent2); border: 0; border-bottom: 5px solid #5a8c85;
  padding: clamp(12px,3vw,18px) clamp(18px,5vw,34px); border-radius: 10px;
  font-size: clamp(16px,4.5vw,26px); min-height: 48px; transition: transform .08s;
}
.start { background: var(--gold); border-bottom-color: #b3a06a; animation: blink 1.6s steps(2,end) infinite; }
.btn:active, .start:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn--yes { background: var(--gold); border-bottom-color:#b3a06a; }
.btn--no  { background: var(--accent); border-bottom-color:#a85f70; color: var(--bg); position: relative; }
.btn--finish, .btn--retry { background: var(--accent); border-bottom-color:#a85f70; color: var(--bg); }
.yesno { display: flex; gap: clamp(14px,5vw,40px); flex-wrap: wrap; justify-content: center; }
.dodge-caption { color: var(--gold); min-height: 1.4em; font-size: clamp(13px,3.2vw,18px); margin: 0; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: clamp(10px,2.5vw,18px); width: 100%; }
.card {
  font-family: inherit; cursor: pointer; color: var(--ink); background: var(--panel);
  border: 3px solid var(--line); border-radius: 12px; padding: clamp(12px,3vw,18px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px;
  transition: border-color .1s, transform .08s;
}
.card:active { transform: translateY(2px); }
.card--on { border-color: var(--gold); background: #2d2742; }
.card__icon { font-size: clamp(30px,9vw,52px); }
.card__img { width: clamp(54px,16vw,90px); height: auto; image-rendering: pixelated; }
.card__label { color: var(--accent2); font-size: clamp(14px,3.6vw,20px); font-weight: 900; }
.card__desc { color: var(--muted); font-size: clamp(10px,2.6vw,14px); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  font-family: inherit; cursor: pointer; color: var(--ink); background: var(--panel);
  border: 3px solid var(--line); border-radius: 999px; padding: 10px 16px; min-height: 44px;
  font-size: clamp(13px,3.4vw,19px); font-weight: 700;
}
.chip--on { border-color: var(--accent2); color: var(--accent2); background: #2d2742; }
.time-input {
  font-family: inherit; padding: 10px 14px; border-radius: 8px; border: 3px solid var(--line);
  background: var(--panel); color: var(--ink); min-height: 44px; font-size: clamp(16px,4vw,22px);
  color-scheme: dark;
}

.msg-label { color: var(--muted); font-size: clamp(13px,3.4vw,18px); }
#message { width: 100%; max-width: 520px; font-family: inherit; font-size: clamp(14px,3.6vw,18px); padding: 12px; border-radius: 10px; border: 3px solid var(--line); background: var(--panel); color: var(--ink); }

.fireworks { width: 100%; max-width: 420px; border-radius: 12px; image-rendering: pixelated; background: #0d0b16; }
.trophy { width: clamp(80px,20vw,130px); height: auto; image-rendering: pixelated; margin-top: -6px; }
.cleared { color: var(--gold); font-size: clamp(26px,7.5vw,52px); margin: 0; }
.cleared-sub { color: var(--accent2); margin: 0; }
.summary { background: rgba(38,34,56,.7); border: 2px solid var(--line); border-radius: 10px; padding: 14px; width: 100%; max-width: 520px; }
.summary__row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 6px 0; font-size: clamp(13px,3.4vw,18px); }
.summary__k { color: var(--accent2); }
.summary__v { color: var(--ink); }
.outro { color: var(--gold); font-size: clamp(14px,3.6vw,20px); }

.err-title { color: var(--accent); font-size: clamp(24px,7vw,44px); margin: 0; }
.err-sub { color: var(--muted); margin: 0; }

@keyframes blink { 50% { opacity: .35; } }

@media (orientation: landscape) and (min-width: 900px) {
  .cabinet { max-width: 900px; }
}
@media (prefers-reduced-motion: reduce) {
  .coin, .start { animation: none; }
  * { transition: none !important; }
}