:root {
  --night: #13142F;
  --night-up: #1D1F47;
  --night-down: #0D0E24;
  --paper: #F7EBD8;
  --dust: #BDB8CC;
  --rule: rgba(247, 235, 216, .17);
  --marigold: #F4A340;
  --flame: #FFE2A8;
  --brass: #C9A25E;
  --wedge-dark: #17172C;
  --wedge-cream: #EFDFBC;
  --ring-red: #C8282E;
  --ring-green: #1E8457;
  --board-rim: #0B0C20;
  --flight: #C8282E;
  --display: 'Telma', 'Iowan Old Style', Georgia, serif;
  --italic: 'Gambetta', 'Iowan Old Style', Georgia, serif;
  --body: 'Satoshi', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--night); overscroll-behavior: none; }
body {
  color: var(--paper); font: 500 19px/1.45 var(--body);
  -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; touch-action: manipulation;
  overflow: hidden;
}
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
a { color: var(--flame); }
#embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.app {
  position: relative; z-index: 1; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
#screen { min-height: 0; overflow: hidden auto; -webkit-overflow-scrolling: touch; }

/* The bar along the bottom */
#nav {
  display: flex; align-items: stretch; border-top: 1px solid var(--rule); background: rgba(13, 14, 36, .78);
  padding-bottom: env(safe-area-inset-bottom);
}
#nav button {
  flex: 1; min-height: 68px; font-size: 19px; color: var(--dust); position: relative; font-weight: 500;
}
#nav button.on { color: var(--paper); font-weight: 700; }
#nav button.on::before {
  content: ''; position: absolute; top: -1px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: var(--marigold);
}
#nav button.host { flex: 0 0 84px; font-size: 15px; color: rgba(189, 184, 204, .55); }
#nav .count { color: var(--marigold); font-weight: 700; margin-left: 6px; }

/* "Game on" strip */
.gamebar {
  width: 100%; display: flex; gap: 14px; justify-content: center; align-items: center; min-height: 52px; padding: 6px var(--gutter);
  background: var(--marigold); color: var(--night); font-weight: 700; font-size: 18px;
}

/* Shared type */
.title { font: 700 clamp(46px, 6.9vw, 92px)/.98 var(--display); letter-spacing: -.005em; }
.head { font: 700 clamp(36px, 4.6vw, 58px)/1.02 var(--display); }
.sub { font: 600 italic clamp(23px, 2.6vw, 30px)/1.2 var(--italic); color: var(--flame); }
.quiet { color: var(--dust); }
.small { font-size: 16px; }

/* Buttons */
.cta {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 84px; padding: 10px 26px;
  border-radius: 999px; background: var(--marigold); color: var(--night); font: 700 clamp(28px, 3.1vw, 36px)/1 var(--display);
  box-shadow: 0 0 44px rgba(244, 163, 64, .28); transition: transform .18s ease, background .18s ease;
}
.cta:active { transform: scale(.98); background: var(--flame); }
.cta[disabled] { background: rgba(247, 235, 216, .14); color: var(--dust); box-shadow: none; }
.btn {
  min-height: 58px; padding: 8px 22px; border-radius: 999px; border: 1.5px solid rgba(247, 235, 216, .38); font-weight: 700; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .18s ease;
}
.btn:active { background: rgba(247, 235, 216, .14); }
.btn.gold { border-color: var(--marigold); color: var(--flame); }
.btn.small { min-height: 46px; padding: 4px 16px; font-size: 16px; }
.btn[disabled] { opacity: .4; }
.link { color: var(--flame); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; min-height: 48px; }

/* The board */
.stage { position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; }
.stage::before {
  content: ''; position: absolute; inset: -8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 110, .25), rgba(255, 196, 110, .07) 62%, transparent);
  animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .62; } }
.board { position: relative; width: 100%; height: 100%; max-height: 100%; aspect-ratio: 1; display: block; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5)); overflow: visible; }
.board.live { touch-action: none; cursor: crosshair; }
.board .num { font: 700 25px var(--body); fill: var(--flame); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.board .seg { transition: opacity .5s ease, filter .25s ease; }
.board.focus .seg:not(.on) { opacity: .24; }
.board .seg.on { animation: glow 2.6s ease-in-out infinite; }
.board.focus .seg.on[fill="var(--wedge-dark)"] { fill: #8A6326; }
@keyframes glow { 50% { filter: brightness(1.32) saturate(1.1); } }
.board .seg.touch { filter: brightness(1.55) !important; opacity: 1 !important; stroke: var(--flame); stroke-width: 2.5; }
.board .pop {
  font: 700 46px var(--body); fill: var(--flame); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--night-down); stroke-width: 7px; stroke-linejoin: round;
}
.board.mini { filter: none; width: 76px; height: 76px; flex: none; }
.board.mini.focus .seg:not(.on) { opacity: .34; }
.board.mini .seg.on { animation: none; filter: brightness(1.25); }
.board.mini .seg.on[fill="var(--wedge-cream)"], .board.mini .seg.on[fill="var(--wedge-dark)"] { fill: var(--marigold); }

/* Home */
.home {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px);
  padding: clamp(14px, 2.4vh, 28px) var(--gutter);
}
.home .stage { height: 100%; }
.home .stage .board { max-width: min(100%, calc(100dvh - 130px)); }
.home-side { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2vh, 20px); min-height: 0; }
.home-side .lede { font-size: clamp(19px, 2vw, 22px); color: var(--dust); max-width: 28em; }
.facts { display: grid; gap: 0; }
.fact {
  display: grid; grid-template-columns: 7.2em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 18px;
}
.fact:last-child { border-bottom: 1px solid var(--rule); }
.fact > span:first-child { color: var(--dust); font-size: 16px; }
.fact b { font-weight: 700; overflow-wrap: anywhere; }
.fact .num { font: 700 26px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--flame); }
.foot-row { display: flex; align-items: center; gap: 14px; }

/* Music strip */
.music {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 10px;
  border-radius: 18px; background: var(--night-up);
}
.music .art { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: var(--night-down); display: grid; place-items: center; color: var(--marigold); }
.music .art.spin { animation: turn 14s linear infinite; border-radius: 50%; }
@keyframes turn { to { transform: rotate(360deg); } }
.music .open { text-align: left; min-width: 0; min-height: 56px; }
.music .open b, .music .open span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music .open b { font-size: 18px; font-weight: 700; }
.music .open span { font-size: 15px; color: var(--dust); }
.mctl { display: flex; gap: 4px; }
.mctl button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.mctl button:active { background: rgba(247, 235, 216, .14); }
.mctl button.main { background: var(--paper); color: var(--night); }
.mctl button[disabled] { opacity: .32; }
.mctl svg { width: 24px; height: 24px; fill: currentColor; }

/* Darts menu */
.menu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); padding: clamp(18px, 3vh, 32px) var(--gutter) 28px; }
.menu > div { min-width: 0; }
.menu .head { margin-bottom: 4px; }
.gamerow {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; text-align: left;
  padding: 13px 4px; border-bottom: 1px solid var(--rule); transition: background .2s ease;
}
.gamerow:active { background: rgba(247, 235, 216, .07); }
.gamerow h3 { font: 700 clamp(26px, 2.9vw, 33px)/1.05 var(--display); }
.gamerow p { color: var(--dust); font-size: 17px; line-height: 1.32; margin-top: 3px; }
.gamerow .meta { color: var(--flame); font-size: 15px; font-weight: 700; margin-top: 3px; }
.basics-row { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 18px; border-radius: 16px; background: var(--night-up); width: 100%; text-align: left; font-weight: 700; }
.basics-row span { color: var(--dust); font-weight: 500; font-size: 16px; display: block; }

/* The line */
.linehead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lineitem { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.lineitem .who { font-weight: 700; font-size: 20px; overflow-wrap: anywhere; }
.lineitem.mine .who { color: var(--marigold); }
.lineitem .what { color: var(--dust); font-size: 16px; }
.lineitem .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.linerow { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; }
.linerow .pos { font: 700 26px/1.15 var(--body); color: var(--flame); }
.empty { color: var(--dust); padding: 14px 0; }

/* How-to */
.howto { height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); padding: clamp(14px, 2.4vh, 26px) var(--gutter); }
.howto .stage { height: 100%; }
.howto .stage .board, .howto .stage .oche { max-width: min(100%, calc(100dvh - 130px)); }
.howto-side { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 0; }
.say { font: 600 italic clamp(27px, 3.1vw, 37px)/1.17 var(--italic); min-height: 5.3em; color: var(--paper); }
.say.in { animation: rise .55s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.readout { display: flex; align-items: baseline; gap: 14px; min-height: 66px; }
.readout .label { color: var(--dust); font-size: 17px; }
.readout .value { font: 700 clamp(44px, 5vw, 60px)/1 var(--body); color: var(--flame); }
.ticks { display: flex; gap: 6px; }
.ticks i { display: block; flex: 1; height: 5px; border-radius: 5px; background: var(--rule); overflow: hidden; position: relative; }
.ticks i.done { background: var(--marigold); }
.ticks i.now::after { content: ''; position: absolute; inset: 0; background: var(--marigold); transform-origin: left; animation: fill var(--ms, 3s) linear both; }
@keyframes fill { from { transform: scaleX(0); } }
.howto-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lamps { display: flex; gap: clamp(2px, .7vw, 8px); flex-wrap: wrap; }
.diya { width: clamp(26px, 3.1vw, 38px); height: auto; }
.diya .flame { fill: var(--marigold); opacity: 0; transition: opacity .7s ease; transform-origin: 50% 90%; }
.diya.lit .flame { opacity: 1; animation: flick 3.4s ease-in-out infinite; }
.diya.lit .bowl { fill: var(--brass); }
.diya .bowl { fill: #4A4768; transition: fill .7s ease; }
@keyframes flick { 50% { transform: scale(.93, 1.05); } }
.oche { width: 100%; aspect-ratio: 1; }
.oche text { font: 700 21px var(--body); fill: var(--flame); }

/* Who's playing */
.players { max-width: 760px; margin: 0 auto; padding: clamp(16px, 3vh, 30px) var(--gutter) 32px; display: grid; gap: 14px; }
.field { display: grid; grid-template-columns: 40px minmax(0, 1fr) 54px; gap: 8px; align-items: center; }
.field .pos { font: 700 26px var(--body); color: var(--flame); }
.field input, .textin {
  width: 100%; height: 64px; border-radius: 16px; border: 1.5px solid rgba(247, 235, 216, .32); background: var(--night-down);
  color: var(--paper); font: 700 24px var(--body); padding: 0 18px;
}
.field input:focus, .textin:focus { border-color: var(--marigold); outline: none; }
.field .rm { height: 54px; color: var(--dust); font-size: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 46px; padding: 4px 16px; border-radius: 999px; background: var(--night-up); font-weight: 700; font-size: 17px; }
.chip:active { background: var(--marigold); color: var(--night); }

/* Playing */
.play { height: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 30px); padding: clamp(8px, 1.4vh, 16px) var(--gutter); }
.play .stage { height: 100%; }
.play .stage .board { max-width: min(100%, calc(100dvh - 100px)); }
.touching {
  position: absolute; top: 2%; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none; white-space: nowrap;
  padding: 8px 20px; border-radius: 999px; background: var(--night-down); color: var(--flame); font: 700 26px var(--display);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5); transition: opacity .15s ease; opacity: 0;
}
.touching.show { opacity: 1; }
.play-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden auto; padding: 4px 0; }
.play-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--dust); font-size: 16px; }
.play-top b { color: var(--paper); font-weight: 700; }
.thrower { font: 700 clamp(44px, 5.6vw, 72px)/1 var(--display); overflow-wrap: anywhere; }
.thrower.in { animation: rise .5s ease both; }
.aim { color: var(--flame); font-size: 19px; line-height: 1.3; min-height: 2.6em; }
.pips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pip { min-height: 68px; border-radius: 14px; background: var(--night-up); display: grid; place-items: center; text-align: center; padding: 4px; font-size: 15px; line-height: 1.15; color: var(--dust); }
.pip b { display: block; font: 700 28px/1.05 var(--body); color: var(--flame); }
.pip.waiting { background: transparent; border: 1.5px dashed var(--rule); }
.pip.next { border-color: var(--marigold); color: var(--paper); }
.play-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pull { display: grid; gap: 8px; }
.pull .note { font: 600 italic 23px/1.2 var(--italic); color: var(--flame); }
.sb { display: grid; }
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--rule); font-size: 18px; border-radius: 0; }
.sb-row.me { background: rgba(244, 163, 64, .14); border-radius: 10px; border-color: transparent; }
.sb-row.out { opacity: .42; }
.sb-row b { font-weight: 700; overflow-wrap: anywhere; }
.sb-row .big { font: 700 30px/1 var(--body); font-variant-numeric: tabular-nums; color: var(--flame); }
.sb-row .tag { display: inline-block; min-width: 34px; text-align: center; padding: 1px 7px; border-radius: 8px; background: var(--night-down); color: var(--flame); font-weight: 700; margin-right: 8px; }
.sb-row .armed { color: var(--marigold); font-size: 15px; font-weight: 700; margin-left: 8px; }
.sb-row .diya { width: 21px; }
.sb-row .lamps { gap: 2px; justify-content: flex-end; flex-wrap: nowrap; }
.rail { display: flex; gap: 5px; }
.rail span { flex: 1; text-align: center; padding: 4px 0; border-radius: 8px; background: var(--night-up); color: var(--dust); font-weight: 700; font-size: 16px; }
.rail span.now { background: var(--marigold); color: var(--night); }
.rail span.past { opacity: .4; }
table.cricket { width: 100%; border-collapse: collapse; font-size: 16px; }
.cricket th, .cricket td { padding: 3px 2px; text-align: center; border-top: 1px solid var(--rule); }
.cricket th { color: var(--flame); font-weight: 700; }
.cricket tr.me td, .cricket tr.me th { background: rgba(244, 163, 64, .14); }
.cricket .nm { text-align: left; padding-left: 8px; font-weight: 700; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
.cricket svg { width: 22px; height: 22px; display: block; margin: 0 auto; stroke: var(--paper); stroke-width: 2.5; fill: none; }
.cricket svg.closed { stroke: var(--marigold); }
.cricket .pts { font: 700 21px var(--body); color: var(--flame); }

/* Result */
.result { max-width: 860px; margin: 0 auto; min-height: 100%; padding: clamp(14px, 2.5vh, 28px) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.result .winner { font: 700 clamp(60px, 10vw, 120px)/.98 var(--display); overflow-wrap: anywhere; animation: rise .9s ease both; }
.rowsum { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule); }
.rowsum .pos { font: 700 24px var(--body); color: var(--flame); }
.rowsum b { font-weight: 700; overflow-wrap: anywhere; }
.rowsum .quiet { font-size: 17px; }

/* Tonight */
.tonight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(20px, 4vw, 52px); padding: clamp(18px, 3vh, 32px) var(--gutter) 30px; }
.tonight > div { min-width: 0; }
.allnight { margin-top: 18px; }
.allnight h3 { font: 600 italic 25px var(--italic); color: var(--flame); margin-bottom: 4px; }
.an { width: 100%; text-align: left; padding: 10px 0; border-top: 1px solid var(--rule); }
.an b { font-weight: 700; display: block; }
.an span { color: var(--dust); font-size: 16px; line-height: 1.35; display: block; }
.path { position: relative; }
.stop { width: 100%; text-align: left; display: grid; grid-template-columns: 62px 42px minmax(0, 1fr); gap: 6px; padding: 10px 0; align-items: start; position: relative; }
.stop::before { content: ''; position: absolute; left: 83px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.stop.past::before { background: var(--brass); }
.stop .time { font-weight: 700; color: var(--dust); padding-top: 3px; }
.stop .mark { position: relative; display: grid; justify-items: center; z-index: 1; }
.stop .mark .diya { width: 30px; background: var(--night); box-shadow: 0 0 0 6px var(--night); }
.stop .name { font: 700 clamp(24px, 2.5vw, 29px)/1.12 var(--display); }
.stop .how { color: var(--dust); font-size: 17px; line-height: 1.35; margin-top: 3px; }
.stop.past .name { color: var(--dust); }
.stop.now .name { color: var(--marigold); }
.stop .badge { display: inline-block; font: 700 14px var(--body); background: var(--marigold); color: var(--night); padding: 1px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.late { color: var(--flame); font-weight: 700; margin-top: 6px; }

/* Scores */
.scores { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); padding: clamp(18px, 3vh, 32px) var(--gutter) 30px; }
.scores > div { min-width: 0; }
.crownline { color: var(--flame); margin: 4px 0 12px; font: 600 italic 24px/1.2 var(--italic); }
.top5 { display: grid; }
.top { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 11px 0; border-top: 1px solid var(--rule); }
.top .pos { font: 700 30px var(--body); color: var(--dust); }
.top .who { font: 700 clamp(25px, 3vw, 35px)/1.05 var(--display); overflow-wrap: anywhere; }
.top .pts { font: 700 clamp(30px, 3.6vw, 44px)/1 var(--body); font-variant-numeric: tabular-nums; color: var(--flame); }
.top.first .who, .top.first .pos { color: var(--marigold); }
table.all { width: 100%; border-collapse: collapse; font-size: 17px; }
.all th { font-size: 14px; color: var(--dust); text-align: right; font-weight: 500; padding: 5px 4px; }
.all th:first-child, .all td:first-child { text-align: left; }
.all td { padding: 8px 4px; border-top: 1px solid var(--rule); text-align: right; font-variant-numeric: tabular-nums; }
.all td:first-child { font-weight: 700; overflow-wrap: anywhere; }

/* Overlays */
#overlay:empty { display: none; }
#overlay { position: fixed; inset: 0; z-index: 10; background: rgba(13, 14, 36, .97); overflow: auto; display: grid; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; } }
.sheet { width: min(980px, 100%); margin: auto; padding: clamp(18px, 3vh, 30px) var(--gutter) 28px; display: grid; gap: 16px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 36px); }
.two > div { min-width: 0; display: grid; gap: 10px; align-content: start; }
.track { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); align-items: center; }
.track b, .track span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track b { font-weight: 700; font-size: 18px; }
.track span { color: var(--dust); font-size: 15px; }
.tracks { max-height: 44dvh; overflow: auto; }
.spot-embed { width: 100%; height: 380px; border: 0; border-radius: 14px; background: var(--night-down); }
input[type=range] { width: 100%; accent-color: var(--marigold); height: 44px; }
.pin { width: min(420px, 100%); margin: auto; padding: 24px var(--gutter); display: grid; gap: 16px; text-align: center; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pinpad button { height: 72px; border-radius: 16px; background: var(--night-up); font: 700 30px var(--body); }
.pinpad button:active { background: var(--marigold); color: var(--night); }
.pindots { font-size: 34px; letter-spacing: .3em; color: var(--flame); min-height: 48px; }
.hostgroup { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--rule); }
.hostgroup h3 { font: 600 italic 24px var(--italic); color: var(--flame); }
.hostrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 17px; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 15px; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }

/* Crowning */
.crown { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgb(13, 14, 36); text-align: center; padding: var(--gutter); }
.crown-in { display: grid; gap: 18px; justify-items: center; max-width: 900px; width: 100%; }
.crown .place { font: 600 italic clamp(28px, 4vw, 44px) var(--italic); color: var(--flame); animation: rise .9s ease both; }
.crown .big { font: 700 clamp(70px, 13vw, 160px)/.98 var(--display); overflow-wrap: anywhere; animation: rise 1.2s ease both; }
.crown .big.gold { color: var(--marigold); }
.crown .pts { font: 700 clamp(36px, 6vw, 72px)/1 var(--body); color: var(--flame); animation: rise 1.5s ease both; }
.award { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); text-align: left; width: 100%; font-size: 21px; align-items: baseline; }
.award b { font: 700 28px var(--display); color: var(--flame); }

#toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px); z-index: 30; pointer-events: none; opacity: 0; transition: opacity .3s ease, transform .3s ease;
  padding: 12px 22px; border-radius: 999px; background: var(--paper); color: var(--night); font-weight: 700; max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Follow-along block on the tablet home */
.follow { display: flex; align-items: center; gap: 12px; }
.follow img { width: 74px; height: 74px; border-radius: 8px; background: #fff; padding: 4px; flex: none; }
.follow span { font-size: 15px; color: var(--dust); line-height: 1.25; }
.follow b { display: block; color: var(--paper); font-size: 17px; }

/* Portrait tablets and phones */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  body { overflow: auto; }
  .home, .howto, .play { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; height: auto; }
  .home .stage { height: auto; }
  .home .stage .board { width: min(68vw, 42dvh); height: auto; margin: 0 auto; }
  .howto .stage { height: auto; }
  .howto .stage .board, .howto .stage .oche { width: min(88vw, 48dvh); height: auto; margin: 0 auto; }
  .play .stage { height: auto; }
  .play .stage .board { width: min(94vw, 54dvh); height: auto; margin: 0 auto; }
  .play-side { overflow: visible; }
  .menu, .scores, .tonight, .two { grid-template-columns: minmax(0, 1fr); }
  .say { min-height: 4.4em; }
  #nav button { min-height: 60px; font-size: 17px; }
  .music { grid-template-columns: 50px minmax(0, 1fr); }
  .music .art { width: 50px; height: 50px; }
  .mctl { grid-column: 1 / -1; justify-content: center; }
}

/* Short landscape tablets: tighten the home column */
@media (max-height: 760px) and (min-aspect-ratio: 1/1) {
  .title { font-size: clamp(40px, 5.6vw, 66px); }
  .cta { min-height: 68px; }
  .fact { padding: 6px 0; }
  .aim { min-height: 0; }
  .pip { min-height: 58px; }
}

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