:root{--stage-bg:#110404;--stage-curtain:#5a0e1a;--stage-curtain-mid:#480814;--stage-curtain-fold:#2a040c;--stage-wood-1:#4a2a14;--stage-wood-2:#5e3a1e;--stage-wood-3:#38200e;--stage-amber:#f5b863;--panel-bg:#1c1216c7;--panel-bg-strong:#140c10eb;--panel-border:#f5b86338;--panel-border-strong:#f5b86380;--board-light:#d8d8dc;--board-mid:#b6b6bc;--board-dark:#5e5e64;--slot-recess:#18141a;--slot-recess-rim:#07060a;--header-blue:#4d6e92;--header-blue-dark:#2c4866;--header-text:#f3ecdf;--active-glow:#f5b863b3;--peg-red:#e23b3b;--peg-yellow:#f7c64a;--peg-green:#3fa14a;--peg-blue:#2774d6;--peg-purple:#7c3edc;--peg-white:#f3eee7;--peg-orange:#e87a16;--peg-cyan:#25b4c4;--fb-place:#4fe080;--fb-color:#fff;--button-bronze:#8b5a2b;--button-bronze-light:#c8915a;--button-text:#fff7e8;--winner-gold:#ffd76a;--sans:"Trebuchet MS", system-ui, "Segoe UI", Roboto, sans-serif;--display:"Trebuchet MS", system-ui, sans-serif;--mono:ui-monospace, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--header-text);font:16px/1.3 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body,#root{background:var(--stage-bg);touch-action:manipulation;-webkit-user-select:none;user-select:none;overscroll-behavior:none;width:100%;height:100dvh;min-height:100dvh;margin:0;padding:0}body{overflow:hidden}#root{flex-direction:column;display:flex}button{font-family:var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--button-text);background:linear-gradient(180deg, var(--button-bronze-light) 0%, var(--button-bronze) 60%, #6e421d 100%);cursor:pointer;text-shadow:0 1px 1px #0000008c;border:2px solid #4a2c10;border-radius:12px;min-height:44px;padding:12px 22px;font-size:15px;font-weight:800;transition:transform 80ms cubic-bezier(.34,1.56,.64,1),box-shadow 80ms,filter 80ms;box-shadow:inset 0 1px #ffe6c899,inset 0 -3px 6px #0006,inset 0 0 0 1px #ffe6c814,0 5px 10px #0000008c,0 1px #0009}button:hover:not(:disabled){filter:brightness(1.08)}button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px #ffe6c866,inset 0 -1px 2px #00000080,0 2px 4px #0000008c}button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4);box-shadow:inset 0 1px #ffffff2e,0 2px 4px #0006}input[type=text]{font:inherit;border:2px solid var(--panel-border);color:var(--header-text);background:#00000059;border-radius:10px;outline:none;min-height:44px;padding:12px 16px}input[type=text]:focus{border-color:var(--stage-amber)}h1,h2,h3{font-family:var(--display);margin:0}.stage{background:radial-gradient(ellipse at center, #0000 0%, #00000080 90%), repeating-linear-gradient(90deg, var(--stage-curtain) 0px, var(--stage-curtain) 18px, var(--stage-curtain-mid) 22px, var(--stage-curtain-fold) 28px, var(--stage-curtain-mid) 36px, var(--stage-curtain) 42px), var(--stage-curtain);width:100%;height:100%;position:relative;overflow:hidden}.stage:after{content:"";pointer-events:none;z-index:0;background:linear-gradient(#ffffff0a 0%,#0000 25%);position:absolute;inset:0}.stage>*{z-index:1;position:relative}.center-screen{height:100%;padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex}.center-screen h1{letter-spacing:4px;text-transform:uppercase;text-shadow:0 4px 14px #000000b3,0 0 26px #ffc8642e;color:var(--header-text);font-size:clamp(36px,9vw,72px)}.center-screen .subtitle{color:#d4c8a4;letter-spacing:1.5px;font-size:clamp(14px,3.5vw,20px);font-style:italic}.button-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.character-grid{grid-template-columns:repeat(3,1fr);gap:12px;width:min(100%,540px);display:grid}.character-card{background:var(--panel-bg);border:2px solid var(--panel-border);cursor:pointer;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;transition:border-color .12s,transform .12s,box-shadow .12s;display:flex}.character-card:hover,.character-card:active{border-color:var(--stage-amber)}.character-card.selected{border-color:var(--winner-gold);box-shadow:0 0 0 3px #ffd76a40,0 6px 16px #00000080}.character-card .portrait{font-size:clamp(36px,9vw,56px)}.character-card .name{letter-spacing:.5px;font-size:clamp(13px,3vw,15px);font-weight:700}.character-card .difficulty-tag{letter-spacing:1.5px;color:var(--stage-amber);text-transform:uppercase;font-size:10px;font-weight:700}.character-card .blurb{color:#c8b89a;font-size:11px;line-height:1.3}.game-stage{width:100%;height:100%;padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));flex-direction:column;gap:6px;display:flex}.top-bar{background:var(--panel-bg);border:1px solid var(--panel-border);color:#e0d4b8;border-radius:12px;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:6px 10px;font-size:13px;display:flex}.top-bar .status{text-align:center;letter-spacing:.4px;flex:1;font-weight:600}.top-bar .room-code-mini{font-family:var(--mono);letter-spacing:3px;color:var(--winner-gold);font-size:13px;font-weight:700}.icon-button{color:#e0d4b8;text-transform:uppercase;letter-spacing:1px;cursor:pointer;box-shadow:none;background:0 0;border:1px solid #f5b86359;border-radius:8px;min-height:36px;padding:8px 12px;font-size:12px}.icon-button.compact{padding:6px 10px;font-size:11px}.boards-column{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex}.board-panel{background:linear-gradient(#302026eb 0%,#140c10f5 100%);border:1px solid #f5b86352;border-radius:14px;flex-direction:column;min-height:0;padding:8px 10px 10px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #f5b8632e,inset 0 -1px #000000b3,0 6px 14px #0009,0 1px #ffd7960a}.board-panel:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#ffffff03 0 1px,#00000003 2px 3px);border-radius:14px;position:absolute;inset:0}.board-panel>*{z-index:1;position:relative}.board-panel.viewer{border-color:#f5b86380;flex:1.4;box-shadow:inset 0 1px #f5b8633d,inset 0 -1px #000000b3,0 8px 20px #000000b3,0 0 0 1px #f5b86314}.board-panel.opponent{flex:1}.board-head{border-bottom:1px solid #f5b86326;flex-shrink:0;align-items:center;gap:10px;margin-bottom:6px;padding-bottom:8px;display:flex}.board-head .avatar-circle{background:radial-gradient(circle at 35% 28%,#f1c690 0%,#c08648 50%,#5e3618 100%);border:2px solid #2a1206;border-radius:50%;flex-shrink:0;place-items:center;width:38px;height:38px;font-size:19px;display:grid;box-shadow:inset 0 1px 1px #ffe6b480,inset 0 -2px 4px #00000080,0 2px 4px #0000008c,0 0 0 1px #0006}.board-head .avatar-circle.disconnected{filter:grayscale(.7);opacity:.6}.board-head .name-block{flex:1;min-width:0}.board-head .name{color:var(--header-text);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.board-head .sub{color:#c8b89a;letter-spacing:.5px;font-size:11px}.board-head .badge{letter-spacing:1px;text-transform:uppercase;border-radius:10px;padding:3px 8px;font-size:10px;font-weight:700}.board-head .badge.cracked{color:#8be09a;background:#50c86440;border:1px solid #50c86480}.board-head .badge.busted{color:#ff9c9c;background:#dc505033;border:1px solid #dc505080}.board-head .badge.disconnected{color:#c8c8c8;background:#96969633;border:1px solid #b4b4b466}.board-rows{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#f5b8634d transparent;flex-direction:column;flex:1;gap:4px;min-height:0;display:flex;overflow-y:auto}.board-rows::-webkit-scrollbar{width:4px}.board-rows::-webkit-scrollbar-thumb{background:#f5b8634d;border-radius:2px}.row{border-radius:8px;flex-shrink:0;align-items:center;gap:10px;padding:6px 8px;display:flex;position:relative}.row.filled{background:#ffffff06;animation:.28s cubic-bezier(.34,1.56,.64,1) both row-settle;box-shadow:inset 0 1px #ffffff0a,inset 0 -1px #00000040}.row.solved{background:linear-gradient(90deg,#50c86438,#50c86400);box-shadow:inset 0 1px #8ce6a040,inset 0 -1px #00000040,0 0 14px #50c8642e}.row.active{background:linear-gradient(90deg,#f5b86338,#f5b8630f);border-radius:12px;padding:10px;animation:2.4s ease-in-out infinite active-pulse;box-shadow:inset 0 0 0 1px #f5b8638c,inset 0 1px #ffd79652,inset 0 -1px #00000073,0 0 14px #f5b8632e}@keyframes active-pulse{0%,to{box-shadow:inset 0 0 0 1px #f5b8638c,inset 0 1px #ffd79652,inset 0 -1px #00000073,0 0 12px #f5b86329}50%{box-shadow:inset 0 0 0 1px #f5b863b3,inset 0 1px #ffd79673,inset 0 -1px #00000073,0 0 22px #f5b86352}}@keyframes row-settle{0%{opacity:0;transform:translateY(-4px)}60%{opacity:1;transform:translateY(0)}to{transform:translateY(0)}}.row .index{text-align:right;width:22px;font-family:var(--mono);color:#c8b89a8c;flex-shrink:0;font-size:13px}.row.active .index{color:var(--stage-amber);font-size:14px;font-weight:700}.slots{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.row.active .slots{gap:10px}.feedback{flex-shrink:0;gap:4px;display:flex}.fb-box{text-align:center;width:32px;font-size:18px;font-weight:800;font-family:var(--mono);color:var(--fb-color);background:linear-gradient(#050507 0%,#0c0c10 100%);border:1px solid #1c1c20;border-radius:6px;min-height:24px;padding:3px 0;line-height:1;box-shadow:inset 0 1px 1px #000000b3,inset 0 -1px #ffffff0a,0 1px 1px #0006}.fb-box.place-color{color:var(--fb-place);text-shadow:0 0 6px #4fe08073}.fb-box:not(.place-color){color:var(--fb-color);text-shadow:0 0 4px #ffffff40}.fb-box.empty{text-shadow:none;color:#fff0;background:linear-gradient(#050507 0%,#0c0c10 100%);border-color:#1a1a1e}.fb-header{flex-shrink:0;justify-content:flex-end;gap:3px;margin-bottom:2px;padding:0 6px;display:flex}.fb-header .h{text-align:center;letter-spacing:.5px;text-transform:uppercase;color:#c8b89a;width:32px;font-size:9px;font-weight:700;line-height:1.1}.peg-slot{background:radial-gradient(circle at 50% 35%,#050507 0%,#0a0a0d 55%,#1c1a1e 100%);border:1px solid #050506;border-radius:50%;flex-shrink:0;width:32px;height:32px;position:relative;box-shadow:inset 0 3px 4px #000000f2,inset 0 -1px 1px #ffffff1a,0 1px #ffffff0f}.row.active .peg-slot{width:42px;height:42px}.peg-slot .peg{background:radial-gradient(circle at 32% 28%, #ffffff8c 0%, #fff0 38%), radial-gradient(circle at 70% 75%, #0000008c 0%, #0000 50%), var(--peg-color,#555);border-radius:50%;animation:.22s cubic-bezier(.34,1.56,.64,1) both peg-drop;position:absolute;inset:2px;box-shadow:inset -3px -4px 6px #00000073,inset 3px 3px 5px #ffffff59,0 2px 3px #0000008c,0 0 0 .5px #0006}.peg-slot .peg:after{content:"";filter:blur(.5px);background:radial-gradient(at 35% 35%,#fffffff2 0%,#ffffff80 35%,#fff0 70%);border-radius:50%;width:26%;height:22%;position:absolute;top:12%;left:22%}.peg-slot .peg:before{content:"";pointer-events:none;background:radial-gradient(#ffffff2e 0%,#fff0 70%);border-radius:50%;width:38%;height:18%;position:absolute;bottom:14%;left:18%}.peg.peg-white:before{background:radial-gradient(#00000014 0%,#0000 70%)}@keyframes peg-drop{0%{opacity:0;transform:translateY(-8px)scale(.9)}60%{opacity:1;transform:translateY(1px)scale(1.04)}to{transform:translateY(0)scale(1)}}.peg.peg-red{--peg-color:var(--peg-red)}.peg.peg-yellow{--peg-color:var(--peg-yellow)}.peg.peg-green{--peg-color:var(--peg-green)}.peg.peg-blue{--peg-color:var(--peg-blue)}.peg.peg-purple{--peg-color:var(--peg-purple)}.peg.peg-white{--peg-color:var(--peg-white)}.peg.peg-orange{--peg-color:var(--peg-orange)}.peg.peg-cyan{--peg-color:var(--peg-cyan)}.peg-slot.tappable{cursor:pointer;transition:transform 80ms}.peg-slot.tappable:active{transform:scale(.92)}.peg-slot.empty.tappable{box-shadow:inset 0 2px 3px #000000b3,0 0 0 1px #f5b86340}.match-button{letter-spacing:1.5px;flex-shrink:0;min-height:38px;padding:8px 14px;font-size:13px}.row.active .match-button:not(:disabled){background:linear-gradient(#f1c690 0%,#c89060 50%,#8c5826 100%);border-color:#4a2c10;animation:1.6s ease-in-out infinite match-ready;box-shadow:inset 0 1px #ffe6c8b3,inset 0 -3px 6px #0006,0 5px 10px #00000080,0 0 16px #f5b8634d}@keyframes match-ready{0%,to{filter:brightness()}50%{filter:brightness(1.12)}}.tray{background:linear-gradient(#22161af2 0%,#0e080cfa 100%);border:1px solid #f5b86352;border-radius:14px;flex-shrink:0;justify-content:space-around;align-items:center;gap:4px;min-height:56px;padding:8px 10px;display:flex;position:relative;box-shadow:inset 0 1px #f5b8632e,inset 0 -2px 4px #0009,0 4px 10px #0000008c}.tray:before{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff04 0 1px,#00000004 2px 3px);border-radius:14px;position:absolute;inset:0}.tray .tray-peg-slot{cursor:pointer;background:radial-gradient(circle at 50% 38%,#08080b 0%,#02020a 70%,#15131a 100%);border:1px solid #050507;border-radius:50%;flex-shrink:0;width:40px;height:40px;transition:transform .1s cubic-bezier(.34,1.56,.64,1);position:relative;box-shadow:inset 0 3px 5px #000000f2,inset 0 -1px 1px #ffffff14,0 1px #ffffff0d}.tray .tray-peg-slot:active{transform:scale(.88)translateY(1px)}.tray .tray-peg-slot .peg{background:radial-gradient(circle at 32% 28%, #ffffff8c 0%, #fff0 38%), radial-gradient(circle at 70% 75%, #00000080 0%, #0000 50%), var(--peg-color,#555);border-radius:50%;position:absolute;inset:3px;box-shadow:inset -4px -5px 8px #00000080,inset 4px 4px 6px #fff6,0 3px 4px #0009,0 0 0 .5px #0006}.tray .tray-peg-slot .peg:after{content:"";filter:blur(.5px);background:radial-gradient(at 35% 35%,#fffffff2 0%,#ffffff80 35%,#fff0 70%);border-radius:50%;width:28%;height:22%;position:absolute;top:12%;left:22%}.tray .tray-peg-slot .peg:before{content:"";pointer-events:none;background:radial-gradient(#fff3 0%,#fff0 70%);border-radius:50%;width:38%;height:18%;position:absolute;bottom:14%;left:18%}.tray .tray-peg-slot .peg.peg-white:before{background:radial-gradient(#00000014 0%,#0000 70%)}.tray .tray-peg-slot.disabled{opacity:.35;pointer-events:none}.tray .tray-peg-slot.consumed{filter:grayscale(.85);opacity:.4;pointer-events:none}@media (width>=540px){.tray .tray-peg-slot{width:48px;height:48px}}.code-setup{background:var(--panel-bg);border:1px solid var(--panel-border);text-align:center;border-radius:14px;flex-direction:column;flex:1;justify-content:space-between;align-items:center;gap:16px;min-height:0;padding:16px;display:flex;overflow:hidden}.code-setup .prompt{letter-spacing:.5px;color:#e8d8b6;font-size:15px;font-weight:600}.code-setup .opponent-status{color:#c8b89a;border:1px solid var(--panel-border);background:#0000004d;border-radius:18px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:flex}.code-setup .panel{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;display:flex}.code-setup .panel .slots{gap:12px}.code-setup .big-slot{width:56px!important;height:56px!important}.code-setup .big-slot .peg{inset:4px}.code-setup .hint{color:#c8b89a;font-size:12px;font-style:italic}.code-setup .ready{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;display:flex}.code-setup .ready .check{color:#8be09a;font-size:48px}.code-setup .ready .label{color:var(--header-text);font-size:14px}.match-over{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));text-align:center;background:#000000c7;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:fixed;inset:0;overflow-y:auto}.match-over h2{color:var(--winner-gold);letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 24px #ffd76a80;font-size:clamp(32px,8vw,56px)}.match-over.draw h2{color:#c8b89a}.match-over.lose h2{color:#ff9c9c}.scorecard{grid-template-columns:1fr;gap:12px;width:min(100%,460px);display:grid}.scorecard .player-card{background:var(--panel-bg-strong);border:2px solid var(--panel-border);border-radius:14px;flex-direction:column;align-items:center;gap:8px;padding:14px;display:flex}.scorecard .player-card.winner{border-color:var(--winner-gold);box-shadow:0 0 0 3px #ffd76a4d}.scorecard .player-card .label{text-transform:uppercase;letter-spacing:2px;color:#c8b89a;font-size:10px}.scorecard .player-card.winner .label{color:var(--winner-gold);font-weight:700}.scorecard .player-card .name{letter-spacing:.5px;font-size:18px;font-weight:700}.scorecard .player-card .stat{color:#c8b89a;font-size:13px}.code-display{gap:6px;display:flex}.code-display .peg-slot{width:22px;height:22px}.lobby-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;flex-direction:column;align-items:center;gap:14px;width:min(100%,420px);padding:22px;display:flex}.lobby-card .room-code{font-family:var(--mono);letter-spacing:8px;color:var(--winner-gold);border:1px dashed var(--stage-amber);background:#00000059;border-radius:10px;padding:10px 18px;font-size:28px;font-weight:700}.lobby-card .player-line{background:#00000040;border-radius:10px;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:14px;display:flex}.lobby-card .player-line .dot{background:#6abb6a;border-radius:50%;flex-shrink:0;width:8px;height:8px}.lobby-card .player-line .dot.disconnected{background:#d56a6a}.lobby-card .player-line .pill{color:var(--winner-gold);letter-spacing:1px;text-transform:uppercase;background:#ffd76a33;border:1px solid #ffd76a66;border-radius:6px;padding:3px 7px;font-size:10px;font-weight:700}.diff-row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.diff-row .diff-button{min-height:36px;padding:8px 12px;font-size:11px}.diff-row .diff-button.active{background:linear-gradient(180deg, var(--winner-gold), #c89a30);color:#2a1a06;border-color:#6a4a14}.lobby-card .hint{color:#c8b89a;text-align:center;font-size:12px;font-style:italic}.pause-banner{border:1px solid var(--stage-amber);color:var(--stage-amber);letter-spacing:.5px;background:linear-gradient(#f5b86338 0%,#b4783c2e 100%);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;gap:10px;padding:10px 14px;font-size:13px;font-weight:700;animation:2s ease-in-out infinite pause-pulse;display:flex;box-shadow:0 0 16px #f5b8632e}.pause-banner .pause-icon{font-size:16px;line-height:1}@keyframes pause-pulse{0%,to{box-shadow:0 0 12px #f5b8632e}50%{box-shadow:0 0 22px #f5b86352}}.game-stage[data-paused=true] .row.active{filter:saturate(.55);opacity:.7;animation:none}.game-stage[data-paused=true] .tray{filter:saturate(.5)brightness(.85)}.toggle-row{background:var(--panel-bg);border:1px solid var(--panel-border);cursor:pointer;border-radius:12px;align-items:center;gap:14px;width:min(100%,420px);padding:12px 16px;transition:border-color .12s;display:flex}.toggle-row:hover,.toggle-row[aria-checked=true]{border-color:var(--panel-border-strong)}.switch{border:1px solid var(--panel-border);background:#00000080;border-radius:13px;flex-shrink:0;width:46px;height:26px;transition:background .16s,border-color .16s;position:relative}.switch.on{background:linear-gradient(180deg, var(--winner-gold), #c89a30);border-color:#6a4a14}.switch .thumb{background:linear-gradient(#f0e8d8,#b8a880);border-radius:50%;width:20px;height:20px;transition:transform .16s;position:absolute;top:2px;left:2px;box-shadow:0 2px 4px #00000080}.switch.on .thumb{background:linear-gradient(#fff7e2,#d8be72);transform:translate(20px)}.closest-guess{flex-direction:column;align-items:center;gap:4px;margin-top:4px;display:flex}.closest-guess .row{background:#00000040;border:1px solid #f5b86333;border-radius:8px;align-items:center;gap:8px;padding:6px 10px;display:flex}.closest-guess .feedback-tag{font-size:11px;font-weight:700;font-family:var(--mono);background:#0006;border-radius:4px;align-items:center;gap:4px;padding:3px 6px;display:inline-flex}.closest-guess .feedback-tag .place{color:var(--fb-place)}.closest-guess .feedback-tag .color{color:var(--fb-color)}.connection-banner{top:max(12px, env(safe-area-inset-top));border:1px solid var(--stage-amber);color:var(--header-text);z-index:60;letter-spacing:.5px;background:#000c;border-radius:8px;padding:10px 16px;font-size:13px;position:fixed;left:50%;transform:translate(-50%)}.debug-overlay{bottom:max(8px, env(safe-area-inset-bottom));border:1px solid var(--stage-amber);font-family:var(--mono);color:#d0c8a0;z-index:70;pointer-events:none;white-space:pre-wrap;background:#000000d9;border-radius:6px;max-width:220px;padding:8px 10px;font-size:10px;line-height:1.4;position:fixed;right:8px}@media (width>=900px) and (orientation:landscape){.game-stage{max-width:720px;margin:0 auto}}