* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1410; color: #fff4e0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
canvas#cv { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
#loading { position: fixed; inset: 0; display: grid; place-items: center; font-size: 20px; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; padding: env(safe-area-inset-top) 8px 0; }
#hud button { pointer-events: auto; }
.hudTop { display: flex; gap: 8px; align-items: center; padding-top: 8px; max-width: 640px; margin: 0 auto; }
.bars { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bar { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,.55); overflow: hidden; border: 1px solid rgba(255,255,255,.25); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 8px; transition: width .12s; }
.bar span { position: absolute; inset: 0; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; text-shadow: 0 1px 2px #000; }
.bar.hp i { background: linear-gradient(#ff6b6b, #d32f2f); }
.bar.xp { height: 12px; } .bar.xp span { line-height: 11px; font-size: 10px; }
.bar.xp i { background: linear-gradient(#80deea, #00acc1); }
.bar.boss { height: 12px; } .bar.boss i { background: linear-gradient(#ce93d8, #8e24aa); }
.hudInfo { text-align: right; font-weight: 800; text-shadow: 0 1px 3px #000; min-width: 64px; }
#timer { font-size: 18px; } #kills { font-size: 12px; opacity: .9; }
#pauseBtn { width: 40px; height: 40px; border-radius: 12px; background: rgba(0,0,0,.5); font-size: 18px; }
.hudChips { display: flex; gap: 6px; flex-wrap: wrap; max-width: 640px; margin: 6px auto 0; }
.chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.2); }
#buffChip { background: #f9a825; color: #2b1a00; }
#bossBar { max-width: 640px; margin: 8px auto 0; text-align: center; font-size: 11px; letter-spacing: 2px; text-shadow: 0 1px 2px #000; }
#banner { position: absolute; left: 50%; top: calc(118px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(92vw, 520px); text-align: center;
  background: rgba(20,10,5,.82); border: 2px solid #ffcc66; border-radius: 14px; padding: 10px 14px; animation: pop .35s ease-out; }
#banner b { display: block; font-size: 22px; letter-spacing: 1px; color: #ffcc66; }
#banner small { font-size: 13px; opacity: .92; }
.warnAll { color: #ff9100; } /* M2-10: orange = kitchen hazard, hurts bugs too */
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
#kiBtn { position: absolute; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(#ffd54a var(--ki, 0%), rgba(0,0,0,.55) 0); border: 3px solid rgba(255,255,255,.5); display: grid; place-items: center; }
#kiBtn span { width: 74px; height: 74px; border-radius: 50%; background: #2a1a10; display: grid; place-items: center; font-size: 13px; font-weight: 900; text-align: center; line-height: 1.1; }
#kiBtn.ready { animation: glow .6s infinite alternate; border-color: #fff; }
#kiBtn.ready span { background: radial-gradient(#ffeb3b, #ff6f00); color: #3a1500; font-size: 14px; }
#kiBtn.active span { background: #5d4037; }
@keyframes glow { from { box-shadow: 0 0 6px 2px #ffd54a; transform: scale(1); } to { box-shadow: 0 0 26px 10px #ff9800; transform: scale(1.07); } }

/* Overlays */
.overlay { position: fixed; inset: 0; background: rgba(10,5,2,.72); display: grid; place-items: center; padding: 14px; z-index: 5; }
.panel { width: min(100%, 460px); background: #2b1d14; border: 2px solid #6d4c33; border-radius: 18px; padding: 16px; text-align: center; max-height: 96vh; overflow-y: auto; }
.panel.wide { width: min(100%, 520px); }
.panel h2 { margin: 2px 0 4px; font-size: 28px; letter-spacing: 2px; color: #ffcc66; }
.sub { opacity: .8; margin: 0 0 10px; font-size: 14px; }
#cards { display: flex; flex-direction: column; gap: 10px; }
/* v4.2 pick guard: cards fade/slide in during the 0.6 s lockout so it feels intentional */
#cards.cardsIn .card { animation: cardIn .45s cubic-bezier(.2,.8,.3,1) both; }
#cards.cardsIn .card:nth-child(2) { animation-delay: .07s; } #cards.cardsIn .card:nth-child(3) { animation-delay: .14s; }
#cards.cardsLocked .card { filter: saturate(.6) brightness(.85); }
#cards .card { transition: filter .15s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.reduced-motion #cards.cardsIn .card { animation: cardFade .3s both; }
@keyframes cardFade { from { opacity: 0; } to { opacity: 1; } }
.card { display: flex; gap: 12px; align-items: center; text-align: left; background: #3a281b; border: 2px solid var(--rc); border-radius: 14px; padding: 12px; min-height: 84px; }
.card:active { transform: scale(.98); }
.card .ic { font-size: 34px; width: 46px; text-align: center; flex: none; }
.card .nm { font-weight: 800; font-size: 16px; }
.card .rt { font-size: 11px; font-weight: 800; color: var(--rc); letter-spacing: 1px; }
.card .ds { font-size: 13px; opacity: .9; margin-top: 2px; }
.card .syn { font-size: 11px; color: #ff80ab; margin-top: 3px; }
.card.evo { background: linear-gradient(135deg, #4a1838, #3a281b); box-shadow: 0 0 14px #ff4081; }
button.big { display: block; width: 100%; margin-top: 12px; padding: 14px; border-radius: 14px; font-size: 18px; font-weight: 900; background: linear-gradient(#ffb74d, #f57c00); color: #2b1300; }
button.ghost { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; background: transparent; border: 1px solid #8d6e63; }
#devRow button { margin: 3px; padding: 6px 8px; border-radius: 8px; background: #455a64; font-size: 12px; }

#cutin { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; background: rgba(0,0,0,.35); }
.cutStripe { width: 100%; padding: 22px 10px; transform: skewY(-6deg); background: linear-gradient(90deg, transparent, var(--fc, #ffd54a) 18%, var(--fc, #ffd54a) 82%, transparent); text-align: center; color: #1a0d00; animation: slide .35s ease-out; }
#cutName { font-size: 34px; font-weight: 900; letter-spacing: 2px; }
#cutLine { font-size: 14px; font-weight: 800; }
@keyframes slide { from { transform: skewY(-6deg) translateX(-100%); } to { transform: skewY(-6deg) translateX(0); } }

/* Hub */
.screen { position: fixed; inset: 0; overflow-y: auto; z-index: 4; padding: calc(10px + env(safe-area-inset-top)) 12px calc(110px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 0, #4a3020, #1b1410 70%); }
#summary.screen { display: grid; place-items: center; padding-bottom: 20px; }
.screen > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.hubHead { display: flex; justify-content: space-between; align-items: center; }
.hubHead h1 { margin: 0; font-size: 30px; letter-spacing: 3px; color: #ffcc66; text-shadow: 0 3px 0 #7a3b00; }
.subtitle { font-size: 13px; letter-spacing: 6px; font-weight: 800; color: #ff8a65; }
.wallet { font-weight: 900; font-size: 18px; background: rgba(0,0,0,.4); padding: 6px 12px; border-radius: 12px; }
section h3 { margin: 16px 0 8px; font-size: 15px; letter-spacing: 1px; color: #ffcc80; }
section h3 small { font-weight: 400; opacity: .7; letter-spacing: 0; }
#bugGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bugCard { position: relative; background: #2f2017; border: 2px solid #5d4037; border-radius: 14px; padding: 8px; text-align: center; }
.bugCard.sel { border-color: #ffcc66; box-shadow: 0 0 12px rgba(255,204,102,.6); }
.bugCard canvas { width: 64px; height: 64px; }
.bugCard .nm { font-weight: 800; font-size: 14px; }
.bugCard .rl { font-size: 11px; opacity: .75; }
.bugCard .ep { font-size: 10px; font-style: italic; color: #e0b8a0; opacity: .9; margin-top: 1px; line-height: 1.2; }
.testNote { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: #80deea; text-align: center; opacity: .9; }
.bugCard .testTag { position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: 800; letter-spacing: .5px; background: #00838f; color: #fff; border-radius: 6px; padding: 1px 5px; }
.bugCard.locked canvas { filter: grayscale(1) brightness(.5); }
.bugCard .kit { font-size: 10.5px; text-align: left; margin-top: 4px; opacity: .85; line-height: 1.3; }
.prog { height: 8px; background: #111; border-radius: 4px; overflow: hidden; margin: 4px 0; }
.prog i { display: block; height: 100%; background: #4dd0e1; }
.bugCard button, .item button, .perm button { padding: 6px 10px; border-radius: 9px; background: #00897b; font-weight: 800; font-size: 12px; margin-top: 4px; }
.bugCard button:disabled, .perm button:disabled { background: #555; opacity: .6; }
#slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slot { background: #2f2017; border: 2px dashed #6d4c33; border-radius: 12px; padding: 6px; font-size: 11px; text-align: center; min-height: 66px; }
.slot.filled { border-style: solid; border-color: var(--rc); }
.slot b { display: block; font-size: 10px; letter-spacing: 1px; opacity: .7; text-transform: uppercase; }
.slot .gn { font-weight: 800; font-size: 12px; color: var(--rc); }
#inv { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.item { display: flex; align-items: center; gap: 8px; background: #2a1c13; border-left: 4px solid var(--rc); border-radius: 10px; padding: 7px 8px; font-size: 12px; }
.item .gi { flex: 1; }
.item .gn { font-weight: 800; color: var(--rc); font-size: 13px; }
.item .sp { color: #ffab91; }
.item .gup { display: block; width: 100%; min-height: 44px; margin-top: 6px; background: #6d4c1f; }
.item .gup:disabled { opacity: .5; }
.item button.sell { background: #6d4c41; }
.item.eq { opacity: .55; }
.perm { display: flex; justify-content: space-between; align-items: center; background: #2a1c13; border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; font-size: 13px; }
.perm small { opacity: .7; }
.records { font-size: 12px; opacity: .75; margin-top: 14px; text-align: center; }
.hubFoot { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #1b1410 35%); max-width: none; }
.hubFoot .start { max-width: 560px; margin: 0 auto; font-size: 22px; padding: 16px; }
.tiny { display: block; margin: 16px auto 0; background: transparent; opacity: .45; font-size: 11px; text-decoration: underline; }
#sumStats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; text-align: left; }
#sumStats div { background: #22170f; padding: 6px 8px; border-radius: 8px; }
#sumLoot { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 14px; }
#sumLoot .lr { background: #22170f; border-left: 4px solid var(--rc, #ffcc66); padding: 7px 10px; border-radius: 8px; }
.unlockReady { color: #69f0ae; font-weight: 900; }

/* ===================== v2 GRIM THEME (overrides) ===================== */
:root { --bone: #e8dcc0; --rust: #b33a1e; --blood: #8e1a10; --metal: #23201c; --metal2: #35302a; --edge: #5a4a36;
  --heavy: Impact, "Arial Black", "Haettenschweiler", "Franklin Gothic Heavy", sans-serif; }
html, body { background: #0b0907; color: var(--bone); }
h1, h2, h3, #timer, #banner b, #cutName, .card .nm, .bugCard .nm, button.big, #bossBar b, .wallet, #introName, #introKind, .chip.wave { font-family: var(--heavy); font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; }
.bar { border-radius: 2px; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 0 rgba(0,0,0,.6); background: rgba(0,0,0,.7); }
.bar i { border-radius: 0; }
.bar.hp i { background: linear-gradient(#d83a2a, #7a1208); }
.bar.xp i { background: linear-gradient(#c9a23a, #6e5410); }
.bar.boss { height: 14px; border-color: #3a0000; } .bar.boss i { background: repeating-linear-gradient(-45deg, #b01a10 0 8px, #8a120a 8px 16px); }
#timer { font-size: 22px; color: var(--bone); }
#pauseBtn { border-radius: 4px; background: linear-gradient(var(--metal2), var(--metal)); border: 1px solid var(--edge); }
.chip { border-radius: 3px; background: rgba(10,8,6,.75); border: 1px solid #3c3328; color: var(--bone); }
.chip.wave { display: table; margin: 6px auto 0; font-size: 13px; padding: 3px 10px; color: #ff6a4a; border-color: #5a1a10; background: rgba(30,6,3,.75); }
#bossBar b { font-size: 15px; color: #ff4a3a; text-shadow: 0 0 8px #000, 0 2px 0 #000; }
#banner { background: linear-gradient(rgba(25,6,3,.92), rgba(10,4,2,.92)); border: 2px solid var(--rust); border-left-width: 6px; border-right-width: 6px; border-radius: 3px; box-shadow: 0 0 30px rgba(140,10,0,.5); }
#banner b { font-size: 26px; color: #ff5a3a; text-shadow: 0 2px 0 #000, 0 0 12px rgba(255,40,0,.5); }
#banner small { color: var(--bone); }
#kiBtn { background: conic-gradient(#d84315 var(--ki, 0%), rgba(0,0,0,.7) 0); border: 3px solid #4a3a2a; }
#kiBtn span { background: radial-gradient(#2a1a10, #0e0805); color: var(--bone); font-family: var(--heavy); font-weight: 400; letter-spacing: 1px; }
#kiBtn.ready span { background: radial-gradient(#ffcf3a, #b31e00); color: #1a0500; }
@keyframes glow { from { box-shadow: 0 0 6px 2px #ff6a00; transform: scale(1); } to { box-shadow: 0 0 28px 12px #c41a00; transform: scale(1.07); } }
.overlay { background: rgba(4,2,1,.8); }
.panel { background: linear-gradient(#26211b, #15120e); border: 2px solid var(--edge); border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 0 40px rgba(0,0,0,.6), 0 10px 40px rgba(0,0,0,.8); }
.panel h2 { color: #ff5a3a; font-size: 32px; text-shadow: 0 3px 0 #000; }
.card { background: linear-gradient(90deg, #2a241d, #1a1612); border-radius: 3px; border-width: 2px; }
.card.evo { background: linear-gradient(135deg, #4a0e08, #1a1612); box-shadow: 0 0 16px #c41a00; }
.card .syn { color: #ff8a65; }
button.big { border-radius: 3px; background: linear-gradient(#c8401e, #7a1a08); color: #fff1dc; border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #000; text-shadow: 0 2px 0 #000; }
button.ghost { border-radius: 3px; border-color: var(--edge); }
.cutStripe { background: linear-gradient(90deg, transparent, var(--fc, #d84315) 15%, var(--fc, #d84315) 85%, transparent); color: #0e0500; }
#cutName { font-family: var(--heavy); font-weight: 400; font-size: 40px; }
.screen { background: radial-gradient(circle at 50% -10%, #3a1a10, #0b0907 65%); }
.hubHead h1 { font-size: 40px; color: #e8dcc0; text-shadow: 0 3px 0 #6b0f05, 0 0 18px rgba(200,30,0,.4); letter-spacing: 4px; }
.subtitle { color: #ff5a3a; letter-spacing: 7px; }
.wallet { border-radius: 3px; border: 1px solid var(--edge); }
section h3 { color: #c9a26a; border-bottom: 1px solid #3a2e22; padding-bottom: 4px; }
.bugCard, .slot, .item, .perm { background: linear-gradient(#211c17, #15120f); border-radius: 3px; border-color: #3e3326; }
.bugCard.sel { border-color: #d84315; box-shadow: 0 0 14px rgba(216,67,21,.6); }
.bugCard canvas { width: 84px; height: 84px; }
.hubFoot { background: linear-gradient(transparent, #0b0907 35%); }
#sumStats div, #sumLoot .lr { background: #17130f; border-radius: 3px; }
.bestLink { color: #ff8a65; font-weight: 800; text-decoration: none; border: 1px solid #5a1a10; padding: 6px 10px; display: inline-block; border-radius: 3px; background: rgba(30,6,3,.6); opacity: 1; }
/* boss intro card */
#intro { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.introCard { width: 100%; text-align: center; padding: 18px 10px 20px; background: linear-gradient(90deg, transparent, rgba(60,4,0,.92) 15%, rgba(60,4,0,.92) 85%, transparent); border-top: 2px solid #c41a00; border-bottom: 2px solid #c41a00; animation: introIn .45s cubic-bezier(.2,1.4,.4,1); }
#introKind { font-size: 14px; letter-spacing: 8px; color: #ff8a65; }
#introName { font-size: clamp(38px, 11vw, 72px); line-height: 1; color: #f2e6cc; text-shadow: 0 4px 0 #000, 0 0 24px rgba(255,30,0,.7); margin: 4px 0; }
#introTitle { font-size: 14px; font-style: italic; color: #e0b8a0; letter-spacing: 1.5px; padding: 0 12px; }
#introQuote { margin-top: 8px; font-size: 12px; line-height: 1.35; color: #f2e6cc; font-style: italic; letter-spacing: 0.5px; max-width: 340px; margin-left: auto; margin-right: auto; padding: 0 14px; opacity: .92; }
@keyframes introIn { from { transform: scaleY(0) ; opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ===== v3 ===== */
#cutin { background: none; }
#cutin.play .cutStripe { animation: cutIn 1.4s cubic-bezier(.2,.9,.2,1) forwards; }
.cutStripe { background: linear-gradient(90deg, transparent, var(--fc, #d84315) 12%, var(--fc, #d84315) 88%, transparent); box-shadow: 0 0 40px var(--fc, #d84315); border-top: 3px solid var(--fc2, #fff); border-bottom: 3px solid var(--fc2, #fff); }
#cutName { font-size: clamp(34px, 11vw, 64px); color: #0e0500; text-shadow: 0 0 12px var(--fc2, #fff); }
@keyframes cutIn { 0% { transform: skewY(-6deg) translateX(-110%); } 14% { transform: skewY(-6deg) translateX(0) scale(1.08); } 22% { transform: skewY(-6deg) scale(1); } 82% { transform: skewY(-6deg) translateX(0); opacity: 1; } 100% { transform: skewY(-6deg) translateX(110%); opacity: 0; } }
#fintro { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.88)); }
.fCard { width: min(92vw, 440px); text-align: center; padding: 20px 16px; background: linear-gradient(180deg, rgba(40,10,4,.95), rgba(14,10,8,.95)); border: 2px solid var(--fcol, #c41a00); border-radius: 4px; box-shadow: 0 0 30px var(--fcol, #c41a00); animation: introIn .35s ease-out; }
.fKind { font-family: var(--heavy); letter-spacing: 5px; font-size: 12px; color: #ff8a65; }
#fIcon { font-size: 64px; line-height: 1.1; margin-top: 6px; }
#fName { font-family: var(--heavy); font-size: clamp(32px, 10vw, 52px); color: #f2e6cc; text-shadow: 0 3px 0 #000, 0 0 20px var(--fcol, #c41a00); }
#fThreat { font-size: 14px; margin: 8px 0; color: #f0d8c0; }
#fCounters { font-size: 13px; color: #9ccc65; margin: 6px 0; }
#fCounters b { color: #c5e1a5; }
#fBoss { font-size: 12px; font-style: italic; color: #e0b8a0; }
.fTap { margin-top: 12px; font-size: 11px; opacity: .6; letter-spacing: 2px; }
.chip.poison { color: #b2ff59; border-color: #33691e; background: rgba(20,40,6,.8); }
.card .sch { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 2px; margin-right: 6px; color: #0e0500; background: var(--sc, #888); letter-spacing: 1px; vertical-align: middle; }
.card .ctr { font-size: 11px; font-weight: 800; color: #9ccc65; margin-top: 3px; }
.card .lock { font-size: 11px; font-weight: 800; color: #ff7043; margin-top: 3px; }
.card.counter { box-shadow: inset 0 0 0 1px #558b2f; }
#pathTracker { margin: 10px 0 4px; text-align: left; }
.pt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 3px 0; border-left: 4px solid var(--sc); background: rgba(0,0,0,.35); font-size: 12px; }
.pt .pn { flex: 1; font-weight: 800; }
.pt .pp { letter-spacing: 2px; color: var(--sc); }
.pt.locked { opacity: .45; border-left-color: #555; }
.pt.locked .pn::after { content: ' 🔒'; }
.ptRule { font-size: 11px; opacity: .7; margin-top: 4px; }
#pause .panel, #levelup .panel { max-height: 94vh; max-height: 94dvh; overflow-y: auto; }

/* ---------- v3.1: settings, perf overlay, run report ---------- */
#settings { z-index: 9; }
#settings .panel { text-align: left; max-height: 94vh; max-height: 94dvh; }
#settings h2 { text-align: center; }
#settings h3 { margin: 14px 0 4px; font-size: 14px; color: #ffcc66; }
.setRow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.setRow > span:first-child { flex: 1; font-weight: 700; }
.setRow small { display: block; font-weight: 400; opacity: .65; font-size: 11px; }
.setRow input[type=range] { flex: 1.3; accent-color: #ff6a3a; min-height: 28px; }
.setRow b { width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.setRow input[type=checkbox] { width: 26px; height: 26px; accent-color: #ff6a3a; }
.seg { display: inline-flex; border: 1px solid var(--edge, #6d4c33); border-radius: 3px; overflow: hidden; }
.seg button { padding: 8px 10px; background: transparent; border: 0; border-left: 1px solid var(--edge, #6d4c33); font-weight: 700; min-height: 36px; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: #c8401e; color: #fff; }
.setLink { margin-left: 8px; background: transparent; border: 1px solid var(--edge, #6d4c33); border-radius: 3px; padding: 6px 10px; }
#perfHud { position: fixed; left: 4px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 8; background: rgba(0,0,0,.72); color: #b9f6ca; border: 1px solid #2e7d32; border-radius: 4px; padding: 4px 6px; font: 11px/1.25 ui-monospace, Menlo, Consolas, monospace; pointer-events: none; }
#perfHud pre { margin: 0; font: inherit; white-space: pre; }
.perfBtns { display: flex; gap: 4px; margin-top: 4px; pointer-events: auto; }
.perfBtns button { font: 11px ui-monospace, monospace; padding: 4px 6px; background: #1b3a1d; color: #dcedc8; border: 1px solid #2e7d32; border-radius: 3px; }
.perfBtns { flex-wrap: wrap; }
.perfBtns button.warn { background: #5a1a14; border-color: #e57373; color: #ffcdd2; }
#perfErrTxt { max-height: 50vh; overflow: auto; white-space: pre-wrap; font: 11px ui-monospace, monospace; text-align: left; background: #0d0d0d; padding: 8px; border-radius: 6px; }
#perfReport { z-index: 10; }
#perfReport pre, .report pre { text-align: left; white-space: pre-wrap; word-break: break-word; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; background: rgba(0,0,0,.4); padding: 8px; border-radius: 3px; }
.report { margin-top: 10px; }
.report details { margin-top: 6px; text-align: left; }
.report summary { cursor: pointer; opacity: .8; }
/* reduced motion: no looping glows, no slide-ins */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; }
.reduced-motion #cutin.play .cutStripe { animation: none !important; transform: skewY(-6deg); }
#qualToast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); transform: translateX(-50%); background: rgba(20,14,6,.92); color: #ffe0a0; border: 1px solid #a07a2a; border-radius: 8px; padding: 6px 12px; font: 13px system-ui, sans-serif; z-index: 60; opacity: 0; transition: opacity .3s; pointer-events: none; }
#qualToast.show { opacity: 1; }
#perfHud.top { bottom: auto; top: calc(4px + env(safe-area-inset-top)); opacity: .85; }
/* v3.4 hub: sticky top bar with START (the old fixed bottom bar fell off-screen when the itch.io embed was taller than the browser window) */
#hub.screen { padding-top: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.hubTop { position: sticky; top: 0; z-index: 3; padding: calc(8px + env(safe-area-inset-top)) 0 8px; background: linear-gradient(#0b0907 85%, rgba(11,9,7,0)); }
.hubTop .hubHead h1 { font-size: 32px; line-height: 1; }
.hubTop .start { max-width: 560px; margin: 8px auto 0; font-size: 20px; padding: 11px; }
@media (max-height: 560px) { .hubTop .hubHead h1 { font-size: 24px; } .hubTop .subtitle { display: none; } .hubTop .start { padding: 8px; font-size: 18px; } }

/* v3.4 Ki-ready prompt: big pulse on ready (2.5 s) and on each 20 s nudge (1.2 s) */
#kiBtn.ready.pop { animation: kiPop .28s infinite alternate; }
@keyframes kiPop { from { box-shadow: 0 0 10px 4px #ffd54a, 0 0 0 0 rgba(255,214,74,.9); transform: scale(1); } to { box-shadow: 0 0 40px 18px #ff6a00, 0 0 0 14px rgba(255,214,74,0); transform: scale(1.22); } }

/* v3.9 first-run tutorial (js/tutorial.js): amber = "how to play" (red banners stay for danger). Sits above the Ki button, below the hero. */
#tutTip { position: absolute; left: 50%; bottom: calc(128px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(90vw, 420px); pointer-events: none;
  background: linear-gradient(rgba(28,20,8,.93), rgba(12,9,4,.93)); border: 2px solid #b8860b; border-left-width: 6px; border-radius: 3px; box-shadow: 0 0 22px rgba(255,170,0,.25), 0 6px 18px rgba(0,0,0,.7);
  padding: 8px 12px 9px; font-size: 15px; line-height: 1.32; color: var(--bone); text-align: left; text-shadow: 0 1px 2px #000; animation: tutIn .3s ease-out; }
#tutTip i { display: block; font-style: normal; font-family: var(--heavy); font-size: 11px; letter-spacing: 1.5px; color: #e0a82e; margin-bottom: 2px; }
#tutTip b, #lvTip b { color: #ffcf3a; }
#tutSkip { position: absolute; top: 2px; right: 2px; pointer-events: auto; background: transparent; color: #c9b896; font-size: 11px; padding: 5px 7px; min-height: 26px; text-decoration: underline; opacity: .85; }
#tutTip.toKi::after { content: '↘'; position: absolute; right: -4px; bottom: -30px; font-size: 26px; color: #ffcf3a; text-shadow: 0 0 8px #ff8a00, 0 2px 0 #000; animation: tutNudge .5s infinite alternate; }
@keyframes tutIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tutNudge { from { transform: translate(0, 0); } to { transform: translate(4px, 4px); } }
#lvTip { margin: 2px 0 10px; padding: 7px 10px; border: 1px solid #b8860b; border-left-width: 5px; border-radius: 3px; background: rgba(40,28,8,.7); font-size: 14px; line-height: 1.3; text-align: left; }
.hubNotice { max-width: 560px; margin: 4px auto 10px; padding: 8px 12px; border: 1px solid #b8860b; border-left-width: 5px; border-radius: 3px; background: rgba(40,28,8,.75); font-size: 14px; line-height: 1.35; }
/* landscape / short screens: tuck the tip bottom-left, clear of the Ki button */
@media (max-height: 520px) { #tutTip { left: 10px; right: 120px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: 420px; transform: none; font-size: 14px; animation: none; } #tutTip.toKi::after { content: '→'; right: -30px; bottom: 6px; } }

/* v4.0 lore mechanics (js/lore.js) */
#fLore { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: #d8ccb4; text-align: left; padding: 6px 8px; border-top: 1px solid rgba(255,255,255,.12); }
#fLore b, #introWeak b { color: #f2e6cc; }
.weakOn { color: #9ccc65; font-weight: 800; font-style: normal; }
.weakOff { color: #b0a898; font-style: normal; }
.nem { color: #ff7a5a; font-weight: 700; }
#introWeak { margin: 8px auto 0; max-width: 360px; padding: 6px 12px 0; font-size: 12px; line-height: 1.4; color: #e8dcc0; border-top: 1px solid rgba(255,120,60,.35); }
#introWeak:empty { display: none; }
.chip.rite { display: table; margin: 4px auto 0; font-size: 12px; padding: 3px 10px; color: #e1ccff; border-color: #5a3a8a; background: rgba(24,10,40,.82); font-weight: 800; }
.card .ctr.bane { color: #ff8a65; }
#codex .panel { max-height: 86vh; overflow-y: auto; text-align: left; }
#codex h2 { text-align: center; }
#codex h3 { margin: 12px 0 6px; font-size: 13px; color: #e0a82e; }
.cxn { border-left-color: #3fae4a !important; }
.cx, .cxn { padding: 7px 9px; margin: 5px 0; border-left: 4px solid #8a2a10; background: rgba(0,0,0,.35); font-size: 12px; line-height: 1.4; }
.cx small, .cxn small { color: #b8a888; }
.cx p, .cxn p { margin: 4px 0; }
.cx .cxQ { font-style: italic; color: #f2e6cc; }
.cx.locked { border-left-color: #3c3328; opacity: .72; }
.cxLock { color: #a89878; margin-top: 3px; }

/* v4.10 Skulls */
.skullBtn { display: block; width: 100%; max-width: 560px; margin: 6px auto 0; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(20,14,24,.85); color: #eee; font-size: 15px; }
#skullScr { z-index: 6; }
#skullHead { text-align: center; color: #eee; margin-bottom: 8px; }
#skullHead small { color: #bbb; }
.skullTotal { margin-top: 6px; font-size: 17px; color: #ffd54a; }
.skullNote { margin-top: 4px; font-size: 12px; color: #9fd; }
#skullGrid h4 { margin: 10px 0 4px; color: #ccc; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.skullRow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.skull { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; padding: 8px 10px; text-align: left; border-radius: 10px; border: 2px solid rgba(255,255,255,.14); background: rgba(30,22,34,.9); color: #ddd; }
.skull .si { font-size: 24px; line-height: 1; }
.skull b { font-size: 14px; }
.skull small { font-size: 12px; color: #aaa; line-height: 1.25; }
.skull i { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 12px; color: #ffd54a; }
.skull.on { border-color: #ffd54a; background: rgba(70,52,16,.92); color: #fff; box-shadow: 0 0 10px rgba(255,213,74,.35); }
.skull:disabled { opacity: .45; }
.chip.skullChip { font-size: 11px; padding: 1px 5px; opacity: .8; letter-spacing: -1px; }

/* v4.11 Goals panel (js/goals.js) */
#goalScr { z-index: 6; }
#goalHead { text-align: center; color: #eee; margin-bottom: 8px; }
#goalHead small { color: #bbb; }
.goalPerks { margin-top: 6px; font-size: 13px; color: #ffd54a; }
#goalList { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 0 auto; }
#goalList h4 { margin: 8px 0 0; color: #ccc; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
.goal { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(30,22,34,.88); color: #eee; }
.goal .gh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.goal .gh small { color: #bbb; }
.goal .prog { height: 6px; margin: 6px 0; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.goal .prog i { display: block; height: 100%; background: linear-gradient(90deg, #c9a24a, #ffd54a); }
.goal ul { list-style: none; margin: 0; padding: 0; font-size: 13px; color: #bbb; }
.goal li { display: flex; gap: 8px; align-items: center; min-height: 22px; }
.goal li span { min-width: 26px; text-align: center; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 12px; }
.goal li.got { color: #b9f6ca; }
.goal li.got span { background: rgba(80,200,120,.35); }
.skinRow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.skinCard { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; border: 2px solid rgba(255,255,255,.14); background: rgba(30,22,34,.88); color: #eee; }
.skinCard small { font-size: 12px; color: #aaa; }
.skinCard button { min-height: 40px; margin-top: 4px; border-radius: 8px; border: 1px solid #c9a24a; background: rgba(60,40,14,.95); color: #ffd54a; font-weight: bold; font-size: 14px; }
.skinCard button:disabled { opacity: .45; }
.skinCard.on { border-color: #ffd54a; }

/* v4.11 one-time acid spit tip (re-uses the tutorial tip box) */
#tutTip.acidTip #tutSkip { display: none; }
#tutTip.acidTip { border-color: #8bff4a; }

/* v4.11.1 hub menu (js/screens.js): START RUN up top, then a tidy 2-column menu */
.hubMenu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 560px; margin: 10px auto 0; }
.menuBtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(201,162,74,.45); background: rgba(20,12,26,.88); color: #f2e6cc; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 2px 0 #000; }
.menuBtn small { font-size: 11.5px; font-weight: 400; color: #cdb6e0; }
.menuBtn.wide { grid-column: 1 / -1; min-height: 60px; font-size: 18px; }
.menuBtn:active { transform: translateY(2px); }
.menuBtn.ready { border-color: #4dd0e1; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(77,208,225,.45); }
.menuBtn.ready::after { content: 'skill points ready'; font-size: 11px; color: #7fe8f5; font-weight: 400; }
.records .menuBtn, .hubMenu .bestLink { margin: 0; }
#pickSkulls { width: 100%; max-width: 560px; margin: 10px auto 0; }
@media (min-width: 700px) and (max-height: 560px) { .hubMenu { grid-template-columns: repeat(3, 1fr); max-width: 760px; } .hubMenu .menuBtn.wide { grid-column: span 3; } }

/* v4.11.1 hero select and Heroes page (js/heroes.js) */
#pickScr, #heroScr { z-index: 5; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.pageHead { position: sticky; top: calc(-6px - env(safe-area-inset-top)); z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 0; background: linear-gradient(rgba(12,7,16,.98) 80%, rgba(12,7,16,0)); }
.pageHead h2 { flex: 1; margin: 0; font-size: 18px; line-height: 1.15; text-align: center; }
.pageHead .wallet { font-size: 14px; padding: 5px 10px; }
.backBtn { min-height: 44px; min-width: 76px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(201,162,74,.5); background: rgba(30,18,38,.95); color: #f2e6cc; font-size: 15px; font-weight: 700; }
.heroGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#bugGrid.heroGrid { grid-template-columns: 1fr 1fr; }
#pickGrid .heroCard { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 120px; padding: 6px 4px 8px; border-radius: 12px; border: 2px solid rgba(201,162,74,.3); background: rgba(26,16,32,.92); color: #f2e6cc; }
#pickGrid .heroCard canvas { width: 72px; height: 72px; }
#pickGrid .heroCard .nm { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
#pickGrid .heroCard .rl { font-size: 10.5px; opacity: .8; line-height: 1.2; }
#pickGrid .heroCard.sel { border-color: #ffd54a; background: rgba(70,46,20,.95); box-shadow: 0 0 14px rgba(255,213,74,.45); }
#pickGrid .heroCard.locked canvas { filter: grayscale(1) brightness(.5); }
.heroInfo { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(201,162,74,.35); background: rgba(20,12,26,.9); color: #e8dcc0; font-size: 13.5px; line-height: 1.4; }
.heroInfo p { margin: 6px 0 0; }
.hiHead b { display: block; font-size: 17px; color: #ffd54a; }
.hiHead i { display: block; color: #cdb6e0; font-size: 13px; }
.hiHead small { display: block; color: #b8a888; margin-top: 2px; }
.pickFoot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); z-index: 3; margin-top: 10px; padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(12,7,16,0), rgba(12,7,16,.97) 30%); }
#pickGo { margin: 0; font-size: 22px; min-height: 56px; }
.skinPicks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.skinPicks > b { width: 100%; color: #c9a24a; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.skinPick { display: flex; flex-direction: column; align-items: center; min-height: 44px; min-width: 96px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(201,162,74,.45); background: rgba(40,26,50,.95); color: #f2e6cc; font-size: 14px; font-weight: 700; }
.skinPick small { font-size: 10.5px; font-weight: 400; color: #9fd; }
.skinPick.on { border-color: #ffd54a; background: rgba(80,56,18,.95); color: #ffd54a; }
.skinPick:disabled { opacity: .45; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; padding-bottom: 4px; background: rgba(12,7,16,.96); }
.tabs button { min-height: 46px; border-radius: 10px; border: 1px solid rgba(201,162,74,.35); background: rgba(26,16,32,.92); color: #cdbfa6; font-size: 14.5px; font-weight: 700; }
.tabs button.on { border-color: #ffd54a; color: #ffd54a; background: rgba(70,46,20,.95); }
.paneNote { margin: 0 0 8px; font-size: 13px; color: #b8a888; text-align: center; }
#heroScr .bugCard { cursor: pointer; }
#heroScr .bugCard .more { margin-top: 6px; font-size: 12px; color: #c9a24a; }
#heroScr #slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
#heroScr #inv { display: flex; flex-direction: column; gap: 6px; }
#heroScr .item button, #heroScr .perm button { min-height: 44px; min-width: 64px; }
#heroDetail { display: flex; flex-direction: column; gap: 10px; }
#heroDetail .backBtn { align-self: flex-start; }
.hdTop { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid rgba(201,162,74,.4); background: rgba(26,16,32,.92); color: #e8dcc0; }
.hdTop canvas { width: 104px; height: 104px; flex: none; }
.hdTop i { display: block; color: #cdb6e0; font-size: 13px; }
.hdTop .rl { font-size: 12.5px; color: #b8a888; }
.hdName { font-size: 18px; font-weight: 800; color: #ffd54a; text-transform: uppercase; letter-spacing: 1px; line-height: 1.15; }
.hdStats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 13px; }
.hdStats span { padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.08); }
.hdLore { margin: 0; font-style: italic; color: #cdbfa6; font-size: 13px; text-align: center; }
#heroDetail .heroInfo { margin-top: 0; }
.hdBox { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(201,162,74,.35); background: rgba(20,12,26,.9); color: #e8dcc0; }
.hdBox > b { font-size: 15px; }
.hdBox > small { color: #b8a888; font-size: 12.5px; }
.hdBox .big { margin-top: 6px; }
.hdBox .skinPicks { margin-top: 0; }
.hdGear { display: flex; flex-direction: column; gap: 2px; font-size: 13px; text-transform: capitalize; }
.hdBox .ghost { min-height: 44px; margin-top: 6px; }
.treeOpen.ready { box-shadow: 0 0 0 2px #4dd0e1, 0 0 16px rgba(77,208,225,.6); }
#heroDetail > .big { margin-top: 0; }
/* phones on their side: smaller portraits, one row of six on the hero select */
@media (max-height: 500px) and (min-width: 560px) {
  #pickScr > *, #heroScr > * { max-width: 860px; }
  #pickGrid.heroGrid { grid-template-columns: repeat(6, 1fr); }
  #pickGrid .heroCard { min-height: 0; }
  #pickGrid .heroCard canvas { width: 52px; height: 52px; }
  #pickGrid .heroCard .rl { display: none; }
  #bugGrid.heroGrid { grid-template-columns: repeat(3, 1fr); }
  .pickFoot { padding-top: 6px; }
  #pickGo { min-height: 48px; padding: 8px; }
}
.lockMsg { margin: 0 0 6px !important; color: #ff8a80; font-weight: 700; }
/* v4.11.2 event banner (Skinface 2:17 PM): one compact see-through line in the top band, under the HUD (js/banner.js) */
#hud #banner { top: 110px; width: auto; max-width: min(94vw, 560px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 12px 4px; border-width: 1px; border-left-width: 3px; border-right-width: 3px; border-radius: 3px;
  background: linear-gradient(rgba(25,6,3,.62), rgba(10,4,2,.62)); box-shadow: 0 0 12px rgba(140,10,0,.35); pointer-events: none; line-height: 1.25; max-height: 11vh; z-index: 2;
  animation: banIn .25s ease-out; opacity: 1; transition: opacity .35s; }
#hud #banner b { display: inline; font-size: 14px; letter-spacing: 1px; }
#hud #banner small { display: inline; font-size: 11px; margin-left: 8px; }
#hud #banner.boss b { font-size: 18px; }
#hud #banner.out { opacity: 0; }
#hud #banner.tight small { display: none; }
#hud #banner.tight { padding: 1px 10px; }
@keyframes banIn { from { transform: translate(-50%, -14px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
/* v4.11.2 boss arrival card: top band, compact (was a big card across the middle of the screen) */
#intro { place-items: start center; padding-top: calc(var(--introTop, 104px)); }
#intro .introCard { padding: 6px 10px 7px; }
#intro #introName { font-size: clamp(22px, 6vw, 34px); margin: 1px 0; }
#intro #introKind { font-size: 11px; letter-spacing: 5px; }
#intro #introTitle { font-size: 12px; }
#intro #introQuote, #intro #introWeak { font-size: 11px; margin-top: 2px; padding-top: 2px; }
#intro #introName::before, #intro #introName::after { display: none; }
@media (max-height: 520px) { #intro #introQuote, #intro #introTitle { display: none; } #intro #introWeak { border-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90vw; } #intro #introName { font-size: 24px; } #intro .introCard { padding: 3px 10px 4px; } }
/* v4.12.2 compact level-up cards + picks-left countdown (phone space) */
.card.compact { min-height: 0; padding: 8px 10px; gap: 10px; }
.card.compact .ic { font-size: 26px; width: 34px; }
.card.compact .cb { min-width: 0; flex: 1; }
.card.compact .nm { font-size: 14px; line-height: 1.15; display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.card.compact .nm .lv { font-family: inherit; font-size: 10px; letter-spacing: .5px; color: var(--rc); white-space: nowrap; flex: none; }
.card.compact .ds { font-size: 13px; margin-top: 2px; line-height: 1.2; }
.card.compact .tgs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.card.compact .tg { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; background: var(--sc, #3a332b); color: #fff; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card.compact .tg.ok { color: #c5e1a5; } .card.compact .tg.bad { color: #ffab91; } .card.compact .tg.syn { color: #ff8a80; }
#cards:has(.compact) { gap: 8px; }
.pickLeft { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: #ffd54a; color: #1a1206; font-weight: 800; font-size: 12px; }
.card.compact .catTag { font-size: 10px; padding: 1px 5px; }
/* v4.12.2 Claude review polish: picker spacing, one-row tags, smaller header, no sticky focus on touch */
#cards:has(.compact) { gap: 12px; }
#levelup #rerollBtn { margin-top: 22px; }
.card.compact .tgs { flex-wrap: nowrap; overflow: hidden; }
.card.compact .tg, .card.compact .catTag { font-size: 11px; flex: 0 1 auto; min-width: 0; }
.card.compact .catTag { flex: none; }
#levelup .panel h2 { font-size: 22px; margin: 0 0 2px; }
#levelup .panel .sub { margin: 2px 0 8px; }
@media (hover: none) { #cards .card:focus, #cards .card:focus-visible { outline: none; box-shadow: none; } }

/* v4.12.4 chunking boss bar: recent damage white ghost behind the fill, 10% chunk ticks */
.bar.boss { position: relative; } .bar.boss u#bossGhost { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; opacity: .85; text-decoration: none; transition: width .25s ease-out; } .bar.boss::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.55) calc(10% - 2px) 10%); pointer-events: none; }
#tutTip.oneTip #tutSkip { display: none; } /* v4.12.4 one-time tips */
/* v4.13 run goal: HUD pill (countdown + crowns), Showdown red, summary badge + progress bar */
.hudInfo.goalPill { pointer-events: auto; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; min-height: 44px; min-width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.hudInfo.goalPill #kills { font-size: 14px; letter-spacing: 2px; opacity: 1; }
.hudInfo.goalPill .crown { filter: grayscale(1) opacity(.45); }
.hudInfo.goalPill .crown.won { filter: none; }
.hudInfo.goalPill.low { background: rgba(160,20,20,.55); border-color: #ff5252; animation: goalPulse 1s ease-in-out infinite; }
.hudInfo.goalPill.show { background: rgba(190,20,20,.7); }
.hudInfo.goalPill .crown.flash { filter: none; animation: crownFlash 1s steps(2) infinite; }
#timer.pop { animation: tickPop .35s ease-out; }
@keyframes goalPulse { 50% { box-shadow: 0 0 0 4px rgba(255,82,82,.35); } }
@keyframes crownFlash { 50% { opacity: .35; } }
@keyframes tickPop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.reduced-motion .hudInfo.goalPill.low, .reduced-motion .hudInfo.goalPill .crown.flash, .reduced-motion #timer.pop { animation: none; }
#fBoss.goalLine { font-size: 17px; font-weight: 700; color: #ffe082; line-height: 1.3; }
#sumGoal { margin: 4px 0 12px; text-align: center; }
#sumGoal .goalSub { font-size: 15px; font-weight: 700; } #sumGoal .goalHint { font-size: 13px; opacity: .85; margin-top: 2px; } #sumGoal .goalBest { font-size: 12px; opacity: .75; margin-top: 18px; }
.goalBar { position: relative; height: 12px; margin: 22px 8px 4px; background: rgba(255,255,255,.12); border-radius: 6px; }
.goalBar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: #ff8a80; } .goalBar .fill.gold { background: #ffd54a; } .goalBar .fill.silver { background: #cfd8dc; }
.goalBar i { position: absolute; top: -18px; transform: translateX(-50%); font-style: normal; font-size: 13px; }
.goalBar i.gm { filter: grayscale(1) opacity(.5); } .goalBar i.gm.won { filter: none; }
.goalBar i.show { top: -2px; width: 2px; height: 16px; background: #ff5252; }
.goalBar i.you { top: 12px; font-size: 11px; color: #fff; }
.goalBar .t0, .goalBar .t1 { position: absolute; top: 14px; font-size: 10px; opacity: .6; } .goalBar .t0 { left: 0; } .goalBar .t1 { right: 0; }

/* ---------- v4.14.0 gear UI overhaul (js/gearui.js, js/gearicons.js) ---------- */
#heroScr.sheetLock { overflow: hidden; }
#heroScr #slots button.slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 96px; color: inherit; font: inherit; cursor: pointer; width: 100%; }
#heroScr #slots .slot .gn { font-size: 11px; line-height: 1.15; }
#heroScr #slots .slot .empty { opacity: .6; margin-top: 10px; }
#heroScr #slots .slot small { opacity: .5; font-size: 10px; }
#heroScr #inv { display: block; }
.gIcon { width: 100%; height: auto; aspect-ratio: 1; display: block; pointer-events: none; }
.gIcon.sm { width: 44px; height: 44px; }
.gIcon.big { width: 84px; height: 84px; flex: none; }
.gTile, .gIcon, #heroScr #slots .slot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.gBar { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
.gBar .chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.gBar .chips::-webkit-scrollbar { display: none; }
.chip, .sortBtn { flex: none; min-height: 40px; padding: 6px 11px; border-radius: 20px; background: #2f2017; border: 1px solid #6d4c33; color: #f3e5c8; font-weight: 800; font-size: 12px; }
.chip span { opacity: .65; margin-left: 2px; }
.chip.on { background: #c9a24a; color: #1b120b; border-color: #c9a24a; }
.sortBtn { background: #3a2a1e; }
.gGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.gTile { position: relative; padding: 0; min-height: 44px; aspect-ratio: 1; border-radius: 12px; background: none; border: 0; cursor: pointer; }
.gTile:focus-visible, .chip:focus-visible, .sortBtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gTile.eq::after { content: ''; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 3px #fff8; pointer-events: none; }
.gLv { position: absolute; right: 4px; bottom: 4px; background: #000c; color: #fff; font-size: 11px; font-weight: 900; padding: 0 4px; border-radius: 5px; }
.gEq { position: absolute; right: 3px; top: 3px; background: #2e7d32; color: #fff; font-size: 11px; font-weight: 900; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; }
.gNew { position: absolute; left: 3px; top: 3px; background: #e53935; color: #fff; font-size: 9px; font-weight: 900; padding: 1px 4px; border-radius: 6px; letter-spacing: .5px; }
.gEmpty { opacity: .7; padding: 18px 6px; text-align: center; font-size: 13px; }
.newPill { display: inline-block; margin-left: 6px; background: #e53935; color: #fff; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 9px; vertical-align: middle; }
#gearSheet { position: fixed; inset: 0; z-index: 20; }
#gearSheet.hidden { display: none; }
#gearSheet .gsBack { position: absolute; inset: 0; background: #000a; }
#gearSheet .gsPanel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(#2a1d14, #17100b); border-top: 2px solid #c9a24a; border-radius: 16px 16px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px #000a; }
#gearSheet .gsX { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border-radius: 50%; background: #3a2a1e; font-size: 18px; }
.gsHead { display: flex; gap: 12px; align-items: center; padding-right: 44px; }
.gsHead h3 { margin: 0; font-size: 18px; outline: none; }
.gsMeta { font-size: 12px; opacity: .8; margin-top: 2px; }
.gsHead .pips { display: flex; gap: 3px; margin-top: 6px; }
.gsHead .pips i { width: 10px; height: 10px; border-radius: 2px; background: #3e3326; display: block; }
.gsHead .pips i.on { background: #c9a24a; }
.gsStats { margin-top: 10px; font-weight: 800; font-size: 14px; }
.gsSp { color: #ffab91; font-size: 13px; margin-top: 4px; }
.gCmp { margin-top: 10px; background: #0005; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.gCmp table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.gCmp th { font-size: 11px; opacity: .7; text-align: right; font-weight: 600; }
.gCmp td { padding: 2px 0; text-align: right; } .gCmp td:first-child { text-align: left; opacity: .85; }
.gCmp .up { color: #66bb6a; font-weight: 900; } .gCmp .dn { color: #ef5350; font-weight: 900; }
.gCmp .pw { margin: 6px 0 0; } .gCmp .diff { margin: 4px 0; color: #ffd54f; font-weight: 800; }
.gCmp .side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .gCmp .side small { display: block; opacity: .6; }
.gCmp .side.sp { font-size: 12px; color: #ffab91; }
.gsActs { display: flex; gap: 8px; margin-top: 12px; }
.gsActs button { flex: 1; min-height: 48px; border-radius: 10px; background: #00897b; font-weight: 900; font-size: 15px; }
.gsUp { margin-top: 8px; } .gsUp .gup { width: 100%; min-height: 46px; border-radius: 10px; background: #6d4c1f; font-weight: 800; }
.gsUp .gup:disabled { opacity: .5; } .gsUp .bal { display: block; text-align: right; opacity: .7; margin-top: 3px; font-size: 11px; }
.sellRow { margin-top: 18px; padding-top: 10px; border-top: 1px dashed #6d4c33; display: flex; justify-content: flex-end; }
.sellRow .sell { min-height: 44px; padding: 6px 14px; border-radius: 10px; background: #4e342e; font-weight: 800; font-size: 13px; }
.sellRow .sell.armed { background: #c62828; color: #fff; }
.noSell { margin: 14px 0 0; text-align: right; opacity: .55; font-size: 12px; }
@media (max-width: 370px) { .chip, .sortBtn { padding: 6px 8px; font-size: 11px; } .gGrid { gap: 6px; } }