/* Sudoku TagTeam — warm paper, ink grid, one color per player. Built to fit a phone
   screen in one view: board, tools and number pad with no scrolling. */
:root {
  --sd-paper: #fbf4ea; --sd-ink: #2a1d17; --sd-muted: #8a7468; --sd-line: #e2d3c0; --sd-soft: #f1e6d7;
  --sd-p1: #2463eb; --sd-p1-soft: #dbe7ff; --sd-p2: #e85d04; --sd-p2-soft: #ffe8d6;
  --sd-help: #0f8f7e; --sd-bad: #e5383b; --sd-sel: #ffd166; --sd-peer: #f6ecdc; --sd-same: #ffe9a8;
  --sd-display: 'Fraunces', Georgia, serif; --sd-body: 'Nunito', system-ui, sans-serif;
  --sd-bw: max(280px, min(calc(100vw - 20px), 500px, calc(100dvh - 300px)));
}
/* size from the game column, not the window, so a desktop scrollbar can't push the board off the edge */
@supports (container-type: inline-size) {
  :root { --sd-bw: max(260px, min(100cqw, 500px, calc(100dvh - 300px))); }
  .sd { container-type: inline-size; }
}
.sd-page { background: radial-gradient(90% 30% at 50% 0%, rgba(36,99,235,.10), transparent 70%), var(--sd-paper); padding-bottom: 24px; }
.sd { position: relative; max-width: 520px; margin: 0 auto; padding: 8px 10px 12px; color: var(--sd-ink); font-family: var(--sd-body); text-align: left; -webkit-tap-highlight-color: transparent; }
.sd *, .sd *::before, .sd *::after, .sd-dlg *, .sd-dlg *::before { box-sizing: border-box; }
.sd [hidden], .sd-dlg [hidden] { display: none !important; }
.sd button, .sd-dlg button { font-family: var(--sd-body); cursor: pointer; margin: 0; touch-action: manipulation; color: inherit; }
.sd button:focus-visible, .sd-dlg button:focus-visible, .sd-dlg input:focus-visible { outline: 3px solid var(--sd-p1); outline-offset: 2px; }

/* top line */
.sd-top { display: flex; align-items: center; gap: 8px; height: 40px; }
.sd-title { font: 900 26px/1 var(--sd-display); margin: 0; letter-spacing: -.02em; white-space: nowrap; }
.sd-title span { color: var(--sd-p1); }
.sd-title span b { color: var(--sd-p2); font-weight: 900; }
.sd-stats { margin-left: auto; display: flex; gap: 10px; font-weight: 800; font-size: 13px; color: var(--sd-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-stats b { color: var(--sd-ink); }
.sd-icon { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--sd-line); background: #fff; font: 900 20px/1 var(--sd-body); display: grid; place-items: center; flex: none; }

/* TagTeam strip */
.sd-strip { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 4px 0 6px; padding: 6px 6px 6px 12px; border-radius: 14px; background: #fff; border: 2px solid var(--sd-line); font-weight: 800; font-size: 14px; line-height: 1.25; }
.sd-strip.p1 { border-color: var(--sd-p1); background: var(--sd-p1-soft); }
.sd-strip.p2 { border-color: var(--sd-p2); background: var(--sd-p2-soft); }
.sd-strip .who { flex: 1; min-width: 0; }
.sd-strip .dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: -1px; }
.sd-strip .dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; }
.sd-strip .dots i.used { background: currentColor; }
.sd-strip.p1 .dots { color: var(--sd-p1); } .sd-strip.p2 .dots { color: var(--sd-p2); }
.sd-strip button { flex: none; font: 900 13px var(--sd-body); border: 0; border-radius: 10px; padding: 8px 11px; background: var(--sd-ink); color: #fff; }
.sd-strip button.ghost { background: transparent; color: var(--sd-ink); text-decoration: underline; padding: 8px 4px; }
.sd-banner { position: absolute; left: 10px; right: 10px; top: 46px; z-index: 5; box-shadow: 0 12px 28px rgba(42,29,23,.3); animation: sd-rise .3s cubic-bezier(.2,1.3,.4,1); padding: 9px 12px; border-radius: 14px; background: var(--sd-ink); color: #fff; font-weight: 800; font-size: 14px; line-height: 1.35; display: flex; gap: 10px; align-items: center; }
.sd-banner span { flex: 1; }
.sd-banner button { border: 0; background: none; color: #fff; font: 900 20px var(--sd-body); padding: 0 4px; }

/* board */
.sd-board { width: var(--sd-bw); height: var(--sd-bw); margin: 0 auto; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); border: 3px solid var(--sd-ink); border-radius: 10px; overflow: hidden; background: #fff; user-select: none; -webkit-user-select: none; perspective: 900px; }
.sd-cell { position: relative; border: 0; border-right: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); padding: 0; background: #fff; display: grid; place-items: center; font: 800 calc(var(--sd-bw) / 9 * .56) / 1 var(--sd-body); color: var(--sd-ink); transition: background .12s; }
.sd-cell.c2, .sd-cell.c5 { border-right: 3px solid var(--sd-ink); }
.sd-cell.c8 { border-right: 0; }
.sd-cell.r2, .sd-cell.r5 { border-bottom: 3px solid var(--sd-ink); }
.sd-cell.r8 { border-bottom: 0; }
.sd-cell.given { font-weight: 900; background: #fbf7f1; }
.sd-cell.peer { background: var(--sd-peer); }
.sd-cell.same { background: var(--sd-same); }
.sd-cell.sel { background: var(--sd-sel); box-shadow: inset 0 0 0 2px var(--sd-ink); z-index: 1; }
.sd-cell.o1 { color: var(--sd-p1); }
.sd-cell.o2 { color: var(--sd-p2); }
.sd-cell.o3 { color: var(--sd-help); }
.sd-cell.glow::after { content: ''; position: absolute; inset: 3px; border-radius: 8px; border: 3px solid currentColor; animation: sd-glow 1.1s ease-in-out 4; pointer-events: none; }
@keyframes sd-glow { 0%,100% { opacity: 0; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.sd-cell.bad { color: var(--sd-bad); background: #ffe1e1; animation: sd-shake .35s; }
@keyframes sd-shake { 0%,100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.sd-cell.pop { animation: sd-pop .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes sd-pop { from { transform: scale(.6); } to { transform: none; } }
.sd-cell.wave { animation: sd-flip .6s ease-in-out both; animation-delay: var(--wd, 0ms); }
@keyframes sd-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); background: var(--sd-same); } 100% { transform: rotateY(0); } }
.sd-notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); font: 800 calc(var(--sd-bw) / 9 * .25) / 1 var(--sd-body); color: var(--sd-muted); }
.sd-notes i { font-style: normal; display: grid; place-items: center; border-radius: 4px; }
.sd-notes i.hit { background: var(--sd-ink); color: #fff; }
.sd-board.locked .sd-cell:not(.given) { cursor: default; }

/* tools + number pad */
.sd-tools { width: var(--sd-bw); margin: 8px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sd-tool { height: 48px; border-radius: 12px; border: 2px solid var(--sd-line); background: #fff; font: 800 13px/1.1 var(--sd-body); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sd-tool .ic { font-size: 18px; line-height: 1; }
.sd-tool.on { background: var(--sd-ink); border-color: var(--sd-ink); color: #fff; }
.sd-tool:disabled { opacity: .4; cursor: default; }
.sd-tool .tag { font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.sd-pad { width: var(--sd-bw); margin: 8px auto 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.sd-key { height: 58px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 var(--sd-line), inset 0 0 0 2px var(--sd-line); font: 900 26px/1 var(--sd-body); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; }
.sd-key small { font-size: 10px; font-weight: 800; color: var(--sd-muted); }
.sd-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sd-line), inset 0 0 0 2px var(--sd-line); }
.sd-key.focus { background: var(--sd-same); }
.sd-key.done { opacity: .3; }
.sd-key.done small::before { content: '✓'; }
.sd.notes .sd-key { font-size: 18px; color: var(--sd-muted); box-shadow: 0 3px 0 var(--sd-line), inset 0 0 0 2px var(--sd-muted); }
.sd-pad.locked .sd-key, .sd-tools.locked .sd-tool { opacity: .35; }
.sd-msg { min-height: 20px; margin: 8px 2px 0; text-align: center; font-weight: 800; font-size: 14px; color: var(--sd-muted); }
.sd-msg.bad { color: var(--sd-bad); }

/* dialogs */
.sd-dlg { box-sizing: border-box; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); border: 0; border-radius: 22px; padding: 20px 18px 18px; background: var(--sd-paper); color: var(--sd-ink); font-family: var(--sd-body); box-shadow: 0 24px 60px rgba(42,29,23,.35); }
.sd-dlg::backdrop { background: rgba(42,29,23,.45); }
.sd-dlg[open] { animation: sd-rise .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes sd-rise { from { transform: translateY(20px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.sd-dlg h2 { font: 900 28px/1.05 var(--sd-display); margin: 0 0 4px; letter-spacing: -.01em; }
.sd-dlg .sub { font-weight: 800; color: var(--sd-muted); margin: 0 0 14px; line-height: 1.4; font-size: 15px; }
.sd-dlg .sub b { color: var(--sd-ink); }
.sd-wait { margin: -4px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,162,94,.14); border: 1px solid rgba(255,162,94,.45); font-weight: 800; font-size: 14px; line-height: 1.45; color: var(--sd-ink); }
.sd-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sd-soft); font: 900 18px var(--sd-body); }
.sd-lab { display: block; font: 900 12px var(--sd-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sd-muted); margin: 14px 0 6px; }
.sd-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sd-seg.two { grid-template-columns: 1fr 1fr; }
.sd-seg button { min-height: 46px; border-radius: 12px; border: 2px solid var(--sd-line); background: #fff; font: 900 14px/1.15 var(--sd-body); padding: 6px 4px; }
.sd-seg button small { display: block; font-size: 11px; font-weight: 800; color: var(--sd-muted); }
.sd-seg button[aria-pressed="true"] { background: var(--sd-ink); border-color: var(--sd-ink); color: #fff; }
.sd-seg button[aria-pressed="true"] small { color: #d9c8bc; }
.sd-names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sd-names label { font-weight: 800; font-size: 13px; color: var(--sd-muted); }
.sd-names input { display: block; width: 100%; margin-top: 4px; font: 800 17px var(--sd-body); padding: 11px 12px; border-radius: 12px; border: 2px solid var(--sd-line); background: #fff; color: var(--sd-ink); outline: none; }
.sd-names label:first-child input { border-color: var(--sd-p1); }
.sd-names label:last-child input { border-color: var(--sd-p2); }
.sd-check { display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 15px; margin-top: 14px; }
.sd-check input { width: 22px; height: 22px; accent-color: var(--sd-ink); }
.sd-note { font-weight: 700; font-size: 13.5px; color: var(--sd-muted); line-height: 1.4; margin: 10px 0 0; }
.sd-dlg .sd-big { display: block; width: 100%; font: 900 18px var(--sd-body); border: 0; border-radius: 14px; padding: 15px; margin-top: 16px; background: var(--sd-ink); color: #fff !important; box-shadow: 0 4px 0 #000; }
.sd-big:active { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.sd-big.p1 { background: var(--sd-p1); box-shadow: 0 4px 0 #173f9a; }
.sd-big.p2 { background: var(--sd-p2); box-shadow: 0 4px 0 #9a3d02; }
.sd-dlg .sd-alt { display: block; width: 100%; font: 900 16px var(--sd-body); border: 2px solid var(--sd-line); border-radius: 14px; padding: 12px; margin-top: 10px; background: #fff; }
.sd-menu button { display: block; width: 100%; text-align: left; font: 900 17px var(--sd-body); border: 0; border-bottom: 2px solid var(--sd-soft); background: none; padding: 15px 4px; }
.sd-menu button:last-child { border-bottom: 0; }
.sd-menu button small { display: block; font-size: 13px; font-weight: 700; color: var(--sd-muted); margin-top: 2px; }
.sd-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.sd-chips span { background: #fff; border-radius: 12px; padding: 9px 6px; text-align: center; font-weight: 800; font-size: 12px; color: var(--sd-muted); border: 2px solid var(--sd-soft); }
.sd-chips b { display: block; color: var(--sd-ink); font-size: 20px; font-variant-numeric: tabular-nums; }
.sd-split { margin: 14px 0 0; }
.sd-split .bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--sd-soft); }
.sd-split .bar i { display: block; }
.sd-split .bar .a { background: var(--sd-p1); } .sd-split .bar .b { background: var(--sd-p2); } .sd-split .bar .c { background: var(--sd-help); }
.sd-split .keys { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-weight: 900; font-size: 14px; }
.sd-split .keys .a { color: var(--sd-p1); } .sd-split .keys .b { color: var(--sd-p2); }

/* end-of-game head to head */
.sc { margin: 14px 0 4px; background: #fff; border-radius: 16px; border: 2px solid var(--sd-soft); overflow: hidden; }
.sc-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; gap: 6px; padding: 9px 12px; border-top: 1px solid var(--sd-soft); font-weight: 800; font-size: 15px; }
.sc-row:first-child { border-top: 0; }
.sc-head { background: var(--sd-paper); font-weight: 900; font-size: 15px; }
.sc-row .lab { color: var(--sd-muted); font-size: 14px; }
.sc-row span.a, .sc-row span.b { text-align: center; font-variant-numeric: tabular-nums; border-radius: 10px; padding: 3px 4px; }
.sc-head span.a { color: var(--sd-p1); } .sc-head span.b { color: var(--sd-p2); }
.sc-row span.a.win { background: var(--sd-p1-soft); color: var(--sd-p1); font-weight: 900; }
.sc-row span.b.win { background: var(--sd-p2-soft); color: #b44700; font-weight: 900; }
.sc-row span.win::before { content: '★ '; font-size: 12px; }
.sc-foot { margin: 8px 2px 0; font-weight: 800; font-size: 14px; color: var(--sd-muted); line-height: 1.4; }
.sc-foot b { color: var(--sd-ink); } .sc-foot b.a { color: var(--sd-p1); } .sc-foot b.b { color: #b44700; }

.sd-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; background: var(--sd-ink); color: #fff; font: 800 15px var(--sd-body); padding: 11px 16px; border-radius: 12px; transition: .25s; pointer-events: none; z-index: 1000; max-width: calc(100vw - 32px); text-align: center; }
.sd-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* reading content under the game */
.sd-content { max-width: 680px; margin: 26px auto 0; padding: 0 16px; font-family: var(--sd-body); color: var(--sd-ink); }
.sd-card { background: #fff; border-radius: 20px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(42,29,23,.06); line-height: 1.55; font-size: 16px; }
.sd-card h2 { font: 900 24px var(--sd-display); margin: 0 0 8px; }
.sd-card h3 { font: 900 18px var(--sd-body); margin: 16px 0 4px; }
.sd-card ul { padding-left: 20px; margin: 6px 0; }
.sd-card details { border-top: 2px solid var(--sd-soft); padding: 10px 0; }
.sd-card summary { font-weight: 900; cursor: pointer; }
#postGameLinks { max-width: 680px; margin: 18px auto 0; padding: 0 16px; }

@media (prefers-reduced-motion: reduce) {
  .sd-cell.wave, .sd-cell.pop, .sd-cell.bad, .sd-cell.glow::after, .sd-dlg[open] { animation: none; }
}

/* the partner's miss: the digit they tried, small, red and slashed through, so it never reads as a placed number */
.sd-cell.missed { position: relative; }
.sd-cell .sd-missd { position: absolute; top: 2px; right: 3px; font-size: .5em; font-weight: 900; line-height: 1; color: #d0342c; padding: 0 .12em; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), #d0342c calc(50% - 1.5px), #d0342c calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.sd-cell.missed:not(:has(.sd-notes)) .sd-missd { position: static; font-size: .62em; opacity: .9; }