:root {
  --bg:#151a2e; --bg2:#1d2340; --card:#232a4a; --card2:#2b3358; --line:#343d68;
  --ink:#f3f1ff; --muted:#a7a9cf; --amber:#ffb84d; --gold:#ffd34d; --teal:#3ee6c4; --pink:#ff5c8a;
  --green:#3ddc84; --red:#ff5b57; --purple:#8b6cff;
  color-scheme: dark;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
[hidden] { display:none !important }
html, body { height:100%; margin:0; background:#0c1020; color:var(--ink); font:600 15px/1.35 Nunito, system-ui, sans-serif; overscroll-behavior:none }
body { display:flex; justify-content:center }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 }
#app { position:relative; width:100%; max-width:440px; height:100%; background:var(--bg); display:flex; flex-direction:column; overflow:hidden; user-select:none; -webkit-user-select:none }

/* HUD */
.hud { display:flex; align-items:center; gap:8px; padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px; background:linear-gradient(180deg,#10142a,#151a2e); border-bottom:1px solid #222a4d; z-index:5 }
.me { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left }
.ava { width:38px; height:38px; border-radius:12px; background:var(--card2); display:grid; place-items:center; overflow:hidden; flex:none; box-shadow:inset 0 0 0 2px #3a4479 }
.ava img { width:40px; height:40px; object-fit:contain; margin-top:4px }
.me-txt { display:flex; flex-direction:column; gap:4px; min-width:0 }
.rank { font:400 15px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.repbar { width:82px; height:6px; border-radius:6px; background:#2c3462; overflow:hidden }
.repbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),#7ff5df); border-radius:6px; transition:width .4s }
.stat { display:flex; align-items:center; gap:6px; background:var(--card); border-radius:999px; padding:6px 11px; font-weight:900; font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 1px #343d68 }
.energy { flex-direction:column; gap:1px; padding:5px 10px; border-radius:12px }
.energy small { font-size:10px; color:var(--muted); font-weight:800; line-height:1 }
.pips { display:flex; gap:3px }
.pips i { width:9px; height:13px; border-radius:3px; background:#3a4270 }
.pips i.on { background:linear-gradient(180deg,#7dfde3,var(--teal)); box-shadow:0 0 6px rgba(62,230,196,.55) }
.icon { width:34px; height:34px; border-radius:10px; background:var(--card); font-size:16px }
.ico.coin { width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff3b0,#ffd34d 45%,#d99a1c); box-shadow:inset 0 0 0 2px #b9800f, 0 1px 0 #7a5208; flex:none; display:inline-block }

/* screens */
#screens { flex:1; position:relative; overflow:hidden }
.screen { position:absolute; inset:0; overflow-y:auto; padding:0 12px 18px; display:none; scrollbar-width:none }
.screen::-webkit-scrollbar { display:none }
.screen.active { display:block }
.hideout { position:relative; height:250px; margin:0 -12px; background:url(assets/bg_hideout.webp) center 38%/cover; overflow:hidden }
.hideout::after { content:''; position:absolute; inset:auto 0 0 0; height:90px; background:linear-gradient(180deg,transparent,var(--bg)) }
.hero-art { position:absolute; left:50%; bottom:6px; height:210px; transform:translateX(-50%); z-index:2; animation:bob 2.6s ease-in-out infinite; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)) }
@keyframes bob { 0%,100% { transform:translateX(-50%) translateY(0) } 50% { transform:translateX(-50%) translateY(-5px) } }
.hero-art.still { animation-play-state:paused }   /* under the Grid Hack screen (game.js heroStill): no per-frame restyle while hidden */
.fence { position:absolute; left:12px; top:12px; z-index:3; display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:14px; background:rgba(16,20,42,.82); box-shadow:inset 0 0 0 1px #3a4479; font-weight:900; font-variant-numeric:tabular-nums }
.fence small { display:block; font-size:10px; color:var(--muted); font-weight:800 }
.fence.ready { box-shadow:inset 0 0 0 2px var(--gold), 0 0 14px rgba(255,211,77,.35); animation:pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { transform:scale(1.04) } }
.trust-chip { position:absolute; right:12px; top:12px; z-index:3; padding:7px 10px; border-radius:14px; background:rgba(16,20,42,.82); box-shadow:inset 0 0 0 1px #3a4479; font-weight:900; font-size:13px }
.trust-chip small { display:block; font-size:10px; color:var(--muted); font-weight:800 }
.sect-h { display:flex; align-items:baseline; justify-content:space-between; margin:6px 2px 8px }
.sect-h span { font:400 19px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.sect-h small { color:var(--muted); font-size:12px; font-weight:800 }
.targets { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px }
.tcard { position:relative; background:var(--card); border-radius:18px; padding:8px 10px 10px; text-align:left; box-shadow:inset 0 0 0 1px var(--line), 0 3px 0 #10142a; transition:transform .08s }
.tcard:active { transform:translateY(2px) }
.tcard img { width:100%; aspect-ratio:1/0.78; object-fit:cover; border-radius:12px; display:block; background:#1a2146 }
.tcard .tn { font:400 16px 'Lilita One', Rubik, sans-serif; margin-top:6px; letter-spacing:.02em }
.tcard .tm { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); font-weight:800; margin-top:2px }
.tcard .tm b { color:var(--gold) }
.tcard .stars { color:var(--amber); letter-spacing:1px }
.tcard.locked { filter:grayscale(.85) brightness(.7) }
.tcard.locked::after { content:attr(data-lock); position:absolute; inset:8px 10px auto 10px; aspect-ratio:1/0.78; display:grid; place-items:center; background:rgba(10,13,28,.55); border-radius:12px; font:400 15px 'Lilita One', Rubik, sans-serif; color:#fff; text-align:center; padding:0 8px }
.crewjob { background:linear-gradient(135deg,#3b2a6e,#23306a); border-radius:20px; padding:12px; box-shadow:inset 0 0 0 1px #5a4aa8, 0 3px 0 #10142a; display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:center }
.crewjob img { width:86px; height:86px; border-radius:14px; object-fit:cover }
.crewjob .cj-t { font:400 19px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.crewjob .cj-s { font-size:12.5px; color:#cfc8ff; margin:2px 0 8px }
.crewjob .cj-faces { display:flex; margin:0 0 8px }
.crewjob .cj-faces img { width:30px; height:30px; border-radius:50%; background:#2b2f5e; box-shadow:0 0 0 2px #3b2a6e; margin-right:-6px; object-fit:cover }
.crewjob.cooldown { filter:saturate(.6) }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:14px; padding:12px 16px; font:400 17px 'Lilita One', Rubik, sans-serif; letter-spacing:.03em; color:#1b1300; background:linear-gradient(180deg,#ffe07a,var(--amber)); box-shadow:0 4px 0 #b06d12; transition:transform .06s, box-shadow .06s }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #b06d12 }
.btn.teal { color:#032a22; background:linear-gradient(180deg,#8affea,var(--teal)); box-shadow:0 4px 0 #1d8f78 }
.btn.pink { color:#2d0613; background:linear-gradient(180deg,#ff9ab6,var(--pink)); box-shadow:0 4px 0 #b02a54 }
.btn.green { color:#04210f; background:linear-gradient(180deg,#8cf5b6,var(--green)); box-shadow:0 4px 0 #1f8a4c }
.btn.red { color:#2c0403; background:linear-gradient(180deg,#ff9d99,var(--red)); box-shadow:0 4px 0 #a52a26 }
.btn.ghost { color:var(--ink); background:var(--card2); box-shadow:0 3px 0 #10142a, inset 0 0 0 1px var(--line) }
.btn[disabled] { filter:grayscale(1) brightness(.7); pointer-events:none }
.btn.wide { width:100%; margin-top:12px }
.btn.sm { padding:8px 12px; font-size:15px; border-radius:12px }

/* nav */
.nav { display:grid; grid-template-columns:repeat(var(--tabs,6),1fr); padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px)); background:#10142a; border-top:1px solid #222a4d; z-index:5 }
.nav button { display:flex; flex-direction:column; align-items:center; gap:1px; padding:5px 0; border-radius:12px; font-size:11px; font-weight:900; color:var(--muted) }
.nav button span { font-size:20px; line-height:1.1 }
.nav button.on { color:var(--ink); background:var(--card) }
.nav button { position:relative }
.nav button.todo::after { content:''; position:absolute; top:5px; right:14px; width:8px; height:8px; border-radius:50%; background:#ffd34d; box-shadow:0 0 0 2px #0f1424 }

/* gear */
.page-h { font:400 24px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; margin:14px 2px 2px; display:flex; align-items:center; gap:8px }
.page-h.small { font-size:19px; margin-top:18px }
.page-sub { color:var(--muted); margin:0 2px 12px; font-size:13.5px }
.demo { font:800 10px Nunito; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); border:1px solid currentColor; border-radius:6px; padding:2px 5px }
.gear { display:grid; gap:10px }
.gitem { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; background:var(--card); border-radius:16px; padding:10px 12px; box-shadow:inset 0 0 0 1px var(--line) }
.gicon { width:52px; height:52px; border-radius:14px; background:var(--card2); display:grid; place-items:center; font-size:28px }
.gname { font:400 17px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.glv { display:flex; gap:3px; margin:3px 0 }
.glv i { width:14px; height:6px; border-radius:3px; background:#3a4270 }
.glv i.on { background:var(--teal) }
.gfx { font-size:12px; color:var(--muted); font-weight:800 }

/* rep / crew */
.trustcard { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; background:var(--card); border-radius:18px; padding:14px; box-shadow:inset 0 0 0 1px var(--line) }
.tring { width:86px; height:86px; border-radius:50%; display:grid; place-items:center; font:400 30px 'Lilita One', Rubik, sans-serif }
.tlabel { font:400 20px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.tsub { color:var(--muted); font-size:13px; margin-top:2px }
.how { margin-top:12px; background:var(--bg2); border-radius:16px; padding:12px 14px; display:grid; gap:7px; font-size:13.5px }
.how-h { font:400 16px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.how-row { display:grid; grid-template-columns:118px 1fr; gap:8px; color:var(--muted) }
.how-row b { color:var(--ink) } .how-row b.g { color:var(--green) } .how-row b.r { color:var(--red) }
.history { display:grid; gap:8px }
.hrow { display:grid; grid-template-columns:1fr auto; gap:6px; background:var(--card); border-radius:14px; padding:10px 12px; font-size:13px; box-shadow:inset 0 0 0 1px var(--line) }
.hrow .hs { color:var(--muted); font-size:12px }
.hrow .hv { font-weight:900; text-align:right }
.empty { color:var(--muted); font-size:13px; padding:10px 2px }

/* top */
.seg { display:flex; gap:6px; background:var(--bg2); border-radius:14px; padding:4px; margin:10px 0 }
.seg button { flex:1; padding:8px 0; border-radius:10px; font-weight:900; font-size:12.5px; color:var(--muted) }
.seg button.on { background:var(--card2); color:var(--ink) }
.board { display:grid; gap:6px }
.brow { display:grid; grid-template-columns:28px 34px 1fr auto; gap:10px; align-items:center; background:var(--card); border-radius:14px; padding:8px 12px; font-size:14px }
.brow.you { box-shadow:inset 0 0 0 2px var(--amber) }
.brow .bn { font-weight:900; color:var(--muted); text-align:center }
.brow img { width:34px; height:34px; border-radius:50%; background:var(--card2); object-fit:cover }
.brow .bv { font-weight:900; font-variant-numeric:tabular-nums }

/* heist run */
.run { position:absolute; inset:0; z-index:20; background:#000; touch-action:none }
#cv { position:absolute; inset:0; width:100%; height:100%; display:block }
.run-top { position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0; pointer-events:none }
.run-quit { pointer-events:auto; width:34px; height:34px; border-radius:10px; background:rgba(10,13,28,.7); font-size:15px }
.run-pause { position:relative }
.run-pause::before, .run-pause::after { content:''; position:absolute; top:11px; width:4px; height:12px; border-radius:2px; background:currentColor }
.run-pause::before { left:11px } .run-pause::after { right:11px }
@media (max-width:359px) { #hLbl { font-size:16px } }   /* with the Pause button "УРОВЕНЬ 3001" still fits one line at 320 px */
.phase { flex:1; text-align:center; font:400 20px 'Lilita One', Rubik, sans-serif; letter-spacing:.06em; text-shadow:0 2px 0 rgba(0,0,0,.6) }
.strikes { display:flex; gap:5px; padding:6px 8px; border-radius:12px; background:rgba(10,13,28,.7) }
.strikes i { width:14px; height:14px; border-radius:50%; background:#384068; box-shadow:inset 0 0 0 2px #4a5384 }
.strikes i.on { background:radial-gradient(circle at 40% 35%,#ffb3b0,var(--red)); box-shadow:0 0 10px var(--red) }
.run-haul { position:absolute; left:50%; top:calc(56px + env(safe-area-inset-top,0px)); transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(10,13,28,.72); font-weight:900; font-size:17px; font-variant-numeric:tabular-nums; pointer-events:none }
.tip { position:absolute; left:16px; right:16px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); text-align:center; font-weight:900; font-size:15px; padding:10px 12px; border-radius:14px; background:rgba(10,13,28,.75); pointer-events:none; transition:opacity .3s }
.tip:empty { opacity:0 }
.banner { position:absolute; left:0; right:0; top:38%; text-align:center; font:400 44px 'Lilita One', Rubik, sans-serif; letter-spacing:.04em; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.55), 0 0 30px rgba(255,184,77,.5); pointer-events:none; animation:pop .5s cubic-bezier(.2,1.6,.4,1) }
.banner small { display:block; font:900 15px Nunito; letter-spacing:.02em; color:var(--muted); margin-top:4px; text-shadow:none }
.banner.bad { color:var(--red); text-shadow:0 4px 0 rgba(0,0,0,.55), 0 0 30px rgba(255,91,87,.6) }
@keyframes pop { from { transform:scale(.4); opacity:0 } to { transform:scale(1); opacity:1 } }

/* modal */
.modal { position:absolute; inset:0; z-index:40; background:rgba(6,8,18,.66); display:flex; align-items:flex-end; animation:fade .2s }
@keyframes fade { from { opacity:0 } }
.sheet { width:100%; max-height:92%; overflow-y:auto; background:var(--bg2); border-radius:24px 24px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); box-shadow:0 -1px 0 #39427a; animation:up .28s cubic-bezier(.2,1,.3,1) }
@keyframes up { from { transform:translateY(40px); opacity:.4 } }
.sh-t { font:400 26px 'Lilita One', Rubik, sans-serif; letter-spacing:.03em; text-align:center }
.sh-s { color:var(--muted); text-align:center; font-size:13.5px; margin:2px 0 10px }
/* Story bonus steps (1 Nov 2026): three short lines, left-aligned, one per step. */
.story-steps { margin:6px auto 8px; padding-left:24px; max-width:300px; text-align:left; font-size:16px; font-weight:800; line-height:1.45 }
.story-steps li { margin:3px 0 }
.res-big { display:flex; justify-content:center; align-items:center; gap:10px; font:400 46px 'Lilita One', Rubik, sans-serif; color:var(--gold); margin:4px 0 }
.res-big .ico.coin { width:34px; height:34px }
.res-lines { display:grid; gap:6px; background:var(--card); border-radius:14px; padding:10px 12px; font-size:14px; margin:8px 0 12px }
.res-lines div { display:flex; justify-content:space-between }
.res-lines b { font-variant-numeric:tabular-nums }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.stamp { text-align:center; font:400 34px 'Lilita One', Rubik, sans-serif; letter-spacing:.06em; margin-top:2px }
.stamp.good { color:var(--green) } .stamp.bad { color:var(--red) }
.res-art { display:block; height:120px; margin:0 auto -6px }

/* crew sheet */
.slots { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 }
.slot { position:relative; background:var(--card); border-radius:16px; padding:10px; min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; box-shadow:inset 0 0 0 1px var(--line) }
.slot img { width:58px; height:58px; border-radius:50%; background:var(--card2); object-fit:cover }
.slot .sn { font:400 15px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.slot .st { font-size:11.5px; color:var(--muted); font-weight:800 }
.slot .tag { position:absolute; top:7px; right:7px; font-size:9.5px; font-weight:900; letter-spacing:.06em; padding:2px 6px; border-radius:6px; background:var(--teal); color:#032a22 }
.slot .tag.bot { background:#4a5384; color:#dfe2ff }
.slot.empty { box-shadow:inset 0 0 0 2px #3a4479; background:transparent; border:2px dashed #3a4479 }
.slot .sb { display:grid; gap:6px; width:100%; margin-top:4px }
.slot .lk { font-size:10.5px; color:var(--amber); text-decoration:underline; font-weight:800 }
.searching { animation:blink 1s infinite }
@keyframes blink { 50% { opacity:.4 } }
.vault-total { text-align:center; margin:6px 0 2px; font:400 44px 'Lilita One', Rubik, sans-serif; color:var(--gold) }
.vault-sub { text-align:center; color:var(--muted); font-size:13px }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 6px }
.choices .btn { padding:16px 8px; font-size:22px; flex-direction:column; gap:0 }
.choices .btn small { font:900 11.5px Nunito; letter-spacing:0; opacity:.85 }
.ctimer { height:6px; border-radius:6px; background:#2c3462; overflow:hidden; margin-top:6px }
.ctimer i { display:block; height:100%; background:var(--amber); width:100% }
.reveal { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 }
.rcard { perspective:600px; height:132px }
.rcard .in { position:relative; width:100%; height:100%; transition:transform .55s; transform-style:preserve-3d }
.rcard.flip .in { transform:rotateY(180deg) }
.rcard .f, .rcard .b { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px; text-align:center; background:var(--card); box-shadow:inset 0 0 0 1px var(--line) }
.rcard .b { transform:rotateY(180deg) }
.rcard img { width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--card2) }
.rcard .rn { font:400 13px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.rcard .rt { font-size:10.5px; color:var(--muted); font-weight:800 }
.rcard .rc { font:400 17px 'Lilita One', Rubik, sans-serif; letter-spacing:.04em }
.rcard .b.split { background:linear-gradient(180deg,#1f5a3d,#173b2c); box-shadow:inset 0 0 0 2px var(--green) }
.rcard .b.grab { background:linear-gradient(180deg,#6a2323,#3e1717); box-shadow:inset 0 0 0 2px var(--red) }
.rcard .b.split .rc { color:var(--green) } .rcard .b.grab .rc { color:var(--red) }
.rcard .rv { font-weight:900; font-size:12.5px; color:var(--gold) }
.tgpost { margin:10px 0 0; background:#0f1426; border-radius:14px; padding:10px 12px; font-size:13px; box-shadow:inset 0 0 0 1px #2b3358 }
.tgpost .tgh { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); font-weight:900; margin-bottom:4px }
.tgpost .tgh i { width:18px; height:18px; border-radius:50%; background:url(assets/hero_head.png) center/cover, var(--card2) }
.outcome { text-align:center; font:400 26px 'Lilita One', Rubik, sans-serif; letter-spacing:.03em; margin-top:4px }
.outcome.good { color:var(--green) } .outcome.bad { color:var(--red) } .outcome.mid { color:var(--amber) }
.deltas { display:flex; justify-content:center; gap:14px; font-weight:900; margin:4px 0 2px; font-size:14px }
.deltas .up { color:var(--green) } .deltas .down { color:var(--red) }

/* toast */
.toast { position:absolute; left:50%; top:calc(64px + env(safe-area-inset-top,0px)); transform:translateX(-50%); z-index:60; max-width:88%; padding:10px 14px; border-radius:14px; background:rgba(16,20,42,.94); box-shadow:inset 0 0 0 1px #3a4479; font-weight:800; font-size:13.5px; text-align:center; animation:fade .2s }

@media (min-width:480px) { body { background:radial-gradient(circle at 50% 20%,#232a52,#0b0e1d 70%) } #app { box-shadow:0 0 60px rgba(0,0,0,.6) } }

/* v0.2: rival vaults, vault tab, defenses, gifts */
.rivals { display:grid; gap:8px; margin-bottom:16px }
.rival { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; background:var(--card); border-radius:16px; padding:10px 12px; box-shadow:inset 0 0 0 1px var(--line), 0 3px 0 #10142a; text-align:left; width:100% }
.rival.revenge { box-shadow:inset 0 0 0 2px var(--red), 0 3px 0 #10142a }
.rival.cool { filter:saturate(.4) brightness(.75) }
.rival img.av { width:48px; height:48px; border-radius:50%; background:var(--card2); object-fit:cover }
.rival .rn { font:400 16px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; display:flex; align-items:center; gap:6px }
.rival .rn .rtag { font:900 9.5px Nunito; letter-spacing:.06em; padding:2px 6px; border-radius:6px; background:var(--red); color:#2c0403 }
.rival .rs { font-size:12px; color:var(--muted); font-weight:800 }
.rival .rs b { color:var(--gold) }
.defs { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }
.defs span { display:inline-flex; align-items:center; gap:3px; background:var(--bg2); border-radius:8px; padding:2px 6px 2px 3px; font-size:11px; font-weight:900; color:#dfe2ff }
.defs img { width:18px; height:18px; object-fit:contain }
.rival .go { text-align:center; font-size:11px; color:var(--muted); font-weight:800 }
.vaultcard { position:relative; margin:12px 0 4px; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,rgba(21,26,46,.2),rgba(21,26,46,.95) 70%), url(assets/bg_vault.webp) center 42%/cover; padding:110px 14px 14px; box-shadow:inset 0 0 0 1px #3a4479 }
.vaultcard .vt { font:400 15px 'Lilita One', Rubik, sans-serif; letter-spacing:.06em; color:#cfd3ff }
.vaultcard .vb { display:flex; align-items:center; gap:10px; font:400 40px 'Lilita One', Rubik, sans-serif; color:var(--gold) }
.vaultcard .vb .ico.coin { width:30px; height:30px }
.vaultcard .vr { font-size:13px; font-weight:800; color:var(--teal); margin-bottom:10px }
.vaultcard .vr b { color:#fff }
.vrow { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px }
.vrow .btn { padding:10px 6px; font-size:14px }
.interest { display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(16,20,42,.85); border-radius:14px; padding:8px 8px 8px 12px; margin-bottom:10px; font-weight:900 }
.interest small { display:block; font-size:11px; color:var(--muted) }
.gifts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.gslot { background:var(--card); border-radius:16px; padding:10px 6px; text-align:center; box-shadow:inset 0 0 0 1px var(--line); min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px }
.gslot.empty { background:transparent; border:2px dashed #3a4479; box-shadow:none; color:var(--muted); font-size:12px; font-weight:800 }
.gslot .ge { font-size:34px; line-height:1.1 }
.gslot .gn { font:400 13px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.gslot .gb { font-size:11px; font-weight:900; color:var(--teal) }
.gicon img { width:44px; height:44px; object-fit:contain }
.dp { font:900 12px Nunito; color:#032a22; background:var(--teal); border-radius:8px; padding:2px 8px; letter-spacing:.02em }
.gpick { display:grid; gap:8px; margin:10px 0 }
.gopt { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; background:var(--card); border-radius:14px; padding:8px 12px; text-align:left; box-shadow:inset 0 0 0 1px var(--line) }
.gopt .ge { font-size:30px; text-align:center }
.gopt .rar { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em }
.gopt.used { opacity:.45 }
.run-haul small { font-size:12px; color:var(--muted); font-weight:900 }
.report { display:grid; gap:6px; margin:8px 0 12px }
.report div { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; background:var(--card); border-radius:12px; padding:8px 10px; font-size:13px }
.report img { width:30px; height:30px; border-radius:50%; object-fit:cover }
.report b.ok { color:var(--green) } .report b.bad { color:var(--red) }

.goal { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg2); border-radius:12px; padding:8px 10px 8px 12px; margin:0 0 10px; font-size:13px; font-weight:800 }
.rival .rn .rtag.bot { background:#4a5384; color:#dfe2ff }

.missions { background:var(--card); border-radius:18px; padding:10px 12px; margin:4px 0 14px; box-shadow:inset 0 0 0 1px var(--line) }
.missions .mh { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px }
.missions .mh span { font:400 17px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }
.missions .mh small { color:var(--muted); font-size:11.5px; font-weight:800 }
.mrow { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:7px 0; border-top:1px solid #2c3462 }
.mrow b { font-size:13.5px } .mrow small { display:block; color:var(--muted); font-size:11.5px; font-weight:800 }
.mrow.claimed { opacity:.55 }
.mbar { display:block; width:64px; height:8px; border-radius:6px; background:#2c3462; overflow:hidden }
.mbar i { display:block; height:100%; background:var(--teal) }
.mck { color:var(--green); font-weight:900; font-size:18px }
.mfoot { font-size:11.5px; color:var(--amber); font-weight:800; margin-top:4px }

/* Grid Hack */
.hackcard { background:linear-gradient(135deg,#123a46,#1d2a5a); border-radius:20px; padding:12px; box-shadow:inset 0 0 0 1px #2f6e7a, 0 3px 0 #10142a; display:grid; grid-template-columns:86px 1fr; gap:12px; align-items:center; margin-bottom:16px }
.hackcard .hc-art { width:86px; height:86px; border-radius:14px; background:#0d1f2b; display:grid; grid-template-columns:repeat(6,1fr); gap:2px; padding:8px }
.hackcard .hc-art i { border-radius:3px }
.hackcard.locked { filter:saturate(.5) brightness(.8) }
.hack { position:absolute; inset:0; z-index:20; background:#0c1020; touch-action:none }
#hcv { position:absolute; inset:0; width:100%; height:100%; display:block; background:linear-gradient(180deg, #4b4e70, #363856) }   /* painted once by the browser; hackDraw only clears (31 Oct 2026, lag fix) */
/* release 13, skip arm: the withdrawal line above Grid 1, under the top bar and the progress line (y 58-66); hackLayout starts the board
   below it, and the first-grid toast moves below it too */
.hack-banner { position:absolute; left:50%; transform:translateX(-50%); top:calc(72px + env(safe-area-inset-top,0px)); max-width:calc(100% - 24px); padding:5px 14px; border-radius:999px; background:rgba(10,13,28,.82); box-shadow:inset 0 0 0 1px #3ee6c4; font:800 13px Nunito,system-ui,sans-serif; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; z-index:2 }
.hack-banner b { color:#3ee6c4 }
/* The welcome gift's line over Grid 1 (earn/_gift.js) is longer than the withdrawal line: it wraps to a second line, never an ellipsis. */
.hack-banner.gift { white-space:normal; text-align:center; text-wrap:balance; border-radius:14px; line-height:1.25; overflow:visible }
#app.hack-bannered .toast { top:calc(108px + env(safe-area-inset-top,0px)) }
.hack-credit { position:absolute; left:0; right:0; bottom:calc(4px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:9.5px; color:#5d6390; pointer-events:none }

/* LOOT earn hub */
.lootstrip { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:10px 0 4px; padding:10px 12px; border-radius:16px; background:linear-gradient(135deg,#1e3a5c,#23306a); box-shadow:inset 0 0 0 1px #3c5c99, 0 3px 0 #10142a; text-align:left }
.lootstrip.ready { box-shadow:inset 0 0 0 2px var(--teal), 0 3px 0 #10142a, 0 0 14px rgba(62,230,196,.25) }
.ls-b { font:400 19px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap }
.ls-s { font-size:12px; color:#bfd2ff; font-weight:800; min-width:0 }
.ls-go { font:400 22px 'Lilita One', Rubik, sans-serif; color:var(--teal) }
.lootcard { background:linear-gradient(135deg,#1e3a5c,#2a2f6e); border-radius:20px; padding:14px; box-shadow:inset 0 0 0 1px #3c5c99, 0 3px 0 #10142a; display:grid; gap:6px }
.lc-bal { font:400 34px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:8px }
.lc-bal small { font:900 13px Nunito, sans-serif; color:#bfd2ff; letter-spacing:.08em }
.lc-lvl { font:400 17px 'Lilita One', Rubik, sans-serif; color:var(--gold); letter-spacing:.02em }
.lc-sub { font-size:12.5px; color:#bfd2ff }
.lvlbar { height:8px; border-radius:8px; background:#2c3462; overflow:hidden }
.lvlbar.big { height:14px; border-radius:10px }
.lvlbar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),#7ff5df); border-radius:inherit; transition:width .5s }
.shiftcard { background:var(--card); border-radius:18px; padding:14px; box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:8px }
.shiftcard .btn.wide { margin-top:4px }
.sc-row { display:flex; justify-content:space-between; align-items:baseline; font-weight:900 }
.sc-row b { font:400 18px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums }
.sc-sub { font-size:12.5px; color:var(--muted) }
.earnrow { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; background:var(--card); border-radius:18px; padding:12px 14px; box-shadow:inset 0 0 0 1px var(--line) }
.earnrow.col { grid-template-columns:1fr }
.earnrow b { display:block; font-weight:900; font-size:14.5px }
.earnrow small { display:block; color:var(--muted); font-size:12.5px; margin-top:3px }
.earnrow .btn.wide { margin-top:0 }
.cashout { background:var(--bg2); border-radius:16px; padding:12px 14px; font-size:13px; color:var(--muted); box-shadow:inset 0 0 0 1px #2a3156 }
.cashout p { margin:0 0 6px; color:var(--ink) }
.cashout ul { margin:0; padding-left:18px; display:grid; gap:3px }
.wdcard { gap:8px }
.board-play { margin:0 0 10px }
.energy-opts { display:grid; gap:8px; margin:10px 0 }
.energy-opts .btn.wide { margin-top:0 }
#energyBox { cursor:pointer }
.channel-sep { height:1px; background:var(--line); margin:10px 0 }
.story-task, .name-task { margin-top:10px }
.story-task .btn.wide { margin-top:8px }
.racccard { background:rgba(127,245,223,.1); border-radius:14px; padding:10px 12px; margin:8px 0 2px; text-align:left }
.racccard b { display:block; font-size:14px }
.racccard small { display:block; color:var(--muted); font-size:12px; margin:2px 0 8px }
.racccard .row2 .btn { font-size:13px }
/* First-five goals live inside the existing screens; result actions stay in the fixed footer. */
#s-home>.menu-stage:has([data-menu-pane="home:grid"]:not([hidden])) { flex:1 0 auto; min-height:min-content }
#s-home [data-menu-pane="home:grid"] { flex:none; min-height:min-content; justify-content:flex-start }
#gridGoal:empty { display:none }
.progress-card { background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:12px; text-align:left; font-size:13px; line-height:1.4; min-width:0 }
.progress-card small { display:block; color:var(--muted); font-size:12px }
.progress-road { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; margin-bottom:12px }
.progress-road small,.progress-road progress { grid-column:1/-1 }
.progress-road progress { appearance:none; border:0; width:100%; height:8px; border-radius:5px; overflow:hidden; background:var(--line) }
.progress-road progress::-webkit-progress-bar { background:transparent }
.progress-road progress::-webkit-progress-value { background:var(--teal); border-radius:5px }
.progress-road progress::-moz-progress-bar { background:var(--teal); border-radius:5px }
.progress-title,.progress-price,.progress-effect { display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; margin:5px 0 }
.progress-title>b { font:400 21px 'Lilita One',Rubik,sans-serif; color:var(--ink) }
.progress-title>span,.progress-price>span:last-child { color:var(--muted); font-size:12px }
.progress-price .ico { width:17px; height:17px }
.progress-price>span:last-child { flex-basis:100% }
.progress-effect { color:var(--muted) }.progress-effect>b { color:var(--teal) }
.progress-choice>.btn { margin-top:9px; min-height:44px; max-width:100%; white-space:normal }
.progress-choice>p { margin:5px 0 }
.progress-uses { border-top:1px solid var(--line); margin-top:11px; padding-top:4px }
.progress-uses summary,.racccard summary { cursor:pointer; padding:10px 0; font-weight:900; min-height:44px }
.progress-uses summary:focus-visible,.racccard summary:focus-visible { outline:2px solid var(--teal); outline-offset:2px }
.progress-uses p { margin:5px 0 10px; color:var(--muted) }.progress-uses p>b,.progress-uses p>span { display:block }
.progress-uses p>b { color:var(--ink) }.progress-uses .btn { white-space:normal; min-height:44px }
.sheet-body .progress-card { margin:9px 0 }
.sheet-body details.racccard { margin:8px 0 }.racccard[open] summary { margin-bottom:3px }
@media(max-height:600px) { .progress-card { padding:9px }.progress-road { margin-bottom:8px }.progress-title>b { font-size:19px } }
.wd-rules { font-size:12px; color:#bfd2ff; font-weight:800 }
.wdfast { margin-top:8px }
.wd-legal { margin:8px 2px 0; font-size:11.5px; color:var(--muted) }
.wdnote { margin-top:4px; background:rgba(127,245,223,.12); color:#7ff5df; border:0; border-radius:12px; padding:8px 10px; font:900 12.5px Nunito, sans-serif; text-align:left; cursor:pointer }
.toplist { display:grid; gap:6px; margin-bottom:12px }
.toplist div { display:grid; grid-template-columns:22px 1fr auto auto; gap:8px; align-items:center; background:var(--card); border-radius:12px; padding:8px 12px; font-variant-numeric:tabular-nums }
.toplist div.me { box-shadow:inset 0 0 0 2px var(--teal) }
.toplist span { color:var(--muted); font-weight:900 }
.toplist small { color:var(--muted); font-weight:800 }
.toplist em { font-style:normal; font-weight:900 }
.res-loot { font:400 20px 'Lilita One', Rubik, sans-serif; color:#9fe8ff; letter-spacing:.02em; text-align:center; margin:-4px 0 8px }
.mech { display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center; text-align:left; background:var(--bg2); border-radius:14px; padding:9px 12px; margin:6px 0 }
.mech span { font-size:26px; text-align:center }
.mech b { display:block; font-weight:900 } .mech small { color:var(--muted); font-size:12.5px }

/* Optional Lou tutorial: only its own entry and native dialog. */
/* Lou’s hideout: illustrated lessons and one focused personal answer. */
.lou-entry{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;margin:10px 0;border:1px solid #826340;border-radius:16px;background:linear-gradient(110deg,#43362b,#283341);color:#fff;text-align:left;font:inherit;cursor:pointer}.lou-entry img{width:56px;height:56px;object-fit:contain}.lou-entry span:nth-child(2){flex:1}.lou-entry b{display:block;font-size:18px}.lou-entry small{display:block;color:#e2cba9;font-size:12px;margin-top:3px}
.lou-dialog{box-sizing:border-box;width:min(860px,calc(100vw - 24px));height:min(830px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);margin:auto;border:1px solid #8c7657;border-radius:25px;padding:0;background:#202731;color:#fff2da;box-shadow:0 24px 80px #000a;overflow:hidden;font-family:Nunito,sans-serif;text-align:left}.lou-dialog[open]{display:flex;flex-direction:column}.lou-dialog::backdrop{background:#080d19d9;backdrop-filter:blur(5px)}.lou-dialog [hidden]{display:none!important}.lou-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 22px 14px;background:linear-gradient(115deg,#40372d,#242c37);flex-shrink:0}.lou-eyebrow{font-size:10px;letter-spacing:.15em;font-weight:900;color:#cda569}.lou-header h2{font:30px 'Lilita One', Rubik, sans-serif;line-height:1.1;margin:3px 0 0;color:#fff2da}.lou-header-actions{display:flex;gap:7px}.lou-dialog button{font:900 14px Nunito,sans-serif;border:1px solid #816e52;border-radius:13px;background:#3f413f;color:#fff2da;cursor:pointer;min-height:44px;padding:9px 14px;touch-action:manipulation}.lou-dialog button:disabled{opacity:.55;cursor:default}.lou-dialog button:hover:not(:disabled){filter:brightness(1.12)}.lou-dialog button:focus-visible,.lou-dialog textarea:focus-visible{outline:3px solid #8ee4c1;outline-offset:2px}.lou-dialog .lou-icon{padding:0;width:44px;flex-shrink:0;font-size:21px;background:#ffffff0b}.lou-scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain;scrollbar-width:thin}.lou-picture{position:relative;height:clamp(190px,32vh,300px);background:#202132;overflow:hidden}.lou-picture img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}.lou-picture-tag{position:absolute;left:20px;bottom:15px;background:#171d2ccf;border:1px solid #f4cd8644;border-radius:8px;padding:7px 11px;font-size:10px;font-weight:900;letter-spacing:.12em;color:#ffe9bc;backdrop-filter:blur(8px)}.lou-lesson-copy{padding:18px 22px 10px;background:#f3e6ce;color:#393028}.lou-lesson-heading{display:flex;gap:18px;align-items:center;justify-content:space-between}.lou-lesson-heading>div{max-width:580px}.lou-lesson-heading h3{font:27px 'Lilita One', Rubik, sans-serif;margin:0 0 5px;line-height:1.1}.lou-lesson-heading p{font-size:14px;line-height:1.45;margin:0;color:#65503d}.lou-dialog .lou-listen{flex-shrink:0;background:#fcf3df;border-color:#c6ad86;color:#5a422b;font-size:12px;white-space:nowrap;box-shadow:0 2px 0 #b59c79;display:inline-flex;gap:7px;align-items:center;justify-content:center}.lou-dialog .lou-listen.is-playing{background:#dfb56f}.lou-lesson-copy ol{counter-reset:lou-steps;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0;margin:16px 0 5px}.lou-lesson-copy li{counter-increment:lou-steps;position:relative;font-size:12px;line-height:1.45;padding-left:29px;color:#66503d}.lou-lesson-copy li:before{content:counter(lou-steps);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#6a5845;color:#fff3da;font-size:11px;font-weight:900}.lou-lesson-copy li b{display:block;font-size:13px;color:#403024;margin-bottom:2px}.lou-lesson-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:15px 22px 3px}.lou-dialog .lou-lesson-rail button{padding:0;overflow:hidden;border:2px solid transparent;background:#303a45;min-width:0;text-align:left;transition:border-color .15s}.lou-lesson-rail img{display:block;width:100%;height:68px;object-fit:cover;object-position:center 40%}.lou-lesson-rail span{display:block;font-size:12px;padding:8px 10px;line-height:1.15}.lou-dialog .lou-lesson-rail button[aria-current=true]{border-color:#f4c778;background:#4c493f;color:#ffe1a7}.lou-status{min-height:0;font-size:12px;line-height:1.4;color:#f3c993;margin:0;padding:8px 22px}.lou-status:empty{padding:0}.lou-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:#242e38;border-top:1px solid #ffffff10;flex-shrink:0}.lou-footer b{font-size:14px;display:block}.lou-footer span{font-size:12px;color:#d0baa0;display:block;margin-top:2px}.lou-dialog .lou-primary{background:linear-gradient(#efc782,#dbac60);color:#392914;border:1px solid #f2d49e;box-shadow:0 3px 0 #937245;font-size:15px;padding:11px 22px;white-space:nowrap}.lou-footer .lou-primary span{display:inline;color:inherit;font-size:18px;margin-left:7px}.lou-question{padding:12px 22px 18px}.lou-dialog .lou-back{padding:4px 0;border:none;background:none;color:#d1b78c;font-size:13px;min-height:44px}.lou-answer-scene{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;min-height:210px;margin-bottom:12px}.lou-answer-scene>img{width:100%;max-height:245px;object-fit:contain;filter:drop-shadow(0 12px 14px #0005)}.lou-note{position:relative;background:#f5e8cf;border:2px solid #d2af79;border-radius:18px;padding:21px;color:#4f3c27;min-width:0;box-shadow:0 4px 0 #0e151b55}.lou-note:before{content:'';position:absolute;width:15px;height:15px;top:50%;left:-10px;transform:rotate(45deg);background:#f5e8cf;border-left:2px solid #d2af79;border-bottom:2px solid #d2af79}.lou-note .lou-eyebrow{color:#947348}.lou-note p{font:22px/1.4 'Lilita One', Rubik, sans-serif;margin:8px 0 0;overflow-wrap:anywhere}.lou-note .lou-listen{margin-top:14px}.lou-price-line{display:flex;gap:8px;justify-content:space-between;align-items:center;margin:14px 0;color:#e9c383;font-size:13px;font-weight:900}.lou-price-line span:last-child{color:#bacbcf;font-size:12px}.lou-question-label{display:block;font-size:13px;font-weight:800;margin:0 0 8px;color:#efdfc6}#louForm{display:grid;gap:9px}#louInput{resize:vertical;box-sizing:border-box;min-height:88px;max-height:170px;width:100%;background:#151f29;border:1px solid #7a776c;border-radius:13px;padding:13px;color:#fff4df;font:16px/1.45 Nunito,sans-serif}#louInput::placeholder{color:#a5b1b8}#louSend{justify-self:stretch}.lou-small,.lou-disclosure{font-size:11px;line-height:1.5;color:#acb9c3;margin:14px 0 0}.lou-disclosure{font-size:10px;color:#8c9ba7;margin-top:7px}
@media(max-width:540px){.lou-dialog{width:calc(100vw - 16px);height:min(820px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);border-radius:20px}.lou-header{padding:14px 15px 12px}.lou-header h2{font-size:26px}.lou-picture{height:clamp(170px,26vh,225px)}.lou-picture-tag{left:14px;bottom:12px}.lou-lesson-copy{padding:15px 15px 9px}.lou-lesson-heading{align-items:flex-start;gap:8px}.lou-lesson-heading h3{font-size:25px}.lou-lesson-heading p{font-size:13px}.lou-dialog .lou-lesson-heading .lou-listen{font-size:0;width:44px;padding:0}.lou-dialog .lou-lesson-heading .lou-listen span{font-size:18px}.lou-lesson-copy ol{gap:9px;grid-template-columns:1fr;margin-top:12px}.lou-lesson-copy li{font-size:12px;padding-left:29px}.lou-lesson-copy li b{display:inline;margin-right:4px}.lou-lesson-rail{gap:7px;padding:12px 15px 3px}.lou-lesson-rail img{height:56px}.lou-lesson-rail span{font-size:10px;padding:7px 6px}.lou-footer{padding:12px 15px;gap:10px}.lou-footer b{font-size:12px}.lou-footer span{font-size:10px}.lou-footer .lou-primary{padding:10px 15px;font-size:14px}.lou-question{padding:8px 15px 16px}.lou-answer-scene{grid-template-columns:92px 1fr;gap:10px;min-height:160px}.lou-answer-scene>img{max-height:185px}.lou-note{padding:14px 12px}.lou-note p{font-size:18px}.lou-note .lou-eyebrow{font-size:8px}.lou-price-line{align-items:flex-start;flex-direction:column;gap:3px;margin:12px 0}.lou-status{padding:8px 15px}}
@media(max-height:480px){.lou-dialog{width:min(900px,calc(100vw - 16px));height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}.lou-header{padding:8px 14px}.lou-header h2{font-size:23px}.lou-eyebrow{font-size:8px}.lou-picture{height:170px}.lou-footer{padding:8px 14px}.lou-answer-scene{grid-template-columns:100px 1fr;min-height:130px}.lou-answer-scene>img{max-height:155px}.lou-note p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.lou-dialog *{transition:none!important}}

.lou-captions{margin:7px 0 0;font-size:11px;line-height:1.5;color:#705842}.lou-captions summary{cursor:pointer;padding:5px 0;min-height:24px;box-sizing:border-box}.lou-captions p{margin:5px 0 9px;max-width:72ch}
@media(max-width:540px) and (max-height:700px){.lou-header{padding:10px 14px}.lou-header h2{font-size:23px}.lou-picture{height:145px}.lou-lesson-copy{padding:11px 14px 7px}.lou-lesson-heading h3{font-size:23px}.lou-lesson-heading p{font-size:12px;line-height:1.35}.lou-lesson-copy ol{margin-top:10px;gap:6px}.lou-lesson-copy li{font-size:11px;line-height:1.4}.lou-lesson-copy li b{font-size:12px}.lou-lesson-rail{padding-top:10px}.lou-lesson-rail img{height:42px}.lou-footer{padding:10px 14px}.lou-captions{margin-top:4px}}
@media(min-width:541px) and (max-height:480px){.lou-header{padding:7px 14px}.lou-header h2{font-size:22px}.lou-footer{padding:7px 14px}.lou-footer b{font-size:12px}.lou-footer span{font-size:10px}.lou-footer .lou-primary{padding:8px 20px;font-size:14px}.lou-scroll{position:relative}#louLessons{display:grid;grid-template-columns:43% 57%;min-height:100%}.lou-picture{grid-row:1/3;height:100%;min-height:200px}.lou-picture img{object-position:46% center}.lou-picture-tag{left:10px;bottom:10px;padding:5px;font-size:8px}.lou-lesson-copy{padding:10px 12px 4px}.lou-lesson-heading{gap:7px;align-items:flex-start}.lou-lesson-heading h3{font-size:22px;margin-bottom:3px}.lou-lesson-heading p{font-size:11px;line-height:1.3}.lou-dialog .lou-lesson-heading .lou-listen{font-size:0;width:44px;padding:0}.lou-dialog .lou-lesson-heading .lou-listen span{font-size:16px}.lou-lesson-copy ol{display:block;margin:8px 0 0}.lou-lesson-copy li{font-size:10px;line-height:1.35;padding-left:22px;min-height:20px}.lou-lesson-copy li:before{width:16px;height:16px;font-size:9px}.lou-lesson-copy li b{display:inline;font-size:11px;margin-right:3px}.lou-captions{margin:0;font-size:10px}.lou-captions summary{padding:2px 0;min-height:20px}.lou-lesson-rail{gap:6px;padding:7px 12px}.lou-lesson-rail img{height:29px}.lou-lesson-rail span{font-size:10px;padding:5px}.lou-question{display:grid;grid-template-columns:40% 1fr;column-gap:16px;padding:4px 15px 10px}.lou-question .lou-back{grid-column:1;grid-row:1;justify-self:start}.lou-answer-scene{grid-column:1;grid-row:2/5;grid-template-columns:65px 1fr;gap:8px;margin:0;align-self:start;min-height:125px}.lou-answer-scene>img{max-height:150px}.lou-note{padding:12px 10px}.lou-note p{font-size:16px}.lou-note .lou-eyebrow{font-size:7px}.lou-price-line{grid-column:2;grid-row:1;align-self:center;margin:3px 0;flex-direction:row;font-size:11px}.lou-price-line span:last-child{font-size:10px}#louForm{grid-column:2;grid-row:2/4;gap:5px}.lou-question-label{font-size:11px;margin-bottom:0}#louInput{min-height:60px;max-height:90px;padding:8px 10px;font-size:16px}#louSend{padding:8px 12px;font-size:13px}.lou-small{grid-column:2;grid-row:4;font-size:9px;margin:7px 0 0}.lou-disclosure{grid-column:1/-1;grid-row:5;font-size:9px;margin-top:8px}.lou-note .lou-listen{font-size:10px;padding:6px;margin-top:9px}}

/* The plan itself stays large and readable; optional detail opens only when wanted. */
.lou-lesson-copy li{font-size:16px;line-height:1.45;padding-left:30px}.lou-lesson-copy li b{font-size:17px}.lou-lesson-copy li:before{top:2px}.lou-lesson-rail span{font-size:14px}.lou-lesson-copy ol{margin-top:17px;margin-bottom:8px}.lou-captions{font-size:12px}.lou-about{font-size:11px;line-height:1.45;color:#acb9c3;margin:8px 0 0}.lou-about summary{cursor:pointer;min-height:24px;padding:4px 0;box-sizing:border-box}.lou-about .lou-disclosure{margin-top:3px}.lou-small{font-size:12px}
@media(max-width:540px){.lou-lesson-copy li{font-size:16px;line-height:1.4}.lou-lesson-copy li b{font-size:16px}.lou-lesson-copy ol{gap:10px;margin-top:14px;margin-bottom:7px}.lou-lesson-rail span{font-size:12px}.lou-small{font-size:11px}.lou-lesson-copy{padding-top:15px}.lou-dialog .lou-lesson-heading .lou-listen{margin-top:-5px}}
@media(max-width:540px) and (max-height:700px){.lou-lesson-copy li,.lou-lesson-copy li b{font-size:15px}.lou-lesson-copy ol{gap:7px;margin-top:10px}.lou-captions{font-size:11px}.lou-lesson-rail span{font-size:11px}.lou-lesson-copy{padding-top:11px}}
@media(max-width:540px) and (max-height:600px){.lou-picture{height:110px}.lou-lesson-copy li,.lou-lesson-copy li b{font-size:14px}.lou-lesson-copy ol{gap:5px}.lou-lesson-rail img{height:32px}}
@media(min-width:541px) and (max-height:480px){.lou-lesson-copy li,.lou-lesson-copy li b{font-size:14px;line-height:1.3}.lou-lesson-copy li{padding-left:23px;min-height:23px}.lou-lesson-copy ol{margin:7px 0 0}.lou-captions{font-size:11px}.lou-lesson-rail span{font-size:11px}.lou-about{grid-column:1/-1;grid-row:5;font-size:10px;margin-top:3px}.lou-about .lou-disclosure{margin-top:0}.lou-small{font-size:10px}.lou-lesson-copy{padding-top:10px}}

@media(min-width:541px) and (min-height:481px) and (max-height:800px){.lou-picture{height:185px}.lou-lesson-copy{padding-top:14px;padding-bottom:6px}.lou-lesson-rail{padding-top:11px}}
@media(min-width:541px) and (max-height:480px){.lou-header{padding-top:4px;padding-bottom:4px}.lou-footer{padding-top:5px;padding-bottom:5px}.lou-lesson-copy{padding-top:7px;padding-bottom:2px}.lou-lesson-rail{padding-top:3px;padding-bottom:3px}.lou-lesson-rail img{height:24px}.lou-lesson-rail span{padding-top:4px;padding-bottom:4px}.lou-captions summary{padding:0;min-height:18px}}
.lou-has-answer #louForm{display:none}#louAnother{display:block;width:100%;margin-top:10px}.lou-has-answer .lou-answer-scene{min-height:210px}
@media(max-width:540px){.lou-has-answer .lou-answer-scene{position:relative;display:block;min-height:0;margin-top:8px}.lou-has-answer .lou-answer-scene>img{position:absolute;right:14px;top:-12px;width:55px;height:70px;z-index:1}.lou-has-answer .lou-note{padding:16px}.lou-has-answer .lou-note:before{display:none}.lou-has-answer .lou-note p{font-size:19px;line-height:1.4;margin-top:25px}.lou-has-answer .lou-note .lou-listen{margin-top:12px}.lou-has-answer .lou-price-line{margin-top:16px}}
@media(min-width:541px) and (max-height:480px){.lou-has-answer .lou-question{grid-template-columns:65% 1fr}.lou-has-answer .lou-answer-scene{grid-column:1;grid-row:2/5;min-height:0;align-self:start}.lou-has-answer .lou-note p{font-size:17px}.lou-has-answer .lou-price-line{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-start;align-self:end;gap:4px;margin:0 0 10px}.lou-has-answer #louAnother{grid-column:2;grid-row:3;align-self:start;margin:0;font-size:13px;padding:8px}.lou-has-answer .lou-small{grid-column:2;grid-row:4;align-self:start}.lou-has-answer .lou-about{grid-column:2;grid-row:5;align-self:start}.lou-has-answer .lou-note .lou-listen{margin-top:8px}}

/* Telegram VIP: a bounded, accessible shop sheet, separate from gameplay. */
.platform-entry { display:flex; align-items:center; gap:10px; margin:7px 0; color:var(--muted); font-size:12px }
.platform-entry button { background:#3a3155; border:1px solid #b79958; color:#ffe3a0; border-radius:12px; padding:9px 14px; font-weight:900; flex:none; min-height:40px }
.vip-dialog { width:min(400px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:hidden; color:var(--ink); border:1px solid #8c754a; border-radius:26px; padding:28px; background:radial-gradient(circle at 50% 0,#403759,#1b2038 66%); text-align:center; box-shadow:0 18px 80px #0009 }
.vip-dialog::backdrop { background:#080b18cc }
.vip-close { position:absolute; right:12px; top:10px; width:40px; height:40px; font-size:28px; color:var(--muted) }
.vip-mark { display:block; color:#ffcf67; font-size:46px; line-height:1 }
.vip-dialog h2 { font:400 29px/1.1 'Lilita One', Rubik, sans-serif; margin:15px 0 8px }
.vip-lead { font-size:19px; margin:0 0 18px }
.vip-price { font-size:33px; font-weight:900; color:#ffdc91 }
.vip-price span { display:block; font-size:14px; color:#efdab4 }
.vip-small { font-size:12px; color:var(--muted); margin:7px 0 }
.vip-state { font-size:14px; min-height:38px; margin:13px 0 }
.vip-terms { text-align:left; font-size:12px; color:#b7bdd5; margin:12px 0 }
.vip-terms summary { min-height:32px; cursor:pointer; color:var(--ink); font-size:14px }
.vip-terms p { margin:6px 0; line-height:1.45; max-height:min(110px,17dvh); overflow:auto; overscroll-behavior:contain }
.vip-consent { display:flex; align-items:center; gap:9px; text-align:left; font-size:13px; min-height:42px; margin:8px 0 }
.vip-consent input { width:20px; height:20px; accent-color:var(--teal); flex:none }
.vip-support { min-height:40px; font-size:13px; color:#b7bdd5; margin-top:4px }
.vip-dialog button:focus-visible,.vip-dialog summary:focus-visible,.platform-entry button:focus-visible { outline:3px solid var(--teal); outline-offset:3px }
/* Phones around 568-640 px tall: both payment choices (Stars and GRAM) must be visible without scrolling. */
@media (max-height:640px) { .vip-dialog { padding:18px 22px } .vip-mark { display:none } .vip-dialog h2 { font-size:24px; margin:6px 30px 4px 0 } .vip-lead { font-size:16px; margin-bottom:8px } .vip-price { font-size:26px } .vip-small { margin:4px 0 } .vip-state { min-height:22px; margin:8px 0 } .vip-terms { margin:6px 0 } .vip-consent { min-height:36px; margin:4px 0 } .vip-support { min-height:34px; margin-top:0 } }
@media (max-height:530px) { .vip-dialog { padding:16px 22px; } .vip-mark { display:none } .vip-dialog h2 { font-size:23px; margin:5px 30px 5px 0 } .vip-lead { font-size:15px; margin-bottom:7px } .vip-price { font-size:24px } .vip-price span { display:inline; font-size:13px } .vip-state { min-height:0; margin:7px 0; font-size:12px } .vip-terms { margin:5px 0 } .vip-small { margin:4px 0 } .vip-consent { margin:3px 0; min-height:32px } .vip-support { min-height:32px; margin:0 } }

.platform-ad-frame { position:fixed; inset:0; width:100%; height:100%; border:0; z-index:2147483647; background:#101426 }
/* Release 21: a checked provider's frame (Telega, Adexium) is laid out but invisible and untappable until its SDK holds an ad (platform.js showAdFrame). */
.platform-ad-frame.pending { opacity:0; pointer-events:none }
@media (max-height:530px) { .vip-terms[open] p { max-height:55px } .vip-terms[open] ~ .vip-consent { min-height:28px } }
/* Expanded terms give their own text room while purchase/help stay on screen. */
.vip-dialog:has(.vip-terms[open]) .vip-mark { display:none }
.vip-dialog:has(.vip-terms[open]) .vip-small { display:none }
.vip-dialog:has(.vip-terms[open]) .vip-lead { margin-bottom:8px }
@media (max-height:530px) { .vip-terms[open] p { max-height:40px } .vip-dialog:has(.vip-terms[open]) h2 { font-size:21px; margin-bottom:3px } }

/* Verified one-time community task, inside the existing Earn card stack. */
.channel-task { margin-top:12px; gap:9px }
.channel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0 }
.channel-heading > div { min-width:0 }
.channel-heading strong { flex:none; text-align:right; color:var(--teal,#51d9bd); font-size:14px; white-space:nowrap }
.channel-heading strong small { margin-top:0; font-size:11px; color:var(--muted) }
.channel-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0 }
.channel-actions .btn { min-height:44px; min-width:0; padding:8px 6px; font-size:12.5px; white-space:normal }
.channel-note { margin:0; color:var(--muted); font-size:12px; line-height:1.35; overflow-wrap:anywhere }

/* Viewport menus: existing cards, one decision at a time. */
#app { height:100%; height:100dvh }
.hud,.nav { flex:none }
.hud .me,.hud .icon { min-height:44px }
.hud .icon { width:44px; flex:none }
.lang-list { display:grid; gap:8px }
#screens { min-height:0 }
.screen.active { display:flex; flex-direction:column; gap:8px; overflow:hidden; padding:8px 12px }
/* Play, Earn and Wallet are plain lists with no inner scroller: the rule above left the Earn list unscrollable everywhere (26 Oct). */
#s-earn.active { overflow:hidden }
#earnBox.menu-stage { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:12px }
.menu-heading { display:flex; gap:10px; align-items:center; justify-content:space-between; min-height:44px; flex:none }
.menu-heading>span { font:400 24px 'Lilita One', Rubik, sans-serif; white-space:nowrap }
.menu-heading>small { color:var(--muted); font-size:12px; text-align:right }
.menu-heading select { min-height:44px; min-width:0; max-width:70%; padding:8px 32px 8px 12px; border:1px solid #53618d; border-radius:12px; background:var(--card2); color:var(--ink); font:900 15px Nunito,system-ui,sans-serif }
.menu-heading.single select { display:none }   /* release 13: a menu left with one option (retired parts) shows no picker */
.menu-heading select:focus-visible,.menu-pager button:focus-visible { outline:3px solid var(--teal); outline-offset:2px }
.menu-stage { flex:1; min-height:0; display:flex; flex-direction:column }
.menu-pane { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:10px }
.menu-pane>.page-sub,.menu-pane>.sect-h { margin:0; flex:none }
.menu-pager { display:flex; flex:none; min-height:44px; align-items:center; justify-content:space-between; gap:12px; margin-top:0 }
.menu-pager button { min-width:52px; min-height:44px; border-radius:12px; background:var(--card2); box-shadow:inset 0 0 0 1px var(--line); font:400 30px 'Lilita One', Rubik, sans-serif }
.menu-pager button:disabled { opacity:.35 }
.menu-pager span { font-weight:900; color:var(--muted); font-variant-numeric:tabular-nums }
.screen .btn.sm { min-height:44px; min-width:44px; padding:8px 10px }
.screen .btn.wide { margin-top:0 }
.screen .sect-h { margin:0 }
#s-home .hideout { flex:0 1 130px; min-height:80px; margin:-8px -12px 0; height:auto }
#s-home .hero-art { height:140px; bottom:-8px }
#s-home .hideout::after { height:40px }
#s-home .fence { min-height:44px; top:8px; max-width:60%; font-size:13px }
#s-home .fence small { display:none }
#s-home .trust-chip { top:8px; font-size:12px }
#s-home>.menu-stage { min-height:180px }
.menu-utilities { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px; flex:none; align-items:stretch }
.menu-utilities .lou-entry { margin:0; padding:4px 8px; min-height:48px; gap:6px; border-radius:13px }
.menu-utilities .lou-entry img { width:36px; height:36px }
.menu-utilities .lou-entry b { font-size:15px; white-space:nowrap }
.menu-utilities .lou-entry small { display:none }
.menu-utilities .lou-entry>span:last-child { display:none }
.menu-utilities .platform-entry { margin:0 }
.menu-utilities .platform-entry button { min-height:48px; padding:8px 10px }
.menu-utilities .lootstrip { margin:0; min-height:48px; height:100%; padding:6px 9px; display:flex; border-radius:13px }
.menu-utilities .lootstrip .ls-s,.menu-utilities .lootstrip .ls-go { display:none }
.menu-utilities .lootstrip .ls-b { font-size:14px; white-space:nowrap }
#targets { grid-template-columns:1fr; margin:0 }
#targets .tcard { display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-rows:1fr 1fr; column-gap:14px; padding:12px; min-height:136px }
#targets .tcard img { grid-row:1/3; width:112px; height:112px; aspect-ratio:auto }
#targets .tn { font-size:22px; margin:0; align-self:end; line-height:1.1 }
#targets .tm { align-self:start; flex-direction:column; font-size:14px; gap:6px; padding-top:7px }
#targets .locked::after { inset:12px auto 12px 12px; width:112px; height:112px; aspect-ratio:auto; font-size:13px }
#rivals { margin:0 }
#rivals .rival { margin:0; min-height:100px }
.hackcard { margin:0 }
#crewJob .cj-s { font-size:13px }
#crewJob .cj-faces { display:none }
#missionsBox .missions { margin:0 }
#missionsBox .mrow { min-height:62px }
#missionsBox .mfoot { margin-top:6px }
.menu-pane .gear { margin:0 }
.menu-pane .gitem { min-height:106px; margin:0; grid-template-columns:52px minmax(0,1fr) auto; padding:12px }
.menu-pane .gname { font-size:19px }
.menu-pane .gfx { font-size:13px }
.menu-pane .history,.menu-pane .how { margin:0 }
.menu-pane .how-row { grid-template-columns:1fr; font-size:15px }
.menu-pane .how-h { font-size:19px }
#board .empty { font-size:12px; padding:8px 4px; margin:0 }
#board .how { margin:0!important }
#board .how-row { font-size:19px; grid-template-columns:1fr auto }
.menu-pane .vaultcard { margin:0; padding-top:70px }
.menu-pane .vaultcard .vrow { gap:5px }
.menu-pane .vaultcard .vrow .btn { font-size:12px; padding:8px 4px }
#vshield:empty { display:none }
#statsRow .how { margin:0!important }
#statsRow .row2 { grid-template-columns:1fr }
#statsRow .row2 .btn { font-size:14px }
#earnBox .menu-pane { justify-content:flex-start; min-height:max-content }
#earnBox .lootcard { margin:0 }
#earnBox .lc-bal { font-size:42px }
#earnBox .channel-task { margin:0 }
#earnBox .cashout { font-size:14px }
#earnBox .toplist { margin:0 }
.holder-list { list-style:none; padding:0; flex:none }
.holder-list:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; border-radius:12px }
.holder-list>li { display:grid; grid-template-columns:24px minmax(0,1fr) auto; column-gap:8px; align-items:center; background:var(--card); border-radius:12px; padding:9px 12px; font-variant-numeric:tabular-nums }
.holder-list>li.me { box-shadow:inset 0 0 0 2px var(--teal) }
.holder-list>li>span { grid-column:1; grid-row:1 / 3 }
.holder-list>li>b { grid-column:2; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.holder-list>li>small { grid-column:2; grid-row:2; font-size:12px }
.holder-list>li>em { grid-column:3; grid-row:1 / 3; white-space:nowrap }
#earnBox .earnrow small { font-size:13px }
#earnBox [data-menu-pane="earn:friends"] .earnrow { gap:10px }
#earnBox [data-menu-pane="earn:friends"] .earnrow b { font-size:15px }

/* Common sheets keep decisions outside their deliberate details region. */
.sheet { max-height:calc(100% - 16px); display:flex; flex-direction:column; overflow:hidden; padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)) }
.sheet-head { position:relative; flex:none; }
.sheet-head:has(.sheet-close) { padding:0 38px }
.sheet-head .sh-t,.sheet-head .stamp { line-height:1.1; margin:4px 0 8px }
.sheet-close { position:absolute; right:-6px; top:-8px; width:44px; height:44px; font-size:30px; color:var(--muted); border-radius:12px }
.sheet-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:none }
.sheet-actions { flex:none; display:grid; gap:8px; padding-top:8px }
.sheet-actions:empty { display:none }
.sheet-actions>.btn,.sheet-actions .row2,.sheet-actions .choices { margin:0!important }
.sheet-actions .btn { min-height:44px; min-width:44px }
.sheet-actions>.sh-s { margin:0 }
.sheet-actions .menu-pager { margin:0 }
.sheet-body .slots,.sheet-body .gpick { display:grid; grid-template-columns:1fr; margin:8px 0 }
.sheet-body .slot { min-height:130px }
.sheet-body .gpick .gopt { min-height:64px }
.sheet-body .slot .sb { grid-template-columns:1fr 1fr }
.sheet-body .slot img { height:44px; width:44px }
.sheet-body .res-art { max-height:100px }
.sheet-body .nextgoal { margin:0 }
.sheet-body input { max-width:100% }

/* Lou retains illustrations, recordings and a fixed control rail. */
.lou-scroll { display:flex; flex-direction:column; overflow:hidden }
#louLessons { flex:1; min-height:0; display:flex; flex-direction:column }
.lou-picture { flex:1 1 160px; min-height:80px; max-height:290px; height:auto }
.lou-lesson-copy { flex:none; padding:12px 18px 5px }
.lou-lesson-copy ol { margin:10px 0 5px }
.lou-captions summary,.lou-about summary { min-height:44px; display:flex; align-items:center }
.lou-captions[open] p { max-height:100px; overflow:auto; overscroll-behavior:contain }
.lou-lesson-copy:has(.lou-captions[open]) ol { display:none }
.lou-lesson-rail { flex:none; padding:6px 18px }
.lou-lesson-rail img { height:44px }
.lou-lesson-rail span { font-size:12px; padding:7px 8px }
.lou-status { flex:none; max-height:58px; overflow:auto }
.lou-question { flex:1; min-height:0; display:flex; flex-direction:column; padding:6px 18px 10px }
.lou-question .lou-back { align-self:flex-start; flex:none }
.lou-answer-scene { min-height:0; flex:1; margin:0; grid-template-columns:90px minmax(0,1fr) }
.lou-answer-scene>img { max-height:145px }
.lou-note { max-height:100%; padding:12px }
.lou-note p { max-height:110px; overflow:auto; font-size:19px }
.lou-price-line { flex:none; margin:8px 0; min-height:22px }
#louForm { flex:none; gap:6px }
#louInput { min-height:66px; max-height:92px; resize:none }
.lou-question-label { margin:0 }
.lou-small { flex:none; margin:7px 0 0; font-size:11px }
.lou-about { flex:none; margin:0 }
.lou-about[open] .lou-disclosure { max-height:70px; overflow:auto; margin:0 }
.lou-question:has(.lou-about[open]) .lou-answer-scene { display:none }
.lou-has-answer .lou-answer-scene { min-height:0 }
.lou-has-answer .lou-note p { max-height:210px }
#louAnother { flex:none; margin:8px 0 0 }
.vip-close { min-width:44px; min-height:44px }
.vip-support,.vip-terms summary,.vip-consent { min-height:44px }

@media(max-height:600px) {
  .hud { padding-top:4px; padding-bottom:4px }
  .nav { padding-top:3px; padding-bottom:calc(3px + env(safe-area-inset-bottom,0px)) }
  .nav button { min-height:44px }
  .screen.active { gap:5px; padding:5px 12px }
  .menu-heading>span { font-size:21px }
  #s-home .hideout { display:block; flex:0 0 88px; min-height:88px }
  #s-home .hero-art { height:88px; bottom:0 }
  #s-home>.menu-stage { min-height:0 }
  .menu-pane { gap:5px }
  .menu-utilities .lou-entry,.menu-utilities .platform-entry button,.menu-utilities .lootstrip { min-height:44px }
  .menu-utilities .lou-entry img { width:30px; height:30px }
  #targets .tcard { min-height:84px; grid-template-columns:64px minmax(0,1fr); gap:8px; padding:8px }
  #targets .tcard img { width:64px; height:64px }
  #targets .tcard .tn { font-size:19px }
  #targets .tcard .tm { flex-direction:row; padding-top:3px; gap:6px; font-size:12px }
  #targets .locked::after { width:64px; height:64px; inset:8px auto 8px 8px; font-size:10px }
  .hackcard { grid-template-columns:62px minmax(0,1fr); gap:9px; padding:9px }
  .hackcard .hc-art { width:62px; height:62px; padding:5px }
  .hackcard .cj-s { display:none }
  #crewJob { grid-template-columns:58px minmax(0,1fr); gap:8px; padding:9px }
  #crewJob>img { width:58px; height:58px }
  #crewJob .cj-s { display:none }
  #crewJob .cj-t { font-size:16px; margin-bottom:4px }
  #s-home [data-menu-pane="home:crew"]>.sect-h { display:none }
  #rivals .rival { min-height:80px }
  #rivals .defs { display:none }
  #missionsBox .missions { padding:7px 10px }
  #missionsBox .mrow { min-height:42px }
  #missionsBox .mfoot { display:none }
  .menu-pane .gitem { min-height:90px; padding:8px; grid-template-columns:42px minmax(0,1fr) auto; gap:8px }
  .menu-pane .gname { font-size:17px }
  .menu-pane .gicon { width:42px; height:42px }
  .menu-pane .gfx { font-size:12px }
  .menu-pane .vaultcard { padding:7px 10px }
  .vaultcard .vt { display:none }
  .vaultcard .vb { font-size:29px }
  .vaultcard .vb .ico.coin { width:22px; height:22px }
  .vaultcard .vr { font-size:11px; margin-bottom:4px }
  .vaultcard .interest { padding:4px 8px; margin-bottom:5px }
  #vshield { margin:0 0 3px!important }
  .menu-pane .trustcard { padding:10px; grid-template-columns:66px minmax(0,1fr); gap:10px }
  .trustcard .tring { width:66px; height:66px }
  .trustcard .tring>div { width:52px!important; height:52px!important }
  .trustcard .tlabel { font-size:21px }
  .trustcard .tsub { font-size:12px }
  #board .empty { padding:4px; font-size:11px }
  #board .how-row { font-size:17px }
  #earnBox .lootcard { padding:12px }
  #earnBox .lc-bal { font-size:32px }
  #earnBox .lc-sub { font-size:12px }
  #earnBox .shiftcard { padding:10px; gap:5px }
  #earnBox .earnrow { padding:9px 12px; gap:6px }
  #earnBox [data-menu-pane="earn:friends"] .earnrow small { font-size:11px; line-height:1.3 }
  #earnBox [data-menu-pane="earn:friends"] .earnrow b { font-size:13px }
  #earnBox .cashout { padding:10px 12px; font-size:12px }
  #earnBox .channel-note { font-size:11px }
  .sheet { padding:10px 12px; max-height:calc(100% - 10px) }
  .sheet-head .sh-t { font-size:22px }
  .sheet-head .stamp { font-size:25px }
  .sheet-body .res-art,.sheet-body .reveal { display:none }
  .sheet-body .res-big { font-size:32px; margin:2px 0 }
  .sheet-body .res-lines { margin:4px 0; padding:7px 10px; gap:3px; font-size:12px }
  .sheet-body .slot { min-height:100px; padding:8px }
  .sheet-body .slot img { display:none }
  .sheet-body .sh-s { font-size:12px }
  .sheet-actions .btn { padding:9px 10px; font-size:15px }
  .sheet-actions .choices .btn { font-size:21px }
  .sheet-actions .nextgoal { font-size:11px; margin:0; padding:5px 8px }
}
@media(max-width:540px) {
 .lou-header { padding:9px 14px }
 .lou-header h2 { font-size:24px }
 .lou-footer { padding:9px 14px }
 .lou-lesson-copy { padding:9px 14px 3px }
 .lou-lesson-copy li,.lou-lesson-copy li b { font-size:14px; line-height:1.35 }
 .lou-lesson-copy ol { gap:6px; margin:8px 0 0 }
 .lou-lesson-heading h3 { font-size:23px }
 .lou-lesson-rail { padding:5px 14px }
 .lou-lesson-rail img { height:30px }
 .lou-lesson-rail span { padding:6px 4px; font-size:11px }
 .lou-picture { min-height:80px }
 .lou-has-answer .lou-note p { max-height:200px; font-size:18px }
 .lou-has-answer .lou-answer-scene>img { display:none }
}
@media(min-width:541px) and (max-height:480px) {
 .lou-dialog { height:calc(100dvh - 12px); max-height:calc(100dvh - 12px) }
 .lou-header { padding:5px 12px }
 .lou-footer { padding:5px 12px }
 .lou-header h2 { font-size:22px }
 #louLessons { display:grid; grid-template-columns:36% minmax(0,1fr); grid-template-rows:minmax(0,1fr) 54px; height:100% }
 .lou-picture { grid-row:1/3; min-height:0; max-height:none; height:100%; width:100% }
 .lou-lesson-copy { grid-column:2; grid-row:1; min-height:0; padding:5px 12px; overflow:hidden }
 .lou-lesson-heading h3 { font-size:21px }
 .lou-lesson-copy ol { margin:3px 0 0; display:block }
 .lou-lesson-copy li,.lou-lesson-copy li b { font-size:12px; line-height:1.25 }
 .lou-lesson-copy li { min-height:23px }
 .lou-captions summary { min-height:44px; font-size:11px }
 .lou-captions[open] p { max-height:88px; font-size:12px }
 .lou-lesson-rail { grid-column:2; grid-row:2; padding:3px 12px; gap:7px }
 .lou-lesson-rail img { display:none }
 .lou-lesson-rail span { font-size:12px; padding:7px }
 .lou-question { display:grid; grid-template-columns:42% minmax(0,1fr); grid-template-rows:44px minmax(0,1fr) auto; gap:4px 12px; padding:0 12px 6px }
 .lou-question .lou-back { grid-column:1; grid-row:1; align-self:center }
 .lou-answer-scene { grid-column:1; grid-row:2; grid-template-columns:1fr; align-self:stretch; min-height:0; margin:0 }
 .lou-answer-scene>img { display:none }
 .lou-note { align-self:start; padding:10px; max-height:100%; overflow:hidden }
 .lou-note:before,.lou-note .lou-eyebrow { display:none }
 .lou-note p { margin:0; font-size:17px; max-height:84px }
 .lou-note .lou-listen { margin-top:5px; min-height:44px }
 .lou-price-line { grid-column:2; grid-row:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; margin:0; font-size:11px }
 #louForm { grid-column:2; grid-row:2; align-self:start; gap:4px }
 .lou-question-label { font-size:12px }
 #louInput { min-height:56px; max-height:56px; padding:6px 9px }
 #louSend { font-size:13px; padding:8px }
 .lou-small { grid-column:2; grid-row:3; margin:0; font-size:10px }
 .lou-about { grid-column:1; grid-row:3; margin:0; font-size:10px; position:relative }
 .lou-about summary { min-height:44px }
 .lou-about[open] .lou-disclosure { max-height:90px; position:absolute; z-index:2; bottom:calc(100% + 4px); left:0; width:100%; padding:8px; background:#202731; border:1px solid #816e52; border-radius:8px }
 .lou-question:has(.lou-about[open]) .lou-answer-scene { display:grid }
 .lou-has-answer .lou-question { grid-template-columns:62% minmax(0,1fr) }
 .lou-has-answer .lou-answer-scene { grid-column:1; grid-row:2/4 }
 .lou-has-answer .lou-note p { font-size:17px; max-height:100px }
 .lou-has-answer .lou-price-line { grid-column:2; grid-row:1; align-self:center; margin:0 }
 .lou-has-answer #louAnother { grid-column:2; grid-row:2; align-self:start; margin:0; padding:8px; font-size:13px }
 .lou-has-answer .lou-small { grid-column:2; grid-row:3; align-self:start }
 .lou-has-answer .lou-about { grid-column:1; grid-row:1; justify-self:end; margin-right:0 }
 .lou-has-answer .lou-about[open] .lou-disclosure { bottom:auto; top:100%; left:auto; right:0; width:min(260px,40vw) }
 .lou-status { font-size:11px; padding:4px 12px; max-height:36px }
 .vip-dialog { width:min(620px,calc(100vw - 20px)); padding:12px 18px; max-height:calc(100dvh - 16px) }
 .vip-dialog[open] { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; align-items:center }
 .vip-dialog h2,.vip-lead,.vip-price,.vip-small,.vip-state { grid-column:1; margin:0 }
 .vip-dialog h2 { margin-right:0; font-size:23px }
 .vip-lead { font-size:15px }
 .vip-price { font-size:25px }
 .vip-small { font-size:11px }
 .vip-state { min-height:0; font-size:12px }
 .vip-terms { grid-column:2; grid-row:1/4; margin:0; padding-right:22px }
 .vip-terms summary { min-height:44px; font-size:13px }
 .vip-terms[open] p { max-height:95px; font-size:11px }
 .vip-consent { grid-column:2; grid-row:4; margin:0; min-height:44px!important; font-size:12px }
 #vipBuy { grid-column:2; grid-row:5; margin:0; min-height:44px; padding:8px; font-size:14px }
 .vip-support { grid-column:2; grid-row:6; min-height:44px; margin:0 }
 .vip-close { top:2px; right:2px }
 .vip-dialog:has(.vip-terms[open]) h2 { font-size:23px }
 .vip-dialog:has(.vip-terms[open]) .vip-small { display:block }
}

.sheet-actions .slots,.sheet-actions .gpick { display:grid; grid-template-columns:1fr; margin:0; gap:0 }
.sheet-actions .slot { min-height:106px; padding:8px }
.sheet-actions .slot img { width:40px; height:40px }
.sheet-actions .slot .sb { grid-template-columns:1fr 1fr; gap:8px }
.sheet-actions .gpick .gopt { min-height:60px }
.vip-dialog { padding-bottom:24px }
@media(max-height:600px){.sheet-actions .slot{min-height:74px;padding:6px}.sheet-actions .slot img{display:none}.sheet-actions .slot .sb .btn{font-size:13px}.vip-dialog{padding-bottom:12px}}
@media(max-width:340px){.hud{gap:5px;padding-left:8px;padding-right:8px}.hud .me{gap:5px}.hud .stat{padding-left:7px;padding-right:7px}.hud .energy{padding-left:6px;padding-right:6px}.hud .pips{gap:2px}.hud .pips i{width:8px}.repbar{width:40px}.hud .rank{font-size:13px}}

/* The keyboard changes the visual viewport inside Telegram without resizing the canvas. */
.lou-dialog{position:fixed;inset:auto;left:50%;top:calc(var(--lou-visual-top,0px) + 8px);transform:translateX(-50%);margin:0;height:min(830px,calc(var(--lou-visual-height,100dvh) - 16px));max-height:calc(var(--lou-visual-height,100dvh) - 16px)}
.lou-dialog.lou-question-view .lou-scroll{overflow-y:auto;overscroll-behavior:contain}
.lou-dialog.lou-question-view .lou-question{flex:0 0 auto;min-height:0;display:flex;flex-direction:column}
.lou-dialog.lou-question-view .lou-answer-scene{flex:none;min-height:0;align-items:center}
.lou-dialog.lou-question-view .lou-note{max-height:none;overflow:hidden}
.lou-dialog.lou-question-view .lou-note p{max-height:210px;overflow:auto;overscroll-behavior:contain}
.lou-dialog.lou-question-view .lou-user-question{flex:none}
.lou-dialog.lou-typing .lou-answer-scene,.lou-dialog.lou-keyboard .lou-answer-scene{display:none}
.lou-dialog.lou-typing .lou-small,.lou-dialog.lou-typing .lou-about,.lou-dialog.lou-keyboard .lou-small,.lou-dialog.lou-keyboard .lou-about{display:none}
.lou-dialog.lou-typing .lou-header,.lou-dialog.lou-keyboard .lou-header{padding:6px 14px}
.lou-dialog.lou-typing .lou-header h2,.lou-dialog.lou-keyboard .lou-header h2{font-size:22px}
.lou-dialog.lou-typing .lou-question,.lou-dialog.lou-keyboard .lou-question{padding:2px 14px 12px;gap:5px}
.lou-dialog.lou-typing .lou-back,.lou-dialog.lou-keyboard .lou-back{min-height:32px;align-self:flex-start}
.lou-dialog.lou-typing .lou-price-line,.lou-dialog.lou-keyboard .lou-price-line{margin:2px 0;font-size:12px}
.lou-dialog.lou-typing #louInput,.lou-dialog.lou-keyboard #louInput{min-height:64px;height:64px;max-height:100px;resize:none}
#raccDialog[open]{display:block;overflow-y:auto;padding-top:38px}
/* The DeDust pool link (7 Nov 2026) sits on its own line above Payment help. */
#raccDialog .dex-link{display:block;margin:6px auto 0}
#hAlarms{flex-wrap:wrap;max-width:150px}

.lou-tools{display:flex;gap:6px;padding:7px 14px;background:#242e38;flex-shrink:0}.lou-tools button{flex:1;padding:8px 5px;font-size:12px;min-height:48px}.lou-library{padding:16px 20px;overflow:auto}.lou-library h3{font:26px 'Lilita One', Rubik, sans-serif;margin:0 0 10px}.lou-library>p{font-size:13px;line-height:1.5;color:#d0c1aa}.lou-history-item{display:block;width:100%;text-align:left;margin:8px 0;overflow-wrap:anywhere}.lou-history-item b,.lou-history-item small{display:block}.lou-history-item small{font-size:11px;color:#c6b693;margin-top:6px}.lou-quiz-choices{display:grid;gap:8px}.lou-quiz-choices button{min-height:48px;text-align:left}.lou-quiz-explain{background:#f5e8cf;color:#4f3c27!important;border-radius:14px;padding:13px}.lou-quiz-explain:empty{display:none}.lou-user-question{font-size:13px;line-height:1.4;color:#cdbb9f;margin:6px 0;overflow-wrap:anywhere}.lou-dialog.lou-typing .lou-tools,.lou-dialog.lou-keyboard .lou-tools{display:none}#louSend{min-height:48px}.lou-dialog .lou-icon{min-height:48px;width:48px}.lou-dialog .lou-library{flex-shrink:0}

.lou-dialog.lou-library-view .lou-scroll{overflow:hidden;min-height:0}.lou-dialog.lou-library-view .lou-library{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}

/* Wallet choices share the existing purchase sheet; the wallet itself opens outside native dialog. */
.ton-choice{border-top:1px solid #64717e;margin-top:18px;padding-top:12px}.ton-or{display:block;color:#dbe3eb;font-weight:800;font-size:13px;margin-bottom:8px}.ton-choice select{width:100%;max-width:100%;padding:10px;border-radius:9px;background:#24313e;color:#fff;border:1px solid #718096;font:700 13px Nunito}.ton-choice .vip-small{overflow-wrap:anywhere}.vip-dialog{max-height:calc(100dvh - 24px);overflow:auto}.ton-choice .btn{margin-bottom:8px}

.ton-choice .vip-support{display:block;min-height:44px;margin:6px auto;padding:10px 12px}.ton-choice select{margin:8px 0}

/* Two HEIST packs (4 Nov 2026): one tap picks a pack; the Stars button and the GRAM line follow the pick. */
.pack-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 16px}
.pack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:112px;padding:14px 8px;border:2px solid #5b6178;border-radius:18px;background:#ffffff0c;color:var(--ink);text-align:center}
.pack b{font:400 30px/1 'Lilita One',Rubik,sans-serif;color:#ffdc91;letter-spacing:.02em;white-space:nowrap}
.pack em{font-style:normal;font-size:12px;font-weight:900;letter-spacing:.12em;color:#e6d3ad;margin-bottom:8px}
.pack span{font-size:13px;line-height:1.3;color:#efdab4;white-space:nowrap}
.pack[aria-checked="true"]{border-color:#ffcf67;background:#ffcf6724;box-shadow:0 0 0 3px #ffcf6740}
.pack[aria-checked="false"] b{color:#e6d3ad}
.pack:disabled{opacity:.55}
/* Four GRAM packs in the TON-only shop (5 Nov 2026): a 2 x 2 grid of shorter cards. */
.pack-pick.four .pack{min-height:86px;padding:10px 6px}.pack-pick.four .pack b{font-size:25px}.pack-pick.four .pack em{margin-bottom:4px}
.vip-support.sup-link{display:block;margin:10px auto 0;color:#ffb3c8}
@media (max-height:640px){.pack-pick{gap:10px;margin:4px 0 10px}.pack{min-height:84px;padding:9px 6px}.pack b{font-size:24px}.pack em{margin-bottom:4px}.pack-pick.four .pack{min-height:70px}}
@media (max-height:530px){.pack{min-height:66px;padding:6px}.pack b{font-size:20px}.pack em{font-size:11px;margin-bottom:2px}.pack span{font-size:11.5px}}

/* A verified receipt gets one compact, accessible celebration above the shop. */
.ton-success{box-sizing:border-box;width:min(370px,calc(100vw - 32px));max-height:calc(100dvh - 24px);margin:auto;padding:28px 24px 24px;border:2px solid #6bb9aa;border-radius:24px;background:linear-gradient(155deg,#273e41,#1b2833 72%);color:#fff;text-align:center;box-shadow:0 20px 80px #0009;font-family:Nunito,sans-serif}
.ton-success::backdrop{background:#0a1422c7;backdrop-filter:blur(5px)}
.ton-success-seal{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#7de0bd;color:#173e34;font:36px 'Lilita One', Rubik, sans-serif;box-shadow:0 0 0 7px #7de0bd15}
.ton-success-eyebrow{margin:0 0 8px;font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:1.8px;color:#9ae0cb}
.ton-success h2{margin:0 0 12px;font:30px/1.1 'Lilita One', Rubik, sans-serif}
#tonSuccessDetail{margin:0;font-size:15px;line-height:1.45;color:#dce5e7}
.ton-success-balance{margin:12px 0 0;font-weight:900;font-size:15px;color:#9ae0cb}
/* Purchase notices (platform.js #buyNotice, 8 Nov 2026): a small card under the header, never a modal, hidden while a heist or a grid
   is played; the toast moves below it. tone: wait (on its way), ok (arrived), warn (sent back, needs a check, not seen yet). */
.buy-notice{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:61;box-sizing:border-box;width:min(400px,calc(100% - 32px));display:flex;align-items:center;gap:10px;padding:10px 8px 10px 12px;border-radius:16px;background:rgba(16,20,42,.97);box-shadow:inset 0 0 0 1px #3a4479,0 10px 30px #0009;color:#fff;font-family:Nunito,sans-serif;animation:fade .2s}
.buy-notice[hidden]{display:none}
.buy-notice[data-tone=ok]{box-shadow:inset 0 0 0 2px #7de0bd,0 10px 30px #0009}
.buy-notice[data-tone=warn]{box-shadow:inset 0 0 0 2px #f0b45a,0 10px 30px #0009}
.bn-ico{flex:none;box-sizing:border-box;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:900 15px/1 Nunito,sans-serif}
.buy-notice[data-tone=wait] .bn-ico{border:3px solid #3a4479;border-top-color:#7de0bd;animation:bnspin 1s linear infinite}
.buy-notice[data-tone=ok] .bn-ico{background:#7de0bd;color:#173e34}.buy-notice[data-tone=ok] .bn-ico::before{content:'\2713'}
.buy-notice[data-tone=warn] .bn-ico{background:#f0b45a;color:#3a2606}.buy-notice[data-tone=warn] .bn-ico::before{content:'!'}
.bn-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:start}
.bn-body b{font-weight:900;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.bn-lines p{margin:0;font-size:12.5px;line-height:1.35;color:#c8d3e6;overflow-wrap:anywhere}
.bn-acts{flex:none;display:flex;flex-direction:column;gap:6px}
.bn-btn{min-height:38px;padding:6px 12px;border:0;border-radius:12px;background:#2a335e;color:#fff;font:800 13px Nunito,sans-serif}
.bn-btn.ok{background:#6bb9aa;color:#10251f}
.bn-x{width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#aab6d3;font-size:22px;line-height:1}
@keyframes bnspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.buy-notice[data-tone=wait] .bn-ico{animation:none}}
html.buy-notice-on .toast{top:calc(72px + env(safe-area-inset-top,0px) + var(--bn-h,64px))}
.ton-success-amount{margin:18px 0 22px;font-size:12px;color:#afc4cb;overflow-wrap:anywhere}
.ton-success-actions{display:flex;gap:8px}.ton-success .btn{flex:1;min-width:0;min-height:48px;margin:0;width:100%;font-size:15px;padding:10px 8px}
@media(max-height:450px){.ton-success{padding:15px 20px}.ton-success-seal{width:42px;height:42px;font-size:25px;margin-bottom:9px}.ton-success h2{font-size:25px;margin-bottom:8px}.ton-success-amount{margin:10px 0 12px}#tonSuccessDetail{font-size:13px}}

/* Lou: the conversation, the price, and one daily reward. */
.lou-dialog .lou-header{padding:12px 18px;background:#292f34}
.lou-dialog .lou-header h2{font-size:30px;margin:0}
.lou-dialog .lou-tools{padding:4px 12px 8px;gap:4px;background:#292f34}
.lou-dialog .lou-tools button{min-width:0;min-height:44px;padding:7px 4px;font-size:16px;background:transparent;border-color:transparent;border-radius:10px;color:#c9c3b6}
.lou-dialog .lou-tools button[aria-current=true]{background:#efe0bf;color:#463724}
.lou-dialog.lou-question-view .lou-scroll{overflow:hidden}
.lou-dialog.lou-question-view .lou-question{flex:1;min-height:0;padding:18px 24px 10px;gap:12px;overflow:hidden}
.lou-dialog.lou-question-view .lou-answer-scene{flex:1 1 auto;min-height:90px;grid-template-columns:110px minmax(0,1fr);gap:16px}
.lou-dialog.lou-question-view .lou-answer-scene>img{max-height:180px}
.lou-dialog.lou-question-view:not(.lou-has-answer) .lou-note{background:none;border:0;box-shadow:none;padding:0;color:#fff2da}
.lou-dialog.lou-question-view:not(.lou-has-answer) .lou-note:before{display:none}
.lou-dialog.lou-question-view .lou-note p{font-size:24px;line-height:1.4;margin:0;max-height:220px}
.lou-dialog .lou-price-line{margin:0;justify-content:flex-end;min-height:22px}
.lou-dialog .lou-price-line span:last-child{font-size:16px;font-weight:700;color:#c9c3b6}
.lou-dialog #louForm{gap:12px}
.lou-dialog #louInput{font-size:18px;line-height:1.4;min-height:88px;max-height:110px;padding:14px}
.lou-dialog #louSend,.lou-dialog #louAnother{font-size:19px;min-height:52px;margin:0}
.lou-dialog .lou-about{font-size:16px;line-height:1.45;margin:0}
.lou-dialog .lou-about summary{width:max-content;cursor:pointer;min-height:44px;display:flex;align-items:center;color:#c9c3b6}
.lou-dialog .lou-about[open] .lou-disclosure{position:static;width:auto;padding:0;background:none;border:0;font-size:17px;line-height:1.45;max-height:125px;overflow:auto;margin:0}
.lou-dialog.lou-question-view .lou-question:has(.lou-about[open]) .lou-answer-scene{display:none}
.lou-dialog .lou-status{font-size:16px;line-height:1.4;padding:8px 18px;max-height:75px}
.lou-dialog .lou-status:empty{padding:0}
.lou-dialog .lou-library{padding:18px 24px}
.lou-dialog .lou-library h3{font-size:30px;line-height:1.2;margin:0 0 18px}
.lou-dialog .lou-quiz-timing{font-size:16px;line-height:1.4;color:#e9c383;margin:0 0 18px}
.lou-dialog .lou-quiz-choices{gap:10px}
.lou-dialog .lou-quiz-choices button{font-size:18px;line-height:1.35;min-height:54px;padding:12px 16px;font-weight:800}
.lou-dialog .lou-quiz-choices button:disabled{opacity:1;color:#dad2c4;background:#343b3f}
.lou-dialog .lou-quiz-explain{font-size:18px;line-height:1.45;margin:16px 0 0;padding:16px}
.lou-dialog .lou-history-item b{font-size:18px;line-height:1.35}
.lou-dialog .lou-history-item small{font-size:16px;line-height:1.4}
.lou-dialog #louHistoryDelete,.lou-dialog #louHistoryMore{font-size:16px;min-height:44px}
.lou-dialog .lou-user-question{font-size:17px;line-height:1.4;margin:0;max-height:70px;overflow:auto}
@media(max-width:540px){
 .lou-dialog .lou-header{padding:10px 14px}.lou-dialog .lou-header h2{font-size:28px}
 .lou-dialog.lou-question-view .lou-question{padding:12px 16px 6px;gap:10px}
 .lou-dialog.lou-question-view .lou-answer-scene{grid-template-columns:90px minmax(0,1fr);gap:10px}
 .lou-dialog.lou-question-view .lou-note p{font-size:22px}
 .lou-dialog.lou-has-answer .lou-answer-scene{display:block;overflow:auto;min-height:0}
 .lou-dialog.lou-has-answer .lou-answer-scene>img{display:none}
 .lou-dialog.lou-has-answer .lou-note{max-height:none;padding:16px}
 .lou-dialog.lou-has-answer .lou-note p{font-size:20px;max-height:none;margin:0}
 .lou-dialog .lou-library{padding:16px}
 .lou-dialog .lou-library h3{font-size:28px;margin-bottom:14px}
 .lou-dialog .lou-quiz-explain{font-size:17px;padding:14px}
}
@media(max-height:600px){
 .lou-dialog .lou-header{padding:5px 12px}.lou-dialog .lou-header h2{font-size:26px}
 .lou-dialog .lou-tools{padding-bottom:4px}
 .lou-dialog.lou-question-view .lou-question{gap:6px;padding-top:8px}
 .lou-dialog.lou-question-view .lou-answer-scene{min-height:0}
 .lou-dialog.lou-question-view .lou-answer-scene>img{max-height:90px}
 .lou-dialog #louInput{min-height:70px;max-height:80px}
 .lou-dialog #louForm{gap:8px}
 .lou-dialog .lou-library h3{font-size:26px}
 .lou-dialog .lou-quiz-timing{margin-bottom:12px}
}
@media(min-width:541px) and (max-height:480px){
 .lou-dialog.lou-question-view .lou-question{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 44px;gap:6px 18px;padding:6px 18px}
 .lou-dialog.lou-question-view .lou-answer-scene{grid-column:1;grid-row:1/4;display:block;overflow:auto}
 .lou-dialog.lou-question-view .lou-answer-scene>img{display:none}
 .lou-dialog.lou-question-view .lou-note{padding:12px;max-height:none}
 .lou-dialog.lou-question-view .lou-note p{max-height:none;font-size:18px}
 .lou-dialog.lou-question-view .lou-note .lou-listen{font-size:16px}
 .lou-dialog .lou-price-line{grid-column:2;grid-row:1;align-self:center;flex-direction:row;justify-content:flex-end;margin:0}
 .lou-dialog #louForm,.lou-dialog #louAnother{grid-column:2;grid-row:2;align-self:start}
 .lou-dialog .lou-about{grid-column:2;grid-row:3;justify-self:start;margin:0}
 .lou-dialog .lou-about[open] .lou-disclosure{position:absolute;bottom:100%;right:0;left:auto;width:220px;max-height:140px;padding:12px;background:#202731;border:1px solid #816e52;border-radius:10px}
 .lou-dialog.lou-question-view .lou-question:has(.lou-about[open]) .lou-answer-scene{display:block}
 .lou-dialog .lou-user-question{grid-column:1;grid-row:1;z-index:1}
 .lou-dialog .lou-answer-scene:has(+.lou-user-question:not([hidden])){grid-row:2/4}
}
.lou-dialog.lou-typing .lou-question,.lou-dialog.lou-keyboard .lou-question{display:flex;gap:8px;padding:8px 14px}
.lou-dialog.lou-typing .lou-answer-scene,.lou-dialog.lou-keyboard .lou-answer-scene{display:none}
.lou-dialog.lou-typing .lou-about,.lou-dialog.lou-keyboard .lou-about{display:none}
.lou-dialog.lou-typing #louInput,.lou-dialog.lou-keyboard #louInput{min-height:72px;height:72px;max-height:72px}
.lou-dialog .lou-tools button{white-space:nowrap}
.lou-dialog .lou-tools #louPlans,.lou-dialog .lou-tools #louAskTab{flex:1.2}
.lou-dialog .lou-tools #louQuizOpen{flex:.8}
@media(min-width:541px) and (max-height:480px){
 .lou-dialog #louQuiz{display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 16px;padding:10px 16px}
 .lou-dialog #louQuizTiming{grid-column:1;grid-row:1;margin:0}
 .lou-dialog #louQuizTitle{grid-column:1;grid-row:2;font-size:25px;margin:0}
 .lou-dialog #louQuizChoices{grid-column:2;grid-row:1/3;gap:6px;align-content:start}
 .lou-dialog .lou-quiz-choices button{min-height:48px;padding:9px 12px;font-size:17px}
 .lou-dialog #louQuizExplain{grid-column:2;grid-row:2;margin:0;padding:10px;font-size:17px;overflow:auto;min-height:0}
 .lou-dialog #louQuiz:has(.lou-quiz-explain:not(:empty)) #louQuizChoices{grid-row:1}
 .lou-dialog #louQuizRetry{grid-column:2;grid-row:1}
}
.lou-dialog.lou-has-answer .lou-answer-scene{overflow:hidden;min-height:0}
.lou-dialog.lou-has-answer .lou-note{display:flex;flex-direction:column;box-sizing:border-box;height:100%;max-height:100%;overflow:hidden}
.lou-dialog.lou-has-answer .lou-note #louAnswer{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
.lou-dialog.lou-has-answer .lou-note #louAnswerReplay{flex:none;align-self:flex-start;margin-top:10px}
@media(min-width:541px) and (max-height:480px){
 .lou-dialog.lou-question-view.lou-has-answer .lou-answer-scene{align-self:stretch;height:100%;max-height:100%}
}
/* Short landscape keeps Privacy beside the composer and reserves the whole question. */
@media(min-width:541px) and (max-height:480px){
 .lou-dialog.lou-question-view:not(.lou-has-answer) .lou-about{grid-column:1;grid-row:3}
 .lou-dialog.lou-question-view:not(.lou-has-answer) .lou-answer-scene{grid-column:1;grid-row:1/3}
 .lou-dialog.lou-question-view:not(.lou-has-answer) #louForm{grid-column:2;grid-row:2/4}
 .lou-dialog .lou-about[open] .lou-disclosure{left:0;right:auto;max-height:124px;width:226px;box-sizing:border-box;padding:10px}
 .lou-dialog #louQuiz{grid-template-columns:44% minmax(0,1fr);column-gap:12px}
 .lou-dialog #louQuizTitle{font-size:22px;line-height:1.2}
 .lou-dialog #louQuizChoices{gap:5px}
 .lou-dialog .lou-quiz-choices button{min-height:46px;padding:8px 12px}
}

/* RACC token: paw-print loot sack (replaces the gem emoji everywhere) */
.racc{width:1.1em;height:1.1em;vertical-align:-.2em;display:inline-block}
.vip-mark .racc{width:1em;height:1em;vertical-align:-.12em}

/* bottom-bar icons: drawn set in the paw-sack style */
.nav button span{display:flex;align-items:center;justify-content:center;height:26px}
.navi{width:26px;height:26px;display:block}
.nav button:not(.on) .navi{opacity:.82}

/* section switcher: chips instead of the native dropdown (the select stays hidden as the state carrier) */
.menu-heading select { display:none }
.menu-heading { min-height:36px }
.menu-chips { display:flex; flex-wrap:wrap; gap:6px; flex:none; padding:0 2px 8px }
.menu-chips::-webkit-scrollbar { display:none }
.chip { flex:none; min-height:36px; padding:0 14px; border-radius:999px; background:var(--card2); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); font:800 13px/1 Nunito, system-ui, sans-serif; white-space:nowrap }
.chip.on { background:var(--teal); color:#0c1020; box-shadow:none }
.chip:focus-visible { outline:3px solid var(--teal); outline-offset:2px }

/* locked target cards in the Heists list use a side thumbnail; the lock label must sit on that thumbnail only */
#targets .tcard.locked::after { inset:12px auto auto 12px; width:112px; height:112px; aspect-ratio:auto; font-size:13px; line-height:1.15; padding:0 10px; border-radius:12px }
/* Leaderboard (Top tab): a scrolling list under a prize strip; own row pinned when outside the list. */
#s-top .menu-pane { justify-content:flex-start }
.menu-pane .board { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; grid-template-columns:minmax(0,1fr); grid-auto-rows:max-content; align-content:start; scrollbar-width:none; padding-bottom:2px }   /* max-content rows: an overflow:hidden item in a shorter-than-content grid otherwise gets a 0 px track */
#topSeg .chip { padding:0 11px }
.menu-pane .board::-webkit-scrollbar { display:none }
.board-prize { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; background:linear-gradient(135deg,#1e3a5c,#23306a); box-shadow:inset 0 0 0 1px #3c5c99, 0 3px 0 #10142a; border-radius:16px; padding:10px 12px; font-size:12px; color:#bfd2ff }
.board-prize b { display:block; color:var(--ink); font-size:14px; font-weight:900; line-height:1.25 }
.board-prize small { display:block; margin-top:3px; font-size:11.5px; font-weight:800 }
.board-prize .bp-you { text-align:center; font:400 24px 'Lilita One', Rubik, sans-serif; color:var(--ink); line-height:1; min-width:52px }
.board-prize .bp-you small { font:800 11px Nunito,system-ui,sans-serif; color:#bfd2ff; margin-top:4px; white-space:nowrap }
.board-prize .bp-note { grid-column:1 / -1; margin-top:-2px; padding-top:7px; border-top:1px solid rgba(191,210,255,.16); color:#7ee7cf; font-size:12px; font-weight:800; line-height:1.3 }
.board-last { min-width:0; font-size:12px; font-weight:800; color:var(--muted); padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.board-last b { color:var(--ink) }
.board-last.you { color:var(--teal); white-space:normal }
.brow.lb { grid-template-columns:30px 34px minmax(0,1fr) auto; gap:8px; padding:7px 10px }
.brow.lb .bn { font-size:13px }
.brow.lb .bn.medal { font-size:19px; line-height:1 }
.brow.lb .bname { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.brow.lb .bname small { display:block; color:var(--muted); font-size:11px; font-weight:800; margin-top:1px }
.brow.lb .bv { text-align:right; line-height:1.15; font-size:15px }
.brow.lb .bv small { color:var(--muted); font-size:11px; font-weight:800 }
.brow.lb .bv em { display:block; font-style:normal; color:var(--teal); font-size:12px; font-weight:900; margin-top:2px }
.brow.lb .bv em .racc { width:14px; height:14px; border-radius:0; background:none; vertical-align:-3px }
.brow.lb.pin { position:sticky; bottom:0; z-index:1; box-shadow:inset 0 0 0 2px var(--amber), 0 -8px 16px rgba(12,16,32,.65) }
.board-live { display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.board-live .dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); flex:none }
#boardLive { line-height:1.3; max-width:52% }

/* Daily reward + the today bar under the HUD (2026-10-26) */
.today { display:flex; gap:6px; padding:6px 12px 0; flex:none }
.today button { flex:1; min-width:0; border:1px solid #2a3358; background:#171d33; color:#c9d2f0; border-radius:10px; padding:6px 8px; font:800 12px Nunito, sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.today button.hot { border-color:#ffd34d; color:#ffd34d }
.daily-days { display:flex; gap:4px; margin:8px 0 }
.daily-days span { flex:1; text-align:center; padding:6px 0; border-radius:8px; background:#1c2340; font-size:12px; font-weight:800; color:#9fb0d8 }
.daily-days span.done { background:#1f4d44; color:#5ee6c8 }
.daily-days span.now { background:#ffd34d; color:#2b2200 }
.shiftcard.daily .daily-days span i { display:block; font-style:normal; font-size:10px; line-height:1.25; letter-spacing:-1px; white-space:nowrap }
.shiftcard.daily { margin-bottom:10px }

/* Three-tab view (2026-10-26, Tim: "ship as drawn"): Play / Earn / Wallet; the heist world is one link away */

.play-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 2px 10px }
.play-top .pb { font:400 34px 'Lilita One', Rubik, sans-serif; display:flex; align-items:center; gap:8px; color:#fff }
.play-top .pb img.racc { width:30px; height:30px }
.play-top .pb small { font:800 13px Nunito, sans-serif; color:var(--muted) }
.play-top .pl { color:var(--muted); font-size:12px; font-weight:800; text-align:right; max-width:45% }
.play-cta { display:block; width:100%; border-radius:18px; padding:16px 14px; background:linear-gradient(180deg,#5ef0d0,#2fc9a6); color:#04261f; font:400 22px 'Lilita One', Rubik, sans-serif; box-shadow:0 6px 0 #1a8f75; text-align:center; margin:0 0 10px }
.play-cta small { display:block; font:800 12px Nunito, sans-serif; opacity:.85; margin-top:2px }
.play-cta:disabled { filter:saturate(.4) brightness(.8) }
.play-card { background:var(--card); border-radius:16px; padding:12px 14px; margin-bottom:8px }
.play-card .pc-row { display:flex; justify-content:space-between; align-items:center; gap:10px }
.play-card .pc-row > div { min-width:0 }
.play-card b { font-size:14.5px }
.play-card small { display:block; color:var(--muted); font-size:12px; margin-top:2px }
.play-card .btn { margin-top:0; white-space:nowrap; flex:none }
.play-card .lvlbar.big { margin-top:8px }
.play-rows { background:var(--card); border-radius:16px; overflow:hidden; margin-bottom:10px }
.play-rows button { display:flex; width:100%; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:900; font-size:14px; color:var(--ink); text-align:left; border-radius:0 }
.play-rows button:last-child { border-bottom:0 }
.play-rows small { color:var(--muted); font-weight:700; font-size:12px; flex:1; margin-left:8px }
.play-rows em { font-style:normal; color:var(--teal,#51d9bd); font-size:18px }
.sidejobs { display:block; width:100%; text-align:center; color:var(--muted); font-size:12.5px; font-weight:800; padding:8px 0 6px }
.sidejobs-nav { display:flex; gap:6px; flex:none; padding:0 2px 8px }
.sidejobs-nav button { flex:1; border:1px solid #2a3358; background:#171d33; color:#c9d2f0; border-radius:10px; padding:6px 4px; font-weight:800; font-size:12px }
[data-earn-section] { margin-bottom:14px }
.wallet-hist { background:var(--card); border-radius:16px; overflow:hidden; margin-top:8px }
.wallet-hist div { display:flex; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--line); font-size:13px; font-weight:800 }
.wallet-hist div:last-child { border-bottom:0 }
.wallet-hist small { color:var(--muted); font-weight:700 }
/* The payout queue and the owner's controls (1 Nov 2026). */
.wd-admin .wd-admin-row { flex-wrap:wrap; gap:6px; align-items:center }
.wd-admin-btns { display:flex; gap:6px; flex-wrap:wrap }
.wd-pace input { width:64px; min-width:0; padding:6px 8px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:inherit; font:inherit }
.wd-pace input#wdPaceSteps { width:110px }
/* Withdraw (Wallet, once withdrawals are open): request sheet and the withdrawal list */
.wd-field { display:grid; gap:5px; margin:8px 0; font-size:12.5px; font-weight:800; color:#bfd2ff }
.wd-field span { display:flex; justify-content:space-between; align-items:center }
.wd-field input { width:100%; box-sizing:border-box; min-height:46px; border:1px solid #3a4479; border-radius:12px; background:#141a33; color:var(--ink); padding:10px 12px; font:800 15px Nunito, system-ui, sans-serif; outline:none }
.wd-field input:focus { border-color:var(--teal) }
.wd-max { border:0; background:transparent; color:var(--teal); font:900 12px Nunito, sans-serif; padding:2px 4px; cursor:pointer }
.wd-sum { text-align:center; font-size:13.5px; color:#bfd2ff; margin:4px 0 8px }
.wd-sum b { color:var(--ink) }
.wd-err { text-align:center; font-size:12.5px; font-weight:800; color:#ff8a8a; margin:0 0 8px }
.wd-list .st { display:block; margin-top:2px; color:var(--muted) }
.wd-list .st.ok { color:var(--teal) } .wd-list .st.bad { color:#ff8a8a }
.wd-list a { color:var(--teal); text-decoration:none }

/* Six-tab restoration: keep the character and every action reachable on short screens. */
/* Hideout progression stays inside the existing Stakeout pane. */
.stake-card { flex:none; overflow:hidden; border-radius:18px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); margin-bottom:12px }
.stake-scene { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover }
.stake-content { padding:14px }
.stake-kicker { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1.3px }
.stake-content h3 { margin:4px 0 10px; font:27px/1.1 'Lilita One',sans-serif; color:var(--ink) }
.stake-total { font:32px/1 'Lilita One',sans-serif; color:var(--teal) }
.stake-total small { font:800 12px Nunito,sans-serif; color:var(--muted) }
.stake-parts { display:flex; flex-wrap:wrap; gap:6px 12px; margin:10px 0 14px; font-size:12px; font-weight:800; color:#c4d1ed }
.stake-next { display:flex; align-items:center; gap:10px; padding:10px 0 12px; border-top:1px solid var(--line) }
.stake-next img { flex:none; width:72px; height:48px; object-fit:cover; border-radius:9px }
.stake-next div { min-width:0 }.stake-next b { display:block; font-size:13px; line-height:1.3 }.stake-next small { display:block; color:var(--muted); font-size:12px; margin-top:4px }
.stake-content .btn { white-space:normal; line-height:1.3; min-height:46px }.stake-content .btn+.btn { margin-top:8px }
.stake-note { font-size:12px; line-height:1.5; color:#c4d1ed }
.stake-max { padding:12px; border-radius:12px; background:#1a3944; text-align:center; color:var(--teal); font-weight:900 }
.stake-explain,.stake-gallery { font-size:12px; line-height:1.5; color:var(--muted); margin-top:8px }
.stake-explain summary,.stake-gallery summary { cursor:pointer; min-height:44px; align-content:center; color:#c4d1ed; font-weight:800 }
.stake-explain p { margin:0 0 10px }.stake-gallery>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.stake-gallery figure { margin:0; overflow:hidden; background:var(--card2); border-radius:10px }.stake-gallery img { display:block; width:100%; height:auto; aspect-ratio:3/2 }
.stake-gallery figcaption { padding:8px }.stake-gallery b,.stake-gallery small { display:block; line-height:1.25 }.stake-gallery b { color:var(--ink); font-size:12px }.stake-gallery small { margin-top:5px; font-size:11px }
.stake-dialog { box-sizing:border-box; width:min(420px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid #50668b; border-radius:20px; background:var(--card); color:var(--ink); font-family:Nunito,sans-serif; box-shadow:0 18px 80px #000b; overflow:hidden }
.stake-dialog[open] { display:flex; flex-direction:column }.stake-dialog:modal { overscroll-behavior:contain }.stake-dialog::backdrop { background:#0a1022cc; overflow:hidden; overscroll-behavior:contain }
.stake-dialog-head { display:flex; flex:none; gap:12px; align-items:center; padding:14px 14px 10px 18px }.stake-dialog-head h2 { flex:1; margin:0; font:25px/1.1 'Lilita One',sans-serif }
#stakeClose { flex:none; width:44px; height:44px; border-radius:12px; background:var(--card2); color:var(--ink); font:30px/1 Nunito,sans-serif }
.stake-dialog-body { overflow-y:auto; overscroll-behavior:contain; min-height:0; padding:0 18px }.stake-dialog-body>img { display:block; width:100%; max-height:200px; object-fit:cover; border-radius:12px }
#stakeEffect { font-size:16px; font-weight:900; line-height:1.5; color:var(--teal); margin:12px 0 8px }#stakeTerms { margin:8px 0 }#stakeStatus { font-size:13px; line-height:1.45; color:#f6d29d; margin:10px 0 }#stakeStatus:empty { margin:0 }
.stake-dialog-actions { flex:none; display:grid; gap:8px; padding:12px 18px 16px }.stake-dialog-actions .btn { margin:0; min-height:46px; white-space:normal; line-height:1.25 }
.stake-dialog button:focus-visible,.stake-card button:focus-visible,.stake-card summary:focus-visible { outline:3px solid var(--teal); outline-offset:2px }
@media(max-height:500px) { .stake-dialog-head { padding:8px 12px }.stake-dialog-head h2 { font-size:22px }.stake-dialog-body>img { max-height:100px }.stake-dialog-actions { grid-template-columns:1fr 1fr; padding:8px 12px }.stake-dialog-actions .btn { font-size:13px; padding:8px } }
@media(min-width:541px) and (max-height:400px) {
  #s-earn.active { overflow-y:auto; overscroll-behavior:contain }
  #s-earn #earnBox { flex:none; overflow:visible; min-height:min-content }
  #s-earn .holder-list { max-height:50dvh; min-height:120px }
}
#s-home.active { overflow-y:auto; -webkit-overflow-scrolling:touch }
#s-home .hideout { flex:0 0 96px; min-height:96px }
#s-home .hero-art { height:96px; bottom:0 }
#s-home>.menu-stage { flex:1 0 180px }
#s-crew>.menu-stage { overflow-y:auto; overscroll-behavior:contain }
#s-crew .menu-pane { flex:none; min-height:min-content; justify-content:flex-start }
@media(max-height:600px) {
  #s-home .hideout { flex-basis:88px; min-height:88px }
  #s-home .hero-art { height:88px }
  #s-home>.menu-stage { flex:1 0 auto }
}

/* Languages (i18n.js sets <html lang>): a long translated label must never push into its neighbour. English is untouched. */
html:not([lang="en"]) .nav { grid-template-columns:repeat(var(--tabs,6),minmax(0,1fr)) }   /* release 13.1: the tab count, not a fixed 6 (Tim, 8 Nov: the three tabs sat in half the bar in Russian) */
html:not([lang="en"]) .nav button { min-width:0; overflow:hidden; white-space:nowrap; letter-spacing:-.2px }
html:not([lang="en"]) .menu-heading>small { min-width:0; overflow-wrap:anywhere }
html:not([lang="en"]) .menu-utilities .lou-entry { min-width:0; overflow:hidden }
html:not([lang="en"]) .menu-utilities .lou-entry>span { min-width:0; overflow:hidden }
html:not([lang="en"]) .menu-utilities .lou-entry b { display:block; overflow:hidden; text-overflow:ellipsis }
@media (max-width:340px) { html:not([lang="en"]) .menu-utilities .lou-entry b { font-size:13px } }
/* The Rep tab's record pane gained the Language button: on very short screens it scrolls instead of cutting the button off. */
[data-menu-pane="crew:stats"] { overflow-y:auto; justify-content:safe center }

/* Perks (27 Oct 2026): the bar under the racks, and the sheets that pick a drone or a colour. */
.perkbar { position:absolute; left:0; right:0; bottom:calc(6px + env(safe-area-inset-bottom,0px)); display:flex; justify-content:center; gap:8px; padding:0 12px; z-index:2 }
.perkbar button { flex:1; min-width:0; max-width:86px; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-radius:14px; border:1px solid #3a4470; background:#171d33; color:#e4e6fa; font:900 11px Nunito, sans-serif; padding:4px 2px; white-space:nowrap; overflow:hidden }
.perkbar button i { font-style:normal; font-size:19px; line-height:1.1 }
.perkbar button small { font-size:10px; color:#ffd34d; font-weight:900 }
.perkbar button small.free, .perkbar button small.own { color:#3ee6c4 }
.perkbar button:disabled { opacity:.45 }
.perk-racks { display:flex; gap:10px; overflow:auto; max-height:44vh; padding:4px 2px 10px; justify-content:center; flex:none }
.perk-hand-sheet { display:flex; flex-direction:column; max-height:calc(84dvh - 40px); min-height:0 }
.perk-hand-sheet > :not(.perk-racks) { flex-shrink:0 }
.perk-hand-sheet .perk-racks { flex:1 1 auto; min-height:48px; max-height:44dvh; overflow:auto; overscroll-behavior:contain; justify-content:safe center }
.perk-hand-sheet .perk-chip { flex:none }
@media(max-height:420px) { .perk-hand-sheet { max-height:calc(88dvh - 40px) } .perk-hand-sheet .perk-head i { font-size:22px } .perk-hand-sheet .sh-t { font-size:20px } .perk-hand-sheet .sh-s { font-size:12px; margin-bottom:4px } .perk-hand-sheet .btn { min-height:36px; padding:6px 12px } }
.perk-rack { display:flex; flex-direction:column; gap:6px; align-items:center; min-width:44px }
.perk-chip { width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.4); color:#fff; font:900 12px Nunito, sans-serif; display:grid; place-items:center; text-shadow:0 1px 2px rgba(0,0,0,.7); padding:0 }
.perk-chip:disabled { opacity:.28 }
.perk-colors { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; padding:4px 0 10px }
.perk-color { height:54px; border-radius:14px; border:2px solid rgba(255,255,255,.35); color:#fff; font:900 13px Nunito, sans-serif; text-shadow:0 1px 2px rgba(0,0,0,.75) }
.perk-head { display:flex; gap:10px; align-items:center } .perk-head i { font-style:normal; font-size:30px }
/* Coin Pie (29 Oct 2026): daily and weekly RACC pots bought with coins, plus the roulette that reveals each winner. */
.piecard { background:var(--card); border-radius:18px; padding:14px; box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:7px; margin-top:10px }
.piecard .pc-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px }
.piecard .pc-top b { font:400 20px 'Lilita One', Rubik, sans-serif; color:var(--ink) }
.piecard .pc-top small { color:var(--muted); font-weight:800; font-size:12px; font-variant-numeric:tabular-nums }
.piecard .pc-pot { display:flex; align-items:center; gap:8px; font:400 34px 'Lilita One', Rubik, sans-serif; color:var(--gold) }
.piecard .pc-pot small { font:800 12px Rubik, sans-serif; color:var(--muted) }
.piecard .pc-sub { font-size:13px; color:var(--muted); font-weight:700 }
.piecard .pc-note { font-size:12px; color:var(--muted); font-weight:800; line-height:1.35 }
.piecard .pc-row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:2px }
.piecard .pc-last { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--line); font-size:12.5px; font-weight:800; color:var(--teal) }
.piecard .pc-last span { min-width:0; overflow-wrap:anywhere }
.pie-wheel { position:relative; width:min(280px, 72vw); aspect-ratio:1; margin:8px auto 4px }
.pie-wheel canvas { width:100%; height:100%; display:block; border-radius:50%; box-shadow:0 0 0 6px var(--card2), 0 6px 0 6px #10142a }
.pie-pointer { position:absolute; left:50%; top:-10px; width:0; height:0; transform:translateX(-50%); border-left:14px solid transparent; border-right:14px solid transparent; border-top:26px solid var(--gold); filter:drop-shadow(0 2px 0 #10142a) }
.piecard .pc-last i { font-style:normal; color:var(--gold); white-space:nowrap }
.piecard .pc-last b { color:var(--ink) }
.pie-result { text-align:center; margin:6px 0 10px; font:400 20px "Lilita One", Rubik, sans-serif; color:var(--ink) }
.pie-result b { color:var(--gold); font-weight:400 }
/* Three winners (3 Nov 2026): the places under the wheel, 1st on top; the last draw's line on the card keeps each name with its prize. */
.pie-places { list-style:none; margin:-4px auto 10px; padding:0; display:grid; gap:4px; max-width:300px; font-weight:800; font-size:14px; color:var(--ink) }
.pie-places li { display:flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:10px; background:var(--card2) }
.pie-places li b { color:var(--gold); min-width:0; overflow-wrap:anywhere } .pie-places li span { margin-inline-start:auto; white-space:nowrap; direction:ltr; unicode-bidi:isolate }
.piecard .pc-last .pw { white-space:nowrap; margin-right:4px }
.pie-result.won { color:var(--gold); font-size:26px }

/* Compact lists (Nanami's feedback, 29 Oct 2026): Jobs, Stores, Rivals and Crew rules show every item at once instead of one
   page at a time. The screen itself never scrolls (.screen.active is overflow:hidden), so on a short phone only the list scrolls
   while the header, chips, raccoon art, Lou/VIP/RACC and the six tabs stay put. Selectors carry the #id so they outrank the
   one-card rules above (#targets .tcard, including the max-height:600px variant). Since 31 Oct (Tim: remove the arrows, scroll
   in one view) gear, defenses, the raid log, crew history, records, gifts and seats list every item too. Rows take their content
   height: a shrunk list has a definite height, and auto rows would then stop at the cards' min-height and cut long text off. */
.menu-pane>.plist { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; margin:0; grid-auto-rows:max-content }
#targets.plist { grid-template-columns:1fr; gap:8px }
#targets.plist .tcard { grid-template-columns:72px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; row-gap:3px; align-items:center; min-height:64px; padding:8px 14px 8px 8px; border-radius:16px }
#targets.plist .tcard img { grid-column:1; grid-row:1 / span 2; width:72px; height:54px; border-radius:11px }
#targets.plist .tcard .tn { grid-column:2; grid-row:1; margin:0; font-size:18px; line-height:1.08; align-self:end; overflow-wrap:anywhere }
#targets.plist .tcard .tm { display:contents }
#targets.plist .tcard .stars { grid-column:2; grid-row:2; font-size:13px; align-self:start }
#targets.plist .tcard .tm>span:last-child { grid-column:3; grid-row:1 / span 2; align-self:center; font-size:15px; white-space:nowrap }
#targets.plist .tcard.locked .stars { visibility:hidden }
#targets.plist .tcard.locked::after { position:static; grid-column:2; grid-row:2; inset:auto; width:auto; height:auto; aspect-ratio:auto; display:block; background:none; border-radius:0; padding:0; text-align:left; align-self:start; font:800 12.5px/1.2 Nunito, Rubik, sans-serif; color:#e9ecff }
#rivals.plist { gap:8px }
#rivals.plist .rival { min-height:72px; padding:8px 12px }
#rivals.plist .rival .rn .rtag { font-size:10.5px }
#missionsBox.plist .mfoot { display:block }
/* Home normally scrolls as a whole on short screens (its stage never shrinks). With a list open, the stage shrinks to the space
   left so the list scrolls inside it and Lou/VIP/RACC stay on screen. Landscape phones (under 500px tall) keep the existing single
   outer scroll instead of a second scroller. The Rep tab already scrolls inside its own stage, so Crew rules needs nothing extra. */
@media(min-height:500px) { #s-home>.menu-stage:has(>.menu-pane:not([hidden])>.plist) { flex:1 1 0; min-height:96px } }

/* ---------- Friends: the friend bonus, its progress and the sharing bonus line (29 Oct 2026) ---------- */
.story-task .story-bonus, .name-task .name-bonus, .post-task .post-bonus { color:var(--teal); font-weight:800 }
.name-task .row2 { margin-top:8px }
.invite-hero { display:grid; grid-template-columns:64px 1fr 1fr; gap:10px; align-items:center; background:linear-gradient(135deg,#1e3a5c,#2a2f6e); border-radius:20px; padding:12px 14px; box-shadow:inset 0 0 0 1px #3c5c99, 0 3px 0 #10142a }
.invite-hero.plain { grid-template-columns:64px 1fr }
.invite-hero .ih-art { width:64px; height:64px; object-fit:contain }
.ih-amt small { display:block; color:#bfd2ff; font-size:12px; font-weight:800 }
.ih-amt b { display:flex; align-items:center; gap:6px; font:400 30px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; font-variant-numeric:tabular-nums; line-height:1.1 }
.ih-amt b .racc { width:22px; height:22px }
.invite-path { display:grid; gap:6px; margin:10px 0 0 }
.invite-path div { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; background:var(--card); border-radius:14px; padding:8px 12px; box-shadow:inset 0 0 0 1px var(--line) }
.invite-path b { font:400 17px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; color:var(--teal); white-space:nowrap }
.invite-path span { font-size:12.5px; color:var(--muted); font-weight:700 }
.invite-meter { display:grid; gap:6px; margin:10px 0 0; background:var(--card); border-radius:14px; padding:10px 12px; box-shadow:inset 0 0 0 1px var(--line) }
.invite-meter small { color:var(--muted); font-size:12px; font-weight:700 }
.invite-actions { margin:10px 0 0 }
.invite-list { display:grid; gap:6px }
.invite-friend { background:var(--card); border-radius:14px; padding:8px 12px; box-shadow:inset 0 0 0 1px var(--line) }
.invite-friend.paid { box-shadow:inset 0 0 0 1px var(--teal) }
.invite-friend .sc-row b { font-size:15px; color:var(--teal) }
.invite-steps { margin:6px 0 2px }
.invite-steps span { font-size:11.5px; padding:5px 2px }
.invite-steps span.done, .welcome-card .daily-days span.done { background:rgba(127,245,223,.16); color:var(--teal) }
.invite-rules { margin:10px 2px 0; color:var(--muted); font-size:12.5px }
.invite-rules summary { cursor:pointer; font-weight:900; color:var(--ink, #e9ecff); padding:14px 0 }
.invite-rules p { margin:6px 0 0 }
.welcome-card { margin:0 0 10px; box-shadow:inset 0 0 0 1px var(--teal) }
/* Top tab (31 Oct 2026, Tim): a chat button beside the live player count opens the Raccoon Heist chat. */
.board-chat { display:inline-flex; align-items:center; gap:4px; margin-left:8px; min-height:30px; padding:4px 11px; border-radius:999px; background:var(--card2); box-shadow:inset 0 0 0 1px var(--line); color:var(--teal); font:800 12.5px/1 Nunito, sans-serif; vertical-align:middle; cursor:pointer }
.board-chat:focus-visible { outline:3px solid var(--teal); outline-offset:2px }
/* Best ways to earn RACC (31 Oct 2026, Tim: push story, name tag and friend invites) */
.bestearn { background:linear-gradient(135deg,#183f3a,#1e2f5c); border-radius:18px; padding:12px; box-shadow:inset 0 0 0 1px #2f8f7c, 0 3px 0 #10142a; display:grid; gap:6px; margin-bottom:10px }
.be-h { font:400 18px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; color:var(--teal) }
.be-h-all { display:flex; align-items:center; justify-content:space-between; gap:8px }
.be-all { flex:none; min-height:44px; padding:0 12px; border-radius:999px; background:rgba(16,20,42,.45); color:var(--ink); font:800 13px Nunito, system-ui, sans-serif; letter-spacing:0 }
.be-all:focus-visible { outline:2px solid var(--teal); outline-offset:2px }
.be-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px 10px; border:0; border-radius:12px; background:rgba(16,20,42,.45); color:var(--ink); font:800 14px Nunito, sans-serif; text-align:left; cursor:pointer }
.be-row:focus-visible { outline:2px solid var(--teal); outline-offset:2px }
.be-i { font-size:18px; text-align:center }
.be-row b { font-weight:900; overflow-wrap:anywhere }
.be-row em { font-style:normal; font-weight:900; color:var(--gold); white-space:nowrap; font-size:13px }

/* Server coin wallet, step 1b: a loot result line until the server saved the claim (game.js coinSavingHtml). */
.coin-save { margin:-2px 0 6px; color:var(--muted, #a7a9cf) }
.coin-save.saved { color:#3ddc84 }

/* Arabic and Persian (1 Nov 2026): the page reads right to left; canvas HUD text keeps its left-to-right layout. */
html[dir="rtl"] canvas { direction: ltr; }
/* Tim's launch checklist on the withdraw card and sheet (3 Nov 2026): one line per requirement, ✓ / ✗ / ? (could not check). */
.wd-checks { display:grid; gap:6px; margin:10px 0 4px }
.wd-ck { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--ink) }
.wd-ck .mk { flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:13px; background:rgba(255,255,255,.08) }
.wd-ck.ok .mk { background:#1f8f6a; color:#fff }
.wd-ck.no .mk { background:#a5384a; color:#fff }
.wd-ck.unk .mk { background:#8a6d1f; color:#fff }
.wd-ck span:nth-child(2) { flex:1; min-width:0 }
.wd-ck .btn.sm { padding:4px 10px; font-size:12px }
.wd-note { font-size:12px; color:#bfd2ff; font-weight:800; margin-top:4px }
/* The buy rule's line (4 Nov 2026): its two buttons sit under the text, lined up with it. */
.wd-ck.buy { flex-wrap:wrap }
.wd-ck .wd-ck-btns { flex:1 0 100%; display:flex; flex-wrap:wrap; gap:6px; padding-inline-start:30px }
/* The 7-day lines (5 Nov 2026): done but not 7 days yet ("day N of 7"). */
.wd-ck.wait .mk { background:#2f5fa8; color:#fff }
/* The lifetime withdrawal limit (5 Nov 2026): the number, what was withdrawn, what makes it, how to raise it. */
.wd-cap { margin:10px 0 2px; padding:10px 12px; border:1px solid #3a4479; border-radius:14px; background:rgba(255,255,255,.04); display:grid; gap:6px }
.wd-cap-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:900; color:#bfd2ff; letter-spacing:.02em }
.wd-cap-h b { font:400 20px 'Lilita One', Rubik, sans-serif; color:var(--gold); letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums }
.wd-cap-used { font-size:12.5px; font-weight:900; color:var(--ink) }
.wd-cap-parts { display:flex; flex-wrap:wrap; gap:6px }
.wd-cap-part { font-size:12px; font-weight:800; color:var(--ink); background:rgba(255,255,255,.07); border-radius:999px; padding:3px 9px; white-space:nowrap }
.wd-cap-under { font-size:12.5px; font-weight:900; color:#ffc0cc }
.wd-cap-how { font-size:12px; color:#bfd2ff; font-weight:700 }
.wd-cap-btns { display:flex; flex-wrap:wrap; gap:6px }
.wd-cap-btns .btn.sm { padding:5px 11px; font-size:12px }
.wd-cap.compact { margin-top:8px; padding:8px 10px }
.wd-cap.compact .wd-cap-h b { font-size:17px }
/* "Support the project" (5 Nov 2026): the small supporter mark and the shop's Support link. */
.sup-mark { display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:999px; background:#ff5c8a2e; color:#ffb3c8; font:900 12px Nunito, sans-serif; letter-spacing:.02em; vertical-align:middle }

/* New-player tour (tour.js, 5 Nov 2026): the frame dims, one control stays lit inside a teal ring, Lou's card sits under or over it. */
.tour { position:absolute; inset:0; z-index:35 }
.tour.away { visibility:hidden }   /* a sheet or dialog is open above the trained players' tour */
.tour-shade { position:absolute; inset:0; background:rgba(6,9,22,.74) }
.tour-ring { position:absolute; border-radius:16px; box-shadow:0 0 0 200vmax rgba(6,9,22,.74); outline:3px dashed var(--gold); outline-offset:2px; pointer-events:none; transition:left .25s, top .25s, width .25s, height .25s }
/* The 9 px band around the card is the dimmed page's own colour: a line of text half under the card's edge no longer shows in the gap between card and ring. */
.tour-card { position:absolute; left:12px; right:12px; display:grid; grid-template-columns:76px 1fr; gap:10px 12px; align-items:end; background:linear-gradient(180deg,#26305a,#1d2445); border:1px solid #3a4479; border-radius:20px; padding:14px; box-shadow:0 0 0 9px rgba(6,9,22,.92), 0 14px 40px rgba(0,0,0,.5) }
/* A card pinned to the top of the frame: the strip above it (half of the header, under Lou's head) is covered edge to edge. */
.tour-card.attop { box-shadow:0 -60px 0 12px rgba(6,9,22,.92), 0 0 0 9px rgba(6,9,22,.92), 0 14px 40px rgba(0,0,0,.5) }
.tour-lou { width:76px; height:auto; max-height:104px; object-fit:contain; margin-top:-46px; align-self:start; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) }
.tour-text { min-width:0 }
.tour-t { font:400 24px/1.1 'Lilita One', Rubik, sans-serif; letter-spacing:.01em; text-wrap:balance }
.tour-b { margin:6px 0 0; font-size:17px; line-height:1.35; color:var(--ink); text-wrap:pretty }
.tour-extra { grid-column:1 / -1 }
.tour-extra:empty { display:none }
.tour-act { grid-column:1 / -1; display:flex; align-items:center; gap:8px }
.tour-act [data-act="tournext"] { margin-left:auto; min-width:116px }
.tour-act .btn { min-height:44px }
.tour-dots { display:flex; gap:5px; margin:0 auto }
.tour-dots i { width:7px; height:7px; border-radius:999px; background:#4a5590 }
.tour-dots i.on { width:18px; background:var(--gold) }
@media (prefers-reduced-motion: reduce) { .tour-ring { transition:none } }

/* First launch (Tim, 5 Nov 2026: "should say withdrawable 14 November first"): one big line and one button. */
.welcome14 { display:grid; justify-items:center; gap:12px; text-align:center; padding:8px 4px 4px }
.welcome14 .res-art { max-height:150px }
.w14-big { font:400 clamp(34px, 10vw, 44px)/1.02 'Lilita One', Rubik, sans-serif; text-wrap:balance; color:var(--gold) }
.w14-big b { display:block; color:var(--ink); font-weight:400 }
/* The welcome gift (earn/_gift.js): the gift on the first screen, and what the first win collected. */
.gift14 { gap:10px }
.gift-t { font:400 22px/1.1 'Lilita One', Rubik, sans-serif; color:var(--gold); letter-spacing:.02em }
.gift-big { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 10px; font:400 clamp(36px, 11vw, 48px)/1.02 'Lilita One', Rubik, sans-serif; color:var(--ink) }
.gift-big .racc { width:.9em; height:.9em }
.gift-big small { flex-basis:100%; font:600 17px/1.2 Rubik, sans-serif; color:#3ee6c4 }
.gift-wd { margin:2px 0 0; font:500 13px/1.3 Rubik, sans-serif; color:var(--muted) }
.gift-wd b { color:#3ee6c4; font-weight:600 }
.giftwin { display:grid; gap:6px; margin:6px 0 10px; padding:12px 14px; border-radius:14px; background:rgba(62,230,196,.08); box-shadow:inset 0 0 0 1px rgba(62,230,196,.28); text-align:left }
.giftwin .gw-row { display:flex; justify-content:space-between; gap:12px; font:500 14px/1.3 Rubik, sans-serif }
.giftwin .gw-row b { color:#9fe8ff; font-weight:600; white-space:nowrap }
.giftwin .gw-total { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; margin-top:4px; font:400 30px/1.05 'Lilita One', Rubik, sans-serif; color:var(--ink) }
.giftwin .gw-total .racc { width:.85em; height:.85em }
.giftwin .gw-total small { font:600 14px/1.2 Rubik, sans-serif; color:#3ee6c4 }
.giftwin .gw-bar { height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden }
.giftwin .gw-bar i { display:block; height:100%; border-radius:99px; background:#3ee6c4 }
.giftwin .gw-note { font:500 12px/1.3 Rubik, sans-serif; color:var(--muted); text-align:center }

/* Every way to earn, after the tour (and from Earn): invites and stories first and biggest. */
.ways { display:grid; gap:10px }
.ways-top { display:grid; gap:8px }
.way-hero { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; text-align:left; background:var(--card); border-radius:16px; padding:12px 14px; box-shadow:inset 0 0 0 2px var(--teal) }
.way-hero .wi { grid-row:span 2; font-size:30px }
.way-hero b { font:400 20px/1.1 'Lilita One', Rubik, sans-serif }
.way-hero em { font-style:normal; color:var(--gold); font-weight:900; font-size:16px }
.way-hero .tag { justify-self:start; grid-column:2; font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#10142a; background:var(--teal); border-radius:999px; padding:2px 8px }
.ways-list { display:grid; gap:2px; margin:2px 0 0; padding:0; list-style:none }
.ways-list li { display:flex; justify-content:space-between; gap:10px; padding:7px 4px; border-bottom:1px solid #2c3462; font-size:15px }
.ways-list li:last-child { border-bottom:0 }
.ways-list em { font-style:normal; color:var(--gold); font-weight:900; white-space:nowrap }
/* Ways to earn as an action hub (Tim, 7 Nov 2026: "add buttons ... join channel/chat here as well, make a bit smaller overall"). */
.ways-hub { gap:8px }
.ways-hub .way-hero { grid-template-columns:auto minmax(0,1fr) auto; gap:2px 10px; padding:9px 10px 9px 12px; border-radius:14px }
.ways-hub .way-hero .wi { grid-row:auto; font-size:24px }
.ways-hub .wh-t { display:grid; gap:2px; min-width:0 }
.ways-hub .way-hero b { font-size:17px }
.ways-hub .way-hero em { font-size:13px; line-height:1.25 }
.ways-hub .way-hero .tag { grid-column:auto; font-size:10px; padding:1px 7px }
.ways-hub .ways-list { gap:0; margin:0 }
.ways-hub .ways-list li.way-row { align-items:center; padding:5px 2px; font-size:14px }
.ways-hub .wr-t { display:grid; gap:1px; min-width:0 }
.ways-hub .wr-t b { font-weight:800; font-size:14px; line-height:1.2 }
.ways-hub .wr-t em { font-size:12.5px; white-space:normal }
.ways-hub .wr-t small { font-size:11.5px; line-height:1.2; opacity:.72 }
.ways-hub .btn.sm { flex:none; min-width:86px; min-height:38px; padding:6px 10px; font-size:14px; border-radius:11px }
.ways-hub .btn.sm:disabled { opacity:.6 }
/* The header avatar opens Ways to earn and nudges until it is opened that day (Tim, 7 Nov 2026: "add some animation here so that the
   user likely tap it"). */
.me-wrap { display:flex; align-items:center; gap:8px; flex:1; min-width:0 }
.me-wrap .me { flex:1 }
.ava-btn { position:relative; flex:none; display:grid; place-items:center; min-width:44px; min-height:44px }
.ava-btn .ava-plus { position:absolute; right:-1px; top:1px; display:none; min-width:17px; height:17px; padding:0 3px; border-radius:9px; background:var(--gold); color:#141a35; font:900 12px/17px Rubik, Nunito, sans-serif; font-style:normal; box-shadow:0 0 0 2px var(--bg) }
.ava-btn.nudge .ava-plus { display:block }
/* Five wiggles, one every 8 s, then the gold ring and the badge stay still until the hub is opened (Codex: not an endless loop). */
.ava-btn.nudge .ava { box-shadow:inset 0 0 0 2px var(--gold); animation:avaNudge 8s ease-in-out 1s 5; transform-origin:50% 80% }
@keyframes avaNudge {
  0%, 80%, 100% { transform:none; box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 0 rgba(255,211,77,0) }
  83% { transform:rotate(-9deg) scale(1.08) }
  86% { transform:rotate(8deg) scale(1.08); box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 7px rgba(255,211,77,.25) }
  89% { transform:rotate(-5deg) scale(1.04) }
  92% { transform:rotate(3deg) scale(1.02) }
  95% { transform:none; box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 0 rgba(255,211,77,0) }
}
@media (prefers-reduced-motion: reduce) { .ava-btn.nudge .ava { animation:none; box-shadow:inset 0 0 0 2px var(--gold) } }
/* The owner's task admin under Earn › Tasks (7 Nov 2026, platform.js): big type, few words, every form in a dialog. */
.tasks-admin { display:grid; gap:10px; margin-top:18px }
.tasks-admin .sect-h { margin:10px 2px 0 }
.ta-row { display:grid; gap:6px; background:var(--card); border-radius:18px; padding:12px 14px; box-shadow:inset 0 0 0 1px var(--line) }
.ta-row.off .ta-top, .ta-row.off > small { opacity:.55 }
.ta-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0 }
.ta-top b { min-width:0; font-size:18px; font-weight:900; overflow-wrap:anywhere }
.ta-top strong { flex:none; color:var(--teal); font-size:17px; font-weight:900 }
.ta-row small { color:var(--muted); font-size:13px; overflow-wrap:anywhere }
.ta-btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px }
.ta-btns .btn { min-height:44px; min-width:52px; font-size:15px }
.tasks-admin .btn.wide { margin-top:2px; min-height:52px; font-size:19px }
.ta-note { margin:0 2px; color:var(--muted); font-size:13px }
.wd-tasks { margin:0 0 8px }
.ta-x { flex:none; width:44px; height:44px; border-radius:12px; background:var(--card2); color:var(--ink); font:30px/1 Nunito,sans-serif }
.ta-field { display:grid; gap:6px; margin:0 0 12px }
.ta-field span { font-size:15px; font-weight:900 }
.ta-field em { font-style:normal; font-weight:700; font-size:13px; color:var(--muted) }
.ta-field input, .ta-link { box-sizing:border-box; width:100%; min-height:48px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); font:600 17px/1.3 Nunito,system-ui,sans-serif; user-select:text; -webkit-user-select:text }
.ta-field input:focus, .ta-link:focus { outline:2px solid var(--teal); outline-offset:1px }
.ta-link { display:block; resize:none; font-size:15px; word-break:break-all; margin:0 0 12px }
.ta-hint { margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.4 }
.ta-status { margin:0 18px; color:#f6d29d; font-size:14px; font-weight:800; line-height:1.4 }
.ta-status:empty { display:none }
.ta-dialog .stake-dialog-actions { grid-template-columns:1fr 1fr }

/* Friends package (8 Nov 2026, earn/_crew.js): crew rings (avatar, Top rows, the badge card), the crew list, the invite cup */
.ava-btn.crew-1 .ava { box-shadow:0 0 0 2px #cd7f32, inset 0 0 0 2px #3a4479 }
.ava-btn.crew-2 .ava { box-shadow:0 0 0 2px #c9d1e3, inset 0 0 0 2px #3a4479 }
.ava-btn.crew-3 .ava { box-shadow:0 0 0 2px var(--gold), 0 0 8px rgba(255,211,77,.45), inset 0 0 0 2px #3a4479 }
.ava-btn.nudge.crew-1 .ava { box-shadow:0 0 0 2px #cd7f32, inset 0 0 0 2px var(--gold) }
.ava-btn.nudge.crew-2 .ava { box-shadow:0 0 0 2px #c9d1e3, inset 0 0 0 2px var(--gold) }
.ava-btn.nudge.crew-3 .ava { box-shadow:0 0 0 2px var(--gold), 0 0 8px rgba(255,211,77,.45), inset 0 0 0 2px var(--gold) }
.brow img.crew-ring.crew-1 { box-shadow:0 0 0 2px #cd7f32 }
.brow img.crew-ring.crew-2 { box-shadow:0 0 0 2px #c9d1e3 }
.brow img.crew-ring.crew-3 { box-shadow:0 0 0 2px var(--gold), 0 0 6px rgba(255,211,77,.45) }
/* release 13: the profile sheet (the header's rank) shows the avatar with its crew ring */
.profile-ava { display:block; width:64px; height:64px; margin:0 auto 6px; border-radius:50%; background:var(--card2); box-shadow:inset 0 0 0 2px #3a4479 }
.profile-ava.crew-1 { box-shadow:0 0 0 3px #cd7f32 } .profile-ava.crew-2 { box-shadow:0 0 0 3px #c9d1e3 } .profile-ava.crew-3 { box-shadow:0 0 0 3px var(--gold), 0 0 10px rgba(255,211,77,.45) }
.crew-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; background:var(--line) }
.crew-dot.crew-1 { background:#cd7f32 } .crew-dot.crew-2 { background:#c9d1e3 } .crew-dot.crew-3 { background:var(--gold) }
.crew-card, .crew-badge { margin-bottom:10px }
.crew-line { color:var(--gold) }
.crew-list { display:grid; gap:6px }
.crew-friend { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; background:var(--card2); border-radius:12px; padding:8px 10px; font-size:13px }
.crew-friend .cf-name { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.crew-friend .cf-grids { color:var(--muted); font-size:12px; white-space:nowrap }
.crew-friend b { font-size:12px; color:var(--muted); white-space:nowrap }
.crew-friend.on b { color:var(--teal) }
.cup-note { margin-top:10px }
/* Release 13: the header shows HEIST, not coins; a gain pulses the chip and floats "+N" (still under reduced motion: no float). */
.hud .stat.heist { position:relative; border:0; color:inherit; font:inherit; font-weight:900; cursor:pointer }
.hud .stat.heist .heist-ico { width:18px; height:18px; flex:none }
.hud .stat.heist.gain { animation:heistPulse .9s ease-out }
.hud .stat.heist .heist-gain { position:absolute; right:6px; top:-4px; font-style:normal; font-size:12px; font-weight:900; color:#7dffa8; pointer-events:none; animation:heistFloat 1.5s ease-out forwards }
@keyframes heistPulse { 0% { box-shadow:inset 0 0 0 1px #343d68, 0 0 0 0 rgba(125,255,168,.7) } 60% { box-shadow:inset 0 0 0 1px #7dffa8, 0 0 0 8px rgba(125,255,168,0) } 100% { box-shadow:inset 0 0 0 1px #343d68 } }
@keyframes heistFloat { 0% { opacity:0; transform:translateY(6px) } 20% { opacity:1 } 100% { opacity:0; transform:translateY(-14px) } }
@media (prefers-reduced-motion: reduce) { .hud .stat.heist.gain { animation:none; box-shadow:inset 0 0 0 1px #7dffa8 } .hud .stat.heist .heist-gain { animation:none; top:-12px } }
/* Release 15: the Coin Pie says what goes in (coins) and what comes out (HEIST); each Put button names its coins. */
.pie-coins { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 10px; background:var(--card); border-radius:16px; padding:10px 14px; box-shadow:inset 0 0 0 1px var(--line) }
.pie-coins .ico { grid-row:1 / span 2; width:28px; height:28px }
.pie-coins b { font:400 22px 'Lilita One', Rubik, sans-serif; color:var(--gold) }
.pie-coins small { color:var(--muted); font-size:12.5px; font-weight:700 }
.piecard .pc-put { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px }
.piecard .pc-put .btn { display:grid; justify-items:center; line-height:1.15; padding-left:6px; padding-right:6px; min-width:0 }
.piecard .pc-put .btn small { font-size:11px; font-weight:800; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
/* Release 15: Earn as one rewards page (after Pickaxe Empire's Earn page): balance, Daily reward, Collect every day, Tasks, Your level. */
.earn-one { display:grid; gap:10px; align-content:start }
.earn-one .sect-h { margin:8px 2px 0 }
/* The balance keeps its width; the shop button sits beside it, or wraps under it full width when a language makes it long (ru, 390). */
.earn-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; background:linear-gradient(135deg,#1e3a5c,#2a2f6e); border-radius:18px; padding:12px 14px; box-shadow:inset 0 0 0 1px #3c5c99 }
.earn-top .et-bal { display:flex; align-items:center; gap:8px; flex:none; white-space:nowrap; font:400 28px 'Lilita One', Rubik, sans-serif; color:var(--gold) }
.earn-top .et-bal small { font:800 12px Rubik, sans-serif; color:var(--muted) }
.earn-top .btn { flex:1 1 auto; max-width:100%; white-space:normal; text-align:center }
.reward-row { gap:10px }
.reward-row .channel-heading small, .channel-heading.daily-sub small { display:block }
.channel-heading strong small { display:block; color:var(--muted); font-size:11.5px; font-weight:800 }
.earn-one .channel-task { display:grid; gap:10px }
.earn-one .shiftcard.daily { margin-bottom:0 }
.earn-one .earn-all { justify-self:center }
/* Release 15 (Tim, 8 Nov: "when you swipe up or down, on the right there is this scroll bar that appears, i just dont want it"): no scroll bar
   on any scrolling area of the game; everything still scrolls by swipe and wheel. */
* { scrollbar-width:none !important }
*::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important }
/* the confirmed withdrawal alert: one quiet line inside the flow, not a disabled button */
.wd-onlist { display:flex; align-items:flex-start; gap:8px; margin:2px 0 4px; padding:9px 12px; border-radius:12px; background:rgba(79,216,191,.12); color:#7ee7cf; font-weight:800; font-size:13px; line-height:1.35; text-align:start }
.wd-onlist > span:first-child { font-size:15px }

/* Release 17 (Tim, 8 Nov 2026: "build the chests"): HEIST chests and the LOOKS they give (game.js "HEIST chests and looks").
   No new art: every look is CSS. A look is worn through a data-look-<slot> attribute on <body>, and a preview carries its own, so the
   same rules draw the header, the profile, the own Top row and the previews. Nothing applies while no look of that slot is worn. */
/* Custom properties inherit: a preview inside a body that wears a glowing look must not inherit that glow, so every look sets them all. */
[data-look-frame] { --frame-glow:none }
[data-look-name] { --name-glow:none }
[data-look-frame="frame_brass"] { --frame-c:#d6ab52; --frame-s:solid; --frame-w:2px }
[data-look-frame="frame_neon"] { --frame-c:#ff4fd8; --frame-s:solid; --frame-w:2px; --frame-glow:drop-shadow(0 0 4px rgba(255,79,216,.85)) }
[data-look-frame="frame_vaultgold"] { --frame-c:#ffd34d; --frame-s:double; --frame-w:4px; --frame-glow:drop-shadow(0 0 5px rgba(255,211,77,.65)) }
[data-look-frame="frame_diamond"] { --frame-c:#aef7ff; --frame-s:solid; --frame-w:2px; --frame-glow:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(110,230,255,.9)) }
[data-look-frame] .look-frame, .look-frame[data-look-frame] { outline:var(--frame-w) var(--frame-s) var(--frame-c); outline-offset:2px; filter:var(--frame-glow) }
[data-look-name="name_getaway"] { --name-c:#62f0a0 }
[data-look-name="name_streetlamp"] { --name-c:#ffd166 }
[data-look-name="name_laser"] { --name-c:#ff6170; --name-glow:0 0 6px rgba(255,70,90,.8) }
[data-look-name] .look-name { color:var(--name-c); text-shadow:var(--name-glow) }
/* Outfit tints recolour the existing hero art; the Hideout hero keeps its drop shadow. */
[data-look-outfit="outfit_midnight"] { --outfit:hue-rotate(205deg) saturate(1.3) brightness(.9) }
[data-look-outfit="outfit_moss"] { --outfit:hue-rotate(78deg) saturate(1.4) }
[data-look-outfit="outfit_ghost"] { --outfit:grayscale(1) brightness(1.35) contrast(1.08) drop-shadow(0 0 3px rgba(220,235,255,.85)) }
[data-look-outfit] .look-outfit { filter:var(--outfit) }
[data-look-outfit] #heroArt.look-outfit { filter:var(--outfit) drop-shadow(0 8px 10px rgba(0,0,0,.45)) }
/* Grid backdrops paint only #hcv's CSS background, behind the board: the pixels to match are drawn on the canvas and never change. */
[data-look-grid="grid_nightshift"] { --grid-bg:radial-gradient(60% 40% at 82% 6%, rgba(190,210,255,.2), transparent 70%), linear-gradient(180deg,#26335f,#10162f) }
[data-look-grid="grid_rooftop"] { --grid-bg:linear-gradient(180deg,#8c5069 0%,#5b3e70 48%,#2b2a52 100%) }
[data-look-grid="grid_bankvault"] { --grid-bg:radial-gradient(120% 50% at 50% -4%, rgba(255,211,77,.34), transparent 62%), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 3px, transparent 3px 34px), linear-gradient(180deg,#56627e,#1c2133) }
body[data-look-grid] #hcv { background:var(--grid-bg) }
/* The previews (the Looks list, the result card) */
.look-prev { position:relative; display:inline-grid; place-items:center; width:44px; height:44px; flex:none }
.look-prev .ava { width:34px; height:34px; border-radius:11px }
.look-prev .ava img { width:36px; height:36px; margin-top:3px }
.look-name-sw { font:400 19px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; color:var(--ink) }
.look-grid-sw { position:relative; display:block; width:40px; height:40px; border-radius:10px; background:var(--grid-bg, linear-gradient(180deg,#4b4e70,#363856)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) }
.look-grid-sw i { position:absolute; inset:11px; border-radius:4px; background:#2f3150; box-shadow:0 0 0 2px #c9cce9 }
.look-prev.big { width:96px; height:96px }
.look-prev.big .ava { width:74px; height:74px; border-radius:22px }
.look-prev.big .ava img { width:80px; height:80px; margin-top:8px }
.look-prev.big .look-name-sw { font-size:40px }
.look-prev.big .look-grid-sw { width:88px; height:88px; border-radius:18px }
.look-prev.big .look-grid-sw i { inset:24px; border-radius:7px }
.look-prev.big .look-frame { outline-offset:4px }

/* Earn → Chests */
.chest-spent { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; align-items:center; margin:6px 0 12px; padding:10px 12px; border-radius:16px; background:linear-gradient(135deg,#3b1f30,#262042); box-shadow:inset 0 0 0 1px #6b3a54 }
.chest-spent .cs-ico { grid-row:1 / 4; font-size:24px; line-height:1 }
.chest-spent b { font:400 21px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; color:#ffd9a8; font-variant-numeric:tabular-nums }
.chest-spent small { color:#e2c2d2; font-size:12px; font-weight:800 }
.chest-spent em { font-style:normal; color:var(--muted); font-size:12px; font-weight:800 }
.chest-list { display:grid; gap:10px }
.chest-card { display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px 12px; align-items:center; padding:12px; border-radius:18px; background:var(--card); box-shadow:inset 0 0 0 1px var(--chest-edge,#343d68), 0 3px 0 #10142a }
.chest-card .chest-txt { min-width:0 }
.chest-card .chest-txt b { display:block; font:400 18px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; color:var(--chest-ink,#e9ecff) }
.chest-card .chest-txt small { display:block; color:var(--muted); font-size:12px; font-weight:800; margin-top:2px }
.chest-card .chest-txt .chest-odds { color:#d3d8ff }
.chest-card .btn { grid-column:1 / 3 }
.chest-note { margin:12px 2px 8px; color:var(--muted); font-size:12.5px; font-weight:700; line-height:1.4 }
.chest-bronze { --chest-a:#e9a466; --chest-b:#8c4f20; --chest-edge:#7a4b2a; --chest-ink:#ffcf9e }
.chest-silver { --chest-a:#f1f4fb; --chest-b:#7c88a5; --chest-edge:#6f7b98; --chest-ink:#e6ecfa }
.chest-gold { --chest-a:#ffe684; --chest-b:#c98a12; --chest-edge:#a8791c; --chest-ink:#ffe08a }
/* the chest itself: a lid, a body and a lock, drawn in CSS in the chest's metal */
.chest-ico { position:relative; display:block; width:56px; height:46px; margin:2px auto 0 }
.chest-ico::before { content:''; position:absolute; left:4px; right:4px; bottom:0; height:28px; border-radius:6px 6px 9px 9px; background:linear-gradient(180deg,var(--chest-a),var(--chest-b)); box-shadow:inset 0 0 0 2px rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.35) }
.chest-ico::after { content:''; position:absolute; left:2px; right:2px; top:0; height:20px; border-radius:16px 16px 4px 4px; background:linear-gradient(180deg,var(--chest-a),var(--chest-b)); box-shadow:inset 0 0 0 2px rgba(0,0,0,.28); transform-origin:12% 100% }
.chest-ico i { position:absolute; left:50%; top:13px; width:12px; height:15px; margin-left:-6px; border-radius:3px; background:#2a2440; box-shadow:0 0 0 2px var(--chest-a); z-index:1 }
/* the opening moment: short, skippable, still under reduced motion */
.chest-stage { position:relative; display:grid; place-items:center; height:132px; margin:4px 0 6px }
.chest-stage .chest-ico { transform:scale(2.1) }
.chest-stage.shake .chest-ico { animation:chestShake .42s ease-in-out infinite }
.chest-stage.open .chest-ico::after { animation:chestLid .4s ease-out forwards }
.chest-stage.open::before { content:''; position:absolute; inset:0; margin:auto; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, var(--chest-glow, rgba(255,220,140,.55)), transparent 70%); animation:chestGlow .5s ease-out forwards }
.chest-stage.rare { --chest-glow:rgba(170,130,255,.75) }
@keyframes chestShake { 0%,100% { transform:scale(2.1) rotate(0) } 25% { transform:scale(2.1) rotate(-7deg) } 75% { transform:scale(2.1) rotate(7deg) } }
@keyframes chestLid { to { transform:translateY(-9px) rotate(-24deg) } }
@keyframes chestGlow { from { opacity:0; transform:scale(.6) } to { opacity:1; transform:scale(1) } }
@media (prefers-reduced-motion: reduce) { .chest-stage.shake .chest-ico, .chest-stage.open .chest-ico::after, .chest-stage.open::before { animation:none } .chest-stage.open .chest-ico::after { transform:translateY(-9px) rotate(-24deg) } }
.chest-result { display:grid; justify-items:center; gap:6px; margin:2px 0 8px; text-align:center }
.chest-result .look-tag { display:inline-block; padding:2px 10px; border-radius:999px; font:900 12px Nunito, sans-serif; letter-spacing:.03em; background:#2b3358; color:var(--muted) }
.chest-result .look-tag.rare { background:#3a2a6e; color:#d8c8ff; box-shadow:inset 0 0 0 1px #7a5cff }
.chest-result b { font:400 22px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em }

/* The Looks list (profile sheet → Looks, and Earn → Chests) */
.look-sheet { display:grid; gap:12px; text-align:start }
.look-slot .ls-h { margin:0 2px 6px; color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase }
.look-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:8px }
.look-item { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; align-items:center; padding:7px 8px; border-radius:14px; background:var(--card2); text-align:start; box-shadow:inset 0 0 0 1px var(--line) }
.look-item b { display:block; font-size:13px; font-weight:900; line-height:1.2; overflow-wrap:anywhere }
.look-item small { display:block; margin-top:1px; font-size:11px; color:var(--muted); font-weight:800; line-height:1.2 }
.look-item.rare { box-shadow:inset 0 0 0 1px #6b55c9 }
.look-item.on { box-shadow:inset 0 0 0 2px var(--teal) }
.look-item.on small { color:var(--teal) }
.look-item[disabled] { opacity:.55; filter:saturate(.6) }
.look-new { display:inline-block; margin-top:3px; padding:0 7px; border-radius:999px; background:var(--gold); color:#1b1300; font:900 10px/16px Nunito, sans-serif; font-style:normal }

/* The supporter mark (coordinator, 8 Nov 2026: the 10-Star Support pack becomes a visible thank-you, no HEIST): a heart in a rose ring,
   like the crew rings, on the header avatar, the profile and the own Top rows. It comes from the verified receipt (platform snapshot). */
.sup-pip { position:absolute; inset-inline-end:0; bottom:0; z-index:1; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#3a1630; color:#ff8fb1; font:900 10px/1 Nunito, system-ui, sans-serif; font-style:normal; box-shadow:0 0 0 2px var(--pink), 0 0 0 4px var(--bg); pointer-events:none }
.sup-pip[hidden] { display:none }
.profile-ava-wrap { position:relative; display:block; width:64px; height:64px; margin:0 auto 6px; border-radius:50% }
.profile-ava-wrap .profile-ava { margin:0 }
.profile-ava-wrap.look-frame { outline-offset:5px }
.profile-ava-wrap .sup-pip { width:22px; height:22px; font-size:13px; inset-inline-end:-3px; bottom:-2px; box-shadow:0 0 0 2px var(--pink), 0 0 0 4px var(--bg2) }
.profile-sup { margin-top:2px }
.bava { position:relative; display:block; width:34px; height:34px; border-radius:50% }
.bava .sup-pip { width:14px; height:14px; font-size:9px; inset-inline-end:-4px; bottom:-3px; box-shadow:0 0 0 2px var(--pink), 0 0 0 3px var(--card) }
.sup-heart { margin-inline-start:6px; color:#ff8fb1; font-style:normal; font-size:12px }
.chest-warn { color:var(--amber) }
.chest-stage.chest-reveal { height:124px }
.chest-stage > .look-prev { z-index:1 }
/* The Chests pane is its own scroller, like #earnBox, which steps aside while it shows (the Earn screen itself never scrolls). A sibling
   rule, not :has(), so iPhones before iOS 15.4 lay it out too. */
#chestsBox:not([hidden]) ~ #earnBox { display:none }
#chestsBox { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; justify-content:flex-start; gap:0; padding-bottom:12px }
#chestsBox>* { flex:none }
/* Release 20: the Earn markup's wrapper adds no box (its panes stay earnBox's flex items), and the Sponsored card (platform.js nativeTry)
   after the Rewards list: nothing while no provider is trying; laid out but invisible (no height, no space) while one loads, so its
   frame has a real size for the ad SDK; shown only once that provider said its ad is ready. */
#earnMain { display:contents }
.earn-sponsored { display:none; flex:none }
.earn-sponsored.loading:not([hidden]),.earn-sponsored.filled:not([hidden]) { display:grid; gap:8px; margin-top:6px }
.earn-sponsored.loading:not(.filled) { height:0; margin:0; overflow:hidden; visibility:hidden; pointer-events:none }
.earn-sponsored .sect-h { margin:0 2px }
.sponsored-card { border-radius:14px; overflow:hidden; background:var(--card2); box-shadow:inset 0 0 0 1px var(--line) }
.sponsored-frame { display:block; width:100%; height:96px; border:0; background:transparent }
/* Release 18 (Tim, 9 Nov 2026: "Highlight violet blue animation on buttons where something can be collected/action"): a button with
   something to collect or start right now (data-collect, set only when the tap can pay; and the header's hot chips) shows a violet-blue
   ring that pulses. The ring is an inset ::after whose opacity animates (cheap, and no parent can clip it); the button keeps its own
   shadow and colours; the header stays still while a grid is played; reduced motion gets a still ring (Grok review). */
@keyframes collectRing { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
button[data-collect]:not(:disabled), .today button.hot { position: relative }
button[data-collect]:not(:disabled)::after, .today button.hot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(150,122,255,.95), inset 0 0 12px rgba(96,128,255,.6);
  animation: collectRing 1.6s ease-in-out infinite; will-change: opacity;
}
body.hk-on .today button.hot::after { animation: none; opacity: .7 }
@media (prefers-reduced-motion: reduce) { button[data-collect]:not(:disabled)::after, .today button.hot::after { animation: none; opacity: .9 } }
/* The same ring on the way there: an Earn chip or the Earn tab with something to collect inside. ::before, because the tab's yellow
   to-do dot already uses ::after. */
.chip.has-collect, .nav button.has-collect { position: relative }
.chip.has-collect::before, .nav button.has-collect::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(150,122,255,.95), inset 0 0 12px rgba(96,128,255,.6);
  animation: collectRing 1.6s ease-in-out infinite; will-change: opacity;
}
body.hk-on .nav button.has-collect::before { animation: none; opacity: .7 }
@media (prefers-reduced-motion: reduce) { .chip.has-collect::before, .nav button.has-collect::before { animation: none; opacity: .9 } }
/* Release 19 (Tim, 9 Nov 2026: "build nft after"): Hideout Deeds (game.js "Hideout Deeds"). 21 tiles in three columns, one colour per
   tier, the owner's own deed and its rent on top. The Deeds pane is its own scroller like the Chests pane (sibling rule, no :has()). */
#deedsBox:not([hidden]) ~ #earnBox { display:none }
#deedsBox { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; justify-content:flex-start; gap:0; padding-bottom:12px }
#deedsBox>* { flex:none }
.deed-tile, .deed-stage, .deed-mine { --tier:#d79a5b; --tier-soft:rgba(215,154,91,.55); --tier-bg:rgba(215,154,91,.22) }
.tier-loft { --tier:#3ee6c4; --tier-soft:rgba(62,230,196,.55); --tier-bg:rgba(62,230,196,.2) }
.tier-warehouse { --tier:#9aa7ff; --tier-soft:rgba(154,167,255,.55); --tier-bg:rgba(154,167,255,.2) }
.tier-vault { --tier:#ffd34d; --tier-soft:rgba(255,211,77,.6); --tier-bg:rgba(255,211,77,.2) }
.deed-status { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; margin:2px 0 12px; padding:10px 12px; border-radius:16px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); font-size:13px; font-weight:800 }
.deed-status b { font:400 20px 'Lilita One', Rubik, sans-serif; color:var(--ink); letter-spacing:.02em }
.deed-clock { font-variant-numeric:tabular-nums }
.deed-mine { display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px 12px; align-items:center; margin:0 0 12px; padding:12px; border-radius:18px; background:linear-gradient(135deg, var(--tier-bg), var(--card)); box-shadow:inset 0 0 0 1px var(--tier-soft) }
.deed-mine .dm-ico { font-size:30px; line-height:1; text-align:center }
.deed-mine .dm-txt { min-width:0 }
.deed-mine .dm-txt b { display:block; font:400 18px 'Lilita One', Rubik, sans-serif; letter-spacing:.02em; overflow-wrap:anywhere }
.deed-mine .dm-txt small { display:block; color:var(--muted); font-size:12px; font-weight:800; margin-top:2px }
.deed-mine .btn, .deed-mine .dm-next { grid-column:1 / 3 }
.deed-mine .dm-next { margin:0; color:var(--muted); font-size:13px; font-weight:800 }
.deed-mine .dm-next b { color:var(--ink) }
.deed-why { margin:0 2px 12px; color:var(--amber); font-size:13px; font-weight:800; line-height:1.35 }
.deed-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px }
.deed-tile { display:grid; gap:2px; align-content:start; min-width:0; margin:0; padding:10px 8px; border:0; border-radius:14px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font:inherit; text-align:left }
.deed-tile .dt-n { font:400 18px 'Lilita One', Rubik, sans-serif; color:var(--tier); letter-spacing:.02em }
.deed-tile .dt-tier { font-size:11px; font-weight:800; color:var(--muted); overflow-wrap:anywhere }
.deed-tile .dt-price { font-size:13px; font-weight:900; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.deed-tile .dt-rent { font-size:11px; font-weight:800; color:var(--teal) }
.deed-tile .dt-state { margin-top:4px; font-style:normal; font-size:11.5px; font-weight:900; overflow-wrap:anywhere }
.deed-tile.free { cursor:pointer; box-shadow:inset 0 0 0 1px var(--tier-soft) }
.deed-tile.free .dt-state { color:var(--tier) }
.deed-tile.free:active { transform:translateY(1px) }
.deed-tile.sold { opacity:.62 }
.deed-tile.sold .dt-state { color:var(--muted) }
.deed-tile.mine { background:linear-gradient(160deg, var(--tier-bg), var(--card)); box-shadow:inset 0 0 0 2px var(--tier) }
.deed-tile.mine .dt-state { color:var(--tier) }
.deed-tile:focus-visible { outline:2px solid var(--tier); outline-offset:2px }
.deed-stage { display:grid; justify-items:center; gap:2px; width:max-content; max-width:100%; margin:4px auto 10px; padding:14px 26px; border-radius:18px; background:var(--card2); box-shadow:inset 0 0 0 2px var(--tier) }
.deed-stage .dt-n { font:400 30px 'Lilita One', Rubik, sans-serif; color:var(--tier); letter-spacing:.02em }
.deed-stage .dt-tier { font-size:13px; font-weight:800; color:var(--muted); text-align:center }
.deed-stage.won { animation:deed-pop .5s ease-out }
@keyframes deed-pop { from { transform:scale(.85); opacity:.3 } to { transform:scale(1); opacity:1 } }
@media (prefers-reduced-motion: reduce) { .deed-stage.won { animation:none } }
@media (max-width: 330px) { .deed-grid { grid-template-columns:repeat(2, minmax(0,1fr)) } }