*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#f1f5f9;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;background:radial-gradient(at top,#1d3170 0%,#0d1b3e 60%,#091330 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}button{font:inherit;cursor:pointer}.screen{min-height:100%;padding:max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex}.card{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:18px;flex-direction:column;gap:12px;width:100%;max-width:400px;padding:22px 18px;display:flex}.title{text-align:center;margin:0;font-size:30px}.muted{color:#b6c2dc;text-align:center;margin:0;line-height:1.4}.small{font-size:13px}.error{color:#fda4af;text-align:center;margin:0;line-height:1.4}.field{color:#b6c2dc;flex-direction:column;gap:6px;font-size:14px;display:flex}.field input{font:inherit;color:#fff;-webkit-user-select:text;user-select:text;background:#00000040;border:1px solid #fff3;border-radius:12px;padding:12px;font-size:18px}.code-input{letter-spacing:.3em;text-align:center}.code-input::placeholder{letter-spacing:normal}.primary,.secondary{border:none;border-radius:12px;padding:14px;font-size:18px;font-weight:600}.primary{color:#1e1b4b;background:#facc15}.secondary{color:#fff;background:#ffffff24}.primary:disabled,.secondary:disabled{opacity:.4;cursor:default}.link-button{color:#93a4c8;background:0 0;border:none;padding:6px;text-decoration:underline}.divider{text-align:center;color:#7f8db0;font-size:14px}.room-code{text-align:center;letter-spacing:.15em;font-size:56px;font-weight:800}.status{text-align:center;min-height:1.4em;line-height:1.4}.segmented{background:#00000040;border-radius:12px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.segmented button{color:#dbe4f5;background:0 0;border:none;border-radius:9px;padding:10px 0;font-weight:600}.segmented button.on{color:#1e1b4b;background:#fff}.segmented button:disabled:not(.on){opacity:.4;cursor:default}.segmented button.on:disabled{cursor:default}.seats{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.seat{background:#ffffff12;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;display:flex}.seat--me{background:#ffffff24;font-weight:700}.seat--empty{color:#7f8db0;background:0 0;border:1px dashed #fff3}.seat--off .seat-name{opacity:.5}.seat-dot{border:2px solid #ffffffd9;border-radius:50%;flex:none;width:22px;height:22px}.seat--empty .seat-dot{border:2px dashed #ffffff4d}.seat-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.seat-note{color:#fda4af;font-size:12px;font-weight:400}.color-picker{color:#b6c2dc;text-align:center;flex-direction:column;gap:6px;font-size:14px;display:flex}.swatches{grid-template-columns:repeat(8,1fr);justify-items:center;gap:6px;display:grid}.swatch{border:3px solid #0000;border-radius:50%;width:34px;height:34px;padding:0;box-shadow:0 0 0 1px #ffffff40}.swatch.on{border-color:#fff;box-shadow:0 0 0 2px #fff6}.swatch.taken{opacity:.3;cursor:default;background-image:linear-gradient(135deg,#0000 45%,#fff 45% 55%,#0000 55%)!important}.game{height:100%;padding:max(8px, env(safe-area-inset-top)) 8px max(4px, env(safe-area-inset-bottom));flex-direction:column;display:flex}.players{gap:6px;padding:2px 2px 0;display:grid}.players--2,.players--4{grid-template-columns:1fr 1fr}.pchip{background:#ffffff0d;border:2px solid #ffffff1f;border-radius:14px;align-items:center;gap:7px;min-width:0;padding:6px 10px 6px 7px;transition:background .2s,border-color .2s;display:flex}.pchip--on{background:#ffffff29}.pchip{position:relative}.pchip-ring{pointer-events:none;position:absolute;top:-2px;left:-2px;overflow:visible}.pchip-ring path{fill:none;stroke-linecap:round;transition:stroke-dashoffset .1s linear}.pchip--off{opacity:.45}.pchip-dot{border:2px solid #fff;border-radius:50%;flex:none;width:20px;height:20px}.pchip-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:15px;overflow:hidden}.pchip--on .pchip-name{font-weight:700}.pchip-walls{font-variant-numeric:tabular-nums;align-items:center;gap:4px;font-size:17px;font-weight:800;display:flex}.pchip-walls i{background:#f59e0b;border-radius:2px;width:5px;height:18px;display:block}.turn-line{text-align:center;min-height:1.6em;margin-top:auto;padding:8px 0 2px;font-size:18px}.clock{font-variant-numeric:tabular-nums;background:#ffffff1f;border-radius:999px;min-width:2.2em;margin-left:8px;padding:1px 8px;font-weight:800;display:inline-block}.clock--warn{color:#fff;background:#ef4444}.muted-inline{color:#fda4af;font-size:14px}.board-wrap{aspect-ratio:1;touch-action:manipulation;flex:0 auto;width:100%;min-height:0;position:relative}.board{width:100%;height:100%;display:block}.board-frame{fill:url(#qWoodFrame)}.goal{opacity:.95}.cell{fill:url(#qCell)}.target rect{fill:currentColor;fill-opacity:.25;stroke:currentColor;stroke-width:.06px;stroke-opacity:.9}.target circle{fill:currentColor;opacity:.85}.from-mark{fill:none;stroke-width:.06px;stroke-dasharray:.12 .1;opacity:.75}.wall-shadow{fill:#000;opacity:.35}.wall-body{stroke:#4a2c12;stroke-width:.025px}.wall-grain{fill:none;stroke:#5b3714;stroke-width:.012px;opacity:.6}.wall-last{fill:none;stroke:#fff;stroke-width:.05px}.wall--preview .wall-shadow,.wall--preview .wall-grain{display:none}.wall--preview .wall-body{stroke:#fff;stroke-width:.05px;stroke-dasharray:.12 .08;animation:.8s ease-in-out infinite alternate preview-pulse}@keyframes preview-pulse{0%{fill:#f8ead0}to{fill:#c4884a}}.pawn{transition:transform .3s}.pawn-shadow{fill:#000;opacity:.4}.pawn-outline{stroke:#fff;stroke-width:.07px;stroke-linejoin:round}.pawn-shine{fill:#fff;opacity:.8;pointer-events:none}.pawn-halo{stroke-width:.05px;fill-opacity:.25;animation:1s ease-in-out infinite alternate halo-pulse}@keyframes halo-pulse{0%{opacity:.4}to{opacity:1}}.toast{color:#fff;white-space:nowrap;pointer-events:none;background:#7f1d1deb;border-radius:999px;padding:8px 16px;font-size:15px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.overlay{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay--notice{text-align:center;pointer-events:auto;background:#091330bf;padding:24px;font-size:20px}.overlay--result{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;background:#060c1fdb;border-radius:12px;justify-content:flex-start;padding:12px;overflow-y:auto}.celebration{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.result-body{flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:380px;margin:auto 0;display:flex;position:relative}.result-icon{text-align:center;font-size:60px;line-height:1}.result-icon.win{animation:.9s ease-in-out infinite result-bounce}.result-icon.lose{animation:.5s ease-in-out infinite alternate result-sob}@keyframes result-bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-14px)scale(1.06)}}@keyframes result-sob{0%{transform:rotate(-4deg)}to{transform:rotate(4deg)}}.result-title{text-align:center;overflow-wrap:anywhere;font-size:38px;font-weight:900;line-height:1.15}.result-title--small{font-size:26px}.result--win .result-title{color:#facc15;text-shadow:0 4px 24px #facc1573}.result-actions{flex-direction:column;gap:10px;display:flex}.game-foot{justify-content:center;margin-top:auto;display:flex}.modes{background:#0000004d;border-radius:14px;flex:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px;padding:4px;display:grid}.modes button{color:#dbe4f5;white-space:nowrap;background:0 0;border:none;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:52px;padding:5px 4px;font-size:15px;font-weight:600;display:flex}.modes button.on{color:#3f2711;background:#f3dcb4}.modes button:disabled{opacity:.4;cursor:default}.mode-icon{flex:none;width:20px;height:20px}.mode-icon-pawn{fill:currentColor}.mode-icon-wall{fill:#b07a42;stroke:#4a2c12;stroke-width:.04px}.actions{flex:none;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:8px;display:flex}.actions button{flex:1;max-width:160px;padding:12px 8px;font-size:17px}.hub-link{color:#93a4c8;align-self:flex-start;margin:-8px 0 -4px;padding:4px 0;font-size:14px;text-decoration:none}.room-list{flex-direction:column;gap:6px;display:flex}.room-list-title{color:#b6c2dc;font-size:14px}.room-item{color:#fff;text-align:left;background:#facc1514;border:1px solid #facc1559;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;font-size:17px;display:flex}.room-item:disabled{opacity:.45;cursor:default}.room-item-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;overflow:hidden}.room-item-count{color:#facc15;flex:none;font-weight:700}