/* ============================================
   ZAP-N ARCADE — contained game-world canvas
   ============================================
   The 2026-06-11 revamp: every mini-game plays INSIDE a fixed "stage" — a
   deep-indigo game world with its own HUD, like the real Optiver assessment
   (and unlike the old floating-pills-on-white-page look). All chrome (timer,
   score, back) lives in-stage; the site page just frames it.
   Palette is intentionally NOT the site theme: the stage is its own world. */

.zarc-wrap { max-width: 920px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-10); }

/* ---- the stage ---- */
.zarc {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(160deg, #5d66c4 0%, #4a52a8 55%, #3f4795 100%);
  box-shadow: 0 18px 50px rgba(63, 71, 149, .35), inset 0 1px 0 rgba(255,255,255,.18);
  min-height: 600px;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #fff;
  user-select: none; -webkit-user-select: none;
}
/* soft floating dots, like the real assessment's bubbly backdrop */
.zarc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.07) 0 46px, transparent 47px),
    radial-gradient(circle at 88% 14%, rgba(255,255,255,.05) 0 30px, transparent 31px),
    radial-gradient(circle at 78% 82%, rgba(255,255,255,.06) 0 56px, transparent 57px),
    radial-gradient(circle at 6% 78%, rgba(255,255,255,.05) 0 38px, transparent 39px);
}
.zarc > * { position: relative; z-index: 1; }

/* ---- in-stage HUD ---- */
.zarc-hud {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 10px;
}
.zarc-hud__back {
  appearance: none; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff;
  border-radius: 999px; padding: 7px 14px;
  font: 600 .82rem/1 Inter, sans-serif;
  transition: background .15s;
}
.zarc-hud__back:hover { background: rgba(255,255,255,.28); }
.zarc-hud__title { font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; margin-right: auto; display: flex; align-items: center; gap: 8px; }
.zarc-hud__tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px 9px; }
.zarc-pill {
  background: rgba(20, 24, 66, .35);
  border-radius: 999px; padding: 7px 13px;
  font: 700 .85rem/1 'JetBrains Mono', monospace;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.zarc-pill b { font-weight: 800; }
.zarc-pill--hot { background: #e8554d; animation: zarc-blink .8s ease-in-out infinite alternate; }
@keyframes zarc-blink { from { opacity: 1; } to { opacity: .72; } }

/* ---- timebar: draining strip under the HUD ---- */
.zarc-timebar { height: 5px; margin: 0 18px; border-radius: 99px; background: rgba(20,24,66,.3); overflow: hidden; }
.zarc-timebar__fill { height: 100%; border-radius: 99px; background: #7ef0c0; transition: width .95s linear, background .3s; }
.zarc-timebar__fill.is-low { background: #ffb35c; }
.zarc-timebar__fill.is-crit { background: #ff6b62; }

/* ---- main play area ---- */
.zarc-play {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 14px 22px 26px; gap: 16px;
  animation: zarc-in .28s cubic-bezier(.22,1.2,.36,1);
}
@keyframes zarc-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* white "card" panels inside the world */
.zarc-panel {
  background: #f7f8ff; color: #2c3060;
  border-radius: 16px; padding: 16px 20px;
  box-shadow: 0 6px 0 rgba(20,24,66,.22);
}
.zarc-label { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }

/* big primary action buttons */
.zarc-btn {
  appearance: none; cursor: pointer; border: 0;
  border-radius: 14px; padding: 14px 30px;
  font: 800 1rem/1 Inter, sans-serif; letter-spacing: .02em;
  color: #2c3060; background: #fff;
  box-shadow: 0 5px 0 rgba(20,24,66,.3);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.zarc-btn:hover { filter: brightness(1.05); }
.zarc-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(20,24,66,.3); }
.zarc-btn:disabled { opacity: .45; cursor: default; }
.zarc-btn--go { background: #7ef0c0; }
.zarc-btn--warn { background: #ffd66b; }
.zarc-btn--ghost { background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 5px 0 rgba(20,24,66,.18); }
.zarc-btn--big { font-size: 1.15rem; padding: 18px 40px; border-radius: 16px; }

/* feedback flashes */
.zarc-flash-ok { animation: zarc-ok .45s; }
@keyframes zarc-ok { 0% { box-shadow: 0 0 0 0 rgba(126,240,192,.9); } 100% { box-shadow: 0 0 0 26px rgba(126,240,192,0); } }
.zarc-shake { animation: zarc-shake .4s; }
@keyframes zarc-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.zarc-toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); background: rgba(20,24,66,.85); color: #fff; font: 700 .85rem/1 Inter, sans-serif; border-radius: 999px; padding: 9px 16px; pointer-events: none; animation: zarc-toast 1s forwards; z-index: 5; }
@keyframes zarc-toast { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }

/* =====================================================
   HUB — game-select inside the world
   ===================================================== */
.zarc-hub { flex: 1; padding: 8px 26px 30px; display: flex; flex-direction: column; }
.zarc-hub__head { text-align: center; margin: 14px 0 22px; }
.zarc-hub__eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.zarc-hub__title { font-size: 2.1rem; font-weight: 800; margin: 4px 0 6px; }
.zarc-hub__lede { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0 auto; font-size: .92rem; }
.zarc-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.zarc-gcard {
  appearance: none; border: 0; cursor: pointer; text-align: left;
  background: #f7f8ff; color: #2c3060; border-radius: 16px; padding: 16px;
  box-shadow: 0 6px 0 rgba(20,24,66,.22);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s, box-shadow .12s;
}
.zarc-gcard:hover { transform: translateY(-3px); box-shadow: 0 9px 0 rgba(20,24,66,.22); }
.zarc-gcard:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(20,24,66,.22); }
.zarc-gcard__top { display: flex; align-items: center; gap: 10px; }
.zarc-gcard__art { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.zarc-gcard__art svg { width: 30px; height: 30px; }
.zarc-gcard__name { font-weight: 800; font-size: 1rem; }
.zarc-gcard__tag { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7b81b9; }
.zarc-gcard__desc { font-size: .8rem; color: #5a5f8e; line-height: 1.45; }
.zarc-gcard__best { margin-top: auto; font: 700 .74rem/1 'JetBrains Mono', monospace; color: #4a52a8; background: #e8eaff; align-self: flex-start; border-radius: 999px; padding: 5px 10px; }
.zarc-gcard__best--empty { color: #9aa0cf; background: #eef0fb; }

/* =====================================================
   END SCREEN
   ===================================================== */
.zarc-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; }
.zarc-done__label { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.zarc-done__big { font: 800 4.6rem/1 'JetBrains Mono', monospace; letter-spacing: -.02em; animation: zarc-score .5s cubic-bezier(.22,1.4,.36,1); }
@keyframes zarc-score { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
.zarc-done__pb { display: inline-block; background: #ffd66b; color: #6b4d00; font: 800 .8rem/1 Inter, sans-serif; border-radius: 999px; padding: 7px 14px; animation: zarc-pb 1s cubic-bezier(.22,1.4,.36,1); }
@keyframes zarc-pb { 0% { transform: scale(0) rotate(-8deg); } 60% { transform: scale(1.15) rotate(2deg); } 100% { transform: none; } }
.zarc-done__sub { color: rgba(255,255,255,.85); font-size: .92rem; max-width: 46ch; }
.zarc-done__rec { display: flex; gap: 18px; font: 600 .8rem/1 Inter, sans-serif; color: rgba(255,255,255,.78); background: rgba(20,24,66,.3); border-radius: 12px; padding: 11px 18px; }
.zarc-done__rec b { color: #fff; font-family: 'JetBrains Mono', monospace; }
.zarc-done__btns { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.zarc-done__hint { font-size: .72rem; color: rgba(255,255,255,.55); }
.zarc-spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.zarc-spark__bar { width: 9px; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.38); }
.zarc-spark__bar.is-top { background: #7ef0c0; }

/* countdown 3-2-1 overlay */
.zarc-count { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(43,48,106,.55); z-index: 6; backdrop-filter: blur(2px); }
.zarc-count__n { font: 800 6rem/1 'JetBrains Mono', monospace; color: #fff; animation: zarc-count .82s cubic-bezier(.22,1.3,.36,1); }
@keyframes zarc-count { 0% { transform: scale(.3); opacity: 0; } 35% { transform: scale(1.1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }

/* =====================================================
   TOWER
   ===================================================== */
.zt-target { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zt-target .zarc-panel { padding: 12px 22px 10px; }
.zt-row { display: flex; align-items: flex-end; justify-content: center; gap: 26px; }
.zt-row--mini { gap: 16px; transform: scale(.62); transform-origin: top center; margin-bottom: -34px; }
.zt-tw { display: flex; flex-direction: column-reverse; align-items: center; min-width: 84px; min-height: 132px; justify-content: flex-start; padding: 8px 6px 0; border-radius: 12px; transition: background .12s; }
/* PLAY towers: a generous grab zone — the whole column is the drag handle
   (user feedback 2026-06-11: precisely grabbing the small top block sucked) */
.zt-tw--play { min-width: 112px; min-height: 215px; padding: 36px 14px 6px; }
.zt-tw--play { cursor: pointer; }
.zt-tw--play:hover, .zt-tw--over { background: rgba(255,255,255,.12); }
.zt-tw--sel { background: rgba(126,240,192,.2); outline: 2px dashed rgba(126,240,192,.8); }
.zt-base { width: 84px; height: 10px; border-radius: 5px; background: rgba(20,24,66,.4); margin-top: 4px; order: -1; }
.zt-blk {
  width: 64px; height: 26px; border-radius: 7px; margin-top: 4px;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.3);
  transition: transform .1s;
}
.zt-blk--mini { width: 46px; height: 19px; }
.zt-blk--top { cursor: grab; }
.zt-blk--top:hover { transform: translateY(-3px); }
.zt-blk--ghost { position: fixed; z-index: 99; pointer-events: none; transform: translate(-50%, -60%) rotate(-4deg) scale(1.06); opacity: .92; }
.zt-meta { display: flex; gap: 12px; align-items: center; }
.zt-win { background: #7ef0c0; color: #0c5132; font-weight: 800; border-radius: 12px; padding: 10px 18px; animation: zarc-pb .5s cubic-bezier(.22,1.4,.36,1); }

/* =====================================================
   NUMBER BOX — 24-game cross layout, click-to-build
   ===================================================== */
.znb-cross { position: relative; display: grid; grid-template-columns: 96px 96px; grid-template-rows: 96px 96px; gap: 14px; }
.znb-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; background: #2b306a; color: #fff; display: grid; place-items: center; font: 800 1.5rem/1 'JetBrains Mono', monospace; box-shadow: 0 0 0 7px rgba(20,24,66,.25); z-index: 2; }
.znb-tile {
  appearance: none; border: 0; cursor: pointer;
  border-radius: 18px; background: #f7f8ff; color: #2c3060;
  font: 800 2rem/1 'JetBrains Mono', monospace;
  box-shadow: 0 6px 0 rgba(20,24,66,.22);
  display: grid; place-items: center;
  transition: transform .1s, box-shadow .1s, opacity .15s;
}
.znb-tile:hover { transform: translateY(-2px); }
.znb-tile.is-sel { outline: 4px solid #7ef0c0; transform: scale(1.05); }
.znb-tile.is-used { opacity: 0; pointer-events: none; transform: scale(.6); }
.znb-tile--res { background: #dff7ec; }
.znb-ops { display: flex; gap: 10px; }
.znb-op { appearance: none; border: 0; cursor: pointer; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.16); color: #fff; font: 800 1.4rem/1 'JetBrains Mono', monospace; box-shadow: 0 4px 0 rgba(20,24,66,.22); transition: transform .1s; }
.znb-op:hover { background: rgba(255,255,255,.3); }
.znb-op.is-sel { background: #7ef0c0; color: #0c5132; }
.znb-foot { display: flex; gap: 10px; align-items: center; }
.znb-trail { font: 600 .8rem/1.5 'JetBrains Mono', monospace; color: rgba(255,255,255,.75); min-height: 1.3em; }

/* =====================================================
   STOCK INDICATOR — dial gauge
   ===================================================== */
.zsi-dial { width: 400px; max-width: 86vw; }
.zsi-dial svg { width: 100%; height: auto; display: block; }
/* NOTE: needle rotation lives ONLY in the SVG transform attribute
   (rotate(a 160 160)). A CSS transform-origin here detaches the needle from
   the hub under viewBox scaling — burned 2026-06-11, do not re-add. */
.zsi-fill-pop { animation: zsi-pop .4s cubic-bezier(.22,1.4,.36,1); }
@keyframes zsi-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* =====================================================
   BALLOON
   ===================================================== */
.zbal-stage { height: 240px; display: grid; place-items: center; }
.zbal { transition: transform .18s cubic-bezier(.22,1.3,.36,1); transform-origin: center bottom; cursor: pointer; filter: drop-shadow(0 10px 16px rgba(20,24,66,.35)); }
.zbal:active { transform: scale(var(--zbal-s, 1)) translateY(2px); }
.zbal--wobble { animation: zbal-wobble .3s; }
@keyframes zbal-wobble { 0%,100% { rotate: 0deg; } 30% { rotate: 2.4deg; } 70% { rotate: -2deg; } }
.zbal-burst { font-size: 4.6rem; animation: zbal-burst .55s cubic-bezier(.22,1.3,.36,1); }
@keyframes zbal-burst { 0% { transform: scale(.4); opacity: 0; } 40% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }
.zbal-board { display: flex; gap: 0; background: rgba(20,24,66,.35); border-radius: 14px; overflow: hidden; }
.zbal-board__cell { padding: 11px 20px; text-align: center; }
.zbal-board__cell + .zbal-board__cell { border-left: 1px solid rgba(255,255,255,.14); }
.zbal-board__k { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.zbal-board__v { font: 800 1.15rem/1.2 'JetBrains Mono', monospace; }
.zbal-btns { display: flex; gap: 12px; }

/* =====================================================
   PINCODE
   ===================================================== */
.zpin-cells { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.zpin-cell {
  width: 54px; height: 66px; border-radius: 12px;
  background: #f7f8ff; color: #2c3060;
  font: 800 1.9rem/1 'JetBrains Mono', monospace;
  display: grid; place-items: center;
  box-shadow: 0 5px 0 rgba(20,24,66,.22);
}
.zpin-cell--flash { animation: zpin-flash .42s cubic-bezier(.22,1.3,.36,1); }
@keyframes zpin-flash { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.zpin-cell--empty { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); color: #fff; }
.zpin-cell--filled { background: #fff; }
.zpin-cell--ok { background: #7ef0c0; color: #0c5132; }
.zpin-cell--bad { background: #ff8a82; color: #66110b; }
.zpin-hiddeninput { position: absolute; opacity: 0; pointer-events: none; }

/* =====================================================
   TASK SWITCH — dual-task (math odd/even + arrows same/diff)
   ===================================================== */
.zts-card { min-width: 320px; max-width: 86%; text-align: center; padding: 22px 28px; }
.zts-q { font: 800 2.2rem/1.2 'JetBrains Mono', monospace; letter-spacing: .02em; }
.zts-q--arrows { font-size: 1.7rem; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.zts-rule { margin-top: 10px; font-size: .8rem; font-weight: 700; color: #5a5f8e; }
.zts-rule b { color: #2c3060; }
.zts-rule--switch { animation: zts-rule .5s; color: #b3261e; }
@keyframes zts-rule { 0%,100% { transform: none; } 30% { transform: scale(1.12); } }
.zts-keys { display: flex; gap: 14px; }
.zts-streak { font: 700 .78rem/1 'JetBrains Mono', monospace; color: #ffd66b; min-height: 1em; }

/* ---- page framing below the stage ---- */
.zarc-foot { text-align: center; margin-top: 14px; font-size: .82rem; color: var(--text-secondary); }
.zarc-foot a { color: var(--accent-primary); font-weight: 600; }

@media (max-width: 560px) {
  .zarc { min-height: 540px; border-radius: 16px; }
  .zarc-hud { padding: 10px 12px 8px; flex-wrap: wrap; }
  .zarc-done__big { font-size: 3.4rem; }
  .znb-cross { grid-template-columns: 78px 78px; grid-template-rows: 78px 78px; }
  .znb-mid { width: 62px; height: 62px; font-size: 1.2rem; }
  .zt-row { gap: 12px; }
  .zt-tw { min-width: 64px; }
  .zt-tw--play { min-width: 92px; min-height: 190px; }
  .zt-blk { width: 52px; }
}

/* =====================================================
   PATTERN MATCH (mastermind: shape × colour × pattern)
   ===================================================== */
.zpm-board { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.zpm-pick { display: flex; flex-direction: column; gap: 8px; }
.zpm-row { display: flex; gap: 8px; align-items: center; }
.zpm-row__k { width: 74px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); text-align: right; }
.zpm-opt { appearance: none; border: 0; cursor: pointer; width: 52px; height: 52px; border-radius: 12px; background: #f7f8ff; box-shadow: 0 4px 0 rgba(20,24,66,.22); display: grid; place-items: center; transition: transform .1s; }
.zpm-opt:hover { transform: translateY(-2px); }
.zpm-opt.is-sel { outline: 4px solid #7ef0c0; }
.zpm-opt svg { width: 34px; height: 34px; }
.zpm-hist { display: flex; flex-direction: column-reverse; gap: 7px; min-width: 210px; max-height: 240px; overflow-y: auto; padding: 4px; }
.zpm-g { display: flex; align-items: center; gap: 8px; background: rgba(20,24,66,.3); border-radius: 12px; padding: 7px 10px; animation: zarc-in .25s; }
.zpm-g__tile { width: 38px; height: 38px; border-radius: 9px; background: #f7f8ff; display: grid; place-items: center; }
.zpm-g__tile svg { width: 26px; height: 26px; }
.zpm-g__fb { display: flex; gap: 5px; font: 800 .72rem/1 'JetBrains Mono', monospace; }
.zpm-g__fb span { border-radius: 6px; padding: 4px 6px; }
.zpm-g__fb .ok { background: #7ef0c0; color: #0c5132; }
.zpm-g__fb .no { background: #ff8a82; color: #66110b; }
.zpm-solved { background: #7ef0c0; color: #0c5132; font-weight: 800; border-radius: 12px; padding: 9px 16px; animation: zarc-pb .5s cubic-bezier(.22,1.4,.36,1); }

/* =====================================================
   CODE COMPARE
   ===================================================== */
.zcc-ref { font: 800 2rem/1 'JetBrains Mono', monospace; letter-spacing: .14em; padding: 16px 28px; }
.zcc-opts { display: flex; flex-direction: column; gap: 9px; width: min(420px, 86%); }
.zcc-opt { appearance: none; border: 0; cursor: pointer; border-radius: 12px; padding: 12px 16px; background: #f7f8ff; color: #2c3060; font: 700 1.12rem/1 'JetBrains Mono', monospace; letter-spacing: .12em; box-shadow: 0 4px 0 rgba(20,24,66,.22); transition: transform .08s; }
.zcc-opt:hover { transform: translateY(-2px); }
.zcc-strikes { font: 800 1.1rem/1 'JetBrains Mono', monospace; letter-spacing: .2em; color: #ff8a82; min-height: 1.2em; }
.zcc-rt { height: 7px; width: min(420px, 86%); border-radius: 99px; background: rgba(20,24,66,.3); overflow: hidden; }
.zcc-rt__fill { height: 100%; background: #ffd66b; border-radius: 99px; }

/* =====================================================
   ZAP SCORE banner (hub composite + share)
   ===================================================== */
.zsc { background: rgba(20,24,66,.32); border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.zsc__num { text-align: center; }
.zsc__big { font: 800 2.6rem/1 'JetBrains Mono', monospace; }
.zsc__k { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.zsc__bars { flex: 1; min-width: 220px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
.zsc__bar { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.85); }
.zsc__bar i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; font-style: normal; }
.zsc__bar i b { display: block; height: 100%; border-radius: 99px; background: #7ef0c0; }
.zsc__bar span { width: 86px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zsc__share { white-space: nowrap; }

/* drag must own the gesture on touch — without this the browser scrolls instead */
.zt-tw--play, .zt-blk--top, .zbal, .zsi-dial { touch-action: none; }
.zt-blk { -webkit-user-drag: none; }

/* =====================================================
   LEADERBOARD
   ===================================================== */
.zlb-hubbtn { margin-top: 12px; font-size: .85rem; padding: 10px 20px; }
.zlb-strip { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 40px; }
.zlb-rank { background: rgba(20,24,66,.32); border-radius: 999px; padding: 9px 16px; font-size: .85rem; }
.zlb-rank b { font-family: 'JetBrains Mono', monospace; color: #ffd66b; }
.zlb-claim { font-size: .85rem; color: rgba(255,255,255,.85); font-weight: 700; }
.zlb-name { border: 0; border-radius: 12px; padding: 11px 14px; font: 700 .9rem/1 Inter, sans-serif; width: 150px; background: #f7f8ff; color: #2c3060; box-shadow: inset 0 2px 4px rgba(20,24,66,.15); }
.zlb-name:focus { outline: 3px solid #7ef0c0; }
.zlb-mini { padding: 11px 16px; font-size: .82rem; }
.zlb-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 640px; }
.zlb-tab { appearance: none; border: 0; cursor: pointer; border-radius: 999px; padding: 8px 13px; font: 700 .76rem/1 Inter, sans-serif; background: rgba(255,255,255,.14); color: #fff; }
.zlb-tab.is-on { background: #fff; color: #2c3060; }
.zlb-board { width: min(480px, 90%); padding: 10px 14px; }
.zlb-table { width: 100%; border-collapse: collapse; }
.zlb-table td { padding: 8px 6px; border-bottom: 1px solid #e8eaff; font-size: .88rem; }
.zlb-table tr:last-child td { border-bottom: 0; }
.zlb-table tr.is-me td { background: #dff7ec; font-weight: 800; }
.zlb-r { width: 44px; color: #7b81b9; font: 700 .8rem/1 'JetBrains Mono', monospace; }
.zlb-n { font-weight: 700; }
.zlb-s { text-align: right; font: 800 .9rem/1 'JetBrains Mono', monospace; color: #4a52a8; }
.zlb-yours { margin-top: 8px; text-align: center; font-size: .78rem; color: #7b81b9; }
.zlb-yours b { color: #2c3060; font-family: 'JetBrains Mono', monospace; }

/* ---- juice round (judge round 1 gaps) ---- */
.zarc-mute { appearance: none; border: 0; cursor: pointer; background: rgba(255,255,255,.14); border-radius: 999px; width: 34px; height: 34px; font-size: .9rem; display: grid; place-items: center; transition: background .15s; }
.zarc-mute:hover { background: rgba(255,255,255,.26); }
.zarc-pill--bump { animation: zarc-bump .3s cubic-bezier(.22,1.5,.36,1); }
@keyframes zarc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.zarc-confetti { position: absolute; left: 50%; top: 42%; width: 9px; height: 9px; border-radius: 2px; z-index: 7; pointer-events: none; animation: zarc-confetti 1.25s cubic-bezier(.16,.8,.36,1) forwards; }
@keyframes zarc-confetti { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 220px)) rotate(var(--rot)); opacity: 0; } }
.zarc-streakpill { background: rgba(255,214,107,.18); color: #ffd66b; font: 800 .82rem/1 Inter, sans-serif; border-radius: 999px; padding: 8px 15px; }
.zlb-hook { font-size: .78rem; color: #ffd66b; font-weight: 700; min-height: 1em; }
.zarc-intro { max-width: 520px; text-align: left; }
.zarc-intro__lead { font-weight: 800; font-size: 1.02rem; line-height: 1.45; }
.zarc-intro__more { margin-top: 10px; }
.zarc-intro__more summary { cursor: pointer; font-weight: 700; font-size: .8rem; color: #7b81b9; }
.zarc-intro__more p { font-size: .85rem; line-height: 1.55; color: #5a5f8e; margin: 8px 0 0; }
.zt-tw--play { cursor: grab; }
.zt-tw--play:active { cursor: grabbing; }

/* ---- Stock Indicator: multi-gauge grid ---- */
.zsi-grid { display: grid; grid-template-columns: repeat(3, 150px); gap: 16px; justify-content: center; }
.zsi-slot { width: 150px; height: 100px; }
.zsi-g { appearance: none; border: 0; cursor: pointer; width: 150px; height: 100px; border-radius: 14px; background: rgba(20,24,66,.30); padding: 6px 10px; animation: zarc-in .18s; touch-action: none; }
.zsi-g svg { width: 100%; height: 100%; display: block; }
.zsi-g--hit { background: rgba(126,240,192,.45); }
.zsi-g--bad { background: rgba(255,107,98,.5); }
.zsi-g--gone { opacity: .25; transition: opacity .18s; }
@media (max-width: 560px) { .zsi-grid { grid-template-columns: repeat(2, 140px); } .zsi-slot, .zsi-g { width: 140px; height: 94px; } }

/* ── 80 in 8 — multiple-choice mental-math screen ─────────────────── */
.zsm { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 480px; }
.zsm__q {
  font: 800 3rem/1 'JetBrains Mono', monospace; color: #fff;
  letter-spacing: .02em; text-align: center; min-height: 1.1em;
  text-shadow: 0 3px 0 rgba(20,24,66,.28);
}
.zsm__eq { opacity: .5; }
.zsm__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.zsm__opt {
  position: relative; display: flex; align-items: center; justify-content: center;
  font: 800 1.6rem/1 'JetBrains Mono', monospace; color: #2c3060;
  background: #f7f8ff; border: 0; border-radius: 14px; padding: 18px 14px;
  box-shadow: 0 6px 0 rgba(20,24,66,.22); cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.zsm__opt:hover { transform: translateY(-1px); }
.zsm__opt:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(20,24,66,.22); }
.zsm__opt-k {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font: 800 .72rem/1 'Inter', sans-serif; color: #9aa0d6;
  background: rgba(99,102,241,.12); border-radius: 6px; padding: 4px 6px;
}
.zsm__skip {
  font: 700 .92rem/1 'Inter', sans-serif; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14); border: 0; border-radius: 999px;
  padding: 11px 22px; cursor: pointer; transition: background .12s;
}
.zsm__skip:hover { background: rgba(255,255,255,.24); }
.zsm__hint { font-size: .8rem; color: rgba(255,255,255,.7); text-align: center; max-width: 34em; }
@media (max-width: 560px) {
  .zsm__q { font-size: 2.3rem; }
  .zsm__opt { font-size: 1.35rem; padding: 16px 12px; }
}

/* ---- post-round recommendation + cross-links (conversion) ---- */
/* the arcade is always dark — use fixed light text so the rec never goes dark-on-dark */
.zarc-rec { text-align: left; max-width: 460px; margin: 16px auto 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-left: 3px solid #60a5fa; border-radius: 12px; padding: 14px 16px; }
.zarc-rec--strong { border-left-color: #34d399; }
.zarc-rec--ok { border-left-color: #60a5fa; }
.zarc-rec--low { border-left-color: #fb923c; }
.zarc-rec__msg { font-size: .92rem; line-height: 1.6; color: #dde4f1; margin-bottom: 11px; }
.zarc-rec__links { display: flex; flex-wrap: wrap; gap: 8px; }
.zarc-rec__links a { font-size: .8rem; font-weight: 700; text-decoration: none; color: #bcd3ff; background: rgba(96,165,250,.16); border: 1px solid rgba(96,165,250,.34); border-radius: 999px; padding: 6px 12px; transition: background .12s; }
.zarc-rec__links a:hover { background: rgba(96,165,250,.28); color: #e6efff; }

/* ---- zap-n SEO content section (homepage-quality formatting) ---- */
.zseo { max-width: 780px; margin: 56px auto 32px; padding: 0 20px; }
.zseo__h1 { font: 800 1.7rem/1.25 Inter, system-ui, sans-serif; color: var(--text-primary, #111); letter-spacing: -.015em; margin: 0 0 14px; }
.zseo__h2 { font: 800 1.3rem/1.3 Inter, system-ui, sans-serif; color: var(--text-primary, #111); margin: 34px 0 12px; }
.zseo__lead { font-size: 1.06rem; line-height: 1.7; color: var(--text-secondary, #4a5160); margin: 0 0 8px; }
.zseo p { font-size: 1rem; line-height: 1.72; color: var(--text-secondary, #4a5160); margin: 0 0 14px; }
.zseo a { color: var(--accent-primary, #3b6fd4); font-weight: 600; text-decoration: none; }
.zseo a:hover { text-decoration: underline; }
.zseo__games { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.zseo__games li { background: var(--bg-secondary, #f6f8fb); border: 1px solid var(--border-color, rgba(0,0,0,.07)); border-radius: 11px; padding: 12px 14px; }
.zseo__games li b { display: block; font-size: .98rem; color: var(--text-primary, #111); margin-bottom: 3px; }
.zseo__games li span { font-size: .85rem; line-height: 1.45; color: var(--text-muted, #8a93a3); }
.zseo__faq { display: flex; flex-direction: column; gap: 10px; }
.zseo__qa { background: var(--bg-secondary, #f6f8fb); border: 1px solid var(--border-color, rgba(0,0,0,.07)); border-radius: 12px; padding: 15px 17px; }
.zseo__q { font: 700 1rem/1.4 Inter, system-ui, sans-serif; color: var(--text-primary, #111); margin-bottom: 6px; }
.zseo__qa p { margin: 0; font-size: .95rem; }
.zseo__cross { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-color, rgba(0,0,0,.08)); font-size: .98rem; }
@media (max-width: 560px) { .zseo__games { grid-template-columns: 1fr; } }

/* ---- compact link cards (replaces the SEO wall on zap-n) ---- */
.zlinks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.zlinks a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; background: var(--bg-secondary, #f6f8fb); border: 1px solid var(--border-color, rgba(0,0,0,.08)); border-radius: 12px; padding: 14px 16px; transition: border-color .12s, transform .1s, background .12s; }
.zlinks a:hover { border-color: var(--accent-primary, #4c8bf5); transform: translateY(-1px); background: var(--bg-elevated, #fff); }
.zlinks a b { font-size: .95rem; color: var(--text-primary, #111); }
.zlinks a span { font-size: .82rem; color: var(--text-muted, #8a93a3); }
@media (max-width: 560px) { .zlinks { grid-template-columns: 1fr; } }