:root{--umber-900: #140d09;--umber-800: #261812;--panel: rgba(38, 24, 18, .84);--panel-solid: #2b1b14;--panel-edge: rgba(246, 196, 69, .3);--ink: #fdf6e3;--ink-dim: rgba(253, 246, 227, .65);--ink-faint: rgba(253, 246, 227, .35);--gold: #f6c445;--gold-deep: #b7801a;--crimson: #b0332c;--crimson-deep: #7a1f1a;--good: #4cd38a;--bad: #ff5a4e;--warn: #f2a33a;--font-ui: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display: "Cinzel", "Trajan Pro", Georgia, serif;--r-s: 10px;--r-m: 14px;--r-l: 20px;--gap: 12px;--edge: 12px;--shadow: 0 8px 28px rgba(0, 0, 0, .35);--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--btn-strike: 88px;--btn-dash: 64px;--btn-doct: 52px}html,body{height:100%;margin:0;overflow:hidden;background:var(--umber-900);color:var(--ink);font-family:var(--font-ui);overscroll-behavior:none;-webkit-text-size-adjust:100%}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;position:fixed;inset:0}[hidden]{display:none!important}#game{position:fixed;inset:0;display:block;touch-action:none;background:var(--umber-900)}button{font-family:var(--font-ui);cursor:pointer;color:var(--ink);touch-action:manipulation}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}kbd{font:inherit}.pnl{background:var(--panel);border:1.5px solid var(--panel-edge);border-radius:var(--r-m);box-shadow:var(--shadow)}.bar{position:relative;height:8px;background:#00000073;border-radius:99px;overflow:hidden}.bar i{position:absolute;inset:0 auto 0 0;display:block;border-radius:99px;transition:width .15s}.bar.hp{height:16px}.bar.hp i{background:linear-gradient(#d64a3f,var(--crimson))}.bar.hp.low i{background:linear-gradient(#ff7a6e,var(--bad))}.bar.hp span{position:absolute;inset:0;font-size:11px;font-weight:600;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}.bar.nx i{background:var(--gold)}#me{position:fixed;top:calc(var(--safe-t) + var(--edge));left:calc(var(--safe-l) + var(--edge));width:236px;padding:10px 12px;display:grid;gap:7px;pointer-events:none}#me .nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px}#me .nm b{color:var(--gold);font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#me .nm span{font-size:12px;font-weight:600;color:var(--ink-dim);letter-spacing:.04em;text-transform:uppercase}#goldRow{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-dim);font-variant-numeric:tabular-nums}#goldRow .gold{display:flex;align-items:center;gap:5px}#goldRow b{font-weight:700;font-size:19px;color:var(--gold)}#goldRow em{font-style:normal;font-size:12px}.coin{width:16px;height:16px}.coin circle:first-child{fill:var(--gold);stroke:var(--gold-deep);stroke-width:1.5}.coin circle:last-child{fill:none;stroke:var(--gold-deep);stroke-width:1}#upk.warn{color:var(--warn);font-weight:600}#comp{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}#comp div{display:grid;justify-items:center;gap:0;padding:3px 0;border-radius:var(--r-s);background:#00000047}#comp b{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}#comp span{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}#comp div.lock{opacity:.4}#nextWrap{display:grid;gap:4px}#nextT{font-size:12px;color:var(--ink-dim);display:flex;justify-content:space-between;gap:6px}#nextT b{color:var(--ink);font-weight:600}#tierNext{font-size:11px;color:var(--ink-dim);text-align:center}#doct{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;position:fixed;z-index:2;top:calc(var(--safe-t) + var(--edge) + var(--me-h, 200px) + 6px);left:calc(var(--safe-l) + var(--edge));width:236px}#doct button{position:relative;background:var(--panel);border:1.5px solid var(--panel-edge);border-radius:99px;padding:6px 0 5px;font-size:13px;font-weight:600;box-shadow:0 3px #00000059}#doct button kbd{position:absolute;top:-6px;left:-2px;font-size:9px;background:var(--umber-800);border-radius:6px;padding:0 4px;color:var(--ink-dim)}#doct button.on{background:var(--gold);color:#2a1a0c;border-color:var(--gold);box-shadow:0 3px 0 var(--gold-deep)}body.touch #doct button kbd{display:none}#rightCol{position:fixed;top:calc(var(--safe-t) + var(--edge));right:calc(var(--safe-r) + var(--edge));display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}#board{width:210px;padding:8px 10px;display:grid;gap:5px}#board h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;justify-content:space-between;align-items:baseline}#board h3 span{font-family:var(--font-ui);font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink-dim);font-weight:500}#rows{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:13px}#rows li{display:grid;grid-template-columns:16px 10px 1fr auto;gap:6px;align-items:center;font-variant-numeric:tabular-nums;padding:1px 4px;border-radius:6px}#rows li.me{background:#f6c44533;color:var(--gold);font-weight:600}#rows li em{font-style:normal;color:var(--ink-dim);font-size:11px}#rows li i{width:10px;height:10px;border-radius:50%;display:block;box-shadow:0 0 0 1px #0006}#rows li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#rows li.sep{display:block;height:1px;padding:0;background:var(--panel-edge)}#mini{width:150px;height:150px;border:1.5px solid var(--panel-edge);border-radius:var(--r-m);background:#4f8c49;box-shadow:var(--shadow)}body:not(.compact) #mini{position:fixed;left:calc(var(--safe-l) + var(--edge));bottom:calc(var(--safe-b) + var(--edge))}#feed{position:fixed;top:calc(var(--safe-t) + 14px);left:50%;transform:translate(-50%);display:grid;gap:3px;justify-items:center;pointer-events:none;width:min(440px,calc(100vw - 540px))}#feed div{font-size:13px;background:#140d09b3;padding:2px 10px;border-radius:99px;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:opacity .5s}#feed b{font-weight:600}#toast{position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3.4vw,32px);letter-spacing:.06em;color:var(--gold);text-shadow:0 2px 10px #000,0 0 2px #000;text-align:center;pointer-events:none;opacity:0;transition:opacity .35s;width:min(90vw,680px);text-wrap:balance}#toast small{display:block;font-family:var(--font-ui);font-weight:500;font-size:max(13px,.5em);letter-spacing:.02em;color:var(--ink);margin-top:4px}#toast.show{opacity:1}#warnBan,#protBan{position:fixed;left:50%;bottom:calc(var(--safe-b) + 48px);transform:translate(-50%);font-weight:600;font-size:14px;letter-spacing:.04em;padding:4px 12px;border-radius:99px;background:#140d09b8;pointer-events:none;white-space:nowrap}#warnBan{color:var(--warn)}#protBan{color:var(--gold);bottom:calc(var(--safe-b) + 82px)}#hint{position:fixed;left:50%;bottom:calc(var(--safe-b) + 14px);transform:translate(-50%);font-size:12px;color:var(--ink-dim);text-shadow:0 1px 2px #000;pointer-events:none;white-space:nowrap}#hint b{color:var(--ink);font-weight:600}#touch{position:fixed;right:calc(var(--safe-r) + 16px);bottom:calc(var(--safe-b) + 20px);display:none;gap:14px;align-items:flex-end;z-index:3}body.touch #touch{display:flex}#touch button{border-radius:50%;border:2.5px solid var(--gold);background:#261812b8;font-weight:700;font-size:14px;letter-spacing:.04em;touch-action:none;position:relative;overflow:hidden;box-shadow:0 4px #00000059}#touch button.down{transform:translateY(2px);box-shadow:0 2px #00000059;background:#b0332cbf}#bStrike{width:var(--btn-strike);height:var(--btn-strike);font-size:16px!important}#bDash{width:var(--btn-dash);height:var(--btn-dash);margin-bottom:36px}#bDash:after,#bStrike:after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.62) calc(var(--cd, 0) * 360deg),transparent 0);pointer-events:none}#stick{position:fixed;width:124px;height:124px;border-radius:50%;border:2.5px solid var(--panel-edge);background:#0000002e;pointer-events:none;transform:translate(-50%,-50%);z-index:3}#stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#f6c44599;box-shadow:0 2px 0 var(--gold-deep)}body.touch #hint{display:none}#adPill{position:fixed;left:0;top:0;z-index:4;display:inline-block;padding:10px 18px;min-height:44px;border-radius:99px;background:var(--gold);color:#2a1a0c;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;box-shadow:0 4px 0 var(--gold-deep),var(--shadow);touch-action:manipulation;animation:pillIn .18s ease-out}#adPill:active{transform:translateY(2px)}@keyframes pillIn{0%{opacity:0}to{opacity:1}}body.compact #feed,body.compact #tierNext,body.compact #nextWrap{display:none}body.compact #me{width:172px;padding:7px 9px;gap:5px;border-radius:var(--r-s)}body.compact #me .nm b{font-size:14px}body.compact #me .nm span{font-size:10px}body.compact .bar.hp{height:13px}body.compact .bar.hp span{font-size:10px;line-height:13px}body.compact #goldRow b{font-size:16px}body.compact #goldRow{font-size:11px}body.compact #comp b{font-size:13px}body.compact #comp span{font-size:9px}body.compact #board{width:140px;padding:6px 8px;border-radius:var(--r-s)}body.compact #board h3{font-size:11px}body.compact #rows{font-size:12px}body.compact #rows li{grid-template-columns:12px 8px 1fr auto;gap:4px}body.compact #rows li i{width:8px;height:8px}body.compact #mini{width:96px;height:96px;border-radius:var(--r-s)}body.compact #warnBan{bottom:auto;top:calc(var(--safe-t) + 150px)}body.compact #protBan{bottom:auto;top:calc(var(--safe-t) + 180px)}body.touch #doct{width:auto;gap:8px}body.touch #doct button{width:var(--btn-doct);height:var(--btn-doct);border-radius:50%;padding:0;font-size:12px}body.touch.portrait #doct{grid-template-columns:1fr;top:auto;left:auto;right:calc(var(--safe-r) + 16px + (var(--btn-strike) - var(--btn-doct)) / 2);bottom:calc(var(--safe-b) + 20px + var(--btn-strike) + 18px)}body.touch.landscape #doct{grid-template-columns:repeat(4,var(--btn-doct));top:calc(var(--safe-t) + 10px);left:50%;transform:translate(-50%)}body.touch.landscape.compact{--btn-strike: 80px;--btn-dash: 58px;--btn-doct: 48px}body.touch.landscape.compact #bDash{margin-bottom:26px}body.touch.landscape.compact #mini{width:84px;height:84px}body.touch.landscape.compact #warnBan{top:calc(var(--safe-t) + 70px)}body.touch.landscape.compact #protBan{top:calc(var(--safe-t) + 100px)}@media(max-height:420px){body.compact #board #rows li:nth-child(n+4):not(.me):not(.sep){display:none}}#screen{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:10;overflow-y:auto;touch-action:pan-y;background:radial-gradient(ellipse at center,#140d0980,#0c0805e6);padding:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 16px)}.panel{width:min(660px,100%);display:grid;gap:clamp(8px,1.8vh,16px);text-align:center;margin:auto}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}.panel h1{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,min(13vw,10vh),88px);letter-spacing:.12em;margin:0;color:var(--gold);line-height:1;text-shadow:0 4px 0 var(--crimson-deep),0 8px 24px rgba(0,0,0,.5)}.panel h1.logo{display:grid;justify-items:center}.logo .emblem{width:.72em;height:.72em;margin-bottom:.12em;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}.logo small{font-size:max(16px,.36em);font-weight:700;color:var(--ink);letter-spacing:.62em;padding-left:.62em;margin-top:.14em;text-shadow:0 3px 12px rgba(0,0,0,.55)}.panel h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,7vw,44px);letter-spacing:.06em;margin:0;color:var(--gold);text-wrap:balance}.panel p{margin:0 auto;max-width:54ch;line-height:1.45;font-size:15px}.rule{height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;text-align:left}.ctrl div{border-radius:var(--r-m);padding:8px 12px;background:#0000004d;border:1.5px solid var(--panel-edge)}.ctrl h3{margin:0 0 6px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}.ctrl ul{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:13px;color:var(--ink-dim);line-height:1.3}.ctrl b{color:var(--ink);font-weight:600}.muster{display:grid;gap:clamp(6px,1.3vh,12px);justify-items:center}.muster label.lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:-4px}.muster label.lbl[for=nameIn]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.muster input{font:inherit;font-size:17px;font-weight:600;background:#00000061;color:var(--ink);border:1.5px solid var(--panel-edge);border-radius:99px;padding:9px 16px;width:min(280px,100%);text-align:center;user-select:text;-webkit-user-select:text}.pickd{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}@media(max-width:420px){.pickd{display:grid;grid-template-columns:repeat(2,minmax(0,136px))}}.pickd button{background:#00000052;border:1.5px solid var(--panel-edge);border-radius:99px;padding:8px 14px;font-size:15px;font-weight:600;min-height:44px;box-shadow:0 3px #00000059}.pickd button.on{background:var(--gold);color:#2a1a0c;border-color:var(--gold);box-shadow:0 3px 0 var(--gold-deep)}.swatches{display:grid;grid-template-columns:repeat(5,38px);gap:8px;justify-content:center}@media(min-width:460px){.swatches{grid-template-columns:repeat(10,36px);gap:7px}.swatches button{width:36px!important;height:36px!important}}.swatches button{width:38px;height:38px;border-radius:50%;border:3px solid rgba(0,0,0,.35);padding:0;box-shadow:0 3px #00000059}.swatches button.on{border-color:var(--gold);box-shadow:0 0 0 3px #f6c44559,0 3px 0 var(--gold-deep)}.go{justify-self:center;background:var(--gold);color:#2a1a0c;border:0;border-radius:99px;padding:12px 36px;margin-top:2px;font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.1em;box-shadow:0 4px 0 var(--gold-deep),0 10px 24px #00000059;min-height:50px}.go:hover{filter:brightness(1.06)}.go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-deep)}.go[disabled]{opacity:.55;cursor:default}.stats{display:flex;justify-content:center;gap:clamp(12px,4vw,26px);font-variant-numeric:tabular-nums}@media(max-width:420px){.stats strong{font-size:24px!important}.stats span{font-size:10px;letter-spacing:.06em}}.stats div{display:grid;gap:2px}.stats strong{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--ink)}.stats span{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}.wait{font-size:15px;color:var(--ink-dim)}.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--panel-edge);border-top-color:var(--gold);margin:0 auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}body.compact .ctrl{display:none}body.compact .panel{gap:12px}body.compact.landscape .panel h1{font-size:44px}body.compact.landscape .panel p{display:none}body.compact.landscape .panel{gap:9px}body.compact.landscape .swatches{grid-template-columns:repeat(10,36px);gap:7px}body.compact.landscape .swatches button{width:36px;height:36px}body.compact.landscape .stats strong{font-size:24px}@media(max-height:820px){.ctrl{display:none}}@media(max-height:640px){.panel p.intro,.rule,.logo .emblem{display:none}}body.compact.landscape .logo .emblem{display:none}@media(max-height:560px){.eyebrow{display:none}.panel h2{font-size:26px}.panel p{font-size:14px}}@media(max-height:520px){.panel p{display:none}.panel h2{font-size:22px}.stats strong{font-size:20px!important}}@media(max-height:440px){.panel h1{font-size:36px}.muster label.lbl{display:none}.stats strong{font-size:22px}.stats span{font-size:10px}.pickd button{min-height:40px;padding:6px 12px;font-size:14px}.go{min-height:46px;padding:10px 30px;font-size:17px}}body:not(.playing) #touch,body:not(.playing) #stick{display:none!important}@media(prefers-reduced-motion:reduce){#toast,#feed div,.bar i{transition:none}.spin{animation:none}}
