/* Self-hosted Google Fonts (latin subset): Fraunces, Inter. SIL Open Font License. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-7234ed86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-7234ed86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/fraunces-7234ed86.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f3ede2;
  --paper-2: #ebe3d4;
  --card: #fbf8f2;
  --ink: #221c16;
  --ink-soft: #6b6157;
  --rule: #d9cfbf;
  --accent: #8c2f1f;
  --accent-ink: #fbf8f2;
  --gold: #b8862f;
  --good: #3f6b3a;
  --bad: #a63a2a;
  --tile: #2b231c;
  --tile-ink: #f3ede2;
  --tile-edge: #120e0a;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -24px rgba(60,40,20,.45), 0 2px 6px -2px rgba(60,40,20,.18);

  --t-common: #8a8178;
  --t-everyday: #5b7a8c;
  --t-uncommon: #3f6b3a;
  --t-rare: #2f5aa8;
  --t-obscure: #7a3fa0;
  --t-arcane: #b8862f;
  --t-mythical: #c2185b;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14110e;
    --paper-2: #1b1713;
    --card: #1f1a15;
    --ink: #eee6d8;
    --ink-soft: #a89c8d;
    --rule: #3a3229;
    --accent: #d8664c;
    --accent-ink: #160f0b;
    --gold: #e2b866;
    --good: #8cc483;
    --bad: #ef7b65;
    --tile: #eee6d8;
    --tile-ink: #1b1611;
    --tile-edge: #9c8f7d;
    --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.8);
    --t-common: #a39a90;
    --t-everyday: #8fb3c7;
    --t-uncommon: #8cc483;
    --t-rare: #7fa6f0;
    --t-obscure: #c79be6;
    --t-arcane: #e2b866;
    --t-mythical: #ff6fae;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--paper-2), transparent 70%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.shell {
  max-width: 640px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px 32px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Masthead */
.masthead { text-align: center; margin: 8px 0 28px; }
.logo {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.logo-end { color: var(--accent); }
.logo-link { color: inherit; text-decoration: none; border-radius: 8px; }
.logo-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.tagline {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}

.screen { flex: 1; animation: rise .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

/* Tiles */
.tile {
  display: inline-grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 10px;
  user-select: none;
}
.tile.end {
  width: 64px;
  height: 84px;
  font-size: 2.6rem;
  background: var(--tile);
  color: var(--tile-ink);
  box-shadow: 0 4px 0 var(--tile-edge), 0 10px 18px -8px rgba(0,0,0,.5);
  position: relative;
  flex: none;
}
/* spine stripes, like the top and bottom bands of a book spine */
.tile.end::before, .tile.end::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--gold);
  opacity: .85;
  border-radius: 2px;
}
.tile.end::before { top: 10px; }
.tile.end::after { bottom: 10px; }

/* Intro */
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  min-height: 66px;
  perspective: 700px;
}
.demo .tile.end { width: 48px; height: 62px; font-size: 1.9rem; backface-visibility: hidden; }
.demo .tile.end::before { top: 7px; } .demo .tile.end::after { bottom: 7px; }
.demo-mid {
  display: flex;
  gap: .16em;
  font-family: var(--serif);
  font-size: clamp(1rem, 4.4vw, 1.55rem);
  font-weight: 600;
  color: var(--ink);
}
/* Each middle letter is a little leaf of paper with a stack of pages behind it;
   game.js turns them like pages when a new word comes in. */
.leaf {
  width: 1.15em;
  height: 1.55em;
  display: grid;
  place-items: center;
  border-radius: 2px 5px 5px 2px;
  border: 1px solid var(--rule);
  background:
    linear-gradient(90deg, rgba(60, 40, 20, .14), transparent 28%),
    var(--card);
  box-shadow: 1.5px 1.5px 0 -0.5px var(--card), 1.5px 1.5px 0 0 var(--rule), 3px 3px 0 -0.5px var(--card), 3px 3px 0 0 var(--rule);
  transform-origin: left center;
  backface-visibility: hidden;
  line-height: 1;
}
.leaf.blank { color: transparent; }
.rules {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: r;
  display: grid;
  gap: 10px;
}
.rules li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  color: var(--ink);
}
.rules li::before {
  content: counter(r);
  font-family: var(--serif);
  font-weight: 800;
  color: var(--accent);
}

.actions { display: grid; gap: 10px; }
.actions.row { grid-template-columns: auto 1fr; margin-top: 8px; }
.fineprint { text-align: center; color: var(--ink-soft); font-size: .9rem; margin: 14px 0 0; }

/* Buttons */
.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  font: 600 1rem/1 var(--sans);
  padding: 16px 20px;
  cursor: pointer;
  transition: transform .08s ease, background .2s, box-shadow .2s, opacity .2s;
  color: inherit;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000);
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border: 1.5px solid var(--rule); }
.btn.ghost:hover { border-color: var(--ink-soft); }
.btn.small { padding: 16px 18px; font-size: .95rem; }
.btn.link { background: none; color: var(--ink-soft); padding: 10px; font-weight: 500; }
.btn.link:hover { color: var(--ink); }
.btn-sub { opacity: .75; font-weight: 500; margin-left: 4px; }
.btn[disabled] { opacity: .5; cursor: default; }

/* HUD */
.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 14px;
  gap: 8px;
}
.mode {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pips { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pips li {
  width: 12px;
  height: 22px;
  border-radius: 3px;
  background: var(--rule);
  transition: background .3s, transform .3s;
}
.pips li.current { background: var(--ink); transform: scaleY(1.15); }
.pips li.done { background: var(--tier, var(--accent)); }
.pips li.passed { background: transparent; border: 1.5px dashed var(--rule); }
.total {
  justify-self: end;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.total small { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--ink-soft); margin-left: 3px; }

/* Stage */
.stage { text-align: center; }
.round-label {
  margin: 0 0 22px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.word-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.middle {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 340px;
  height: 84px;
  border: 0;
  border-bottom: 3px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 6vw, 2.3rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 4px;
  border-radius: 0;
  transition: border-color .2s;
  caret-color: var(--accent);
}
.middle::placeholder { color: var(--rule); letter-spacing: .25em; }
.middle:focus { outline: none; border-bottom-color: var(--accent); }
.shake { animation: shake .38s; }
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
.feedback { min-height: 1.5em; margin: 14px 0 4px; font-weight: 500; color: var(--bad); }
.feedback.ok { color: var(--good); }
.live {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: baseline;
  min-height: 1.6em;
  color: var(--ink-soft);
  font-size: .9rem;
}
.live-word { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .04em; color: var(--ink); }

/* Result */
.result { margin-top: 16px; text-align: center; animation: rise .4s cubic-bezier(.2,.8,.2,1); }
.result-word {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  letter-spacing: .02em;
  line-height: 1.1;
  word-break: break-all;
}
.result-word .e { color: var(--accent); }
.result-word.passed { color: var(--ink-soft); font-style: italic; font-weight: 400; }
.result-tier {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tier);
  border: 1.5px solid currentColor;
}
.math {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 22px 0 10px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.math > div { padding: 12px 4px; }
.math > div + div { border-left: 1px solid var(--rule); }
.math dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.math dd { margin: 2px 0 0; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.math .sum dd { color: var(--accent); font-weight: 800; }
.rank { margin: 8px 0 14px; color: var(--ink-soft); font-size: .92rem; }
.best {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--paper-2);
}
.best-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.best-word { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; letter-spacing: .03em; }
.best-word small { display: block; font-family: var(--sans); color: var(--ink-soft); font-weight: 500; font-size: .82rem; margin-left: 4px; }
.result .btn { width: 100%; }

/* Finale */
.finale { text-align: center; }
.big-score {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(4rem, 18vw, 6rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 48;
}
.verdict { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-soft); margin: 10px 0 22px; }
.shelf {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}
.shelf li {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px 12px 0;
  border-radius: 10px;
  background: var(--paper-2);
  overflow: hidden;
}
.shelf .spine { align-self: stretch; background: var(--tier); }
.shelf .w { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; letter-spacing: .03em; word-break: break-all; }
.shelf .w small { display: block; font-family: var(--sans); font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tier); }
.shelf .p { font-family: var(--serif); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.shelf li.passed .w { color: var(--ink-soft); font-style: italic; font-weight: 400; }
.shelf li.passed .w small { color: var(--ink-soft); }

/* Loading */
.loading { display: grid; place-items: center; gap: 16px; padding: 60px 0; color: var(--ink-soft); }
.spin { animation: tip 1.4s ease-in-out infinite; }
@keyframes tip { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  animation: rise .25s ease-out;
  z-index: 10;
}

.foot { text-align: center; color: var(--ink-soft); font-size: .78rem; margin-top: 28px; opacity: .8; }

@media (max-width: 420px) {
  .card { padding: 22px 16px; border-radius: 16px; }
  .tile.end { width: 52px; height: 70px; font-size: 2.1rem; }
  .middle { height: 70px; }
  .hud .mode { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Scoring key */
.key-details {
  margin: 0 0 22px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper-2);
}
.key-details summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.key-details summary::-webkit-details-marker { display: none; }
.key-details summary::after { content: "+"; font-family: var(--serif); font-size: 1.3rem; line-height: 1; color: var(--accent); }
.key-details[open] summary::after { content: "–"; }
.key-details .key-slot { padding: 0 16px 16px; }
.key-link { display: block; margin: 10px auto 0; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }

.key-slot h3 {
  margin: 18px 0 4px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.key-formula { margin: 4px 0 0; font-family: var(--serif); font-size: 1.1rem; }
.key-note { margin: 0 0 10px; color: var(--ink-soft); font-size: .9rem; }
.key-lengths {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
  margin: 0 0 6px;
}
.key-lengths > div {
  text-align: center;
  padding: 6px 2px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
}
.key-lengths dt { font-size: .7rem; color: var(--ink-soft); }
.key-lengths dt::after { content: " letters"; }
.key-lengths dd { margin: 0; font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums; }
.key-tiers, .wordlist { width: 100%; border-collapse: collapse; font-size: .95rem; }
.key-tiers th, .wordlist th {
  text-align: left;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule);
}
.key-tiers td { padding: 8px; border-bottom: 1px solid var(--rule); }
.key-tiers td:first-child { font-weight: 600; color: var(--tier); }
.key-tiers .ex { font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.key-tiers .num { font-family: var(--serif); font-weight: 600; }
.tier-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tier);
  margin-right: 8px;
}

/* Dialog sheets */
.sheet {
  width: min(560px, calc(100vw - 32px));
  max-height: min(84dvh, 760px);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: rise .3s cubic-bezier(.2,.8,.2,1); }
.sheet::backdrop { background: rgba(20,14,8,.45); backdrop-filter: blur(3px); }
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--rule);
}
.sheet-head h2 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 1.4rem; line-height: 1.2; }
.sheet-sub { margin: 2px 0 0; color: var(--ink-soft); font-size: .9rem; }
.close {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.close:hover { background: var(--rule); }
.sheet-body { overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; }
.sheet-tools { padding: 12px 20px 8px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.sheet-tools input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 500 1rem var(--sans);
}
.sheet-tools input:focus { outline: none; border-color: var(--accent); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip {
  flex: none;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--tier, var(--ink));
  border-radius: 999px;
  padding: 5px 11px;
  font: 600 .8rem var(--sans);
  cursor: pointer;
}
.chip span { opacity: .65; font-weight: 500; margin-left: 2px; }
.chip.on { background: var(--tier, var(--ink)); border-color: var(--tier, var(--ink)); color: var(--card); }

.wordlist thead th { position: sticky; top: 0; background: var(--card); }
.wordlist td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.wordlist .rank { color: var(--ink-soft); font-size: .8rem; font-variant-numeric: tabular-nums; width: 1%; }
.wordlist .w { font-family: var(--serif); font-weight: 600; letter-spacing: .03em; overflow-wrap: anywhere; }
.wordlist .w small { display: block; font-family: var(--sans); font-weight: 400; font-size: .72rem; letter-spacing: 0; color: var(--ink-soft); }
.wordlist .w em {
  font-family: var(--sans);
  font-style: normal;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 2px;
}
.wordlist tr.mine td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wordlist td.num { font-family: var(--serif); font-weight: 800; font-size: 1.05rem; }
.tier-tag { font-size: .75rem; font-weight: 600; color: var(--tier); white-space: nowrap; }
.tier-tag::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--tier);
  margin-right: 6px;
}
.more { width: 100%; margin-top: 14px; }

/* Clickable shelf rows */
.shelf li[data-i] { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.shelf li[data-i]:hover { transform: translateX(3px); box-shadow: 0 2px 10px -4px rgba(0,0,0,.25); }
.shelf li[data-i]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.shelf-hint { margin: -12px 0 20px; }
.tier-tag.inline { display: none; margin-right: 8px; }
@media (max-width: 480px) {
  .wordlist .tier-col { display: none; }
  .tier-tag.inline { display: inline; }
  .wordlist .w { letter-spacing: 0; font-size: .95rem; }
  .wordlist td { padding: 8px 6px; }
  .sheet-head, .sheet-tools { padding-left: 16px; padding-right: 16px; }
  .sheet-body { padding: 4px 12px 16px; }
}

/* Tier colour hooks (set via class so the CSP can forbid inline styles) */
.t-common { --tier: var(--t-common); }
.t-everyday { --tier: var(--t-everyday); }
.t-uncommon { --tier: var(--t-uncommon); }
.t-rare { --tier: var(--t-rare); }
.t-obscure { --tier: var(--t-obscure); }
.t-arcane { --tier: var(--t-arcane); }
.t-none { --tier: var(--rule); }

/* Daily rank card (end screen) */
.rank-card {
  margin: -6px 0 22px;
  padding: 16px;
  border-radius: 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.rank-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rank-num {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rank-of { color: var(--ink-soft); font-weight: 500; }
.rank-who { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.rank-who strong { color: var(--ink); }
.inline-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rank-card .btn { width: 100%; }

/* Leaderboard dialog */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper-2); }
.tab {
  border: 0;
  border-radius: 9px;
  padding: 9px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 .95rem var(--sans);
  cursor: pointer;
}
.tab.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.board { list-style: none; margin: 8px 0 0; padding: 0; }
.board li {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--rule);
}
.board li.mine { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; }
.board li.gap { display: block; text-align: center; color: var(--ink-soft); padding: 2px; border: 0; }
.b-rank { font-family: var(--serif); font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.board li:nth-child(1) .b-rank { color: var(--gold); }
.b-name { font-weight: 600; overflow-wrap: anywhere; }
.b-name small { display: block; font-weight: 400; font-size: .75rem; color: var(--ink-soft); }
.board li.mine .b-name::after {
  content: "you";
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.b-score { font-family: var(--serif); font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.name-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--rule);
}
.name-form label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.name-form input {
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 500 1rem var(--sans);
}
.name-form input:focus { outline: none; border-color: var(--accent); }
.name-form .btn { padding: 11px 16px; }
.name-msg { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--bad); }
.name-msg:empty { display: none; }
.name-msg.ok { color: var(--good); }
@media (max-width: 480px) {
  .name-form { padding: 12px 16px 14px; }
  .name-form label { grid-column: 1 / -1; }
  .name-form input { grid-column: 1 / 3; }
}
.t-mythical { --tier: var(--t-mythical); }

/* Mythical: the rarest tier gets a shimmering badge */
.result-tier.mythical, .tier-tag.mythical-tag {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(110deg, #7b1fa2, #c2185b 40%, #ff8f00 60%, #c2185b 80%, #7b1fa2);
  background-size: 250% 100%;
  animation: shimmer 3s linear infinite;
}
.tier-tag.mythical-tag { padding: 1px 6px; border-radius: 4px; }
.tier-tag.mythical-tag::before { display: none; }
@keyframes shimmer { to { background-position: -250% 0; } }