:root{
  --paper:#EEF1F7; --card:#FFFFFF; --ink:#23336B; --ink-soft:#5A6591;
  --line:#C9D0E4; --dauber:#E0247A; --b:#DC2277; --i:#F2A33A; --n:#2BB3C0; --g:#6C5CE7; --o:#3FB56B;
  /* Letter tile text. The tiles keep their colors in dark mode, so these don't change with it. */
  --b-ink:#FFF; --i-ink:#23336B; --n-ink:#23336B; --g-ink:#FFF; --o-ink:#23336B;
  --free:#FFF2D9; --win:#FFE36E; --focus:#127C87;
  /* How strongly the stamp tints a square. Flags set the -light and -dark values (themes.js) so stamped text stays
     readable. */
  --stamp-mix:var(--stamp-mix-light, 50%); --stamp-ring:var(--stamp-ring-light, 27%);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141A33; --card:#1E2647; --ink:#E9ECF8; --ink-soft:#A6AED0;
    --line:#34406E; --dauber:#FF4B9A; --free:#3A3222; --win:#6B5A12; --focus:#2BB3C0;
    --stamp-mix:var(--stamp-mix-dark, 35%); --stamp-ring:var(--stamp-ring-dark, 19%);
  }
}
:root[data-theme="dark"]{
  --paper:#141A33; --card:#1E2647; --ink:#E9ECF8; --ink-soft:#A6AED0;
  --line:#34406E; --dauber:#FF4B9A; --free:#3A3222; --win:#6B5A12; --focus:#2BB3C0;
  --stamp-mix:var(--stamp-mix-dark, 35%); --stamp-ring:var(--stamp-ring-dark, 19%);
}
/* Set on every element, not inherited: inheritance doesn't reach inside <details> (the join panel). */
*,*::before,*::after{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color:transparent;
}
main{max-width:640px; margin:0 auto; padding:20px 12px 32px}
header{text-align:center; margin-bottom:16px; padding:0 56px}  /* room for the fixed settings gear */
h1{
  font-family:"Bungee", Impact, "Arial Black", sans-serif; font-weight:400;
  font-size:clamp(2rem, 9vw, 3.4rem); line-height:1; margin:0;
  color:var(--ink); letter-spacing:.01em; overflow-wrap:break-word;
  text-shadow:3px 3px 0 var(--dauber);
}
.sub{margin:10px 0 0; color:var(--ink-soft); font-size:1rem}
.status{
  min-height:1.6em; margin:14px 0 10px; text-align:center;
  font-weight:700; font-size:1.05rem;
}
.status.hit{animation:pop .45s ease-out}
@keyframes pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.card{
  background:var(--card); border:3px solid var(--ink); border-radius:18px;
  padding:8px; box-shadow:6px 6px 0 var(--ink);
}
.letters,.grid{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.letters{margin-bottom:5px}
.letters span{
  font-family:"Bungee", Impact, sans-serif; text-align:center; color:#fff;
  font-size:clamp(1.2rem,6vw,2rem); padding:4px 0; border-radius:10px 10px 4px 4px;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 18%, transparent);
}
.letters span:nth-child(1){background:var(--b); color:var(--b-ink)}
.letters span:nth-child(2){background:var(--i); color:var(--i-ink)}
.letters span:nth-child(3){background:var(--n); color:var(--n-ink)}
.letters span:nth-child(4){background:var(--g); color:var(--g-ink)}
.letters span:nth-child(5){background:var(--o); color:var(--o-ink)}

.cell{
  /* Square, but overflow stays visible so a square grows taller rather than cut off text that doesn't fit
     (larger text settings, or a fallback font while the web font loads). */
  position:relative; aspect-ratio:1/1; min-width:0; border:1.5px solid var(--line); border-radius:6px;
  background:transparent; color:var(--ink); font:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:3px; font-size:clamp(.6rem, 2.5vw, .9rem); line-height:1.15;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere;
}
.cell:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.cell .t{position:relative; z-index:2}
.cell.free{background:var(--free); font-weight:700}
.cell::after{
  content:""; position:absolute; z-index:1; width:84%; height:84%; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, color-mix(in srgb, var(--dauber) var(--stamp-mix), transparent) 0 58%, color-mix(in srgb, var(--dauber) var(--stamp-ring), transparent) 70%, transparent 72%);
  transform:rotate(var(--r,0deg)) scale(0); opacity:0;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1), opacity .12s;
}
.cell.on::after{transform:rotate(var(--r,0deg)) scale(1); opacity:1}
.cell.on .t{font-weight:700}
.cell.win{background:var(--win)}

.actions{display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap}
button.act{
  font:inherit; font-weight:700; font-size:1rem; padding:12px 18px; border-radius:999px;
  border:2.5px solid var(--ink); background:var(--card); color:var(--ink); cursor:pointer; min-height:44px;
}
button.act.primary{background:var(--ink); color:var(--paper)}
button.act:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
/* Links too: the browser's own ring fades out on dark themes. */
a:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.note{color:var(--ink-soft); font-size:.9rem; text-align:center; margin-top:18px; line-height:1.5}

/* Leaderboard join panel and player line */
.join{
  background:var(--card); border:2px solid var(--line); border-radius:14px;
  margin:0 0 12px; padding:0 14px;
}
.join summary{cursor:pointer; font-weight:700; padding:12px 0; min-height:44px; color:var(--ink)}
.join summary:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.join-help{margin:0 0 10px; color:var(--ink-soft); font-size:.95rem}
.join-fields{display:flex; gap:10px; flex-wrap:wrap}
.join-fields label{flex:1 1 140px; display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:.9rem; color:var(--ink-soft)}
.join input{
  font:inherit; color:var(--ink); background:var(--paper);
  border:2px solid var(--line); border-radius:10px; padding:9px 10px; min-width:0;
}
/* Inside the box, so the ring doesn't run into the label text just above it. */
.join input:focus-visible{outline:3px solid var(--focus); outline-offset:-2px}
.join button.act{margin:12px 0 14px}
.board-link{margin-left:10px; color:var(--ink-soft); display:inline-flex; align-items:center; min-height:44px}
.join-msg{text-align:center; font-weight:700; margin:0 0 8px; min-height:0}
.join-msg:empty{display:none}
.player{text-align:center; margin:0 0 12px; color:var(--ink-soft); font-size:.95rem}
.player strong{color:var(--ink)}
.player a{color:var(--ink)}

/* Settings gear and panel (theme and mode picker) */
.settings-btn{
  position:fixed; z-index:20; top:calc(env(safe-area-inset-top, 0px) + 14px); right:14px;
  width:46px; height:46px; display:grid; place-items:center; padding:0; cursor:pointer;
  color:var(--ink); border:3px solid transparent; border-radius:50%;
  /* The ring takes the B-I-N-G-O colors, so it follows every theme and flag. */
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(var(--b), var(--i), var(--n), var(--g), var(--o), var(--b)) border-box;
  box-shadow:3px 3px 0 var(--ink);
}
.settings-btn svg{transition:transform .35s ease}
.settings-btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.settings-btn:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.settings{
  position:fixed; z-index:20; top:calc(env(safe-area-inset-top, 0px) + 70px); right:14px;
  width:min(320px, calc(100vw - 28px)); padding:14px 16px 16px;
  background:var(--card); color:var(--ink); border:3px solid var(--ink); border-radius:16px;
  box-shadow:5px 5px 0 var(--ink);
}
.settings h2{margin:0 0 10px; font-size:1.05rem}
.look{display:flex; flex-direction:column; gap:12px}
.look label{display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:.9rem; color:var(--ink-soft)}
.look select{
  font:inherit; font-weight:400; color:var(--ink); background:var(--paper);
  border:2px solid var(--line); border-radius:10px; padding:9px 10px; width:100%;
}
@media (prefers-reduced-motion: reduce){ .settings-btn svg{transition:none} }

/* Gear styles for the designed themes */
:root[data-look="contrast"] .settings-btn{background:var(--card); border-color:var(--ink); box-shadow:none}
:root[data-look="cyberpunk"] .settings-btn{
  border:0; border-radius:0; box-shadow:none; top:calc(env(safe-area-inset-top, 0px) + 18px);
  background:#FCEE0A; color:#0B0C10;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
:root[data-look="cyberpunk"] .settings-btn:focus-visible{outline-offset:-6px; outline-color:#FF003C}
:root[data-look="cyberpunk"] .settings{
  border:0; border-radius:0; border-top:2px solid #FCEE0A; border-left:4px solid #FF003C; box-shadow:none;
  top:calc(env(safe-area-inset-top, 0px) + 74px);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
:root[data-look="cyberpunk"] .settings h2{font-family:"Rajdhani", sans-serif; text-transform:uppercase; letter-spacing:.1em; color:#FCEE0A}
:root[data-look="glitch"] .settings-btn{
  border-radius:0; background:var(--card); border-color:#F2F2F2; box-shadow:3px 0 0 #FF003C, -3px 0 0 #00FFD5;
}
:root[data-look="glitch"] .settings{border-radius:0; border-color:#F2F2F2; box-shadow:5px 5px 0 #FF003C, -3px -3px 0 #00FFD5}
:root[data-look="synthwave"] .settings-btn{
  background:linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, #FF3FA4, #FF9A3C, #3CF0FF) border-box;
  box-shadow:0 0 16px #FF3FA488; color:#FDE7FF;
}
:root[data-look="synthwave"] .settings{border-color:#FF3FA4; box-shadow:0 0 24px #FF3FA455}
:root[data-look="arcade"] .settings-btn{border-radius:0; background:#0B0B1E; border:3px solid #FFD400; color:#FFD400; box-shadow:4px 4px 0 #FF3B3B}
:root[data-look="arcade"] .settings{border-radius:0; border-color:#2EE6FF; box-shadow:5px 5px 0 #FF3B3B}
:root[data-look="arcade"] .settings h2{font-family:"Press Start 2P", monospace; font-size:.8rem}
:root[data-look="comic"] .settings-btn{background:#FFD600; border:3px solid #111; color:#111; box-shadow:4px 4px 0 #111}
:root[data-look="comic"] .settings{border-width:4px; border-radius:6px; box-shadow:8px 8px 0 #111}
:root[data-look="comic"] .settings h2{font-family:"Bangers", Impact, sans-serif; font-size:1.5rem; letter-spacing:.04em; font-weight:400}
:root[data-look="tavern"] .settings-btn{
  background:radial-gradient(circle at 35% 30%, #F3D98B, #C9A04A 55%, #8B6B2E); border:2px solid #5A3A1A;
  color:#3B2A1A; box-shadow:0 3px 6px rgba(60,40,10,.4);
}
:root[data-look="tavern"] .settings{border:6px double #8B6B2E; border-radius:6px; box-shadow:0 8px 22px rgba(60,40,10,.35)}
:root[data-look="tavern"] .settings h2{font-family:"Cinzel", Georgia, serif}
:root[data-look="spooky"] .settings-btn{
  background:var(--card); border-color:#B45CFF; color:#7CFF3A; box-shadow:0 0 14px #7CFF3A66;
}
:root[data-look="spooky"] .settings{border-color:#B45CFF; box-shadow:0 0 22px #7CFF3A40, 6px 6px 0 #B45CFF}
:root[data-look="spooky"] .settings h2{font-family:"Creepster", sans-serif; letter-spacing:.06em; color:#7CFF3A; font-weight:400}
.look select:disabled{opacity:.5}
.look select:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* Pride flags. themes.js picks stamp and win colors from the flag for each mode, keeping stamped text readable.
   Stripes can be any color, so the focus ring uses the text color. */
:root[data-look="flag"]{--focus:var(--ink); --dauber:var(--dauber-light); --win:var(--win-light)}
:root[data-look="flag"][data-theme="dark"]{--dauber:var(--dauber-dark); --win:var(--win-dark)}
@media (prefers-color-scheme: dark){
  :root[data-look="flag"]:not([data-theme="light"]){--dauber:var(--dauber-dark); --win:var(--win-dark)}
}
.flag{display:none}
:root[data-look="flag"] .flag{
  display:block; max-width:360px; height:22px; margin:12px auto 0;
  border-radius:6px; overflow:hidden; box-shadow:0 0 0 2px var(--ink);
}
.flag svg{display:block; width:100%; height:100%}

/* Cyberpunk: near-black HUD with acid-yellow accents, signal red and cyan, cut corners, monospace readouts.
   --ink is the text inside panels; --hud and --hud-soft are the yellow text sitting on the page. */
:root[data-look="cyberpunk"]{
  --paper:#0B0C10; --card:#15171D; --ink:#E8F9FF; --ink-soft:#8FB3BF; --line:#243238;
  --dauber:#FF003C; --b:#FF003C; --i:#FCEE0A; --n:#00F0FF; --g:#FCEE0A; --o:#FF003C;
  --b-ink:#FFF; --i-ink:#0B0C10; --n-ink:#0B0C10; --g-ink:#0B0C10; --o-ink:#FFF;
  --free:#2A2700; --win:#00393F; --focus:#FCEE0A; --cut:14px; --hud:#FCEE0A; --hud-soft:#CFC67A;
}
:root[data-look="cyberpunk"] body{
  color:var(--hud);
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(252,238,10,.035) 22px 24px) fixed,
    var(--paper);
}
/* Hazard stripe along the top edge */
:root[data-look="cyberpunk"] body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:8px; z-index:10; pointer-events:none;
  background:repeating-linear-gradient(-45deg, var(--hud) 0 10px, #0B0C10 10px 20px);
}
:root[data-look="cyberpunk"] header::before,
:root[data-look="cyberpunk"] .card::before,
:root[data-look="cyberpunk"] .card::after{
  display:block; font:600 .68rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing:.18em; text-transform:uppercase;
}
:root[data-look="cyberpunk"] header::before{content:"// sys.link established  \25AE  node 0xB1N60"; margin:6px 0 10px; color:var(--hud)}
:root[data-look="cyberpunk"] h1{
  font-family:"Rajdhani", "Bungee", sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(2.4rem, 11vw, 4.2rem); line-height:.95;
  color:var(--hud); text-shadow:3px 3px 0 var(--dauber), -2px -2px 0 color-mix(in srgb, var(--n) 70%, transparent);
}
:root[data-look="cyberpunk"] .sub,
:root[data-look="cyberpunk"] .note,
:root[data-look="cyberpunk"] .look label,
:root[data-look="cyberpunk"] .player,
:root[data-look="cyberpunk"] .lb-foot,
:root[data-look="cyberpunk"] .toolbar label{color:var(--hud-soft)}
:root[data-look="cyberpunk"] .player strong,
:root[data-look="cyberpunk"] .player a,
:root[data-look="cyberpunk"] .lb-foot a{color:var(--hud)}
:root[data-look="cyberpunk"] .status{font-family:"Rajdhani", sans-serif; font-weight:700; font-size:1.25rem; text-transform:uppercase; letter-spacing:.08em}
:root[data-look="cyberpunk"] .card,
:root[data-look="cyberpunk"] .join,
:root[data-look="cyberpunk"] .panel,
:root[data-look="cyberpunk"] .lb-col,
:root[data-look="cyberpunk"] .lb-off{
  color:var(--ink); border:0; border-radius:0; box-shadow:none; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
:root[data-look="cyberpunk"] .card{padding:10px 10px 8px; border-left:4px solid var(--dauber); border-top:2px solid var(--hud)}
:root[data-look="cyberpunk"] .card::before{content:"grid_05x05 // scan mode active"; color:var(--n); margin:2px 0 8px 2px}
:root[data-look="cyberpunk"] .card::after{content:"0x5F 0x42 0x49 0x4E 0x47 0x4F"; color:var(--dauber); text-align:right; margin:8px 4px 2px 0}
:root[data-look="cyberpunk"] .lb-col{border-top:6px solid var(--n)}
:root[data-look="cyberpunk"] .letters span{
  --cut:8px; font-family:"Rajdhani", sans-serif; font-weight:700; border-radius:0; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow:none; padding:2px 0;
}
:root[data-look="cyberpunk"] .cell{--r:0deg !important; --cut:8px; border-radius:0; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); border-color:var(--line)}
:root[data-look="cyberpunk"] .cell.free{color:var(--hud)}
:root[data-look="cyberpunk"] .cell.win{border-color:var(--n)}
:root[data-look="cyberpunk"] .cell::after{
  --cut:10px; width:88%; height:88%; border-radius:0; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background:
    linear-gradient(135deg, transparent 0 70%, color-mix(in srgb, var(--n) 70%, transparent) 70% 74%, transparent 74%),
    color-mix(in srgb, var(--dauber) 80%, transparent);
}
/* Stamped text sits on a backing in the stamp color, so long names stay readable past the stamp's edge and its cyan stripe. */
:root[data-look="cyberpunk"] .cell.on .t{color:#FFF; background:color-mix(in srgb, var(--dauber) 80%, var(--card)); padding:0 1px}
:root[data-look="cyberpunk"] button.act{
  --cut:10px; border:0; border-radius:0; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); background:var(--hud); color:#0B0C10;
  font-family:"Rajdhani", sans-serif; font-size:1.1rem; text-transform:uppercase; letter-spacing:.08em;
}
:root[data-look="cyberpunk"] button.act.primary{background:var(--dauber); color:#0B0C10}
/* Outlines outside a cut-corner shape get clipped, so draw focus inside it. */
:root[data-look="cyberpunk"] .cell:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
:root[data-look="cyberpunk"] button.act:focus-visible{outline:3px solid var(--focus); outline-offset:-6px}
/* The buttons are yellow or red, so the focus line inside them is dark. */
:root[data-look="cyberpunk"] button.act:focus-visible{outline-color:#0B0C10}
:root[data-look="cyberpunk"] .look select,
:root[data-look="cyberpunk"] .toolbar select{border-radius:0; border-color:var(--hud-soft)}
/* Small text on the red badge, so it gets the dark text the red button has (white reaches only 3.95:1). */
:root[data-look="cyberpunk"] .badge:not(.warn-badge){color:#0B0C10}

/* Glitch punk */
:root[data-look="glitch"]{
  --paper:#0C0C0C; --card:#151515; --ink:#F2F2F2; --ink-soft:#A0A0A0; --line:#333;
  --dauber:#FF003C; --b:#FF003C; --i:#F7FF00; --n:#00FFD5; --g:#8C00FF; --o:#FFFFFF;
  --b-ink:#111; --i-ink:#111; --n-ink:#111; --g-ink:#FFF; --o-ink:#111; --free:#262012; --win:#4A0014; --focus:#00FFD5;
}
:root[data-look="glitch"] body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:10;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
:root[data-look="glitch"] h1{
  position:relative; color:#F2F2F2; text-shadow:3px 0 #FF003C, -3px 0 #00FFD5;
  animation:glitch-skew 4s infinite steps(1);
}
:root[data-look="glitch"] h1::before,:root[data-look="glitch"] h1::after{
  content:attr(data-text); position:absolute; inset:0; background:var(--paper); text-shadow:none;
}
:root[data-look="glitch"] h1::before{color:#FF003C; transform:translateX(-3px); animation:glitch-slice 2.6s infinite steps(1)}
:root[data-look="glitch"] h1::after{color:#00FFD5; transform:translateX(3px); animation:glitch-slice 3.1s infinite steps(1) reverse}
@keyframes glitch-slice{
  0%{clip-path:inset(0 0 100% 0)} 8%{clip-path:inset(12% 0 70% 0)} 10%{clip-path:inset(60% 0 22% 0)}
  12%{clip-path:inset(0 0 100% 0)} 55%{clip-path:inset(40% 0 45% 0)} 57%{clip-path:inset(0 0 100% 0)}
}
@keyframes glitch-skew{0%,100%{transform:none} 48%{transform:skewX(-8deg)} 49%{transform:none} 83%{transform:translateX(2px)} 84%{transform:none}}
:root[data-look="glitch"] .card{border-radius:0; border-color:#F2F2F2; box-shadow:5px 5px 0 #FF003C, -3px -3px 0 #00FFD5}
:root[data-look="glitch"] .letters span{border-radius:0}
:root[data-look="glitch"] .cell{border-radius:0}
:root[data-look="glitch"] .cell.on::after{
  border-radius:0; animation:stamp-glitch .3s steps(3);
  box-shadow:3px 0 0 color-mix(in srgb, #00FFD5 50%, transparent);
}
@keyframes stamp-glitch{0%{translate:4px -2px} 33%{translate:-3px 2px} 66%{translate:2px 1px} 100%{translate:0 0}}
:root[data-look="glitch"] button.act{border-radius:0; box-shadow:3px 3px 0 #FF003C}

/* High contrast: follows the mode, no effects */
:root[data-look="contrast"]{
  --paper:#FFF; --card:#FFF; --ink:#000; --ink-soft:#000; --line:#000; --dauber:#000;
  --b:#000; --i:#000; --n:#000; --g:#000; --o:#000; --free:#FFF; --win:#FFE600; --focus:var(--ink);
  --b-ink:#FFF; --i-ink:#FFF; --n-ink:#FFF; --g-ink:#FFF; --o-ink:#FFF;
}
:root[data-look="contrast"][data-theme="dark"]{
  --paper:#000; --card:#000; --ink:#FFF; --ink-soft:#FFF; --line:#FFF; --dauber:#FFF;
  --b:#FFF; --i:#FFF; --n:#FFF; --g:#FFF; --o:#FFF; --free:#000;
  --b-ink:#000; --i-ink:#000; --n-ink:#000; --g-ink:#000; --o-ink:#000;
}
@media (prefers-color-scheme: dark){
  :root[data-look="contrast"]:not([data-theme="light"]){
    --paper:#000; --card:#000; --ink:#FFF; --ink-soft:#FFF; --line:#FFF; --dauber:#FFF;
    --b:#FFF; --i:#FFF; --n:#FFF; --g:#FFF; --o:#FFF; --free:#000;
    --b-ink:#000; --i-ink:#000; --n-ink:#000; --g-ink:#000; --o-ink:#000;
  }
}
:root[data-look="contrast"] h1{text-shadow:none; text-decoration:underline 4px; text-underline-offset:6px}
:root[data-look="contrast"] .card{box-shadow:none}
:root[data-look="contrast"] .cell{border-width:2px; font-weight:700; --r:0deg !important}
:root[data-look="contrast"] .cell::after{width:100%; height:100%; border-radius:4px; background:none; border:6px solid var(--ink)}
/* The stamp is a thick border, so stamped text gets a backing to keep long names off it. */
:root[data-look="contrast"] .cell.on .t{text-decoration:underline 2px; background:var(--card); padding:0 1px}
:root[data-look="contrast"] .cell.win .t{background:var(--win)}
:root[data-look="contrast"] .cell.win{color:#000}
:root[data-look="contrast"] .cell.win::after{border-color:#000}

/* Synthwave */
:root[data-look="synthwave"]{
  --paper:#1A0B2E; --card:#241040; --ink:#FDE7FF; --ink-soft:#C8A8E0; --line:#4A2A70;
  --dauber:#FF3FA4; --b:#FF3FA4; --i:#FF9A3C; --n:#FFE45C; --g:#3CF0FF; --o:#B26BFF;
  --b-ink:#111; --i-ink:#111; --n-ink:#111; --g-ink:#111; --o-ink:#111; --free:#3A1A55; --win:#6A1E5E; --focus:#3CF0FF;
}
:root[data-look="synthwave"] body{
  background:
    linear-gradient(#FF3FA430 1px, transparent 1px) 0 0/100% 44px fixed,
    linear-gradient(90deg, #FF3FA430 1px, transparent 1px) 0 0/44px 100% fixed,
    radial-gradient(circle at 50% 108%, #FFB23C 0 16%, transparent 16.5%) fixed,
    linear-gradient(180deg, #1A0B2E 0%, #3B0F4F 45%, #8A1F5E 75%, #FF7A3C 100%) fixed;
}
:root[data-look="synthwave"] h1{
  font-family:"Audiowide", "Bungee", sans-serif; text-transform:uppercase; text-shadow:none;
  background:linear-gradient(180deg, #FFF 0%, #BDE6FF 46%, #9B7BFF 50%, #FF9AE0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 8px #FF3FA4);
}
:root[data-look="synthwave"] .card{
  border:2px solid #FF3FA4; border-radius:12px; box-shadow:0 0 26px #FF3FA466, 0 0 0 1px #3CF0FF;
}
:root[data-look="synthwave"] .letters span{font-family:"Audiowide", sans-serif}
:root[data-look="synthwave"] .cell.on::after{box-shadow:0 0 14px #FF3FA4}
:root[data-look="synthwave"] .look label,:root[data-look="synthwave"] .note{color:var(--ink); text-shadow:0 1px 4px #1A0B2E}
/* The sunset gets bright near the bottom of the screen, so text on the page sits on a dark glass label
   and focus rings get a dark edge. */
:root[data-look="synthwave"] :is(.sub, .status:not(:empty), .note, .player, .join-msg:not(:empty), .lb-foot){
  background:color-mix(in srgb, var(--paper) 82%, transparent); border-radius:12px; padding:6px 12px;
  width:fit-content; max-width:100%; margin-inline:auto;
}
:root[data-look="synthwave"] :is(button.act, .settings-btn):focus-visible{box-shadow:0 0 0 9px #1A0B2E}
:root[data-look="synthwave"] button.act.primary{background:linear-gradient(90deg, #FF3FA4, #FF9A3C); color:#111; border-color:#FF3FA4}

/* Retro arcade */
:root[data-look="arcade"]{
  --paper:#000; --card:#0B0B1E; --ink:#F8F8F8; --ink-soft:#9AA0C8; --line:#2A2A66;
  --dauber:#FFD400; --b:#FF3B3B; --i:#FFD400; --n:#2EE6FF; --g:#FF7AF0; --o:#4DFF4D;
  --b-ink:#111; --i-ink:#111; --n-ink:#111; --g-ink:#111; --o-ink:#111; --free:#26204A; --win:#3B2E00; --focus:#2EE6FF;
}
:root[data-look="arcade"] h1{
  font-family:"Press Start 2P", monospace; font-size:clamp(1.2rem, 6vw, 2.2rem); line-height:1.35;
  color:#FFD400; text-shadow:4px 4px 0 #FF3B3B;
}
:root[data-look="arcade"] .letters span{
  font-family:"Press Start 2P", monospace; font-size:clamp(.9rem, 4.5vw, 1.5rem); padding:9px 0; border-radius:0;
}
:root[data-look="arcade"] .card{border:4px solid #2EE6FF; border-radius:0; box-shadow:6px 6px 0 #FF3B3B}
:root[data-look="arcade"] .cell{border-radius:0; border-width:2px; --r:0deg !important}
:root[data-look="arcade"] .cell::after{
  border-radius:0; background:radial-gradient(circle, #FFE98A 0 40%, #FFD400 41% 64%, #C79A00 65%);
  clip-path:polygon(30% 0,70% 0,70% 10%,90% 10%,90% 30%,100% 30%,100% 70%,90% 70%,90% 90%,70% 90%,70% 100%,30% 100%,30% 90%,10% 90%,10% 70%,0 70%,0 30%,10% 30%,10% 10%,30% 10%);
}
/* Dark text is for the coin, so it sits on a coin-colored backing where long names run past the coin. */
:root[data-look="arcade"] .cell.on .t{color:#111; background:#FFD400; padding:0 1px}
:root[data-look="arcade"] .status{font-family:"Press Start 2P", monospace; font-size:.75rem; line-height:1.6}
:root[data-look="arcade"] button.act{font-family:"Press Start 2P", monospace; font-size:.7rem; border-radius:0; box-shadow:4px 4px 0 #FF3B3B}

/* Comic book */
:root[data-look="comic"]{
  --paper:#FFF6D5; --card:#FFF; --ink:#111; --ink-soft:#444; --line:#111;
  --dauber:#FF2E2E; --b:#FF2E2E; --i:#FFD600; --n:#1E90FF; --g:#111; --o:#1FAF3A;
  --b-ink:#FFF; --i-ink:#111; --n-ink:#FFF; --g-ink:#FFF; --o-ink:#111; --free:#FFE98A; --win:#FFD600; --focus:#0A5FC4;
}
:root[data-look="comic"] body{background:radial-gradient(#00000022 1.3px, transparent 1.6px) 0 0/10px 10px, var(--paper)}
:root[data-look="comic"] h1{
  font-family:"Bangers", Impact, sans-serif; font-size:clamp(2.6rem, 12vw, 4.4rem); letter-spacing:.04em;
  color:#FFD600; -webkit-text-stroke:2px #111; text-shadow:5px 5px 0 #111;
}
:root[data-look="comic"] .card{border:4px solid #111; border-radius:4px; box-shadow:8px 8px 0 #111}
:root[data-look="comic"] .letters span{font-family:"Bangers", Impact, sans-serif; font-size:clamp(1.5rem, 7vw, 2.4rem); border:3px solid #111; border-radius:4px; padding:0}
:root[data-look="comic"] .cell{border:2.5px solid #111; border-radius:2px}
:root[data-look="comic"] .cell::after{
  width:96%; height:96%; border-radius:0;
  background:radial-gradient(circle, #FFE14D 0 52%, #FF2E2E 53%);
  clip-path:polygon(50% 0%,56.6% 16.7%,69.1% 3.8%,68.9% 21.7%,85.4% 14.6%,78.3% 31.1%,96.2% 30.9%,83.3% 43.4%,100% 50%,83.3% 56.6%,96.2% 69.1%,78.3% 68.9%,85.4% 85.4%,68.9% 78.3%,69.1% 96.2%,56.6% 83.3%,50% 100%,43.4% 83.3%,30.9% 96.2%,31.1% 78.3%,14.6% 85.4%,21.7% 68.9%,3.8% 69.1%,16.7% 56.6%,0% 50%,16.7% 43.4%,3.8% 30.9%,21.7% 31.1%,14.6% 14.6%,31.1% 21.7%,30.9% 3.8%,43.4% 16.7%);
}
:root[data-look="comic"] .status{font-family:"Bangers", Impact, sans-serif; font-size:1.5rem; letter-spacing:.04em}
:root[data-look="comic"] button.act{border-width:3px; border-radius:4px; box-shadow:4px 4px 0 #111; font-family:"Bangers", Impact, sans-serif; font-size:1.25rem; letter-spacing:.04em; font-weight:400}

/* Fantasy tavern */
:root[data-look="tavern"]{
  --paper:#E4D3AE; --card:#F6ECD4; --ink:#3B2A1A; --ink-soft:#4A3620; --line:#C9B48A;
  --dauber:#8E1B1B; --b:#8E1B1B; --i:#9A6B0B; --n:#2F5D3A; --g:#3E3A7A; --o:#6B3E1F;
  --free:#EAD9A8; --win:#E7C873; --focus:#2F5D3A;
  --b-ink:#F6ECD4; --i-ink:#F6ECD4; --n-ink:#F6ECD4; --g-ink:#F6ECD4; --o-ink:#F6ECD4;
}
:root[data-look="tavern"] body{background:radial-gradient(ellipse at center, #F3E8CF 0%, #E0CFA8 65%, #BFA274 100%) fixed, var(--paper)}
:root[data-look="tavern"] h1{font-family:"Cinzel", Georgia, serif; font-weight:900; text-shadow:2px 2px 0 #C9A04A}
:root[data-look="tavern"] .sub{font-style:italic}
:root[data-look="tavern"] .card{
  border:6px double #8B6B2E; border-radius:6px;
  box-shadow:0 8px 22px rgba(60,40,10,.35), inset 0 0 36px rgba(140,100,40,.18);
}
:root[data-look="tavern"] .letters span{font-family:"Cinzel", Georgia, serif; font-weight:900; color:#F6ECD4; border-radius:4px}
:root[data-look="tavern"] .cell::after{
  border-radius:46% 54% 50% 50% / 52% 48% 52% 48%;
  background:radial-gradient(circle at 45% 40%, #B22A2A 0 38%, #8E1B1B 39% 60%, #6E1212 61%);
  box-shadow:0 2px 4px rgba(60,20,10,.4);
}
/* Light text is for the wax seal, so it sits on a seal-colored backing where long names run past the seal. */
:root[data-look="tavern"] .cell.on .t{color:#FFF3DC; background:#8E1B1B; padding:0 1px}
:root[data-look="tavern"] button.act{font-family:"Cinzel", Georgia, serif; border-color:#8B6B2E}
:root[data-look="tavern"] button.act.primary{background:#5A3A1A; color:#F6ECD4}

/* Spooky */
:root[data-look="spooky"]{
  --paper:#140B1F; --card:#1E1230; --ink:#EDE3F7; --ink-soft:#A993C2; --line:#3A2757;
  --dauber:#7CFF3A; --b:#FF7A1A; --i:#7CFF3A; --n:#B45CFF; --g:#FF7A1A; --o:#7CFF3A;
  --b-ink:#111; --i-ink:#111; --n-ink:#111; --g-ink:#111; --o-ink:#111; --free:#2E1F16; --win:#2F4A12; --focus:#B45CFF;
}
:root[data-look="spooky"] h1{font-family:"Creepster", "Bungee", sans-serif; letter-spacing:.06em; color:#7CFF3A; text-shadow:3px 3px 0 #B45CFF}
:root[data-look="spooky"] .card{position:relative; border-color:#B45CFF; box-shadow:0 0 22px #7CFF3A40, 6px 6px 0 #B45CFF}
:root[data-look="spooky"] .card::before,:root[data-look="spooky"] .card::after{
  content:""; position:absolute; top:0; width:72px; height:72px; pointer-events:none; z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 0M0 0L93 37M0 0L71 71M0 0L37 93M0 0L0 100M18 0Q14 3 17 7Q12 8 13 13Q8 12 7 17Q3 14 0 18M36 0Q28 6 33 13Q24 16 25 25Q16 24 13 33Q6 28 0 36M56 0Q44 9 52 21Q38 25 40 40Q25 38 21 52Q9 44 0 56M78 0Q62 12 72 29Q52 35 55 55Q35 52 29 72Q12 62 0 78' fill='none' stroke='%23EDE3F7' stroke-opacity='.4' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
}
:root[data-look="spooky"] .card::before{left:0}
:root[data-look="spooky"] .card::after{right:0; transform:scaleX(-1)}
:root[data-look="spooky"] .letters span{font-family:"Creepster", sans-serif; letter-spacing:.06em}
:root[data-look="spooky"] .cell::after{
  border-radius:48% 52% 42% 58% / 40% 45% 62% 55%;
  background:radial-gradient(circle at 38% 32%, #C6FF9E 0 14%, #7CFF3A 15% 70%, #4FC21A 71%);
}
/* Dark text is for the slime, so it sits on a slime-colored backing where long names run past it. */
:root[data-look="spooky"] .cell.on .t{color:#0B1A00; background:#7CFF3A; padding:0 1px}

@media (prefers-reduced-motion: reduce){
  .cell::after,.status.hit{transition:none; animation:none}
  :root[data-look="glitch"] h1,:root[data-look="glitch"] h1::before,:root[data-look="glitch"] h1::after,
  :root[data-look="glitch"] .cell.on::after{animation:none}
  :root[data-look="glitch"] h1::before,:root[data-look="glitch"] h1::after{display:none}
}