@font-face { font-family: 'Lilita'; src: url(assets/fonts/lilita.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Fredoka'; src: url(assets/fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: block; }

:root {
  --bg: #0b0f2a;
  --bg2: #151a45;
  --panel: rgba(16, 20, 56, 0.86);
  --panel-hi: rgba(36, 44, 110, 0.9);
  --line: rgba(130, 150, 255, 0.28);
  --text: #ffffff;
  --muted: #aab4ea;
  --cyan: #2ee6ff;
  --pink: #ff3fa4;
  --purple: #8a5cff;
  --gold: #ffcc00;
  --green: #3dff8b;
  --red: #ff3355;
  --cell-empty: rgba(255, 255, 255, 0.08);
  --head: 'Lilita', 'Fredoka', system-ui, sans-serif;
  --body: 'Fredoka', system-ui, sans-serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--body); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img { -webkit-user-drag: none; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; letter-spacing: 0.5px; margin: 0; }

#app { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
#modal { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 100; }
#boot img { width: 70%; max-width: 380px; animation: pulse 1.2s ease-in-out infinite; }

/* ---------- shared bits ---------- */
.home-bg, .arena-bg { position: fixed; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.home-bg { background-image: linear-gradient(180deg, rgba(11, 15, 42, 0.55), rgba(11, 15, 42, 0.92) 70%), url(assets/img/arenas/cyber.webp); }
.arena-tint { position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 8, 30, 0.35), rgba(5, 8, 30, 0.15) 40%, rgba(5, 8, 30, 0.75) 70%, rgba(5, 8, 30, 0.95)); }
.arena-tint.strong { background: rgba(5, 8, 30, 0.78); }

.btn { font-family: var(--head); font-size: 20px; padding: 12px 22px; border-radius: 16px; letter-spacing: 0.5px; transition: transform 0.08s; }
.btn:active { transform: scale(0.95); }
.btn-primary { background: linear-gradient(180deg, #43f0ff, #1a8cff); color: #04122e; box-shadow: 0 5px 0 #0a4fa8, 0 0 24px rgba(46, 230, 255, 0.45); }
.btn-danger { background: linear-gradient(180deg, #ff6680, #e0193f); box-shadow: 0 5px 0 #8a0b25; }
.btn-ghost { background: rgba(255, 255, 255, 0.1); border: 2px solid var(--line); }
.btn-big { font-size: 22px; padding: 14px 24px; }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); font-size: 26px; line-height: 1; display: grid; place-items: center; }

.coin-dot { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6a8, #ffcc00 45%, #c98a00); box-shadow: 0 0 0 2px #a86f00 inset; vertical-align: -0.1em; margin-right: 0.3em; }
.coin-dot.big { width: 1.1em; height: 1.1em; }

.spin { animation: spin 0.45s linear infinite; }
/* home screen: slow enough to see the blade design */
.spin-slow { animation: spin 2.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes float { 50% { transform: translateY(-8px); } }

.blade-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 70%); filter: blur(10px); opacity: 0.75; animation: pulse 1.6s ease-in-out infinite; }

.toast { position: fixed; left: 50%; bottom: calc(28px + var(--sb)); transform: translate(-50%, 30px); background: var(--panel-hi); border: 2px solid var(--line); padding: 12px 18px; border-radius: 14px; font-weight: 600; z-index: 80; opacity: 0; transition: 0.25s; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.flash { position: fixed; inset: 0; z-index: 49; pointer-events: none; animation: flash 0.45s ease-out forwards; }
@keyframes flash { from { opacity: 0.8; } to { opacity: 0; } }

.shake { animation: shake 0.4s; }
.shake-big { animation: shake 0.6s; animation-timing-function: cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 2px); } 40%, 60% { transform: translate(7px, -1px); } }
.pulse { animation: pulse 0.4s 2; }

/* ---------- modal ---------- */
.modal-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 5, 20, 0.7); pointer-events: auto; opacity: 0; transition: opacity 0.2s; }
.modal-wrap.show { opacity: 1; }
.modal-wrap.hide { opacity: 0; pointer-events: none; }
.modal-card { width: min(380px, 100%); background: linear-gradient(180deg, #1d2463, #121641); border: 2px solid var(--line); border-radius: 24px; padding: 24px 20px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(138, 92, 255, 0.25); transform: scale(0.9); transition: transform 0.2s; }
.modal-wrap.show .modal-card { transform: scale(1); }
.modal-card h2 { font-size: 26px; margin-bottom: 8px; }
.modal-body { color: var(--muted); font-size: 16px; line-height: 1.4; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
.modal-actions .btn { flex: 1; }
.big-emoji { font-size: 48px; margin-bottom: 6px; }
.text-in { width: 100%; font: inherit; font-size: 22px; font-weight: 600; text-align: center; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: rgba(0, 0, 0, 0.3); color: #fff; margin-bottom: 14px; outline: none; user-select: text; -webkit-user-select: text; }
.text-in:focus { border-color: var(--cyan); }
.text-in.err { border-color: var(--red); }
.check { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 4px 0 14px; color: var(--muted); }
.check input { width: 20px; height: 20px; accent-color: var(--red); }

.pin-dots { display: flex; gap: 16px; justify-content: center; margin: 14px 0 18px; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cyan); }
.pin-dots i.on { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.pin-dots.bad { animation: shake 0.4s; }
.pin-dots.bad i { border-color: var(--red); background: var(--red); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pinpad button { height: 58px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); font-family: var(--head); font-size: 26px; }
.pinpad button:active { background: rgba(46, 230, 255, 0.3); }

/* ---------- home ---------- */
.home { min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: calc(10px + var(--st)) 16px calc(12px + var(--sb)); }
.logo { width: min(86%, 400px); filter: drop-shadow(0 6px 18px rgba(46, 230, 255, 0.35)); margin-top: 4px; }
.player-card { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 10px 14px; }
.lvl-badge { width: 56px; height: 56px; flex: none; border-radius: 16px; background: linear-gradient(160deg, var(--purple), var(--pink)); display: grid; place-items: center; font-family: var(--head); font-size: 13px; line-height: 0.9; text-align: center; box-shadow: 0 0 16px rgba(255, 63, 164, 0.45); }
.lvl-badge b { display: block; font-size: 26px; font-weight: 400; }
.player-info { flex: 1; min-width: 0; }
.hello { font-family: var(--head); font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpbar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 4px 0 2px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 6px; }
.xptxt { font-size: 12px; color: var(--muted); }
.hero-blade { position: relative; width: min(66vw, 36vh, 300px); aspect-ratio: 1; display: grid; place-items: center; margin-top: 4px; }
.hero-blade .blade-img { width: 88%; position: relative; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); }
.blade-glow.big { inset: -6%; }
.hero-name { position: absolute; bottom: -10px; font-family: var(--head); font-size: 20px; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, 0.8); }
.next-boss { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 2px solid var(--line); border-radius: 30px; padding: 4px 16px 4px 4px; margin-top: 8px; }
.next-boss img { width: 44px; height: 44px; object-fit: contain; background: rgba(255, 255, 255, 0.08); border-radius: 50%; }
.next-boss small { display: block; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.next-boss b { font-family: var(--head); font-weight: 400; font-size: 18px; }
.btn-battle { width: 100%; max-width: 420px; font-family: var(--head); font-size: 36px; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, #ffe14d, #ff8a00); color: #3a1600; box-shadow: 0 7px 0 #b34d00, 0 0 34px rgba(255, 170, 0, 0.55); animation: pulse 1.8s ease-in-out infinite; }
.btn-battle:active { transform: translateY(4px); box-shadow: 0 3px 0 #b34d00; animation: none; }
.money-row { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.money-card { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; text-align: center; }
.money-card small { display: block; color: var(--muted); font-size: 12px; }
.money-card b { font-family: var(--head); font-weight: 400; font-size: 26px; }
.money-card.owed b { color: var(--gold); }
.bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 420px; margin-top: auto; }
.bottom-nav button { background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 8px 2px; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bottom-nav button span { font-size: 24px; }
.bottom-nav button:active { background: var(--panel-hi); }
.bottom-nav button { position: relative; }
.nav-dot { position: absolute; top: 6px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--red); animation: pulse 1s infinite; }
.card { position: relative; }
.new-tag { position: absolute; top: 6px; right: 6px; z-index: 1; font-family: var(--head); font-size: 13px; padding: 2px 8px; border-radius: 8px; background: linear-gradient(180deg, #ff6680, #e0193f); box-shadow: 0 0 10px rgba(255, 51, 85, 0.6); animation: pulse 1s infinite; }

/* ---------- sub pages ---------- */
.page { padding: calc(8px + var(--st)) 16px calc(24px + var(--sb)); max-width: 560px; margin: 0 auto; }
.sub-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: calc(-8px - var(--st)) -16px 14px; position: sticky; top: 0; padding: calc(10px + var(--st)) 16px 10px; z-index: 2; background: linear-gradient(180deg, rgba(11, 15, 42, 0.98) 70%, rgba(11, 15, 42, 0)); }
.sub-header h1 { text-align: center; font-size: 30px; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.sub-header .icon-btn { font-size: 34px; padding-bottom: 4px; }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; font-size: 18px; }
.sec { font-size: 20px; margin: 22px 0 10px; }
.sec small { font-family: var(--body); font-size: 13px; color: var(--muted); }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { flex: 1; padding: 10px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); font-family: var(--head); font-size: 17px; color: var(--muted); }
.tab.on { background: linear-gradient(180deg, #43f0ff, #1a8cff); color: #04122e; border-color: transparent; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.card.sel { border-color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.card-art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%); border-radius: 14px; }
.card-art img { width: 86%; height: 86%; object-fit: contain; }
.card b { font-family: var(--head); font-weight: 400; font-size: 17px; }
.card small { font-size: 12px; color: var(--muted); }
.card.sel small { color: var(--c); font-weight: 700; }
.card.locked .card-art { background: rgba(0, 0, 0, 0.25); }
.card.locked img { filter: brightness(0) drop-shadow(0 0 2px rgba(130, 150, 255, 0.6)); opacity: 0.8; }

/* stats */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 4px; text-align: center; }
.tile b { display: block; font-family: var(--head); font-weight: 400; font-size: 26px; color: var(--cyan); }
.tile small { font-size: 12px; color: var(--muted); }
.chart { position: relative; height: 150px; display: flex; align-items: flex-end; gap: 3px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 18px 8px 8px; }
.chart .bar { flex: 1; min-width: 0; max-width: 32px;background: linear-gradient(180deg, #6f86ff, #3a48b8); border-radius: 4px 4px 2px 2px; position: relative; }
.chart .bar.w { background: linear-gradient(180deg, #ffe14d, #ff9900); }
.chart .bar.p { background: linear-gradient(180deg, #7dffb0, #1fc46a); }
.chart .bar span { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); }
.chart-line { position: absolute; left: 8px; right: 8px; border-top: 2px dashed rgba(255, 204, 0, 0.6); margin-bottom: 8px; pointer-events: none; }
.chart-line span { position: absolute; right: -4px; top: -16px; font-size: 10px; color: var(--gold); }
.chart .bar, .chart-line { max-height: calc(100% - 0px); }
.tables { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; }
.trow { display: grid; grid-template-columns: 38px 1fr 42px; align-items: center; gap: 8px; font-weight: 600; }
.tl { font-family: var(--head); font-size: 17px; }
.tbar { height: 12px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; }
.tbar i { display: block; height: 100%; border-radius: 6px; }
.tp { text-align: right; font-size: 14px; color: var(--muted); }
.tough { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tough-i { background: rgba(255, 51, 85, 0.14); border: 2px solid rgba(255, 51, 85, 0.4); border-radius: 12px; padding: 8px 10px; }
.tough-i b { display: block; font-family: var(--head); font-weight: 400; font-size: 19px; }
.tough-i small { color: var(--muted); }
.heatmap { display: grid; grid-template-columns: 20px repeat(12, 1fr); gap: 2px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 8px; }
.hm-h { font-size: 10px; color: var(--muted); display: grid; place-items: center; font-weight: 700; }
.hm-c { aspect-ratio: 1; border-radius: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* history */
.money-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.money-summary div { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 4px; text-align: center; }
.money-summary small { display: block; color: var(--muted); font-size: 12px; }
.money-summary b { font-family: var(--head); font-weight: 400; font-size: 22px; }
.money-summary .gold { color: var(--gold); }
.rules-note { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0 14px; }
.hist { display: grid; gap: 8px; }
.hrow { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px 8px 8px; }
.hrow.pay { background: rgba(61, 255, 139, 0.12); border-color: rgba(61, 255, 139, 0.4); }
.hico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-size: 26px; background: rgba(255, 255, 255, 0.07); border-radius: 10px; }
.hico img { width: 100%; height: 100%; object-fit: contain; }
.hmain { flex: 1; min-width: 0; }
.hmain b { display: block; font-family: var(--head); font-weight: 400; font-size: 19px; }
.vs-name { font-family: var(--body); font-size: 13px; color: var(--muted); }
.hmain small { color: var(--muted); font-size: 12px; }
.hmoney { font-family: var(--head); font-size: 20px; color: var(--muted); }
.hmoney.got { color: var(--gold); }

/* settings */
.set-group { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 12px 14px; margin-bottom: 14px; }
.set-group h3 { font-size: 18px; margin-bottom: 6px; color: var(--muted); }
.set-group.parent { border-color: rgba(255, 204, 0, 0.35); }
.set-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 2px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 17px; font-weight: 600; text-align: left; }
.set-row:first-of-type { border-top: 0; }
.set-row small { color: var(--muted); font-weight: 400; font-size: 12px; text-align: right; }
.set-row.danger span { color: #ff7a90; }
.set-info { font-size: 14px; color: var(--muted); padding: 4px 2px 8px; }
.set-info b { color: var(--gold); }
.sw { position: absolute; opacity: 0; pointer-events: none; }
.sw-ui { width: 52px; height: 30px; flex: none; border-radius: 16px; background: rgba(255, 255, 255, 0.18); position: relative; transition: 0.2s; }
.sw-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: 0.2s; }
.sw:checked + .sw-ui { background: var(--green); }
.sw:checked + .sw-ui::after { left: 25px; }
.version { text-align: center; color: var(--muted); font-size: 12px; opacity: 0.6; }

/* ---------- battle ---------- */
.screen-battle { overflow: hidden; }
.battle { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(8px + var(--st)) 14px calc(12px + var(--sb)); }
.battle-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qcount { font-family: var(--head); font-size: 24px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 4px 14px; }
.qcount span { color: var(--cyan); }
.prize-badge { font-family: var(--head); font-size: 20px; background: var(--panel); border: 2px solid rgba(255, 204, 0, 0.6); color: var(--gold); border-radius: 14px; padding: 6px 12px; min-width: 76px; text-align: center; }
.prize-badge.lost { color: var(--muted); border-color: var(--line); }
.prize-badge.lost .coin-dot { filter: grayscale(1); opacity: 0.5; }

.boss-zone { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.boss-name { font-family: var(--head); font-size: 22px; color: var(--c); text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, 0.8); }
.hpbar { display: flex; gap: 2px; width: min(92%, 380px); height: 16px; background: rgba(0, 0, 0, 0.55); border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 8px; padding: 2px; margin-top: 2px; }
.hpbar i { flex: 1; background: linear-gradient(180deg, #ff7a7a, #e0193f); border-radius: 2px; transition: 0.3s; }
.hpbar i.mark50 { box-shadow: 2px 0 0 0 var(--gold); }
.hpbar i.mark100 { box-shadow: -3px 0 0 0 var(--gold); }
.hpbar i.gone { background: rgba(255, 255, 255, 0.07); }
.hp-labels { position: relative; width: min(92%, 380px); height: 14px; font-size: 11px; font-weight: 700; color: var(--gold); }
.hp-labels span { position: absolute; top: 0; }
.hp-labels .lbl50 { transform: translateX(-30%); }
.hp-labels .lbl100 { transform: translateX(-2px); }
.boss-wrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.boss-img { max-height: 100%; max-width: 80%; object-fit: contain; animation: float 2.2s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); }
.boss-wrap.boss-hurt .boss-img { animation: hurt 0.45s; }
@keyframes hurt { 0% { filter: brightness(3) saturate(0); transform: translateX(0) scale(0.94); } 25% { transform: translateX(-14px) rotate(-4deg); } 50% { transform: translateX(12px) rotate(3deg); filter: brightness(1.6); } 75% { transform: translateX(-6px); } 100% { transform: none; } }
.boss-wrap.attack .boss-img { animation: lunge 0.55s ease-in-out; }
@keyframes lunge { 30% { transform: translateY(-14px) scale(0.95); } 55% { transform: translateY(60px) scale(1.18); filter: brightness(1.4) drop-shadow(0 0 20px #f00); } 100% { transform: none; } }

.clash-zone { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; }
.player-wrap { position: relative; width: clamp(96px, 27vw, 128px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.player-wrap .blade-img { width: 76%; position: relative; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); }
.player-wrap.dash { animation: dash 0.42s cubic-bezier(.5,0,.5,1); }
@keyframes dash { 45% { transform: translate(-28vw, -26vh) scale(0.8); } 100% { transform: none; } }
.timer-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 8; }
.timer-ring .track { stroke: rgba(255, 255, 255, 0.15); }
.timer-ring .bar { stroke: var(--cyan); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--cyan)); }
.player-wrap.danger .timer-ring .bar { stroke: var(--red); filter: drop-shadow(0 0 8px var(--red)); }
.player-wrap.danger { animation: pulse 0.5s infinite; }
.timer-num { position: absolute; bottom: -6px; right: -4px; font-family: var(--head); font-size: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--cyan); display: grid; place-items: center; }
.player-wrap.danger .timer-num { border-color: var(--red); color: var(--red); }

.qcard { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.96); color: #121641; border-radius: 22px; padding: 10px 12px; text-align: center; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 0 30px rgba(46, 230, 255, 0.35); border: 4px solid var(--cyan); }
.qcard.pop { animation: qpop 0.25s ease-out; }
@keyframes qpop { from { transform: scale(0.7); opacity: 0; } }
.qcard.right { border-color: var(--green); background: #e9fff1; box-shadow: 0 6px 0 rgba(0,0,0,.3), 0 0 30px rgba(61, 255, 139, 0.6); }
.qcard.wrong { border-color: var(--red); background: #fff0f2; box-shadow: 0 6px 0 rgba(0,0,0,.3), 0 0 30px rgba(255, 51, 85, 0.6); animation: shake 0.4s; }
.qtext { font-family: var(--head); font-size: clamp(36px, 11vw, 54px); line-height: 1.05; white-space: nowrap; }
.qtext .times { color: var(--pink); }
.qtext .eq { color: #8a90b8; }
.qtext b { color: #0a8f45; font-weight: 400; }
.answer { font-family: var(--head); font-size: clamp(30px, 9vw, 44px); min-height: 1.15em; line-height: 1.15; color: #1a8cff; border-top: 3px dashed #c9cff0; margin-top: 4px; padding-top: 2px; }
.answer:empty::after { content: '?'; color: #c9cff0; }
.qcard.wrong .answer { color: var(--red); font-size: clamp(20px, 6vw, 28px); }
.streak { position: absolute; left: 0; top: -14px; font-family: var(--head); font-size: 18px; background: linear-gradient(90deg, #ff8a00, #ff3fa4); padding: 3px 12px; border-radius: 12px; opacity: 0; transform: scale(0.6); transition: 0.2s; }
.streak.show { opacity: 1; transform: none; }
.streak.hot { animation: pulse 0.6s infinite; box-shadow: 0 0 16px #ff3fa4; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.key { height: clamp(52px, 8.4vh, 74px); border-radius: 16px; background: linear-gradient(180deg, #2c3590, #1b2166); border: 2px solid rgba(140, 160, 255, 0.45); box-shadow: 0 5px 0 #0c1040; font-family: var(--head); font-size: clamp(28px, 8vw, 36px); transition: transform 0.05s, box-shadow 0.05s; }
.key.down { transform: translateY(4px); box-shadow: 0 1px 0 #0c1040; background: linear-gradient(180deg, #3d4bc4, #2a3398); }
.key-del { font-size: 28px; background: linear-gradient(180deg, #4a3070, #2e1d4a); box-shadow: 0 5px 0 #170c2a; }
.key-go { background: linear-gradient(180deg, #5dff9e, #12c45c); color: #03301a; border-color: #8affbd; box-shadow: 0 5px 0 #08703a; }
.key-go.down { box-shadow: 0 1px 0 #08703a; background: linear-gradient(180deg, #8affbd, #2fe07a); }

.callout { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--head); font-size: 44px; color: #fff; text-shadow: 0 4px 0 #1a1f6b, 0 0 20px var(--cyan); pointer-events: none; opacity: 0; white-space: nowrap; z-index: 5; }
.callout.show { animation: callout 0.9s ease-out forwards; }
.callout.crit { color: #ffe14d; text-shadow: 0 4px 0 #7a3c00, 0 0 24px #ffb300; }
.callout.super { font-size: 40px; color: #fff; text-shadow: 0 4px 0 #5a0b6b, 0 0 30px #ff3fa4, 0 0 60px #ff3fa4; animation-duration: 1.3s; }
.callout.bad { color: #ff6680; text-shadow: 0 4px 0 #5a0016, 0 0 20px #ff0033; }
.callout.money { color: var(--gold); text-shadow: 0 4px 0 #6b4200, 0 0 24px #ffcc00; top: 30%; }
@keyframes callout { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 35% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }

.intro { position: fixed; inset: 0; z-index: 20; background: radial-gradient(circle at 50% 45%, rgba(40, 20, 110, 0.92), rgba(3, 5, 20, 0.97)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity 0.25s; }
.intro.gone { opacity: 0; pointer-events: none; }
.intro-vs { display: flex; align-items: center; gap: 4px; }
.intro-blade { width: 34vw; max-width: 170px; animation: spin 0.45s linear infinite, none; }
.intro-boss { width: 40vw; max-width: 200px; animation: introBoss 0.6s ease-out; }
@keyframes introBoss { from { transform: translateX(60px); opacity: 0; } }
.vs { font-family: var(--head); font-size: 54px; color: var(--gold); text-shadow: 0 4px 0 #7a3c00, 0 0 24px #ff8a00; animation: pulse 0.6s infinite; }
.intro-names { display: flex; gap: 30px; font-family: var(--head); font-size: 22px; text-shadow: 0 2px 0 #000; }
.intro-arena { color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.intro-count { font-family: var(--head); font-size: 96px; height: 110px; color: #fff; text-shadow: 0 6px 0 #1a1f6b, 0 0 30px var(--cyan); opacity: 0; }
.intro-count.pop { animation: count 0.6s ease-out forwards; }
.intro-count.go { color: var(--gold); text-shadow: 0 6px 0 #7a3c00, 0 0 40px #ff8a00; }
@keyframes count { 0% { opacity: 0; transform: scale(2.2); } 30% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0.2; transform: scale(0.9); } }

/* ---------- results ---------- */
.results { min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: calc(16px + var(--st)) 16px calc(20px + var(--sb)); text-align: center; }
.res-title { font-family: var(--head); font-size: 50px; line-height: 1; animation: qpop 0.4s ease-out; }
.res-title.win { color: var(--gold); text-shadow: 0 5px 0 #7a3c00, 0 0 30px #ff9900; }
.res-title.lose { color: #8fd8ff; text-shadow: 0 5px 0 #0b2f66, 0 0 24px #1a8cff; }
.res-sub { color: var(--muted); font-size: 17px; max-width: 320px; }
.res-boss { position: relative; width: min(46vw, 200px); aspect-ratio: 1; }
.res-boss img { width: 100%; height: 100%; object-fit: contain; animation: float 2s ease-in-out infinite; }
.res-boss.ko img { filter: grayscale(0.4) brightness(0.8); transform: rotate(-12deg); animation: none; }
.ko-stamp { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--head); font-size: 64px; color: var(--red); text-shadow: 0 4px 0 #fff, 0 0 20px #ff0033; transform: rotate(-14deg); animation: stamp 0.5s 0.6s ease-out both; }
@keyframes stamp { from { transform: rotate(-14deg) scale(3); opacity: 0; } }
.res-score { font-family: var(--head); }
.res-score .big { font-size: 80px; line-height: 1; color: #fff; text-shadow: 0 5px 0 #1a1f6b; }
.res-score .of { font-size: 30px; color: var(--muted); margin-left: 6px; }
.res-money { font-family: var(--head); font-size: 22px; color: var(--muted); }
.res-money.got { color: var(--gold); font-size: 30px; text-shadow: 0 3px 0 #6b4200; }
.res-badge { background: rgba(61, 255, 139, 0.14); border: 2px solid rgba(61, 255, 139, 0.45); border-radius: 14px; padding: 8px 14px; font-weight: 600; }
.res-xp { font-weight: 600; color: var(--cyan); }
.res-xp b { color: var(--pink); }
.res-unlock { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 2px solid var(--gold); border-radius: 16px; padding: 8px 16px 8px 8px; text-align: left; box-shadow: 0 0 20px rgba(255, 204, 0, 0.4); }
.res-unlock img { width: 60px; }
.res-unlock small { display: block; color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.res-unlock b { font-family: var(--head); font-weight: 400; font-size: 20px; }
.res-misses { width: 100%; max-width: 420px; background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.res-misses h3 { font-size: 18px; margin-bottom: 8px; color: #ff9aac; }
.miss-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.miss { background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 6px; }
.miss b { display: block; font-family: var(--head); font-weight: 400; font-size: 19px; }
.miss small { color: var(--muted); font-size: 12px; }
.res-actions { display: flex; gap: 10px; width: 100%; max-width: 420px; margin-top: 8px; }
.res-actions .btn-primary { flex: 1; }