/* Color schemes. Each is a set of variables; pick one with data-theme on <html> (see app.js). */
:root, [data-theme="canal"] {
  --ground: #06262C; --surface: #0C363D; --line: #1F5A64; --navbg: #051F24;
  --text: #FFF4DC; --soft: #D5E6E3; --muted: #A9C7C5; --accent: #F5B942;
  --cta-bg: #F5B942; --cta-ink: #1B1405; --cta-glow: 0 0 22px rgba(245, 185, 66, .55);
  --bulb1: #F5B942; --bulb2: #F58FB0; --do: #6FE3D6; --dont: #FF9C86;
  --h1-shadow: 0 0 16px rgba(245, 143, 176, .55);
  --sign: #FFF4DC; --sign-shadow: 0 0 8px #F58FB0, 0 0 26px #F58FB0, 0 0 54px rgba(245, 143, 176, .6);
  --welcome: #6FE3D6;
}
[data-theme="sky"] {
  --ground: #FBF1DE; --surface: #FFFAF0; --line: #E2CDA4; --navbg: #F6E8CD;
  --text: #17323A; --soft: #35525A; --muted: #5B7178; --accent: #A63D25;
  --cta-bg: #0E7480; --cta-ink: #FFFFFF; --cta-glow: 0 6px 18px rgba(14, 116, 128, .3);
  --bulb1: #D9971A; --bulb2: #D9628A; --do: #0A6A74; --dont: #B03A28;
  --h1-shadow: none;
  --sign: #A63D25; --sign-shadow: 0 3px 0 #EBC56C;
  --welcome: #0E7480;
}
[data-theme="floor"] {
  --ground: #3B0B10; --surface: #4E1218; --line: #7C2C31; --navbg: #2E080C;
  --text: #FFF3DC; --soft: #F0DCCB; --muted: #D8B8AB; --accent: #F0BE55;
  --cta-bg: #F0BE55; --cta-ink: #241403; --cta-glow: 0 0 22px rgba(240, 190, 85, .55);
  --bulb1: #F0BE55; --bulb2: #FFF3DC; --do: #9BE3C4; --dont: #FFB3AA;
  --h1-shadow: 0 0 16px rgba(240, 190, 85, .45);
  --sign: #FFF3DC; --sign-shadow: 0 0 8px #F0BE55, 0 0 26px #F0BE55, 0 0 54px rgba(240, 190, 85, .55);
  --welcome: #F0BE55;
}
[data-theme="dusk"] {
  --ground: #24123A; --surface: #321B4E; --line: #55357A; --navbg: #1C0D2E;
  --text: #FFF1E0; --soft: #E6D8F0; --muted: #C3AEDA; --accent: #FFC66B;
  --cta-bg: #FFC66B; --cta-ink: #24123A; --cta-glow: 0 0 22px rgba(255, 198, 107, .55);
  --bulb1: #FFC66B; --bulb2: #FF9DBB; --do: #8FE3F0; --dont: #FF9DBB;
  --h1-shadow: 0 0 16px rgba(255, 157, 187, .55);
  --sign: #FFF1E0; --sign-shadow: 0 0 8px #FF9DBB, 0 0 26px #FF9DBB;
  --welcome: #8FE3F0;
}
[data-theme="chandelier"] {
  --ground: #F4EADB; --surface: #FFFDF8; --line: #D9C7A8; --navbg: #EDE0CB;
  --text: #2B1D14; --soft: #4D3A2E; --muted: #6E5A4C; --accent: #9E1B24;
  --cta-bg: #9E1B24; --cta-ink: #FFFFFF; --cta-glow: 0 6px 18px rgba(158, 27, 36, .3);
  --bulb1: #C9962B; --bulb2: #9E1B24; --do: #1F6B4A; --dont: #A3222A;
  --h1-shadow: none;
  --sign: #9E1B24; --sign-shadow: 0 3px 0 #E3C277;
  --welcome: #6E5A4C;
}
:root { --disp: 'Big Shoulders Display', 'Arial Narrow', sans-serif; }

* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; transition: background-color .25s; background: var(--ground); color: var(--text); font: 15px/1.45 'DM Sans', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
p, h1, h2, h3, ul { margin: 0; }

.screen { max-width: 480px; margin: 0 auto; padding: 20px 20px calc(98px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; min-height: 100vh; min-height: 100dvh; }
h1 { font: 800 40px/1 var(--disp); text-transform: uppercase; text-shadow: var(--h1-shadow); }
.disp { font-family: var(--disp); font-weight: 700; font-size: 21px; text-transform: uppercase; }
.big { font-weight: 800; font-size: 28px; }
.lab { font: 700 12px/1.4 'DM Sans', sans-serif; letter-spacing: 1.5px; color: var(--muted); margin-top: 8px; }
.soft { color: var(--soft); } .sm { font-size: 13px; } .xs { font-size: 11px; color: var(--muted); }
.fine { font-size: 12px; color: var(--muted); }
.accent { color: var(--accent); } .do { color: var(--do); } .dont { color: var(--dont); }
.grow { flex: 1; }

.bulbs { height: 12px; flex-shrink: 0; background: radial-gradient(circle, var(--bulb1) 3px, transparent 4px) 0 0 / 18px 12px repeat-x; animation: blink 1.1s steps(1) infinite; }
.bulbs.alt { background-image: radial-gradient(circle, var(--bulb2) 3px, transparent 4px); animation-delay: .55s; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .bulbs { animation: none; } }

.splash { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 22px; text-align: center; padding: 16px 4px; }
.splash .cta { align-self: center; }
.welcome { font-size: 14px; letter-spacing: 6px; color: var(--welcome); }
.sign { font: 800 78px/.9 var(--disp); letter-spacing: 1px; color: var(--sign); text-shadow: var(--sign-shadow); }
.screen.splash { padding-bottom: 20px; }

.top { display: flex; align-items: center; justify-content: space-between; }
.brand { font: 800 32px/1 var(--disp); letter-spacing: 1px; color: var(--sign); text-shadow: var(--sign-shadow); }
[data-theme="sky"] .brand { text-shadow: 0 2px 0 #EBC56C; }
[data-theme="chandelier"] .brand { text-shadow: 0 2px 0 #E3C277; }

.card, .tile, .row { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.card .lab { margin: 0; }
.card.empty { border-style: dashed; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { min-height: 84px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.plain { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plain li { display: flex; gap: 10px; align-items: flex-start; }
svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mark { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.chev { width: 20px; height: 20px; flex-shrink: 0; }

.cta, .link { min-height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; font-weight: 700; }
.cta { background: var(--cta-bg); color: var(--cta-ink); }
.cta.glow { min-height: 56px; padding: 0 36px; border-radius: 28px; font-size: 17px; justify-content: center; box-shadow: var(--cta-glow); }
.link { border: 1px solid var(--line); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 500; }
.chip[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-ink); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { min-height: 46px; text-align: center; font-weight: 700; }

.row { min-height: 68px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.row > span:first-child:not(.rank) { flex: 1; }
.row b, .row .soft { display: block; }
.row .chev { color: var(--muted); }
.edge { text-align: right; display: flex; flex-direction: column; }
.rank { width: 26px; font-weight: 800; font-size: 26px; color: var(--muted); }
.back { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--soft); align-self: flex-start; }
.edgebox { padding: 14px 16px; border: 1px solid var(--accent); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

#nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--navbg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
#nav[hidden] { display: none; }
#nav div { max-width: 480px; margin: 0 auto; height: 74px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--muted); }
#nav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
#nav svg { width: 22px; height: 22px; stroke-width: 2; }