:root {
  --px: 3px;
  --bg: #0a0916; --bg2: #14122c; --panel: #1c1a3e; --panel2: #262358;
  --line: #4b45a6; --line-dk: #07061a; --hi: #7a73e6; --lo: #100e2a;
  --text: #ebe9ff; --muted: #8d89c7;
  --gold: #ffc23d; --gold-dk: #b7791f; --gold-hi: #ffe28a;
  --r0: #aab3c8; --r1: #4fe08a; --r2: #4aa8ff; --r3: #fff3c4; --r4: #c65cff; --r5: #ffb61e;
  --soul: #c65cff; --danger: #ff4b5c; --ok: #4fe08a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #050410; color: var(--text);
  font-family: 'FP', 'Courier New', monospace; font-size: 12px; line-height: 1.5;
  -webkit-font-smoothing: none; font-smooth: never;
  display: flex; align-items: center; justify-content: center; min-height: 100dvh; overflow: hidden;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(#1a1838 1px, transparent 1px); background-size: 12px 12px; opacity: .5; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
button, select, input { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.dim { color: var(--muted); }

/* ── 像素框與按鈕 ── */
.pxbox { position: relative; background: var(--panel); margin: var(--px);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    inset var(--px) var(--px) 0 0 var(--hi), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--lo); }
.pxbox.dark { background: var(--lo); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--line-dk), 0 var(--px) 0 0 var(--line-dk), calc(-1 * var(--px)) 0 0 0 var(--line-dk), var(--px) 0 0 0 var(--line-dk),
    inset var(--px) var(--px) 0 0 #07061a, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 #1f1c48; }
.pxbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; margin: var(--px); background: var(--panel2); color: var(--text); line-height: 1;
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    inset var(--px) var(--px) 0 0 var(--hi), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--lo), 0 var(--px) 0 0 var(--line-dk), 0 calc(2 * var(--px)) 0 0 var(--line-dk); }
.pxbtn:active, .pxbtn.pressed { transform: translateY(var(--px)); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    inset var(--px) var(--px) 0 0 var(--lo), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--hi); }
.pxbtn.gold { background: var(--gold); color: #2a1a05; box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--gold-dk), 0 var(--px) 0 0 var(--gold-dk), calc(-1 * var(--px)) 0 0 0 var(--gold-dk), var(--px) 0 0 0 var(--gold-dk),
    inset var(--px) var(--px) 0 0 var(--gold-hi), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--gold-dk), 0 var(--px) 0 0 #4a2f0a, 0 calc(2 * var(--px)) 0 0 #4a2f0a; }
.pxbtn.gold:active, .pxbtn.gold.pressed { box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--gold-dk), 0 var(--px) 0 0 var(--gold-dk), calc(-1 * var(--px)) 0 0 0 var(--gold-dk), var(--px) 0 0 0 var(--gold-dk),
    inset var(--px) var(--px) 0 0 var(--gold-dk), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--gold-hi); }
.pxbtn:disabled { opacity: .45; cursor: not-allowed; }
.pxbtn.dim { opacity: .5; }
.pxbtn.poor { filter: saturate(.2) brightness(.7); }
.pxbtn.big { padding: 14px 16px; font-size: 24px; }
.pxbtn.sm { padding: 6px 10px; }
.pxbtn .coin, .pxbtn img { width: 16px; height: 16px; }
.pxbtn.big .coin { width: 24px; height: 24px; }
.pxbtn.shake { animation: btnShake 320ms steps(2) 0s 1; }
@keyframes btnShake { 0%{transform:translateX(-4px)} 25%{transform:translateX(4px)} 50%{transform:translateX(-3px)} 75%{transform:translateX(3px)} 100%{transform:none} }
.chip { padding: 6px 8px; margin: 0; background: var(--lo); color: var(--muted); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.chip.on { color: #0a0916; background: var(--text); }
.chip.on.c0 { background: var(--r0); } .chip.on.c1 { background: var(--r1); } .chip.on.c2 { background: var(--r2); } .chip.on.c3 { background: var(--r3); } .chip.on.c4 { background: var(--r4); } .chip.on.c5 { background: var(--r5); }
.chip.gold { color: #2a1a05; background: var(--gold); box-shadow: 0 0 0 var(--px) var(--gold-dk); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.link { color: var(--muted); text-decoration: underline; padding: 6px 0; margin: 0; }
.sel { flex: 1; min-width: 0; padding: 6px 8px; background: var(--lo); color: var(--text); box-shadow: 0 0 0 var(--px) var(--line-dk); appearance: none; -webkit-appearance: none; }
.sel.num { flex: none; width: 60px; text-align: center; }

/* ── 外殼 ── */
.phone { position: relative; width: min(100vw, 420px); height: min(100dvh, 860px); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 480px) and (min-height: 700px) { .phone { box-shadow: 0 0 0 3px #2a2660, 0 0 0 6px #07061a, 0 24px 60px rgba(0,0,0,.6); } }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; will-change: transform; }
.hud { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.stat { display: flex; align-items: center; gap: 5px; font-size: 24px; line-height: 1; }
.stat img { width: 16px; height: 16px; }
.stat .num { font-variant-numeric: tabular-nums; }
.stat.pop { animation: pop 180ms steps(2); }
.stat.sm { font-size: 12px; color: var(--soul); }
.stat.sm img { width: 12px; height: 12px; }
@keyframes pop { 50% { transform: scale(1.12); } }
.hud .sp, .row .sp, .g-head .sp, .g-top .sp { flex: 1; }
.mute { padding: 6px 6px; margin: 0; font-size: 12px; color: var(--muted); background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.mute.on { color: var(--text); }
.mute.off { text-decoration: line-through; }
main { flex: 1; position: relative; overflow: hidden; }
.sec { position: absolute; inset: 0; padding: 6px 12px 10px; overflow-y: auto; overflow-x: hidden; display: none; flex-direction: column; gap: 8px; scrollbar-width: none; }
.sec::-webkit-scrollbar { display: none; }
.sec.active { display: flex; animation: secIn 140ms steps(3) both; }
@keyframes secIn { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.tabbar { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg2); box-shadow: 0 -3px 0 0 var(--line-dk); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px; margin: var(--px); color: var(--muted); background: var(--panel); position: relative;
  box-shadow: 0 calc(-1*var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1*var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line), inset var(--px) var(--px) 0 0 var(--hi), inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 var(--lo); }
.tab img { width: 24px; height: 24px; }
.tab.active { color: var(--gold); background: var(--panel2); transform: translateY(-3px);
  box-shadow: 0 calc(-1*var(--px)) 0 0 var(--gold-dk), 0 var(--px) 0 0 var(--gold-dk), calc(-1*var(--px)) 0 0 0 var(--gold-dk), var(--px) 0 0 0 var(--gold-dk), inset var(--px) var(--px) 0 0 var(--hi), inset calc(-1*var(--px)) calc(-1*var(--px)) 0 0 var(--lo), 0 calc(2*var(--px)) 0 0 var(--line-dk); }
.tab .dot { position: absolute; top: 4px; right: 10px; width: 6px; height: 6px; background: var(--danger); box-shadow: 0 0 0 3px var(--panel); display: none; }
.tab.dot-on .dot { display: block; animation: blink 900ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.fab { flex: none; width: 64px; height: 64px; margin: -30px 2px 0; padding: 0; position: relative; z-index: 2; animation: fabBob 1.4s steps(2) infinite; }
.fab img { width: 64px; height: 64px; filter: drop-shadow(0 4px 0 #07061a); }
.fab:active img { transform: translateY(3px); filter: none; }
@keyframes fabBob { 50% { transform: translateY(-3px); } }

/* ── 首頁 ── */
.hero { padding: 14px 14px 12px; }
.hero h1 { font-size: 24px; line-height: 1.2; color: var(--gold); margin-bottom: 4px; }
.hero p { color: var(--muted); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card { padding: 10px 12px; }
.card .lbl { color: var(--muted); }
.card .val { font-size: 24px; line-height: 1.2; }
.row { display: flex; align-items: center; gap: 8px; }
.daily { padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.daily .t { flex: 1; }
.daily .t b { display: block; font-weight: normal; }
.daily .t span { color: var(--muted); }
.collect { padding: 10px 12px 8px; }
.collect .lbl { color: var(--muted); margin-bottom: 6px; }
.collect .cr { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.collect .cr .nm { width: 36px; color: var(--rc); }
.collect .cr .bar { flex: 1; height: 9px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); position: relative; }
.collect .cr .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rc); }
.collect .cr .n { width: 36px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.devrow { margin-top: auto; }
.devbox .lbl { color: var(--muted); margin: 8px 0 4px; }

/* ── 任務 ── */
.round { color: var(--muted); }
.t-sum { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.t-sum .bar { flex: 1; height: 9px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); position: relative; }
.t-sum .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ok); transition: width 300ms steps(6); }
.tasks { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.task { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: var(--px); background: var(--panel); box-shadow: 0 0 0 var(--px) var(--line-dk), inset 3px 0 0 0 var(--muted); }
.task.ready { box-shadow: 0 0 0 var(--px) var(--gold-dk), inset 3px 0 0 0 var(--gold); }
.task.done { opacity: .5; }
.task.pop { animation: feedIn 240ms steps(5) both; }
.task .ti { flex: 1; min-width: 0; }
.task .ti b { font-weight: normal; display: block; }
.task .ti span { color: var(--muted); display: block; }
.task .bar { margin-top: 4px; height: 6px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); position: relative; }
.task .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--r2); transition: width 300ms steps(6); }
.task.ready .bar i, .task.done .bar i { background: var(--ok); }
.task .tr { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.task .rw { display: flex; align-items: center; gap: 4px; color: var(--gold); font-variant-numeric: tabular-nums; }
.task .rw img { width: 12px; height: 12px; }
.task .pxbtn { padding: 6px 10px; min-width: 60px; }
.task.ready .pxbtn { animation: blink 1s steps(1) infinite; }
.ticket { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: auto; }
.ticket img { width: 36px; height: 36px; }
.ticket .t { flex: 1; }
.ticket .t b { font-weight: normal; display: block; }
.ticket .t span { color: var(--muted); }
.ticket.has { background: var(--panel); box-shadow: 0 0 0 var(--px) var(--gold-dk), inset 3px 0 0 0 var(--gold); }
.ticket.has .pxbtn { animation: blink 1s steps(1) infinite; }
.ticket.grant { animation: feedIn 300ms steps(5) both; }

/* ── 抽獎 ── */
.g-head { display: flex; align-items: center; gap: 8px; }
.g-head h2, .g-head h3 { font-size: 24px; line-height: 1.2; color: var(--gold); }
.info { padding: 4px 8px; margin: 0; background: var(--lo); color: var(--muted); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.pity { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pity .bar { flex: 1; height: 9px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); position: relative; overflow: hidden; }
.pity .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--r4); transition: width 300ms steps(6); }
.pity .bar i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.25) 9px 12px); }
.pity.full .bar i { background: var(--r5); animation: blink 500ms steps(1) infinite; }
.pity .n { font-variant-numeric: tabular-nums; }
.reel { position: relative; height: 130px; background: var(--lo); overflow: hidden; cursor: pointer; }
.strip { position: absolute; left: 0; top: 12px; display: flex; gap: 6px; will-change: transform; }
.tile { width: 84px; height: 100px; flex: none; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; box-shadow: inset 0 -6px 0 0 var(--rc), inset 0 0 0 3px var(--panel2); }
.tile img { width: 48px; height: 48px; }
.tile .tn { color: var(--muted); line-height: 1; max-width: 78px; overflow: hidden; white-space: nowrap; }
.tile.r3 { box-shadow: inset 0 -6px 0 0 var(--rc), inset 0 0 0 3px #6a6040; }
.tile.r4 { box-shadow: inset 0 -6px 0 0 var(--rc), inset 0 0 0 3px #4a2a80; }
.tile.r5 { box-shadow: inset 0 -6px 0 0 var(--rc), inset 0 0 0 3px #7a5210; background: #2a2340; }
.tile.hit { animation: tileHit 360ms steps(3) both; }
.tile.hit .tn { color: var(--text); }
@keyframes tileHit { 0% { background: #fff; } 34% { background: var(--panel); box-shadow: inset 0 -6px 0 0 var(--rc), inset 0 0 0 3px var(--rc); } 100% { box-shadow: inset 0 -6px 0 0 var(--rc), inset 0 0 0 3px var(--rc); } }
.tile.glow { box-shadow: inset 0 -6px 0 0 var(--rc), inset 0 0 0 3px var(--rc), 0 0 0 3px var(--rc); }
.reel .edge { position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 2; transition: width 900ms steps(6); }
.reel .edge.l { left: 0; background: linear-gradient(90deg, var(--lo) 0, var(--lo) 12px, transparent); }
.reel .edge.r { right: 0; background: linear-gradient(-90deg, var(--lo) 0, var(--lo) 12px, transparent); }
.reel.tension .edge { width: 150px; }
.needle { position: absolute; left: 50%; top: 0; width: 3px; height: 100%; margin-left: -1px; z-index: 3; pointer-events: none; transform-origin: 50% 0; }
.needle i { position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--gold); opacity: .85; }
.needle b { position: absolute; left: 0; top: 0; width: 3px; height: 3px; background: var(--gold);
  box-shadow: -9px 0 var(--gold), -6px 0 var(--gold), -3px 0 var(--gold), 3px 0 var(--gold), 6px 0 var(--gold), 9px 0 var(--gold), -6px 3px var(--gold), -3px 3px var(--gold), 0 3px var(--gold), 3px 3px var(--gold), 6px 3px var(--gold), -3px 6px var(--gold), 0 6px var(--gold), 3px 6px var(--gold), 0 9px var(--gold); }
.needle b.bot { top: auto; bottom: 9px; box-shadow: 0 -3px var(--gold), -3px 0 var(--gold), 0 0 var(--gold), 3px 0 var(--gold), -6px 3px var(--gold), -3px 3px var(--gold), 0 3px var(--gold), 3px 3px var(--gold), 6px 3px var(--gold), -9px 6px var(--gold), -6px 6px var(--gold), -3px 6px var(--gold), 0 6px var(--gold), 3px 6px var(--gold), 6px 6px var(--gold), 9px 6px var(--gold); }
.reel .hint { position: absolute; left: 6px; top: 3px; padding: 2px 6px; background: var(--lo); color: var(--muted); z-index: 4; pointer-events: none; opacity: 0; line-height: 1.3; }
.reel.spinning .hint { opacity: 1; animation: blink 800ms steps(1) infinite; }
.g-actions { display: flex; gap: 8px; }
.g-actions .pxbtn { flex: 1; }
.g-actions .pxbtn.big { font-size: 24px; }
.g-actions .sub { font-size: 12px; color: inherit; opacity: .8; }
.feed-wrap { flex: 1; min-height: 60px; display: flex; flex-direction: column; gap: 4px; }
.feed-title { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.feed-title i { display: inline-block; width: 6px; height: 6px; background: var(--ok); }
.feed { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.feed li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--panel); box-shadow: 0 0 0 var(--px) var(--line-dk), inset 3px 0 0 0 var(--rc); position: relative; overflow: hidden; animation: feedIn 240ms steps(5) both; }
.feed li::after { content: ''; position: absolute; inset: 0; background: #fff; animation: feedFlash 180ms steps(3) both; pointer-events: none; }
@keyframes feedIn { 0% { transform: translateX(60px); opacity: 0; } 70% { transform: translateX(-4px); opacity: 1; } 100% { transform: none; } }
@keyframes feedFlash { 0% { opacity: .9; } 100% { opacity: 0; } }
.feed li.old { opacity: .45; }
.feed li img { width: 24px; height: 24px; }
.feed li .nm { flex: 1; overflow: hidden; white-space: nowrap; }
.feed li .tg { padding: 2px 5px; color: #0a0916; background: var(--rc); line-height: 1; white-space: nowrap; }
.feed li .tg.pity { background: var(--text); }
.feed li .tg.soul { background: var(--soul); color: #fff; }
.feed li .pt { color: var(--gold); font-variant-numeric: tabular-nums; }
.feed-empty { color: var(--muted); padding: 10px 0; text-align: center; opacity: .6; }
.pool { margin-top: auto; }
.pool-title { color: var(--muted); margin-bottom: 4px; }
.pool-row { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.pool-row::-webkit-scrollbar { display: none; }
.pool-row .p { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--lo); box-shadow: inset 0 -3px 0 0 var(--rc); opacity: .5; }
.pool-row .p img { width: 24px; height: 24px; }
.pool-row .p.owned { background: var(--panel); opacity: 1; }

/* ── 角色頁 ── */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.job { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; margin: var(--px); background: var(--panel); color: var(--muted); text-align: center; box-shadow: 0 0 0 var(--px) var(--line-dk); }
.job img { width: 36px; height: 48px; margin-bottom: 4px; }
.job b { font-weight: normal; color: var(--text); }
.job span { line-height: 1.3; }
.job.on { background: var(--panel2); color: var(--text); box-shadow: 0 0 0 var(--px) var(--gold-dk), inset 0 -3px 0 0 var(--gold); }
.job.on b { color: var(--gold); }
.preview { display: flex; gap: 12px; padding: 10px 12px; align-items: center; }
.preview canvas { width: 108px; height: 96px; flex: none; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.c-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.c-stats .sr { display: flex; justify-content: space-between; color: var(--muted); }
.c-stats .sr b { font-weight: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.c-stats .sr.pv { grid-column: 1 / -1; }
.c-stats .sr.pv b { color: var(--r4); }
.bag-h { color: var(--muted); margin: 6px 0 2px; }
.eq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.eq { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; margin: var(--px); background: var(--panel); color: var(--muted); box-shadow: 0 0 0 var(--px) var(--rc); }
.eq img { width: 36px; height: 36px; }
.eq .empty { width: 36px; height: 36px; background: var(--lo); }
.eq .nm { color: var(--text); max-width: 100%; overflow: hidden; white-space: nowrap; line-height: 1.2; }
.eq .nm.dim { color: var(--muted); }
.eq .updot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: var(--ok); box-shadow: 0 0 0 3px var(--panel); animation: blink 900ms steps(1) infinite; }
.skills { display: flex; flex-direction: column; gap: 6px; }
.skill { padding: 8px 10px; margin: var(--px); background: var(--panel); box-shadow: 0 0 0 var(--px) var(--line-dk), inset 3px 0 0 0 var(--rc); display: flex; flex-direction: column; gap: 3px; }
.skill.locked { opacity: .55; }
.skill .sh { display: flex; align-items: center; gap: 8px; }
.skill .sh img { width: 24px; height: 24px; }
.skill .sh b { font-weight: normal; flex: 1; color: var(--rc); }
.skill .tag { padding: 2px 5px; background: var(--lo); color: var(--muted); line-height: 1; }
.skill .desc { color: var(--muted); }
.skill .eff { color: var(--text); }
.skill .src { color: var(--r2); }
.skill .sf { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.skill .dots { flex: 1; display: flex; gap: 4px; }
.skill .dots i { width: 12px; height: 9px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.skill .dots i.on { background: var(--soul); }
.skill .pxbtn.sm img { width: 12px; height: 12px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; background: var(--panel); box-shadow: 0 0 0 var(--px) var(--rc, var(--line-dk)); }
.slot img { width: 48px; height: 48px; }
.slot .ct { position: absolute; right: 3px; bottom: 2px; color: var(--text); font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; }
.slot .new { position: absolute; left: 0; top: 0; padding: 1px 4px; background: var(--danger); color: #fff; line-height: 1.2; animation: blink 1s steps(1) infinite; }
.bag-empty { color: var(--muted); text-align: center; padding: 20px 0; }
.bag-legend { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); margin-top: auto; padding-top: 6px; }
.bag-legend span { display: inline-flex; align-items: center; gap: 4px; }
.bag-legend i { width: 9px; height: 9px; background: var(--rc); }
.picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; scrollbar-width: none; }
.prow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--lo); box-shadow: inset 3px 0 0 0 var(--rc); }
.prow img { width: 30px; height: 30px; }
.prow .pi { flex: 1; min-width: 0; }
.prow .pi b { font-weight: normal; color: var(--rc); display: block; }
.prow .pi span { color: var(--muted); display: block; }
.prow .tag { padding: 3px 6px; color: #2a1a05; background: var(--gold); line-height: 1; }

/* ── 戰鬥 ── */
.game { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; z-index: 18; background: #0f0c2b; overflow: hidden; }
.game[hidden] { display: none; }
#gcv { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-top { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; align-items: center; gap: 8px; }
.g-top .pxbtn { padding: 6px 10px; }
.g-top .pxbtn.speed { min-width: 44px; font-size: 12px; }
.g-title { color: var(--gold); font-size: 12px; }
.g-stage { font-size: 24px; line-height: 1; color: var(--text); }
.g-stage.pop { animation: pop 200ms steps(2); }
.g-hud { position: absolute; left: 8px; right: 8px; top: 48px; }
.g-hp { position: relative; height: 15px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.g-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--ok); transition: width 120ms steps(3); }
.g-hp i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,.25) 12px 15px); }
.g-hp i.low { background: var(--danger); animation: blink 400ms steps(1) infinite; }
.g-hp span { position: absolute; left: 6px; top: 0; line-height: 15px; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; }
.g-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.g-slots { display: flex; gap: 4px; }
.g-slots .s { width: 30px; height: 30px; background: rgba(16,14,42,.85); box-shadow: 0 0 0 var(--px) var(--rc, var(--line-dk)); display: flex; align-items: center; justify-content: center; }
.g-slots .s img { width: 24px; height: 24px; }
.g-slots .s.empty::after { content: ''; width: 6px; height: 6px; background: var(--line); }
.g-stats { display: flex; gap: 8px; color: var(--muted); margin-left: auto; }
.g-stats b { color: var(--text); font-weight: normal; }
.g-wave { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); }
.g-wave[hidden] { display: none; }
.g-wave .bar { flex: 1; height: 6px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); position: relative; }
.g-wave .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #ff8a3d; }
.g-meta { display: flex; gap: 10px; color: var(--muted); margin-top: 4px; }
.g-meta .buff { color: var(--r4); }
.g-skills { display: flex; gap: 4px; margin-top: 5px; }
.g-skills .sk { position: relative; width: 30px; height: 30px; background: rgba(16,14,42,.9); box-shadow: 0 0 0 var(--px) var(--rc); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.g-skills .sk img { width: 22px; height: 22px; }
.g-skills .sk .cd { position: absolute; left: 0; right: 0; bottom: 0; height: var(--cd, 0%); background: rgba(3,2,12,.75); }
.g-skills .sk .lv { position: absolute; right: 1px; bottom: 0; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; line-height: 1; }
.g-skills .sk.ready { box-shadow: 0 0 0 var(--px) var(--rc), 0 0 0 5px rgba(255,255,255,.15); }
.g-skills .hint { color: var(--muted); align-self: center; }
.g-boss { position: absolute; left: 40px; right: 40px; top: 178px; text-align: center; }
.g-boss[hidden] { display: none; }
.g-boss span { color: var(--danger); }
.g-boss .bar { height: 9px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); position: relative; }
.g-boss .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--danger); }
.g-feed { position: absolute; right: 8px; top: 200px; list-style: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; pointer-events: none; }
.g-feed li { padding: 3px 6px; background: rgba(16,14,42,.85); box-shadow: 0 0 0 var(--px) var(--line-dk), inset 3px 0 0 0 var(--rc, var(--ok)); animation: feedIn 200ms steps(4) both; }
.g-combo { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-size: 36px; color: var(--gold); pointer-events: none; opacity: 0; text-shadow: 3px 3px 0 #000, -3px 0 0 #000, 0 -3px 0 #000, 3px 0 0 #000, 0 3px 0 #000; }
.g-combo.in { animation: stamp 260ms steps(5) both; }
.g-stamp { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 36px; color: #fff; pointer-events: none; opacity: 0; text-shadow: 3px 3px 0 #000, -3px 0 0 #000, 0 -3px 0 #000, 3px 0 0 #000, 0 3px 0 #000; }
.g-stamp.in { animation: stamp 300ms steps(6) both; }
.g-warn { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-size: 24px; color: #ff8a3d; pointer-events: none; opacity: 0; text-shadow: 2px 2px 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 2px 0 0 #000, 0 2px 0 #000; }
.g-warn.in { animation: warnIn 1.8s steps(1) both; }
@keyframes warnIn { 0%,20%,40%,60% { opacity: 1; } 10%,30%,50%,100% { opacity: 0; } }
.g-items { position: absolute; left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.g-items::-webkit-scrollbar { display: none; }
.g-items .s { position: relative; flex: none; width: 48px; height: 48px; background: rgba(16,14,42,.9); box-shadow: 0 0 0 var(--px) var(--rc); display: flex; align-items: center; justify-content: center; margin: var(--px); }
.g-items .s img { width: 30px; height: 30px; }
.g-items .s .ct { position: absolute; right: 2px; bottom: 0; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; }
.g-items .s:active { transform: translateY(2px); }
.g-items .hint { align-self: center; color: var(--muted); }
.g-dead { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3,2,12,.7); animation: fadeIn 300ms steps(4) both; }
.g-dead[hidden] { display: none; }
.g-dead .card { width: 100%; padding: 16px 14px; text-align: center; animation: secIn 200ms steps(4) both; }
.g-dead .ttl { font-size: 24px; color: var(--danger); margin-bottom: 8px; }
.g-dead .ttl.gold { color: var(--gold); }
.g-dead .st b { font-weight: normal; color: var(--gold); }
.g-dead .st { line-height: 1.8; }
.g-dead .st .bonus { color: var(--r4); }
.g-dead .tip { color: var(--muted); margin: 8px 0 12px; }
.g-dead .row .pxbtn { flex: 1; }
.stage-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; scrollbar-width: none; }
.stage-card { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.stage-card .sh { display: flex; align-items: center; gap: 10px; }
.stage-card .sh img { width: 36px; height: 36px; }
.stage-card .sh b { font-weight: normal; font-size: 24px; line-height: 1; color: var(--rc); flex: 1; }
.stage-card .diff { color: var(--danger); }
.stage-card .si { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.stage-card .si .rec { color: var(--text); }
.stage-card .row .pxbtn { flex: 1; padding: 8px 4px; }
.modal.select .box { padding: 0; background: none; box-shadow: none; }

/* ── 覆蓋層 ── */
#fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#flash { position: absolute; inset: 0; z-index: 21; pointer-events: none; opacity: 0; background: #fff; }
#vig { position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: 0; transition: opacity 900ms steps(8); background: radial-gradient(ellipse at 50% 38%, transparent 30%, rgba(3,2,12,.92) 85%); }
.scan { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: .45; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
#toast { position: absolute; left: 12px; right: 12px; bottom: 170px; z-index: 35; padding: 10px 12px; text-align: center; transform: translateY(20px); opacity: 0; pointer-events: none; }
#toast.show { animation: toastIn 200ms steps(3) both; }
#toast.hide { animation: toastOut 200ms steps(3) both; }
@keyframes toastIn { to { transform: none; opacity: 1; } }
@keyframes toastOut { from { transform: none; opacity: 1; } to { transform: translateY(20px); opacity: 0; } }
.modal { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.show { display: flex; }
.modal .bg { position: absolute; inset: 0; background: rgba(3,2,12,.78); }
.modal .box { position: relative; width: 100%; padding: 14px; animation: secIn 140ms steps(3) both; }
.modal h3 { font-size: 24px; line-height: 1.2; color: var(--gold); margin-bottom: 8px; }
.modal .g-head h3 { margin-bottom: 0; }
.modal .g-head { margin-bottom: 8px; }
.rates { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.rates td { padding: 5px 0; border-bottom: 3px solid var(--lo); }
.rates td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rates .sw { display: inline-block; width: 9px; height: 9px; background: var(--rc); margin-right: 6px; vertical-align: middle; }
.modal p { color: var(--muted); margin-bottom: 10px; }
.modal > .box > .pxbtn { width: calc(100% - 6px); }
#dev.modal { align-items: flex-end; }
#dev .box { max-height: 80vh; overflow-y: auto; scrollbar-width: none; }
#dev .row { margin-top: 4px; }

/* ── 結果卡 ── */
.sheet { position: absolute; inset: 0; z-index: 25; display: none; flex-direction: column; justify-content: flex-end; }
.sheet.show { display: flex; }
.sheet .bg { position: absolute; inset: 0; background: rgba(3,2,12,.7); animation: fadeIn 200ms steps(4) both; }
@keyframes fadeIn { from { opacity: 0; } }
.sheet .card { position: relative; margin: 6px; padding: 18px 14px 14px; animation: sheetUp 240ms steps(5) both; overflow: hidden; }
@keyframes sheetUp { from { transform: translateY(110%); } }
.sheet .rays { position: absolute; left: 50%; top: 92px; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg, var(--rc) 0deg 9deg, transparent 9deg 22.5deg); animation: spin 14s linear infinite; }
.sheet .rays.on { opacity: .08; }
.sheet .rays.on.r5 { opacity: .14; }
@keyframes spin { to { transform: rotate(360deg); } }
.sheet .stage { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; }
.sheet.five .stage { height: 30px; }
.sheet.five .shadow { display: none; }
.sheet .stage img { width: 96px; height: 96px; opacity: 0; }
.sheet .stage img.drop { animation: drop 260ms steps(4) both; }
@keyframes drop { 0% { transform: translateY(-60px) scale(.6); opacity: 0; } 60% { transform: translateY(6px) scale(1.05); opacity: 1; } 100% { transform: none; opacity: 1; } }
.sheet .stage img.float { animation: floaty 1.6s steps(6) infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.sheet .shadow { position: absolute; left: 50%; bottom: 14px; width: 60px; height: 6px; margin-left: -30px; background: rgba(0,0,0,.5); }
.sheet .name { text-align: center; font-size: 24px; line-height: 1.2; min-height: 29px; }
.sheet .name .cur { display: inline-block; width: 12px; height: 20px; background: var(--text); vertical-align: -3px; animation: blink 500ms steps(1) infinite; }
.sheet .stamp-wrap { height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 2px; }
.stamp { display: inline-block; padding: 6px 14px; font-size: 24px; line-height: 1; color: #0a0916; background: var(--rc); opacity: 0; position: relative; box-shadow: 0 0 0 3px #0a0916, 0 0 0 6px var(--rc); }
.stamp.in { animation: stamp 300ms steps(6) both; }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-8deg); opacity: 0; } 50% { transform: scale(.9) rotate(2deg); opacity: 1; } 70% { transform: scale(1.08) rotate(0); } 100% { transform: none; opacity: 1; } }
.stamp.r5 { font-size: 36px; padding: 8px 18px; }
.stamp.pity { background: var(--text); font-size: 12px; padding: 5px 8px; align-self: center; }
.stamp.quiet { opacity: 1; animation: fadeIn 160ms steps(2) both; }
.sheet .pts { text-align: center; font-size: 24px; color: var(--gold); line-height: 1.2; min-height: 29px; font-variant-numeric: tabular-nums; opacity: 0; }
.sheet .pts.on { opacity: 1; }
.sheet .extra { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sheet .extra .xl { animation: fadeIn 200ms steps(3) both; }
.sheet .extra .gold { color: var(--gold); }
.sheet .extra .soul { color: var(--soul); }
.sheet .extra .ok { color: var(--ok); }
.sheet .extra .dim { color: var(--muted); }
.sheet .actions { display: flex; gap: 8px; margin-top: 12px; visibility: hidden; }
.sheet .actions.on { visibility: visible; animation: fadeIn 120ms steps(2) both; }
.sheet .actions .pxbtn { flex: 1; }
.sheet .five { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.sheet .five .s { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--panel2); box-shadow: 0 0 0 var(--px) var(--rc); opacity: 0; }
.sheet .five .s.in { animation: drop 200ms steps(3) both; }
.sheet .five .s img { width: 36px; height: 36px; }
.sheet .five .s.best { transform: translateY(-4px); box-shadow: 0 0 0 var(--px) var(--rc), 0 0 0 6px #0a0916, 0 0 0 9px var(--rc); }
.sheet .sub { text-align: center; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .sheet .rays { animation: none; } .sheet .stage img.float { animation: none; } }