/* ============================================================
     CHESS CLOCK — single-file PWA
     Layout: two rotated player zones + a slim center control strip.
     Colors follow the spec: dark slate base, green = active,
     muted slate = inactive, red = flagged/time-out.
     ============================================================ */

  :root{
    --bg:            #0f172a;
    --panel-inactive:#1e293b;
    --panel-active:  #22c55e;
    --panel-flagged: #ef4444;
    --text-inactive: #64748b;
    --text-active:   #052e13;
    --text-flagged:  #fff1f1;
    --accent:        #38bdf8;
    --divider:       #020617;
    --control-btn:   #334155;
    --control-btn-active: #475569;
  }

  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
  html,body{
    margin:0; padding:0; width:100%; height:100%;
    overscroll-behavior:none; touch-action:manipulation;
    background:var(--bg); color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  #app{
    position:fixed; inset:0;
    display:flex; flex-direction:row;
    width:100%; height:100%;
  }

  /* ---------- Player zones ---------- */
  .player{
    position:relative;
    flex:1 1 45%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--panel-inactive);
    color:var(--text-inactive);
    transition:background .15s ease, color .15s ease;
    height:100%;
    padding:0.5rem;
    overflow:hidden;
  }
  .player.p1{ transform:rotate(180deg); }

  .player.active{
    background:var(--panel-active);
    color:var(--text-active);
  }
  .player.flagged{
    background:var(--panel-flagged) !important;
    color:var(--text-flagged) !important;
  }
  .player.paused{ filter:brightness(0.65); }

  .player-name{
    font-size:clamp(0.8rem,2vw,1.1rem);
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.75;
    margin-bottom:.25rem;
  }
  .player-time{
    font-variant-numeric:tabular-nums;
    font-size:clamp(2.4rem,13vw,7rem);
    font-weight:700;
    line-height:1;
    letter-spacing:-0.02em;
    white-space:nowrap;
  }
  .player-time .decimal{ font-size:0.5em; opacity:.7; }
  .player-sub{
    display:flex; gap:.9rem; align-items:center;
    margin-top:.4rem;
    font-size:clamp(0.7rem,1.6vw,0.95rem);
    opacity:.8;
  }
  .player-delay-ring{
    font-variant-numeric:tabular-nums;
    padding:.15rem .6rem;
    border-radius:999px;
    border:1.5px solid currentColor;
    opacity:.85;
  }
  .flag-badge{
    position:absolute; top:10%; left:50%; transform:translateX(-50%);
    font-size:clamp(1.2rem,4vw,2rem);
    font-weight:800; letter-spacing:.15em;
    display:none;
  }
  .player.flagged .flag-badge{ display:block; }

  .tc-label{
    position:absolute; bottom:10px; right:14px;
    font-variant-numeric:tabular-nums;
    font-size:clamp(0.65rem,1.4vw,0.85rem);
    font-weight:600;
    letter-spacing:.02em;
    opacity:.55;
  }

  /* ---------- Center control strip ---------- */
  #controls{
    flex:0 0 10%;
    min-width:52px; max-width:110px;
    background:var(--divider);
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    padding:.6rem .2rem;
    z-index:5;
  }
  .ctrl-btn{
    background:var(--control-btn);
    border:none; color:#fff;
    width:100%; aspect-ratio:1/1;
    max-width:64px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    margin:.35rem 0;
    touch-action:manipulation;
  }
  .ctrl-btn:active{ background:var(--control-btn-active); }
  .ctrl-btn svg{ width:55%; height:55%; }
  .ctrl-btn.small{
    max-width:40px;
    opacity:.85;
  }
  .ctrl-btn.small svg{ width:52%; height:52%; }
  #resetBtn{ position:relative; overflow:hidden; }
  .reset-fill{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background:rgba(239,68,68,.55);
    pointer-events:none;
  }

  /* ---------- Reset confirmation flash ---------- */
  #resetFlash{
    position:fixed; inset:0; z-index:40;
    background:#f8fafc;
    opacity:0;
    pointer-events:none;
  }
  #resetFlash.flash{
    animation:resetFlashPulse .5s ease-out;
  }
  @keyframes resetFlashPulse{
    0%   { opacity:.9; }
    100% { opacity:0; }
  }

  #pauseOverlay{
    position:fixed; inset:0; display:none;
    align-items:center; justify-content:center;
    background:rgba(2,6,23,.55);
    z-index:20; pointer-events:none;
  }
  #pauseOverlay.show{ display:flex; }
  #pauseOverlay span{
    background:rgba(15,23,42,.9);
    padding:.7rem 1.6rem; border-radius:999px;
    font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    font-size:1rem; color:#e2e8f0;
    border:1px solid rgba(255,255,255,.15);
  }

  /* ---------- Settings modal ---------- */
  #settingsOverlay{
    position:fixed; inset:0; z-index:30;
    background:rgba(2,6,23,.75);
    display:none; align-items:center; justify-content:center;
    padding:1rem;
  }
  #settingsOverlay.show{ display:flex; }
  #settingsModal{
    background:#111827; border:1px solid #1f2937;
    border-radius:18px; width:min(560px,94%); max-height:92vh; overflow-y:auto;
    padding:1.25rem 1.25rem 1.5rem;
  }
  #settingsModal h2{
    margin:0 0 .9rem; font-size:1.15rem; letter-spacing:.02em; color:#f1f5f9;
    display:flex; align-items:center; justify-content:space-between;
  }
  #settingsModal h2 button{
    background:none; border:none; color:#94a3b8; font-size:1.4rem; line-height:1; padding:.2rem .4rem;
  }
  .settings-section{ margin-bottom:1.1rem; }
  .settings-label{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
    color:#64748b; margin-bottom:.5rem; font-weight:700;
  }
  .preset-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
  .preset-tile{ position:relative; }
  .preset-btn{
    width:100%;
    background:#1e293b; border:1.5px solid #334155; color:#e2e8f0;
    border-radius:10px; padding:.55rem .3rem; font-size:.82rem; font-weight:600;
  }
  .preset-tile.selected .preset-btn{ border-color:var(--accent); background:#0c2a3d; color:#7dd3fc; }
  .preset-edit-btn{
    position:absolute; top:-7px; right:-7px;
    width:22px; height:22px; border-radius:50%;
    background:#334155; border:1.5px solid #0f172a; color:#cbd5e1;
    display:flex; align-items:center; justify-content:center;
    padding:0; font-size:.65rem; line-height:1;
  }
  .preset-edit-btn:active{ background:var(--accent); color:#04202e; }
  .preset-hint{
    font-size:.72rem; color:#64748b; margin-top:.6rem; line-height:1.4;
  }
  .pencil-hint{ color:#94a3b8; font-weight:700; }
  .text-link-btn{
    background:none; border:none; color:#7dd3fc;
    font-size:.75rem; text-decoration:underline;
    margin-top:.5rem; padding:.3rem 0;
  }

  .custom-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.6rem; }
  .field{ display:flex; flex-direction:column; gap:.3rem; }
  .field label{ font-size:.72rem; color:#94a3b8; }
  .field input, .field select{
    background:#1e293b; border:1px solid #334155; color:#fff;
    border-radius:8px; padding:.5rem .6rem; font-size:.95rem;
    font-variant-numeric:tabular-nums;
  }
  .toggle-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:.55rem 0; border-bottom:1px solid #1f2937;
  }
  .toggle-row:last-child{ border-bottom:none; }
  .toggle-row span{ font-size:.9rem; color:#e2e8f0; }
  .switch{ position:relative; width:44px; height:26px; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch .slider{
    position:absolute; inset:0; background:#334155; border-radius:999px; transition:.15s;
  }
  .switch .slider::before{
    content:""; position:absolute; width:20px; height:20px; left:3px; top:3px;
    background:#fff; border-radius:50%; transition:.15s;
  }
  .switch input:checked + .slider{ background:var(--accent); }
  .switch input:checked + .slider::before{ transform:translateX(18px); }

  .odds-toggle{
    display:flex; align-items:center; justify-content:space-between;
    background:#1e293b; border-radius:10px; padding:.6rem .8rem; margin-top:.6rem;
  }

  #applyBtn{
    width:100%; margin-top:1rem; padding:.8rem; border:none; border-radius:12px;
    background:var(--accent); color:#04202e; font-weight:700; font-size:1rem;
  }

  @media (orientation: portrait){
    #app{ flex-direction:column; }
    .player.p1{ transform:rotate(180deg); }
    #controls{ flex-direction:row; min-width:unset; max-width:unset; width:100%; height:64px; }
  }