/* Stonele. Text colors pass WCAG AA on --paper and --plate in both themes. */

/* Self-hosted fonts (OFL 1.1, unmodified Fontsource builds; licenses in /licenses/): no third-party requests. */
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/fonts/source-serif-4-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/fonts/source-serif-4-latin-opsz-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
:root {
  --paper: #f3f6f6;
  --plate: #fbfdfd;
  --sunk: #e6eded;
  --ink: #13262c;
  --ink-soft: #4f6469;
  --line: #c3d1d3;
  --accent: #0e7477;
  --gold: #8c6a00;
  --accent-rgb: 14, 116, 119;
  --error: #9c3b2b;
  --shade: 19, 38, 44;
  --rule: rgba(19, 38, 44, .13);
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --link: 22px;
  color-scheme: light;
}

/* dark: src/theme.js sets data-theme from the player's choice (settings menu) or the device setting */
:root[data-theme='dark'] {
  --paper: #0e181b;
  --plate: #16252a;
  --sunk: #0a1315;
  --ink: #e2ebeb;
  --ink-soft: #9fb3b7;
  --line: #2f464c;
  --accent: #57c4c0;
  --gold: #e9c46a;
  --accent-rgb: 87, 196, 192;
  --error: #f08f7c;
  --shade: 0, 0, 0;
  --rule: rgba(226, 235, 235, .13);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

main { max-width: 560px; margin: 0 auto; padding: 28px 16px 48px; }
section { display: flex; flex-direction: column; align-items: center; text-align: center; }
p { margin: 0; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* ---------- cards ---------- */

.plate {
  position: relative;
  background: var(--plate);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--rule), 0 16px 34px -26px rgba(var(--shade), .6);
}
.plate-word { font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }

.eyebrow {
  font: 700 11px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

/* ---------- buttons ---------- */

.btn {
  font: 600 15px var(--sans);
  border: 0;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .18s var(--ease), opacity .18s var(--ease);
}
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 10px 20px -12px rgba(var(--shade), .8); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 24px -14px rgba(var(--shade), .85); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: progress; }
.actions { display: flex; gap: 10px; margin-top: 12px; }
.btn-small { background: none; box-shadow: inset 0 0 0 1px currentColor; font-size: 13px; padding: 6px 14px; }
.btn-small:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn-small:disabled { cursor: default; }
.btn-hint { color: var(--accent); }
.btn-give-up { color: var(--error); }

/* ---------- home ---------- */

.hero { display: flex; align-items: center; justify-content: center; width: 100%; margin: 24px 0 28px; font-size: inherit; }
.hero-plate { flex: 1; max-width: 220px; padding: 18px 14px; animation: rise .6s var(--ease) both; }
.hero-plate .plate-word { font-size: clamp(22px, 6.4vw, 40px); }

.lede { font: 21px/1.45 var(--serif); max-width: 28em; margin-bottom: 18px; text-wrap: balance; animation: rise .6s var(--ease) .2s both; }
.today { color: var(--ink-soft); font-size: 14px; }
.pair { font-weight: 700; font-size: 19px; letter-spacing: -.01em; margin: 2px 0 20px; }
.pair .arrow { color: var(--ink-soft); font-weight: 400; margin: 0 .45em; }
.loader { width: 160px; height: 2px; background: var(--sunk); border-radius: 2px; overflow: hidden; margin-top: 16px; }
.loader-fill { height: 100%; width: 0; background: var(--accent); transition: width .24s var(--ease); }
.loader-text { color: var(--ink-soft); font-size: 13px; min-height: 1.5em; margin-top: 6px; }
hr { width: 100%; border: 0; border-top: 1px solid var(--rule); margin: 30px 0 22px; }
.rules { font: 17px/1.5 var(--serif); color: var(--ink-soft); text-align: left; padding-left: 1.2em; margin: 0; max-width: 28em; }
.rules li { margin: 6px 0; }
.about-game { font: 17px/1.5 var(--serif); color: var(--ink-soft); text-align: left; max-width: 28em; }
.about-game p + p { margin-top: 10px; }
.about-game a { color: var(--accent); }

/* ---------- game: a vertical trail of cards ---------- */

.game > * { animation: rise .5s var(--ease) both; }
.bar {
  width: 100%;
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--ink-soft);
  padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.bar b { color: var(--ink); font-variant-numeric: tabular-nums; }

.board { width: 100%; max-width: 420px; display: flex; flex-direction: column; }
.board > *, .stones > li { position: relative; }
.stones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.plate-end, .stones > li {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 18px 16px;
  container-type: inline-size;
}
.board .plate-word { font-size: clamp(22px, calc(100cqw / (var(--chars, 6) * .62)), 44px); }
.plate-end .eyebrow, .stones .tier { position: absolute; top: 9px; margin: 0; font-size: 10px; }
.plate-end .eyebrow { left: 14px; }
/* points: gold at 10,000, fading toward the muted text color as the score drops */
:root { --points-color: color-mix(in oklab, var(--gold) calc(var(--score, 1) * 100%), var(--ink-soft)); }
.plate-target .points {
  position: absolute; top: 8px; right: 14px;
  font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--points-color); font-variant-numeric: tabular-nums;
}
.points.dip { animation: drop .5s var(--ease); }
.stones .tier { right: 14px; font: 600 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* the links between cards */
.stones > li, .slot { margin-top: var(--link); }
.stones > li::before, .slot::before {
  content: '';
  position: absolute; left: calc(50% - 1px); top: calc(-1 * var(--link));
  height: var(--link);
  border-left: 2px solid var(--line);
  transform-origin: top;
  transition: border-color .5s var(--ease);
}
.slot::before { border-left-style: dashed; }

.stone-wobbly { background: var(--sunk); rotate: -.6deg; } /* rotate, not transform, so entry animations still apply */

/* a new stone settles in with a ripple, and its link draws down to it */
.stones > li.enter { animation: rise .5s var(--ease) both; }
.stones > li.enter::before { animation: draw .3s var(--ease) both; }
.stones > li.enter::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: ring .9s var(--ease) .1s both;
}

/* the empty card you type into */
.slot { border-radius: 12px; outline: 1.5px dashed var(--line); outline-offset: -1.5px; transition: outline-color .2s var(--ease); }
.slot:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.slot.miss { outline: 2px solid var(--error); outline-offset: -2px; animation: shake .36s var(--ease); }
.slot.nudge { animation: shake .3s var(--ease); }
.slot form { display: flex; gap: 8px; padding: 8px; }
.slot input {
  flex: 1; min-width: 0;
  font: 700 22px var(--sans); letter-spacing: -.015em;
  color: var(--ink); background: transparent;
  border: 0; border-radius: 8px; padding: 8px 10px;
}
.slot input::placeholder { color: var(--ink-soft); font-weight: 500; }
.slot input:focus { outline: none; }

/* the remaining distance to the target, with the closeness meter beside it */
.gap { height: 56px; }
.gap::before {
  content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0;
  border-left: 2px dotted var(--line);
  transform-origin: top;
}
.meter {
  position: absolute; left: calc(50% + 16px); top: calc(50% - 9px);
  width: 76px; height: 4px; border-radius: 4px;
  background: var(--sunk); overflow: hidden;
}
.meter-fill { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .7s var(--ease); }
.meter-label { position: absolute; left: calc(50% + 16px); top: calc(50% - 1px); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* the target lights up as you get closer, and fully when you arrive */
.plate-target::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 30px -8px rgba(var(--accent-rgb), .6);
  opacity: calc(var(--shore, 0) * .6);
  transition: opacity .7s var(--ease);
}
.is-won .slot { display: none; }
.is-won .stones > li::before { border-color: var(--accent); }
.is-won .gap::before { border-left: 2px solid var(--accent); animation: draw .6s var(--ease) both; }
.is-won .meter, .is-won .meter-label { opacity: 0; transition: opacity .3s; }
.is-won .plate-target::after { opacity: 1; animation: arrive 1.4s var(--ease) .4s both; }

.status { font: 18px/1.45 var(--serif); margin-top: 22px; min-height: 1.45em; text-wrap: balance; }
.sunk { margin-top: 10px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.sunk .w {
  display: inline-block; margin-left: .55em;
  font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 600;
  color: var(--error); text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.sunk .w.new { animation: drop .5s var(--ease) both; }

/* ---------- end ---------- */

.end { width: 100%; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule); }
.end > * { animation: rise .55s var(--ease) both; }
.end > :nth-child(2) { animation-delay: .08s; }
.end > :nth-child(n + 3) { animation-delay: .16s; }
.result { font: 400 25px/1.3 var(--serif); margin: 0 0 6px; }
.result b { font: 800 46px var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; vertical-align: -.06em; }
.result:focus { outline: none; }
.score { font: 600 15px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--points-color); margin-bottom: 4px; }
.score b { font: 800 30px var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; vertical-align: -.08em; margin-right: .15em; }
.rank { font: 17px/1.5 var(--serif); color: var(--ink-soft); min-height: 1.5em; margin-bottom: 26px; }
.rank b { color: var(--ink); font: 700 17px var(--sans); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0 0 22px; }
.chip { background: var(--plate); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: 15px; }
.chips .arrow { color: var(--ink-soft); font-size: 13px; }
.share-status { min-height: 1.5em; font-size: 14px; color: var(--accent); margin-top: 8px; }
.share-fallback { width: 100%; font: 15px/1.4 var(--sans); background: var(--plate); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-top: 8px; }
.stats { font-size: 13px; color: var(--ink-soft); margin-top: 14px; }

/* ---------- motion ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes draw { from { transform: scaleY(0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-7px); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes ring {
  from { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35); }
  to { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0); }
}
@keyframes arrive {
  0% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 0 rgba(var(--accent-rgb), .45); }
  70%, 100% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 22px rgba(var(--accent-rgb), 0); }
}

/* ---------- live player count: top left, opposite the settings button (public/src/live.js) ---------- */

.live { position: fixed; top: 24px; left: 24px; z-index: 3; height: 45px; display: flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--ink-soft); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } to { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } }

/* ---------- settings: the button in the top-right corner and its menu ---------- */

.corner { position: fixed; top: 24px; right: 24px; z-index: 3; }
.settings-toggle {
  display: grid; place-items: center;
  width: 45px; height: 45px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--plate); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent), 0 6px 16px -10px rgba(var(--shade), .5);
  transition: transform .14s var(--ease);
}
.settings-toggle:hover { transform: scale(1.045); }
.settings-toggle circle { fill: var(--plate); } /* the knobs cut the slider lines */
.settings {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(312px, calc(100vw - 24px)); padding: 16px 18px 6px; text-align: left;
  background: var(--plate); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 24px 60px -28px rgba(var(--shade), .55);
  animation: rise .2s var(--ease) both;
}
.settings .eyebrow { margin-bottom: 10px; }
.setting { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.setting label { flex: 1; cursor: pointer; }
.setting b { display: block; font-weight: 500; font-size: 15px; line-height: 1.2; }
.setting label span { display: block; font: italic 14px/1.35 var(--serif); color: var(--ink-soft); margin-top: 2px; }
.switch {
  flex: none; position: relative;
  width: 44px; height: 26px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  --edge: color-mix(in srgb, var(--ink) 55%, transparent); /* 3:1 against the card in both themes, so the off state shows */
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--edge);
  transition: background .18s var(--ease);
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--plate); box-shadow: 0 0 0 1px var(--edge), 0 2px 5px -2px rgba(var(--shade), .45);
  transition: transform .18s var(--ease);
}
.switch[aria-checked='true'] { background: var(--ink); box-shadow: none; }
.switch[aria-checked='true']::after { transform: translateX(18px); }

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

/* phone with the on-screen keyboard open: keep the trail and the input in view */
@media (max-height: 520px) {
  main { padding-top: 12px; }
  .bar { margin-bottom: 12px; padding-bottom: 8px; }
  :root { --link: 14px; }
  .plate-end, .stones > li { padding: 18px 14px 10px; }
  .gap { height: 40px; }
}

/* narrow screens: the settings button scrolls with the page, and the content starts below it */
@media (max-width: 720px) {
  .corner { position: absolute; top: 12px; right: 12px; }
  .live { position: absolute; top: 12px; left: 12px; }
  main { padding-top: 72px; }
}

/* ---------- footer and text pages (archive, FAQ, about, credits, privacy, terms) ---------- */

.site-footer { max-width: 560px; margin: 0 auto; padding: 0 16px 40px; text-align: center; font-size: 13px; color: var(--ink-soft); }
.site-footer nav { margin-bottom: 6px; }
.site-footer a { color: inherit; }
main.page { padding-top: 28px; } /* no settings button to clear on text pages */
.page { font: 17px/1.6 var(--serif); }
.page h1 { font: 700 32px/1.15 var(--sans); letter-spacing: -.02em; margin: 4px 0 8px; }
.page h2 { font: 700 19px/1.3 var(--sans); margin: 32px 0 8px; }
.page h3 { font: 600 16px/1.4 var(--sans); margin: 22px 0 4px; }
.page p, .page ul, .page ol { margin: 0 0 12px; }
.page li { margin-bottom: 4px; }
.page a { color: var(--accent); }
.page .updated { font-size: 14px; color: var(--ink-soft); }
.page .license-text { font: 13px/1.5 var(--sans); color: var(--ink-soft); }
.home-link { display: inline-block; margin-bottom: 16px; font: 700 15px var(--sans); color: var(--ink); text-decoration: none; }
.archive-list { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 8px; }
.archive-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; color: var(--ink); text-decoration: none; font-family: var(--sans); }
.archive-list a:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.archive-list b { font-weight: 700; }
.archive-list span { font-size: 14px; color: var(--ink-soft); text-align: right; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }