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