:root{--bg: #050506;--card: #121215;--card-2: #18181c;--line: #2a2a30;--gold: #ffc72c;--gold-2: #f5b414;--gold-deep: #c98d0c;--gold-glow: rgba(255, 190, 40, .45);--text: #f6f4ee;--muted: #a3a3ab;--dim: #6e6e78;--ok: #3ddc84;--bad: #ff5a64;--font: "Segoe UI Variable Text", "Segoe UI", system-ui, Arial, sans-serif;--display: "Segoe UI Variable Display", "Segoe UI", system-ui, Arial, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0}html,body,#root{height:100%}html,body{position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}body.phone .app{height:100dvh}body.phone .screen{padding-top:max(10px,env(safe-area-inset-top))}.loading{display:grid;place-items:center;height:100%;color:var(--muted)}.app{position:relative;height:100%;display:flex;flex-direction:column;background:radial-gradient(120% 60% at 50% 0%,#121214 0%,var(--bg) 60%)}.screen{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:0 16px 108px}.screen::-webkit-scrollbar{width:0}.window-strip{height:22px;flex:none;display:flex;justify-content:flex-end;-webkit-app-region:drag}.window-strip button{-webkit-app-region:no-drag;width:38px;border:0;background:none;color:var(--dim);display:grid;place-items:center}.window-strip button:hover{color:var(--text);background:#1b1b20}.window-strip button.close:hover{background:#c42b1c;color:#fff}.home-header{display:flex;align-items:center;justify-content:space-between;padding:0 2px 10px}.logo{display:flex;align-items:center;gap:8px}.logo-words{display:flex;flex-direction:column;align-items:center;line-height:1}.logo-paaaws{font-family:var(--display);font-weight:900;font-size:34px;letter-spacing:.01em;background:linear-gradient(180deg,#ffe07a,#f2b114);-webkit-background-clip:text;background-clip:text;color:transparent}.logo-paaaws sup{font-size:11px;color:var(--gold);-webkit-text-fill-color:var(--gold);vertical-align:top;position:relative;top:2px;margin-left:1px}.logo-pack{margin-top:3px;font-size:14px;font-weight:700;letter-spacing:.62em;padding-left:.62em;color:var(--gold)}.home-header-btns{display:flex;gap:10px}.round-btn{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(180deg,#1b1b1f,#0d0d10);color:var(--gold);display:grid;place-items:center;box-shadow:0 6px 14px #00000080}.dot-badge{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--bad)}.conn-card{position:relative;display:flex;align-items:stretch;min-height:168px;border-radius:22px;padding:12px;background:linear-gradient(135deg,#1a1a1e,#0c0c0e 70%);border:1px solid var(--line);overflow:hidden;box-shadow:0 10px 30px #0009}.conn-info{position:relative;z-index:2;align-self:center;width:168px;display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:#0a0a0cc7;border:1px solid #26262c}.conn-status{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--dim)}.status-dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}.conn-name{font-size:16.5px;letter-spacing:.03em;color:#e9e7e1}.conn-battery{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}.battery{position:relative;width:26px;height:13px;border:1.6px solid #e8e8e8;border-radius:3px;padding:1.5px}.battery:after{content:"";position:absolute;right:-4px;top:3.5px;width:2px;height:4px;background:#e8e8e8;border-radius:0 1px 1px 0}.battery i{display:block;height:100%;background:#f2f2f2;border-radius:1px}.conn-btn{margin-top:8px;height:46px;border-radius:999px;border:1.8px solid var(--gold);background:#ffc72c0f;color:var(--gold);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 14px #ffbe282e,inset 0 0 10px #ffbe2814}.conn-btn:hover:not(:disabled){background:#ffc72c24}.conn-btn:disabled{opacity:.6;cursor:default}.bag-art{position:absolute;right:2px;top:50%;transform:translateY(-50%);height:104%;aspect-ratio:220 / 230}.bag-svg{position:absolute;inset:0;width:100%;height:100%}.bag-screen{position:absolute;left:23.64%;top:34.78%;width:43.64%;height:41.74%;border-radius:5px;overflow:hidden}.led{position:relative;background:#000;overflow:hidden}.led img{display:block;width:100%;height:100%;image-rendering:pixelated}.led-grid{position:absolute;inset:0;background-image:radial-gradient(circle at center,transparent 55%,rgba(0,0,0,.55) 62%);background-size:6px 6px;pointer-events:none}.bag-screen .led{width:100%;height:100%}.bag-screen .led-grid{background-size:3px 3px}.led-off{width:100%;height:100%;background:#07070a}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:13px 6px 11px;min-height:112px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#19191d,#0f0f12);color:var(--text);box-shadow:0 6px 16px #00000073;transition:border-color .15s,box-shadow .15s}.tile:hover{border-color:#4a4130}.tile.lit{border:2px solid var(--gold);box-shadow:0 0 18px var(--gold-glow),inset 0 0 14px #ffbe281f}.tile-icon{width:52px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--gold);border:1.6px solid var(--gold);background:#0b0b0d;box-shadow:inset 0 0 10px #ffbe281f}.tile:nth-child(2) .tile-icon,.tile:nth-child(5) .tile-icon{background:linear-gradient(180deg,#ffd34a,#e9a514);color:#050506;border-color:transparent}.tile:nth-child(5) .tile-icon{background:none;border:0;color:var(--gold);box-shadow:none}.tile:nth-child(3) .tile-icon,.tile:nth-child(4) .tile-icon,.tile:nth-child(6) .tile-icon,.tile:nth-child(8) .tile-icon,.tile:nth-child(9) .tile-icon{border:0;background:none;box-shadow:none}.tile:nth-child(4) .tile-icon svg{width:34px;height:34px}.tile strong{font-size:15.5px;font-weight:700;margin-top:2px}.tile small{font-size:12.5px;color:var(--muted);line-height:1.25}.brightness{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px 18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#17171b,#0e0e11)}.sun{color:var(--gold);display:grid;place-items:center}.brightness-body{flex:1}.brightness-top{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:8px}.brightness-top span{color:var(--muted)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:99px;background:linear-gradient(90deg,var(--gold-2) 0 var(--fill),#2a2a2f var(--fill) 100%);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0009}.bottom-bar{position:absolute;left:12px;right:12px;bottom:12px;height:74px;display:flex;align-items:center;justify-content:space-around;padding:0 8px;border-radius:22px;background:linear-gradient(180deg,#19191d,#0c0c0f);border:1px solid var(--line);box-shadow:0 -4px 24px #000000b3}.bb-item,.bb-edit{border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12.5px;min-width:62px}.bb-item.active{color:var(--gold)}.bb-edit{position:relative;font-size:18px;font-weight:700;color:var(--text);padding:12px;border-radius:14px}.bb-edit.active{background:#1f1f24}.bb-edit.active:after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;border-radius:3px;background:var(--gold)}.bb-paw{width:68px;height:68px;margin-top:-20px;border-radius:50%;border:4px solid #0c0c0f;background:radial-gradient(circle at 50% 35%,#ffd75a,#e6a10f 70%);display:grid;place-items:center;box-shadow:0 0 22px var(--gold-glow),0 6px 14px #000000b3}.bb-paw:active{transform:scale(.96)}.page{display:flex;flex-direction:column;gap:12px;padding-top:2px}.page-header{display:flex;align-items:center;gap:8px;padding-bottom:4px}.page-header h1{flex:1;font-family:var(--display);font-size:24px;font-weight:800;color:var(--gold)}.page-header-right{min-width:40px;display:flex;justify-content:flex-end}.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;flex:none}.text-btn{border:0;background:none;color:var(--gold);font-weight:650}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}.label{font-size:13px;font-weight:650;color:var(--muted)}.note{font-size:13.5px;color:var(--muted);line-height:1.4}.empty{padding:30px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px}.ok-text{color:var(--ok)}.bad-text{color:var(--bad)}.grow{flex:1;min-width:0}.row{display:flex;gap:10px;align-items:center}.row>.btn{flex:1}.row.tight{gap:6px;width:100%}.times{color:var(--muted)}input:not([type=range]):not([type=file]):not([type=checkbox]),textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0d0d10;outline:none;-webkit-user-select:text;user-select:text}input:focus,textarea:focus{border-color:var(--gold)}textarea{resize:none;font-size:17px}.btn{height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover:not(:disabled){border-color:#4a4a52}.btn:disabled{opacity:.45;cursor:default}.btn.gold{background:linear-gradient(180deg,#ffd34a,#e9a514);color:#1a1205;border-color:var(--gold-deep);box-shadow:0 0 14px #ffbe2840}.btn.danger{color:var(--bad)}.btn.small{height:34px;padding:0 10px;font-size:13.5px;border-radius:9px;flex:1}.btn.wide{width:100%}.file-btn{position:relative;overflow:hidden}.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.preview{width:100%;aspect-ratio:1;border-radius:16px;border:2px solid #26262c;box-shadow:0 0 30px #ffbe281f}.preview .led-grid{background-size:1.5625% 1.5625%}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid #333}.swatches button.on{border-color:#fff;box-shadow:0 0 0 2px var(--gold)}.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:#0d0d10;border:1px solid var(--line)}.seg button{flex:1;height:38px;border:0;border-radius:9px;background:none;color:var(--muted);font-weight:650}.seg button.on{background:#222227;color:var(--gold)}.save-send{display:flex;flex-direction:column;gap:10px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}.draw-grid{display:grid;width:100%;border-radius:12px;overflow:hidden;border:2px solid #26262c;background:#000;touch-action:none;cursor:crosshair;gap:1px;background-color:#151518}.draw-grid i{display:block;aspect-ratio:1}.template-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.template-picks button{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:11.5px;color:var(--muted)}.template-picks button.on{border-color:var(--gold);color:var(--gold)}.template-picks .led{aspect-ratio:1;border-radius:6px}.template-picks .led-grid,.pick-strip .led-grid,.design-card .led-grid,.history .led-grid,.steps .led-grid{background-size:3px 3px}.pick-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.pick-strip button{flex:none;width:64px;height:64px;padding:0;border-radius:10px;border:2px solid var(--line);background:#000;overflow:hidden}.pick-strip button.on{border-color:var(--gold)}.pick-strip .led{width:100%;height:100%}.design-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.design-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:12.5px;text-align:center}.design-card .led{width:100%;aspect-ratio:1;border-radius:8px}.design-card>span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.steps,.history,.chars,.device-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.steps li,.history li{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--card);border:1px solid var(--line)}.steps .led,.steps .led-off,.history .led{width:46px;height:46px;border-radius:8px;flex:none}.history small{display:block;font-size:12.5px;margin-top:2px;color:var(--muted)}.history strong{font-size:14.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.secs{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:13px}.secs input{width:58px!important;padding:6px 8px!important}.steps .icon-btn{width:30px;height:30px}.facts{display:flex;flex-direction:column;gap:6px;margin:4px 0}.facts div{display:flex;justify-content:space-between;gap:12px;font-size:14px}.facts dt{color:var(--muted)}.facts dd{margin:0;text-align:right}.chars li{display:flex;flex-direction:column;gap:2px;font-size:12.5px;padding:8px 10px;border-radius:10px;background:#0d0d10}.chars code{font-family:Consolas,monospace;color:var(--gold);word-break:break-all}.chars span{color:var(--muted)}.sheet{position:absolute;inset:0;z-index:20;background:#000000b3;display:flex;align-items:flex-end}.sheet-body{width:100%;max-height:88%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:18px 16px 22px;border-radius:22px 22px 0 0;background:#121215;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}.sheet-body h2{font-size:20px;color:var(--gold)}.device-list button{width:100%;height:52px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-weight:650;text-align:left;padding:0 16px}.device-list button:hover{border-color:var(--gold)}.toasts{position:absolute;left:16px;right:16px;bottom:98px;z-index:30;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{padding:12px 14px;border-radius:12px;background:#1d1d22;border:1px solid var(--line);border-left:4px solid var(--ok);font-size:14px;box-shadow:0 8px 24px #0009}.toast.bad{border-left-color:var(--bad)}.welcome{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:56px 26px 34px;background:radial-gradient(110% 60% at 50% 20%,#1a1508,#050506 65%)}.welcome-skip{position:absolute;top:30px;right:18px;border:0;background:none;color:var(--muted);font-weight:650}.welcome-art{height:230px;width:100%;display:grid;place-items:center;position:relative}.welcome-art .bag-art{position:relative;right:auto;top:auto;transform:none;height:220px}.welcome-icon{width:130px;height:130px;border-radius:32px;display:grid;place-items:center;color:var(--gold);border:2px solid var(--gold);box-shadow:0 0 30px var(--gold-glow),inset 0 0 18px #ffbe281f;background:#0b0b0d}.welcome h2{font-family:var(--display);font-size:26px;font-weight:800;color:var(--gold)}.welcome p{color:#d9d7d0;font-size:16px;line-height:1.5;max-width:340px}.welcome-dots{display:flex;gap:8px;margin-top:auto}.welcome-dots i{width:8px;height:8px;border-radius:50%;background:#3a3a40}.welcome-dots i.on{width:24px;border-radius:4px;background:var(--gold)}.welcome-nav{width:100%}.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 16px}.faq summary{padding:14px 0;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.faq summary:after{content:"+";color:var(--gold);font-size:20px;line-height:1}.faq[open] summary:after{content:"–"}.faq-body{padding-bottom:14px;color:#d9d7d0;font-size:14.5px;line-height:1.5}.faq-body ol,.faq-body ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}.center{text-align:center}.setup{border-color:var(--gold)}.setup-preview{width:72px;height:72px;border-radius:8px;flex:none}.setup-preview .led-grid{background-size:3px 3px}.arcade-head h1{font-family:var(--display);font-size:30px;font-weight:900;letter-spacing:.02em;color:#fff}.arcade-head h1 span{background:linear-gradient(180deg,#ffe07a,#f2b114);-webkit-background-clip:text;background-clip:text;color:transparent}.arcade-head .note{margin-top:4px}.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.game-tile{position:relative;display:flex;flex-direction:column;padding:0;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#19191d,#0f0f12);color:var(--text);text-align:left;box-shadow:0 6px 16px #00000073}.game-tile:not(.soon){border:2px solid var(--gold);box-shadow:0 0 18px var(--gold-glow)}.game-tile .led{width:100%;aspect-ratio:1;border-radius:12px;margin-bottom:6px}.game-tile .led-grid{background-size:4px 4px}.game-tile strong{font-size:16px}.game-tile small{font-size:12.5px;color:var(--muted)}.game-tile em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--gold);margin-top:2px}.game-tile.soon{opacity:.55;cursor:default}.game-tile.soon em{color:var(--muted)}.check-row{display:flex;align-items:center;gap:12px;font-size:14.5px;cursor:pointer}.check-row input{width:22px;height:22px;accent-color:var(--gold);flex:none}.ttt-status{text-align:center;font-size:20px;font-weight:800;color:var(--gold);min-height:28px}.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;border-radius:20px;background:#0b0b0d;border:2px solid var(--gold);box-shadow:0 0 22px var(--gold-glow)}.ttt-cell{aspect-ratio:1;border-radius:14px;border:1px solid var(--line);background:#17171b;font-size:54px;font-weight:900;line-height:1;display:grid;place-items:center;color:var(--text)}.ttt-cell:disabled{cursor:default}.ttt-X{color:#ff4fa3}.ttt-O{color:#8b4dff}.ttt-win{background:#2a2410;border-color:var(--gold)}.mini-led{width:76px;height:76px;border-radius:10px;flex:none}.mini-led .led-grid{background-size:3px 3px}.seg.vertical{flex-direction:column}.seg.vertical button{height:auto;padding:10px 12px;text-align:left}.test-log{list-style:none;padding:0;font-family:Consolas,monospace;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px;max-height:180px;overflow:auto}.game-tile-main{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 10px 12px;border:0;background:none;color:inherit;text-align:left;width:100%}.game-tile-main:disabled{cursor:default}.fav-star{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid #3a3a40;background:#050506cc;color:#a3a3ab;font-size:20px;line-height:1;display:grid;place-items:center;z-index:2;opacity:1}.fav-star.on{color:var(--gold);border-color:var(--gold)}.game-tile.soon .fav-star{opacity:1}.design-card-wrap{position:relative}.design-card-wrap .design-card{width:100%}.design-card-wrap .fav-star{top:12px;right:12px;width:30px;height:30px;font-size:17px}.bag-line.on{color:var(--gold)}.loading-frames{padding:14px;border-radius:14px;border:1px solid var(--gold);background:#15130a;display:flex;flex-direction:column;gap:8px}.loading-frames .bar{height:10px;border-radius:6px;background:#2a2a2f;overflow:hidden}.loading-frames .bar i{display:block;height:100%;background:var(--gold);transition:width .3s}.reaction-pad{height:280px;border-radius:26px;border:2px solid var(--line);background:#111114;color:var(--muted);font-size:34px;font-weight:900;font-family:var(--display)}.reaction-pad.wait{background:#0d0d10;color:#5a5a64}.reaction-pad.go{background:var(--gold);color:#000;border-color:var(--gold)}.reaction-pad.soon{color:var(--bad)}.reaction-pad.result,.reaction-pad.done{color:var(--gold)}.memory-pads{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.memory-pad{aspect-ratio:1;border-radius:24px;border:3px solid var(--pad);background:color-mix(in srgb,var(--pad) 22%,#0b0b0d);opacity:.9}.memory-pad.lit{background:var(--pad);box-shadow:0 0 30px var(--pad);opacity:1}.memory-pad:disabled{cursor:default}.snap-table{display:flex;gap:14px;align-items:center}.snap-card{width:190px;height:190px;border-radius:16px;flex:none;border:2px solid #26262c}.snap-card .led-grid{background-size:3px 3px}.snap-score{flex:1;display:flex;flex-direction:column;gap:10px}.snap-score div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column}.snap-score span{font-size:13px;color:var(--muted)}.snap-score b{font-size:34px;font-family:var(--display);color:var(--gold);line-height:1.1}.snap-btn{height:110px;font-size:40px;font-weight:900;border-radius:24px}.sum{text-align:center;font-family:var(--display);font-size:52px;font-weight:900;color:#fff;padding:18px 0}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choice{height:84px;border-radius:18px;border:2px solid var(--line);background:#17171b;color:#fff;font-size:30px;font-weight:800}.choice.right{border-color:var(--ok);background:#0e2a1a;color:var(--ok)}.choice.wrong{border-color:var(--bad);background:#2a0e12;color:var(--bad)}.screen64{width:100%;aspect-ratio:1;image-rendering:pixelated;border-radius:14px;border:2px solid var(--gold);box-shadow:0 0 22px var(--gold-glow);touch-action:none;display:block}.dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:". u ." "l . r" ". d .";gap:8px;width:240px;margin:0 auto}.dpad button{height:66px;border-radius:16px;border:2px solid var(--gold);background:#17171b;color:var(--gold);font-size:26px}.dpad button:nth-child(1){grid-area:u}.dpad button:nth-child(2){grid-area:l}.dpad button:nth-child(3){grid-area:r}.dpad button:nth-child(4){grid-area:d}.row>.btn.big{flex:1}.sos-btn{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid #ff3b3b;background:radial-gradient(circle at 50% 35%,#ff4d4d,#c40000 75%);color:#fff;font-weight:900;font-size:13px;letter-spacing:.02em;display:grid;place-items:center;box-shadow:0 0 14px #ff282873}.sos-btn.counting{transform:scale(1.08);box-shadow:0 0 22px #ff2828cc}.sos-screen{position:absolute;inset:0;z-index:45;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;gap:12px;padding:34px 16px 22px;background:#1a0000}.sos-head{text-align:center;padding:14px;border-radius:18px;background:#c40000}.sos-head strong{font-family:var(--display);font-size:34px;font-weight:900;letter-spacing:.04em;color:#fff}.sos-head p{color:#ffe2e2;font-size:15px;margin-top:4px}.sos-card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:#2a0606;border:1px solid #5a1010}.sos-card p{color:#ffd6d6}.sos-action{min-height:58px;border-radius:14px;border:2px solid #ff6b6b;background:#3a0a0a;color:#fff;font-size:18px;font-weight:800;padding:0 12px}.sos-action.call{background:#fff;color:#b00000;border-color:#fff}.sos-action.danger{background:#ff2020;border-color:#ff2020}.sos-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sos-note{color:#ffcaca;font-size:13.5px;text-align:center}.sos-stop{margin-top:auto;min-height:86px;border-radius:22px;border:3px solid #fff;background:#000;color:#fff;font-size:30px;font-weight:900;letter-spacing:.06em}.btn.danger-fill{background:#e00000;border-color:#e00000;color:#fff}.sos-info{border-color:#7a1a1a}.sos-info strong{color:#ff5a5a}.sos-link{border-color:#7a1a1a}.cycle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cycle-grid .btn.on{background:linear-gradient(180deg,#ffd34a,#e9a514);color:#1a1205}.msg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.msg-grid .btn{height:auto;min-height:44px;padding:8px;white-space:normal}.contact-row{padding:8px 0;border-bottom:1px solid var(--line)}.home-header-btns{align-items:center}.four-board{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px;border-radius:18px;background:#1d3fb8;box-shadow:0 0 20px #2f7bff59}.four-col{display:flex;flex-direction:column;gap:4px;padding:2px 0;border:0;border-radius:10px;background:none}.four-col:active:not(:disabled){background:#ffffff1f}.four-disc{aspect-ratio:1;border-radius:50%;background:#050506;display:block}.four-disc.d1{background:#ff4fa3}.four-disc.d2{background:#8b4dff}.four-disc.win{box-shadow:0 0 0 3px #fff}.hang-word{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:10px 0}.hang-word span{width:30px;height:40px;border-bottom:3px solid var(--gold);font-size:28px;font-weight:900;text-align:center;color:#fff}.hang-word span.missed{color:var(--bad)}.keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.keys button,.wg-row button{height:46px;border-radius:10px;border:1px solid var(--line);background:#1d1d22;color:#fff;font-weight:800;font-size:17px}.keys button.right,.wg-row button.right{background:#1fa34a;border-color:#1fa34a}.keys button.wrong{background:#111;color:#555}.wg-row button.near{background:#d9a400;border-color:#d9a400;color:#000}.wg-row button.miss{background:#2a2a30;color:#777}.wg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:290px;margin:0 auto}.wg-tile{aspect-ratio:1;display:grid;place-items:center;border:2px solid #2a2a30;border-radius:8px;font-size:26px;font-weight:900;color:#fff}.wg-tile.typed{border-color:#6a6a74}.wg-tile.right{background:#1fa34a;border-color:#1fa34a}.wg-tile.near{background:#d9a400;border-color:#d9a400;color:#000}.wg-tile.miss{background:#3a3a40;border-color:#3a3a40}.wg-keys{display:flex;flex-direction:column;gap:6px}.wg-row{display:flex;gap:4px;justify-content:center}.wg-row button{flex:1;min-width:0;padding:0}.wg-row .wide-key{flex:1.6;font-size:12.5px}.whack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px;border-radius:22px;background:#123d12}.whack-hole{aspect-ratio:1;border-radius:50%;border:0;background:radial-gradient(ellipse at 50% 60%,#050505 55%,#0b2a0b 56%);font-size:46px}.whack-hole.up{background:radial-gradient(ellipse at 50% 60%,#2a2010 55%,#0b2a0b 56%)}.snap-score.row{flex-direction:row}.rps-stage{height:150px;display:grid;place-items:center;font-size:74px;border-radius:22px;background:#111114;border:1px solid var(--line)}.rps-stage small{font-size:18px;color:var(--muted)}.rps-count{font-family:var(--display);font-weight:900;color:var(--gold)}.rps-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.rps-picks button{height:108px;border-radius:20px;border:2px solid var(--gold);background:#17171b;font-size:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}.rps-picks small{font-size:13px;color:var(--muted);text-transform:capitalize}.eight-ball{width:260px;height:260px;margin:10px auto;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#4a4a52,#050506 62%);display:grid;place-items:center;box-shadow:0 12px 40px #000000b3}.eight-ball.shaking{animation:shake .14s linear infinite}@keyframes shake{0%{transform:translate(-4px,2px) rotate(-3deg)}50%{transform:translate(4px,-2px) rotate(3deg)}to{transform:translate(-4px,2px) rotate(-3deg)}}.eight-window{width:132px;height:132px;border-radius:50%;background:#16163a;color:#8fd0ff;display:grid;place-items:center;text-align:center;font-weight:900;font-size:18px;padding:16px;line-height:1.15}.dice-show{height:170px;display:grid;place-items:center;border-radius:22px;background:#111114;border:1px solid var(--line);font-family:var(--display);font-size:54px;font-weight:900;color:#fff;text-align:center}.dice-show.rolling{color:var(--gold)}.pairs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pair-card{aspect-ratio:1;border-radius:12px;border:2px solid #3a3020;background:#1c180c;font-size:26px;display:grid;place-items:center;padding:4px}.pair-card .led{width:100%;height:100%;border-radius:8px}.pair-card .led-grid{background-size:3px 3px}.pair-card.open{border-color:var(--gold)}.pair-card.found{border-color:#1fa34a;opacity:.8}.sea-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:6px;border-radius:14px;background:#04223f}.sea-cell{aspect-ratio:1;border-radius:4px;border:0;background:#0a3a66;color:#fff;font-size:16px;font-weight:900;padding:0}.sea-cell.ship{background:#6a6a74}.sea-cell.miss{background:#0a3a66;color:#9fc7ff}.sea-cell.hit{background:#ff8a1f}.sea-cell.sunk{background:#ff2020}.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.hand-card{width:52px;height:72px;border-radius:9px;border:2px solid #444;background:#f4f4f4;color:#111;font-size:20px;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:.55}.hand-card small{font-size:18px}.hand-card.ok{opacity:1;border-color:var(--gold);box-shadow:0 0 10px var(--gold-glow)}.red-suit{color:#e8142a!important}.suit-pick .btn{flex:1;font-size:30px}.t7-run{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.add-bag{margin-top:10px;background:none;border:0;padding:4px 2px;color:var(--gold);font-weight:700;font-size:14px;text-align:left}.bag-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.bag-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#17171b;color:var(--text);font-size:12.5px}.bag-chip b{color:var(--muted);font-weight:400}.bag-chip.main{border-color:var(--gold);color:var(--gold)}.conn-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:16px;border:1px solid var(--line);background:#121215}.conn-strip .bag-chips{margin-top:0}.conn-strip .seg.small{flex:none}.seg.small button{height:32px;font-size:13px;white-space:nowrap;padding:0 10px}.party-bags{display:flex;flex-direction:column;gap:10px}.party-count strong{display:block;font-size:18px}.party-count small{color:var(--muted);font-size:13px}.party-loading{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--gold);padding:10px 12px;font-size:13.5px;color:var(--gold);background:#15130b}.party-loading i{position:absolute;left:0;bottom:0;height:3px;background:var(--gold);transition:width .3s}.party-tile{padding:10px 10px 12px}.party-tile strong,.party-tile small,.party-tile em{padding:0 2px}.party-tile.on{border-color:var(--gold);box-shadow:0 0 22px var(--gold-glow)}.party-tile.on em{color:var(--gold)}.beacon-row{display:flex;gap:12px;align-items:center}.swatches{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent}.swatch.on{border-color:#fff;box-shadow:0 0 0 2px #000 inset}.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.crew-pic{padding:0;border:1px solid var(--line);border-radius:12px;background:none;overflow:hidden}.crew-pic:disabled{opacity:.5}.crew-pic .led{width:100%;aspect-ratio:1}.soon-card{opacity:.6}@media(prefers-reduced-motion:reduce){.party-loading i{transition:none}}.playing-bar{position:absolute;left:20px;right:20px;bottom:96px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:16px;background:#15130b;border:1px solid var(--gold);box-shadow:0 0 18px var(--gold-glow);z-index:5}.playing-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);flex:none;animation:pulse 1.6s ease-in-out infinite}.playing-name{flex:1;min-width:0;color:var(--gold);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playing-bar button{flex:none;height:34px;padding:0 16px;border-radius:11px;border:0;background:var(--gold);color:#000;font-weight:800}@keyframes pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.playing-dot{animation:none}}.bag-order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.bag-order li{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 8px;border-radius:12px;background:#121215;border:1px solid var(--line)}.bag-no{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--gold);color:#000;font-weight:900;flex:none}.bag-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-mini{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#1a1a1f;color:var(--text);flex:none;font-size:12px}.icon-mini:disabled{opacity:.3}.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.party .card>input{width:100%;margin-bottom:10px;font-size:20px;font-weight:800;letter-spacing:.04em}.battle-list{display:flex;flex-direction:column;gap:8px}.battle-pick{text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#17171b;color:var(--text)}.battle-pick strong{display:block;font-size:16px}.battle-pick small{color:var(--muted)}.battle-pick:not(:disabled):active{border-color:var(--gold)}.battle-pick:disabled{opacity:.45}.battle-status{font-size:19px;font-weight:800;color:var(--gold);text-align:center;margin:6px 0 10px}.battle-status .mark{color:var(--text)}.battle-score{display:flex;justify-content:space-between;color:var(--muted);font-weight:700;margin-bottom:8px}.battle-ttt{margin-bottom:14px}.ttt-cell.p1{color:var(--gold)}.ttt-cell.p2{color:#ff4fa3}.rps-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rps-picks .btn{height:auto;padding:14px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px}.rps-picks .btn span{font-size:34px}.duel{display:grid;grid-template-rows:1fr 1fr;gap:8px;height:46vh;margin-bottom:12px}.duel-half{border-radius:18px;border:2px solid var(--line);background:#121215;color:var(--muted);font-size:20px;font-weight:800;touch-action:manipulation}.duel-half:first-child{transform:rotate(180deg)}.duel.go .duel-half{border-color:#2ee06f;color:#2ee06f}.app:has(.playing-bar) .screen{padding-bottom:170px}.torch-btn.on{color:#fff;background:radial-gradient(circle at 50% 35%,#fff6d8,#e9a514 75%);border-color:#ffd970;box-shadow:0 0 18px #ffd25ab3}.more-settings{margin:4px 0;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}.more-settings>summary{padding:14px 16px;font-weight:700;cursor:pointer;list-style:none;color:var(--muted)}.more-settings>summary:after{content:" ›";color:var(--gold)}.more-settings[open]>summary:after{content:" ⌄"}.more-settings .card{border:0;border-top:1px solid var(--line);border-radius:0}

.conn-actions{display:flex;align-items:center;gap:8px;margin-top:8px}.conn-actions .conn-btn{flex:1;min-width:0;margin-top:0}.conn-actions.two .conn-btn{font-size:14.5px;gap:5px;padding:0 6px}.conn-actions.two .conn-btn svg{display:none}.pw-btn{flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:1px solid #2a2a30;background:radial-gradient(circle at 35% 30%,#2b2b31,#0d0d10 72%);color:#5d5d64;display:grid;place-items:center;box-shadow:0 6px 14px #00000080,inset 0 1px 0 #ffffff14;transition:color .2s,box-shadow .2s,border-color .2s}.pw-btn.on{color:var(--gold);border-color:#ffc72c66;box-shadow:0 0 14px #ffbe2847,0 6px 14px #00000080,inset 0 1px 0 #ffffff14}.pw-btn.on svg{filter:drop-shadow(0 0 4px #ffc72cb3)}.pw-btn:active{transform:scale(.94)}
.conn-info:has(.conn-actions.two){width:188px}
.conn-add{margin-top:6px;height:34px;border-radius:999px;border:1px dashed #ffc72c80;background:transparent;color:var(--gold);font-weight:700;font-size:14px}.conn-add:active{transform:scale(.97)}.conn-add:disabled{opacity:.5}
.tg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-radius:16px;border:1px solid var(--line);background:#121215}.tg-chip{height:32px;max-width:150px;padding:0 12px;border-radius:999px;border:1px solid #34343b;background:#18181c;color:#d6d1c6;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tg-chip.on{background:var(--gold);border-color:var(--gold);color:#111}.tg-reset{margin-left:auto;height:32px;padding:0 12px;border-radius:999px;border:1px dashed #ffc72c80;background:transparent;color:var(--gold);font-weight:700;font-size:13.5px}.tg-chip:active,.tg-reset:active{transform:scale(.96)}
.bb-empty{pointer-events:none;visibility:hidden}.pick-add{flex:none;width:64px;height:64px;border-radius:10px;border:2px dashed #ffc72c80;background:transparent;color:var(--gold);font-size:30px;font-weight:700}.cyc-big{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cyc{height:96px;font-size:22px;font-weight:800;border-radius:18px}.cyc.on{background:var(--gold);color:#111}.cyc-stop{grid-column:1 / -1;background:#3a0a0e;color:#ff5a5a;border-color:#ff2d3d80}.cyc-stop.on{background:#ff2d3d;color:#fff}.cyc-off{background:#18181c}.mb-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:#121215}.mb-name{flex:1;min-width:0;display:flex;flex-direction:column}.mb-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mb-name small{color:var(--muted);font-size:12px}.ft-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ft-pages span{flex:1;text-align:center;font-weight:700;color:var(--muted)}
.fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.fx-grid .btn{padding:0 4px;font-size:13px}

/* Build 025: Program seconds box + now-playing highlight */
.secs input{width:46px!important;text-align:center}
.secs-ok{font-weight:900;font-size:16px;color:var(--muted);border:1px solid var(--line)!important}
.secs-ok.dirty{color:#17110a;background:linear-gradient(130deg,#fff2a2,#d59515)!important;border-color:#f5c248!important;box-shadow:0 0 10px #f5c24888}
.secs-ok.saved{color:#0b2a12;background:#4ade80!important;border-color:#4ade80!important}
.steps li.playing-now{border-color:#f5c248;background:linear-gradient(90deg,#3a2a0c,var(--card));box-shadow:0 0 14px #f5c24866;position:relative}
.steps li.playing-now::before{content:"\25B6  ON";position:absolute;top:-9px;left:10px;font-size:10px;font-weight:900;letter-spacing:.06em;color:#17110a;background:#f5c248;border-radius:6px;padding:1px 6px}

/* Build 026: tap the playing bar to open what's playing */
.playing-name{cursor:pointer}.playing-name::after{content:"  \203A";font-weight:900;opacity:.8}

/* Build 027 */
.ft-hint{margin:6px 2px 10px;font-size:12.5px}
/* ---- Demo mode (Try without a bag) ---- */
.demo-try{border-style:solid;background:#ffc72c14}
.demo-banner{position:fixed;top:0;left:0;right:0;z-index:9998;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;background:#ffc72c;color:#050506;font-weight:800;font-size:13px;letter-spacing:.04em}
.demo-banner[hidden],.demo-bags[hidden]{display:none}
.demo-exit{border:0;border-radius:999px;padding:4px 12px;background:#050506;color:#ffc72c;font-weight:700;font-size:12px}
body.demo-on #root{padding-top:30px}
.demo-bags{position:fixed;right:10px;bottom:96px;z-index:9997;display:flex;gap:8px}
.demo-bag{width:112px;padding:6px;border-radius:14px;background:#0c0c0e;border:1px solid #ffc72c80;box-shadow:0 8px 24px #000c;color:#fff;font-size:10px;text-align:center}
.demo-bags.big .demo-bag{width:200px;font-size:12px}
.demo-bag-name{color:#ffc72c;font-weight:800;margin-bottom:4px}
.demo-screen{position:relative;width:100%;aspect-ratio:1;background:#000;border-radius:6px;overflow:hidden}
.demo-screen canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.demo-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,transparent 50%,#000a 70%);background-size:calc(100% / 64) calc(100% / 64)}
.demo-caption{margin-top:4px;opacity:.8;line-height:1.2}
.design-card{position:relative}.ft-badge{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font:900 12px/1 var(--display,system-ui);color:#17110a;background:linear-gradient(180deg,#ffd451,#f5b414);box-shadow:0 0 6px rgba(255,190,40,.6);z-index:2}