:root {
  --red: #d62839;
  --red-dark: #9c1426;
  --green: #1f8a4c;
  --gold: #f6c343;
  --gold-dark: #c4901c;
  --snow: #f4f8ff;
  --night: #0b1433;
  --ink: #1d2340;
  --font-ui: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-title: 'Mountains of Christmas', 'Fredoka', Georgia, serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #060a1c;
  font-family: var(--font-ui);
  color: var(--snow);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* fixed logical stage, scaled by JS */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 540px; height: 960px;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  background: var(--night);
}
#game { position: absolute; left: 0; top: 0; width: 540px; height: 960px; display: block; touch-action: none; }

.hidden { display: none !important; }

/* ---------- buttons ---------- */
button { font-family: inherit; cursor: pointer; border: 0; }
.btn {
  display: block; width: 280px; margin: 10px auto 0; padding: 14px 20px;
  font-size: 22px; font-weight: 600; letter-spacing: 0.5px;
  border-radius: 16px; color: #fff; transition: transform 0.08s ease, filter 0.15s;
}
.btn:active { transform: translateY(2px) scale(0.98); }
.btn:hover { filter: brightness(1.08); }
.btn.primary {
  background: linear-gradient(#ef4152, var(--red) 55%, var(--red-dark));
  box-shadow: 0 5px 0 #6e0d1b, 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.btn.ghost { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.35); }
.big-btn { font-size: 30px; padding: 16px 20px; width: 300px; }

.icon-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.25);
  color: #fff; display: grid; place-items: center; padding: 0;
}
.icon-btn svg { width: 24px; height: 24px; fill: currentColor; }
.icon-btn:active { transform: scale(0.94); }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
#btn-pause { left: 16px; top: 22px; }
#btn-sound { right: 16px; top: 22px; }
#btn-sound .off { display: none; }
#btn-sound.muted .on { display: none; }
#btn-sound.muted .off { display: block; }

.pill {
  position: absolute; left: 74px; top: 28px; height: 36px; padding: 0 12px 0 8px;
  display: flex; align-items: center; gap: 6px; border-radius: 18px;
  background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(255, 255, 255, 0.2);
  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pill svg { width: 20px; height: 20px; fill: currentColor; color: var(--gold); }
#timer.warn { color: #ff6b6b; border-color: #ff6b6b; animation: pulse 0.5s ease-in-out infinite alternate; }
#timer.warn svg { color: #ff6b6b; }
@keyframes pulse { to { transform: scale(1.08); } }

#score-box { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); text-align: center; width: 180px; }
#score-box .label { font-size: 13px; letter-spacing: 3px; color: var(--gold); font-weight: 600; }
#score { font-size: 44px; font-weight: 700; line-height: 1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
#score.bump { animation: bump 0.25s ease; }
@keyframes bump { 50% { transform: scale(1.15); color: var(--gold); } }
#bonus-feed { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); width: 320px; height: 0; }
.bonus {
  position: absolute; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 17px;
  color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); animation: bonusUp 1.6s ease-out forwards;
}
@keyframes bonusUp { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }

#puzzle-row {
  position: absolute; left: 30px; right: 30px; top: 104px; height: 26px;
  display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: 1px;
}
#puzzle-label { color: #dce6ff; }
#hint-tag { font-size: 12px; padding: 2px 8px; border-radius: 8px; background: var(--green); letter-spacing: 1.5px; }
#progress-text { margin-left: auto; font-variant-numeric: tabular-nums; color: #dce6ff; }
#progress-bar { position: absolute; left: 30px; right: 30px; top: 136px; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#progress-fill {
  height: 100%; width: 0; border-radius: 6px; transition: width 0.3s ease;
  background: repeating-linear-gradient(-45deg, #ef4152 0 8px, #fff 8px 16px);
}

#btn-rotate {
  position: absolute; left: 50%; top: 908px; transform: translateX(-50%);
  height: 42px; padding: 0 22px 0 16px; border-radius: 23px;
  display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; letter-spacing: 1px; color: var(--ink);
  background: linear-gradient(#ffe08a, var(--gold) 60%, var(--gold-dark));
  box-shadow: 0 4px 0 #8a6210, 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
#btn-rotate svg { width: 22px; height: 22px; }
#btn-rotate:active { transform: translateX(-50%) translateY(2px); }
#tip { display: none; position: absolute; left: 0; right: 0; top: 936px; text-align: center; font-size: 13px; color: rgba(220, 230, 255, 0.7); }

/* ---------- tutorial ---------- */
#tutorial {
  position: absolute; left: 36px; width: 468px; padding: 14px 18px 12px; border-radius: 20px;
  background: linear-gradient(#fffdf6, #fff3dc); color: var(--ink); border: 3px solid var(--gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); animation: tutIn 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#tutorial .tut-step { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #b08a2a; }
#tutorial .tut-title { font-family: var(--font-title); font-size: 34px; line-height: 1.05; color: var(--red); margin: 2px 0 4px; }
#tutorial .tut-text { font-size: 17px; line-height: 1.38; }
#tutorial .tut-text b { color: var(--green); }
#tutorial .tut-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; min-height: 44px; }
#tutorial .tut-link { background: none; color: #8a7a6a; font-size: 15px; text-decoration: underline; padding: 6px 0; }
#tutorial .tut-link.invisible { visibility: hidden; }
#tut-next { width: auto; margin: 0; padding: 9px 26px; font-size: 19px; }
@keyframes tutIn { from { opacity: 0; transform: translateY(12px) scale(0.95); } }

.music-toggle { width: 190px; }
.music-toggle .t-label { display: flex; align-items: center; gap: 8px; }
.music-toggle svg { width: 22px; height: 22px; fill: currentColor; color: var(--gold); }
#btn-howto { margin-top: 14px; }

/* ---------- deadlock ---------- */
#deadlock { position: absolute; left: 50px; top: 160px; width: 440px; height: 440px; display: grid; place-items: center; background: rgba(10, 20, 50, 0.55); border-radius: 18px; animation: fadeIn 0.3s; }
#deadlock .card { background: rgba(255, 255, 255, 0.96); color: var(--ink); border-radius: 20px; padding: 22px 26px; text-align: center; width: 360px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
#deadlock .big { font-size: 32px; font-weight: 700; color: #2f6fd8; }
#deadlock p { margin: 8px 0 6px; font-size: 17px; }
#deadlock .btn { width: 240px; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }
.screen.dim { background: rgba(6, 10, 28, 0.62); }
@keyframes fadeIn { from { opacity: 0; } }

.title {
  font-family: var(--font-title); font-size: 104px; line-height: 0.92; margin: 6px 0 8px; text-align: center;
  color: #fff; letter-spacing: 1px;
  text-shadow: 0 4px 0 var(--red), 0 8px 0 #7a0f1d, 0 12px 26px rgba(0, 0, 0, 0.5);
}
.subtitle { margin: 6px 0 34px; font-size: 18px; color: #dce6ff; }
.logo-blocks { display: grid; grid-template-columns: repeat(3, 38px); gap: 5px; transform: rotate(-8deg); animation: bob 2.4s ease-in-out infinite; }
.logo-blocks .b { width: 38px; height: 38px; border-radius: 8px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), inset 0 4px 0 rgba(255, 255, 255, 0.35); }
.b.r { background: #e63946; } .b.g { background: #2a9d5c; } .b.y { background: #f4b400; } .b.b2 { background: #3a86ff; } .b.e { background: transparent; box-shadow: none; }
@keyframes bob { 50% { transform: rotate(-4deg) translateY(-8px); } }

.toggles { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.toggle {
  width: 133px; padding: 10px 12px; border-radius: 14px; color: #fff; font-size: 18px; font-weight: 600;
  background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex; justify-content: space-between; align-items: center;
}
.toggle .t-state { font-size: 14px; padding: 3px 9px; border-radius: 8px; background: var(--green); }
.toggle.off .t-state { background: #666d86; }
.brand-area {
  position: absolute; bottom: 28px; left: 40px; right: 40px; text-align: center; font-size: 14px;
  color: rgba(40, 55, 110, 0.8); font-weight: 500; padding: 10px; border-top: 1px dashed rgba(40, 55, 110, 0.3);
}

.panel {
  width: 440px; padding: 26px 28px 28px; border-radius: 26px; text-align: center;
  background: linear-gradient(#1c2a5e, #111a40); border: 3px solid rgba(246, 195, 67, 0.75);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 6px rgba(255, 255, 255, 0.04);
  position: relative;
}
.panel::before { /* candy stripe top */
  content: ''; position: absolute; left: 30px; right: 30px; top: -9px; height: 14px; border-radius: 7px;
  background: repeating-linear-gradient(-45deg, #e63946 0 10px, #fff 10px 20px);
}
.panel h2 { margin: 0 0 16px; font-family: var(--font-title); font-size: 50px; color: #fff; text-shadow: 0 3px 0 var(--red); }
.panel-kicker { font-family: var(--font-title); font-size: 36px; color: var(--gold); margin-bottom: 6px; }
.panel .label { font-size: 14px; letter-spacing: 3px; color: #b8c6f0; }
#final-score { font-size: 84px; font-weight: 700; line-height: 1.05; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
#breakdown { margin: 10px 0 16px; font-size: 16px; color: #dce6ff; }
#breakdown .row { display: flex; justify-content: space-between; padding: 5px 4px; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); }
#breakdown .row b { color: var(--gold); font-variant-numeric: tabular-nums; }

.ticket { background: linear-gradient(#fff9ef, #f3e6cf); color: var(--ink); border-color: var(--red); }
.ticket .panel-kicker { color: var(--red); }
.ticket-score { font-size: 20px; margin-bottom: 12px; }
.ticket-score b { color: var(--green); font-size: 26px; }
.ticket label { display: block; text-align: left; font-weight: 600; font-size: 15px; margin: 10px 0 0; color: #5a4a3a; }
.ticket input {
  display: block; width: 100%; margin-top: 5px; padding: 12px 14px; font: 500 19px var(--font-ui); color: var(--ink);
  border: 2px solid #d9c6a5; border-radius: 12px; background: #fff; outline: none; user-select: text; -webkit-user-select: text;
}
.ticket input:focus { border-color: var(--green); }
#form-error { min-height: 20px; color: var(--red); font-size: 15px; margin-top: 8px; }
.consent { font-size: 13px; color: #7a6a5a; margin: 4px 0 6px; }
.ticket .btn.ghost { color: var(--ink); border-color: rgba(0, 0, 0, 0.25); background: transparent; }

#lb-list { list-style: none; margin: 0; padding: 0; text-align: left; counter-reset: rank; max-height: 470px; overflow: auto; }
#lb-list li {
  counter-increment: rank; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 6px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.07); font-size: 19px;
}
#lb-list li::before { content: counter(rank); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.15); font-size: 15px; font-weight: 700; flex: none; }
#lb-list li:nth-child(1)::before { background: var(--gold); color: var(--ink); }
#lb-list li:nth-child(2)::before { background: #cfd8e8; color: var(--ink); }
#lb-list li:nth-child(3)::before { background: #d4915a; color: var(--ink); }
#lb-list li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lb-list li .s { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
#lb-list li.me { background: rgba(214, 40, 57, 0.55); outline: 2px solid var(--gold); }
#lb-list .empty { justify-content: center; color: #b8c6f0; }
#lb-list .empty::before { display: none; }
#lb-you { font-size: 16px; color: #dce6ff; margin: 8px 0 4px; min-height: 20px; }

.timeup-text {
  font-family: var(--font-title); font-size: 96px; color: #fff; text-shadow: 0 5px 0 var(--red), 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: popIn 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes popIn { from { transform: scale(0.3); opacity: 0; } }

#debug {
  position: absolute; left: 6px; top: 150px; max-width: 528px; padding: 6px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.65); color: #9ff; font: 11px/1.35 Consolas, monospace; pointer-events: none; white-space: pre-wrap;
}