:root { --ink: #1a1530; --gold: #ffd040; --panel: rgba(22, 18, 54, 0.82); --panel2: rgba(36, 30, 84, 0.9); --line: rgba(255, 255, 255, 0.14); --text: #f4f0ff; --dim: #b8b0d8; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0c0a20; color: var(--text); overflow: hidden; font-family: "Baloo 2", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #241c56, #0c0a20 70%); }
#cv { display: block; box-shadow: 0 0 60px rgba(0,0,0,.6); }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
b { font-weight: 800; }

/* ---------- screens */
.screen { position: absolute; inset: 0; overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 14px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: linear-gradient(rgba(12,10,32,.72), rgba(12,10,32,.86)); backdrop-filter: blur(3px); z-index: 10; touch-action: pan-y; }
.screen.menuScr { background: linear-gradient(180deg, rgba(12,10,32,.15) 0%, rgba(12,10,32,.55) 55%, rgba(12,10,32,.9) 100%); justify-content: center; backdrop-filter: none; }
.menu { width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logo { text-align: center; filter: drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
.logo .l1 { font-size: clamp(36px, 8.5vmin, 72px); font-weight: 900; line-height: 1; letter-spacing: .03em; background: linear-gradient(180deg, #fff8d0 0%, #ffd040 45%, #ff7a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.logo .l2 { color: #fff; font-weight: 800; margin-top: 8px; letter-spacing: .08em; font-size: clamp(13px, 2.2vmin, 17px); text-shadow: 0 2px 0 var(--ink); }
.heroLine { display: flex; gap: 6px; justify-content: center; margin: 2px 0 -4px; }
.heroStand { position: relative; cursor: pointer; transition: transform .15s; text-align: center; }
.heroStand:hover { transform: translateY(-4px) scale(1.04); }
.heroStand::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 26px; height: 10px; border-radius: 50%; background: var(--hc); filter: blur(10px); opacity: .55; z-index: -1; }
.hsName { font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 10px var(--hc); margin-top: -6px; }
.hsName small { display: block; font-size: 11px; color: var(--gold); font-weight: 800; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.mgrid.sub .btn { padding: 10px; font-size: 15px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.stats { color: var(--dim); font-weight: 700; font-size: 13px; }

/* ---------- buttons */
.btn { position: relative; background: linear-gradient(180deg, #ffffff 0%, #e4e0f4 100%); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 12px 14px; font-weight: 900; font-size: 16px; box-shadow: 0 5px 0 var(--ink), 0 8px 18px rgba(0,0,0,.3); transition: transform .07s, box-shadow .07s, filter .15s; overflow: hidden; }
.btn::before { content: ''; position: absolute; left: 8%; right: 8%; top: 3px; height: 40%; border-radius: 12px; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.big { font-size: 20px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.btn.big b { font-size: 26px; line-height: 1; }
.btn.small { font-size: 13px; padding: 7px 11px; border-width: 2px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.btn.red { background: linear-gradient(180deg, #ff8a6a, #e8402a); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.blue { background: linear-gradient(180deg, #6ab8ff, #2a6ae8); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.green { background: linear-gradient(180deg, #6ae88a, #22a84a); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.btn.ghost::before { display: none; }
.btn.on { background: linear-gradient(180deg, #fff3a0, #ffc21a); color: var(--ink); }
.btn:disabled { opacity: .45; }
.btn small { display: block; font-size: 10px; font-weight: 700; opacity: .85; }
.btn.price { min-width: 104px; } .btn.price.poor { opacity: .6; } .btn.price.sell { background: linear-gradient(180deg, #fff3a0, #ffc21a); }
.coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff2a0, #ffc21a 55%, #c88a10); border: 1.5px solid var(--ink); vertical-align: -2px; margin-right: 4px; }

/* ---------- header, cards */
.hdr { width: min(900px, 100%); display: flex; align-items: center; gap: 10px; }
.hdr h2 { flex: 1; margin: 0; color: #fff; font-size: 24px; font-weight: 900; text-shadow: 0 3px 0 var(--ink); }
.goldTag { background: linear-gradient(180deg, #3a2e7a, #241c56); border: 2px solid var(--gold); border-radius: 999px; padding: 4px 14px; font-weight: 900; color: var(--gold); }
.card { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 18px; padding: 16px; width: min(900px, 100%); box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.card h3 { margin: 0 0 4px; }
.sm { font-size: 12.5px; color: var(--dim); }
.sect { width: 100%; font-weight: 900; color: var(--gold); margin: 12px 0 4px; letter-spacing: .05em; display: flex; align-items: center; gap: 10px; }
.howto { line-height: 1.7; font-size: 14px; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 7px; margin: 2px; border-radius: 8px; background: linear-gradient(180deg, #ffffff, #d8d4ea); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 900 14px "Baloo 2", sans-serif; }
kbd.hot { background: linear-gradient(180deg, #fff3a0, #ffc21a); }
kbd.wide { min-width: 60px; }
kbd.sm { min-width: 26px; height: 26px; font-size: 13px; }
.kguide { width: min(900px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.kcol { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 16px; padding: 12px; }
.kcol h4 { margin: 0 0 6px; color: var(--gold); }
.krow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.kt { font-weight: 800; color: var(--dim); font-size: 13px; }

/* ---------- hero cards */
.hgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(900px, 100%); }
.hcard { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 35%, #241c56), #181440); border: 3px solid var(--ink); border-radius: 18px; padding: 6px 6px 10px; text-align: center; cursor: pointer; box-shadow: 0 5px 0 var(--ink), 0 0 0 2px color-mix(in srgb, var(--hc) 60%, transparent) inset; display: flex; flex-direction: column; align-items: center; transition: transform .12s; overflow: hidden; }
.hcard:hover { transform: translateY(-3px); }
.hcard.sel { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--gold) inset, 0 0 18px var(--hc); }
.hcard.dis { opacity: .35; cursor: default; }
.hn { font-weight: 900; font-size: 19px; color: #fff; text-shadow: 0 2px 0 var(--ink); } .hr { font-size: 12px; color: color-mix(in srgb, var(--hc) 60%, #fff); font-weight: 800; } .hl { font-size: 12px; color: var(--dim); font-weight: 700; }
.spdot { background: #ff4a5a; color: #fff; border-radius: 8px; padding: 0 6px; font-weight: 900; }
.spdot.big { font-size: 13px; padding: 2px 10px; }
.htabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(900px, 100%); }
.hcard.mini { flex-direction: row; gap: 8px; padding: 6px 10px; text-align: left; }
.hcard.mini .hn { font-size: 15px; } .hcard.mini .hl { margin-left: auto; }
.hdet { border-color: color-mix(in srgb, var(--hc) 55%, transparent); }
.htop { display: flex; gap: 16px; align-items: center; }
.hinfo { flex: 1; } .hinfo h3 { margin: 0; font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 var(--ink), 0 0 16px var(--hc); } .hinfo h3 small { color: var(--gold); font-size: 17px; }
.role { color: color-mix(in srgb, var(--hc) 55%, #fff); font-weight: 800; margin-bottom: 2px; } .hinfo p { margin: 0 0 8px; }
.stgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 13px; margin-top: 8px; }
.stgrid span { display: flex; justify-content: space-between; background: rgba(255,255,255,.06); border-radius: 10px; padding: 4px 10px; color: var(--dim); font-weight: 700; }
.stgrid b { color: #fff; } .stgrid .sp b { color: #ff7a8a; }
.expbar { position: relative; height: 22px; background: rgba(0,0,0,.4); border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; margin: 4px 0; }
.expbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #a8ff8a, #2ec85a); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.expbar span { position: relative; font-size: 12px; font-weight: 800; padding-left: 10px; line-height: 18px; color: #fff; text-shadow: 0 1px 2px #000; }
.eqrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eqslot { border: 2px dashed rgba(255,255,255,.25); border-radius: 14px; padding: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background .15s; }
.eqslot:hover { background: rgba(255,255,255,.06); } .eqslot.has { border-style: solid; border-color: rgba(255,208,64,.5); }
.eqslot .q, .foe .q { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font-weight: 900; color: var(--dim); flex: none; }
.skill { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.1); border-left: 8px solid var(--ec); border-radius: 14px; padding: 8px 10px; margin: 6px 0; }
.skill.unl { opacity: .72; }
.skill .combo { width: 64px; text-align: center; } .skill .combo small { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }
.skill .sk { flex: 1; } .skill .sk b { font-size: 16px; color: #fff; }
.dots i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.3); margin-right: 2px; vertical-align: -1px; }
.dots i.on { background: radial-gradient(circle at 40% 35%, #fff2a0, #ffc21a); border-color: #c88a10; box-shadow: 0 0 6px rgba(255,200,40,.7); }
.skb { min-width: 82px; } .skb.go { background: linear-gradient(180deg, #6ae88a, #22a84a); color: #fff; }

/* ---------- lists, shop, stages */
.list { width: min(900px, 100%); display: flex; flex-direction: column; gap: 8px; }
.irow { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color .15s; }
.irow:hover { border-color: rgba(255,208,64,.5); }
.irow.sel { border-color: var(--gold); } .irow.dis { opacity: .5; }
.irow .in { flex: 1; } .irow .in b { color: #fff; font-size: 16px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; width: min(900px, 100%); }
.optrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; background: rgba(255,255,255,.05); border-radius: 14px; padding: 8px; border: 2px solid var(--line); }
.optrow > span { font-weight: 900; margin-right: 6px; }
.stages { width: min(760px, 100%); display: flex; flex-direction: column; gap: 10px; }
.stage { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 45%, #1c1648), #1a1442 70%); border: 3px solid var(--ink); border-radius: 18px; padding: 10px 16px; cursor: pointer; box-shadow: 0 5px 0 var(--ink); transition: transform .12s; }
.stage:hover { transform: translateX(4px); }
.stage.dis { opacity: .45; cursor: default; filter: grayscale(.6); }
.snum { width: 46px; height: 46px; border-radius: 14px; background: var(--sc); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 24px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 var(--ink); }
.sinfo { flex: 1; } .sn { font-size: 21px; font-weight: 900; color: #fff; } .sst { font-size: 22px; font-weight: 900; color: var(--gold); }
.stage.done .sst { color: #6ae88a; }
.foes { display: flex; gap: 10px; margin: 10px 0; }
.foe { border: 2px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; cursor: pointer; font-weight: 800; font-size: 13px; background: rgba(255,255,255,.05); }

/* ---------- result, pause */
.result, .pause { display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 600px; margin: auto 0; }
.resScr, .pauseScr { justify-content: center; }
.big { font-size: 40px; font-weight: 900; line-height: 1.1; }
.big.win { background: linear-gradient(180deg, #fff8d0, #ffb020); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 var(--ink)); }
.big.lose { color: var(--dim); }
.resrow { display: flex; gap: 12px; align-items: center; width: 100%; background: rgba(255,255,255,.05); border-radius: 14px; padding: 6px 12px; }
.resrow > div { flex: 1; } .rn { font-size: 18px; color: #fff; } .gain { color: #8affa0; font-weight: 900; }
.up { color: #ffd040; font-weight: 900; }
.goldline { font-weight: 900; font-size: 20px; color: var(--gold); }

#toast { position: absolute; top: 12%; left: 50%; transform: translate(-50%, -10px); background: linear-gradient(180deg, #3a2e7a, #241c56); border: 2px solid var(--gold); color: #fff; padding: 8px 20px; border-radius: 99px; font-weight: 800; opacity: 0; transition: .2s; pointer-events: none; z-index: 30; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#hint { position: absolute; bottom: 14px; left: 50%; transform: translate(-50%, 20px); background: rgba(14,10,36,.85); border: 2px solid var(--line); border-radius: 14px; padding: 6px 12px; font-weight: 800; font-size: 13px; color: #fff; opacity: 0; transition: .4s; pointer-events: none; z-index: 6; white-space: nowrap; }
#hint.on { opacity: 1; transform: translate(-50%, 0); }
#hint kbd { min-width: 24px; height: 24px; font-size: 12px; box-shadow: 0 2px 0 var(--ink); }
.gpf { outline: 4px solid var(--gold) !important; outline-offset: 3px; }

/* ---------- touch controls */
#touch { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#stick { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.18)); border: 3px solid rgba(255,255,255,.4); pointer-events: auto; touch-action: none; }
#stick .knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3a0, #ffc21a); border: 3px solid var(--ink); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
#btns { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 210px; height: 150px; }
.tb { position: absolute; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.95), rgba(220,214,240,.85)); color: var(--ink); font-size: 26px; pointer-events: auto; touch-action: none; box-shadow: 0 4px 0 var(--ink); }
.tb.on { background: radial-gradient(circle at 40% 30%, #fff3a0, #ffc21a); transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tb.a { width: 84px; height: 84px; right: 90px; bottom: 0; } .tb.j { width: 72px; height: 72px; right: 4px; bottom: 30px; } .tb.d { width: 60px; height: 60px; right: 112px; bottom: 90px; font-size: 22px; }
#skillBtns { position: absolute; top: max(70px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(2, auto); gap: 5px; pointer-events: auto; }
.sbtn { min-width: 92px; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--ec) 70%, #fff), var(--ec)); color: #fff; font-weight: 900; font-size: 12.5px; text-shadow: 0 1px 2px #000; touch-action: none; box-shadow: 0 3px 0 var(--ink); }
.sbtn small { margin-left: 4px; opacity: .9; }
.sbtn.low { filter: grayscale(.85) brightness(.65); }
#itemBtns { position: absolute; left: max(170px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 6px; pointer-events: auto; }
.ib { min-width: 60px; padding: 7px; border-radius: 12px; border: 2px solid var(--ink); background: rgba(255,255,255,.85); color: var(--ink); font-size: 11px; font-weight: 900; touch-action: none; box-shadow: 0 3px 0 var(--ink); }
.pz { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 46px; height: 40px; border-radius: 12px; border: 2px solid var(--ink); background: rgba(255,255,255,.85); color: var(--ink); font-size: 18px; pointer-events: auto; box-shadow: 0 3px 0 var(--ink); }

@media (max-width: 680px) {
  .mgrid { grid-template-columns: 1fr 1fr 1fr; } .btn.big { font-size: 15px; padding: 10px 6px; } .btn.big b { font-size: 20px; }
  .hgrid { grid-template-columns: repeat(2, 1fr); }
  .htabs { grid-template-columns: repeat(2, 1fr); }
  .eqrow { grid-template-columns: repeat(2, 1fr); }
  .stgrid { grid-template-columns: repeat(2, 1fr); }
  .htop { flex-direction: column; }
  .heroLine canvas { width: 80px !important; height: 100px !important; }
}
@media (max-height: 520px) {
  .heroLine canvas { width: 76px !important; height: 95px !important; }
  .logo .l1 { font-size: 38px; } .btn.big { padding: 8px; font-size: 15px; } .btn.big b { font-size: 18px; }
}

/* ================= manga theme (ink, paper, screentone) ================= */
:root { --ink: #14101e; --paper: #f6f1e4; --red: #e8302a; --gold: #ffd23a; --panel: #f6f1e4; --panel2: #fffaf0; --line: #14101e; --text: #14101e; --dim: #5a5466; }
html, body { color: var(--ink); }
#app { background: radial-gradient(circle, rgba(20,16,30,.18) 1.2px, transparent 1.6px) 0 0 / 7px 7px, #e9e2d0; }
#cv { box-shadow: 0 0 0 4px var(--ink), 0 14px 40px rgba(0,0,0,.45); }
.screen { background: radial-gradient(circle, rgba(20,16,30,.16) 1.1px, transparent 1.5px) 0 0 / 6px 6px, rgba(246,241,228,.94); backdrop-filter: none; }
.screen.menuScr { background: linear-gradient(180deg, rgba(246,241,228,0) 0%, rgba(246,241,228,.35) 50%, rgba(246,241,228,.92) 100%); }
.logo { position: relative; filter: none; padding: 8px 30px; isolation: isolate; }
.logo::before { content: ''; position: absolute; inset: -60px -140px; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(20,16,30,.85) 0deg 2.2deg, transparent 2.2deg 9deg); -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 46%, #000 70%, transparent 100%); mask: radial-gradient(closest-side, transparent 38%, #000 46%, #000 70%, transparent 100%); }
.logo .l1 { font-family: "Bangers", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-weight: 900; letter-spacing: .06em; background: none; color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--red), 7px 7px 0 var(--ink); transform: rotate(-3deg); }
.logo .l2 { display: inline-block; background: var(--ink); color: var(--paper); padding: 2px 14px; text-shadow: none; transform: rotate(-2deg); letter-spacing: .12em; }
.hsName { color: var(--ink); text-shadow: 0 0 6px var(--paper), 0 0 2px var(--paper); font-family: "Bangers", "Noto Sans TC", sans-serif; font-size: 18px; letter-spacing: .05em; }
.hsName small { color: var(--red); }
.btn { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink); transform: skew(-4deg); }
.btn::before { display: none; }
.btn:active { transform: skew(-4deg) translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn.big { font-family: "Bangers", "Noto Sans TC", "Microsoft JhengHei", sans-serif; letter-spacing: .06em; font-size: 24px; }
.btn.red { background: var(--red); color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.btn.blue { background: #2a6ae8; color: #fff; text-shadow: 2px 2px 0 var(--ink); }
.btn.green { background: var(--gold); color: var(--ink); text-shadow: none; }
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn.on { background: var(--gold); }
.btn.price.sell { background: var(--gold); }
.hdr h2 { color: var(--ink); text-shadow: 3px 3px 0 var(--gold); font-family: "Bangers", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 30px; letter-spacing: .05em; }
.goldTag { background: var(--ink); color: var(--gold); border: 3px solid var(--ink); border-radius: 4px; transform: skew(-6deg); }
.card, .kcol, .irow, .optrow { background: var(--panel2); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 rgba(20,16,30,.9); color: var(--ink); }
.irow .in b, .skill .sk b, .rn { color: var(--ink); }
.sect { color: var(--red); font-family: "Bangers", "Noto Sans TC", "Microsoft JhengHei", sans-serif; font-size: 20px; letter-spacing: .06em; }
.kcol h4 { color: var(--red); }
.krow { border-bottom: 1px dashed rgba(20,16,30,.3); }
.kt { color: var(--dim); }
kbd { background: var(--paper); border-radius: 4px; }
kbd.hot { background: var(--gold); }
.hcard { background: radial-gradient(circle, rgba(20,16,30,.14) 1px, transparent 1.4px) 0 0 / 5px 5px, var(--panel2); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
.hcard::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--hc); border-bottom: 3px solid var(--ink); }
.hcard.sel { box-shadow: 6px 6px 0 var(--red), 0 0 0 3px var(--gold) inset; }
.hn { color: var(--ink); text-shadow: 2px 2px 0 var(--gold); font-family: "Bangers", "Noto Sans TC", sans-serif; letter-spacing: .05em; font-size: 22px; }
.hr { color: var(--red); } .hl { color: var(--dim); }
.hcard.mini .hn { font-size: 17px; }
.hcard.mini::after { width: 8px; height: auto; bottom: 0; right: auto; border-bottom: 0; border-right: 3px solid var(--ink); }
.hdet { border-color: var(--ink); }
.hinfo h3 { color: var(--ink); text-shadow: 3px 3px 0 var(--hc); font-family: "Bangers", "Noto Sans TC", sans-serif; font-size: 40px; letter-spacing: .05em; }
.hinfo h3 small { color: var(--red); }
.role { color: var(--red); }
.stgrid span { background: rgba(20,16,30,.06); border: 2px solid var(--ink); border-radius: 3px; color: var(--dim); }
.stgrid b { color: var(--ink); } .stgrid .sp b { color: var(--red); }
.expbar { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 3px; }
.expbar i { background: repeating-linear-gradient(-45deg, #3ac85a 0 6px, #2ea84a 6px 12px); }
.expbar span { color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
.eqslot { border: 2.5px dashed rgba(20,16,30,.5); border-radius: 4px; }
.eqslot.has { border: 2.5px solid var(--ink); background: rgba(255,210,58,.2); }
.eqslot .q, .foe .q { background: rgba(20,16,30,.08); color: var(--dim); }
.skill { background: var(--paper); border: 2.5px solid var(--ink); border-left: 10px solid var(--ec); border-radius: 3px; box-shadow: 4px 4px 0 rgba(20,16,30,.85); }
.skill.unl { opacity: .6; }
.dots i { background: var(--paper); border: 2px solid var(--ink); }
.dots i.on { background: var(--gold); border-color: var(--ink); box-shadow: none; }
.skb.go { background: #3ac85a; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.stage { background: linear-gradient(90deg, var(--sc) 0 64px, var(--panel2) 64px); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
.snum { background: var(--paper); color: var(--ink); text-shadow: none; border-radius: 4px; }
.sn { color: var(--ink); font-family: "Bangers", "Noto Sans TC", sans-serif; letter-spacing: .05em; font-size: 26px; }
.sst { color: var(--red); } .stage.done .sst { color: #2ea84a; }
.foe { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 4px; }
.big { font-family: "Bangers", "Noto Sans TC", "Microsoft JhengHei", sans-serif; letter-spacing: .05em; }
.big.win { background: none; color: var(--gold); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--red); filter: none; font-size: 54px; }
.big.lose { color: var(--dim); }
.resrow { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 3px; }
.gain { color: #2ea84a; } .up { color: var(--red); } .goldline { color: var(--ink); }
#toast { background: var(--ink); border: 3px solid var(--gold); border-radius: 4px; }
#hint { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink); }
.tabs .btn, .optrow .btn { transform: none; }
.tb, .ib, .pz { background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tb.on { background: var(--gold); }
.sbtn { border: 2.5px solid var(--ink); border-radius: 4px; background: var(--ec); box-shadow: 3px 3px 0 var(--ink); text-shadow: 1px 1px 0 var(--ink); }
#stick { background: radial-gradient(circle, rgba(20,16,30,.18) 1px, transparent 1.4px) 0 0 / 6px 6px, rgba(246,241,228,.45); border: 3px solid var(--ink); }
.gpf { outline: 4px solid var(--red) !important; }

/* move slots and practice */
.mgrid.sub { grid-template-columns: repeat(4, 1fr); }
.loadout { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0 4px; }
.lslot { background: var(--paper); border: 3px solid var(--ink); border-top: 8px solid var(--ec); border-radius: 4px; padding: 6px; cursor: pointer; text-align: center; box-shadow: 4px 4px 0 var(--ink); min-height: 92px; }
.lslot.sel { outline: 4px solid var(--red); outline-offset: 2px; background: #fff3b0; }
.lslot.empty { border-style: dashed; }
.lslot .lk small { display: block; font-size: 11px; color: var(--dim); }
.lslot .ln { font-weight: 900; font-size: 14px; margin-top: 2px; }
.sect.sub { font-size: 17px; color: var(--ink); margin-top: 14px; }
.skill.on { background: #fff3b0; }
.skill .acts { display: flex; flex-direction: column; gap: 4px; }
.skill .lvreq { font-weight: 900; font-size: 12px; color: var(--dim); }
.skill .eqd { font-size: 18px; }
.btn.eqb { background: var(--gold); }
@media (max-width: 680px) { .loadout { grid-template-columns: repeat(3, 1fr); } .mgrid.sub { grid-template-columns: repeat(2, 1fr); } }