:root{--clay:#9c4632;--court:#35825a;--line:#ffffffe6;--line-dim:#fff6;--ink:#f7f6f2;--dim:#f7f6f2a6;--serve:#ffd23f;--hot:#e8402e;--net:#22262c;--mono:"Space Mono", "Noto Sans Thai", ui-monospace, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0}html,body,#app{height:100dvh;overflow:hidden}body{color:var(--ink);font-family:var(--mono);touch-action:manipulation;background:radial-gradient(130% 100%,#aa523c,#833a28)}#app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);grid-template-rows:1fr auto 1fr;display:grid}.half{cursor:pointer;padding:12px;display:grid;position:relative}.courts{grid-template-columns:1fr 1fr;display:grid;position:absolute;inset:12px}.square{background:var(--court);border:2px solid var(--line);box-shadow:inset 0 0 0 5px var(--court), inset 0 0 0 6px var(--line-dim);position:relative}.square.server{box-shadow:inset 0 0 0 5px var(--court), inset 0 0 0 8px var(--serve), inset 0 0 70px #ffd23f2e}.ghost{font-family:Anton, var(--mono);color:#ffffff29;pointer-events:none;font-size:clamp(3rem,14vw,6rem);line-height:1;position:absolute;right:.35em}.top .ghost{top:.1em}.bottom .ghost{bottom:.1em}.square.server .ghost{color:#ffd23f59}.name{border:1px solid var(--line-dim);min-height:36px;color:var(--ink);font:700 .8rem var(--mono);letter-spacing:.02em;cursor:pointer;background:#072b1a8c;border-radius:4px;padding:6px 10px;position:absolute;top:10px;left:10px}.bottom .name{top:auto;bottom:10px}.square.server .name{background:var(--serve);border-color:var(--serve);color:var(--net)}.shuttle{margin-right:4px}.pen{opacity:.5;margin-left:6px;font-size:.9em}.score{z-index:1;font-family:Anton, var(--mono);color:var(--ink);text-shadow:0 4px 28px #00000059;pointer-events:none;justify-self:center;font-size:clamp(7rem,34vw,15rem);line-height:1;transition:transform 80ms}.top .score{align-self:end;margin-bottom:12px}.bottom .score{align-self:start;margin-top:12px}.half:active .score{transform:scale(1.06)}.half.serving .score{color:var(--serve)}.swap .square .name{animation:.55s cubic-bezier(.2,.8,.2,1) swapslide}.swap .square:first-child .name{--from:44vw}.swap .square:last-child .name{--from:-44vw}@keyframes swapslide{0%{transform:translateX(var(--from))}}.swapnote{background:var(--serve);color:var(--net);font:700 .8rem var(--mono);letter-spacing:.02em;z-index:2;pointer-events:none;border-radius:3px;padding:6px 14px;animation:1.6s forwards swapnote;position:absolute;left:50%;translate:-50%}.top .swapnote{top:114px}.bottom .swapnote{bottom:114px}@keyframes swapnote{0%{opacity:0;scale:.8}12%{opacity:1;scale:1}70%{opacity:1}to{opacity:0}}.badge{font:700 .8rem var(--mono);letter-spacing:.02em;z-index:2;pointer-events:none;border-radius:3px;padding:6px 14px;position:absolute;left:50%;translate:-50%}.top .badge{top:66px}.bottom .badge{bottom:66px}.mp{background:var(--hot);color:#fff;animation:1.1s ease-in-out infinite pulse}.won{background:var(--serve);color:var(--net)}@keyframes pulse{50%{opacity:.55}}.bar{border-block:3px solid var(--line);background:repeating-linear-gradient(45deg, #ffffff0f 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, #ffffff0f 0 2px, transparent 2px 9px), var(--net);z-index:3;align-items:center;gap:8px;padding:8px 10px;display:flex}.bar button{border:1px solid var(--line-dim);min-height:44px;color:var(--ink);font:700 .8rem var(--mono);letter-spacing:.02em;cursor:pointer;background:#00000059;border-radius:4px;padding:0 12px}.bar button:active{background:#ffffff26}.bar button:disabled{opacity:.3}.status{text-align:center;color:var(--dim);letter-spacing:.02em;flex:1;font-size:.78rem}.status b{color:var(--serve)}.record{background:var(--serve)!important;border-color:var(--serve)!important;color:var(--net)!important}.panel{z-index:5;padding:calc(14px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));background:radial-gradient(130% 100%,#aa523c,#833a28);flex-direction:column;gap:12px;display:flex;position:fixed;inset:0;overflow:hidden}.panel-head{align-items:center;gap:10px;display:flex}.panel-head h1{font:700 1.1rem var(--mono)}.panel button{border:1px solid var(--line-dim);min-height:44px;color:var(--ink);font:700 .85rem var(--mono);cursor:pointer;background:#0000004d;border-radius:4px;padding:0 12px}.panel button:active{background:#ffffff26}.panel form{gap:8px;display:flex}.panel input{border:1px solid var(--line-dim);min-width:0;min-height:44px;color:var(--ink);font:700 1rem var(--mono);background:#0000004d;border-radius:4px;flex:1;padding:0 12px}.roster{flex-direction:column;flex:1;gap:6px;min-height:0;padding:0;list-style:none;display:flex;overflow-y:auto}.roster li{border:1px solid var(--line-dim);background:#00000040;border-radius:6px;align-items:center;gap:8px;padding:6px 6px 6px 14px;display:flex}.roster li b{flex:1;font-size:1rem}.roster li.paused b{opacity:.4;text-decoration:line-through}.roster li.empty{color:var(--dim);justify-content:center;padding:14px}.pgames{color:var(--dim);font-size:.8rem}.nextbox{border:2px solid var(--serve);text-align:center;background:#00000040;border-radius:8px;padding:14px}.nextbox small{color:var(--dim);letter-spacing:.02em}.nextbox em{color:var(--serve);padding:0 4px;font-style:normal}.nextline{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:10px;font-weight:700;display:flex}.nextline .slot{border-style:dashed!important;font-size:1.05rem!important}.startrow{gap:8px;display:flex}.startrow .startbtn{flex:1}.startrow .reroll{border-radius:8px;width:54px;min-height:54px;font-size:1.3rem!important}.startbtn{border-radius:8px;min-height:54px;background:var(--serve)!important;color:var(--net)!important;border:none!important;font-size:1.05rem!important}.picker{z-index:6;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.picker-box{border:1px solid var(--line-dim);background:#8a3d28;border-radius:10px;flex-direction:column;gap:8px;width:min(320px,86vw);max-height:76dvh;padding:16px;display:flex;overflow-y:auto}.picker-box h2{font:700 1rem var(--mono);text-align:center;margin-bottom:4px}.picker-box button{border:1px solid var(--line-dim);min-height:46px;color:var(--ink);font:700 .95rem var(--mono);cursor:pointer;background:#0000004d;border-radius:6px}.picker-box button:active{background:#ffffff26}.picker-box .empty{text-align:center;color:var(--dim);font-size:.8rem}.deuce{color:#ff8a7a;border:1px solid #ff8a7a;border-radius:3px;margin-left:8px;padding:2px 8px;font-weight:700;display:inline-block}