:root{--ink: #0b110d;--panel: #121d16;--panel-2: #1a2a20;--line: #2b4435;--felt: #0d7a3e;--felt-deep: #08532a;--gold: #f4c20d;--gold-deep: #8a6a00;--bone: #f3ead0;--bone-shade: #d6c8a0;--hibiscus: #e0413a;--wood: #5a3318;--text: #f4efe0;--muted: #a9b8aa;--display: "Bungee", "Arial Black", system-ui, sans-serif;--body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--u: 40px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--body);color:var(--text);line-height:1.45;background:radial-gradient(120% 70% at 50% -10%,#19402a 0%,transparent 62%),var(--ink);background-attachment:fixed;-webkit-tap-highlight-color:transparent}body:before{content:"";position:fixed;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#0a7a3c 0 34%,var(--gold) 34% 67%,#000 67%);z-index:60}button,input{font:inherit}:focus-visible{outline:3px solid var(--gold);outline-offset:2px}h1,h2,p{margin:0}.screen{max-width:460px;margin:0 auto;min-height:100dvh;padding:30px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}.screen.game{max-width:1100px;padding:14px 10px calc(10px + env(safe-area-inset-bottom));gap:10px}.status{text-align:center;font-weight:600}.status.warn{color:var(--gold)}.fine{color:var(--muted);font-size:.875rem;text-align:center}.fine.left{text-align:left}.error{color:#ff9d96;font-weight:600}.empty{padding:22px;border:2px dashed var(--line);border-radius:16px;color:var(--muted)}.h2{font-size:1.6rem;font-weight:800;letter-spacing:-.01em}.btn{min-height:48px;padding:0 22px;border-radius:14px;border:2px solid var(--line);background:var(--panel-2);color:var(--text);font-weight:700;cursor:pointer;transition:transform .08s,background .15s}.btn:hover:not(:disabled){background:#22392b}.btn:active:not(:disabled){transform:translateY(2px)}.btn:disabled{opacity:.55;cursor:default}.btn.wide{width:100%}.btn.small{min-height:42px;padding:0 14px;font-size:.95rem}.btn.primary{font-family:var(--display);font-weight:400;letter-spacing:.02em;background:var(--gold);color:#111;border-color:#111;box-shadow:0 4px 0 var(--gold-deep)}.btn.primary:hover:not(:disabled){background:#ffd42e}.btn.primary:active:not(:disabled){box-shadow:0 1px 0 var(--gold-deep);transform:translateY(3px)}.btn.ghost{background:transparent}.btn.knock{font-family:var(--display);font-weight:400;background:var(--hibiscus);border-color:#111;color:#fff;min-width:190px;box-shadow:0 4px #8c1f1a;animation:knock-pulse 1.1s ease-in-out infinite}.link{background:none;border:0;padding:8px 4px;color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.icon-btn{width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:var(--panel);color:var(--text);font-weight:800;display:grid;place-items:center;cursor:pointer}.chip{margin-left:8px;padding:1px 8px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);font-size:.75rem;font-weight:600;color:var(--muted)}.logo{--u: 34px;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:8px}.logo.small{--u: 22px;flex-direction:row;justify-content:center;gap:14px;padding-top:0}.logo-tile{transform:rotate(-7deg)}.logo-word{font-family:var(--display);font-weight:400;font-size:2.9rem;line-height:1;color:var(--gold);letter-spacing:.02em;text-shadow:0 3px 0 #000,0 0 28px rgba(244,194,13,.25)}.logo.small .logo-word{font-size:1.9rem}.tagline{text-align:center;color:var(--muted);font-size:1.05rem;max-width:30ch;margin:0 auto}.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.875rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.form{display:flex;flex-direction:column;gap:12px}.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}.form input{min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:#0e1812;color:var(--text)}.form input:focus{border-color:var(--gold);outline:none}.hello{text-align:center;font-size:1.1rem}.stats{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats>div{padding:12px 8px;border-radius:14px;background:var(--panel);border:2px solid var(--line);text-align:center}.stats dt{font-size:.8rem;color:var(--muted)}.stats dd{margin:2px 0 0;font-family:var(--display);font-size:1.6rem}.stats dd small{font-family:var(--body);font-size:.8rem;color:var(--muted)}.stats .gold{border-color:var(--gold)}.stats .gold dd{color:var(--gold)}.levels{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.levels legend{padding:0;margin-bottom:8px;font-weight:700}.level{position:relative;display:block;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--panel);cursor:pointer}.level input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;cursor:pointer}.level:focus-within{outline:3px solid var(--gold);outline-offset:2px}.level.on{border-color:var(--gold);background:#1e2d1b}.level-name{display:block;font-weight:800}.level-blurb{display:block;color:var(--muted);font-size:.9rem}.lobby-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px}.page-head{display:flex;align-items:center;gap:12px}.board-table{width:100%;border-collapse:collapse}.board-table th,.board-table td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line)}.board-table th{font-size:.8rem;color:var(--muted);font-weight:600}.board-table .num{text-align:right;font-variant-numeric:tabular-nums}.board-table .gold{color:var(--gold);font-weight:800}.board-table tr.me td{background:#f4c20d1a}.tile{position:relative;flex:none;display:flex;padding:0;border:0;color:#111;font:inherit;border-radius:calc(var(--u) * .24);background:linear-gradient(155deg,#fcf6e2,var(--bone) 48%,var(--bone-shade));box-shadow:inset 0 1px #fff9,inset 0 -2px #00000029,0 calc(var(--u) * .1) calc(var(--u) * .22) #0000008c}.tile.h{width:calc(var(--u) * 2);height:var(--u);flex-direction:row}.tile.v{width:var(--u);height:calc(var(--u) * 2);flex-direction:column}button.tile{cursor:pointer}button.tile:disabled{cursor:default}.half{width:var(--u);height:var(--u);display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr);padding:calc(var(--u) * .15);border-radius:calc(var(--u) * .24)}.half i{display:grid;place-items:center}.half .pip:after{content:"";width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a4a4a,#0a0a0a 68%);box-shadow:0 1px #fff9}.half.glow{background:radial-gradient(circle,#f4c20d80,#f4c20d14 75%);box-shadow:inset 0 0 0 2px var(--gold)}.spine{position:absolute;background:linear-gradient(#0003,#0001)}.tile.h .spine{left:50%;top:14%;bottom:14%;width:2px;transform:translate(-50%)}.tile.v .spine{top:50%;left:14%;right:14%;height:2px;transform:translateY(-50%)}.spine:after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--u) * .16);height:calc(var(--u) * .16);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#ffe48a,#b8860b)}.tile.back{background-color:#000;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' preserveAspectRatio='none'%3E%3Crect width='20' height='40' fill='%23050505'/%3E%3Cpolygon points='0,0 20,0 10,20' fill='%230a7a3c'/%3E%3Cpolygon points='0,40 20,40 10,20' fill='%230a7a3c'/%3E%3Cpath d='M0 0L20 40M20 0L0 40' stroke='%23f4c20d' stroke-width='3.4'/%3E%3C/svg%3E");background-size:100% 100%}.hud{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.hud-actions{display:flex;gap:6px}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:6px 12px;border-radius:16px;background:#060b08;border:2px solid var(--line)}.tally{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"label n" "marks marks";align-items:baseline;column-gap:8px}.tally:last-child{justify-items:end;grid-template-columns:1fr auto;grid-template-areas:"n label" "marks marks"}.tally-label{grid-area:label;font-weight:700;color:var(--muted);font-size:.9rem}.tally-n{grid-area:n;font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--gold)}.marks{grid-area:marks;display:flex;gap:4px;margin-top:4px}.mark{flex:none;width:11px;height:11px;border-radius:50%;border:2px solid var(--line)}.mark.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px #f4c20d99}.gamenum{font-weight:700;font-size:.85rem;color:var(--muted);text-align:center}.felt{--u: 15px;flex:1 1 auto;display:grid;grid-template-columns:1fr 1.2fr 1fr;grid-template-areas:"left top right" "board board board";grid-template-rows:auto 1fr;gap:10px 6px;padding:12px 8px 14px;border:10px solid transparent;border-radius:26px;background:linear-gradient(to top right,transparent calc(50% - 1.5px),rgba(244,194,13,.1) calc(50% - 1.5px),rgba(244,194,13,.1) calc(50% + 1.5px),transparent calc(50% + 1.5px)) padding-box,linear-gradient(to bottom right,transparent calc(50% - 1.5px),rgba(244,194,13,.1) calc(50% - 1.5px),rgba(244,194,13,.1) calc(50% + 1.5px),transparent calc(50% + 1.5px)) padding-box,radial-gradient(ellipse at 50% 45%,var(--felt),var(--felt-deep) 85%) padding-box,linear-gradient(135deg,#7a4825,#3a1f0e 45%,var(--wood)) border-box;box-shadow:inset 0 0 40px #00000073,0 10px 30px #00000080}.seat{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.seat-left{grid-area:left}.seat-top{grid-area:top}.seat-right{grid-area:right}.seat-id{display:flex;align-items:center;gap:8px;min-width:0}.avatar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);background:#0b140e;color:var(--gold);border:2px solid rgba(244,194,13,.45)}.seat.active .avatar{border-color:var(--gold);box-shadow:0 0 0 3px #f4c20d59,0 0 18px #f4c20da6;animation:breathe 1.5s ease-in-out infinite}.seat-name{display:flex;flex-direction:column;font-weight:800;font-size:.95rem;line-height:1.1;text-shadow:0 1px 2px #000a}.seat-name small{font-weight:500;font-size:.72rem;color:#d3e6d4}.seat-tiles{display:flex;align-items:center}.seat-tiles .tile.back{margin-left:calc(var(--u) * -.42);box-shadow:0 1px 3px #0009}.seat-tiles .tile.back:first-child{margin-left:0}.seat-count{margin-left:8px;font-weight:800;font-size:.85rem;text-shadow:0 1px 2px #000a}.bubble{position:absolute;top:calc(100% - 2px);left:50%;transform:translate(-50%);z-index:8;padding:5px 12px;border-radius:14px;background:var(--bone);color:#111;font-weight:700;font-size:.85rem;white-space:nowrap;box-shadow:0 4px 10px #00000080;animation:pop .22s ease-out}.bubble:before{content:"";position:absolute;left:50%;top:-6px;transform:translate(-50%);border:6px solid transparent;border-top:0;border-bottom-color:var(--bone)}.board-wrap{grid-area:board;min-height:190px;display:flex}.game[data-shake="0"] .board-wrap.hit{animation:hit-a .24s ease-out}.game[data-shake="1"] .board-wrap.hit{animation:hit-b .24s ease-out}.board{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.board-row{display:flex;justify-content:center;align-items:center;gap:4px;min-height:calc(var(--u) * 2 + 4px)}.board-empty{color:#d3e6d4;font-weight:600;text-align:center;text-shadow:0 1px 2px #000a}.board-ends{display:flex;gap:8px;margin-bottom:4px}.endchip{padding:2px 10px;border-radius:99px;background:#00000073;border:1px solid rgba(244,194,13,.5);font-size:.78rem;font-weight:600}.endchip b{color:var(--gold);font-family:var(--display);font-weight:400;margin-left:4px}.tile.slam{animation:slam .42s cubic-bezier(.2,.9,.25,1.1) both;z-index:3}.tile.slam:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:inherit;border:2px solid var(--gold);opacity:0;animation:ring .55s .2s ease-out;pointer-events:none}.controls{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.endpick{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-weight:700}.hand{--u: min(48px, calc((100vw - 64px) / 7));display:flex;justify-content:center;align-items:flex-end;gap:6px;min-height:calc(var(--u) * 2 + 30px);padding-top:22px}.hand-tile{transition:transform .15s,filter .2s,box-shadow .2s}.hand-tile.playable{transform:translateY(-10px);box-shadow:0 0 0 3px var(--gold),0 8px 16px #0000008c}.hand-tile.playable:hover{transform:translateY(-16px)}.hand-tile.dim{filter:brightness(.55) saturate(.6)}.hand-tile.selected{transform:translateY(-22px);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--gold),0 12px 20px #0009}.hand-tile.wobble{animation:wobble .35s}@media (min-width: 880px){.felt{--u: 19px;grid-template-columns:190px minmax(0,1fr) 190px;grid-template-rows:auto minmax(300px,1fr);grid-template-areas:". top ." "left board right";padding:18px 16px 22px}.seat-left,.seat-right{align-self:center;flex-direction:column}.hand{--u: 54px}.avatar{width:42px;height:42px}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:16px;overflow:auto;background:#040906cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .25s ease-out}.card{position:relative;width:min(440px,100%);padding:30px 20px 22px;border-radius:22px;background:var(--panel);border:2px solid var(--line);display:flex;flex-direction:column;gap:14px;overflow:hidden;box-shadow:0 20px 60px #0009;animation:rise .3s cubic-bezier(.2,.9,.3,1.2)}.card:before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:linear-gradient(90deg,#0a7a3c 0 34%,var(--gold) 34% 67%,#000 67%)}.banner{font-family:var(--display);font-weight:400;font-size:2.3rem;line-height:1.05;text-align:center;color:var(--gold);text-shadow:0 3px 0 #000}.card.lost .banner{color:#f6c9c5}.lede{text-align:center;color:#d9e4d9}.row{display:flex;flex-direction:column;gap:10px}.reveal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.reveal li{--u: 11px;display:grid;grid-template-columns:5.2em 1fr 2.2em;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--panel-2);border:2px solid transparent}.reveal li.winner{border-color:var(--gold)}.reveal .who{font-weight:700;font-size:.9rem}.reveal .mini{display:flex;flex-wrap:wrap;gap:4px}.reveal em{color:var(--muted);font-size:.85rem}.reveal .total{text-align:right;font-family:var(--display)}.reveal .total.low{color:var(--gold)}.sixzero{--u: 40px;display:flex;justify-content:center}.hero-tile{transform:rotate(-6deg);animation:hero .7s .1s cubic-bezier(.2,.9,.3,1.3) both}.card.shutout.won .banner{font-size:3rem}.rules ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:55}.confetti span{position:absolute;top:-20px;border-radius:2px;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes slam{0%{transform:translate(var(--fx, 0),var(--fy, 90px)) scale(1.55) rotate(-9deg);opacity:0}50%{opacity:1}76%{transform:translate(0) scale(.93) rotate(0)}to{transform:none}}@keyframes ring{0%{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.5)}}@keyframes hit-a{30%{transform:translateY(3px)}60%{transform:translateY(-1px)}}@keyframes hit-b{30%{transform:translateY(3px)}60%{transform:translateY(-1px)}}@keyframes breathe{50%{box-shadow:0 0 0 5px #f4c20d33,0 0 26px #f4c20dcc}}@keyframes knock-pulse{50%{box-shadow:0 4px #8c1f1a,0 0 0 6px #e0413a59}}@keyframes pop{0%{opacity:0;transform:translate(-50%) scale(.8)}}@keyframes wobble{20%{transform:translateY(-4px) rotate(-5deg)}60%{transform:translateY(-4px) rotate(5deg)}}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(24px) scale(.96)}}@keyframes hero{0%{opacity:0;transform:translateY(-40px) rotate(-30deg) scale(1.6)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.confetti{display:none}}
