:root { --ink:#173737; --muted:#647777; --paper:#fffdf8; --page:#eef3f0; --line:#d7e1dc; --teal:#0e7774; --teal-dark:#123c3c; --orange:#e77835; --soft:#f4f7f4; --mono:'DM Mono',monospace; --display:'Fraunces',serif; --sans:'Inter',sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--page); font-family:var(--sans); font-size:14px; } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #f1a06e; outline-offset:2px; } .topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; background:var(--teal-dark); color:#fff; } .brand { color:#fff; display:flex; align-items:center; gap:11px; text-decoration:none; letter-spacing:.08em; } .brand strong,.brand small { display:block; } .brand strong { font-size:12px; } .brand small { color:#b9d6d0; font:10px var(--mono); letter-spacing:.12em; margin-top:4px; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--orange); color:#fff; font:700 18px var(--display); transform:rotate(-5deg); } .top-actions { display:flex; align-items:center; gap:12px; } .save-status { color:#b9d6d0; font:11px var(--mono); } .button { border:1px solid transparent; min-height:40px; padding:0 15px; transition:background .2s,color .2s,border-color .2s; } .button-ghost { color:#e0eeeb; border-color:#4a6d6c; background:transparent; } .button-ghost:hover { background:#204d4d; } .button-primary { background:var(--orange); color:#fff; font-weight:700; } .button-primary:hover { background:#d86728; } .workspace { width:min(1440px,90vw); margin:48px auto; } .intro { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; } .eyebrow,.panel-kicker,.sheet-kicker { margin:0 0 8px; color:var(--teal); font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; } h1,h2,h3 { margin:0; font-family:var(--display); font-weight:600; } h1 { font-size:clamp(34px,4vw,56px); letter-spacing:-.03em; line-height:1; } .intro-copy { margin:12px 0 0; color:var(--muted); } .round-chip { display:flex; align-items:center; gap:9px; padding:9px 12px; background:#e1efea; color:var(--teal-dark); font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; } .live-dot { width:7px;height:7px;background:var(--orange);border-radius:50%; } .sheet { background:var(--paper); border:1px solid #cbd8d1; box-shadow:0 12px 35px #183b3210; } .sheet-heading { display:flex; align-items:flex-start; justify-content:space-between; padding:30px 32px 24px; border-bottom:1px solid var(--line); } .sheet-title h2 { font-size:28px; text-transform:uppercase; letter-spacing:.02em; } .sheet-meta { display:flex; gap:18px; } label { display:block; color:var(--muted); font:10px var(--mono); letter-spacing:.05em; text-transform:uppercase; } input { display:block; width:100%; margin-top:6px; border:0; border-bottom:1px solid #aebeb7; background:transparent; color:var(--ink); outline:0; padding:7px 2px; border-radius:0; } input:focus { border-color:var(--teal); box-shadow:0 2px 0 var(--teal); } .sheet-meta label { width:122px; } .players { display:grid; grid-template-columns:1fr 48px 1fr; align-items:center; padding:20px 32px; border-bottom:1px solid var(--line); gap:16px; } .player-card { display:flex; align-items:center; gap:14px; padding:13px 15px; background:var(--soft); border-left:4px solid var(--teal); } .player-two { border-left-color:var(--orange); } .player-number { font:500 20px var(--mono); color:var(--teal); } .player-two .player-number { color:var(--orange); } .player-info { flex:1; } .player-info > span { color:var(--muted); font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; } .player-info label { margin-top:2px; } .player-id { width:44px; } .versus { color:#a0afaa; font:11px var(--mono); text-align:center; } .score-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; } .score-panel { min-width:0; border-right:1px solid var(--line); } .panel-heading { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 25px 15px; } .panel-heading h3 { font-size:22px; } .turn-count,.result-badge { color:var(--muted); font:10px var(--mono); text-transform:uppercase; padding-top:4px; } .result-badge { color:var(--orange); } .score-table-wrap { overflow:auto; } .score-table { width:100%; border-collapse:collapse; table-layout:fixed; } .score-table th { background:var(--teal-dark); color:#d8e8e2; font:10px var(--mono); font-weight:400; letter-spacing:.04em; text-align:left; text-transform:uppercase; padding:10px 7px; } .score-table th:first-child { width:35px; text-align:center; } .score-table th:nth-child(3),.score-table th:nth-child(6) { width:52px; } .score-table th:nth-child(4),.score-table th:nth-child(7) { width:58px; } .score-table td { border-bottom:1px solid #e5ece7; height:37px; padding:0 7px; } .score-table td:first-child { color:#8b9b95; font:11px var(--mono); text-align:center; } .score-table td:nth-child(3),.score-table td:nth-child(6) { border-left:1px solid var(--line); } .score-table td:nth-child(4),.score-table td:nth-child(7) { color:var(--teal-dark); font:500 12px var(--mono); background:#f7faf7; } .score-table input { border:0; margin:0; padding:5px 0; width:100%; font-size:12px; } .score-table input.score-input { font-family:var(--mono); text-align:center; } .sidebar { background:#fbfcf9; } .tile-panel,.result-panel { padding-bottom:25px; border-bottom:1px solid var(--line); } .helper { color:var(--muted); font-size:11px; line-height:1.5; margin:0 25px 15px; } .tile-total { color:var(--teal); font:500 27px var(--mono); padding-top:0; } .tile-total small { color:#91a19b; font-size:11px; } .tile-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; padding:0 25px; } .tile { position:relative; aspect-ratio:1; border:1px solid #cad8d1; background:#fff; color:var(--ink); font:500 12px var(--mono); transition:.2s; } .tile sup { position:absolute; right:3px; bottom:2px; color:#82948d; font-size:7px; } .tile:hover { border-color:var(--teal); } .tile.used { background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:inset 0 0 0 2px #fff3; } .tile.used sup { color:#d8eeeb; } .tile.blank { color:var(--orange); } .text-button { border:0; background:transparent; color:var(--teal); font:11px var(--mono); margin:16px 25px 0; padding:0; text-decoration:underline; text-underline-offset:3px; } .result-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; padding:0 25px 20px; } .result-grid div { border-bottom:1px solid var(--line); padding-bottom:8px; } .result-grid span { display:block; color:var(--muted); font:10px var(--mono); text-transform:uppercase; line-height:1.4; } .result-grid strong { display:block; color:var(--teal-dark); font:600 22px var(--display); margin-top:5px; } .signatures { display:grid; gap:12px; padding:0 25px; } .footer-note { display:flex; justify-content:space-between; color:#79908a; font:10px var(--mono); padding:15px 0; } @media (max-width:900px) { .workspace { width:min(680px,calc(100% - 28px)); margin:28px auto; } .sheet-heading,.players { padding-left:18px; padding-right:18px; } .sheet-heading { display:block; } .sheet-meta { margin-top:20px; } .sheet-meta label { flex:1; width:auto; } .score-layout { display:block; } .score-panel { border-right:0; border-bottom:1px solid var(--line); } .sidebar { display:grid; grid-template-columns:1fr 1fr; } .tile-panel { border-right:1px solid var(--line); } }
 .button-secondary { background:#e1efea; color:var(--teal-dark); border-color:#bdd4cc; font-weight:600; } .button-secondary:hover { background:#d3e7e0; } .table-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 25px 18px; color:var(--muted); font:10px var(--mono); } .score-table th span,.score-table th small { display:block; } .score-table th small { color:#a8c7bd; font-size:8px; font-weight:400; margin-top:4px; text-transform:none; letter-spacing:0; } .score-table th:nth-child(2),.score-table th:nth-child(4) { width:25%; } .score-table th:nth-child(3),.score-table th:nth-child(5) { width:25%; } .score-table td.carry { background:#f0f6f2; color:var(--teal-dark); font:500 12px var(--mono); text-align:right; padding-right:12px; } .tile-wrap { position:relative; } .tile { width:100%; } .tile sup { position:absolute; right:3px; bottom:2px; color:#82948d; font-size:7px; } .tile-minus { display:none; position:absolute; right:-2px; top:-5px; width:16px; height:16px; padding:0; border:1px solid #fff; border-radius:50%; background:var(--orange); color:#fff; font:12px/13px var(--mono); } .tile-wrap:hover .tile-minus,.tile-wrap:focus-within .tile-minus { display:block; } .tile-actions { display:flex; gap:18px; } .tile-actions .text-button { margin-right:0; } .history-drawer { position:fixed; z-index:20; top:0; right:0; width:min(440px,calc(100vw - 22px)); height:100vh; padding:30px; background:var(--paper); box-shadow:-12px 0 30px #17373720; transform:translateX(105%); transition:transform .25s ease; overflow:auto; } .history-drawer.open { transform:translateX(0); } .drawer-scrim { position:fixed; inset:0; z-index:19; background:#123c3c66; } .drawer-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; } .drawer-head h2 { font-size:30px; } .icon-button { width:42px; height:42px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:24px; } .history-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-top:1px solid var(--line); } .history-item strong,.history-item span,.history-item small { display:block; } .history-item strong { font:600 17px var(--display); } .history-item span,.history-item small { color:var(--muted); font-size:11px; margin-top:4px; } .history-item small { font-family:var(--mono); } .history-actions { display:flex; gap:8px; flex-shrink:0; } .history-actions .text-button { margin:0; } .danger { color:#b34c35; } .empty-state { color:var(--muted); font-size:13px; }
@media (max-width:600px) { .topbar { height:auto; min-height:64px; padding:12px 14px; gap:14px; } .top-actions { gap:6px; } .save-status,.button-ghost { display:none; } .button { min-height:38px; padding:0 10px; font-size:11px; } .intro { display:block; } .round-chip { display:inline-flex; margin-top:18px; } h1 { font-size:39px; } .sheet-title h2 { font-size:23px; } .sheet-heading { padding:22px 16px 18px; } .sheet-meta { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; } .sheet-meta label:first-child { grid-column:1 / -1; width:auto; } .players { grid-template-columns:1fr; gap:8px; padding:15px 16px; } .versus { display:none; } .score-table { min-width:560px; } .score-table-wrap { padding-bottom:4px; } .table-actions { align-items:flex-start; flex-direction:column; padding-left:16px; padding-right:16px; } .sidebar { display:block; } .tile-panel { border-right:0; } .tile-grid { grid-template-columns:repeat(9,1fr); padding:0 16px; } .panel-heading { padding-left:16px; padding-right:16px; } .helper { margin-left:16px; margin-right:16px; } .text-button { margin-left:16px; } .result-grid,.signatures { padding-left:16px; padding-right:16px; } .footer-note { display:block; line-height:2; } .history-drawer { padding:22px 18px; } }
@media print { body { background:#fff; } .topbar,.intro,.footer-note { display:none; } .workspace { width:100%; margin:0; } .sheet { border:0; box-shadow:none; } .button,.text-button { display:none; } .score-layout { grid-template-columns:minmax(0,1fr) 280px; } .sheet-heading { padding-top:10px; } .score-table td { height:31px; } input { color:#000; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; } }

/* Score grid and literal tile inventory */
.score-layout { grid-template-columns:minmax(0,1fr) 430px; }
.score-table { table-layout:fixed; }
.score-table { width:100% !important; }
.score-table col.turn-number-col { width:28px !important; }
.score-table col.score-col { width:25% !important; }
.score-table th:first-child,.score-table td:first-child { width:28px !important; min-width:28px !important; max-width:28px !important; padding-left:2px; padding-right:2px; }
.score-table thead th:first-child { width:28px !important; }
.score-table th:nth-child(2) { background:#175e69; }
.score-table th:nth-child(3) { background:#8b5132; }
.score-table td:nth-child(2),.score-table td:nth-child(3) { background:#eff8f8; }
.score-table td:nth-child(4),.score-table td:nth-child(5) { background:#fff5ee; }
.score-table td:nth-child(2),.score-table td:nth-child(4) { font-weight:600; }
.score-table td:nth-child(3) { border-right:3px solid #b9d8d8; }
.score-table input[data-player^="p1"]:focus { box-shadow:inset 0 -2px 0 #167b89; }
.score-table input[data-player^="p2"]:focus { box-shadow:inset 0 -2px 0 #c36b3b; }
.p1-label { color:#d9fbff; }
.p2-label { color:#fff1e7; }
.tile-grid { display:block; padding:0 20px; }
.tile-group { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:18px; min-height:30px; padding:3px 8px; border-bottom:1px solid #e5ece7; transition:background .2s,color .2s; }
.tile-group-label { display:flex; align-items:baseline; justify-content:space-between; gap:3px; color:var(--ink); font:600 12px var(--mono); }
.tile-group-label small { color:#8b9b95; font-size:7px; font-weight:400; }
.tile-group-items { display:flex; flex-wrap:wrap; gap:3px; }
.tile-wrap { position:relative; width:24px; height:24px; }
.tile { display:grid; place-items:center; width:24px; height:24px; aspect-ratio:auto; padding:0; border:1px solid #bdcec6; border-radius:2px; background:#fffdf6; color:#173737; font:600 10px var(--mono); }
.tile:hover { border-color:#167b89; background:#f1faf7; }
.tile.used { background:#dce5e0; border-color:#82978e; color:#667a72; text-decoration:none; }
.tile.used::after { content:'×'; position:absolute; inset:0; display:grid; place-items:center; color:#455a51; font:700 22px/1 var(--sans); }
.tile.blank { background:#fff3cf; border-color:#d89b34; color:#875314; text-decoration:none; }
.tile.blank.used { background:#d98631; border-color:#b5631d; color:#fff; }
.tile-group.consumed { background:#d7eee6; box-shadow:inset 3px 0 0 #168066; }
.tile-group.consumed .tile-group-label { color:#0b6552; }
.tile-group.consumed .tile-group-label small { color:#0b6552; }
.result-grid strong#winner { color:#168066; }
.rack-adjustments { margin:0 25px 20px; padding:13px 0 0; border-top:1px solid var(--line); }
.rack-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.rack-heading p { margin:0; color:var(--teal-dark); font:600 11px var(--mono); text-transform:uppercase; }
.end-game-toggle { display:flex; align-items:center; gap:6px; color:var(--muted); white-space:nowrap; }
.end-game-toggle input { width:auto; margin:0; accent-color:#168066; }
.rack-row { display:grid; grid-template-columns:minmax(0,1fr) 58px 72px; align-items:end; gap:10px; padding:5px 0; }
.rack-row span { color:var(--teal-dark); font:500 11px var(--mono); text-align:right; }
.rack-row small { color:#168066; font:9px var(--mono); text-align:right; }
.rack-input { text-transform:uppercase; }
.blank-letter { position:relative; z-index:2; left:auto; top:auto; width:24px; height:24px; margin:0; padding:0; border:1px solid #b5631d; background:#d98631; color:#fff; font:600 11px var(--mono); text-align:center; text-transform:uppercase; box-shadow:none; }
.blank-letter::placeholder { color:#fff8e8; opacity:.9; }

@media (max-width:1100px) {
  .score-layout { grid-template-columns:minmax(0,1fr) 370px; }
  .tile-grid { padding-left:14px; padding-right:14px; }
}
@media (max-width:900px) {
  .score-layout { display:block; }
  .sidebar { display:grid; grid-template-columns:1.2fr .8fr; }
  .tile-panel { border-right:1px solid var(--line); }
}
@media (max-width:600px) {
  .score-table { min-width:500px; }
  .sidebar { display:block; }
  .tile-panel { border-right:0; }
  .tile-grid { padding-left:12px; padding-right:12px; }
  .tile-group { grid-template-columns:52px minmax(0,1fr); gap:12px; }
}
@media print {
  .score-layout { grid-template-columns:minmax(0,1fr) 310px; }
  .tile-group { min-height:22px; padding-top:1px; padding-bottom:1px; }
  .tile-wrap,.tile { width:19px; height:19px; }
  .blank-letter { left:auto; height:19px; }
}