/* Shared "diamond" board styles for baseball-family scoreboards (wiffleball,
 * baseball, softball): split-screen color panels with top=+1/bottom=-1 zones,
 * a center stat bar, footer (clock/timer/pause/gear), pause overlay, first-run
 * hint. Built by TAS.diamondBoard. Load after brand.css + tasGlobal.css. */
/* Re-based onto the shared design tokens (brand.css) so the diamond family
 * (wiffleball/baseball/softball/tennis) shares one font, ink, muted, accent and
 * default team palette with every other game. --left/--right are runtime
 * defaults the board JS overrides per team. --line stays a functional hairline. */
:root { --left:var(--ta-team-1); --right:var(--ta-team-2); --left-text:#fff; --right-text:#fff;
  --line:rgba(255,255,255,.10); --d-ink:var(--ta-fg); --d-muted:var(--ta-muted);
  --d-num:var(--ta-font); --d-mono:var(--ta-font-mono); }
.diamond, .diamond * { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html.diamond, body.diamond { height:100%; overflow:hidden; }
body.diamond { font-family:var(--d-num); background:var(--ta-bg-deep); color:var(--d-ink); user-select:none; -webkit-user-select:none; touch-action:manipulation; -webkit-touch-callout:none; }
#board { position:fixed; inset:0; height:100vh; height:100dvh; width:100vw; display:flex; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }

.panel { position:relative; flex:1 1 50%; overflow:hidden; }
.panel.left { background-color:var(--left); background-image:linear-gradient(155deg, rgba(255,255,255,.12), rgba(0,0,0,.14) 52%, rgba(0,0,0,.34)); }
.panel.right { background-color:var(--right); background-image:linear-gradient(155deg, rgba(255,255,255,.12), rgba(0,0,0,.14) 52%, rgba(0,0,0,.34)); }
.panel.left .content { color:var(--left-text); }
.panel.right .content { color:var(--right-text); }
.content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); text-align:center; }
.team-name { position:absolute; top:calc(env(safe-area-inset-top) + clamp(10px,3.2vmin,34px)); left:0; right:0; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(15px,4.4vmin,46px); text-shadow:0 2px 10px rgba(0,0,0,.35); padding:0 12px; word-break:break-word; line-height:1.05; }
.score { font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(64px,34vw,420px); line-height:.82; letter-spacing:-.02em; text-shadow:0 6px 26px rgba(0,0,0,.40); max-width:100%; padding:0 6px; }
@media (orientation:landscape) { .score { font-size:clamp(72px,26vmin,420px); } }
@media (max-width:380px) { .team-name { font-size:clamp(15px,5vw,22px); } }

.zone { position:absolute; left:0; right:0; height:50%; display:flex; align-items:flex-start; justify-content:center; cursor:pointer; z-index:3; }
.panel .zone.top { top:0; align-items:flex-start; }
.panel .zone.bottom { bottom:0; align-items:flex-end; }
.zone .hint { font-size:clamp(13px,2.6vmin,26px); font-weight:700; opacity:.42; padding:clamp(46px,9vmin,120px) 6px; pointer-events:none; transition:opacity .15s; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
/* Static mid-line per panel makes the two tap halves obvious; :active gives touch feedback. */
.panel .zone.top::after, .panel .zone.bottom::after { content:""; position:absolute; left:14%; right:14%; height:2px; background:rgba(255,255,255,.16); }
.panel .zone.top::after { bottom:0; }
.panel .zone.bottom::after { top:0; }
.panel .zone:active { background:rgba(255,255,255,.10); }
.zone.flash { animation:flash .32s ease-out; }
@keyframes flash { 0% { background:rgba(255,255,255,.42); } 100% { background:rgba(255,255,255,0); } }
.floatlbl { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:900; font-size:clamp(34px,9vmin,120px); pointer-events:none; opacity:0; text-shadow:0 3px 14px rgba(0,0,0,.5); z-index:4; }
.floatlbl.go { animation:pop .55s ease-out; }
@keyframes pop { 0% { opacity:0; transform:translate(-50%,-30%) scale(.6); } 25% { opacity:.9; } 100% { opacity:0; transform:translate(-50%,-95%) scale(1.05); } }

#center { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:clamp(92px,22vw,210px); background:linear-gradient(180deg, rgba(8,10,7,.92), rgba(8,10,7,.82)); border-left:1px solid var(--line); border-right:1px solid var(--line); box-shadow:0 0 40px rgba(0,0,0,.5); display:flex; flex-direction:column; align-items:stretch; padding:calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 8px); z-index:5; gap:6px; }
@media (max-width:380px) { #center { width:96px; } }
@media (min-width:560px) { #center { width:clamp(150px,24vw,210px); } }
.stat { position:relative; flex:1 1 0; min-height:clamp(56px,9vh,160px); border-bottom:1px solid var(--line); padding:clamp(3px,1vmin,10px) 4px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.stat:last-of-type { border-bottom:none; }
.stat-arrow { flex:0 0 auto; font-size:clamp(12px,2.4vmin,22px); font-weight:700; line-height:1; color:var(--d-ink); opacity:.34; pointer-events:none; }
.stat-mid { flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.stat-label { font-size:clamp(9px,2.4vw,16px); letter-spacing:.10em; text-transform:uppercase; color:var(--d-muted); font-weight:700; pointer-events:none; white-space:nowrap; line-height:1.05; }
.stat-value { font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(26px,8vw,66px); line-height:1; margin-top:1px; pointer-events:none; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.stat .zone.top { top:0; } .stat .zone.bottom { bottom:0; }
.stat.hidden, .footer-item.hidden { display:none; }
.half-badge { margin-top:6px; font-size:clamp(9px,1.7vmin,14px); font-weight:800; letter-spacing:.10em; padding:3px 9px; border-radius:var(--ta-radius-pill); background:var(--ta-color-accent); color:var(--ta-on-accent); pointer-events:none; box-shadow:var(--ta-shadow-1); white-space:nowrap; }
.atbat { position:absolute; top:calc(env(safe-area-inset-top) + clamp(52px,12vmin,92px)); left:0; right:0; text-align:center; font-size:clamp(10px,2.2vmin,18px); font-weight:800; letter-spacing:.14em; opacity:0; transition:opacity .2s; text-shadow:0 2px 8px rgba(0,0,0,.45); }
.atbat.on { opacity:.95; animation:blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity:.95; } 50% { opacity:.45; } }

#footer { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:6px; }
.footer-item { text-align:center; line-height:1.05; }
.footer-cap { font-size:clamp(8px,1.3vmin,11px); letter-spacing:.14em; text-transform:uppercase; color:var(--d-muted); font-weight:700; }
#clock { font-family:var(--d-mono); font-weight:700; font-size:clamp(14px,3vmin,26px); font-variant-numeric:tabular-nums; }
#timer { font-family:var(--d-mono); font-weight:700; font-size:clamp(14px,3vmin,26px); font-variant-numeric:tabular-nums; color:var(--ta-color-accent); }
.ctrl-row { display:flex; gap:8px; margin-top:6px; align-items:center; justify-content:center; }
.ctrlBtn { width:clamp(38px,11vw,54px); height:clamp(38px,11vw,54px); border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--d-ink); transition:transform .25s, background .2s; }
@media (max-width:380px) { #clock, #timer { font-size:13px; } }
.ctrlBtn:active { transform:scale(.92); background:rgba(255,255,255,.14); }
#gearBtn:active { transform:rotate(50deg) scale(.92); }
.ctrlBtn svg { width:54%; height:54%; }
#pauseBtn.paused { background:var(--ta-color-accent-soft); border-color:var(--ta-color-accent); color:var(--ta-color-accent); }

body.spectating .panel .zone, body.spectating #center .zone { pointer-events:none; }
body.spectating #pauseBtn, body.spectating #gearBtn { display:none; }
body.frozen .panel .zone, body.frozen #center .zone { pointer-events:none; }
body.ta-nohints .zone .hint, body.ta-nohints .stat-arrow { opacity:0 !important; }

/* Win overlay — same tokenized design as every other competitive game (counter
   family). Diamond ball games are freeplay so they never open it; tennis does. */
#winScreen { position:fixed; inset:0; z-index:var(--ta-z-win); background:var(--ta-scrim-overlay); display:none; align-items:center; justify-content:center; padding:24px; }
#winScreen.open { display:flex; }
#winScreen .card { text-align:center; max-width:360px; }
#winScreen h2 { font-size:1.8rem; margin:0 0 .4rem; }
#winScreen .who { font-size:1.3rem; font-weight:800; color:var(--ta-color-accent); margin-bottom:1.2rem; }
#pauseScreen { position:fixed; inset:0; z-index:var(--ta-z-win); background:var(--ta-scrim-overlay); display:none; align-items:center; justify-content:center; padding:24px; }
#pauseScreen.open { display:flex; }
.pause-card { width:100%; max-width:360px; text-align:center; }
.pause-title { font-size:30px; font-weight:800; letter-spacing:.02em; }
.pause-time { font-family:var(--d-mono); font-weight:700; color:var(--ta-color-accent); font-size:46px; font-variant-numeric:tabular-nums; margin:8px 0 22px; }
.d-btn { width:100%; padding:14px; border-radius:var(--ta-radius-md); cursor:pointer; font-size:16px; font-weight:800; letter-spacing:.02em; border:1px solid var(--line); color:var(--d-ink); background:rgba(255,255,255,.06); margin-top:8px; }
.d-btn.warn { background:var(--ta-color-danger-soft); border-color:var(--ta-color-danger); color:var(--ta-color-danger); }
.d-btn:active { transform:scale(.99); }

#hint { position:fixed; inset:0; z-index:var(--ta-z-hint); background:var(--ta-scrim-hint); display:flex; align-items:center; justify-content:center; padding:30px; text-align:center; cursor:pointer; }
#hint.tas-hidden { display:none; }
#hint .card { max-width:340px; }
#hint h2 { font-size:24px; margin-bottom:14px; }
#hint p { font-size:16px; line-height:1.6; color:var(--ta-fg); }
#hint .tap { margin-top:22px; font-size:13px; color:var(--d-muted); letter-spacing:.1em; text-transform:uppercase; }

/* Team/player setup styling is shared in tasGlobal.css (.ta-cfg). */