:root{font-synthesis:none;color:var(--cream);background:var(--deep);--edge-top:max(16px, env(safe-area-inset-top));--edge-right:max(16px, env(safe-area-inset-right));--edge-bottom:max(12px, env(safe-area-inset-bottom));--edge-left:max(16px, env(safe-area-inset-left));font-family:Trebuchet MS,Arial Rounded MT Bold,Segoe UI,Arial,sans-serif;font-weight:600}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,#game:focus-visible{outline:3px solid var(--blueShade);outline-offset:4px}button:disabled{opacity:.45}[hidden]{display:none!important}.shell{width:100%;height:100dvh}.topbar{z-index:3;top:var(--edge-top);left:var(--edge-left);right:var(--edge-right);pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute}.brand{pointer-events:auto;text-shadow:1px 2px 2px var(--ink);letter-spacing:-.5px;align-items:center;gap:7px;font-size:19px;font-style:italic;font-weight:1000;display:flex}.brand-light{color:var(--yellow)}.brand-icon{background:var(--blue);width:34px;height:34px;color:var(--cream);border:2px solid var(--cream);place-items:center;margin-inline-end:6px;font-size:26px;display:grid;transform:rotate(-7deg);box-shadow:3px 3px #10182a}.top-actions{pointer-events:auto;align-items:center;gap:10px;display:flex}.icon-button{color:var(--cream);border:2px solid var(--ink);background:linear-gradient(#3d4b62,#202a3e);border-radius:6px;place-items:center;width:44px;height:44px;transition:transform .12s,background .12s;display:inline-grid;box-shadow:inset 0 2px #8b9bb1,0 3px #11192a}.icon-button svg{width:22px;height:22px}.icon-button:hover{background:var(--yellow);color:var(--ink);transform:translateY(-1px)}.icon-button:active{box-shadow:none;transform:translateY(2px)}.game-frame{background:#55abff;width:100%;height:100%;position:relative;overflow:hidden}#game{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}#game canvas{display:block}.overlay{pointer-events:none;position:absolute;inset:0}.overlay button,.overlay a{pointer-events:auto}.menu{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:80px 24px 110px;display:flex}.eyebrow{letter-spacing:2px;color:var(--ink);font-size:11px;font-weight:900}.ribbon{color:var(--cream);box-shadow:3px 3px 0 var(--ink), inset 0 2px 0 #45627c;background:#243449;border:2px solid #77ceff;padding:7px 22px;display:inline-block;transform:rotate(-2deg)}h1{isolation:isolate;letter-spacing:-6px;width:max-content;max-width:92%;color:var(--blue);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:1px 2px 0 var(--ink), 2px 3px 0 var(--ink), 3px 4px 0 var(--ink), 4px 5px 0 var(--ink), 5px 6px 0 var(--ink), 6px 7px 0 var(--ink), 7px 9px 0 #071326;margin:26px auto;font-family:Arial Black,Impact,Trebuchet MS,sans-serif;font-size:clamp(42px,7.7vw,108px);font-style:italic;font-weight:1000;line-height:.84;position:relative;transform:rotate(-4deg)}h1:before{content:"";z-index:-1;clip-path:polygon(3% 0,17% 4%,20% 0,43% 5%,60% 0,70% 5%,95% 0,92% 13%,100% 17%,94% 38%,100% 43%,94% 61%,99% 72%,91% 77%,95% 97%,75% 94%,71% 100%,49% 95%,28% 100%,25% 93%,3% 98%,6% 78%,0 73%,5% 57%,0 46%,6% 32%,1% 20%,8% 17%);background:linear-gradient(145deg,#34465c,#111c2e 60%,#263c54);position:absolute;inset:-18px -30px -22px}h1:after{content:"";z-index:-1;background:linear-gradient(100deg, var(--yellow), var(--orange));clip-path:polygon(0 50%,51% 31%,74% 0,67% 40%,100% 30%,75% 56%,100% 79%,63% 69%,70% 100%,44% 72%);width:70px;height:58px;position:absolute;bottom:-8px;right:-35px}h1 span{display:block}h1 span:last-child{color:var(--yellow);letter-spacing:-4px;margin-top:4px}p{color:#55556a;margin:0 0 20px;font-size:14px;font-weight:500;line-height:1.65}.menu-tagline{letter-spacing:2px;color:var(--cream);text-shadow:0 2px 2px var(--ink), 1px 0 1px var(--ink), -1px 0 1px var(--ink);margin-bottom:20px;font-size:11px;font-weight:900}.primary{min-width:210px;min-height:48px;color:var(--ink);border:3px solid var(--ink);box-shadow:inset 0 3px 0 #fff1a1, inset 0 -3px 0 #c9892b, 0 5px 0 var(--ink);letter-spacing:.7px;background:linear-gradient(#ffdf53,#ffbe25);border-radius:6px;padding:13px 28px;font-size:14px;font-weight:1000;transition:transform .12s,box-shadow .12s,background .12s}.menu .primary{min-width:220px;padding:10px 30px;font-size:26px;transform:rotate(-2deg)}.primary:hover{box-shadow:0 7px 0 var(--ink);background:#ffed99;transform:translateY(-2px)}.menu .primary:hover{transform:rotate(-2deg)translateY(-2px)}.primary:active,.menu .primary:active{box-shadow:0 1px 0 var(--ink);transform:translateY(4px)}.primary span{margin-inline-start:26px}.text-button{min-height:36px;color:var(--ink);background:0 0;border:0;margin:14px auto 0;padding:8px 12px;font-size:12px;font-weight:800;display:block}.text-button:hover{text-underline-offset:4px;text-decoration:underline}.menu .text-button{color:var(--cream);border:2px solid var(--ink);box-shadow:inset 0 2px 0 #738096, 0 3px 0 var(--ink);background:linear-gradient(#37445b,#202a3e);border-radius:5px;min-width:220px}.menu .text-button span{color:var(--ink)}.text-button span{border:2px solid var(--ink);background:var(--cream);border-radius:50%;place-items:center;width:18px;height:18px;margin-inline-start:5px;font-size:11px;display:inline-grid}.menu-controls{letter-spacing:1px;justify-content:center;align-items:center;gap:30px;font-size:12px;font-weight:1000;display:flex;position:absolute;bottom:8%;left:0;right:0}.menu-controls>.blue,.menu-controls>.coral{background:var(--cream);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:4px;padding:8px 15px}.menu-controls>.blue{background:var(--blueShade);color:var(--cream);border-color:var(--blueLight);transform:rotate(-4deg)}.menu-controls>.coral{background:var(--coralShade);color:var(--cream);border-color:var(--coralLight);transform:rotate(4deg)}kbd{border:2px solid;border-radius:4px;place-items:center;width:25px;height:25px;margin:0 7px;font-family:inherit;font-size:14px;font-weight:900;display:inline-grid}.blue{color:var(--blueShade)}.coral{color:var(--coralShade)}.control-separator{color:var(--cream);background:var(--ink);padding:7px;font-size:11px;font-style:italic;transform:rotate(-6deg)}#hud{top:calc(var(--edge-top) + 58px);left:var(--edge-left);right:var(--edge-right);pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:absolute}.player{background:var(--ink);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink), inset 0 3px 0 #fff5, inset 0 -4px 0 #111c2e55;border-radius:4px 8px 4px 6px;grid-template-columns:auto auto;align-items:center;column-gap:12px;padding:7px 12px 8px;display:grid}.player.blue{color:var(--cream);background:linear-gradient(125deg,#0878d8,#08468b)}.player.coral{color:var(--cream);background:linear-gradient(125deg,#fa4736,#a51f2b)}.player-tag{letter-spacing:1px;grid-area:1/1;align-items:center;font-size:11px;font-weight:1000;display:flex}.player-tag kbd{width:19px;height:19px;margin:0 4px;font-size:10px}.score{-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;grid-area:1/2/3;font-family:Arial Black,Impact,sans-serif;font-size:44px;line-height:1}.pips{grid-row:2;gap:4px;display:flex}.pips i{opacity:.65;background:#111c2e33;border:1px solid;border-radius:50%;width:10px;height:10px}.pips .filled{opacity:1;background:var(--yellow)}.round-info{color:var(--cream);letter-spacing:1px;text-shadow:0 1px 2px var(--ink), 1px 0 1px var(--ink);flex-direction:column;align-items:center;gap:5px;font-size:10px;font-weight:900;display:flex;position:absolute;left:50%;transform:translate(-50%)}#clock{font-variant-numeric:tabular-nums;background:var(--ink);box-shadow:2px 2px 0 var(--ink);border:2px solid #6f9ebd;border-radius:4px;padding:5px 10px;font-size:23px;line-height:1}#pause{flex-shrink:0}#pause:hover{background:var(--yellow)}.announcement{text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:14px;display:flex;position:absolute;inset:30% 3% auto}.announcement strong{letter-spacing:-4px;color:var(--yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--ink);font-family:Arial Black,Impact,sans-serif;font-size:92px;font-style:italic;font-weight:1000;transform:rotate(-5deg)}.announcement.blue strong{color:var(--blueLight)}.announcement.coral strong{color:var(--coralLight)}.announcement .result-label{letter-spacing:-2px;font-size:clamp(26px,4.5vw,65px)}.announcement span{background:var(--cream);border:2px solid var(--ink);color:var(--ink);letter-spacing:1px;padding:6px 12px;font-size:10px;font-weight:900}.announcement.countdown{gap:8px}.announcement.countdown strong{line-height:1.05}.announcement .countdown-caption{border:3px solid var(--ink);color:var(--cream);letter-spacing:1px;text-shadow:2px 2px 0 var(--ink);box-shadow:4px 5px 0 var(--ink), inset 0 2px 0 #a7f3ff66, inset 0 -3px 0 #071b3277;background:linear-gradient(160deg,#22649b,#162b49 75%);border-radius:5px 9px 5px 8px;align-items:center;gap:13px;padding:10px 19px 12px;font-family:Arial Black,Impact,Arial,sans-serif;font-size:clamp(16px,2.8vmin,24px);font-style:italic;font-weight:900;line-height:1;display:inline-flex;transform:rotate(-3deg)}.countdown-caption:before,.countdown-caption:after{content:"";background:var(--yellow);clip-path:polygon(45% 0,100% 0,65% 40%,100% 40%,20% 100%,35% 55%,0 55%);flex:none;width:10px;height:20px}.modal-overlay{z-index:4;padding:var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);pointer-events:auto;background:#222b4366;place-items:center;display:grid;overflow:auto}.card{text-align:center;pointer-events:auto;border:4px solid var(--ink);color:var(--cream);background:linear-gradient(140deg,#2c394f,#182133);border-radius:7px;width:min(430px,92%);padding:24px 32px;position:relative;box-shadow:5px 6px #091b24,inset 0 0 0 2px #748198}.card:before{content:"";background:var(--yellow);border:2px solid var(--ink);border-radius:50%;width:9px;height:9px;position:absolute;top:11px;left:11px;box-shadow:1px 1px #ad853b}h2{letter-spacing:-1.5px;margin:12px 0;font-family:Arial Black,Segoe UI,Arial,sans-serif;font-size:37px;font-weight:1000;line-height:1.15}.card p{color:#d2dbe8;margin-bottom:15px}.card .eyebrow,.card .text-button{color:var(--cream)}.card .primary{width:100%;margin:10px 0;display:block}.card .secondary{width:100%;margin:5px 0}.secondary{min-height:40px;color:var(--cream);border:2px solid var(--ink);box-shadow:inset 0 2px 0 #687a93, 0 2px 0 var(--ink);background:linear-gradient(#3d4a62,#283347);border-radius:4px;padding:10px 12px;font-size:12px;transition:background .1s}.secondary:hover{background:var(--yellow);color:var(--ink)}.secondary:active{box-shadow:none;transform:translateY(2px)}.pause-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.final-score{justify-content:center;gap:22px;margin:14px;font-family:Arial Black,sans-serif;font-size:48px;display:flex}.final-score>span:nth-child(2){color:var(--cream);align-self:center;font-size:32px}.victory-card{z-index:1;border-width:4px;animation:.2s ease-out pop}.victory-card h2{-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;text-shadow:2px 3px #071326;font-size:44px;font-style:italic}.victory-card .blue{color:var(--blue)}.victory-card .coral{color:var(--coral)}#match-over:before{content:"";background:var(--yellow);clip-path:polygon(50% 0,58% 16%,76% 4%,78% 25%,98% 22%,85% 43%,100% 54%,83% 65%,95% 85%,73% 82%,69% 100%,50% 86%,30% 100%,27% 82%,5% 87%,17% 65%,0 54%,15% 43%,2% 22%,22% 25%,24% 4%,42% 16%);width:min(500px,98%);height:min(420px,98%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-7deg)}.touch-labels{left:var(--edge-left);right:var(--edge-right);bottom:var(--edge-bottom);pointer-events:none;letter-spacing:1px;justify-content:space-between;font-size:10px;font-weight:1000;display:flex;position:absolute}.touch-labels span{background:var(--cream);border:1px solid var(--ink);border-radius:3px;padding:4px 8px}.orientation-hint{display:none}dialog{color:var(--cream);border:4px solid var(--ink);background:linear-gradient(135deg,#2c394f,#182133);border-radius:7px;width:min(660px,100% - 30px);max-height:90dvh;padding:24px 30px;box-shadow:6px 6px #091b24,inset 0 0 0 2px #748198}dialog::backdrop{background:#222b43b3}.dialog-heading{justify-content:space-between;align-items:center;display:flex}.close{width:36px;height:36px;color:var(--cream);border:2px solid var(--ink);background:#39475e;border-radius:4px;place-items:center;font-size:26px;line-height:1;display:grid}.close:hover{background:var(--yellow);color:var(--ink)}dialog h2{font-size:33px}dialog h2 small{color:#d1dce9;letter-spacing:0;margin-inline-start:12px;font:700 19px Segoe UI,Arial,sans-serif}dialog p{color:#d1dce9;font-size:13px}dialog strong{color:var(--yellow)}dialog .eyebrow{color:var(--blueLight)}dialog .primary{margin-top:14px}.preferences{flex-wrap:wrap;gap:8px 20px;margin:15px 0 20px;font-size:12px;display:flex}.preferences label{cursor:pointer;align-items:center;gap:8px;min-height:36px;display:flex}input[type=checkbox]{accent-color:var(--blue);width:20px;height:20px}details{border-top:2px solid #53647c;padding-top:15px}summary{cursor:pointer;min-height:30px;font-size:15px;font-weight:900}summary span{float:inline-end;color:#aac5de;font-size:12px;font-weight:500}.settings-note{margin:12px 0 18px;font-size:12px}.settings-note [lang=he]{margin-top:5px;font-family:Segoe UI,Arial,sans-serif;display:block}.tuning-row{grid-template-columns:160px 1fr 75px;align-items:center;gap:14px;min-height:40px;margin:10px 0;font-size:12px;display:grid}.tuning-row small{color:#bed0e3;margin-top:3px;font-size:10px;font-weight:400;display:block}.tuning-row small b{font-family:Segoe UI,Arial,sans-serif;font-weight:500}input[type=range]{width:100%;height:32px;accent-color:var(--blue);cursor:pointer;margin:0}input[type=number]{width:100%;min-width:0;height:34px;color:var(--cream);direction:ltr;background:#111c2e;border:2px solid #586e89;border-radius:4px;padding:4px;font:700 12px Trebuchet MS,Arial,sans-serif}.preset-actions{flex-wrap:wrap;gap:8px;margin-top:20px;display:flex}#preset-status{min-height:20px;color:var(--green);margin-top:12px;font-size:12px}#debug{color:#fff3d5;border:1px solid var(--cream);pointer-events:none;background:#222b43e6;border-radius:3px;max-width:95%;margin:0;padding:9px;font-size:10px;line-height:1.6;position:absolute;bottom:42px;left:16px}@keyframes pop{0%{transform:scale(.92)rotate(-2deg)}to{transform:scale(1)}}.reduced *{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width<=850px){.brand{font-size:15px}.ribbon{padding:5px 13px}.eyebrow{letter-spacing:1.2px;font-size:9px}h1{letter-spacing:-4px;-webkit-text-stroke-width:2px;text-shadow:3px 4px 0 var(--ink);margin:15px auto 14px;font-size:clamp(40px,7.8vw,66px)}h1 span:last-child{letter-spacing:-3px}.menu-tagline{margin-bottom:12px;font-size:9px}.menu .primary{min-width:175px;min-height:44px;padding:7px 20px;font-size:20px}.menu .text-button{min-height:30px;margin-top:9px;padding:5px;font-size:11px}.menu-controls{gap:17px;font-size:10px;bottom:7%}.menu-controls>.blue,.menu-controls>.coral{padding:4px 9px}.menu-controls kbd{width:20px;height:20px;font-size:11px}.player{column-gap:8px;padding:5px 8px}.player-tag{font-size:9px}.player-tag kbd{width:17px;height:17px;font-size:9px}.score{font-size:30px}.pips{gap:3px}.pips i{width:8px;height:8px}.round-info{gap:4px;font-size:8px}#clock{padding:4px 8px;font-size:17px}#pause svg{width:18px;height:18px}.announcement strong{font-size:62px}.announcement span{font-size:8px}.card{width:min(380px,92%);padding:18px 25px}.card h2{margin:9px 0;font-size:29px}.card p{margin-bottom:10px;font-size:12px}.card .primary{min-height:42px;padding:9px 20px;font-size:12px}.card .text-button{margin-top:5px}.final-score{margin:12px;font-size:35px}.touch-labels{font-size:8px}#debug{font-size:8px;bottom:26px;left:9px}}@media (width<=600px) and (orientation:portrait){.touch-labels{bottom:calc(var(--edge-bottom) + 32px)}.top-actions{gap:7px}.brand{font-size:13px}.brand-icon{width:29px;height:29px;font-size:22px}h1{letter-spacing:-2px;margin:14px auto 15px;font-size:37px;line-height:.86}h1 span:last-child{letter-spacing:-2px}.menu-tagline{display:none}.menu .eyebrow{font-size:8px}.menu-controls{gap:12px;bottom:7%}.menu-controls>.blue,.menu-controls>.coral{padding:3px 6px}.menu-controls kbd{margin:0 3px}.player-tag kbd{display:none}.player{column-gap:7px}.score{font-size:26px}.orientation-hint{left:var(--edge-left);right:var(--edge-right);top:calc(var(--edge-top) + 124px);pointer-events:none;color:var(--cream);text-align:center;text-shadow:1px 2px 2px var(--ink);font-size:11px;line-height:1.5;display:block;position:absolute}.tuning-row{grid-template-columns:120px 1fr 62px;gap:8px;font-size:11px}.tuning-row small{font-size:9px}dialog{padding:18px}dialog h2{font-size:29px}.announcement{inset:34% 2% auto}.announcement .result-label{-webkit-text-stroke-width:2px;font-size:25px}.card{padding:12px 18px}.card h2{margin:7px 0;font-size:25px}.card p{margin-bottom:6px}.card .primary{min-height:38px;padding:7px 15px;font-size:11px}.card .secondary{min-height:34px;padding:7px;font-size:10px}.card .text-button{min-height:26px;padding:5px}.final-score{margin:8px;font-size:30px}}@media (height<=550px) and (orientation:landscape){.brand{font-size:12px}.brand-icon{width:24px;height:24px;font-size:19px}.icon-button svg{width:18px;height:18px}.menu{padding-top:55px;padding-bottom:70px}.menu h1{letter-spacing:-3px;margin:12px auto 14px;font-size:clamp(34px,11.5vh,54px)}.menu-tagline{display:none}.menu .eyebrow{padding:4px 12px;font-size:8px}.menu .primary{min-width:160px;min-height:40px;padding:6px 15px;font-size:18px}.menu .text-button{min-height:26px;margin-top:8px;padding:4px;font-size:10px}.menu-controls{font-size:9px;bottom:6%}.card{padding:12px 22px}.card .eyebrow{font-size:8px}.card h2{margin:8px 0;font-size:27px}.card .primary{min-height:36px;padding:7px 15px;font-size:11px}.card .secondary{min-height:32px;padding:6px;font-size:10px}.card p{margin-bottom:6px}.card .text-button{min-height:26px;margin-top:4px;padding:5px}.final-score{margin:8px;font-size:30px}.touch-labels{font-size:7px}}#online{margin-top:12px}#room-bar{z-index:12;top:calc(var(--edge-top) + 121px);border:2px solid var(--ink,#182437);color:#fff8df;background:#17243a;border-radius:10px;justify-content:center;align-items:center;gap:12px;width:max-content;max-width:94%;padding:4px 10px;font-size:12px;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 3px #101a2b}#room-status{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}#room-details{flex-shrink:0}@media (width<=600px) and (orientation:portrait){.online-room .orientation-hint{top:calc(var(--edge-top) + 184px)}}#room-bar[hidden]{display:none}#room-bar .secondary{white-space:nowrap;min-height:44px;padding:8px 12px}#room-dialog input{color:#fff8df;background:#17243a;border:2px solid #69919e;border-radius:8px;width:100%;margin:8px 0 16px;padding:12px}#room-dialog button:not(.close){margin-top:10px}#local-room-note a{text-decoration:underline}#invite-label{display:block}#invite-label[hidden],.menu.online-waiting{display:none}@media (height<=550px){#online{min-height:40px;margin-top:4px;padding:6px 14px}#room-bar{top:calc(var(--edge-top) + 60px);max-width:44%;padding:3px 8px;font-size:10px}#room-bar .secondary{padding:4px 8px;font-size:10px}}