/* ================= GAME MODAL ================= */
.game-modal { position: fixed; inset: 0; z-index: 400; background: rgba(1, 3, 12, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .3s; }
.game-modal.is-open { opacity: 1; }
.game-frame { width: min(1180px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #040818; border: 1px solid var(--line-strong); box-shadow: var(--shadow-deep), 0 0 80px -20px rgba(53,224,255,.4); }
.game-modal[data-game="quiz"] .game-frame { height: auto; max-height: 100%; width: min(900px, 100%); }
.game-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; background: linear-gradient(90deg, #a50d25, #1a2f8a); border-bottom: 1px solid rgba(255,255,255,.2); }
.game-bar h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; letter-spacing: .03em; }
.game-root { flex: 1; min-height: 0; position: relative; overflow: auto; }
@media (max-width: 600px) { .game-modal { padding: 0; } .game-frame { border-radius: 0; height: 100%; border: 0; } .game-modal[data-game="quiz"] .game-frame { height: 100%; } }

/* shared overlay */
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(2, 5, 18, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 5; overflow-y: auto; }
.overlay-card { width: min(560px, 100%); padding: 24px; border-radius: 20px; text-align: center; background: linear-gradient(180deg, rgba(16, 30, 84, .96), rgba(6, 10, 32, .98)); border: 1px solid var(--line-strong); box-shadow: var(--shadow-deep), var(--glow-cyan); display: grid; gap: 10px; justify-items: center; }
.overlay-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.8rem; }
.overlay-card p { margin: 0; color: var(--text-dim); }
.overlay-art { width: 150px; filter: drop-shadow(0 0 20px rgba(53,224,255,.6)); margin-bottom: -6px; }
.overlay-kicker { font-family: var(--font-cond); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: var(--cyan) !important; }
.overlay-keys { font-size: .8rem; color: var(--text-mute) !important; }
.overlay-best { font-family: var(--font-cond); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; color: var(--gold) !important; }
.big-score { font-family: var(--font-display); font-size: 3.6rem; line-height: 1; color: #fff !important; text-shadow: 0 0 30px rgba(53,224,255,.6); }
.big-score small { font-size: 1rem; color: var(--cyan); }
.legend { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.legend li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; padding: 6px 2px; border-radius: 10px; background: rgba(255,255,255,.04); }
.legend li canvas { width: 36px; height: 36px; }
.legend li.good { border: 1px solid rgba(125,255,154,.3); }
.legend li.bad { border: 1px solid rgba(255,45,74,.35); }
@media (max-width: 480px) { .legend { grid-template-columns: repeat(2, 1fr); } .overlay-art { width: 100px; } .overlay-card h3 { font-size: 1.4rem; } }
.breakdown { list-style: none; width: 100%; display: grid; gap: 4px; }
.breakdown li { display: flex; justify-content: space-between; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: .9rem; }
.breakdown strong { color: var(--gold); }
.combo-list { list-style: none; text-align: left; display: grid; gap: 4px; font-size: .84rem; color: var(--text-dim); }
.combo-list strong { color: var(--gold); }

/* ================= EAGLE ================= */
.eagle-wrap { position: absolute; inset: 0; background: #030820; touch-action: none; user-select: none; -webkit-user-select: none; }
.eagle-canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); outline: none; border-radius: 6px; }
.game-hud { position: absolute; top: 10px; left: 12px; right: 60px; display: flex; gap: 14px; align-items: center; pointer-events: none; z-index: 2; }
.hud-score { font-family: var(--font-display); font-size: 1.6rem; text-shadow: 0 2px 0 #000, 0 0 16px rgba(53,224,255,.7); }
.hud-lives { display: flex; gap: 4px; }
.hud-lives i { width: 18px; height: 18px; background: rgba(255,255,255,.2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.hud-lives i.on { background: var(--red); filter: drop-shadow(0 0 6px var(--red)); }
.hud-mult { font-family: var(--font-display); color: var(--gold); font-size: 1.2rem; }
.hud-shield { font-family: var(--font-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); font-size: .85rem; }
.hud-pause { position: absolute; top: 8px; right: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(3,7,22,.7); color: #fff; font-weight: 700; letter-spacing: -2px; }
.touch-zones { position: absolute; left: 0; right: 0; bottom: 60px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 2; }
.touch-zones span { font-family: var(--font-display); letter-spacing: .1em; font-size: .9rem; padding: 8px 14px; border-radius: 999px; background: rgba(3,7,22,.7); border: 1px solid var(--cyan); color: var(--cyan); }
.touch-zones.is-on { opacity: 1; }

/* ================= BUILD ================= */
.build-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 0%, #142a7a, #040818 70%); overflow: hidden; }
.build-top { display: grid; grid-template-columns: auto repeat(3, auto) 1fr; gap: 10px; padding: 12px 14px; align-items: center; border-bottom: 1px solid var(--line); background: rgba(3,7,22,.6); }
.stat { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); min-width: 84px; position: relative; }
.stat-lbl { font-family: var(--font-cond); letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; color: var(--text-mute); }
.stat-val { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; }
.stat-time { overflow: hidden; }
.time-ring { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--red) var(--p, 0%), var(--cyan) var(--p, 0%)); }
.stat-power { min-width: 0; }
.power-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); margin: 6px 0 2px; overflow: visible; }
.power-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #ffb020, #ffd36b); box-shadow: 0 0 12px #ffb020; transition: width .3s; }
.power-demand { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #fff; box-shadow: 0 0 8px #fff; transition: left .3s; }
.power-txt { font-size: .78rem; color: var(--text-dim); font-family: var(--font-cond); letter-spacing: .06em; }
.is-brownout .power-fill { background: var(--red); box-shadow: 0 0 12px var(--red); }
.is-brownout .power-txt { color: var(--red); }
.build-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; padding: 14px; }
.build-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 0; height: 100%; width: 100%; max-width: 900px; margin: 0 auto; }
.tile-art svg { max-height: 100%; }
.tile { position: relative; border-radius: 12px; border: 1px solid rgba(120,170,255,.25); background: linear-gradient(160deg, rgba(20,40,110,.55), rgba(6,12,40,.8)); display: grid; place-items: center; padding: 4px; transition: transform .15s, border-color .2s, box-shadow .2s; overflow: visible; }
.tile:hover:not([disabled]) { border-color: var(--cyan); transform: translateY(-2px); }
.tile[data-type]:not([data-type="empty"]):not([data-type="blocked"]) { border-color: var(--c); box-shadow: inset 0 0 20px color-mix(in srgb, var(--c) 25%, transparent), 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.tile[data-type="blocked"] { background: rgba(20,60,35,.4); border-style: dashed; cursor: not-allowed; }
.tile-art { width: 80%; height: 80%; display: grid; place-items: center; animation: placeIn .35s var(--ease); }
.tile-art svg { width: 100%; height: 100%; }
@keyframes placeIn { from { transform: scale(.4) translateY(10px); opacity: 0; } }
.tile-plus { font-size: 1.4rem; color: rgba(160,200,255,.25); }
.tile-out { position: absolute; bottom: 3px; right: 5px; font-family: var(--font-cond); font-size: .66rem; color: #fff; background: rgba(3,7,22,.8); padding: 0 4px; border-radius: 4px; }
.tile-pop { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-size: .8rem; text-shadow: 0 2px 0 #000; animation: popUp .9s var(--ease) forwards; pointer-events: none; z-index: 3; }
@keyframes popUp { to { transform: translate(-50%, -34px); opacity: 0; } }
.build-palette { display: grid; gap: 6px; align-content: start; overflow-y: auto; }
.pal { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(10,20,60,.6); color: var(--text); text-align: left; position: relative; transition: all .15s; }
.pal-ico { grid-row: span 2; width: 40px; height: 40px; }
.pal-ico svg { width: 100%; height: 100%; }
.pal-name { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .04em; font-size: .84rem; line-height: 1.1; }
.pal-cost { grid-column: 2; font-size: .74rem; color: var(--gold); font-weight: 700; }
.pal kbd { grid-row: 1 / span 2; grid-column: 3; font-size: .66rem; color: var(--text-mute); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.pal[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 20%, rgba(10,20,60,.8)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.pal.is-poor { opacity: .45; }
.build-banner { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 30px); opacity: 0; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: rgba(3,7,22,.92); border: 1px solid var(--line-strong); font-weight: 600; font-size: .9rem; transition: all .3s var(--ease); pointer-events: none; z-index: 4; text-align: center; }
.build-banner.is-on { transform: translate(-50%, 0); opacity: 1; }
.build-banner.is-event { border-color: var(--gold); color: var(--gold); box-shadow: var(--glow-gold); }
@media (max-width: 760px) {
  .build-top { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; }
  .stat { min-width: 0; padding: 4px 8px; }
  .stat-val { font-size: 1.05rem; }
  .stat-power { grid-column: 1 / -1; }
  .build-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding: 8px; gap: 8px; overflow-y: auto; }
  .build-grid { gap: 5px; height: auto; aspect-ratio: 6 / 5; }
  .build-main { align-content: start; }
  .build-palette { display: flex; overflow-x: auto; padding-bottom: 4px; align-items: flex-start; }
  .pal { flex: 0 0 auto; grid-template-columns: 30px auto; padding: 6px 10px 6px 6px; }
  .pal-ico { width: 30px; height: 30px; }
  .pal kbd { display: none; }
}

/* ================= QUIZ ================= */
.quiz { padding: clamp(18px, 4vw, 40px); min-height: 420px; display: grid; align-content: center; gap: 14px; }
.quiz-intro { text-align: center; display: grid; gap: 14px; justify-items: center; }
.quiz-intro h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.quiz-intro p { color: var(--text-dim); margin: 0; }
.quiz-cast { display: flex; }
.quiz-cast img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); margin-left: -12px; box-shadow: 0 0 16px var(--c); }
.quiz-cast img:first-child { margin-left: 0; }
.quiz-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.quiz-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); transition: width .4s var(--ease); }
.quiz-count { margin: 0; font-family: var(--font-cond); letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; color: var(--pink); }
.quiz-q { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 3.4vw, 2.1rem); outline: none; animation: msgIn .35s var(--ease); }
.quiz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .quiz-answers { grid-template-columns: 1fr; } }
.quiz-a { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(10,22,64,.7); color: var(--text); text-align: left; font-size: 1rem; font-weight: 600; transition: all .2s var(--ease); animation: msgIn .4s var(--ease) both; }
.quiz-a:nth-child(2) { animation-delay: .05s; } .quiz-a:nth-child(3) { animation-delay: .1s; } .quiz-a:nth-child(4) { animation-delay: .15s; }
.quiz-a kbd { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,79,134,.2); border: 1px solid var(--pink); font-family: var(--font-display); font-size: .85rem; }
.quiz-a:hover { border-color: var(--pink); background: rgba(255,79,134,.15); transform: translateY(-2px); }
.quiz-a.is-picked { background: var(--pink); border-color: #fff; transform: scale(1.02); }
.quiz-result { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; animation: msgIn .5s var(--ease); }
.quiz-result-art { position: relative; border-radius: 18px; overflow: hidden; border: 2px solid var(--c); box-shadow: 0 0 40px -6px var(--c); }
.quiz-result-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.quiz-badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-display); text-transform: uppercase; font-size: .8rem; padding: 4px 10px; border-radius: 6px; background: var(--c); color: #04081a; }
.quiz-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--c); text-shadow: 0 0 24px var(--c); outline: none; margin: 4px 0 10px; }
.quiz-result-body p { color: var(--text-dim); }
.quiz-traits { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.quiz-traits li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c); font-family: var(--font-cond); letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; }
.quiz-guide { font-size: .88rem; }
@media (max-width: 700px) { .quiz-result { grid-template-columns: 1fr; } }