/* Hosted live-view styles — lifted from the standalone tournament clock (display subset only;
   the standalone's admin/editing UI is intentionally omitted). See PT-00004. */
:root{
  --felt-0:#0a2a1f; --felt-1:#0e3a29; --felt-2:#114b34;
  --ink:#f4f7f3; --ink-dim:#a9c4b5; --ink-faint:#6f8b7d;
  --gold:#e8c870; --gold-deep:#bd9433;
  --card:rgba(255,255,255,.05); --card-line:rgba(255,255,255,.10);
  --ok:#37c98a; --warn1:#ffd24d; --warn2:#ff9b3d; --cut:#ff4d4d;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --r:18px;
  --mono:'SF Mono',ui-monospace,'Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans); color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, var(--felt-2) 0%, var(--felt-1) 45%, var(--felt-0) 100%);
  background-attachment:fixed; min-height:100%; -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(140% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%);
  mix-blend-mode:multiply;
}
.wrap{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:18px 16px 60px}

/* top bar */
.topbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand .chip{font-size:22px; color:var(--gold)}
.brand h1{font-size:16px; margin:0; font-weight:700}
.brand a{color:inherit; text-decoration:none}
.spacer{flex:1 1 auto}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:7px 12px; border-radius:999px; border:1px solid var(--card-line);
  background:var(--card); color:var(--ink-dim); white-space:nowrap}
/* PT-00026 viewer sound controls */
.sound-ctl{display:flex; align-items:center; gap:8px; margin-right:10px}
.sound-btn{font-family:inherit; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
  color:var(--ink-dim); background:var(--card); border:1px solid var(--card-line); padding:7px 12px; border-radius:999px}
.sound-btn:hover{border-color:var(--gold-deep); color:#fff}
.sound-btn.on{color:#241a05; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border:none}
/* PT-00049: audio is preferred-on but the browser hasn't unlocked it yet — pulse to prompt one click. */
.sound-btn.arming{color:#241a05; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border:none;
  animation:sndpulse 1.1s ease-in-out infinite}
@keyframes sndpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,200,112,.65)} 50%{box-shadow:0 0 0 8px rgba(232,200,112,0)}}
@media (prefers-reduced-motion: reduce){ .sound-btn.arming{animation:none; box-shadow:0 0 0 3px rgba(232,200,112,.5)} }
.voice-sel{font-family:inherit; font-size:12.5px; max-width:200px; color:var(--ink-dim);
  background:var(--card); border:1px solid var(--card-line); border-radius:10px; padding:6px 8px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint)}
.pill.live .dot{background:var(--ok); box-shadow:0 0 10px var(--ok)}
.pill.scheduled .dot{background:var(--gold)}
.pill.off .dot{background:var(--cut)}

/* progress bars */
.progress{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.pbar{position:relative; height:26px; border-radius:9px; overflow:hidden;
  border:1px solid var(--card-line); background:rgba(255,255,255,.04)}
.pbar .pfill{position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(55,201,138,.35), rgba(55,201,138,.55)); transition:width .5s ease}
.pbar.done .pfill{background:linear-gradient(90deg, rgba(55,201,138,.45), rgba(55,201,138,.7))}
.pbar.current{border-color:rgba(232,200,112,.65); box-shadow:0 0 0 1px rgba(232,200,112,.22)}
.pbar.current .pfill{background:linear-gradient(90deg, var(--warn1), var(--gold-deep))}
.pbar.tour{height:32px; border-color:rgba(232,200,112,.3)}
.pbar.tour .pfill{background:linear-gradient(90deg, rgba(55,201,138,.45), rgba(232,200,112,.75))}
.pbar .plabel{position:absolute; inset:0; display:flex; align-items:center;
  padding:0 12px; font-size:12.5px; font-weight:700; color:var(--ink-dim)}
.pbar.tour .plabel{font-size:13.5px; letter-spacing:.3px}
/* Keep the % text above the milestone pins (readable), while letting the pins stay hoverable —
   the label is text-only so it doesn't need pointer events. PT-00045. */
.pbar.tour .plabel{z-index:4; pointer-events:none}
.pbar.tour .ppct{text-shadow:0 1px 3px rgba(0,0,0,.65)}
/* Scheduled-event milestone pins on the Tournament bar (PT-00045). Thin tick + a dot "flag" at the top;
   native title tooltip on hover. Colours match the warning tiers. */
.pmarks{position:absolute; inset:0; pointer-events:none; z-index:3}
.pmark{position:absolute; top:3px; bottom:3px; width:2px; margin-left:-1px; border-radius:2px;
  pointer-events:auto; cursor:help; opacity:.92}
.pmark::before{content:""; position:absolute; top:-3px; left:-3px; width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(0,0,0,.35); box-shadow:0 1px 3px rgba(0,0,0,.5)}
.pmark:hover{opacity:1; width:3px}
.pmark.w1{background:var(--warn1)} .pmark.w1::before{background:var(--warn1)}
.pmark.w2{background:var(--warn2)} .pmark.w2::before{background:var(--warn2)}
.pmark.cut{background:var(--cut)}  .pmark.cut::before{background:var(--cut)}
.pmark.end{background:var(--gold)} .pmark.end::before{background:var(--gold)}
/* name left · percent centre · hand cards far right (PT-00027) */
.pbar .pname{flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pbar .ppct{flex:0 0 auto; text-align:center; font-variant-numeric:tabular-nums; color:var(--ink)}
.pbar .phands{flex:1 1 0; display:flex; gap:4px; align-items:center; justify-content:flex-end}
/* PT-00027: numbered playing-card hand icons; red ✕ when complete */
.hcard{position:relative; width:17px; height:23px; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(160deg,#fbfbfe,#dfe4ee); color:#1a2436;
  border:1px solid rgba(0,0,0,.35); box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; line-height:1}
.hcard.done{color:transparent; border-color:rgba(255,77,77,.55)}
.hcard.done::after{content:"\2715"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cut); font-size:18px; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* the in-progress final hand on the progress row (PT-00047) */
.hcard.current{border-color:var(--gold); box-shadow:0 0 0 1px rgba(232,200,112,.7), 0 0 6px rgba(232,200,112,.5)}

/* hero clock */
.stage{border:1px solid var(--card-line); border-radius:26px; background:var(--card);
  box-shadow:var(--shadow); padding:22px 22px 30px; text-align:center; overflow:hidden;
  position:relative; transition:border-color .4s, box-shadow .4s}
.stage-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:4px}
.corner-time{display:flex; flex-direction:column; gap:1px; min-width:0}
.corner-time.end{text-align:right}
.corner-time .ct-lab{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.corner-time .ct-val{font-size:clamp(15px,3.4vw,20px); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.corner-time.end .ct-val{color:var(--gold)}
.level-badge{display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 26px; border-radius:14px; margin-bottom:10px;
  background:linear-gradient(180deg, rgba(232,200,112,.18), rgba(232,200,112,.05));
  border:1px solid rgba(232,200,112,.35)}
.level-badge .lab{font-size:12px; letter-spacing:3px; color:var(--gold); font-weight:700; text-transform:uppercase}
.level-badge .val{font-size:30px; font-weight:800; line-height:1}
.status-line{color:var(--ink-dim); font-size:14px; margin:4px 0 18px; min-height:18px}
.clocks{display:flex; justify-content:center; align-items:flex-end; gap:clamp(20px,6vw,70px); flex-wrap:wrap}
.clock{display:flex; flex-direction:column; align-items:center; gap:6px}
.clock .lab{font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.clock .time{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; line-height:.95; letter-spacing:-1px}
.clock.hero .time{font-size:clamp(64px, 17vw, 150px)}
.clock.hero .lab{color:var(--gold)}
.clock.sub .time{font-size:clamp(34px, 8vw, 64px); color:var(--ink-dim)}
.stage.warn1{border-color:rgba(255,210,77,.55)}
.stage.warn1 .clock.hero .time{color:var(--warn1)}
.stage.warn2{border-color:rgba(255,155,61,.6)}
.stage.warn2 .clock.hero .time{color:var(--warn2)}
.stage.cut{border-color:rgba(255,77,77,.7); animation:pulse 1.05s ease-in-out infinite}
.stage.cut .clock.hero .time{color:var(--cut)}
@keyframes pulse{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 2px rgba(255,77,77,.35), 0 0 46px rgba(255,77,77,.35)}}
.stage.ended{border-color:rgba(232,200,112,.5)}

/* final hands tokens */
.hands{margin-top:22px; display:none}
.hands.show{display:block; animation:fadein .35s ease}
@keyframes fadein{from{opacity:0; transform:translateY(8px)}to{opacity:1}}
.hands .htitle{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:12px}
.hands .htitle b{color:#fff}
.tokens{display:flex; justify-content:center; gap:14px; flex-wrap:wrap}
.token{width:74px; height:96px; border-radius:13px; position:relative;
  background:linear-gradient(160deg,#fbfbfe,#dfe4ee); color:#1a2436;
  border:1px solid rgba(0,0,0,.25); box-shadow:0 6px 16px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  transition:.18s; user-select:none; cursor:default}
.token .corner{position:absolute; top:7px; left:9px; font-size:12px; color:#8a96ab; font-weight:700}
.token.done{background:linear-gradient(160deg,#21402f,#13261c); color:var(--cut);
  border-color:rgba(255,77,77,.5); box-shadow:none}
.token.done::after{content:"\2715"; font-size:46px; font-weight:900; color:var(--cut);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-shadow:0 2px 10px rgba(0,0,0,.5)}
.token.done .label{visibility:hidden}
/* PT-00047: the final hand being played RIGHT NOW — gold ring + pulse so it's obvious which hand is live. */
.token.current{border-color:var(--gold); transform:translateY(-2px); animation:tokpulse 1.4s ease-in-out infinite}
.token.current .label{color:#1a2436; font-weight:800}
@keyframes tokpulse{
  0%,100%{box-shadow:0 0 0 2px rgba(232,200,112,.5), 0 0 10px rgba(232,200,112,.35)}
  50%{box-shadow:0 0 0 2px rgba(232,200,112,.9), 0 0 22px rgba(232,200,112,.6)}}
@media (prefers-reduced-motion: reduce){ .token.current{animation:none; box-shadow:0 0 0 2px rgba(232,200,112,.8)} }
.hands .remain{margin-top:14px; font-size:15px; color:var(--ink-dim)}
.hands .remain b{color:#fff; font-size:18px}

/* players */
.players{margin-top:18px; display:none}
.players.show{display:block}
.card{border:1px solid var(--card-line); border-radius:var(--r); background:var(--card); box-shadow:var(--shadow); padding:18px}
.players h2{font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin:0 0 14px}
.pcount{display:flex; align-items:baseline; gap:10px; margin-bottom:14px}
.pcount .big{font-size:32px; font-weight:800; font-family:var(--mono)}
.pcount .sub{color:var(--ink-faint)}
.plist{display:grid; gap:8px}
.prow{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:11px;
  border:1px solid var(--card-line); background:rgba(255,255,255,.03)}
.prow .place{font-family:var(--mono); font-weight:800; color:var(--gold); min-width:42px}
/* PT-00047: show the FULL avatar crop (head + shoulders) on each row — a rounded rectangle with
   object-fit:contain so nothing is clipped, instead of the old circle that center-cropped it away. */
.prow .pavatar{width:64px; height:64px; border-radius:12px; object-fit:contain; flex:0 0 auto;
  border:1px solid var(--card-line); background:rgba(0,0,0,.22)}
.prow .placeholder-av{display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--ink-dim); font-size:24px}
.prow .pname{flex:1 1 auto; font-weight:600}
.prow .chips{font-family:var(--mono); color:var(--ink-dim); font-size:13px}
.prow.out{opacity:.62}
.prow.out .pname{text-decoration:line-through; color:var(--ink-dim)}
.prow.winner{border-color:rgba(232,200,112,.5); background:rgba(232,200,112,.08)}
.prow.winner .place{color:#fff}
.prow.leader{border-color:rgba(55,201,138,.45)}
.badge-in{font-size:11px; color:var(--ok); font-weight:700; letter-spacing:1px}

/* password gate (PT-00004 placeholder; real verification in PT-00006) */
.gate{max-width:420px; margin:12vh auto 0; text-align:center}
.gate .card{padding:28px}
.gate h2{color:var(--gold); margin-top:0}
.gate input[type=password]{width:100%; padding:11px 13px; border-radius:11px; margin-bottom:14px;
  border:1px solid var(--card-line); background:rgba(255,255,255,.06); color:var(--ink); font-size:15px}
.gate input[type=password]::placeholder{color:var(--ink-faint)}
.gate button{width:100%; padding:11px; border-radius:11px; border:none; cursor:pointer; font-weight:700;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#241a05; font-size:15px}
.gate button:hover{filter:brightness(1.07)}
.gate .alert-danger{background:rgba(255,77,77,.12); border:1px solid rgba(255,77,77,.4);
  color:#ffb3b3; padding:9px 12px; border-radius:10px; margin-bottom:14px; font-size:14px}

.foot{text-align:center; margin-top:22px; color:var(--ink-faint); font-size:13px}
@media (max-width:560px){
  .clock.sub .time{font-size:clamp(28px,11vw,44px)}
  .level-badge .val{font-size:24px}
}

/* Director / chip-leader announcement banner, shown to ALL viewers (PT-00045 S7). */
.announce-banner{margin:0 0 12px; padding:12px 16px; border-radius:14px; text-align:center;
  font-weight:700; font-size:15px; color:#241a05; line-height:1.35;
  background:linear-gradient(180deg, var(--warn1), var(--gold-deep));
  border:1px solid var(--gold); box-shadow:var(--shadow);
  opacity:0; transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease}
.announce-banner.show{opacity:1; transform:none}

/* ---- Tournament Director in-page control surface (PT-00045) ----
   Fixed to the bottom so it never covers the clock/hero; TD-only (server-gated). Slim toolbar always
   visible, drawer slides up above it. z-index above the felt vignette (body::before is z:0, .wrap z:1). */
.td-console{position:fixed; left:0; right:0; bottom:0; z-index:50; font-family:var(--sans);
  pointer-events:none; /* only the bar/drawer catch clicks, not the empty gap */}
.td-console > *{pointer-events:auto}
.td-bar{display:flex; align-items:center; gap:10px; padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(10,42,31,.86), rgba(10,42,31,.97));
  border-top:1px solid var(--card-line); backdrop-filter:blur(8px); box-shadow:0 -8px 30px rgba(0,0,0,.4)}
.td-badge{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12.5px; letter-spacing:.4px;
  color:#241a05; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); padding:6px 11px; border-radius:999px;
  border:none; cursor:pointer; font-family:inherit}
.td-badge:hover{filter:brightness(1.06)}
.td-quick{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.td-spacer{flex:1 1 auto}
.td-toggle{font-family:inherit; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap;
  color:var(--ink); background:var(--card); border:1px solid var(--card-line); padding:7px 14px; border-radius:999px}
.td-toggle:hover{border-color:var(--gold-deep); color:#fff}
.td-caret{display:inline-block; transition:transform .18s ease; font-size:11px}
.td-console.open .td-caret{transform:rotate(180deg)}
/* Shared button look for TD actions added by later subtasks. */
.td-btn{font-family:inherit; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
  color:var(--ink); background:var(--card); border:1px solid var(--card-line); padding:7px 12px; border-radius:10px}
.td-btn:hover:not(:disabled){border-color:var(--gold-deep); color:#fff}
.td-btn:disabled{opacity:.5; cursor:default}
.td-btn.primary{color:#241a05; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border:none}
/* Full-width button that may wrap (long labels) — never overflows its drawer cell. PT-00045 #1. */
.td-btn.block{display:block; width:100%; white-space:normal; text-align:center; line-height:1.25}
.td-btn.danger{color:#ffb3b3; border-color:rgba(255,77,77,.45)}
.td-btn.danger:hover:not(:disabled){color:#fff; border-color:var(--cut); background:rgba(255,77,77,.18)}
.td-input{font-family:inherit; font-size:13px; color:var(--ink); background:rgba(0,0,0,.25);
  border:1px solid var(--card-line); border-radius:9px; padding:6px 9px}
.td-input:focus{outline:none; border-color:var(--gold-deep)}
/* Drawer */
.td-drawer{max-height:min(56vh,520px); overflow:auto; background:linear-gradient(180deg, rgba(14,58,41,.97), rgba(10,42,31,.98));
  border-top:1px solid var(--card-line); box-shadow:0 -14px 40px rgba(0,0,0,.5)}
.td-drawer[hidden]{display:none}
.td-drawer-inner{max-width:1100px; margin:0 auto; padding:16px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.td-sec{background:var(--card); border:1px solid var(--card-line); border-radius:var(--r); padding:12px 14px; min-width:0}
.td-sec-wide{grid-column:1 / -1}
.td-sec h3{margin:0 0 9px; font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--gold);
  display:flex; align-items:center; justify-content:space-between; gap:8px}
.td-sec-body{display:flex; flex-direction:column; gap:9px}
.td-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.td-empty{margin:0; color:var(--ink-faint); font-size:12.5px; font-style:italic}
.td-drawer-foot{max-width:1100px; margin:0 auto; padding:0 16px 14px; color:var(--ink-faint); font-size:12px}
.td-drawer-foot kbd{background:rgba(0,0,0,.35); border:1px solid var(--card-line); border-radius:6px;
  padding:1px 6px; font-family:var(--mono); font-size:11px; color:var(--ink-dim)}
/* Monitoring (S2) */
.td-mon-dot{width:10px; height:10px; border-radius:50%; background:var(--ink-faint); flex:0 0 auto}
.td-mon-dot.ok{background:var(--ok); box-shadow:0 0 10px var(--ok)}
.td-mon-dot.crit{background:var(--warn2); box-shadow:0 0 10px var(--warn2); animation:sndpulse 1.1s ease-in-out infinite}
.td-mon-dot.err{background:var(--cut); box-shadow:0 0 10px var(--cut)}
.td-mon-status{font-size:12.5px; color:var(--ink-dim); line-height:1.4}
.td-mon-status.bad{color:#ffb3b3}
.td-lab{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-faint); margin-top:2px}
.td-hint{font-size:11.5px; color:var(--ink-faint); margin:0}
/* S4: the TD can click hand tokens on the live clock to toggle them complete. */
.td-active .hcard, .td-active .token{cursor:pointer}
.td-active .hcard:hover{outline:2px solid var(--gold); outline-offset:1px}
.td-active .token:hover{outline:2px solid var(--gold); outline-offset:2px}
.td-busy{opacity:.5}
/* Roster quick-edits (S5) */
.td-roster{display:flex; flex-direction:column; gap:6px; max-height:230px; overflow:auto}
.td-prow{display:flex; align-items:center; gap:6px}
.td-prow.out{opacity:.55}
.td-pname{flex:1 1 auto; min-width:70px; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.td-seat{width:3.2rem; text-align:center}
.td-chips{width:6rem; text-align:right}
.td-prow .td-btn{padding:5px 8px; font-size:12px}
.td-addrow{margin-top:8px}
.td-addrow #tdAddName{flex:1 1 auto}
/* Activity log (S7 / #4) */
.td-log{max-height:150px; overflow:auto; display:flex; flex-direction:column; gap:3px;
  font-family:var(--mono); font-size:11.5px; line-height:1.45; color:var(--ink-dim);
  background:rgba(0,0,0,.28); border:1px solid var(--card-line); border-radius:10px; padding:8px 10px}
.td-log .le{white-space:normal; word-break:break-word}
.td-log .le .t{color:var(--ink-faint); margin-right:6px}
.td-log .le.ann{color:var(--gold)}
.td-log .le.err{color:#ffb3b3}
.td-log-clear{font-family:inherit; font-size:10.5px; text-transform:none; letter-spacing:0; font-weight:600;
  color:var(--ink-faint); background:transparent; border:1px solid var(--card-line); border-radius:7px; padding:2px 8px; cursor:pointer}
.td-log-clear:hover{color:#fff; border-color:var(--gold-deep)}
a.td-log-clear{text-decoration:none; display:inline-block}
/* Rows preloaded from the persistent server event log (PT-00057) — dimmed so live activity stands out */
.td-log .le.hist{opacity:.62}
/* Final-hands bulk + per-hand checkboxes (PT-00045) */
.td-hands-grid{display:flex; flex-direction:column; gap:7px; margin-top:9px}
.td-hrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.td-hlab{flex:0 0 auto; min-width:64px; font-size:12px; color:var(--ink-dim)}
.td-hboxes{display:flex; gap:8px; flex-wrap:wrap}
.td-hbox{display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--ink-dim); cursor:pointer;
  border:1px solid var(--card-line); border-radius:8px; padding:2px 7px}
.td-hbox input{accent-color:var(--gold-deep); cursor:pointer}
.td-video{width:100%; max-height:130px; object-fit:contain; border-radius:10px; background:#000; margin-top:2px}
.td-check{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-dim); cursor:pointer}
.td-check input{accent-color:var(--gold-deep)}
/* Toast (action feedback) */
.td-toast{position:fixed; left:50%; bottom:64px; transform:translateX(-50%);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60;
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; max-width:90vw;
  background:rgba(0,0,0,.82); color:var(--ink); border:1px solid var(--card-line)}
.td-toast.show{opacity:1}
.td-toast.ok{border-color:var(--ok); color:#c7f7e2}
.td-toast.err{border-color:var(--cut); color:#ffb3b3}
@media (max-width:560px){
  .td-drawer-inner{grid-template-columns:1fr}
  .td-badge{font-size:11.5px; padding:5px 9px}
}

/* ---- TD setup wizard (PT-00057): optional left-edge step rail, TD-only ---- */
.td-wiz{position:fixed; left:10px; top:60px; z-index:40; width:236px; font-family:var(--sans);
  max-height:calc(100vh - 130px); display:flex; flex-direction:column}
/* Reserve space so the wizard NEVER overlaps the live board: a wide gutter when the panel is
   expanded, a slim one for the collapsed edge handle. */
body.tdwiz-open .wrap{padding-left:252px; max-width:1352px}
body.tdwiz-slim .wrap{padding-left:46px; max-width:1130px}
/* Wide screens: the centered 1100px board already leaves a free left margin bigger than the rail —
   let the rail live in that dead space and keep the board perfectly centered (no shift). The
   thresholds are 1100 + 2×gutter, i.e. the width where margin ≥ gutter on each side. PT-00057. */
@media (min-width:1192px){ body.tdwiz-slim .wrap{padding-left:16px; max-width:1100px} }
@media (min-width:1604px){ body.tdwiz-open .wrap{padding-left:16px; max-width:1100px} }
.td-wiz-panel{display:flex; flex-direction:column; min-height:0; overflow:auto;
  background:linear-gradient(180deg, rgba(14,58,41,.97), rgba(10,42,31,.98));
  border:1px solid var(--card-line); border-radius:14px; box-shadow:var(--shadow)}
.td-wiz.slim .td-wiz-panel{display:none}
/* Collapsed = a vertical drawer-handle tab hugging the left edge, » pointing the way open. */
.td-wiz.slim{left:0; top:50%; max-height:none; transform:translateY(-50%); width:auto}
.td-wiz-slimbtn{display:none; align-items:center; gap:7px; font-family:inherit; font-weight:700; font-size:12px;
  letter-spacing:.4px; color:#241a05; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); border:none;
  cursor:pointer; padding:14px 7px; border-radius:0 12px 12px 0; box-shadow:var(--shadow);
  writing-mode:vertical-rl; text-orientation:mixed}
.td-wiz-slimbtn:hover{filter:brightness(1.08); padding-right:11px}
.td-wiz.slim .td-wiz-slimbtn{display:inline-flex}
.td-wiz-slimchev{font-size:14px; transform:rotate(-90deg); animation:wizchev 1.6s ease-in-out infinite}
@keyframes wizchev{0%,100%{translate:0 0}50%{translate:3px 0}}
.td-wiz-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 8px}
.td-wiz-title{font-size:12.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--gold)}
.td-wiz-collapse{font-family:inherit; font-size:13px; color:var(--ink-dim); background:none; cursor:pointer;
  border:1px solid var(--card-line); border-radius:8px; padding:1px 8px}
.td-wiz-collapse:hover{color:#fff; border-color:var(--gold-deep)}
.td-wiz-steps{display:flex; flex-direction:column; gap:7px; padding:0 10px 8px}
.td-wiz-step{display:flex; gap:9px; align-items:flex-start; padding:8px 9px; border-radius:11px;
  border:1px solid var(--card-line); background:var(--card)}
.td-wiz-mark{flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700; color:var(--ink-dim);
  border:1px solid var(--card-line); margin-top:1px}
.td-wiz-body{min-width:0; flex:1}
.td-wiz-t{font-size:12.5px; font-weight:700; color:var(--ink)}
.td-wiz-s{font-size:11.5px; color:var(--ink-faint); margin-top:1px}
.td-wiz-acts{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.td-wiz-btn{font-size:12px; padding:5px 9px; border-radius:8px}
.td-wiz-time{width:100%; font-size:12px; color-scheme:dark}
.td-startat{color-scheme:dark; min-width:0; flex:1}
.td-wiz-foot{padding:2px 12px 11px; font-size:11px; color:var(--ink-faint)}
.td-wiz-foot kbd{background:rgba(0,0,0,.35); border:1px solid var(--card-line); border-radius:5px;
  padding:0 5px; font-family:var(--mono); font-size:10px; color:var(--ink-dim)}
/* Tournament-settings dialog (PT-00057): sticky modal hosting the real Edit page in an iframe. */
.td-modal{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.62); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px}
.td-modal[hidden]{display:none}
.td-modal-box{display:flex; flex-direction:column; width:min(1080px,96vw); height:min(860px,92vh);
  background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.6)}
.td-modal-head{display:flex; align-items:center; gap:12px; padding:10px 14px; font-family:var(--sans);
  background:linear-gradient(180deg, rgba(14,58,41,.98), rgba(10,42,31,.98)); border-bottom:1px solid var(--card-line)}
.td-modal-title{font-weight:800; font-size:13.5px; letter-spacing:.4px; color:var(--gold)}
.td-modal-hint{flex:1; font-size:12px; color:var(--ink-faint)}
.td-modal-frame{flex:1; width:100%; border:0; background:#fff}
.td-modal-nudge{animation:tdnudge .3s ease}
@keyframes tdnudge{0%,100%{transform:scale(1)}40%{transform:scale(1.012)}}
body.td-modal-open{overflow:hidden}
/* Ask dialog (PT-00057): small force-a-choice confirm card on the same overlay. */
.td-ask{z-index:80}
.td-ask-box{width:min(460px,92vw); height:auto; padding:18px 20px; font-family:var(--sans);
  background:linear-gradient(180deg, rgba(14,58,41,.99), rgba(10,42,31,.99)); border:1px solid var(--card-line)}
.td-ask-title{font-weight:800; font-size:14px; letter-spacing:.3px; color:var(--gold); margin-bottom:8px}
.td-ask-msg{font-size:13px; color:var(--ink-dim); line-height:1.5; margin-bottom:14px; white-space:pre-line}
.td-ask-btns{display:flex; gap:8px; justify-content:flex-end}
.td-ask-input{width:100%; margin-bottom:14px; font-size:13px}

@media (max-width:900px){
  /* Small screens: the rail would cover the clock — dock it above the TD bar instead, and show the
     collapsed handle horizontally in the lower-left corner. */
  .td-wiz{left:8px; right:8px; top:auto; bottom:58px; width:auto; max-height:46vh}
  .td-wiz.slim{left:0; right:auto; top:auto; bottom:64px; transform:none}
  .td-wiz-slimbtn{writing-mode:horizontal-tb; padding:7px 12px 7px 8px}
  .td-wiz-slimbtn:hover{padding-right:12px}
  body.tdwiz-open .wrap, body.tdwiz-slim .wrap{padding-left:16px; max-width:1100px}
}