/* ============================================================
   The Hive — Connecticut Buzz Arcade
   Navy ground, cream card, white tiles.
   One committed light-first world — no OS-driven inversion, so
   the arcade looks the same on-brand way for every visitor.

   Contrast note: gold (#D4AC02) is a fill colour, not a text
   colour. On cream it lands at 1.9:1, which fails outright, so
   every piece of gold *text* on a light background uses
   --gold-ink instead. Gold text is fine on navy (7.08:1).
   ============================================================ */

:root{
  /* brand */
  --navy:#003366;
  --navy-deep:#002648;
  --navy-mid:#1B4C7E;
  --gold:#D4AC02;
  --gold-hi:#EFC626;
  --gold-wash:#F7ECC4;
  --cream:#F5F0E6;
  --paper:#FFFFFF;

  /* derived */
  --ink:#003366;
  --ink-2:#2C4F73;      /* 7.48:1 on cream */
  --gold-ink:#8A6508;   /* 4.69:1 on cream, 5.32:1 on white */
  --muted:#5A6B82;      /* 4.79:1 on cream, 5.44:1 on white */
  --miss:#64748B;       /* 4.76:1 against white tile text */
  --slate:#9AA5B5;      /* decoration only — never text */
  --line:#DFD6C2;
  --line-soft:#ECE5D6;

  --wrap:1100px;
  --r-lg:18px;
  --r-md:12px;
  --r-sm:8px;
  --r-pill:100px;

  --lift:0 1px 2px rgba(0,26,58,.05), 0 14px 40px -28px rgba(0,26,58,.45);
  --lift-sm:0 1px 2px rgba(0,26,58,.06);
}

*{box-sizing:border-box;}
html{background:var(--navy);-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:"Outfit","Trebuchet MS",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono,.rank,.stat-n,.score,.tabular,td.num,th.num{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1.5px;}
a:hover{color:var(--gold-ink);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.narrow{max-width:640px;}

/* ---------------- header ---------------- */
header.site{
  background:var(--navy-deep);
  position:sticky;top:0;z-index:60;
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:70px;
}
.brand{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--cream);flex:none;
}
.brand:hover{color:var(--cream);}
.brand .mark{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:var(--gold);color:var(--navy-deep);
  border-radius:10px;font-size:20px;line-height:1;
}
.brand .name{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.brand .sub{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-top:1px;
}
nav.site{display:flex;gap:8px;align-items:center;}
nav.site a{
  color:var(--cream);text-decoration:none;font-size:15px;font-weight:500;
  padding:9px 12px;border-radius:var(--r-pill);white-space:nowrap;
}
nav.site a:hover{color:var(--gold);background:rgba(245,240,230,.07);}
nav.site a[aria-current="page"]{background:rgba(245,240,230,.12);font-weight:700;}
nav.site a.cta{
  border:1.5px solid rgba(245,240,230,.45);
  padding:9px 18px;font-weight:600;font-size:14.5px;margin-left:6px;
}
nav.site a.cta:hover{border-color:var(--gold);color:var(--gold);}

/* Below 720px the nav drops onto its own line as a scrollable pill row.
   It never disappears — a hidden nav on the page people actually reach
   from a newsletter link is how you strand them on one screen.

   It also stops being sticky. Two rows of chrome pinned to the top of a
   phone is ~100px the board and keyboard can't have, and this is a game
   you play in one screenful. Scroll up and the nav is right there. */
@media (max-width:720px){
  header.site{position:static;}
  header.site .wrap{
    flex-wrap:wrap;min-height:0;padding-top:10px;padding-bottom:8px;gap:0 12px;
  }
  .brand{min-height:48px;}
  .brand .sub{display:none;}
  nav.site{
    order:3;width:100%;margin-top:6px;
    gap:6px;overflow-x:auto;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  nav.site::-webkit-scrollbar{display:none;}
  nav.site a{
    font-size:14px;padding:0 15px;flex:none;
    min-height:44px;display:inline-flex;align-items:center;
    background:rgba(245,240,230,.08);
  }
  nav.site a.cta{margin-left:0;background:transparent;}
}

/* ---------------- the cream card ---------------- */
main{padding:26px 0 40px;}
.sheet{
  background:var(--cream);
  border-radius:var(--r-lg);
  padding:40px 38px 48px;
  box-shadow:var(--lift);
}
@media (max-width:720px){
  main{padding:12px 0 24px;}
  .wrap{padding:0 12px;}
  .sheet{padding:22px 15px 30px;border-radius:var(--r-md);}
}

/* ---------------- type ---------------- */
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 12px;
}
h1{font-size:clamp(30px,5.6vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 12px;}
h2{font-size:clamp(21px,3vw,28px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;}
h3{font-size:17px;font-weight:700;margin:0 0 7px;}
p{margin:0 0 15px;}
.lede{font-size:17px;color:var(--ink-2);margin-bottom:26px;max-width:62ch;}
.muted{color:var(--muted);font-size:14px;}
.section{margin-bottom:44px;}
@media (max-width:720px){ .section{margin-bottom:34px;} .lede{font-size:16px;margin-bottom:20px;} }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:var(--cream);border:2px solid var(--navy);
  min-height:48px;padding:12px 24px;border-radius:var(--r-pill);
  font:700 15px/1.2 "Outfit",sans-serif;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:transform .08s ease, background .15s ease, color .15s ease;
}
.btn:hover{background:var(--navy-mid);border-color:var(--navy-mid);color:var(--cream);}
.btn:active{transform:translateY(1px);}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.btn.gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--navy-deep);}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line);}
.btn.ghost:hover{background:var(--paper);border-color:var(--navy);color:var(--navy);}
.btn.sm{min-height:38px;padding:8px 16px;font-size:13.5px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

.pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;
  background:var(--gold-wash);color:#7A6200;
  padding:6px 13px;border-radius:var(--r-pill);
}
.pill.live{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}

/* ---------------- arcade home: the game leads ---------------- */
/* Buzzle is the daily habit, so it is the first thing on the page —
   a live board, not a card that links to one. Everything else is
   below it. */
.stage{
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:26px 26px 30px;
  box-shadow:var(--lift-sm);margin-bottom:16px;
}
.stage-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.stage-top h1{font-size:clamp(26px,4.4vw,38px);margin:0;}
.stage-top .streak{
  font-size:13px;font-weight:700;color:var(--ink-2);
  background:var(--gold-wash);padding:6px 13px;border-radius:var(--r-pill);
  white-space:nowrap;
}
@media (max-width:720px){
  .stage{padding:14px 10px 16px;margin-bottom:12px;}
  .stage-top{margin-bottom:10px;}
  .stage-top h1{font-size:26px;}
  .stage-top .streak{font-size:12px;padding:5px 11px;}
  .bw-head{margin-bottom:12px;}
  .bw-head .eyebrow{margin-bottom:6px;font-size:11px;}
  .hint{font-size:14.5px;}
}

.loading{text-align:center;color:var(--muted);padding:40px 0;margin:0;}

.bw-head{text-align:center;margin-bottom:16px;}
.bw-head .eyebrow{margin-bottom:8px;}
.bw-preview{
  text-align:center;font-size:13.5px;color:var(--ink-2);
  border:1.5px dashed var(--line);border-radius:var(--r-sm);
  padding:9px 12px;margin:0 0 14px;
}
.bw-done{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;background:var(--cream);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:16px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);
}
.bw-empty{text-align:center;padding:14px 0 6px;}
.bw-empty p{color:var(--ink-2);max-width:44ch;margin:0 auto 20px;}

/* ---------------- buzzle board ---------------- */
/* Sized so the whole game — hint, six rows, three keyboard rows —
   fits one 390x844 screen without scrolling. */
.board{
  display:grid;grid-template-rows:repeat(6,1fr);
  gap:min(2vw,9px);margin:0 auto 14px;
  width:100%;
  /* Six square rows make the board about 1.2x as tall as it is wide, so
     capping the width in vh is what keeps board + keyboard on one screen.
     38vh of width lands the board around 46vh of height. */
  max-width:min(340px, 38vh);
}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:min(2vw,9px);}
.cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font:800 clamp(20px,6.4vw,30px)/1 "Outfit",sans-serif;
  text-transform:uppercase;
  border:2px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);
}
.cell.filled{border-color:var(--slate);}
.cell.pop{animation:pop .1s ease;}
@keyframes pop{50%{transform:scale(1.07);}}

/* Navy = right letter, right spot. Gold = right letter, wrong spot.
   Blue/gold instead of the usual green/yellow: it stays distinguishable
   for red-green colour blindness, which is ~8% of men. */
.cell.hit{background:var(--navy);border-color:var(--navy);color:#fff;}
.cell.near{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.cell.miss{background:var(--miss);border-color:var(--miss);color:#fff;}

.row.shake{animation:shake .4s;}
@keyframes shake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-6px);}
  40%,60%{transform:translateX(6px);}
}
@media (prefers-reduced-motion: reduce){
  .cell.pop,.row.shake{animation:none;}
  .tile:hover{transform:none;}
}

.hint{
  text-align:center;font-size:15px;color:var(--ink-2);
  background:var(--cream);border:1.5px solid var(--line);
  padding:10px 15px;border-radius:var(--r-md);
  margin:0 auto;max-width:400px;
}
.hint b{color:var(--navy);font-weight:700;}

.kb{display:flex;flex-direction:column;gap:7px;max-width:460px;margin:0 auto;}
.kb-row{display:flex;gap:5px;justify-content:center;}
.kbd{
  flex:1;min-width:0;height:clamp(46px,7.2vh,56px);
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:700 15px/1 "Outfit",sans-serif;text-transform:uppercase;
  cursor:pointer;user-select:none;padding:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.kbd:hover{background:var(--line-soft);}
.kbd:active{transform:translateY(1px);}
.kbd.wide{flex:1.7;font-size:11.5px;letter-spacing:.05em;}
.kbd.hit{background:var(--navy);border-color:var(--navy);color:#fff;}
.kbd.near{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.kbd.miss{background:var(--miss);border-color:var(--miss);color:#fff;}

/* ---------------- cabinets ---------------- */
.cabinets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.tile{
  display:block;text-decoration:none;color:inherit;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:22px 20px;
  box-shadow:var(--lift-sm);
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.tile:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--lift);color:inherit;}
.tile-icon{font-size:26px;line-height:1;margin-bottom:12px;display:block;}
.tile-name{font-size:18px;font-weight:800;letter-spacing:-.015em;margin-bottom:5px;}
.tile-desc{font-size:14px;color:var(--muted);line-height:1.55;margin:0;}
.tile-meta{
  margin-top:13px;padding-top:11px;border-top:1.5px solid var(--line-soft);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);
}
/* The secondary row of cabinets sits tighter than the main stage. */
.cabinets.compact .tile{padding:18px 18px;}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 84px);
  transform:translateX(-50%);
  background:var(--navy);color:var(--cream);
  padding:12px 22px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:700;z-index:200;
  box-shadow:var(--lift);opacity:0;pointer-events:none;
  max-width:min(90vw,360px);text-align:center;
  transition:opacity .18s ease;
}
.toast.show{opacity:1;}

/* ---------------- modal ---------------- */
.scrim{
  position:fixed;inset:0;background:rgba(0,26,58,.62);
  display:none;align-items:center;justify-content:center;padding:16px;z-index:150;
  overscroll-behavior:contain;
}
.scrim.show{display:flex;}
.modal{
  background:var(--cream);border-radius:var(--r-lg);
  max-width:440px;width:100%;padding:30px 28px;
  box-shadow:0 30px 70px -20px rgba(0,20,45,.6);
  max-height:min(92vh,900px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal h2{margin-bottom:5px;}
.modal .blurb{font-size:14.5px;color:var(--ink-2);}
@media (max-width:720px){
  .scrim{align-items:flex-end;padding:0;}
  .modal{
    max-width:none;border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:24px 18px calc(24px + env(safe-area-inset-bottom,0px));
    max-height:92vh;
  }
}
.grid-preview{
  font-size:20px;line-height:1.3;letter-spacing:3px;text-align:center;
  margin:18px 0;white-space:pre;
}
.idform,.offer{border-top:1px solid var(--line);padding-top:16px;margin-top:14px;}
.field{margin-bottom:16px;position:relative;}
.field label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.field label .opt{text-transform:none;letter-spacing:0;font-weight:400;}
.field input,.field select{
  width:100%;padding:13px 16px;font-size:16px;font-family:inherit;
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-pill);
}
.field input::placeholder{color:var(--muted);opacity:.75;}
.field input#bwInitials{text-transform:uppercase;letter-spacing:.34em;font-weight:800;}
.field .help{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45;}

/* town combobox */
.combo{position:relative;}
.combo-list{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--lift);
  max-height:250px;overflow-y:auto;padding:5px;
}
.combo-list.show{display:block;}
.combo-list button{
  display:flex;align-items:baseline;gap:8px;width:100%;
  background:none;border:0;text-align:left;cursor:pointer;
  padding:11px 12px;border-radius:var(--r-sm);
  font:400 15.5px/1.3 "Outfit",sans-serif;color:var(--ink);
}
.combo-list button b{font-weight:700;}
.combo-list button .via{color:var(--muted);font-size:13px;}
.combo-list button .cty{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap;}
.combo-list button:hover,.combo-list button.on{background:var(--gold-wash);}

.modal-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.modal-actions .btn{flex:1;min-width:132px;}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0;}
.stat{
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:13px 4px;text-align:center;
}
.stat-n{font-size:23px;font-weight:800;line-height:1;color:var(--navy);}
.stat-l{font-size:10.5px;color:var(--muted);margin-top:5px;}

/* ---------------- leaderboard ---------------- */
.tabs{
  display:flex;gap:8px;margin-bottom:22px;
  overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:none;padding:11px 18px;font-size:14px;font-weight:700;
  background:var(--paper);color:var(--ink-2);
  border:1.5px solid var(--line);border-radius:var(--r-pill);cursor:pointer;
  font-family:"Outfit",sans-serif;white-space:nowrap;min-height:44px;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.tab:hover{border-color:var(--navy);}
.tab[aria-selected="true"]{background:var(--navy);color:var(--cream);border-color:var(--navy);}

.vs{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:22px 22px;margin-bottom:22px;
  box-shadow:var(--lift-sm);
}
.vs-side{text-align:center;min-width:0;}
.vs-side .n{font-size:clamp(26px,7vw,34px);font-weight:800;line-height:1;color:var(--navy);}
.vs-side .l{
  font-size:11.5px;color:var(--muted);letter-spacing:.08em;
  text-transform:uppercase;margin-top:7px;font-weight:600;
}
.vs-mid{font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.14em;}
.vs-bar{
  grid-column:1/-1;height:9px;background:var(--line-soft);
  border-radius:var(--r-pill);overflow:hidden;display:flex;margin-top:4px;
}
.vs-bar i{display:block;height:100%;}
.vs-bar .a{background:var(--gold);}
.vs-bar .b{background:var(--navy);}

.card{
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--lift-sm);
}
.pad{padding:24px;}
@media (max-width:720px){ .pad{padding:18px 15px;} }
.tw{overflow-x:auto;border-radius:var(--r-md);-webkit-overflow-scrolling:touch;}

table.board-t{width:100%;border-collapse:collapse;font-size:15px;}
table.board-t th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:12px 14px;
  border-bottom:1.5px solid var(--line);background:var(--cream);white-space:nowrap;
}
table.board-t td{padding:13px 14px;border-bottom:1px solid var(--line-soft);}
table.board-t tr:last-child td{border-bottom:none;}
td.rank{font-weight:800;color:var(--muted);width:44px;}
tr.top td.rank{color:var(--gold-ink);}
td.who{font-weight:800;letter-spacing:.16em;font-family:"IBM Plex Mono",monospace;white-space:nowrap;}
td.score,th.score{text-align:right;font-weight:800;}
td.cty{color:var(--muted);font-size:14px;}
td.town{font-weight:600;color:var(--ink-2);}
/* On a narrow phone the points column matters more than the county.
   Drop the county rather than push Pts off the right edge. */
@media (max-width:560px){ .col-cty{display:none;} }
.empty{padding:36px 18px;text-align:center;color:var(--muted);font-size:15px;}
/* Your own row, so you can find yourself without reading every line. */
tr.you{background:var(--gold-wash);}
tr.you td.town::after,tr.you td.who::after{
  content:" · you";font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--gold-ink);font-family:"Outfit",sans-serif;white-space:nowrap;
}
tr.you td.who + td.town::after{content:"";}

/* ---------------- footer ---------------- */
footer.site{
  padding:28px 0 calc(40px + env(safe-area-inset-bottom,0px));
  font-size:14px;color:rgba(245,240,230,.72);
}
footer.site .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;}
footer.site a{color:rgba(245,240,230,.9);text-decoration:none;}
footer.site a:hover{color:var(--gold);}

/* newsletter band, navy-on-navy inside the cream sheet */
.band{
  background:var(--navy);color:var(--cream);
  border-radius:var(--r-md);padding:32px 26px;text-align:center;
}
.band .eyebrow{color:var(--gold);}
.band h2{color:var(--cream);}
.band p{color:rgba(245,240,230,.85);max-width:50ch;margin-left:auto;margin-right:auto;}
.band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.band .row .btn{flex:1;min-width:210px;max-width:280px;}
.band .fine{color:rgba(245,240,230,.7);font-size:13px;margin:16px 0 0;}

/* ---------------- crossword ---------------- */
/* The grid is sized from the viewport width so eleven columns fit a phone
   without pinching, and capped so it doesn't sprawl on a desktop. */
.xw-head{text-align:center;margin-bottom:14px;}
.xw-head h2{margin-bottom:6px;}
.xw-note{font-size:14.5px;color:var(--muted);margin:0;max-width:46ch;margin-inline:auto;}

.xw-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,11),1fr);
  gap:2px;background:var(--navy);padding:2px;
  border-radius:var(--r-sm);
  width:100%;max-width:min(430px,92vw);
  margin:0 auto 12px;
}
.xw-cell{
  position:relative;aspect-ratio:1;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.xw-cell.block{background:var(--navy);cursor:default;}
.xw-cell .n{
  position:absolute;top:1px;left:2px;
  font:700 9px/1 "IBM Plex Mono",monospace;font-style:normal;
  color:var(--muted);pointer-events:none;
}
/* On a highlighted square the muted grey drops to 2.5:1 against the gold.
   Navy reads at 7:1 on both the wash and the full gold. */
.xw-cell.word .n,.xw-cell.cur .n{color:var(--navy-deep);}
.xw-cell .v{
  font:700 clamp(14px,3.9vw,22px)/1 "Outfit",sans-serif;
  color:var(--navy);text-transform:uppercase;
}
/* Gold for the word you're in, deeper gold for the square you're on —
   the same two-tone the Buzzle board uses, and it survives colour
   blindness because it is a lightness difference, not a hue one. */
.xw-cell.word{background:var(--gold-wash);}
.xw-cell.cur{background:var(--gold);}
.xw-cell.given .v{color:var(--gold-ink);}
.xw-cell.wrong{background:#F3D2D2;}
.xw-cell.wrong .v{color:#8A1C1C;}

.xw-bar{
  display:flex;align-items:stretch;gap:6px;
  max-width:min(520px,96vw);margin:0 auto 10px;
}
.xw-bar .clue{
  flex:1;min-width:0;display:flex;align-items:center;
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:10px 13px;
  font-size:14.5px;line-height:1.35;color:var(--ink-2);min-height:52px;
}
.xw-bar .clue b{color:var(--navy);margin-right:6px;white-space:nowrap;}
.xw-bar .nav{
  flex:none;width:42px;min-height:52px;
  background:var(--paper);color:var(--navy);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:700 20px/1 "Outfit",sans-serif;cursor:pointer;
}
.xw-bar .nav:hover{background:var(--cream);border-color:var(--navy);}

.xw-kb{max-width:min(520px,96vw);margin:0 auto;}
.xw-kb .kbd{height:clamp(42px,6vh,52px);}

.xw-tools{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:min(520px,96vw);margin:12px auto 0;
}
.xw-count{font-size:13px;color:var(--muted);margin-left:auto;}

.xw-lists{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
  margin-top:28px;padding-top:22px;border-top:1.5px solid var(--line);
}
.xw-list h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);}
.xw-list ol{list-style:none;margin:0;padding:0;}
.xw-list li{
  font-size:14px;line-height:1.4;padding:6px 8px;border-radius:var(--r-sm);
  color:var(--ink-2);cursor:pointer;
}
.xw-list li b{color:var(--navy);margin-right:5px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;}
.xw-list li:hover{background:var(--paper);}
.xw-list li.on{background:var(--gold-wash);color:var(--ink);}
@media (max-width:720px){
  .xw-lists{grid-template-columns:1fr;gap:18px;margin-top:22px;}
  .xw-bar .clue{font-size:14px;padding:9px 11px;}
}

/* ============================================================
   Sighting — photo under a 4x4 mask
   The mask is a grid of opaque tiles positioned OVER an
   untouched photo. Nothing here may be reimplemented as a
   filter on the image itself: these are CC BY-SA files and a
   blurred copy would be an adaptation. See sighting.js.
   ============================================================ */
.sg-head{text-align:center;margin-bottom:14px;}
.sg-ask{font-size:19px;font-weight:700;color:var(--navy);margin:0;}

/* aspect-ratio is set inline per puzzle from the photo's own dimensions —
   see shape() in sighting.js. The 4/3 here is only the fallback for a
   record with no size recorded. max-height keeps a portrait photo from
   pushing the answer buttons below the fold on a short screen. */
.sg-stage{
  position:relative;width:100%;max-width:min(520px,100%);
  margin:0 auto;aspect-ratio:4/3;max-height:56vh;border-radius:var(--r-md);
  overflow:hidden;background:var(--navy-deep);box-shadow:var(--lift-sm);
}
.sg-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}

/* Four by four, gapless. The 1px outlines are inset shadows rather than
   borders so the tiles tile exactly and no photo leaks through the seams. */
.sg-mask{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
}
.sg-tile{
  border:0;padding:0;margin:0;cursor:pointer;
  background:var(--navy);
  box-shadow:inset 0 0 0 1px rgba(245,240,230,.22);
  transition:opacity .28s ease, transform .28s ease;
  -webkit-tap-highlight-color:transparent;
}
.sg-tile::after{
  content:"";display:block;width:13px;height:13px;margin:auto;
  background:
    linear-gradient(var(--gold-hi),var(--gold-hi)) center/100% 2.5px no-repeat,
    linear-gradient(var(--gold-hi),var(--gold-hi)) center/2.5px 100% no-repeat;
  opacity:.55;
}
.sg-tile:hover{background:var(--navy-mid);}
.sg-tile:hover::after{opacity:1;}
.sg-tile:focus-visible{outline:3px solid var(--gold-hi);outline-offset:-3px;}
.sg-tile.up{opacity:0;pointer-events:none;transform:scale(.86);}
.sg-mask.open .sg-tile{opacity:0;pointer-events:none;}

.sg-count{
  text-align:center;font-size:13.5px;color:var(--muted);
  margin:12px 0 14px;min-height:19px;
}

.sg-opts{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  max-width:min(520px,100%);margin:0 auto;
}
.sg-opt{
  min-height:52px;padding:11px 13px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--paper);
  font:600 15px/1.25 "Outfit",system-ui,sans-serif;color:var(--ink);
  cursor:pointer;text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.sg-opt:hover:not(:disabled){border-color:var(--navy);background:var(--cream);}
.sg-opt:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px;}
/* Struck through as well as greyed — the state must not be colour alone. */
.sg-opt.out{
  color:var(--muted);text-decoration:line-through;
  background:var(--cream);border-color:var(--line-soft);cursor:default;
}
.sg-opt.right{
  background:var(--gold-wash);border-color:var(--gold);
  color:var(--navy-deep);          /* 12.95:1 on gold-wash */
}
.sg-opt:disabled{cursor:default;}

.sg-after{
  max-width:min(520px,100%);margin:18px auto 0;padding-top:16px;
  border-top:1.5px solid var(--line);text-align:center;
}
.sg-verdict{font-size:17px;font-weight:600;margin:0 0 8px;}
.sg-verdict.yes{color:var(--navy);}
.sg-verdict.no{color:#8A1C1C;}       /* 9.28:1 on paper */
.sg-verdict b{color:inherit;}
.sg-fact{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px;max-width:52ch;margin-inline:auto;}
.sg-credit{font-size:12px;color:var(--muted);margin:0;}
.sg-credit a{color:var(--muted);text-decoration:underline;}

@media (max-width:720px){
  .sg-head{margin-bottom:10px;}
  .sg-ask{font-size:17px;}
  /* True full-bleed on a phone. Nudging the margins by a fixed amount only
     claws back the card's own padding and still left the photo boxed in at
     330px on a 390px screen; going out to 100vw ignores every ancestor's
     padding, which is the point. Detail in the photo is the whole game, so
     the picture gets the full width of the device. The photo's own ratio
     still decides the height. */
  .sg-stage{width:100vw;max-width:none;max-height:52vh;
            margin-left:50%;transform:translateX(-50%);border-radius:0;}
  .sg-count{margin:11px 0 12px;font-size:13px;}
  .sg-opts{grid-template-columns:1fr;gap:8px;}
  .sg-opt{min-height:50px;font-size:15px;}
  .sg-after{margin-top:16px;}
}

/* Secondary tab row — which game the board is showing. */
.tabs.sub{margin-top:-10px;margin-bottom:22px;}
.tabs.sub .tab{
  font-size:13px;padding:8px 14px;min-height:38px;
  background:transparent;color:var(--muted);border-color:var(--line-soft);
}
.tabs.sub .tab[aria-selected="true"]{
  background:var(--gold-wash);color:#6F5602;border-color:var(--gold);
}

/* On a phone the title and note push the grid down the screen. Tighten them
   and let the grid claim a little of the card's padding back. */
@media (max-width:720px){
  .xw-head{margin-bottom:10px;}
  .xw-head h2{font-size:19px;margin-bottom:4px;}
  .xw-note{font-size:13px;line-height:1.4;}
  .xw-grid{width:calc(100% + 16px);max-width:none;margin-left:-8px;margin-right:-8px;}
  .xw-lists{margin-top:18px;}
}