/* ==========================================================================
   DeuceMate — browser watch-scorer playground styles.
   Layers on top of site.css (shares its colour variables and dark theme).
   ========================================================================== */

.demo-wrap { max-width: 560px; margin: 0 auto; }

/* ---- Setup card ---------------------------------------------------------- */
.setup-card {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.setup-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.setup-card h3:not(:first-child) { margin-top: 26px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opt {
  text-align: left; cursor: pointer; color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 15px; font: inherit; font-size: .95rem; font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.opt small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: 3px; }
.opt:hover { border-color: rgba(255,255,255,.2); }
.opt[aria-pressed="true"] {
  border-color: rgba(47,208,138,.55); background: rgba(47,208,138,.12);
  box-shadow: 0 0 0 1px rgba(47,208,138,.35) inset;
}
.setup-actions { margin-top: 26px; }

/* ---- The watch ----------------------------------------------------------- */
.watch-stage { display: flex; flex-direction: column; align-items: center; }
.watch-frame {
  position: relative; width: 300px; max-width: 86vw; aspect-ratio: 396 / 484;
  border-radius: 64px / 56px; padding: 16px;
  background: linear-gradient(160deg, #2b3034 0%, #0a0d0e 70%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow), 0 0 70px -16px rgba(47,208,138,.4);
}
.watch-frame::after { /* digital crown hint */
  content: ""; position: absolute; right: -5px; top: 38%; width: 6px; height: 42px;
  border-radius: 4px; background: linear-gradient(#3a4044, #15191a);
}
.watch-screen {
  position: relative; width: 100%; height: 100%;
  background: #000; border-radius: 50px / 44px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; cursor: pointer;
  padding: 14px 15px 12px; -webkit-user-select: none; user-select: none;
}
.watch-screen:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.toast {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(47,208,138,.18); border: 1px solid rgba(47,208,138,.4);
  color: #d9ffe9; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: 3px 11px; border-radius: 999px; z-index: 5; white-space: nowrap;
}

/* ---- Scoreboard — mirrors the watchOS ContentView layout ----------------- */
/* Per-player tinted cards: server ball + "Me"/"Op" + score cells + a compact
   point badge (not the big iPhone-style number). Colours are the app's
   Classic theme — me #33c282 (green), opponent #428aed (blue),
   meRow #21472e, opponentRow #242e47, surface #1f2129. */
.w-card {
  display: flex; flex-direction: column; gap: 6px;
  background: #1f2129; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 5px 7px;
}
.w-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 7px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
}
.w-row.me  { background: rgba(33,71,46,.55); }   /* meRow @ 0.55 */
.w-row.opp { background: rgba(36,46,71,.55); }   /* opponentRow @ 0.55 */
.w-server {
  position: relative; width: 22px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
}
.w-server.idle::after {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  background: rgba(255,255,255,.13); border: .5px solid rgba(0,0,0,.55);
}
/* Second-serve badge — mirrors ContentView.serverIndicator ~L470-479
   (Color.yellow / 10pt circle / black bold "2", top-trailing of the ball). */
.w-2nd-badge {
  position: absolute; top: -4px; right: -4px; width: 10px; height: 10px;
  border-radius: 50%; background: #FFD60A; color: #000;
  font-size: 8px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.w-name { font-weight: 800; font-size: .92rem; color: #fff; margin-right: auto; }
.w-cells { display: flex; align-items: center; gap: 4px; }
.w-cell {
  min-width: 23px; padding: 2px 5px; border-radius: 7px; text-align: center;
  font-weight: 700; font-size: .95rem; line-height: 1.15; color: #f3f6f5;
  background: rgba(255,255,255,.14);            /* completed / inactive set */
}
.w-cell sup { font-size: .56em; font-weight: 700; opacity: .85; margin-left: 1px; }
.w-row.me  .w-cell.active { background: #33c282; }   /* current set games, me */
.w-row.opp .w-cell.active { background: #428aed; }   /* current set games, opponent */
.w-pts {
  min-width: 30px; padding: 3px 6px; border-radius: 8px; text-align: center;
  font-weight: 800; font-size: .95rem; line-height: 1; color: #fff; transition: background .25s ease;
}
.w-row.me  .w-pts { background: rgba(51,194,130,.30); }   /* current game points, me */
.w-row.opp .w-pts { background: rgba(66,138,237,.30); }   /* current game points, opponent */
.w-row.me  .w-pts.flash { background: rgba(51,194,130,.85); }
.w-row.opp .w-pts.flash { background: rgba(66,138,237,.85); }
.w-pts[hidden] { display: none; }

.w-momentum {
  display: flex; gap: 4px; align-items: center; margin-top: 7px; padding: 5px 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
}
.w-pip { flex: 1; height: 5px; border-radius: 2px; background: rgba(255,255,255,.15); }
.w-pip.me  { background: #33c282; }
.w-pip.opp { background: #428aed; }

.w-foot { text-align: center; font-size: .62rem; color: rgba(255,255,255,.42); margin-top: 7px; letter-spacing: .02em; }

.banner {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: 50px / 44px; padding: 18px;
}
/* `display: flex` above would otherwise defeat the `hidden` attribute (an author
   rule beats the UA `[hidden]{display:none}`), leaving the overlay on the watch
   face during play. Re-assert it with higher specificity so the JS toggle works. */
.banner[hidden] { display: none; }
.banner-text { font-size: 1.25rem; font-weight: 850; }
.banner .btn { padding: 9px 16px; font-size: .9rem; }

/* ---- Post-point categorisation sheet — mirrors PointCategorySheet.swift -- */
.sheet {
  position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column;
  background: #101316; border-radius: 50px / 44px; overflow: hidden;
}
.sheet[hidden] { display: none; } /* see .banner[hidden] note above */
.sheet-header {
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 14px 30px 10px; min-height: 44px; flex: none;
}
.sheet-back {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font-size: 20px; font-weight: 800;
  cursor: pointer; padding: 4px 9px; line-height: 1;
}
.sheet-title { font-size: .88rem; font-weight: 800; color: #fff; line-height: 1.35; }
.sheet-title .sub { display: block; font-weight: 600; font-size: .74rem; color: rgba(255,255,255,.75); margin-top: 2px; }
.sheet-2nd {
  display: inline-block; margin-left: 6px; background: #FFD60A; color: #000;
  font-size: .6rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: middle;
}
.sheet-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  padding: 8px 12px; flex: 1; align-content: start;
}
.sheet-btn {
  position: relative; cursor: pointer; font: inherit; font-weight: 700; font-size: .78rem;
  color: #fff; border: 0; border-radius: 10px; padding: 11px 6px; text-align: center;
  transition: opacity .15s ease;
}
.sheet-btn.full { grid-column: 1 / -1; }
.sheet-btn.dimmed { opacity: .35; }
.sheet-btn:disabled { cursor: default; }
.sheet-btn .check {
  position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #052015; font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.sheet-outcome-doubleFault { background: #DB5C5C; }
.sheet-outcome-winner { background: #4DC780; }
.sheet-outcome-forcedError { background: #EBB34D; }
.sheet-outcome-unforcedError { background: #A880EB; }
.sheet-shot { background: #428aed; }
.sheet-undo {
  cursor: pointer; font: inherit; font-weight: 700; font-size: .78rem; color: rgba(255,255,255,.75);
  background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
  margin: 6px 12px 12px; padding: 8px; text-align: center; flex: none;
}
.sheet-undo:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .sheet-btn { transition: none; }
}

/* ---- Controls below the watch ------------------------------------------- */
.demo-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.pt-buttons { display: flex; gap: 12px; }
.pt-btn {
  cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; color: #052015;
  border: 0; border-radius: 13px; padding: 12px 20px; transition: transform .12s ease, opacity .15s ease;
}
.pt-btn:hover { transform: translateY(-2px); }
.pt-btn:disabled { opacity: .4; cursor: default; transform: none; }
.pt-btn.me { background: linear-gradient(135deg, var(--green), #45e0a0); }
.pt-btn.opp { background: linear-gradient(135deg, var(--blue), #7db4ff); color: #03142e; }
.util-buttons { display: flex; gap: 10px; }
.util-btn {
  cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink);
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 16px;
  transition: border-color .15s ease, background .15s ease;
}
.util-btn:hover:not(:disabled) { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); }
.util-btn:disabled { opacity: .4; cursor: default; }
.util-btn.active {
  border-color: rgba(255,214,10,.6); background: rgba(255,214,10,.14); color: #ffe9a8;
}

.demo-hint {
  margin-top: 20px; text-align: center; color: var(--muted); font-size: .9rem; line-height: 1.7;
}
.demo-hint .kbd {
  display: inline-block; background: var(--glass-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; font-size: .85em; font-weight: 700; color: var(--ink);
}

@media (max-width: 560px) {
  .opt-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-btn, .opt, .util-btn { transition: none; }
}