:root{--table:#1a2366;--table-deep:#0e1440;--china:#fff8ea;--china-2:#efe3c8;--ink:#14183a;--muted:#5d6187;--on-table:#eef0ff;--on-table-muted:#a9b0e6;--line:#dccdaa;--accent:#2348c8;--sun:#ffc23d;--ember:#ff5a3c;--leaf:#2f9e55;--hard:5px 5px 0 var(--table-deep);--t:min(7.8vw, 40px);--pad:10px;--display:"Lilita One", "Arial Black", sans-serif;--body:"Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--table);overflow-x:hidden}body{color:var(--on-table);font:16px/1.4 var(--body);touch-action:manipulation;background-color:var(--table);min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'%3E%3Ccircle cx='36' cy='24' r='10'/%3E%3Ccircle cx='48' cy='36' r='10'/%3E%3Ccircle cx='36' cy='48' r='10'/%3E%3Ccircle cx='24' cy='36' r='10'/%3E%3Cpath d='M0 0L12 12M72 0L60 12M0 72L12 60M72 72L60 60'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(at 50% 0,#2a37a0 0%,#0000 60%);background-attachment:fixed;margin:0;overflow-x:hidden}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:3px solid var(--sun);outline-offset:2px}h1,h2{font-family:var(--display);letter-spacing:.01em;margin:0;font-weight:400}h2{margin:18px 0 8px;font-size:1.2rem}.sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}[hidden]{display:none!important}.game-wrap,.board,.scores,.factories,.center,.sheet,.floor,.row,.score-card{-webkit-user-select:none;user-select:none}.banner{z-index:30;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;background:var(--ember);color:#fff;text-align:center;font-weight:700;position:fixed;top:0;left:0;right:0}.toast{left:50%;bottom:calc(110px + env(safe-area-inset-bottom));z-index:40;background:var(--ink);color:#fff;text-align:center;border:3px solid var(--sun);width:max-content;max-width:calc(100vw - 32px);box-shadow:4px 4px 0 var(--table-deep);border-radius:14px;padding:10px 18px;font-weight:600;animation:.25s cubic-bezier(.3,1.6,.5,1) toast;position:fixed;transform:translate(-50%)rotate(-1.5deg)}.center-note{text-align:center;color:var(--on-table-muted);margin-top:40vh}.primary,.secondary,.cancel{border:3px solid var(--ink);width:100%;min-height:52px;font:1.2rem/1 var(--display);letter-spacing:.02em;border-radius:14px;padding:0 20px;transition:transform 80ms,box-shadow 80ms;position:relative}.primary{background:var(--sun);color:var(--ink);box-shadow:0 5px 0 var(--ink)}.secondary{background:var(--china);color:var(--ink);box-shadow:0 5px 0 var(--ink)}.primary:active:not(:disabled),.secondary:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.primary:disabled{background:var(--china-2);color:var(--muted);box-shadow:0 5px 0 var(--muted);border-color:var(--muted)}.cancel{background:var(--china);width:auto;min-width:44px;min-height:44px;color:var(--ink);box-shadow:0 3px 0 var(--ink);padding:0 14px;font-size:1rem}.cancel:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.home,.lobby,.end{flex-direction:column;gap:14px;max-width:440px;margin:0 auto;padding:24px 16px 32px;display:flex}.logo{aspect-ratio:33/10;background:var(--china);width:min(84vw,330px);height:auto;box-shadow:6px 6px 0 var(--sun), 6px 6px 0 3px var(--ink);border-radius:18px;margin:12px auto 0;padding:10px 14px;display:block;transform:rotate(-3deg)}.tagline{text-align:center;color:var(--on-table-muted);margin:6px 0 4px}.card{color:var(--ink);background:var(--china);border:3px solid var(--ink);box-shadow:var(--hard);border-radius:16px;flex-direction:column;gap:12px;padding:14px;display:flex}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;display:flex}.field input{border:3px solid var(--line);width:100%;min-height:50px;color:var(--ink);font:600 1.15rem var(--body);background:#fff;border-radius:12px;padding:0 12px;box-shadow:inset 0 3px #14183a14}.field input:focus{border-color:var(--accent);outline:none}.field input.code-input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font:1.3rem var(--display)}.or{text-align:center;color:var(--on-table-muted);margin:2px 0}.label{text-align:center;color:var(--on-table-muted);margin:0}.room-code{text-align:center;font:clamp(2.6rem, 17vw, 4.2rem)/1.1 var(--display);letter-spacing:.14em;color:var(--ink);background:var(--sun);border:3px solid var(--ink);box-shadow:var(--hard);-webkit-user-select:all;user-select:all;border-radius:16px;padding:12px 0 10px .14em;transform:rotate(-2deg)}.players{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.players li{min-height:48px;color:var(--ink);background:var(--china);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--table-deep);border-radius:12px;align-items:center;gap:10px;padding:0 14px;animation:.35s cubic-bezier(.3,1.4,.5,1) backwards deal;display:flex}.pname{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:700;overflow:hidden}.tag{background:var(--table);color:var(--on-table);border-radius:999px;padding:3px 9px;font-size:.75rem;font-weight:700}.tag.me{background:var(--sun);color:var(--ink)}.tag.win{background:var(--ink);color:var(--sun)}.hint{text-align:center;color:var(--on-table-muted);margin:0}.dot{background:#9aa0c8;border-radius:50%;flex:none;width:10px;height:10px;display:inline-block;box-shadow:0 0 0 2px #ffffffb3}.dot.on{background:#3fd06a}.game-wrap{max-width:1100px;margin:0 auto;padding-bottom:16px}.game-wrap.has-sheet{padding-bottom:104px}.status{z-index:10;min-height:48px;padding:6px var(--pad);background:var(--table-deep);color:var(--on-table);justify-content:space-between;align-items:center;gap:8px;margin:0;display:flex;position:sticky;top:0;box-shadow:0 3px #00000040}.status.myturn{color:var(--ink);background-color:var(--sun);background-image:repeating-linear-gradient(115deg,#0000 0 14px,#14183a1a 14px 22px);background-position:100%;background-repeat:no-repeat;background-size:120px 100%}.st-text{align-items:center;gap:8px;min-width:0;display:flex}.round{font:.85rem/1.2 var(--display);letter-spacing:.03em;background:var(--china);color:var(--ink);border-radius:8px;flex:none;padding:3px 9px 2px;transform:skew(-10deg)}.turn-text{font:1.15rem/1.1 var(--display);text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em;overflow:hidden}.st-right{flex:none;align-items:center;gap:2px;display:flex}.bag{opacity:.8;white-space:nowrap;font-size:.8rem;font-weight:600}.mute{background:0 0;border:0;min-width:44px;min-height:40px;padding:0 6px;font-size:1.15rem;line-height:1}.col-left,.col-right{padding:0 var(--pad);min-width:0}.scores{grid-template-columns:repeat(var(--n,2), minmax(0, 1fr));gap:8px;padding:10px 4px 6px;display:grid}.score-card{--m:min(1.55vw, 8px);isolation:isolate;min-width:0;min-height:44px;color:var(--ink);text-align:left;background:0 0;border:0;flex-direction:column;gap:3px;padding:6px 8px 7px;transition:transform .25s cubic-bezier(.3,1.5,.5,1);display:flex;position:relative}.score-card:before{content:"";z-index:-1;background:var(--china);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--table-deep);border-radius:10px;position:absolute;inset:0;transform:skew(-6deg)}.score-card.turn{transform:translateY(-4px)rotate(-1.5deg)}.score-card.turn:before{background:var(--sun)}.score-card.open:before{border-bottom-width:6px}.sc-top{align-items:center;gap:5px;min-width:0;font-size:.8rem;display:flex}.sc-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:700;overflow:hidden}.score-card.me .sc-name{color:var(--accent)}.sc-first{flex:none;width:16px;height:16px}.sc-mid{align-items:baseline;gap:5px;display:flex}.sc-score{font:1.6rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}.sc-delta{font:.85rem/1 var(--display);color:#fff;border-radius:6px;padding:1px 5px;transform:skew(-8deg)}.sc-delta.gain{background:var(--leaf)}.sc-delta.loss{background:var(--ember)}.thumb{flex-direction:column;align-items:center;gap:2px;display:flex}.tboard{gap:3px;display:flex}.tl,.tw{grid-template-columns:repeat(5, var(--m));gap:1px;display:grid}.tf{grid-template-columns:repeat(7, var(--m));gap:1px;display:grid}.m{width:var(--m);height:var(--m);border-radius:2px;display:block}.m.v{visibility:hidden}.m.e{background:#14183a1f}.m.g{opacity:.2}.m.first-dot{background:var(--ink);box-shadow:inset 0 0 0 1px var(--sun);border-radius:50%}.c-C{background:#1f4e9c}.c-A{background:#e0a526}.c-T{background:#b5482e}.c-V{background:#3f7a4a}.c-M{background:#efe6d2;box-shadow:inset 0 0 0 1px #b8a888}.tf .m.c-C,.tf .m.c-A,.tf .m.c-T,.tf .m.c-V,.tf .m.c-M{outline:1px solid var(--ember);outline-offset:-1px}.minis{flex-direction:column;gap:10px;display:flex}.table{perspective:700px;padding-top:4px}.table>.factories,.table>.center{transform-origin:50% 100%;transform:rotateX(9deg)}.factories{grid-template-columns:repeat(var(--cols,5), 1fr);gap:8px;margin:6px 0 12px;display:grid}.factory{aspect-ratio:1;background:radial-gradient(circle at 35% 30%, #fffdf6, var(--china) 55%, var(--china-2));border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink), 0 10px 12px #05081e73;border-radius:30%;grid-template-columns:1fr 1fr;align-content:stretch;gap:2px;padding:5px;transition:opacity .3s,transform .3s,box-shadow .3s;display:grid}.factory.empty{opacity:.35;box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.tile-btn{background:0 0;border:0;border-radius:9px;min-width:0;min-height:0;margin:0;padding:0;transition:transform .15s cubic-bezier(.3,1.6,.5,1);display:block;position:relative}.tile-btn .tile{filter:drop-shadow(0 2px #0a0e328c);width:100%;height:100%;display:block}.tile-btn:not(:disabled):active{transform:translateY(2px)}.tile-btn.sel{z-index:1;animation:.5s ease-in-out wobble;transform:translateY(-6px)scale(1.08)}.tile-btn.sel .tile{filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 8px 6px #05081e80)}.tile-btn.faded{opacity:.45}.center{background:#ffffff0f;border:3px dashed #eef0ff59;border-radius:18px;flex-wrap:wrap;align-content:flex-start;gap:6px;min-height:56px;padding:8px 10px;display:flex}.center .tile-btn,.center .first{flex:none;width:min(9vw,44px);height:min(9vw,44px)}.center .first{padding:2px}.first .tile{filter:drop-shadow(0 3px #00000080);width:100%;height:100%;display:block}.empty-note{color:var(--on-table-muted);align-self:center;margin:0 auto}.mine{margin-top:14px}.board{color:var(--ink);background:var(--china);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--table-deep);border-radius:16px;padding:8px 4px 10px}.status.myturn+.game .mine .board{box-shadow:6px 6px 0 var(--sun), 6px 6px 0 3px var(--ink)}.bhead{justify-content:space-between;align-items:baseline;padding:0 10px 6px;display:flex}.bname{font:1.15rem/1.1 var(--display);text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.bscore{font:1.25rem/1 var(--display);color:var(--accent);white-space:nowrap}.rows{flex-direction:column;display:flex}.row{width:100%;min-height:max(44px, calc(var(--t) + 8px));text-align:inherit;background:0 0;border:3px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:3vw;margin:0;padding:0 4px;transition:transform .15s,background-color .15s;display:flex}.pl,.wl{grid-template-columns:repeat(5, var(--t));gap:3px;display:grid}.cell{width:var(--t);height:var(--t);display:block}.cell .tile{width:100%;height:100%;display:block}.cell.slot{background:var(--china-2);box-shadow:inset 0 3px 0 #14183a24, inset 0 0 0 1px var(--line);border-radius:24%}.cell.slot .tile,.wl .tile:not(.ghost){filter:drop-shadow(0 2px #0a0e3280)}.cell.void{visibility:hidden}.tile.ghost{opacity:.22;filter:saturate(.6)}.row.valid,.floor.valid{border-color:var(--ink);box-shadow:0 4px 0 var(--ink);background:#ffe9ad;animation:1.1s ease-in-out infinite beckon}.row.valid:active,.floor.valid:active{box-shadow:0 1px 0 var(--ink);animation:none;transform:translateY(3px)}.row.dim{opacity:.3}.floor{background:repeating-linear-gradient(135deg,#ff5a3c12 0 8px,#ff5a3c24 8px 16px);border:3px solid #0000;border-radius:12px;width:100%;min-height:58px;margin:8px 0 0;padding:5px 4px 3px;display:block}.fslots{justify-content:space-around;display:flex}.fslot{flex-direction:column;align-items:center;gap:2px;display:flex}.pen{font:.8rem/1 var(--display);color:var(--ember)}.mini{--t:min(4.8vw, 22px);box-shadow:4px 4px 0 var(--table-deep);animation:.3s cubic-bezier(.3,1.4,.5,1) deal}.mini .row{min-height:calc(var(--t) + 4px)}.mini .floor{min-height:0}.mini .pen{font-size:.62rem}.mini .bname{font-size:1rem}.sheet{z-index:20;padding:22px 14px calc(12px + env(safe-area-inset-bottom));color:var(--ink);background:var(--china);clip-path:polygon(0 12px,100% 0,100% 100%,0 100%);box-shadow:inset 0 18px 0 -12px var(--sun);align-items:center;gap:12px;animation:.22s cubic-bezier(.3,1.3,.5,1) up;display:flex;position:fixed;bottom:0;left:0;right:0}.sheet>.tile{width:46px;height:46px;filter:drop-shadow(0 3px 0 var(--ink));flex:none;transform:rotate(-6deg)}.sheet-text{flex-direction:column;flex:1;min-width:0;line-height:1.2;display:flex}.sheet-text b{font:1.3rem/1.1 var(--display)}.sheet-text span{color:var(--muted);font-size:.82rem}.end h1{text-align:center;color:var(--sun);text-shadow:3px 3px 0 var(--ink);font-size:2.6rem;transform:rotate(-3deg)}.results{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.result{color:var(--ink);background:var(--china);border:3px solid var(--ink);box-shadow:var(--hard);border-radius:14px;align-items:center;gap:12px;padding:10px 14px;animation:.5s cubic-bezier(.2,1.2,.3,1) backwards rise;display:flex}.result.win{background:var(--sun);animation-name:rise,glow;animation-duration:.5s,1.6s;animation-iteration-count:1,2;rotate:-1.5deg;scale:1.03}.rank{font:1.8rem/1 var(--display);text-align:center;flex:none;width:1.6em}.rbody{flex:1;min-width:0}.rtop{align-items:center;gap:8px;display:flex}.rtop .bscore{color:var(--ink);font-size:1.5rem}.rbonus{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.chip-pt{background:#14183a1a;border-radius:6px;padding:2px 7px;font-size:.75rem;font-weight:600}.end-mosaic{flex-wrap:wrap;justify-content:center;gap:5px;margin-top:8px;display:flex}.end-mosaic .tile{filter:drop-shadow(0 3px #00000080);width:28px;height:28px;animation:.55s cubic-bezier(.3,1.5,.5,1) backwards tumble}#fx{pointer-events:none;z-index:25;position:fixed;inset:0;overflow:hidden}#fx .fly{filter:drop-shadow(0 3px #0a0e3299)drop-shadow(0 10px 8px #00000059);will-change:transform;display:block;position:absolute}.popup{font:1.7rem/1 var(--display);white-space:nowrap;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--ink);position:absolute}.popup.gain{color:#6ff09a}.popup.loss{color:var(--ember)}.tile.arrive{animation:.22s ease-out .48s backwards arrive}.pop-in{animation:.4s cubic-bezier(.3,1.6,.5,1) backwards popin}.land{animation:.35s ease-out land}.cutin{height:0;position:absolute;top:40%;left:0;right:0}.cutin:before,.cutin-band{position:absolute;left:-15%;right:-15%}.cutin:before{content:"";background:var(--ink);height:120px;animation:1.4s cubic-bezier(.2,.9,.2,1) both cutin-back;top:-60px;rotate:-8deg}.cutin-band{background:var(--sun);height:88px;color:var(--ink);box-shadow:0 5px 0 var(--ink), 0 -5px 0 var(--ink);justify-content:center;align-items:center;gap:14px;animation:1.4s cubic-bezier(.2,.9,.2,1) both cutin;display:flex;top:-44px;rotate:-5deg}.cutin-text{font:clamp(2.4rem, 13vw, 3.6rem)/1 var(--display);text-shadow:3px 3px #fff;white-space:nowrap;transform:skew(-12deg)}.cutin-band .tile{width:58px;height:58px;filter:drop-shadow(0 4px 0 var(--ink));flex:none;rotate:-12deg}@keyframes cutin{0%{translate:120%}16%{translate:0}78%{translate:-3%}to{translate:-130%}}@keyframes cutin-back{0%{translate:-120%}18%{translate:0}78%{translate:3%}to{translate:130%}}@keyframes toast{0%{opacity:0;transform:translate(-50%)rotate(-1.5deg)scale(.7)}}@keyframes up{0%{transform:translateY(100%)}}@keyframes deal{0%{opacity:0;transform:translateY(-14px)rotate(-3deg)}}@keyframes wobble{25%{rotate:-6deg}55%{rotate:4deg}80%{rotate:-2deg}}@keyframes beckon{50%{box-shadow:0 7px 0 var(--ink);translate:0 -3px}}@keyframes arrive{0%{opacity:0;transform:scale(.6)}}@keyframes popin{0%{opacity:0;transform:translateY(-14px)scale(1.6)rotate(-20deg)}60%{opacity:1}}@keyframes land{40%{transform:scale(1.05)}}@keyframes rise{0%{opacity:0;transform:translateY(24px)rotate(2deg)}}@keyframes tumble{0%{opacity:0;transform:translateY(-40px)rotate(-120deg)scale(.4)}}@keyframes glow{50%{box-shadow:5px 5px 0 var(--table-deep), 0 0 0 8px #ffc23d59}}@media (width>=768px){:root{--t:clamp(26px, 3.2vw, 40px);--pad:16px}.game{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:18px;display:grid}.mine{margin-top:10px}.row{gap:16px}.mini{--t:20px}.score-card{--m:7px}.center .tile-btn,.center .first{width:40px;height:40px}.game-wrap.has-sheet{padding-bottom:96px}.sheet{justify-content:center}.sheet-text{flex:0 auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.table>.factories,.table>.center{transform:none}}.danger{border:3px solid var(--ink);background:var(--ember);color:#fff;width:100%;min-height:52px;font:1.2rem/1 var(--display);letter-spacing:.02em;box-shadow:0 5px 0 var(--ink);border-radius:14px;padding:0 20px;transition:transform 80ms,box-shadow 80ms}.danger:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.link-danger{color:#ffb3a3;text-underline-offset:3px;background:0 0;border:0;align-self:center;min-height:44px;padding:0 16px;font-weight:700;text-decoration:underline}.dlg{width:min(92vw,380px);color:var(--ink);background:var(--china);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--sun), 6px 6px 0 3px var(--ink);border-radius:18px;padding:20px 18px 18px;animation:.25s cubic-bezier(.3,1.4,.5,1) deal;rotate:-1deg}.dlg[open]{flex-direction:column;gap:12px;display:flex}.dlg::backdrop{background:#0e1440b3}.dlg h2{margin:0;font-size:1.6rem}.dlg p{color:var(--muted);margin:0 0 4px}.score-card.gone{opacity:.55}.sc-gone{background:var(--ink);color:var(--china);border-radius:5px;flex:none;padding:1px 5px;font-size:.65rem;font-weight:700}
