*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--white-bg:#f5f5f0;--white-fg:#1a1a1a;--black-bg:#1a1a1a;--black-fg:#f5f5f0;--active-white:#fff;--active-black:#111;--accent:#c8a84b;--danger:#c0392b;--muted:#80808066}html,body{height:100%;overflow:hidden}body{-webkit-user-select:none;user-select:none;font-family:Courier New,Courier,monospace}#app{flex-direction:column;height:100dvh;display:flex}.players{flex-direction:column;flex:1;display:flex}.player{cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.5rem;transition:background .1s;display:flex;position:relative}.player.white{background:var(--white-bg);color:var(--white-fg);border-bottom:1px solid #ccc}.player.black{background:var(--black-bg);color:var(--black-fg);border-top:1px solid #333}.player.black .player-label,.player.black .player-time,.player.black .player-moves{transform:rotate(180deg)}.player.active.white{background:var(--active-white)}.player.active.black{background:var(--active-black)}.player.inactive{opacity:.45}.player.gameover-loser{background:var(--danger)!important;color:#fff!important;opacity:1!important}.player-label{letter-spacing:.2em;text-transform:uppercase;opacity:.5;font-size:.75rem}.player-time{letter-spacing:.05em;font-variant-numeric:tabular-nums;font-size:clamp(3rem,15vw,8rem);font-weight:700;line-height:1}.player-time.low{color:var(--danger)}.player.black .player-time.low{color:#ff6b6b}.player-moves{opacity:.4;letter-spacing:.1em;font-size:.8rem}.mini-time{font-variant-numeric:tabular-nums;letter-spacing:.05em;opacity:.5;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;position:absolute;bottom:.6rem}.mini-time.rotated{top:.6rem;bottom:auto;transform:rotate(180deg)}.controls{z-index:10;background:#2a2a2a;border-top:1px solid #444;border-bottom:1px solid #444;flex-shrink:0;justify-content:center;align-items:center;gap:1rem;height:3.5rem;display:flex}.btn{color:#ccc;letter-spacing:.1em;cursor:pointer;text-transform:uppercase;background:0 0;border:1px solid #555;border-radius:4px;padding:.35rem 1rem;font-family:inherit;font-size:.8rem;transition:background .1s,color .1s}.btn:hover{color:#fff;background:#3a3a3a}.btn.primary{border-color:var(--accent);color:var(--accent)}.btn.primary:hover{background:var(--accent);color:#1a1a1a}.status-text{color:#888;letter-spacing:.15em;text-transform:uppercase;text-align:center;min-width:6rem;font-size:.75rem}.config-overlay{z-index:100;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.config-overlay.hidden{display:none}.config-panel{background:#222;border:1px solid #444;border-radius:8px;flex-direction:column;gap:1.5rem;width:min(400px,90vw);padding:2rem;display:flex}.config-panel h2{color:#eee;letter-spacing:.2em;text-transform:uppercase;text-align:center;font-size:1rem;font-weight:400}.config-row{flex-direction:column;gap:.4rem;display:flex}.config-row label{color:#aaa;letter-spacing:.15em;text-transform:uppercase;font-size:.75rem}.config-row input{color:#eee;background:#333;border:1px solid #555;border-radius:4px;width:100%;padding:.5rem .75rem;font-family:inherit;font-size:1rem}.config-row input:focus{border-color:var(--accent);outline:none}.config-presets{flex-wrap:wrap;gap:.5rem;display:flex}.preset-btn{color:#aaa;cursor:pointer;letter-spacing:.05em;background:#2a2a2a;border:1px solid #444;border-radius:4px;padding:.3rem .7rem;font-family:inherit;font-size:.75rem;transition:background .1s,color .1s}.preset-btn:hover{color:#fff;background:#3a3a3a}.config-actions{justify-content:flex-end;gap:.75rem;display:flex}.config-actions .btn{flex:1}.link-btn{color:#666;cursor:pointer;letter-spacing:.05em;background:0 0;border:none;font-family:inherit;font-size:.7rem;text-decoration:underline}.link-btn:hover{color:#999}