:root{--ink:#1B2F24;--cream:#FFF6E0;--red:#E0483C;--red-d:#9E2A22;--gold:#FFC93C;--sky:#7DBFE8}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sky);font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
canvas#g{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab}
canvas#g.dragging{cursor:grabbing}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

/* ---------- chips / HUD ---------- */
.hud{position:fixed;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:max(12px,env(safe-area-inset-top)) 14px 0;pointer-events:none}
.hud-l,.hud-r{display:flex;gap:8px;align-items:center;pointer-events:auto}
.chip{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:16px;border:3px solid var(--ink);background:linear-gradient(180deg,#FFFBEF,#FFE9B8);box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff;font:800 16px Outfit,sans-serif;white-space:nowrap}
.chip.icon{width:46px;padding:0;justify-content:center;font-size:20px}
.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.chip small{font:700 11px 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.chip.lvl{flex-direction:column;gap:0;justify-content:center;align-items:flex-start;line-height:1.05;padding:0 14px}
.chip.lvl b{font:400 20px 'Lilita One',sans-serif}
.chip.score{flex-direction:column;gap:0;justify-content:center;align-items:flex-end;line-height:1.05}
.chip.score b{font:400 22px 'Lilita One',sans-serif;min-width:70px;text-align:right}

.queue{position:fixed;left:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:4;display:flex;gap:6px;align-items:flex-end;pointer-events:none;padding:8px 12px;border-radius:20px;background:rgba(27,47,36,.35);backdrop-filter:blur(4px)}
.queue img{width:38px;height:38px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.3));transition:transform .3s}
.queue img.next{width:54px;height:54px;animation:qbob 1.2s ease-in-out infinite}
@keyframes qbob{50%{transform:translateY(-5px)}}
.hint{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;padding:10px 18px;border-radius:99px;background:rgba(27,47,36,.85);color:var(--cream);font:700 14px 'DM Sans',sans-serif;pointer-events:none;transition:opacity .4s;white-space:nowrap}
.toast{position:fixed;left:50%;top:92px;transform:translate(-50%,0) scale(.8);z-index:4;font:400 34px 'Lilita One',sans-serif;color:#fff;-webkit-text-stroke:2px var(--ink);text-shadow:0 4px 0 var(--ink);pointer-events:none;opacity:0;transition:opacity .2s,transform .25s cubic-bezier(.2,1.6,.4,1)}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
.banner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);z-index:4;font:400 clamp(40px,9vw,84px)/1 'Lilita One',sans-serif;color:#FFE27A;-webkit-text-stroke:3px var(--ink);text-shadow:0 6px 0 var(--ink);pointer-events:none;opacity:0;text-align:center;transition:opacity .3s,transform .45s cubic-bezier(.2,1.6,.4,1)}
.banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner small{display:block;font-size:.34em;color:#fff;-webkit-text-stroke:1.5px var(--ink);margin-top:10px}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:6;display:grid;place-items:center;padding:16px}
.title{background:radial-gradient(1200px 700px at 50% 30%,rgba(255,255,255,.35),transparent 60%),linear-gradient(180deg,rgba(125,191,232,.2),rgba(27,47,36,.25))}
.title-inner{text-align:center}
.cast{display:flex;justify-content:center;gap:clamp(4px,1.5vw,14px);margin-bottom:8px}
.cast img{width:clamp(48px,9vw,86px);height:clamp(48px,9vw,86px);filter:drop-shadow(0 8px 6px rgba(0,0,0,.25));animation:hop 1.6s ease-in-out infinite}
.cast img:nth-child(2){animation-delay:-.25s}.cast img:nth-child(3){animation-delay:-.5s}.cast img:nth-child(4){animation-delay:-.75s}.cast img:nth-child(5){animation-delay:-1s}.cast img:nth-child(6){animation-delay:-1.25s}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-18px) scale(.96,1.04)}55%{transform:translateY(0) scale(1.06,.94)}}
.logo{margin:0;display:flex;flex-direction:column;align-items:center;font:400 clamp(64px,15vw,150px)/.9 'Lilita One',sans-serif;letter-spacing:.01em}
.logo span{color:#FFD447;-webkit-text-stroke:clamp(4px,.9vw,8px) var(--ink);paint-order:stroke fill;text-shadow:0 clamp(6px,1.2vw,12px) 0 var(--ink),0 18px 30px rgba(0,0,0,.25);transform:rotate(-3deg)}
.logo span:last-child{color:var(--red);transform:rotate(2deg);margin-top:-.08em}
.tag{margin:18px 0 22px;font:700 clamp(15px,2.4vw,20px) 'DM Sans',sans-serif;color:#fff;text-shadow:0 2px 0 rgba(27,47,36,.6)}
.small{margin:16px 0 0;font:700 13px 'DM Sans',sans-serif;color:#fff;opacity:.9;text-shadow:0 1px 0 rgba(27,47,36,.6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:120px;height:54px;padding:0 24px;border-radius:18px;border:3px solid var(--ink);background:linear-gradient(180deg,#FF6A5C,var(--red));color:#fff;font:400 22px 'Lilita One',sans-serif;letter-spacing:.02em;text-shadow:0 2px 0 var(--red-d);box-shadow:0 5px 0 var(--ink),inset 0 3px 0 rgba(255,255,255,.35);text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.big{height:70px;min-width:220px;font-size:32px;border-radius:22px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.05)}}
.btn.soft{background:linear-gradient(180deg,#FFFBEF,#FFE3A6);color:var(--ink);text-shadow:none}

.select{background:rgba(27,47,36,.35);backdrop-filter:blur(6px)}
.panel{width:min(760px,96vw);max-height:92vh;overflow:auto;padding:20px;border-radius:28px;border:3px solid var(--ink);background:linear-gradient(180deg,#FFFBEF,#FFEDC4);box-shadow:0 8px 0 var(--ink)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.panel-head h2{margin:0;font:400 30px 'Lilita One',sans-serif}
.worlds{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.world{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;border:3px solid var(--ink);background:#fff;font:800 14px Outfit,sans-serif;box-shadow:0 3px 0 var(--ink)}
.world.on{background:var(--ink);color:#FFE27A}
.world.locked{opacity:.45}
.world i{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.lv{position:relative;aspect-ratio:1;border-radius:18px;border:3px solid var(--ink);background:linear-gradient(180deg,#8FD16A,#5DAA3F);box-shadow:0 5px 0 var(--ink),inset 0 3px 0 rgba(255,255,255,.35);color:#fff;font:400 clamp(22px,4vw,32px) 'Lilita One',sans-serif;-webkit-text-stroke:1.5px var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lv:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.lv .st{font-size:13px;-webkit-text-stroke:0;letter-spacing:1px}
.lv .st .off{filter:grayscale(1);opacity:.35}
.lv.locked{background:linear-gradient(180deg,#B7B2A6,#8E897E);cursor:default}
.lv.locked::after{content:"🔒";position:absolute;font-size:22px;-webkit-text-stroke:0}
.lv.locked span{visibility:hidden}
.lv.boss{background:linear-gradient(180deg,#FF7A66,#C8392E)}
.powers{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:16px;font-size:13px;opacity:.8}
.powers b{font-family:Outfit,sans-serif}

.end{background:rgba(27,47,36,.35);backdrop-filter:blur(4px)}
.card{width:min(440px,94vw);padding:26px 22px 20px;border-radius:30px;border:3px solid var(--ink);background:linear-gradient(180deg,#FFFBEF,#FFEDC4);box-shadow:0 8px 0 var(--ink);text-align:center;animation:cardIn .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes cardIn{from{transform:scale(.6) translateY(40px);opacity:0}}
.card-kicker{margin:0;font:800 13px Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.card h2{margin:4px 0 10px;font:400 44px/1 'Lilita One',sans-serif;color:#FFD447;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.card h2.lose{color:#9FB0C0}
.stars{display:flex;justify-content:center;gap:8px;margin:6px 0 10px}
.stars i{width:66px;height:66px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='%23E9E0CB' stroke='%231B2F24' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.stars i:nth-child(2){transform:translateY(-12px) scale(1.15)}
.stars i.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='%23FFC93C' stroke='%231B2F24' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");animation:star .5s cubic-bezier(.2,1.8,.4,1) both}
@keyframes star{from{transform:scale(0) rotate(-90deg)}}
.end-score{margin:0 0 16px}
.end-score b{display:block;font:400 40px 'Lilita One',sans-serif}
.end-score small{font:700 13px 'DM Sans',sans-serif;opacity:.65}
.card-btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.card-btns .btn{min-width:0;flex:1;font-size:19px;height:50px;padding:0 12px}
.share{display:inline-block;margin-top:14px;font:700 14px 'DM Sans',sans-serif;color:var(--ink);text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(5,1fr);gap:7px}
  .chip{height:42px;border-radius:14px}.chip.icon{width:42px}
  .chip.score b{min-width:54px;font-size:19px}
  .hint{font-size:12.5px}
}

/* ---------- title rows, toggles, wallet ---------- */
.title-row{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.chip.on{background:linear-gradient(180deg,#E8FFD9,#B8EE98)}
.head-r{display:flex;gap:6px;align-items:center}
/* ---------- leaderboard ---------- */
.board{background:rgba(27,47,36,.35);backdrop-filter:blur(6px);z-index:7}
.lb-pool{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#1B2F24;color:#FFF6E0;font:600 15px 'DM Sans',sans-serif;text-align:center}
.lb-pool b{color:#FFE27A}
.lb-me{margin-bottom:12px;padding:14px;border-radius:16px;border:2.5px dashed rgba(27,47,36,.35);text-align:center}
.me-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;font-size:14px}
.me-row b{font-family:Outfit,sans-serif}
.me-claims{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.me-hint{margin:8px 0 0;font-size:13px;opacity:.7}
.pill{padding:5px 10px;border-radius:99px;border:2px solid #1B2F24;font:700 12px 'DM Sans',sans-serif;background:#fff}
.pill.paid{background:#C9F2B4}.pill.pending{background:#FFE9A8}.pill.waitlist{background:#E6E0F5}.pill.rejected{background:#F4C2BB}
.pill a{color:inherit}
.link{background:none;border:0;padding:0;font:700 13px 'DM Sans',sans-serif;text-decoration:underline;cursor:pointer}
.lb-list table{width:100%;border-collapse:collapse;font-size:14px}
.lb-list th{text-align:left;font:800 11px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.6;padding:6px 8px}
.lb-list td{padding:9px 8px;border-top:1.5px solid rgba(27,47,36,.12);font-weight:600}
.lb-list td:last-child,.lb-list th:last-child{text-align:right;font-family:Outfit,sans-serif}
.lb-list tr.me td{background:#FFF1B8}
.lb-empty{text-align:center;opacity:.7;margin:20px 0}
.lb-rules{margin:14px 0 0;font-size:12px;opacity:.65;line-height:1.5;text-align:center}
.lb-note{position:fixed;left:50%;top:120px;transform:translateX(-50%);z-index:5;padding:10px 16px;border-radius:14px;background:#1B2F24;color:#FFF6E0;font:600 14px 'DM Sans',sans-serif;max-width:92vw;text-align:center}
.reward{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#fff;border:2px solid #1B2F24;font-size:14px;line-height:1.45;cursor:pointer}
.reward.win{background:#E8FFD9;cursor:default}

/* ---------- top bar: CA + X ---------- */
.topbar{position:fixed;left:0;right:0;top:0;z-index:9;height:36px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:10px;background:#1B2F24;color:#FFF6E0;font:600 13px 'DM Sans',sans-serif}
.tb-ca{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:inherit;font:500 12.5px 'IBM Plex Mono',ui-monospace,monospace;cursor:pointer}
.tb-ca:disabled{cursor:default;opacity:.85}
.tb-lbl{padding:1px 6px;border:1px solid rgba(255,246,224,.45);border-radius:5px;font:700 11px 'DM Sans',sans-serif;letter-spacing:.1em}
.tb-x{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:8px;background:#000;color:#fff;text-decoration:none;font:700 12.5px 'DM Sans',sans-serif}
.tb-x:hover{background:#222}
.hud{padding-top:calc(max(12px,env(safe-area-inset-top)) + 36px)}
.screen{padding-top:52px}
.toast{top:128px}.lb-note{top:156px}
@media (max-width:420px){.tb-x span{display:none}}