/* game-surgical-crossword.css: styles for Surgical Crossword, moved out of the prototype for the site CSP (Oct 2026). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/fonts/archivo-wdth.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/fonts/archivo-wdth-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-next.woff2") format("woff2"); unicode-range: U+0000-002F, U+003A-FFFF; }
@font-face { font-family: "Atkinson Next"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-next-italic.woff2") format("woff2"); unicode-range: U+0000-002F, U+003A-FFFF; }
/* digits come from Archivo: Atkinson's slashed zero reads oddly in addresses and phone numbers */
@font-face { font-family: "Atkinson Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/archivo-wdth.woff2") format("woff2"); unicode-range: U+0030-0039; }
@font-face { font-family: "Atkinson Next"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/fonts/archivo-wdth-italic.woff2") format("woff2"); unicode-range: U+0030-0039; }
/* Brand palette, day mode.
   navy #0F1E33 · paper #FBF8F2 · teal #2E8B3E
   clay #b3432b · gold #2E8B3E · steel #5f7286
   Everything below is written against semantic tokens, so night mode is a
   token swap rather than a second stylesheet. */
:root{
  --bg:#FBF8F2;
  --fg:#0F1E33;
  --muted:#5f7286;
  --line:#d8d3ca;
  --shade:#eceae4;
  --band-bg:#0F1E33;
  --band-fg:#FBF8F2;
  --cell-bg:#ffffff;
  --cell-fg:#0F1E33;
  --accent:#2E8B3E;
  --accent-fg:#ffffff;
  --gold:#2E8B3E;
  --gold-fg:#FFFFFF;
  --warn-bg:#f3ded8;
  --warn-fg:#b3432b;
  --ui:'Archivo',system-ui,sans-serif;
  --body:"Atkinson Next", Verdana, sans-serif;
}
/* Night mode. Backgrounds go deep navy rather than black so the brand still
   reads, and the teal and gold are lifted for contrast on a dark ground. */
:root[data-theme="dark"]{
  --bg:#0B1626;
  --fg:#ece7de;
  --muted:#93a3b3;
  --line:#2B4360;
  --shade:#1B2F4A;
  --band-bg:#060D19;
  --band-fg:#ece7de;
  --cell-bg:#14243A;
  --cell-fg:#ece7de;
  --accent:#4CC94A;
  --accent-fg:#060D19;
  --gold:#9BE77A;
  --gold-fg:#060D19;
  --warn-bg:#4a2a24;
  --warn-fg:#f0a58c;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:17px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

/* ---- shared chrome ---- */
.band{background:var(--band-bg);color:var(--band-fg);padding:14px 18px;display:flex;align-items:flex-start;gap:12px}
.band .who{flex:1}
.band .name{font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;line-height:1.35}
.tag{display:inline-block;margin-top:8px;font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:2px;padding:3px 8px}
#themeBtn{font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--band-fg);border:1px solid currentColor;border-radius:2px;padding:9px 11px;opacity:.85;white-space:nowrap;min-height:38px}
#themeBtn:active{opacity:1}
main{flex:1;padding:18px}
footer{border-top:1px solid var(--line);padding:16px 18px 30px;font-size:14px;color:var(--muted);line-height:1.5}

h1{font-family:var(--ui);font-weight:700;font-size:26px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 6px}
h2{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
p{margin:0 0 12px}
.lead{font-size:18px}
.rule{height:2px;background:var(--gold);width:44px;margin:0 0 16px}

button{font-family:var(--ui);cursor:pointer;border:0;background:none;color:inherit}
.btn{display:inline-block;background:var(--accent);color:var(--accent-fg);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px;border-radius:3px;min-height:48px}
.btn.ghost{background:none;color:var(--fg);border:1.5px solid var(--fg)}
.btn:active{transform:translateY(1px)}

[hidden]{display:none !important}

/* ---- start ---- */
.howto{list-style:none;padding:0;margin:0 0 22px}
.howto li{position:relative;padding-left:26px;margin-bottom:10px}
.howto li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;background:var(--gold);border-radius:50%}

/* ---- play ---- */
.cluebar{background:var(--band-bg);color:var(--band-fg);border-radius:3px;padding:13px 15px;margin-bottom:14px;min-height:80px;display:flex;flex-direction:column;justify-content:center}
.cluebar .meta{font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.cluebar .text{font-size:16.5px;line-height:1.45}

.gridwrap{display:flex;justify-content:center;margin-bottom:14px}
#grid{display:grid;gap:2px;touch-action:manipulation}
.cell{position:relative;aspect-ratio:1/1;background:var(--cell-bg);border:1px solid var(--line);border-radius:1px;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:600;text-transform:uppercase;color:var(--cell-fg);padding:0;line-height:1;width:100%}
.cell.blank{background:transparent;border-color:transparent;pointer-events:none}
.cell .num{position:absolute;top:1px;left:2px;font-size:8px;font-weight:600;color:var(--muted);line-height:1}
.cell.inword{background:var(--shade)}
.cell.active{background:var(--gold);color:var(--gold-fg)}
.cell.active .num{color:var(--gold-fg)}
.cell.wrong{background:var(--warn-bg);color:var(--warn-fg)}
.cell.revealed{color:var(--accent)}

.controls{display:flex;gap:10px;margin-bottom:14px}
.controls .btn{flex:1;text-align:center;padding:13px 8px;font-size:12px}

#keypad{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:22px}
.key{background:var(--cell-bg);border:1px solid var(--line);border-radius:3px;height:46px;font-weight:600;font-size:15px;color:var(--fg)}
.key:active{background:var(--gold);color:var(--gold-fg)}
.key.wide{grid-column:span 2;font-size:11px;letter-spacing:.08em}
.key.util{background:var(--shade)}

.cluelists{border-top:1px solid var(--line);padding-top:16px}
.cluecol{margin-bottom:18px}
.cluecol ol{list-style:none;margin:0;padding:0}
.cluecol li{display:flex;gap:9px;padding:9px 7px;border-radius:2px;font-size:16px;line-height:1.45}
.cluecol li.on{background:var(--shade)}
.cluecol li.done{color:var(--muted)}
.cluecol .n{font-family:var(--ui);font-weight:700;font-size:12.5px;color:var(--accent);min-width:20px;padding-top:3px}
.cluecol button{text-align:left;font-family:var(--body);font-size:16px;line-height:1.45;color:inherit;flex:1;padding:0}

/* ---- score ---- */
.rank{font-family:var(--ui);font-weight:700;font-size:22px;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;line-height:1.2}
.tally{display:flex;gap:20px;margin:18px 0 22px;flex-wrap:wrap}
.tally div{min-width:78px}
.tally .big{font-family:var(--ui);font-weight:700;font-size:30px;line-height:1}
.tally .lab{font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ladder{list-style:none;padding:0;margin:0 0 22px;border-top:1px solid var(--line)}
.ladder li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted)}
.ladder li.hit{color:var(--fg);font-weight:600}
.ladder .band-lab{font-family:var(--ui);font-size:11px;letter-spacing:.09em;text-transform:uppercase}



@media print{
  :root{--bg:#fff;--fg:#000;--cell-bg:#fff;--line:#000;--muted:#000}
  body{background:#fff;color:#000;font-size:11pt}
  .band{background:#fff;color:#000;border-bottom:2px solid #000}
  .tag{color:#000;border-color:#000}
  #start,#score,#keypad,.controls,.cluebar,.noprint{display:none !important}
  #play{display:block !important}
  .cell{border:1px solid #000;background:#fff !important;color:#fff !important}
  .cell .num{color:#000}
  .cell.blank{border-color:transparent}
  .cluelists{border-top:1px solid #000}
  .cluecol li{break-inside:avoid}
}

/* Site chrome added when the game joined drcrodriguez.com (Oct 2026) */
.band a { color: inherit; text-decoration: none; }
.band a.ge-back { color: #2E8B3E; }
.band a.name, .band a.band-name { display: block; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: #0F1E33; color: #fff;
  font-family: Archivo, Arial, sans-serif; font-size: 14px; font-weight: 700; padding: 12px 20px; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 8px; outline: 3px solid #2E8B3E; outline-offset: 2px; }
main:focus { outline: none; }
footer a { color: var(--accent, #2E8B3E); }
.game-exits { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E2DACB; display: flex; flex-wrap: wrap;
  gap: 8px 18px; justify-content: center; font-family: Archivo, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.game-exits a { color: var(--accent, #2E8B3E); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.game-exits a:hover { text-decoration: underline; }
/* Oct 2026 palette: text on navy uses the site's bright green; close calls use dress blue so they read apart from hits. */
.cluebar .meta { color: #9BE77A; }
.cell.active.revealed, .cell.active.wrong { background: var(--gold); color: var(--gold-fg); }