/* Math Stats 1 Drill: the night-sky course map look. Change the colors here and the whole app follows. */
:root {
  --bg: #080c18; --node: rgba(22, 31, 56, .82); --glass: rgba(16, 22, 42, .78); --line: rgba(140, 170, 255, .14);
  --text: #e7ecff; --muted: #8b96b8; --faint: #56607f;
  --cyan: #5eead4; --cyan-soft: rgba(94, 234, 212, .13); --gold: #fcd34d; --violet: #a78bfa;
  --right: #4ade80; --wrong: #fb7185; --warn: #fbbf24;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Every size is in rem, and 1rem = 10px at 100%. The two size controls at the top (app.js) set --scale, which grows
   everything, and --f, which grows just the text. --g widens the boxes that hold text (map columns, the concept list)
   once the text has outgrown what wrapping inside them can absorb. */
:root { --f: 1; --g: 1; }
html { font-size: calc(10px * var(--scale, 1)); }
/* On an iPad, Safari only listens to the -webkit- spellings: without them a pen resting on the page selected words and
   popped up the copy menu. Taps don't wait to see if they're a double-tap zoom, and don't flash grey. */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body { color: var(--text); background: var(--bg); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
       font: calc(1.4rem * var(--f))/1.45 "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.sky { position: fixed; inset: 0; pointer-events: none;
       background: radial-gradient(1200px 700px at 70% -10%, #1a2350 0%, transparent 60%), radial-gradient(900px 600px at 0% 110%, #131b3d 0%, transparent 60%); }
.sky::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 33% 72%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 58% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 81% 64%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 92% 12%, #fff, transparent), radial-gradient(1px 1px at 5% 88%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 46% 93%, #fff, transparent), radial-gradient(1px 1px at 70% 40%, #cfd8ff, transparent);
  animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .2; } }
/* the deep ocean behind the map (ocean.js): only while the map is up, in place of the stars */
#ocean { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
body.ocean-on #ocean { display: block; animation: fadein 1.2s var(--ease) both; }
body.ocean-on .sky { display: none; }

/* --apph is the height the browser really shows (app.js fitDevice). 100vh on an iPad is the height with Safari's bars
   hidden, so with them showing the bottom of every screen (the Start drilling bar, the pad's Check) slid under them. */
.screen { position: relative; height: 100vh; height: 100dvh; height: var(--apph, 100dvh); display: flex; flex-direction: column; animation: enter .55s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(1rem); } }
.loading { align-items: center; justify-content: center; gap: 1.4rem; text-align: center; padding: 0 1.6rem; }
.loading h1 { font-size: calc(3.4rem * var(--f)); font-weight: 600; }
.loading em { color: var(--cyan); font-style: normal; }
.loading p { font-size: calc(1.7rem * var(--f)); animation: twinkle 1.6s ease-in-out infinite alternate; }
.loading small { opacity: .6; }
.moved p { animation: none; }
.moved small { max-width: 44rem; line-height: 1.5; }
.moving .sizebar { display: none; }
.webonly { display: none; }
[data-web] .webonly { display: block; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 1.8rem; backdrop-filter: blur(1.6rem); }
.ghost, .small { padding: .9rem 1.5rem; border-radius: 1.2rem; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text);
                 cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); white-space: nowrap; }
.ghost:hover, .small:hover { border-color: rgba(140,170,255,.4); background: rgba(140,170,255,.06); }
.small { padding: .6rem 1.2rem; border-radius: 1rem; font-size: calc(1.3rem * var(--f)); }
.small.warn { color: var(--warn); border-color: rgba(251,191,36,.25); }
.small:disabled { opacity: .45; cursor: default; }
.go { padding: 1.2rem 2.4rem; border: 0; border-radius: 1.4rem; font-weight: 700; font-size: calc(1.5rem * var(--f)); color: #06121a; cursor: pointer; white-space: nowrap;
      background: linear-gradient(90deg, var(--cyan), #a5b4fc); box-shadow: 0 .8rem 2.6rem -.8rem rgba(94,234,212,.7); transition: transform .3s var(--ease), filter .3s var(--ease); }
.go:hover { transform: translateY(-.1rem); filter: brightness(1.06); }
.go:disabled { filter: grayscale(.7) brightness(.7); cursor: default; transform: none; }
.go.empty { filter: grayscale(.7) brightness(.7); transform: none; }
kbd { font-family: inherit; font-size: calc(1.1rem * var(--f)); opacity: .6; margin-left: .6rem; }
.spacer { flex: 1; }

/* ---------------------------------------------------------------- home */
#home { padding: 2.4rem 3rem 0; }
.homehead { display: flex; align-items: flex-end; gap: 2.4rem; flex-wrap: wrap; }
.trackpick { display: flex; width: max-content; gap: .4rem; padding: .3rem; margin-bottom: .8rem; border-radius: 1.2rem; background: var(--node); border: 1px solid var(--line); }
.trackpick button { all: unset; cursor: pointer; padding: .5rem 1.2rem; border-radius: .9rem; font-size: calc(1.25rem * var(--f)); font-weight: 600; color: var(--muted); transition: background .3s var(--ease), color .3s var(--ease); }
.trackpick button:hover { color: var(--text); }
.trackpick button.on { background: var(--cyan-soft); color: var(--cyan); }
.hello small { color: var(--muted); font-size: calc(1.3rem * var(--f)); }
.hello { flex: 1 1 32rem; min-width: min-content; }   /* never narrower than the course tabs: the tiles wrap under first */
.hello h1 { margin: .2rem 0 0; font-size: calc(2.8rem * var(--f)); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.hello h1.two { font-size: calc(2.1rem * var(--f)); }
.hello h1 em { font-style: normal; background: linear-gradient(90deg, var(--cyan), var(--violet)); -webkit-background-clip: text; color: transparent; }
.headright { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.tiles { display: flex; gap: 1rem; }
.tile { padding: .9rem 1.5rem; border-radius: 1.4rem; background: var(--node); border: 1px solid var(--line); min-width: calc(11.8rem * var(--g)); backdrop-filter: blur(1rem);
        animation: enter .6s var(--ease) both; }
.tile b { display: block; font-size: calc(1.9rem * var(--f)); font-weight: 700; }
.tile span { color: var(--muted); font-size: calc(1.2rem * var(--f)); }
.tile.click { cursor: pointer; transition: border-color .3s var(--ease); }
.tile.click:hover { border-color: rgba(140,170,255,.4); }
.tile.upd { border-color: rgba(252,211,77,.35); } .tile.upd b { color: var(--gold); font-size: calc(1.5rem * var(--f)); padding: .3rem 0; }
.tile.off b { color: var(--warn); font-size: calc(1.5rem * var(--f)); padding: .3rem 0; }

.map { position: relative; flex: 1; margin-top: 1.8rem; overflow: auto; padding-bottom: var(--dockroom, 15rem); }
.map::-webkit-scrollbar { width: .8rem; height: .8rem; } .map::-webkit-scrollbar-thumb { background: #27304d; border-radius: .8rem; }
/* As many chapter columns as the window has room for (app.js, fitMap): the chapters that don't fit wrap into an even
   second band below, so the map never runs off the side, at any window size. */
.cols { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, calc(30rem * var(--g)))); gap: 3.4rem 2.6rem; }   /* a course with few chapters keeps cards a sensible width, not stretched across */
svg.edges { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.edges path { fill: none; stroke: var(--line); stroke-width: 1.3; transition: stroke .6s var(--ease), stroke-width .6s var(--ease), opacity .6s var(--ease); }
.edges path.warm { stroke: rgba(94,234,212,.28); }
.edges path.hot { stroke: rgba(94,234,212,.62); stroke-width: 1.8; filter: drop-shadow(0 0 .3rem rgba(94,234,212,.45)); }
.edges path.dim { opacity: .45; }
.col { display: flex; flex-direction: column; gap: .9rem; animation: enter .7s var(--ease) both; }
.colhead { margin-bottom: .6rem; }
.colhead .n { font-size: calc(1.1rem * var(--f)); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.colhead .t { font-size: calc(1.4rem * var(--f)); font-weight: 600; color: var(--muted); line-height: 1.25; min-height: 3.6rem; }
.node { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: center; padding: .8rem 1rem .8rem .8rem; border-radius: 1.4rem; cursor: pointer;
        background: var(--node); border: 1px solid var(--line); backdrop-filter: blur(.8rem);
        transition: border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.node:hover { transform: translateX(.2rem); border-color: rgba(140,170,255,.35); }
.node.on { border-color: var(--cyan); background: linear-gradient(135deg, rgba(94,234,212,.18), rgba(167,139,250,.12)); box-shadow: 0 0 2.4rem -.6rem rgba(94,234,212,.55); }
.node.feeds { border-style: dashed; border-color: rgba(94,234,212,.42); }
.node.nudge { animation: nudge 2.4s var(--ease) 2; }
@keyframes nudge { 40% { box-shadow: 0 0 0 .4rem rgba(94,234,212,.14), 0 0 2.2rem -.4rem rgba(94,234,212,.5); } }
/* The pulses below glow by fading a ready-drawn layer in and out (opacity), which the screen does without repainting:
   animating the shadow itself meant repainting the section (or the hint button, while the pen is down) every frame. */
.node.suggested { border-color: rgba(94,234,212,.38); }
.node.suggested::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
                         border: 1px solid rgba(94,234,212,.7); box-shadow: 0 0 1.8rem -.5rem rgba(94,234,212,.5);
                         animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 1; } }
.node .ring { position: relative; width: 3.4rem; height: 3.4rem; }
.node .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.node .ring em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: calc(1rem * var(--f)); font-weight: 700; color: var(--muted); }
.node.on .ring em { color: var(--cyan); }
.node .t { font-size: calc(1.3rem * var(--f)); line-height: 1.25; }
.node.fresh .t { color: var(--muted); }
.maptip { position: fixed; z-index: 20; max-width: calc(30rem * var(--g)); padding: 1rem 1.2rem; border-radius: 1.2rem; background: rgba(12,17,34,.96); border: 1px solid var(--line);
       font-size: calc(1.2rem * var(--f)); color: var(--muted); pointer-events: none; opacity: 0; transform: translateY(.4rem); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.maptip.show { opacity: 1; transform: none; }
.maptip:not(.show) { transition-duration: .08s; }   /* gone at once when the pointer leaves, so it never lingers over the next column */
.maptip b { color: var(--text); font-size: calc(1.3rem * var(--f)); }
.maptip .c { display: flex; justify-content: space-between; gap: 1.2rem; margin-top: .3rem; }

/* the quiet suggestion after picking a section */
.suggest { position: fixed; left: 50%; bottom: 10.4rem; transform: translate(-50%, 1rem); z-index: 5; max-width: min(98rem, calc(100vw - 6.4rem));
           display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.4rem; border-radius: 1.4rem;
           background: rgba(16, 22, 42, .7); border: 1px solid rgba(94,234,212,.18); backdrop-filter: blur(1.4rem);
           color: var(--muted); font-size: calc(1.3rem * var(--f)); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.suggest.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.suggest b { color: var(--text); font-weight: 600; }
.suggest .add { padding: .4rem 1rem; border-radius: .9rem; border: 1px dashed rgba(94,234,212,.45); background: transparent; color: var(--cyan); cursor: pointer;
                font-size: calc(1.2rem * var(--f)); transition: background .3s var(--ease); }
.suggest .add:hover { background: var(--cyan-soft); }
.suggest .add small { color: var(--muted); margin-left: .4rem; }
.suggest .x { margin-left: .4rem; color: var(--faint); cursor: pointer; padding: .2rem .6rem; }

.dock { position: fixed; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 1.6rem; padding: 1.2rem 1.2rem 1.2rem 2.2rem;
        border-radius: 2rem; background: rgba(16, 22, 42, .86); border: 1px solid rgba(140,170,255,.2); backdrop-filter: blur(1.8rem);
        box-shadow: 0 2.4rem 6rem -1.8rem rgba(0,0,0,.8); animation: dock .7s .2s var(--ease) both; white-space: nowrap; }
.discord { position: fixed; right: 1.6rem; bottom: .3rem; z-index: 7; display: flex; align-items: center; gap: .6rem; padding: .2rem .9rem; border-radius: .8rem;
           background: rgba(8,12,24,.8); color: var(--muted); font-size: 1.15rem; text-decoration: none; transition: color .3s var(--ease), background .3s var(--ease); }
.discord svg { width: 1.4rem; height: 1.4rem; }
.discord:hover { color: var(--cyan); background: var(--cyan-soft); }
.legal { position: fixed; left: 1.6rem; bottom: .3rem; z-index: 7; padding: .2rem .9rem; border-radius: .8rem; background: rgba(8,12,24,.8);
         color: var(--faint); font-size: 1.15rem; }
.legal button { all: unset; cursor: pointer; margin-left: .6rem; color: var(--muted); transition: color .3s var(--ease); }
.legal button:hover { color: var(--cyan); }
.dialog.credits { width: min(64rem, calc(100vw - 4rem)); max-height: calc(var(--apph, 100vh) - 4rem); overflow: auto; -webkit-user-select: text; user-select: text; }
.dialog.credits h4 { margin: 1.6rem 0 .4rem; font-size: calc(1.4rem * var(--f)); color: var(--text); }
.dialog.credits p { margin-bottom: .6rem; }
.dialog.credits a { color: var(--cyan); }
.dialog.credits .owner { margin: 0 0 1.4rem; padding: 1.2rem 1.6rem; border-left: 2px solid var(--cyan); border-radius: 0 1.2rem 1.2rem 0;
  background: linear-gradient(90deg, var(--cyan-soft), transparent); font-size: calc(1.6rem * var(--f)); line-height: 1.55; color: var(--text); font-style: italic; }
.dialog.credits .owner cite { display: block; margin-top: .8rem; font-style: normal; font-size: calc(1.3rem * var(--f)); color: var(--cyan); }
.dialog.credits .owner cite::before { content: "— "; }
@keyframes dock { from { opacity: 0; transform: translate(-50%, 2rem); } }
.dock .what b { font-size: calc(1.5rem * var(--f)); } .dock .what div { color: var(--muted); font-size: calc(1.2rem * var(--f)); }
.legend { display: flex; white-space: nowrap; gap: 1.4rem; color: var(--muted); font-size: calc(1.2rem * var(--f)); border-left: 1px solid var(--line); padding-left: 1.6rem; }
.legend i { display: inline-block; width: 1.4rem; height: 1rem; border-radius: .4rem; margin-right: .6rem; vertical-align: -.1rem; border: 1px solid var(--cyan); }
.legend i.d { border-style: dashed; border-color: rgba(94,234,212,.6); }
.opt { display: flex; white-space: nowrap; gap: .8rem; align-items: center; color: var(--muted); font-size: calc(1.2rem * var(--f)); cursor: pointer; border-left: 1px solid var(--line); padding-left: 1.6rem; }
.sw { flex: none; display: inline-block; width: 3rem; height: 1.7rem; border-radius: 99.9rem; background: #27304d; position: relative; transition: background .3s var(--ease); }
.sw::after { content: ""; position: absolute; top: .25rem; left: .3rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.opt.on .sw { background: var(--cyan); } .opt.on .sw::after { transform: translateX(1.2rem); }
/* the bottom bar and the pad's buttons keep their text at the layout size, so they don't balloon when the text grows */
.dock, .padbar { --f: 1; font-size: 1.4rem; }
.dock.tight .legend, .dock.tighter #whatsub { display: none; }
/* The footer and the Discord link sit beside the bar, level with it (app.js, fitDock). Short of room they shrink to
   "Credits" and the Discord logo; when even that won't fit beside it, they sit shortened on the bar's top corners. */
.legal .short, .legal.compact .long, .discord.compact .long { display: none; }
.legal.compact .short { display: inline; } .legal.compact button { margin-left: 0; color: var(--muted); }
.discord.compact { padding: .4rem .6rem; } .discord.compact svg { width: 1.8rem; height: 1.8rem; }
.dock { width: max-content; max-width: calc(100vw - 3.2rem); white-space: normal; }
.dockrow { display: flex; align-items: center; gap: 1.2rem 1.6rem; flex-wrap: wrap; }
.dockrow .acts { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
/* the everyday extras, out in the open above the tiles (they used to hide behind a More button) */
.tools { --f: 1; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .2rem; margin-bottom: .8rem; font-size: 1.2rem; }
.tools .lbl { color: var(--faint); margin-right: .4rem; }
/* quiet text links with a dot between them, so the row reads as a line, not a row of buttons */
.tools button { padding: .2rem .5rem; border: 0; border-radius: .6rem; background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: color .3s var(--ease), background .3s var(--ease); }
.tools button + button::before { content: "·"; color: var(--faint); margin: 0 .7rem 0 -.3rem; pointer-events: none; }
.tools button:hover { color: var(--cyan); }
.tools .note { color: var(--warn); margin-left: .6rem; overflow: hidden; text-overflow: ellipsis; max-width: 40rem; }
[data-web] .apponly { display: none; }
[data-rooms] .notrooms { display: none; }   /* (the server build: these files stay on the game server) */

/* the size control: top middle on every screen, easing back to a faint outline until the pointer comes near.
   Fixed px on purpose, so it stays put and the same size whatever size is picked. */
.sizebar { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 2px;
           padding: 3px; border-radius: 12px; background: rgba(16, 22, 42, .86); border: 1px solid rgba(140,170,255,.2); backdrop-filter: blur(14px);
           font: 600 12px/1 "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; color: var(--muted);
           transition: opacity 1.6s var(--ease); }
.sizebar.rest { opacity: .28; }
.sizebar:hover, .sizebar:focus-within { opacity: 1; transition-duration: .25s; }
.sizebar button { min-width: 30px; height: 26px; padding: 0 8px; border-radius: 9px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer;
                  transition: background .25s var(--ease), color .25s var(--ease); }
.sizebar button:hover:not(:disabled) { background: var(--cyan-soft); color: var(--cyan); }
.sizebar button:disabled { opacity: .3; cursor: default; }
.sizebar .pct { min-width: 46px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sizebar .sep { width: 1px; height: 18px; margin: 0 6px; background: var(--line); }
.sizebar .lbl { color: var(--faint); margin: 0 2px 0 4px; }
.sizebar .text { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; cursor: default; }
.sizebar .text .a1 { font-size: 10px; color: var(--muted); } .sizebar .text .a2 { font-size: 15px; color: var(--muted); }
.sizebar .text b { min-width: 38px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.sizebar input[type=range] { -webkit-appearance: none; appearance: none; width: 120px; height: 4px; border-radius: 4px; background: #27304d; outline: none; cursor: pointer; }
.sizebar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(94,234,212,.5); }
.sizebar input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--cyan); }
body:has(#loading:not([hidden])) .sizebar { display: none; }
.sizebar .pen { display: contents; }
body:has(#drill[hidden]) .sizebar .pen { display: none; }
.sizebar .gfx { color: var(--muted); }
.sizebar .gfx i { font-style: normal; margin-right: 5px; color: var(--faint); }
.sizebar .gfx small { margin-left: 4px; font-size: 10px; color: var(--faint); }

/* Graphics (app.js, setGfx). The map's sections sit straight on the water: a frosted blur behind ~50 of them had to be
   redone every frame as the ocean moved, and at their 82% they looked the same without it. Lite and Still drop the
   frosted blur everywhere (a touch more solid instead) and the sky's twinkle. While the pen is down the sky holds still. */
#home .node, #home .tile { backdrop-filter: none; }
html[data-gfx=lite], html[data-gfx=still] { --glass: rgba(16, 22, 42, .9); --node: rgba(22, 31, 56, .9); }
html[data-gfx=lite] *, html[data-gfx=still] * { backdrop-filter: none !important; }
html[data-gfx=lite] .dock, html[data-gfx=still] .dock, html[data-gfx=lite] .sizebar, html[data-gfx=still] .sizebar { background: rgba(16, 22, 42, .97); }
html[data-gfx=lite] .sky::before, html[data-gfx=still] .sky::before { animation: none; }
.sky.inking::before { animation-play-state: paused; }
/* folded (app.js, placeBar): one small button where the top row has no room for the whole bar; it opens the bar */
.sizebar .minibtn { display: none; gap: 1px; align-items: baseline; justify-content: center; }
.sizebar .minibtn .a1 { font-size: 10px; } .sizebar .minibtn .a2 { font-size: 15px; }
.sizebar.mini .minibtn { display: inline-flex; }
.sizebar.mini:not(.open) { top: 5px; padding: 1px; } .sizebar.mini:not(.open) .minibtn { height: 22px; }
.sizebar.mini.rest { opacity: .55; }
.sizebar.mini:not(.open) > :not(.minibtn) { display: none !important; }
.sizebar.mini.open .minibtn { background: var(--cyan-soft); color: var(--cyan); }
.sizebar .dot { min-width: 34px; display: inline-flex; align-items: center; justify-content: center; }
.sizebar .dot i { display: block; width: var(--pen, 4px); height: var(--pen, 4px); border-radius: 50%; background: var(--text); }
.toast { position: fixed; left: 50%; top: 1.8rem; transform: translate(-50%, -1rem); z-index: 30; padding: 1rem 1.6rem; border-radius: 1.2rem; background: rgba(12,17,34,.96);
         border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { color: var(--warn); }

/* ---------------------------------------------------------------- drilling */
#drill, #progress, #bounty { padding: 1.8rem 2.4rem 2rem; }
.drillhead { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.4rem; }
.drillhead h2 { margin: 0 0 0 .6rem; font-size: calc(2.2rem * var(--f)); }
.crumb { display: flex; align-items: center; gap: 1rem; font-size: calc(1.5rem * var(--f)); font-weight: 600; min-width: 0; flex: 1; }
.crumb .sec { color: var(--cyan); }
.tierpill { font-size: calc(1.1rem * var(--f)); font-weight: 700; padding: .3rem .9rem; border-radius: 99.9rem; border: 1px solid var(--line); color: var(--muted); }
.tierpill.t2 { color: var(--warn); border-color: rgba(251,191,36,.35); } .tierpill.t3 { color: var(--violet); border-color: rgba(167,139,250,.4); }
.tierpill.step { color: var(--gold); border-color: rgba(252,211,77,.45); }
.tierpill.payoff { color: var(--right); border-color: rgba(74,222,128,.45); }
.score { color: var(--muted); font-size: calc(1.3rem * var(--f)); }
.clock { position: relative; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; }
.clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.clock .track { fill: none; stroke: rgba(140,170,255,.12); stroke-width: 3; }
.clock .arc { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset 1s linear, stroke .6s; }
.clock .arc.late { stroke: var(--warn); }
.clock span { font-size: calc(1.1rem * var(--f)); font-weight: 700; color: var(--muted); }
.drillbody { flex: 1; min-height: 0; display: grid; gap: 1.8rem; transition: grid-template-columns .35s var(--ease);
             grid-template-columns: minmax(0, min(calc(27rem * var(--g)), 26vw)) minmax(0, 1fr) var(--padw, minmax(min(30rem, 30vw), 1fr)); }
/* the concepts list folds into a thin strip, and the question column takes the room */
.drillbody.sidefold { grid-template-columns: 4.4rem minmax(0, 1fr) var(--padw, minmax(min(30rem, 30vw), 1fr)); }
.drillbody.dragging { transition: none; -webkit-user-select: none; user-select: none; }
.sidetop { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .8rem; }
.sidetop h4 { margin: 0; }
.foldbtn { flex: none; width: 2.6rem; height: 2.6rem; padding: 0; display: grid; place-items: center; border-radius: .8rem; border: 1px solid var(--line);
           background: transparent; color: var(--muted); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease); }
.foldbtn:hover { color: var(--cyan); border-color: rgba(94,234,212,.4); }
.sidefold .side { padding: 1rem .8rem; overflow: hidden; cursor: pointer; }
.sidefold .side > :not(.sidetop, .qid), .sidefold .side .sidetop h4 { display: none; }
.sidefold .side .sidetop { justify-content: center; }
.sidefold .side::after { content: "Your concepts"; display: block; margin: 1.4rem auto 0; writing-mode: vertical-rl; color: var(--faint);
                         font-size: calc(1.1rem * var(--f)); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }

.side { padding: 1.6rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; }
.side > * { flex: none; }
/* the question id: tiny and dim at the very bottom of the list, for reading off screenshots */
.side .qid { margin-top: 0; padding-top: 1.4rem; font-size: calc(.95rem * var(--f)); letter-spacing: .03em; color: var(--faint);
             opacity: .55; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; cursor: text; }
.sidefold .side .qid { order: 2; padding-top: 1rem; writing-mode: vertical-rl; transform: rotate(180deg); align-self: center;
                       white-space: nowrap; overflow-wrap: normal; font-size: calc(.85rem * var(--f)); }
.side h4 { margin: 0 0 .8rem; font-size: calc(1.1rem * var(--f)); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.side .sec { margin: 1.4rem 0 .6rem; font-size: calc(1.3rem * var(--f)); font-weight: 600; color: var(--muted); }
.side .sec.here { color: var(--cyan); }
.meter { margin: 0 0 .7rem; padding: .6rem .8rem; border-radius: 1rem; transition: background .5s var(--ease); }
.meter.current { background: var(--cyan-soft); }
.meter.pick { cursor: pointer; }
.meter.pick:hover { background: rgba(140,170,255,.07); }
.meter.pinned { box-shadow: inset 0 0 0 1px var(--gold); }
.meter .lbl { display: flex; justify-content: space-between; gap: .8rem; font-size: calc(1.25rem * var(--f)); }
.meter .lbl span:last-child { color: var(--faint); font-size: calc(1.1rem * var(--f)); }
.meter .bar { height: .4rem; border-radius: .4rem; background: rgba(140,170,255,.1); margin-top: .5rem; overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: .4rem; background: linear-gradient(90deg, var(--cyan), #a3e635); transition: width .9s var(--ease); }
.meter.passed .bar i { box-shadow: 0 0 .8rem rgba(163,230,53,.7); }
.meter .piece { margin: .6rem 0 0 1rem; font-size: calc(1.2rem * var(--f)); color: var(--warn); }
.meter .piece.warmup { color: var(--cyan); }
/* the pin note: sticky at the bottom of "Your concepts" (it stays put while the list scrolls), faded until hovered.
   Only its words fade: its backing stays solid, so a long list scrolls out of sight behind it, not through it. */
.side .pinnote { position: sticky; bottom: -1.6rem; margin: auto -1.4rem -1.6rem; padding: 1.4rem 1.4rem 1.6rem; z-index: 2;
                 background: linear-gradient(180deg, rgba(14,20,38,0), #0e1426 1.6rem); font-size: calc(1.15rem * var(--f));
                 color: var(--muted); line-height: 1.45; }
.side .pinnote .pn { opacity: .38; transition: opacity .4s var(--ease); }
.side .pinnote:hover .pn, .side .pinnote.lit .pn { opacity: 1; }
.side .pinnote b { color: var(--gold); font-weight: 600; }
.side .pinnote .meters { display: block; margin-top: .5rem; color: var(--faint); }
.side .pinnote .row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .6rem; }
.side .pinnote .row span { color: var(--faint); }
.small.unpin { padding: .35rem .9rem; font-size: calc(1.15rem * var(--f)); color: var(--gold); border-color: rgba(252,211,77,.4); }
.meter .lbl .pintag { color: var(--gold); font-size: calc(1.05rem * var(--f)); font-weight: 700; letter-spacing: .04em; margin-left: .5rem; }
/* a step drill nested under its concept, a weak step, a step that's strong again */
.meter .stepline { margin: .7rem 0 0 1rem; padding: .6rem .8rem; border-radius: .9rem; border: 1px solid rgba(252,211,77,.4);
                   background: rgba(252,211,77,.06); font-size: calc(1.2rem * var(--f)); cursor: default; }
.meter .stepline .top { display: flex; justify-content: space-between; gap: .6rem; color: var(--gold); }
.meter .stepline .top span:last-child { color: var(--faint); font-size: calc(1.1rem * var(--f)); }
.meter .stepline .bar { margin-top: .45rem; }
.meter .stepline .bar i { background: linear-gradient(90deg, var(--gold), #a3e635); }
.meter .stepline .sub { display: flex; justify-content: space-between; margin-top: .45rem; color: var(--faint); font-size: calc(1.1rem * var(--f)); }
.meter .stepline a, .meter .weakline a { color: var(--gold); text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }
.meter .weakline { margin: .6rem 0 0 1rem; font-size: calc(1.2rem * var(--f)); color: var(--warn); display: flex; justify-content: space-between; gap: .6rem; }
.meter .strongline { margin: .6rem 0 0 1rem; font-size: calc(1.2rem * var(--f)); color: var(--right); }

.qcol { overflow-y: auto; padding-right: .6rem; display: flex; flex-direction: column; gap: 1.2rem; }
.qcol > * { flex-shrink: 0; }
.qcol::-webkit-scrollbar, .side::-webkit-scrollbar { width: .7rem; } .qcol::-webkit-scrollbar-thumb, .side::-webkit-scrollbar-thumb { background: #27304d; border-radius: .7rem; }
.card { padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: var(--node); border: 1px solid var(--line); }
.card.new { border-color: rgba(167,139,250,.45); background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(22,31,56,.82)); }
.cardtitle { font-size: calc(1.2rem * var(--f)); font-weight: 700; color: var(--cyan); margin-bottom: .4rem; }
.card.new .cardtitle { color: var(--violet); } .card.back .cardtitle { color: var(--muted); }
.cardbody { font-size: calc(1.4rem * var(--f)); color: #cdd5f3; }
.watch { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; } .watch:empty { display: none; }
.watchbtn { font: inherit; font-size: calc(1.2rem * var(--f)); padding: .4rem 1rem; border-radius: 99.9rem; cursor: pointer; color: var(--cyan); background: var(--cyan-soft); border: 1px solid rgba(94,234,212,.35); }
.watchbtn:hover { background: rgba(94,234,212,.24); }
.why { font-size: calc(1.35rem * var(--f)); padding: .8rem 1.2rem; border-radius: 1rem; border-left: .3rem solid var(--warn); background: rgba(251,191,36,.06); color: #f6deb0; }
.why.warmup { border-color: var(--cyan); background: var(--cyan-soft); color: #c9f7ee; }
.why.reattempt { border-color: var(--violet); background: rgba(167,139,250,.08); color: #ddd3ff; }
.why.step { border-color: var(--gold); background: rgba(252,211,77,.07); color: #f8e7b0; }
.why.payoff { border-color: var(--right); background: rgba(74,222,128,.08); color: #c8f5d6; }
.why b { font-weight: 600; color: #fff6d6; }
.why .prog { display: inline-flex; gap: .3rem; margin-left: .6rem; vertical-align: middle; }
.why .prog i { width: .9rem; height: .9rem; border-radius: 50%; background: rgba(252,211,77,.18); border: 1px solid rgba(252,211,77,.4); }
.why .prog i.r { background: var(--right); border-color: var(--right); }
.why .prog i.w { background: var(--wrong); border-color: var(--wrong); }
.card.stepcard { border-color: rgba(252,211,77,.35); background: linear-gradient(135deg, rgba(252,211,77,.08), rgba(22,31,56,.82)); }
.card.stepcard .cardtitle { color: var(--gold); }
.prompt { font-size: calc(1.8rem * var(--f)); line-height: 1.65; }
.math .katex { font-size: 1.12em; }
.math p { margin: 0 0 .6rem; }
.math table { border-collapse: collapse; margin: .6rem 0 1rem; font-size: calc(1.5rem * var(--f)); }
.math td { border: 1px solid var(--line); padding: .5rem 1.2rem; text-align: center; }
.math tr:first-child td { background: rgba(140,170,255,.07); }
.hinthead { display: flex; align-items: center; gap: 1rem; color: var(--faint); font-size: calc(1.2rem * var(--f)); }
/* hints wait to be asked for: once one is ready, the button glows softly, nothing pops up on its own */
.hintbtn { display: inline-flex; white-space: nowrap; align-items: center; gap: .7rem; padding: .5rem 1.2rem .5rem 1rem; border-radius: 999px; border: 1px solid var(--line);
           background: transparent; color: var(--faint); font-size: calc(1.25rem * var(--f)); cursor: pointer;
           transition: color .8s var(--ease), border-color .8s var(--ease), background .8s var(--ease), box-shadow .8s var(--ease); }
.hintbtn:hover { color: var(--text); border-color: rgba(140,170,255,.4); }
.hintbtn .dot { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: var(--faint); transition: background .8s var(--ease); }
.hintbtn .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 .9rem .25rem rgba(94,234,212,.45); opacity: 0; }
.hintbtn.ready { color: #bdf4ea; border-color: rgba(94,234,212,.35); background: rgba(94,234,212,.05); }
.hintbtn.ready .dot { background: var(--cyan); }
.hintbtn.ready .dot::after { animation: pulse 3.2s ease-in-out infinite; }
.hinthead .aside { opacity: 0; transition: opacity .8s var(--ease); }
.hinthead .hintbtn.ready + .aside { opacity: 1; }

/* hints: the space opens first, then the card fades and focuses in */
.hint { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease), margin .65s var(--ease); }
.hint > div { overflow: hidden; }
.hint.in { grid-template-rows: 1fr; margin-bottom: 1rem; }
.hcard { padding: 1.1rem 1.4rem; border-radius: 1.4rem; border: 1px solid rgba(94,234,212,.22); background: rgba(94,234,212,.05);
         opacity: 0; transform: translateY(.8rem) scale(.985); filter: blur(.6rem);
         transition: opacity .75s .15s var(--ease), transform .75s .15s var(--ease), filter .75s .15s var(--ease); }
.hint.in .hcard { opacity: 1; transform: none; filter: none; }
.hcard.tip { border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.05); }
.hcard.calc { border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.06); }
.hcard .title { font-size: calc(1.2rem * var(--f)); font-weight: 700; color: var(--cyan); cursor: pointer; display: flex; justify-content: space-between; }
.hcard.tip .title { color: var(--warn); } .hcard.calc .title { color: var(--violet); }
.hcard .body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease); }
.hcard .body > div { overflow: hidden; padding-top: .6rem; }
.hcard.folded .body { grid-template-rows: 0fr; opacity: 0; }
.hcard .chev { transition: transform .4s var(--ease); color: var(--faint); }
.hcard.folded .chev { transform: rotate(-90deg); }
.hchoices { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.hchoices button { padding: .5rem 1.2rem; border-radius: .9rem; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); cursor: pointer;
                   transition: border-color .3s var(--ease), background .3s var(--ease); }
.hchoices button:hover:not(:disabled) { border-color: var(--cyan); }
.hchoices button.right { border-color: var(--right); background: rgba(74,222,128,.1); }
.hchoices button.wrong { border-color: var(--wrong); background: rgba(251,113,133,.1); }
.hresult { margin-top: .8rem; font-size: calc(1.3rem * var(--f)); animation: enter .5s var(--ease) both; }
.hresult.right { color: #bbf7d0; } .hresult.wrong { color: #fde68a; }
.hintbtn.armed { color: var(--text); border-color: rgba(255,196,120,.45); background: rgba(255,196,120,.06); }
.hnote { margin-top: .6rem; font-size: calc(.95rem * var(--f)); color: var(--faint); }
.hwhy { margin-top: .6rem; font-size: calc(1.05rem * var(--f)); color: var(--muted); font-style: italic; }

.verdict { font-size: calc(1.9rem * var(--f)); font-weight: 700; min-height: 0; }
.verdict:empty { display: none; }
.verdict.right { color: var(--right); } .verdict.wrong { color: var(--wrong); } .verdict.warn { color: var(--warn); } .verdict.muted { color: var(--muted); font-size: calc(1.4rem * var(--f)); font-weight: 500; }
.verdict:not(:empty) { animation: enter .45s var(--ease) both; }
.feedback { font-size: calc(1.5rem * var(--f)); }
.feedback:not(:empty) { padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: var(--node); border: 1px solid var(--line); animation: enter .5s .05s var(--ease) both; }
.feedback .slip { margin: .8rem 0 .2rem; padding: .8rem 1rem; border-radius: 1rem; background: rgba(251,191,36,.08); border-left: .3rem solid var(--warn); font-size: calc(1.4rem * var(--f)); }
.feedback h5 { margin: 1.4rem 0 .6rem; font-size: calc(1.1rem * var(--f)); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.feedback ol { margin: 0; padding-left: 2.2rem; }
.feedback ol li { margin: .3rem 0; }
.feedback ol li p { margin: 0; }
.feedback .built li { color: var(--muted); font-size: calc(1.35rem * var(--f)); padding: .2rem .6rem; border-radius: .8rem; }
.feedback .built li b { color: var(--text); font-weight: 600; }
.feedback .built li em { font-style: normal; font-size: calc(1.2rem * var(--f)); color: var(--faint); }
.feedback .built li.passed em { color: var(--right); }
.feedback .built li.here { background: var(--cyan-soft); }
.feedback .built li .mark { display: inline-block; width: 1.4em; font-weight: 700; }
.feedback .built li.work-right .mark { color: var(--right); }
.feedback .built li.work-wrong { background: rgba(251,191,36,.12); box-shadow: inset .3rem 0 0 var(--warn); }
.feedback .built li.work-wrong .mark { color: var(--warn); }
.feedback .built li.work-missing .mark { color: var(--faint); }
.feedback .built li button.wasright, .feedback .built li button.undoright { margin-left: .5em; vertical-align: middle; }
.messages p.checking { opacity: .6; }
.feedback .built li.flag { background: rgba(251,191,36,.12); box-shadow: inset .3rem 0 0 var(--warn); }
.feedback .built .about { display: block; font-size: calc(1.25rem * var(--f)); }
/* steps of a tier 1 question: each step's last few marks inside full questions, a Drill button, the drilled one */
.feedback .built li { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.feedback .built li .grow { flex: 1; min-width: 14rem; }
.feedback .built li .dots { display: inline-flex; gap: .25rem; }
.feedback .built li .dots i { width: .7rem; height: .7rem; border-radius: 50%; background: rgba(140,170,255,.15); }
.feedback .built li .dots i.r { background: var(--right); } .feedback .built li .dots i.w { background: var(--wrong); }
.small.drill { padding: .25rem .8rem; font-size: calc(1.1rem * var(--f)); color: var(--gold); border-color: rgba(252,211,77,.3); }
.feedback .built li.drilled { background: rgba(74,222,128,.10); box-shadow: inset .3rem 0 0 var(--right); }
.feedback .built li .badge { font-size: calc(1.1rem * var(--f)); color: var(--right); font-weight: 600; }
.offer { margin: .2rem 0 .8rem; padding: 1rem 1.2rem; border-radius: 1.2rem; border: 1px solid rgba(252,211,77,.4); background: rgba(252,211,77,.06);
         display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; color: #f3e3b3; font-size: calc(1.3rem * var(--f)); animation: enter .5s .15s var(--ease) both; }
.offer b { color: var(--gold); }
.offer .go { padding: .7rem 1.4rem; font-size: calc(1.3rem * var(--f)); background: linear-gradient(90deg, var(--gold), #fda4af); box-shadow: none; }
.feedback .figure { margin-top: 1rem; color: var(--muted); }
.feedback .figure svg { max-width: 100%; height: auto; }
.feedback .cost { white-space: pre-line; color: var(--faint); font-size: calc(1.2rem * var(--f)); margin-top: .8rem; }
.messages p { margin: 0 0 .6rem; color: #c9f7ee; animation: enter .5s .1s var(--ease) both; }
.messages p.ai { color: #ddd3ff; }
.actions { display: flex; flex-direction: column; gap: .8rem; margin-top: .4rem; }
.actions > div { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.actions .label { color: var(--faint); font-size: calc(1.2rem * var(--f)); width: calc(7.6rem * var(--f)); }
/* "Hard step?": pick one step of the question to drill */
.small.stepbtn { color: var(--gold); border-color: rgba(252,211,77,.3); }
.small.stepbtn.open { background: rgba(252,211,77,.08); border-color: var(--gold); }
.steppick { margin-top: .2rem; padding: 1.2rem 1.4rem 1.3rem; border-radius: 1.4rem; background: var(--node);
            border: 1px solid rgba(252,211,77,.35); animation: enter .4s var(--ease) both; }
.steppick .sp-head { font-size: calc(1.3rem * var(--f)); color: var(--muted); margin-bottom: 1rem; }
.steppick .sp-head b { color: var(--text); font-weight: 600; }
.steppick ol { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.steppick li { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: 1rem; cursor: pointer;
               border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: calc(1.3rem * var(--f)); }
.steppick li:hover { border-color: rgba(252,211,77,.4); }
.steppick li .n { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; display: grid; place-items: center;
                  font-size: calc(1.15rem * var(--f)); font-weight: 700; color: var(--muted); border: 1px solid var(--line); }
.steppick li .nm { flex: 1; }
.steppick li .mini { width: 4.6rem; height: .4rem; border-radius: .4rem; background: rgba(140,170,255,.12); overflow: hidden; flex: none; }
.steppick li .mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #a3e635); }
.steppick li .pc { width: 3.2rem; text-align: right; font-size: calc(1.1rem * var(--f)); color: var(--faint); flex: none; }
.steppick li.weak .pc { color: var(--warn); }
.steppick li.on { border-color: var(--gold); background: rgba(252,211,77,.09); box-shadow: 0 0 1.6rem -.6rem rgba(252,211,77,.6); }
.steppick li.on .n { color: #1a1406; background: var(--gold); border-color: var(--gold); }
.steppick .sp-go { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.steppick .sp-go .go { padding: .9rem 1.6rem; font-size: calc(1.35rem * var(--f)); background: linear-gradient(90deg, var(--gold), #fda4af); box-shadow: 0 .8rem 2.6rem -1rem rgba(252,211,77,.7); }
.steppick .sp-go .aside { font-size: calc(1.15rem * var(--f)); color: var(--faint); }

.answer { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.padwrap { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* the pad's left edge: drag to make the writing space wider or narrower (double-click puts it back) */
.divider { position: absolute; z-index: 3; left: -1.5rem; top: 0; bottom: 0; width: 1.2rem; cursor: col-resize; touch-action: none; }
.divider::before { content: ""; position: absolute; left: 50%; top: 50%; width: .4rem; height: 6rem; transform: translate(-50%, -50%); border-radius: .4rem;
                   background: rgba(140,170,255,.18); transition: background .3s var(--ease), height .3s var(--ease); }
.divider:hover::before, .dragging .divider::before { background: var(--cyan); height: 9rem; }
.underbtn { position: absolute; left: 50%; top: calc(50% + 6rem); transform: translateX(-50%); width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%;
            display: grid; place-items: center; border: 1px solid var(--line); background: var(--glass); color: var(--faint); cursor: pointer; opacity: 0;
            transition: opacity .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.divider:hover .underbtn, .underbtn:focus-visible, .underbtn.on { opacity: 1; }
.underbtn:hover, .underbtn.on { color: var(--cyan); border-color: rgba(94,234,212,.45); }
/* "under" mode: the pad also runs beneath the question column, where the page is mostly empty.
   The question's own boxes stay on top and clickable; the open space between them is pad. */
.drillbody.under .qcol { position: relative; z-index: 1; pointer-events: none; }
.drillbody.under .qcol > * { pointer-events: auto; }
.drillbody.under .qcol > :is(.prompt, .hinthead, .verdict, .messages, .actions) { width: fit-content; max-width: 100%; }
.drillbody.under .qcol > :is(.card, .feedback) { background-color: #121a30; }
.drillbody.under .choices { position: relative; z-index: 1; }
.drillbody.under .padwrap { overflow: visible; background: transparent; border-color: transparent; backdrop-filter: none; }
.drillbody.under canvas#pad { position: absolute; z-index: 0; flex: none; border-radius: 1.8rem; border: 1px solid var(--line);
             background-color: var(--glass); backdrop-filter: blur(1.6rem); }
.drillbody.under .padbar { position: relative; z-index: 1; margin-top: auto; border: 1px solid var(--line); border-radius: 1.4rem; background: rgba(8,12,24,.75); }
canvas#pad { flex: 1; width: 100%; min-height: 0; cursor: crosshair; touch-action: none;
             background-image: repeating-linear-gradient(transparent 0 8.9rem, rgba(140,170,255,.07) 8.9rem 9rem); }
#padTip { position: absolute; pointer-events: none; z-index: 0; }
.padwrap.keys #padTip { display: none; }
/* Touch screens: the pad's panel drops its frosted blur for the same colour, a touch more solid. A blurred backdrop
   is worked out again on every frame the ink changes, which a phone's graphics chip feels while the pen is moving. */
html.touch .padwrap.glass, html.touch .drillbody.under canvas#pad { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(16, 22, 42, .9); }
html.touch .drillbody.under .padwrap.glass { background-color: transparent; }
.padnote { position: absolute; left: 1.8rem; top: 1.4rem; color: var(--faint); font-size: calc(1.2rem * var(--f)); pointer-events: none; }
.padbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: 1.2rem 1.4rem; border-top: 1px solid var(--line); background: rgba(8,12,24,.4); }
.typed { flex: 1 1 10rem; white-space: nowrap; display: flex; align-items: center; gap: .8rem; color: var(--faint); font-size: calc(1.2rem * var(--f)); }
.typed input { flex: 1; min-width: 6rem; width: 0; padding: .9rem 1.2rem; border-radius: 1rem; border: 1px solid var(--line); background: rgba(8,12,24,.6); color: var(--text);
               font-family: "Cascadia Mono", Consolas, "JetBrains Mono", monospace; font-size: calc(1.4rem * var(--f)); outline: none; -webkit-user-select: text; user-select: text; transition: border-color .3s var(--ease); }
.typed input:focus { border-color: var(--cyan); }
#eraseBtn, #selBtn, #shrinkBtn { display: inline-flex; align-items: center; padding: .6rem .9rem; }
#selBtn svg, #eraseBtn svg, #shrinkBtn svg { width: calc(1.7rem * var(--f)); height: calc(1.7rem * var(--f)); }
.small.on { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-soft); }
canvas#pad.selecting { cursor: crosshair; }
canvas#pad.erasing { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='9' fill='rgba(94,234,212,.12)' stroke='%235eead4' stroke-width='1.5'/%3E%3C/svg%3E") 11 11, cell; }
.padwrap.busy canvas { opacity: .6; transition: opacity .4s; }
/* the keypad (app.js "the keypad"): in the pad's place, same panel, so the divider and its drag stay the same */
.padwrap.keys canvas#pad, .padwrap.keys .padnote, .padwrap.keys #typedLabel, .padwrap.keys #selBtn, .padwrap.keys #eraseBtn, .padwrap.keys #undoBtn, .padwrap.keys #shrinkBtn { display: none; }
.keypad { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1.2rem; padding: 1.6rem 1.8rem 1.2rem; }
.kpentry { display: flex; flex-direction: column; gap: .6rem; }
.kplbl { display: flex; justify-content: space-between; color: var(--faint); font-size: calc(1.2rem * var(--f)); }
.touch .kbdonly { display: none; }
.kpbox input { width: 100%; padding: 1.1rem 1.4rem; border-radius: 1.2rem; border: 1px solid var(--line); background: rgba(8,12,24,.65); color: var(--text); outline: none;
               font: 500 calc(2.2rem * var(--f))/1.3 "Cascadia Mono", Consolas, "JetBrains Mono", monospace; -webkit-user-select: text; user-select: text; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.kpbox input:focus { border-color: var(--cyan); box-shadow: 0 0 0 .4rem rgba(94,234,212,.08); }
.kpreads { min-height: 3.6rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: calc(1.3rem * var(--f)); }
.kpreads .math { color: var(--text); font-size: calc(1.8rem * var(--f)); }
.kpreads .math p { margin: 0; }
.kpreads .ok { color: var(--right); } .kpreads .no { color: var(--warn); }
.kpgroup { display: flex; flex-direction: column; gap: .5rem; }
.kpgl { color: var(--faint); font-size: calc(1.1rem * var(--f)); letter-spacing: .06em; text-transform: uppercase; }
.kprow { display: flex; flex-wrap: wrap; gap: .6rem; }
.kpgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.kpair { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.keypad .k { min-height: 4.4rem; min-width: 5.2rem; padding: 0 1rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--node); color: var(--text);
             font-size: calc(1.8rem * var(--f)); cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.keypad .kpair .k { min-width: 0; }
.keypad .k p { margin: 0; }
.keypad .k:hover { border-color: rgba(94,234,212,.45); }
.keypad .k:active { background: rgba(94,234,212,.22); border-color: var(--cyan); }
.keypad .k.op { background: rgba(140,170,255,.07); color: #cdd6ff; }
.keypad .k.del { color: var(--wrong); }
.keypad .k.fit { border-color: rgba(94,234,212,.45); background: rgba(94,234,212,.08); box-shadow: 0 0 1.2rem rgba(94,234,212,.12); }
.modebtn { white-space: nowrap; }
.modebtn.icon { padding: .6rem .9rem; font-size: calc(1.7rem * var(--f)); line-height: 1; }
.kpentry { position: sticky; top: -1.6rem; z-index: 1; margin-top: -1.6rem; padding-top: 1.6rem; background: linear-gradient(#0d1324 85%, transparent); }
/* upright on a tablet the keypad needs the height more than the question does */
.tall .drillbody.keys .qcol { max-height: 34vh; }
.tall .keypad .kpgl { display: none; }
.tall .keypad { gap: .8rem; }
.linkbtn { background: none; border: none; padding: 0; color: var(--cyan); cursor: pointer; text-decoration: underline; text-underline-offset: .3rem; }
.touch .keypad .k { min-height: 52px; }
.choices { order: -1; flex: none; max-height: 45%; display: flex; flex-wrap: wrap; gap: 1rem; overflow-y: auto; }
.choices .hint-line { flex-basis: 100%; }
.answer:has(> .padwrap[hidden]) .choices { max-height: 100%; }   /* no pad under them: the choices get the whole column */
.choices .choice { flex: 1 1 calc(50% - 1rem); min-width: 24rem; }
.choices .hint-line { color: var(--muted); font-size: calc(1.3rem * var(--f)); margin-bottom: .4rem; }
.choice { display: flex; align-items: center; gap: 1.6rem; padding: 1.4rem 1.8rem; border-radius: 1.6rem; border: 1px solid var(--line); background: var(--node); color: var(--text);
          cursor: pointer; text-align: left; font-size: calc(1.7rem * var(--f)); transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
          animation: enter .5s var(--ease) both; }
.choice:hover:not(:disabled) { border-color: rgba(94,234,212,.5); transform: translateX(.3rem); }
.choice .letter { flex: none; width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; background: rgba(140,170,255,.1); font-weight: 700; font-size: calc(1.4rem * var(--f)); }
.choice.right { border-color: var(--right); background: rgba(74,222,128,.1); } .choice.right .letter { background: var(--right); color: #052e16; }
.choice.wrong { border-color: var(--wrong); background: rgba(251,113,133,.1); } .choice.wrong .letter { background: var(--wrong); color: #3f0712; }
.choice:disabled { cursor: default; }
/* graphs: under the question, and as the choices of a "which graph?" question (in place of the pad) */
.qgraph { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--muted); }
.qgraph svg { flex: 1 1 26rem; max-width: min(100%, 56rem); height: auto; background: rgba(8,12,24,.55); border: 1px solid var(--line); border-radius: 1.2rem; }
/* one graph, many parts: a box for each part under the graph, marked after Check */
.qgraph.withparts svg { flex: 0 1 36rem; max-width: 36rem; }
.parts { padding: 1.1rem 1.3rem 1.2rem; border-radius: 1.4rem; background: var(--node); border: 1px solid var(--line); animation: enter .4s var(--ease) both; }
.parts .ph { font-size: calc(1.2rem * var(--f)); color: var(--muted); margin-bottom: .8rem; line-height: 1.45; }
.parts .ph b { color: var(--text); font-weight: 600; }
.parts ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.parts li { display: grid; grid-template-columns: 2.4rem minmax(11rem, 15rem) minmax(0, 1fr) 2rem; align-items: center; gap: .8rem;
            padding: .45rem .6rem; border-radius: 1rem; border: 1px solid transparent; }
.parts li .pl { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
                font-size: calc(1.1rem * var(--f)); color: var(--cyan); border: 1px solid rgba(94,234,212,.35); }
.parts li .pq { font-size: calc(1.3rem * var(--f)); color: var(--text); }
.parts.single li { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) 2rem; }
.parts.single li .pl { display: none; }
.parts.single li .pa { grid-column: 2 / 4; }
.parts li .pin { font: inherit; font-size: calc(1.35rem * var(--f)); color: var(--text); background: rgba(8,12,24,.6); border: 1px solid var(--line);
                 border-radius: .8rem; padding: 0 .8rem; min-width: 0; height: 3.6rem; outline: none; }
.parts li .pin::placeholder { color: var(--faint); font-size: calc(1.1rem * var(--f)); }
.parts li .pin:focus { border-color: var(--cyan); box-shadow: 0 0 0 .2rem rgba(94,234,212,.15); }
.parts li .pin:disabled { opacity: 1; }
.parts li .pin.pen { font-style: italic; }
.parts li .pk { font-size: 1.6rem; text-align: center; }
.parts li.right { background: rgba(74,222,128,.06); border-color: rgba(74,222,128,.25); }
.parts li.right .pk { color: var(--right); }
.parts li.wrong { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.3); }
.parts li.wrong .pk { color: var(--wrong); }
.parts li .pa { grid-column: 3 / 5; margin-top: -.1rem; font-size: calc(1.2rem * var(--f)); color: var(--muted); line-height: 1.5; }
.parts li .pa b { color: var(--right); font-weight: 600; }
.parts li .pa em { color: #fbd38d; font-style: normal; display: block; margin: .15rem 0; }
.parts li .pa .pans { display: block; color: var(--text); }
.parts li .pa > span:last-child:not(.pans) { display: block; }
.parts .fmt { margin-top: .9rem; font-size: calc(1.1rem * var(--f)); color: var(--faint); display: flex; gap: 1.4rem; flex-wrap: wrap; }
.parts .fmt code { color: var(--muted); font-family: ui-monospace, monospace; background: rgba(140,170,255,.08); padding: .1rem .4rem; border-radius: .4rem; }
.parts .pnote { margin-top: .8rem; padding: .6rem .9rem; border-radius: .8rem; font-size: calc(1.3rem * var(--f));
                color: var(--muted); background: rgba(140,170,255,.07); }
.parts .pnote.warn { color: var(--warn); background: rgba(251,191,36,.08); }
@media (max-width: 760px) { .parts li { grid-template-columns: 2.4rem minmax(0, 1fr) 2rem; } .parts li .pq { grid-column: 2 / 4; }
                            .parts li .pin { grid-column: 2 / 3; } .parts li .pa { grid-column: 2 / 4; } }
.drillbody.under .qgraph { width: fit-content; max-width: 100%; }
.choices.plots { max-height: none; flex: 1 1 auto; align-content: flex-start; }
.choices.plots .choice { flex: 1 1 calc(50% - 1rem); min-width: 16rem; flex-direction: column; align-items: stretch; gap: .6rem; padding: 1rem; color: var(--muted); }
.choices.plots .choice .letter { color: var(--text); }
.choices.plots .choice svg { width: 100%; height: auto; }
.choices.plots .choice:hover:not(:disabled) { transform: translateY(-.2rem); }

/* ---------------------------------------------------------------- progress (tabs, bigger type) */
.pg-tabs { display: flex; gap: 0.6rem; padding: 0.6rem; border-radius: 1.6rem; background: var(--glass); border: 1px solid var(--line); width: fit-content; max-width: 100%; flex-wrap: wrap; margin-bottom: 1.6rem; }
.pg-tabs button { font-size: calc(1.6rem * var(--f)); padding: 1rem 2rem; border-radius: 1.1rem; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color .3s var(--ease), background .3s var(--ease); }
.pg-tabs button:hover { color: var(--text); }
.pg-tabs button.on { background: var(--cyan-soft); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(94,234,212,.35); }
.progbody { flex: 1; overflow-y: auto; padding-bottom: 2rem; font-size: calc(1.6rem * var(--f)); -webkit-user-select: text; user-select: text; }
.pg-pane { display: grid; gap: 1.8rem; animation: enter .45s var(--ease) both; }
.pg-card { padding: 2.2rem 2.4rem; }
.pg-card h3 { margin: 0 0 1.2rem; font-size: calc(1.9rem * var(--f)); font-weight: 600; }
.pg-card h4 { margin: 0 0 1.2rem; font-size: calc(1.6rem * var(--f)); font-weight: 500; color: var(--muted); }
.pg-h { margin: 0.6rem 0 -0.4rem; font-size: calc(1.9rem * var(--f)); font-weight: 600; }
.pg-muted { color: var(--muted); font-size: calc(1.5rem * var(--f)); } .pg-muted b { color: var(--text); font-weight: 600; }
.pg-cap { color: var(--faint); font-size: calc(1.4rem * var(--f)); margin: 1.2rem 0 0; }
.pg-lead { font-size: calc(2rem * var(--f)); color: var(--muted); margin: 0; } .pg-lead b { color: var(--text); font-weight: 600; }
.pg-table { width: 100%; border-collapse: collapse; font-size: calc(1.5rem * var(--f)); font-variant-numeric: tabular-nums; }
.pg-table th { color: var(--faint); font-weight: 500; text-align: right; padding: 0 0 0.8rem 1.2rem; }
.pg-table td { text-align: right; padding: 0.8rem 0 0.8rem 1.2rem; border-top: 1px solid var(--line); }
.pg-table td:first-child { text-align: left; color: var(--muted); padding-left: 0; }
.pg-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.pg-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(42rem, 1fr)); gap: 1.8rem; }
.pg-grid2.flat { gap: 3rem; }
.pg-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr)); gap: 1.8rem; }
.pg-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; margin-top: 1.8rem; }
.pg-nums.wrap { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 0.6rem; }
.pg-big { display: flex; flex-direction: column; gap: 2px; }
.pg-big b { font-size: calc(4rem * var(--f)); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pg-big span { color: var(--muted); font-size: calc(1.5rem * var(--f)); }
.pg-detail .pg-big b, .pg-session .pg-big b { font-size: calc(3.2rem * var(--f)); }
.pg-hero { display: grid; grid-template-columns: auto 1fr; gap: 3.4rem; align-items: center; padding: 2.6rem 3rem; }
.pg-ring { width: 15rem; height: 15rem; }
.pg-ring .track { fill: none; stroke: rgba(140,170,255,.12); stroke-width: 12; }
.pg-ring .fill { fill: none; stroke: var(--cyan); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 0.6rem rgba(94,234,212,.5)); }
.pg-ring text { fill: var(--text); font-size: 26px; font-weight: 700; text-anchor: middle; }
.pg-hbars { display: grid; gap: 1rem; }
.pg-hbars .hb { display: grid; grid-template-columns: minmax(9rem, 19rem) 1fr 5.8rem; align-items: center; gap: 1.2rem; font-size: calc(1.5rem * var(--f)); }
.pg-hbars .hb:has(small) { grid-template-columns: minmax(9rem, 19rem) 1fr 5.8rem 5.2rem; }
.pg-hbars .t { height: 1.4rem; border-radius: 0.7rem; background: rgba(140,170,255,.08); overflow: hidden; }
.pg-hbars .t i { display: block; height: 100%; border-radius: 0.7rem; background: rgba(94,234,212,.55); transition: width .9s var(--ease); }
.pg-hbars.speed .t i { background: rgba(167,139,250,.6); }
.pg-hbars .hb.best .t i { background: var(--cyan); box-shadow: 0 0 1rem rgba(94,234,212,.6); }
.pg-hbars .hb.thin { opacity: .45; }
.pg-hbars .l { color: var(--muted); }
.pg-hbars b { text-align: right; font-variant-numeric: tabular-nums; }
.pg-hbars small { color: var(--faint); font-size: calc(1.3rem * var(--f)); text-align: right; }
.pg-dots { display: inline-flex; gap: 0.4rem; vertical-align: middle; }
.pg-dots i { width: 1rem; height: 1rem; border-radius: 50%; background: rgba(251,113,133,.8); }
.pg-dots i.r1 { background: var(--warn); } .pg-dots i.r2 { background: var(--right); }
.pg-focus .f { display: grid; grid-template-columns: 1fr auto auto; gap: 1.8rem; align-items: center; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.pg-focus .f:first-child { border-top: 0; padding-top: 0; }
.pg-focus .f b { display: block; font-size: calc(1.7rem * var(--f)); font-weight: 600; } .pg-focus .f span { color: var(--muted); font-size: calc(1.4rem * var(--f)); }
.pg-ins { display: flex; flex-direction: column; gap: 1rem; }
.pg-ins .h { display: flex; gap: 1.2rem; align-items: baseline; font-size: calc(1.9rem * var(--f)); font-weight: 600; }
.pg-ins p { margin: 0; color: var(--muted); }
.pg-tip { font-size: calc(1.5rem * var(--f)); padding: 0.8rem 1.2rem; border-left: 0.3rem solid var(--cyan); background: var(--cyan-soft); border-radius: 0 1rem 1rem 0; }
.tone-good { color: var(--right); } .tone-warn { color: var(--warn); } .tone-info { color: var(--violet); }
.pg-board { display: grid; grid-template-columns: 1fr minmax(30rem, 40rem); gap: 1.8rem; align-items: start; }
.pg-side { display: grid; gap: 1.8rem; position: sticky; top: 0; }
.pg-key { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.8rem; }
.pg-chap { margin-top: 1.8rem; } .pg-chap:first-of-type { margin-top: 0; }
.pg-chap h4 { margin: 0 0 0.8rem; color: var(--text); font-weight: 600; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.pg-chap h4 span { color: var(--muted); font-weight: 400; font-size: calc(1.4rem * var(--f)); }
.pg-sec { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: start; margin: 0.6rem 0; }
.pg-sec > b { color: var(--cyan); font-size: calc(1.4rem * var(--f)); padding-top: 0.7rem; font-weight: 600; }
.pg-sec .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pg-chip { font-size: calc(1.4rem * var(--f)); padding: 0.6rem 1.2rem; border-radius: 1rem; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pg-chip[data-chip]:hover { transform: translateY(-1px); }
.pg-chip.good { background: rgba(74,222,128,.24); border-color: rgba(74,222,128,.65); color: #dcfce7; }
.pg-chip.mid { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.35); color: #fde68a; }
.pg-chip.low { background: rgba(251,113,133,.22); border-color: rgba(251,113,133,.7); color: #ffe4e6; }
.pg-chip.fresh { background: rgba(140,170,255,.04); border-color: var(--line); color: var(--faint); }
.pg-chip.sel { box-shadow: 0 0 0 2px var(--cyan), 0 0 1.6rem rgba(94,234,212,.4); }
.pg-key .pg-chip { cursor: default; }
/* Flair. High scores below 100% warm up a little (f-hi1 at 83%, f-hi2 at 92%), a full meter shines (f-full), then
   each star adds more: --lv (1-20) turns up the glow, and new effects join at set levels (see chipFlair in app.js).
   Only transform and opacity animate. Lite, Still and reduced motion keep the look but stop every loop. */
.pg-chip { position: relative; }
.pg-chip.f-hi1 { box-shadow: 0 0 .5rem rgba(74,222,128,.25); }
.pg-chip.f-hi2 { box-shadow: 0 0 .9rem rgba(74,222,128,.4); border-color: rgba(134,239,172,.85); }
.pg-chip.f-full { box-shadow: 0 0 1.2rem rgba(252,211,77,.35), inset 0 0 .6rem rgba(252,211,77,.12); border-color: rgba(252,211,77,.8); }
.pg-chip.f-star { --t: calc(var(--lv) / 20); isolation: isolate; color: #fff7d6; border-color: rgba(252,211,77, calc(.55 + .45 * var(--t)));
  background: linear-gradient(135deg, rgba(74,222,128,.22), rgba(252,211,77, calc(.06 + .3 * var(--t)))), #101a2c;
  box-shadow: 0 0 calc(.3rem + 2.2rem * var(--t)) rgba(252,211,77, calc(.2 + .4 * var(--t))); }
.pg-chip .pg-st { margin-left: .6rem; font-size: .8em; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.pg-chip.f-badge .pg-st { padding: .05rem .5rem; border-radius: 1rem; background: rgba(252,211,77,.18); border: 1px solid rgba(252,211,77,.5); }
.pg-chip.f-big { transform: scale(1.04); font-weight: 600; } .pg-chip.f-big[data-chip]:hover { transform: scale(1.06) translateY(-1px); }
.pg-chip.f-goldtext .pg-nm { background: linear-gradient(90deg, #fde68a, #fff, #fcd34d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-chip.f-rainbowtext .pg-nm { background: linear-gradient(90deg, #fca5a5, #fde68a, #86efac, #67e8f9, #c4b5fd, #f9a8d4, #fca5a5); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: pgSlide 6s linear infinite; }
.pg-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
.pg-fx.shine { overflow: hidden; z-index: 0; }
.pg-fx.shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation: pgShine var(--shine, 7s) ease-in-out infinite; }
.pg-fx.aura { inset: -.4rem; border-radius: 1.4rem; box-shadow: 0 0 calc(1rem + 2rem * var(--t)) rgba(252,211,77,.55); animation: pgBreathe 3.2s ease-in-out infinite; }
.pg-fx.halo { inset: -2px; overflow: hidden; border-radius: calc(1rem + 2px); }
.pg-fx.halo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(transparent 0 55%, rgba(252,211,77,.95) 75%, transparent 90%); animation: pgSpin var(--spin, 8s) linear infinite; }
.pg-fx.halo.rainbow::before { background: conic-gradient(#f87171, #fbbf24, #4ade80, #22d3ee, #a78bfa, #f472b6, #f87171); }
.pg-chip.f-star .pg-fx.halo + .pg-fx.cover { inset: 1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, rgba(74,222,128,.22), rgba(252,211,77, calc(.06 + .3 * var(--t)))), #101a2c; }
.pg-sp { position: absolute; font-size: .75em; color: #fff4c2; pointer-events: none; text-shadow: 0 0 .5rem #fcd34d; animation: pgTwinkle 2.4s ease-in-out infinite; }
.pg-orb { position: absolute; left: 0; width: 100%; top: -.55em; height: 0; pointer-events: none; animation: pgRun 4.5s ease-in-out infinite alternate; }
.pg-orb::after { content: "★"; position: absolute; left: 0; font-size: .8em; color: #fde68a; text-shadow: 0 0 .6rem #fcd34d; translate: -50% 0; }
.pg-orb.two { top: auto; bottom: .55em; animation-direction: alternate-reverse; animation-duration: 3.7s; }
.pg-orb.two::after { color: #f9a8d4; text-shadow: 0 0 .6rem #f472b6; }
.pg-ember { position: absolute; bottom: 0; width: .35rem; height: .35rem; border-radius: 50%; background: #fde68a; box-shadow: 0 0 .5rem #fcd34d; pointer-events: none;
  opacity: 0; animation: pgRise 2.6s ease-out infinite; }
.pg-crown { position: absolute; top: -.95em; left: -.55em; rotate: -22deg; font-size: 1.25em; pointer-events: none; filter: drop-shadow(0 0 .4rem #fcd34d); animation: pgBob 2s ease-in-out infinite; }
.pg-chip.f-max .pg-fx.aura { box-shadow: 0 0 1.6rem rgba(252,211,77,.7), -.8rem 0 2.2rem rgba(244,114,182,.5), .8rem 0 2.2rem rgba(34,211,238,.5); }
.pg-chip.f-float { animation: pgFloat 3s ease-in-out infinite; }
@keyframes pgShine { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(400%); } }
@keyframes pgBreathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pgSpin { to { rotate: 360deg; } }
@keyframes pgRun { to { transform: translateX(100%); } }
@keyframes pgTwinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes pgRise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.6rem); } }
@keyframes pgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.2em); } }
@keyframes pgFloat { 0%, 100% { transform: scale(1.04) translateY(0); } 50% { transform: scale(1.04) translateY(-.25rem); } }
@keyframes pgSlide { to { background-position: 200% 0; } }
html[data-gfx=lite] .pg-chip, html[data-gfx=lite] .pg-chip *, html[data-gfx=lite] .pg-chip *::before, html[data-gfx=lite] .pg-chip *::after,
html[data-gfx=still] .pg-chip, html[data-gfx=still] .pg-chip *, html[data-gfx=still] .pg-chip *::before, html[data-gfx=still] .pg-chip *::after { animation: none !important; }
html[data-gfx=lite] .pg-fx.shine, html[data-gfx=still] .pg-fx.shine, html[data-gfx=lite] .pg-ember, html[data-gfx=still] .pg-ember { display: none; }
html[data-gfx=lite] .pg-fx.aura, html[data-gfx=still] .pg-fx.aura { opacity: .7; }
html[data-gfx=lite] .pg-sp, html[data-gfx=still] .pg-sp { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .pg-fx.shine, .pg-ember { display: none; } }
.pg-starbar { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; }
.pg-starbar b { color: var(--gold); font-size: calc(1.6rem * var(--f)); white-space: nowrap; }
.pg-starbar .t { flex: 1; height: .6rem; border-radius: 1rem; background: rgba(252,211,77,.12); overflow: hidden; }
.pg-starbar .t i { display: block; height: 100%; background: linear-gradient(90deg, #fbbf24, #fde68a); }
.meter .stars { color: var(--gold); font-weight: 700; margin-right: .5rem; }
#messages p.win { color: var(--gold); font-weight: 600; }
.pg-detail { border-color: rgba(94,234,212,.4); }
.pg-detail h3 { margin-top: 0.8rem; }
.pg-detail .pg-nums { margin: 0.8rem 0 1.4rem; }
.pg-tag { display: inline-block; padding: 0.3rem 1rem; border-radius: 99.9rem; font-size: calc(1.3rem * var(--f)); border: 1px solid var(--line); color: var(--muted); }
.pg-lens { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pg-lens button { font-size: calc(1.5rem * var(--f)); padding: 0.8rem 1.6rem; border-radius: 99.9rem; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.pg-lens button.on { color: var(--text); border-color: var(--cyan); background: var(--cyan-soft); }
.pg-verdict { font-size: calc(2.1rem * var(--f)); margin: 1rem 0 1.8rem; } .pg-verdict b { color: var(--cyan); }
.pg-vbars { display: flex; gap: 0.4rem; height: 15rem; align-items: stretch; padding-top: 1rem; }
.pg-vbars .vc { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pg-vbars .vc i { width: 100%; max-width: 4rem; border-radius: 0.6rem 0.6rem 0 0; background: var(--violet); opacity: .85; }
.pg-vbars .vc:hover i { opacity: 1; }
.pg-vbars .vc span { font-size: calc(1.2rem * var(--f)); color: var(--muted); height: 1.8rem; margin-top: 0.6rem; white-space: nowrap; }
@media (max-width: 900px) { .pg-board, .pg-hero { grid-template-columns: 1fr; } .pg-grid2 { grid-template-columns: 1fr; } .pg-nums { grid-template-columns: 1fr 1fr; } .pg-side { position: static; } }

/* ---------------------------------------------------------------- dialog */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(4,6,14,.6); animation: fadein .35s var(--ease) both; }
@keyframes fadein { from { opacity: 0; } }
.dialog { width: min(56rem, calc(100vw - 4rem)); padding: 2.4rem; animation: enter .45s var(--ease) both; }
.dialog h3 { margin: 0 0 .8rem; } .dialog p { color: var(--muted); margin: 0 0 1.4rem; }
.dialog input { width: 100%; padding: 1.1rem 1.4rem; border-radius: 1.2rem; border: 1px solid var(--line); background: rgba(8,12,24,.7); color: var(--text); outline: none; -webkit-user-select: text; user-select: text; }
.dialog input:focus { border-color: var(--cyan); }
.dialog .row { display: flex; gap: 1rem; margin-top: 1.4rem; }
.reportbtn { color: var(--muted); }
.reportbtn:hover { color: var(--warn); border-color: rgba(251,191,36,.4); }
.dialog.report { width: min(110rem, calc(100vw - 4rem)); max-height: calc(var(--apph, 100vh) - 3rem); overflow: auto; padding: 1.8rem 2rem; }
.rhead { display: flex; align-items: baseline; gap: 1.4rem; } .rhead span { color: var(--muted); font-size: calc(1.3rem * var(--f)); }
.shotwrap { position: relative; margin-top: .6rem; border-radius: 1.2rem; overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.shotwrap img { width: 100%; display: block; }
.shotwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.rtools { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; } .rinfo { color: var(--faint); font-size: calc(1.2rem * var(--f)); margin-left: .6rem; }
.tags { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 1rem; }
.tags button { padding: .6rem 1.2rem; border-radius: 99.9rem; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: calc(1.3rem * var(--f));
               transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.tags button.on { color: var(--warn); border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.1); }
.dialog textarea { width: 100%; min-height: 7rem; padding: 1rem 1.4rem; border-radius: 1.2rem; border: 1px solid var(--line); background: rgba(8,12,24,.7);
                   color: var(--text); outline: none; resize: vertical; font: inherit; -webkit-user-select: text; user-select: text; }
.dialog textarea:focus { border-color: var(--cyan); }
.rsend { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; color: var(--muted); font-size: calc(1.3rem * var(--f)); cursor: pointer; }
.rsend input { width: auto; accent-color: var(--cyan); }
.rpreview { margin-top: .8rem; color: var(--muted); font-size: calc(1.2rem * var(--f)); }
.rpreview summary { cursor: pointer; color: var(--muted); } .rpreview p { font-size: calc(1.2rem * var(--f)); margin: .6rem 0; }
.rpreview table { border-collapse: collapse; width: 100%; -webkit-user-select: text; user-select: text; }
.rpreview td { padding: .3rem .8rem; border-top: 1px solid var(--line); vertical-align: top; word-break: break-word; }
.rpreview td:first-child { color: var(--faint); white-space: nowrap; width: 1%; }
.keymsg { color: var(--warn); font-size: calc(1.3rem * var(--f)); margin-top: .8rem; min-height: 1.8rem; }

/* ---------------------------------------------------------------- tablets (finger or pen: <html class="touch">) */
/* A tablet is held right in front of the player and written on with a pen, so it stays quiet and small: buttons are
   still easy to hit (36-40px), the keyboard hints go, nothing waits on a hover, and the question comes first in its
   column. The concept card, hints and the skip/forfeit rows follow it, a short scroll away. */
.touch kbd { display: none; }
.touch .small, .touch .ghost { min-height: 36px; }
.touch #selBtn, .touch #eraseBtn, .touch #shrinkBtn, .touch .modebtn.icon { min-width: 40px; justify-content: center; }
.touch .padbar { gap: .7rem; padding: .8rem 1rem; }
.touch .padbar .go { min-height: 40px; padding: .8rem 2.2rem; margin-left: auto; }
.touch .padbar .small { padding: .5rem .9rem; }
.touch .padbar .typed { flex-basis: 8rem; font-size: 0; gap: 0; }
.touch .padbar .typed input { padding: .6rem .9rem; font-size: calc(1.3rem * var(--f)); }
.touch .foldbtn { width: 34px; height: 34px; }
.touch .sizebar button { min-width: 34px; height: 30px; }
.touch .divider { width: 2.4rem; left: -2.1rem; }
.touch .underbtn { opacity: .7; width: 30px; height: 30px; }
.touch .choice, .touch .hchoices button, .touch .meter.pick { min-height: 40px; }
.touch .drillbody { gap: 1.2rem; }
.touch #drill { padding-top: 1.2rem; }
.touch .drillhead { margin-bottom: 1rem; }
.touch .qcol { gap: 1rem; }
.touch .qcol > .why { order: 1; } .touch .qcol > .prompt { order: 2; } .touch .qcol > .qgraph { order: 3; } .touch .qcol > .parts { order: 4; }
.touch .qcol > .verdict { order: 5; } .touch .qcol > .feedback { order: 6; } .touch .qcol > .messages { order: 7; } .touch .qcol > #after { order: 8; }
.touch .qcol > .hinthead { order: 10; } .touch .qcol > #hints { order: 11; } .touch .qcol > .card { order: 12; }
.touch .qcol > #answering { order: 14; } .touch .qcol > .steppick { order: 15; }
.touch .qcol > .card { padding: 1rem 1.2rem; }
.touch .padnote { left: 1.4rem; top: 1rem; }
/* Upright (<html class="tall">): the question on top, the pad full width under it, the concepts list a strip at the left
   that opens over the page when tapped. */
.tall .drillbody, .tall .drillbody.sidefold { position: relative; grid-template-columns: 4.4rem minmax(0, 1fr); grid-template-rows: minmax(0, auto) minmax(0, 1fr); gap: 1.4rem; }
.tall .drillbody .side { grid-column: 1; grid-row: 1 / span 2; }
.tall .drillbody .qcol { grid-column: 2; grid-row: 1; max-height: 44vh; }
/* On an upright tablet the question takes only what it needs (up to about a third of the screen), the rest of its column
   scrolls, and a soft fade at the bottom says there's more. Everything below is writing room. */
.touch.tall .drillbody .qcol { max-height: 32vh; -webkit-mask-image: linear-gradient(#000 calc(100% - 3.2rem), transparent); mask-image: linear-gradient(#000 calc(100% - 3.2rem), transparent); padding-bottom: 2.4rem; }
.touch.tall .drillbody .qcol.atend { -webkit-mask-image: none; mask-image: none; }
.tall .drillbody .answer { grid-column: 2; grid-row: 2; min-height: 36vh; }
.tall .drillbody:not(.sidefold) .side { position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; width: min(32rem, 75vw); background: #0e1426;
                                        box-shadow: 0 0 4rem rgba(0,0,0,.6); }
.tall .divider { display: none; }
/* the size bar sits in its own strip above the header instead of over it */
.barstrip #drill, .barstrip #progress, .barstrip #bounty { padding-top: 58px; }

/* ---------------------------------------------------------------- smaller windows: a short laptop screen, a window
   snapped to half the screen. The map keeps its look and gets tighter, so more of it shows at once. */
@media (max-height: 820px) {
  #home { padding-top: 1.6rem; }
  .trackpick { margin-bottom: .5rem; }
  .tools { margin-bottom: .5rem; }
  .hello h1 { font-size: calc(2.4rem * var(--f)); } .hello h1.two { font-size: calc(1.9rem * var(--f)); }
  .tile { padding: .6rem 1.3rem; } .tile b { font-size: calc(1.7rem * var(--f)); }
  .map { margin-top: 1.2rem; }
  .colhead { margin-bottom: .2rem; }
  .col { gap: .7rem; }
  .node { padding-top: .6rem; padding-bottom: .6rem; }
  #drill, #progress, #bounty { padding-top: 1.4rem; padding-bottom: 1.4rem; }
  .keypad { gap: .8rem; padding-top: 1.2rem; } .keypad .k { min-height: 3.8rem; }
}
@media (max-width: 760px) { .drillhead { gap: 1rem; } .drillhead .score { display: none; } }   /* the clock still shows the time */
@media (max-width: 1100px) {
  #home { padding-left: 2rem; padding-right: 2rem; }
  .trackpick button { padding: .5rem .9rem; }
  .cols { column-gap: 1.8rem; }
  .homehead { gap: 1.2rem 2.4rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }
.snapping, .snapping * { cursor: progress !important; }

/* bounty board */
.bt-hero { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center; }
.bt-hero .pg-big b { color: var(--gold); text-shadow: 0 0 18px rgba(252,211,77,.35); font-size: calc(5rem * var(--f)); }
.bt-hero .pg-lead { font-size: calc(1.7rem * var(--f)); }
@media (max-width: 640px) { .bt-hero { grid-template-columns: 1fr; gap: 1.4rem; } }
.bt-bar { height: 0.8rem; border-radius: 99px; background: rgba(140,170,255,.12); margin-top: 1.6rem; overflow: hidden; }
.bt-bar i { display: block; height: 100%; background: var(--right); box-shadow: 0 0 12px rgba(74,222,128,.5); border-radius: 99px; }
.bt-filter { margin-bottom: 0; } .bt-filter span { color: var(--faint); margin-left: .4rem; } .bt-filter .on span { color: inherit; opacity: .7; }
.bt-sec h3 .sec { color: var(--cyan); margin-right: .4rem; }
.bt-concept + .bt-concept { margin-top: 1.4rem; }
.bt-one .bt-name { color: var(--text); } .bt-one + .bt-one { margin-top: 0; }
.bt-concept h4 { margin: 0 0 .4rem !important; color: var(--text) !important; }
.bt-form { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.bt-name { flex: 1; color: var(--muted); } .bt-name em { font-style: normal; color: var(--violet); font-size: .85em; margin-left: .4rem; }
.bt-st { font-size: calc(1.3rem * var(--f)); border-radius: 99px; padding: .2rem 1rem; white-space: nowrap; }
.st-open { color: var(--gold); background: rgba(252,211,77,.12); }
.st-fixed { color: var(--cyan); background: var(--cyan-soft); }
.st-reported { color: var(--muted); background: rgba(139,150,184,.12); }
.st-checked { color: var(--right); background: rgba(74,222,128,.12); }
.bt-why { margin: 0; }
.rhead .perfect { margin-left: auto; align-self: center; }
.ghost.perfect { border-color: rgba(74,222,128,.45); color: var(--right); background: rgba(74,222,128,.08); }
.ghost.perfect:hover { border-color: rgba(74,222,128,.8); background: rgba(74,222,128,.14); }
@media (max-width: 640px) {
  #bounty { padding-left: 1.6rem; padding-right: 1.6rem; }
  #bounty .drillhead { flex-wrap: wrap; gap: 1rem; } #bounty .drillhead h2 { order: 3; flex-basis: 100%; margin: 0; }
  .bt-form { flex-wrap: wrap; gap: .6rem 1.2rem; } .bt-name { flex-basis: 100%; }
  .bt-st { margin-right: auto; }
}

/* ============================================================ the Ocean tab
   The map fades slowly away while the water turns (ocean.js), leaving the course tabs, faint, and the bar, now a music
   player. Faded parts are hidden once gone, so they cost nothing to draw. Leaving snaps everything back at once. */
.trackpick .oceantab { color: #7dd3fc; }
.trackpick .oceantab::before { content: ""; display: inline-block; width: 1px; height: 1.1em; margin: 0 1rem 0 -.6rem; vertical-align: -.15em; background: var(--line); }
.trackpick .oceantab.on { background: rgba(125, 211, 252, .12); color: #bae6fd; }
.shade { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.2s var(--ease);
         background: radial-gradient(ellipse at 50% 45%, rgba(0,4,12,0) 30%, rgba(0,3,10,.42) 75%, rgba(0,2,8,.7) 100%); }
#home .homehead > .headright, #home .map, #home .suggest, #home .legal, #home .discord, #home .toast, #home #track, #home #greet, .sizebar, #home .dockrow {
  transition: opacity .35s var(--ease); }
body.chill .shade { opacity: 1; transition: opacity 6s 1s var(--ease); }
body.chill #home .homehead > .headright, body.chill #home .map, body.chill #home .suggest, body.chill #home .legal, body.chill #home .discord,
body.chill #home .toast, body.chill #home #track, body.chill #home #greet, body.chill .sizebar {
  opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity 2.6s .3s var(--ease), visibility 0s 2.9s; }
body.chill #home .trackpick { opacity: .5; transition: opacity 2.6s .3s var(--ease); }
body.chill #home .trackpick:hover, body.chill #home .trackpick:focus-within { opacity: 1; transition: opacity .3s var(--ease); }
body.unchill .shade, body.unchill #home .map, body.unchill .sizebar { transition: opacity .3s var(--ease) !important; }
.musicrow { display: none; align-items: center; gap: 1.2rem; }
body.chill #home .dockrow { display: none; }
body.chill #home .musicrow { display: flex; animation: fadein 1.4s .4s var(--ease) both; }
body.chill #home .dock { padding: 1rem 1.8rem 1rem 1.2rem; background: rgba(8, 16, 32, .55); border-color: rgba(125, 211, 252, .16);
                         transition: background 2s var(--ease), border-color 2s var(--ease); }
.mplay { all: unset; cursor: pointer; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center;
         background: rgba(125, 211, 252, .12); border: 1px solid rgba(125, 211, 252, .35); transition: background .3s var(--ease); }
.mplay::before { content: ""; width: 1.1rem; height: 1.3rem; border-left: .38rem solid #bae6fd; border-right: .38rem solid #bae6fd; box-sizing: border-box; }
.mplay.paused::before { width: 0; height: 0; border-style: solid; border-width: .75rem 0 .75rem 1.25rem; border-color: transparent transparent transparent #bae6fd; margin-left: .3rem; }
.mplay:hover { background: rgba(125, 211, 252, .22); }
.mskip { all: unset; cursor: pointer; font-size: 2.4rem; line-height: 1; padding: 0 .6rem .3rem; color: var(--muted); border-radius: .8rem; transition: color .3s var(--ease); }
.mskip:hover { color: #bae6fd; }
.msong { min-width: 15rem; text-align: center; }
.msong b { display: block; font-size: 1.5rem; color: #e0f2fe; font-weight: 600; letter-spacing: .02em; }
.msong div { color: var(--muted); font-size: 1.15rem; }
.mvol { display: flex; align-items: center; gap: .8rem; color: var(--muted); border-left: 1px solid var(--line); padding-left: 1.6rem; }
.mvol input { -webkit-appearance: none; appearance: none; width: 12rem; height: .4rem; border-radius: 1rem; cursor: pointer;
              background: linear-gradient(90deg, #7dd3fc var(--v, 60%), rgba(255,255,255,.12) var(--v, 60%)); }
.mvol input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #e0f2fe; box-shadow: 0 0 .8rem rgba(125,211,252,.6); }
.mvol input::-moz-range-thumb { width: 1.4rem; height: 1.4rem; border: 0; border-radius: 50%; background: #e0f2fe; }
.mhint { color: var(--faint); font-size: 1.15rem; border-left: 1px solid var(--line); padding-left: 1.6rem; }
@media (max-width: 760px) { .mhint { display: none; } .mvol input { width: 8rem; } .msong { min-width: 11rem; } }
@media (max-width: 480px) { .mvol { display: none; } }
.mauto { font-size: 1.15rem; }
@media (max-width: 1000px) { .mhint { display: none; } }
@media (max-width: 640px) { .mauto { font-size: 0; gap: 0; } }
.mauto.on .sw { background: #7dd3fc; }
/* My progress in the player: a small cyan pill like the player's own controls, not the big boxy .ghost button */
.ghost.mprog { padding: .5rem 1.3rem; border-radius: 99rem; border: 1px solid rgba(125, 211, 252, .3); background: rgba(125, 211, 252, .08);
               color: #bae6fd; font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; }
.ghost.mprog:hover { border-color: rgba(125, 211, 252, .55); background: rgba(125, 211, 252, .18); color: #e0f2fe; }
body.chill.chillaway .sizebar { opacity: 1 !important; visibility: visible; pointer-events: auto; transition: none; }
.musicrow.mfloat { display: flex; position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 6; padding: 1rem 1.8rem 1rem 1.2rem;
                   border-radius: 2rem; background: rgba(8, 16, 32, .9); border: 1px solid rgba(125, 211, 252, .16); backdrop-filter: blur(1.8rem);
                   max-width: calc(100vw - 3.2rem); }
.musicrow.mfloat .mprog, .musicrow.mfloat .mhint { display: none; }
body.chillaway #progress .progbody { padding-bottom: 9rem; }
/* narrow windows: the player wraps onto a second row rather than run off the screen */
.musicrow { flex-wrap: wrap; justify-content: center; row-gap: .8rem; }
@media (max-width: 760px) { .mvol { border-left: 0; padding-left: 0; } .msong { min-width: 0; flex: 1 1 10rem; } }
/* the course tabs (and Ocean) wrap rather than widen the page on a phone */
.trackpick { flex-wrap: wrap; max-width: 100%; }

/* the handwriting read limit: green, amber, red */
.tools .readbtn.safe { color: var(--right); } .tools .readbtn.mid { color: var(--warn); } .tools .readbtn.dear { color: var(--wrong); border-color: rgba(251,113,133,.45); }
.dialog.readlimit { width: min(46rem, calc(100vw - 4rem)); }
.readlimit .levels { display: grid; gap: .7rem; margin: 1rem 0; }
.readlimit .level { display: grid; gap: .3rem; text-align: left; padding: .9rem 1.2rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.readlimit .level b { font-size: calc(1.4rem * var(--f)); }
.readlimit .level span { font-size: calc(1.2rem * var(--f)); color: var(--muted, #8a93a6); }
.readlimit .level.safe b { color: var(--right); } .readlimit .level.mid b { color: var(--warn); } .readlimit .level.dear b { color: var(--wrong); }
.readlimit .level.on { border-color: currentColor; background: rgba(255,255,255,.08); }
.readlimit .level.safe.on { color: var(--right); } .readlimit .level.mid.on { color: var(--warn); } .readlimit .level.dear.on { color: var(--wrong); }
.readlimit .readhelp { color: var(--warn); }
.readlimit .row { flex-wrap: wrap; gap: .6rem; }
.errbar { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 40; width: min(60rem, calc(100vw - 3.2rem));
  padding: 1.2rem 1.6rem; border-radius: 1.2rem; display: grid; gap: .8rem; font-size: calc(1.3rem * var(--f)); }
.errbar[hidden] { display: none; }
.errbar .row { display: flex; flex-wrap: wrap; gap: .6rem; }
.errbar a { color: var(--cyan); }
.errbar pre { max-height: 24rem; overflow: auto; font-size: 1.1rem; white-space: pre-wrap; margin: 0; color: var(--muted, #8a93a6); }
.keyonce { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0; font-size: calc(1.2rem * var(--f)); color: var(--muted, #8a93a6); }
.legal a { margin-left: .6rem; color: var(--muted); text-decoration: none; } .legal a:hover { color: var(--cyan); }

/* keyboard focus: a clear ring on anything you can Tab to (mouse and pen clicks don't show it) */
:is(button, a, [role="button"], input, select, textarea, summary):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* The ocean music, carried out of the Ocean tab (drawMini): a small quiet pill. On the map it rests on top of the bar,
   in the middle; beside the footer and Discord it takes their size. In a drill it sits in the top row. */
.minimusic { display: flex; align-items: center; gap: .8rem; padding: .3rem .8rem .3rem .4rem; border-radius: 99rem; z-index: 7;
             background: rgba(8, 16, 32, .8); border: 1px solid rgba(125, 211, 252, .16); color: var(--muted); font-size: 1.15rem;
             white-space: nowrap; opacity: .7; transition: opacity .3s var(--ease); animation: fadein .6s var(--ease) both; }
.minimusic[hidden] { display: none; }
.minimusic:hover, .minimusic:focus-within { opacity: 1; }
.minimusic.onmap { position: fixed; left: 50%; transform: translateX(-50%); }
.minimusic.floating { position: fixed; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
.minimusic.inhead { flex: none; }
.minimusic .mplay { width: 2.4rem; height: 2.4rem; }
.minimusic .mplay::before { width: .7rem; height: .8rem; border-left-width: .25rem; border-right-width: .25rem; }
.minimusic .mplay.paused::before { width: 0; height: 0; border-width: .45rem 0 .45rem .75rem; margin-left: .2rem; }
.minimusic .mininame { color: #bae6fd; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.minimusic .minivol { border-left: 0; padding-left: 0; gap: .5rem; }
.minimusic .minivol input { width: 7rem; }
.minimusic .minivol input::-webkit-slider-thumb { width: 1.1rem; height: 1.1rem; }
.minimusic .minivol input::-moz-range-thumb { width: 1.1rem; height: 1.1rem; }
.miniclose { all: unset; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0 .2rem .1rem; color: var(--faint); transition: color .3s var(--ease); }
.miniclose:hover { color: #bae6fd; }
/* beside the footer and Discord on the bar's top corners: the same slim height as theirs */
.minimusic.beside { padding: .1rem .7rem .1rem .3rem; border-radius: .8rem; background: rgba(8,12,24,.8); }
.minimusic.beside .mplay { width: 2rem; height: 2rem; }
.minimusic.compact .mininame { display: none; }
.minimusic.tiny .minivol { display: none; }
@media (max-width: 760px) { .minimusic.inhead .mininame { display: none; } }
@media (max-width: 480px) { .minimusic.inhead .minivol { display: none; } }
body:has(.minimusic.floating:not([hidden])) #progress .progbody { padding-bottom: 6rem; }   /* room to scroll clear of it */
/* phones: the top row is full, so just play/pause, up in the open corner above it */
@media (max-width: 600px) { .minimusic.inhead { position: fixed; top: calc(.6rem + env(safe-area-inset-top, 0px)); left: 1.6rem; padding: .2rem; gap: 0; }
                            .minimusic.inhead .miniclose { display: none; } }