/* ==========================================================================
   Duo Sudoku — game surface styles
   A single, dependency-free stylesheet. All game state is expressed with
   class names on `.cell` (see docs/references/board-design.md for the full
   contract) so the Go server can render any state directly with no client
   logic required.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root{
  /* ---- paper & ink -------------------------------------------------- */
  --duo-bg: #f3f2f2;                 /* the table the board sits on */
  --duo-paper: #fbfaf8;               /* the puzzle sheet itself, a touch lighter than the table */
  --duo-ink: #201e1d;
  --duo-ink-dim: color-mix(in srgb, var(--duo-ink) 55%, transparent);
  --duo-ink-faint: color-mix(in srgb, var(--duo-ink) 30%, transparent);
  --duo-divider: color-mix(in srgb, var(--duo-ink) 14%, transparent);
  --duo-divider-strong: color-mix(in srgb, var(--duo-ink) 38%, transparent);

  /* ---- the two players ----------------------------------------------
     Same hues used for: entered-digit color, presence chip, overlay chips,
     the partner "just changed" flash. Change these two pairs to retheme. */
  --duo-p1: #0088b0;                  /* player 1 — cyan */
  --duo-p1-ink: #00697f;              /* deep step: what the digit itself is set in */
  --duo-p1-tint: #e4f4f8;

  --duo-p2: #d6006c;                  /* player 2 — magenta */
  --duo-p2-ink: #a3084f;
  --duo-p2-tint: #fbe7ef;

  /* ---- selection & highlight tiers (quietest to strongest) ----------- */
  --duo-peer-bg: color-mix(in srgb, var(--duo-ink) 4%, var(--duo-paper));
  --duo-match-bg: color-mix(in srgb, var(--duo-ink) 9%, var(--duo-paper));
  --duo-sel-bg: color-mix(in srgb, var(--duo-ink) 7%, var(--duo-paper));
  --duo-sel-ring: var(--duo-ink);

  /* ---- error: visible, never alarming — a small rust mark, not red --- */
  --duo-err: #a15b2e;

  /* ---- surfaces & chrome --------------------------------------------- */
  --duo-radius: 10px;
  --duo-radius-sm: 6px;
  --duo-shadow: 0 1px 2px rgba(32,26,20,.07), 0 8px 20px rgba(32,26,20,.09);
  --duo-shadow-sm: 0 1px 3px rgba(32,26,20,.10);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  :root{
    --duo-bg: #201c19;
    --duo-paper: #2a2521;
    --duo-ink: #efe9e1;
    --duo-ink-dim: color-mix(in srgb, var(--duo-ink) 58%, transparent);
    --duo-ink-faint: color-mix(in srgb, var(--duo-ink) 34%, transparent);
    --duo-divider: color-mix(in srgb, var(--duo-ink) 18%, transparent);
    --duo-divider-strong: color-mix(in srgb, var(--duo-ink) 40%, transparent);

    --duo-p1: #5fd3ef;
    --duo-p1-ink: #7fdcf3;
    --duo-p1-tint: color-mix(in srgb, #5fd3ef 20%, var(--duo-paper));

    --duo-p2: #ff6fa9;
    --duo-p2-ink: #ff8fbb;
    --duo-p2-tint: color-mix(in srgb, #ff6fa9 20%, var(--duo-paper));

    --duo-peer-bg: color-mix(in srgb, var(--duo-ink) 7%, var(--duo-paper));
    --duo-match-bg: color-mix(in srgb, var(--duo-ink) 14%, var(--duo-paper));
    --duo-sel-bg: color-mix(in srgb, var(--duo-ink) 11%, var(--duo-paper));

    --duo-err: #e0996a;

    --duo-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
    --duo-shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  }
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
body{
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: var(--duo-bg);
  color: var(--duo-ink);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button{ font-family: inherit; -webkit-tap-highlight-color: transparent; }
:focus{ outline: none; }
:focus-visible{ outline: 2px solid var(--duo-p1-ink); outline-offset: 2px; }
.sr-only{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.app{
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.app-header{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 36px;
}
.code-pill{
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--duo-divider);
  background: var(--duo-paper);
  color: var(--duo-ink);
  border-radius: var(--duo-radius-sm);
  padding: 7px 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer;
}
.code-pill:hover{ border-color: var(--duo-divider-strong); }
.code-pill:active{ background: var(--duo-sel-bg); }
.code-pill svg{ color: var(--duo-ink-dim); flex: none; }
.tag.difficulty{
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--duo-ink-dim);
  border: 1px solid var(--duo-divider);
  border-radius: var(--duo-radius-sm);
  padding: 6px 9px;
  flex: none;
}
.presence{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--duo-ink-dim);
  white-space: nowrap;
}
.presence-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--duo-ink-faint);
  flex: none;
  position: relative;
}
.presence[data-state="connected"] .presence-dot{ background: var(--duo-p2); }
.presence[data-state="connected"] .presence-dot::after{
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--duo-p2);
  animation: presencePulse 2.2s ease-out infinite;
}
.presence[data-state="waiting"] .presence-dot{
  background: transparent; border: 1.5px solid var(--duo-ink-faint);
  animation: presenceBlink 1.4s ease-in-out infinite;
}
.presence[data-state="disconnected"] .presence-dot{ background: var(--duo-ink-faint); }
@keyframes presencePulse{ 0%{ opacity: .7; transform: scale(.6); } 100%{ opacity: 0; transform: scale(1.5); } }
@keyframes presenceBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }

.copied-toast{
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--duo-ink); color: var(--duo-paper);
  font-size: 11.5px; padding: 5px 9px; border-radius: var(--duo-radius-sm);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.copied-toast.show{ opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------
   Board
   --------------------------------------------------------------------- */
main{ display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }

.board-wrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  container-name: boardbox;
}
.board{
  width: min(100%, 100cqh);
  aspect-ratio: 1 / 1;
  background: var(--duo-paper);
  border: 2px solid var(--duo-divider-strong);
  border-radius: var(--duo-radius);
  box-shadow: var(--duo-shadow);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  overflow: hidden;
}

.cell{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--duo-ink);
  border: 0; margin: 0; padding: 0;
  border-right: 1px solid var(--duo-divider);
  border-bottom: 1px solid var(--duo-divider);
  font-family: inherit;
  font-size: clamp(15px, 6.4cqw, 25px);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.cell:focus-visible{ outline-offset: -2px; z-index: 3; }
.board .cell:nth-child(9n){ border-right: 0; }
.board .cell:nth-child(n+73){ border-bottom: 0; }
.board .cell:nth-child(3n){ border-right: 2px solid var(--duo-divider-strong); }
.board .cell:nth-child(9n){ border-right: 0; }
.board .cell:nth-child(n+19):nth-child(-n+27){ border-bottom: 2px solid var(--duo-divider-strong); }
.board .cell:nth-child(n+46):nth-child(-n+54){ border-bottom: 2px solid var(--duo-divider-strong); }
.board .cell:nth-child(n+73){ border-bottom: 0; }

.cell.given{ font-weight: 700; }
.cell.p1{ color: var(--duo-p1-ink); font-weight: 600; }
.cell.p2{ color: var(--duo-p2-ink); font-weight: 600; }

/* highlight tiers — later rules win when combined, ordered quiet -> strong */
.cell.peer{ background: var(--duo-peer-bg); }
.cell.match{ background: var(--duo-match-bg); }
.cell.sel{
  background: var(--duo-sel-bg);
  box-shadow: inset 0 0 0 2px var(--duo-sel-ring);
  z-index: 2;
}

/* error — a small, calm mark; the digit keeps its player color */
.cell.err::after{
  content: "";
  position: absolute; top: 12%; right: 12%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--duo-err);
}

/* just-changed-by-partner: brief, calm flash behind the digit */
.cell.flash{ --duo-flash-color: var(--duo-ink-dim); }
.cell.flash.p1{ --duo-flash-color: var(--duo-p1); }
.cell.flash.p2{ --duo-flash-color: var(--duo-p2); }
.cell.flash::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--duo-flash-color);
  opacity: .38;
  animation: cellFlashFade 1.5s ease-out forwards;
  pointer-events: none;
}
@keyframes cellFlashFade{ from{ opacity: .38; } to{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .cell.flash::before{ animation-duration: .6s; }
}

/* notes — 3x3 micro-grid of tiny candidates */
.cell.notes{ cursor: pointer; }
.notes-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 88%; height: 88%;
}
.note{
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(7px, 2.1cqw, 10.5px);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--duo-ink-dim);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Toolbar
   --------------------------------------------------------------------- */
.toolbar{ display: flex; gap: 8px; flex: none; }

.mode-switch{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--duo-divider);
  border-radius: var(--duo-radius-sm);
  background: var(--duo-paper);
  overflow: hidden;
}
.mode-opt{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px;
  border: 0; background: transparent; color: var(--duo-ink-dim);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.mode-opt + .mode-opt{ border-left: 1px solid var(--duo-divider); }
.mode-opt[aria-pressed="true"]{
  background: var(--duo-ink);
  color: var(--duo-paper);
}
.mode-opt:not([aria-pressed="true"]):hover{ background: var(--duo-sel-bg); }

.tool-btn{
  flex: none;
  width: 48px; min-height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--duo-divider);
  border-radius: var(--duo-radius-sm);
  background: var(--duo-paper);
  color: var(--duo-ink);
  cursor: pointer;
}
.tool-btn:hover{ border-color: var(--duo-divider-strong); }
.tool-btn:active{ background: var(--duo-sel-bg); }

/* ---------------------------------------------------------------------
   Number pad
   --------------------------------------------------------------------- */
.numpad{
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.pad-btn{
  min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--duo-divider);
  border-radius: var(--duo-radius-sm);
  background: var(--duo-paper);
  color: var(--duo-ink);
  cursor: pointer;
}
.pad-btn:hover{ border-color: var(--duo-divider-strong); }
.pad-btn:active{ background: var(--duo-sel-bg); }
.pad-btn.active{ box-shadow: inset 0 0 0 2px var(--duo-ink); }
.pad-digit{ font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
.pad-count{ font-size: 9.5px; color: var(--duo-ink-dim); letter-spacing: .01em; }
.pad-btn.full{ opacity: .38; cursor: default; }
.pad-btn.full:hover{ border-color: var(--duo-divider); }
.pad-btn:disabled{ pointer-events: none; }

/* ---------------------------------------------------------------------
   Completion overlay (server-pushed fragment)
   --------------------------------------------------------------------- */
.overlay-backdrop{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--duo-ink) 45%, transparent);
  z-index: 10;
}
.overlay-backdrop[hidden]{ display: none; }
.overlay-card{
  width: min(340px, 100%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--duo-paper);
  border-radius: var(--duo-radius);
  box-shadow: var(--duo-shadow);
  padding: 26px 24px;
}
.overlay-kicker{
  margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--duo-p2-ink);
}
.overlay-card h2{
  margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15;
}
.overlay-time{
  margin: 2px 0 10px; font-size: 15px; color: var(--duo-ink-dim);
  font-variant-numeric: tabular-nums;
}
.overlay-players{ display: flex; gap: 8px; margin-bottom: 14px; }
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
}
.chip-dot{ width: 7px; height: 7px; border-radius: 50%; }
.chip.p1{ background: var(--duo-p1-tint); color: var(--duo-p1-ink); }
.chip.p1 .chip-dot{ background: var(--duo-p1); }
.chip.p2{ background: var(--duo-p2-tint); color: var(--duo-p2-ink); }
.chip.p2 .chip-dot{ background: var(--duo-p2); }
.overlay-btn{
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  min-height: 46px;
  border: 0; border-radius: var(--duo-radius-sm);
  background: var(--duo-ink); color: var(--duo-paper);
  font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.overlay-btn:hover{ opacity: .9; }
.overlay-btn:active{ opacity: .8; }

/* ---------------------------------------------------------------------
   Landing page
   --------------------------------------------------------------------- */
.landing-title{ margin: 0; font-size: 20px; font-weight: 700; }
.landing-main{
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px;
}
.landing-card{
  display: flex; flex-direction: column; gap: 12px;
  background: var(--duo-paper);
  border: 1px solid var(--duo-divider);
  border-radius: var(--duo-radius);
  box-shadow: var(--duo-shadow-sm);
  padding: 20px;
}
.landing-card h2{ margin: 0; font-size: 16px; font-weight: 700; }
.field{
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--duo-ink-dim);
}
.field select, .field input{
  font: inherit;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--duo-divider);
  border-radius: var(--duo-radius-sm);
  background: var(--duo-bg);
  color: var(--duo-ink);
}
.field-check{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--duo-ink-dim);
}
.field-check input{ width: 18px; height: 18px; flex: none; }
.landing-btn{
  min-height: 46px;
  border: 0; border-radius: var(--duo-radius-sm);
  background: var(--duo-ink); color: var(--duo-paper);
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
.landing-btn:hover{ opacity: .9; }
.landing-btn:active{ opacity: .8; }

/* ---------------------------------------------------------------------
   Larger phones / desktop — same layout, just centered (no separate
   desktop design per spec).
   --------------------------------------------------------------------- */
@media (min-width: 431px){
  body{ background: var(--duo-bg); }
  .app{ padding-top: 24px; padding-bottom: 24px; }
}

@media (max-height: 620px){
  .app{ gap: 7px; }
  main{ gap: 7px; }
}