/* ============================================================
   WREXA ARCADE — launcher card grid, 100-level select, 4 games.
   ============================================================ */

/* ── Launcher card grid (galaxy home) ── */
.ar-launch-wrap { width: calc(100% - 40px); max-width: 1100px; margin: 0 auto 20px; }
.ar-launch-head { text-align: center; margin: 4px 0 14px; }
.ar-launch-head h2 { font-family: 'Lora', Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: .04em; color: #0f172a; margin: 0; }
.ar-launch-head div { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.ar-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ar-card {
  --c: #7b63ff; position: relative; overflow: hidden; cursor: pointer; text-align: left; color: #fff; border: none;
  border-radius: 20px; padding: 16px 16px 15px; min-height: 158px; display: flex; flex-direction: column;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 86%, #1a1430), color-mix(in srgb, var(--c) 55%, #120f26));
  box-shadow: 0 16px 32px -16px var(--c); transition: transform .14s, box-shadow .2s;
}
.ar-card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -16px var(--c); }
.ar-card-glow { position: absolute; top: -50%; right: -15%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,255,255,.30), transparent 65%); pointer-events: none; }
.ar-card-ico { font-size: 32px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.36); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); margin-bottom: 10px; }
.ar-card-nm { font-family: 'Lora', Georgia, serif; font-size: 20px; font-weight: 700; }
.ar-card-sub { font-size: 12px; color: rgba(255,255,255,.86); margin-top: 3px; flex: 1; line-height: 1.4; }
.ar-card-cta { align-self: flex-start; margin-top: 10px; font-weight: 800; font-size: 12px; letter-spacing: .06em; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); padding: 7px 13px; border-radius: 999px; }

/* ── Overlay ── */
.ar-overlay {
  position: fixed; inset: 0; z-index: 9000; overflow: hidden; color: #fff;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(120% 90% at 80% -10%, color-mix(in srgb, var(--g, #7b63ff) 26%, transparent), transparent 60%), linear-gradient(180deg, #15112e 0%, #0a0820 100%);
  -webkit-tap-highlight-color: transparent;
}
.ar-overlay.hidden { display: none; }
.ar-particles { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.ar-overlay.ar-fg::after, .ar-overlay.ar-fr::after { content: ''; position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.ar-overlay.ar-fg::after { animation: arFg .42s ease-out; }
.ar-overlay.ar-fr::after { animation: arFr .42s ease-out; }
@keyframes arFg { 0%{background:radial-gradient(circle,rgba(52,211,153,.26),transparent 60%)} 100%{background:transparent} }
@keyframes arFr { 0%{background:rgba(239,68,68,.22)} 100%{background:transparent} }
body.ar-open { overflow: hidden; }
.ar-screen { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 10; }
.ar-screen.hidden { display: none; }

.ar-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top, 14px)); }
.ar-x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
.ar-x.sm { width: 34px; height: 34px; font-size: 15px; }
.ar-x:hover { background: rgba(255,255,255,.14); }
.ar-lv-title { font-family: 'Lora', Georgia, serif; font-size: 19px; font-weight: 700; }

/* ── Level select ── */
.ar-lv-sub { text-align: center; color: #c7c2e8; font-size: 12.5px; margin-bottom: 12px; }
.ar-lv-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 9px; padding: 0 16px 28px; max-width: 720px; margin: 0 auto; width: 100%; align-content: start; }
.ar-lv { --t: #22c55e; position: relative; aspect-ratio: 1; border-radius: 14px; cursor: pointer; color: #fff; border: 1.5px solid color-mix(in srgb, var(--t) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--t) 26%, #1a1636), #161232); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .1s, box-shadow .15s; }
.ar-lv:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px var(--t); }
.ar-lv b { font-size: 16px; font-weight: 800; }
.ar-lv-st { font-size: 9px; letter-spacing: -1px; color: #fbbf24; }
.ar-lv-lock { font-size: 12px; opacity: .8; }
.ar-lv.locked { opacity: .5; filter: saturate(.4); }
.ar-lv.done { box-shadow: inset 0 0 0 1.5px var(--t); }
.ar-lv.shake { animation: arShake .35s; }
@keyframes arShake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-5px)} }

/* ── Game shell ── */
.ar-hud { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 12px)); }
.ar-lvbadge { font-weight: 800; font-size: 12px; letter-spacing: .05em; padding: 5px 10px; border-radius: 999px; color: #fff; }
.ar-stat { margin-left: auto; font-size: 13.5px; color: #c7c2e8; } .ar-stat b { color: #fff; }
.ar-stage { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 6px 16px; }
.ar-qpanel { padding: 10px 16px max(16px, env(safe-area-inset-bottom, 16px)); max-width: 720px; margin: 0 auto; width: 100%; }
.ar-topic { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c4b5fd; background: rgba(124,99,255,.16); border: 1px solid rgba(124,99,255,.4); padding: 3px 9px; border-radius: 999px; margin-bottom: 7px; }
.ar-q { font-size: clamp(14px,2.5vw,18px); font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.ar-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 560px) { .ar-choices { grid-template-columns: 1fr; } }
.ar-choice { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); border: 1.5px solid rgba(255,255,255,.16); border-radius: 13px; padding: 11px 12px; font-size: 14px; font-weight: 600; line-height: 1.25; box-shadow: 0 4px 0 rgba(0,0,0,.28); transition: transform .08s, border-color .15s, background .15s, box-shadow .08s; min-height: 50px; }
.ar-choice:hover { transform: translateY(-2px); border-color: var(--g,#7b63ff); }
.ar-choice:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.ar-key { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 12px; background: color-mix(in srgb, var(--g,#7b63ff) 70%, #2a2350); border: 1px solid rgba(255,255,255,.32); }
.ar-choice > span { flex: 1; }
.ar-choice.done { pointer-events: none; }
.ar-choice.correct { border-color: #34d399; background: linear-gradient(180deg, rgba(52,211,153,.32), rgba(52,211,153,.12)); box-shadow: 0 4px 0 rgba(16,120,90,.55); }
.ar-choice.correct .ar-key { background: #10b981; }
.ar-choice.wrong { border-color: #fb7185; background: linear-gradient(180deg, rgba(251,113,133,.3), rgba(251,113,133,.1)); animation: arWrong .4s; }
.ar-choice.reveal { border-color: #34d399; }
.ar-choice.fifty-out { opacity: 0; pointer-events: none; }
@keyframes arWrong { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.ar-dmg { position: fixed; z-index: 65; transform: translate(-50%,-50%); font-family: 'Lora', Georgia, serif; font-weight: 800; font-size: 28px; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,.6); animation: arDmg .8s ease-out forwards; }
@keyframes arDmg { 0%{opacity:0; transform:translate(-50%,-20%) scale(.6)} 25%{opacity:1; transform:translate(-50%,-70%) scale(1.15)} 100%{opacity:0; transform:translate(-50%,-150%) scale(1)} }

/* ── ⚔️ Boss Battle ── */
.bz-arena { display: flex; align-items: center; justify-content: center; gap: 14px; }
.bz-arena.bz-shake { animation: arShake .38s; }
.bz-side { flex: 1; max-width: 220px; text-align: center; }
.bz-foe, .bz-hero { font-size: clamp(54px,16vw,90px); line-height: 1; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.bz-foe.hurt { animation: bzHurt .4s; }
@keyframes bzHurt { 0%{transform:scale(1)} 20%{transform:scale(1.18) rotate(-6deg); filter:brightness(2)} 60%{transform:scale(.92) rotate(4deg)} 100%{transform:scale(1)} }
.bz-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin: 10px 0 4px; }
.bz-bar i { display: block; height: 100%; transition: width .25s; }
.bz-boss i { background: linear-gradient(90deg,#ef4444,#f97316); }
.bz-you i { background: linear-gradient(90deg,#22c55e,#34d399); }
.bz-name { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #c7c2e8; }
.bz-vs { font-family: 'Lora', Georgia, serif; font-weight: 800; font-size: 20px; color: #fff; opacity: .7; }

/* ── 💣 Defuse ── */
.bm-bomb { text-align: center; align-self: center; }
.bm-bomb.bm-spark { animation: bmSpark .3s; }
.bm-bomb.bm-blown { animation: bmBlow .5s forwards; }
@keyframes bmSpark { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-6px) rotate(-2deg)} 60%{transform:translateX(6px) rotate(2deg)} }
@keyframes bmBlow { 0%{transform:scale(1)} 40%{transform:scale(1.4); filter:brightness(3)} 100%{transform:scale(0); opacity:0} }
.bm-emoji { font-size: clamp(56px,16vw,96px); line-height: 1; }
.bm-timer { font-family: 'Lora', Georgia, serif; font-weight: 800; font-size: 48px; font-variant-numeric: tabular-nums; color: #f59e0b; margin: 4px 0; }
.bm-timer.low { color: #ff5a5a; animation: bmBlink .5s steps(1) infinite; }
@keyframes bmBlink { 50% { opacity: .35; } }
.bm-wires { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 10px auto; max-width: 320px; }
.bm-wire { width: 22px; height: 8px; border-radius: 4px; background: linear-gradient(90deg,#ef4444,#b91c1c); box-shadow: 0 2px 0 rgba(0,0,0,.3); transition: opacity .2s, transform .2s; }
.bm-wire.cut { opacity: .25; transform: scaleX(.5); background: #475569; }
.bm-label { font-size: 13px; color: #c7c2e8; } .bm-label b { color: #fff; }

/* ── 🏆 Crorepati ── */
.kbc { display: flex; flex-direction: column; align-items: center; height: 100%; }
.kbc-ladder { flex: 1; overflow-y: auto; width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 5px; padding: 4px; }
.kbc-rung { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #c7c2e8; }
.kbc-rung b { color: #fbbf24; font-variant-numeric: tabular-nums; }
.kbc-rung.won { background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.5); color: #fff; }
.kbc-rung.cur { background: linear-gradient(90deg, rgba(251,191,36,.3), rgba(245,158,11,.18)); border-color: #fbbf24; color: #fff; box-shadow: 0 0 18px -4px rgba(251,191,36,.6); animation: kbcPulse 1.2s infinite; }
@keyframes kbcPulse { 50% { box-shadow: 0 0 26px -2px rgba(251,191,36,.85); } }
.kbc-fifty { margin: 10px 0 2px; cursor: pointer; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg,#8b5cf6,#a78bfa); border: none; border-radius: 12px; padding: 9px 20px; box-shadow: 0 8px 18px -8px rgba(139,92,246,.7); }
.kbc-fifty.used, .kbc-fifty:disabled { opacity: .4; cursor: not-allowed; }

/* ── 🏃 Brain Sprint ── */
.rn-track { align-self: stretch; display: flex; flex-direction: column; gap: 14px; padding: 10px 4px; }
.rn-lane { position: relative; height: 54px; border-radius: 14px; background: linear-gradient(90deg, rgba(6,182,212,.10), rgba(255,255,255,.04)); border: 1px dashed rgba(255,255,255,.18); }
.rn-lane2 { background: linear-gradient(90deg, rgba(239,68,68,.08), rgba(255,255,255,.03)); }
.rn-runner { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; left: -16px; transition: left .35s cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.rn-runner.rn-go { animation: rnGo .35s; }
@keyframes rnGo { 50% { transform: translateY(-50%) scale(1.25); } }
.rn-runner.rn-trip { animation: rnTrip .4s; }
@keyframes rnTrip { 50% { transform: translateY(-30%) rotate(-18deg); } }
.rn-finish { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; opacity: .8; }

/* ── Results ── */
.ar-results { align-items: center; justify-content: center; padding: 24px; }
.ar-res-card { width: 100%; max-width: 380px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 26px 24px; box-shadow: 0 30px 70px rgba(0,0,0,.5); animation: arRise .5s ease; }
@keyframes arRise { 0%{opacity:0; transform:translateY(18px) scale(.96)} 100%{opacity:1; transform:none} }
.ar-res-emo { font-size: 50px; line-height: 1; }
.ar-res-title { font-size: 20px; font-weight: 800; margin-top: 4px; }
.ar-res-stars { font-size: 34px; letter-spacing: 4px; margin: 8px 0; color: rgba(255,255,255,.2); }
.ar-res-stars .on { color: #fbbf24; text-shadow: 0 2px 12px rgba(251,191,36,.6); }
.ar-res-sub { font-size: 13px; color: #b9b3dc; margin-bottom: 20px; }
.ar-res-btns { display: flex; flex-direction: column; gap: 10px; }
.ar-btn { cursor: pointer; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: background .15s, transform .1s; }
.ar-btn:hover { background: rgba(255,255,255,.14); } .ar-btn:active { transform: scale(.98); }
.ar-btn-primary { background: linear-gradient(135deg,#5841D8,#7b63ff); border: none; box-shadow: 0 12px 26px -10px rgba(88,65,216,.7); }
.ar-btn-ghost { background: transparent; color: #b9b3dc; }