/* The screens outside a skill: the dojo (index.html, kit/dojo.js) and his
   page (me/index.html, kit/me.js). Plain shell, no picture behind, tokens
   only. Loads after kit.css, which brings .btn, .hero, .fact and the devbar. */

.shell { max-width: 560px; margin: 0 auto; display: grid; gap: var(--s5); }
body:has(.devbar) { padding-bottom: 128px; }
.devbar a { color: var(--ink-2); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.panel-msg { display: grid; gap: var(--s3); padding: var(--s6) var(--s5); background: var(--surface); border: var(--border); border-radius: var(--r-lg); }
.panel-msg p { color: var(--ink-2); margin: 0; }

/* ── the dojo ─────────────────────────────────────────────────────────── */
.dojo-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.dojo-top h1 { font-size: var(--t-xl); }
/* his character, top right as in every activity (60 × 90); tap for his page */
.me-link { position: relative; display: block; width: 76px; height: 98px; border-radius: var(--r-md); transition: background var(--motion-fast) var(--ease); }
.me-link:hover { background: var(--surface); }
.me-link .hero { bottom: var(--s1); }

.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.task { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4); background: var(--surface); border: var(--border); border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
a.task:hover { border-color: var(--belt-ink); }
a.task:active { transform: translateY(1px); }
.task.is-next { border-color: var(--belt-ink); }
.task-name { font: 600 var(--t-md)/1.2 var(--font-display); min-width: 0; }
.task.boss { background: var(--surface-2); border-style: dashed; }
.task.boss .task-name { font-family: var(--font-display); color: var(--ink-2); }
.task.boss.open { border-style: solid; border-color: var(--belt-ink); }

.task.is-next .clock .rim, .task.is-passed .clock .rim { stroke: var(--belt-ink); }

/* ── his page: the hub ────────────────────────────────────────────────── */
.hub { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s4); align-items: center; padding-top: var(--s5); }
.hub-col { display: grid; gap: var(--s3); }
.hub-btn { min-height: 112px; align-content: center; display: grid; justify-items: center; gap: var(--s2); padding: var(--s4) var(--s3); background: var(--surface); border: var(--border); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; font: 600 var(--t-base) var(--font-display); text-align: center; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.hub-btn:hover { border-color: var(--belt-ink); }
.hub-btn:active { transform: translateY(1px); }
.hub-btn .ico { width: 32px; height: 32px; stroke: var(--belt-ink); }
.hub-btn .coin { object-fit: contain; }
.hub-btn b { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; }
.hub-hero { display: grid; justify-items: center; gap: var(--s3); }
.hub-hero .hero { display: block; position: relative; left: auto; bottom: auto; transform: none; height: 240px; filter: drop-shadow(0 0 var(--s6) color-mix(in srgb, var(--belt) 35%, transparent)); }
.hub-who { display: grid; justify-items: center; gap: 2px; text-align: center; }
.hub-who h1 { font-size: var(--t-xl); }
.belt-name { font: 600 var(--t-sm) var(--font-display); color: var(--belt-ink); }
.enter { justify-self: center; min-width: 240px; text-align: center; text-decoration: none; }

/* ── his page: the views ──────────────────────────────────────────────── */
.view { display: grid; gap: var(--s4); }
.view h2 { font-size: var(--t-lg); margin-top: var(--s2); }
.view-top { display: flex; align-items: center; gap: var(--s3); }
.view-top h1 { font-size: var(--t-xl); }
.tabs { display: flex; gap: var(--s1); padding: var(--s1); background: var(--surface); border: var(--border); border-radius: var(--r-md); }
.tabs a { flex: 1; text-align: center; padding: var(--s2); border-radius: 6px; color: var(--ink-2); text-decoration: none; font: 600 var(--t-sm) var(--font-display); transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.tabs a[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--belt-ink); }

.level-card { display: grid; gap: var(--s3); padding: var(--s5); background: var(--surface); border: var(--border); border-radius: var(--r-lg); }
.level-num { display: grid; gap: 2px; }
.level-num b { font: 600 var(--t-3xl)/1 var(--font-num); font-variant-numeric: tabular-nums; }
.level-num small { font-size: var(--t-lg); color: var(--muted); font-weight: 500; }
.lv-bar { height: 8px; border-radius: var(--r-full); background: var(--rule-2); overflow: hidden; }
.lv-bar i { display: block; height: 100%; background: var(--belt); transition: width var(--motion-reveal) var(--ease-out); }

.tools { list-style: none; margin: 0; padding: 0; display: grid; border: var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.tool { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: var(--border); color: var(--muted); }
.tool:last-child { border-bottom: 0; }
.tool .ico { width: 20px; height: 20px; stroke: currentColor; }
.tool-name { font-weight: 500; }
.tool-at { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool.open { color: var(--ink); }
.tool.open .ico { stroke: var(--good); }
.tool.next { color: var(--ink-2); background: var(--surface-2); }
.tool.next .tool-at { color: var(--belt-ink); }
.belt-dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--belt); box-shadow: 0 0 0 1px var(--rule-2); }

.scores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.score { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4); background: var(--surface); border: var(--border); border-radius: var(--r-md); }
.score.you { border-color: var(--belt-ink); background: var(--surface-2); }
.rank { font-size: var(--t-lg); color: var(--muted); text-align: center; }
.score:nth-child(-n+3) .rank { color: var(--ink); }
.mini { position: relative; width: 44px; height: 60px; overflow: hidden; }
.mini .hero { height: 60px; animation: none; }
.score-name { display: grid; font-weight: 600; min-width: 0; }
.score-name .belt-name { font-size: var(--t-xs); }
.score > b { font-weight: 600; white-space: nowrap; }
.score small { color: var(--muted); font-weight: 500; }


/* reading, writing and maths as pictures (BBArt.icon) */
.tabs a { display: grid; place-items: center; padding: var(--s1); }
.tabs .area-ico { width: 48px; height: 48px; }
.tabs a[aria-selected="false"] .area-ico { opacity: .55; filter: grayscale(.4); transition: opacity var(--motion-fast) var(--ease); }
.tabs a:hover .area-ico { opacity: 1; filter: none; }
.level-num { grid-template-columns: auto 1fr; align-items: center; gap: var(--s4); }
.level-num .area-ico { width: 72px; height: 72px; }
.area-trio { display: flex; gap: 2px; }
.area-trio .area-ico { width: 32px; height: 32px; }

/* ── his page: belts down the side, the hub, high scores below ───────── */
.me-top { display: grid; gap: var(--s4); justify-items: center; }
.me-top .hub { width: 100%; padding-top: 0; }
/* the nine belts, left to right under him */
.belt-row { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--s1); }
.belt-pic { display: grid; place-items: center; padding: var(--s1); border-radius: var(--r-md); }
.belt-pic img { width: 100%; aspect-ratio: 192 / 136; display: block; image-rendering: pixelated; transition: opacity var(--motion-base) var(--ease), filter var(--motion-base) var(--ease); }
/* the ones ahead, faint; passed and current in full colour */
.belt-pic.ahead img { opacity: .35; filter: saturate(.45); }
.belt-pic.now { background: var(--surface); box-shadow: inset 0 0 0 1px var(--belt-ink), 0 0 var(--s5) color-mix(in srgb, var(--belt) 30%, transparent); }
.belt-pic.done img, .belt-pic.now img { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ground) 60%, transparent)); }

.board { display: grid; gap: var(--s3); }
.board h2 { font-size: var(--t-lg); }
.board .tabs button { flex: 1; display: grid; place-items: center; min-height: 48px; padding: var(--s1); border: 0; border-radius: 6px; background: none; color: var(--ink-2); font: 600 var(--t-sm) var(--font-display); cursor: pointer; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.board .tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--belt-ink); }
.board .tabs .area-ico { width: 40px; height: 40px; }
.board .tabs button[aria-selected="false"] .area-ico { opacity: .55; filter: grayscale(.4); }
/* the list scrolls in its own box */
.scores { position: relative; max-height: min(60vh, 520px); overflow-y: auto; padding: var(--s1); margin: calc(var(--s1) * -1); }
.score-wait { min-height: 64px; list-style: none; }
.score-name { display: flex; align-items: center; gap: var(--s2); }
.score-belt { width: 34px; height: auto; image-rendering: pixelated; flex: none; }

@media (max-width: 520px) {
  .me-top { gap: var(--s3); }
  .me-top .hub { gap: var(--s2); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hub-hero .hero { height: 150px; }
  .hub-btn { min-height: 108px; padding: var(--s3) var(--s1); font-size: var(--t-sm); }
  .area-trio .area-ico { width: 24px; height: 24px; }
  .belt-row { gap: 2px; }
  .belt-pic { padding: 2px; }
  .score { grid-template-columns: 24px 36px minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s2) var(--s3); }
  .mini { width: 36px; height: 50px; } .mini .hero { height: 50px; }
}

/* the subject's picture at the right of each dojo row */
.task .area-ico { width: 40px; height: 40px; }
.task.is-passed .area-ico { opacity: .6; }

/* His typing on the Writing stats (kit/me.js typingHtml): a keyboard of his keys,
   coloured by speed against his belt's typing speed, or by how often he misses them. */
.typing-card { gap: var(--s4); }
.key-modes { justify-self: start; }
.key-map { display: grid; gap: var(--s1); justify-content: center; }
.key-row { display: flex; gap: var(--s1); justify-content: center; }
.key-row.r1 { padding-left: var(--s3); }
.key-row.r2 { padding-left: var(--s6); }
.kkey { width: clamp(26px, 8vw, 38px); aspect-ratio: 1; display: grid; place-items: center; font: 600 var(--t-sm) var(--font-body); color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule-2); border-bottom-width: 3px; border-radius: var(--r-sm); cursor: pointer; padding: 0; }
.kkey.space { width: clamp(150px, 46vw, 220px); aspect-ratio: auto; height: clamp(26px, 8vw, 38px); }
.kkey.few { opacity: .4; }
.kkey.crit { background: color-mix(in srgb, var(--crit) 45%, var(--surface-2)); border-color: var(--crit); }
.kkey.warn { background: color-mix(in srgb, var(--warn) 45%, var(--surface-2)); border-color: var(--warn); }
.kkey.good { background: color-mix(in srgb, var(--good) 45%, var(--surface-2)); border-color: var(--good); }
.kkey.great { background: color-mix(in srgb, var(--accent-2) 50%, var(--surface-2)); border-color: var(--accent-2); }
.kkey:focus-visible { outline: 2px solid var(--belt-ink); outline-offset: 2px; }
.key-read { margin: 0; min-height: 1.4em; text-align: center; color: var(--ink-2); font: 500 var(--t-sm) var(--font-num); font-variant-numeric: tabular-nums; }
.key-modes button { min-width: 96px; padding: var(--s2) var(--s3); border: 0; border-radius: 6px; background: none; color: var(--ink-2); font: 600 var(--t-sm) var(--font-display); cursor: pointer; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.key-modes button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--belt-ink); }

/* ── the login page (login/index.html, kit/login.js) ──────────────────── */
/* White ground and the black logo, Luke's brand door (11 Oct). */
html:has(.login-page), .login-page { background: var(--surface); }
.login { min-height: calc(100vh - var(--s5) - var(--s7)); max-width: 360px; margin: 0 auto; display: grid; align-content: center; gap: var(--s7); }
.login-logo { margin: 0; }
.login-logo img { display: block; width: 100%; height: auto; }
.login-form { display: grid; gap: var(--s2); }
.login-form label { font: 600 var(--t-sm) var(--font-display); color: var(--ink-2); }
.login-form label + input { margin-bottom: var(--s3); }
.login-form input { font: 500 var(--t-md) var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-md); padding: var(--s3) var(--s4); width: 100%; box-sizing: border-box; transition: border-color var(--motion-fast) var(--ease); }
.login-form input:focus { outline: 2px solid var(--belt-ink); outline-offset: 1px; border-color: var(--belt-ink); }
.login-form .btn { padding-block: var(--s4); font-size: var(--t-md); }
.login-form .btn:focus-visible { outline: 2px solid var(--belt-ink); outline-offset: 2px; }
.login-err { margin: 0; min-height: 1.6em; font-size: var(--t-sm); color: var(--crit); }
@media (prefers-reduced-motion: no-preference) {
  .login > * { animation: login-in var(--motion-base) var(--ease-out) both; }
  .login-form { animation-delay: 80ms; }
}
@keyframes login-in { from { opacity: 0; transform: translateY(var(--s2)); } }

/* other boys in the high scores keep the plain character (we don't know
   what they're wearing yet); his own row wears his outfit */
html[data-outfit] .score:not(.you) .mini .hero { background-image: url(/assets/avatars/hero.png); background-size: 200% 100%; aspect-ratio: 425 / 639; }

/* ── making his character (start/index.html, kit/start.js) ────────────── */
.make { justify-items: center; text-align: center; padding-top: var(--s5); }
.make h1 { margin: 0; font-size: var(--t-xl); }
.make-hero { width: 168px; height: 228px; }
.make-name { margin: calc(var(--s4) * -1) 0 0; font: 700 var(--t-lg)/var(--lh-tight) var(--font-display); color: var(--ink); }
.make-form { display: grid; gap: var(--s5); width: 100%; }
.swatches { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.swatches legend { width: 100%; margin-bottom: var(--s3); font: 600 var(--t-sm) var(--font-display); color: var(--ink-2); }
.swatch { display: grid; justify-items: center; gap: var(--s1); width: 64px; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-dot { width: 48px; height: 48px; border-radius: var(--r-full); background: var(--sw); box-shadow: inset 0 0 0 1px var(--rule-2); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.swatch:hover .sw-dot { transform: scale(1.06); }
.swatch input:checked + .sw-dot { outline-color: var(--belt-ink); }
.swatch input:focus-visible + .sw-dot { outline-color: var(--belt-ink); outline-style: dashed; }
/* no words on the swatches (Luke, 11 Oct): the names are for screen readers only */
.sw-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.swatch { width: auto; }
.make .btn { justify-self: center; min-width: 200px; padding-block: var(--s4); font-size: var(--t-md); }

/* ── the shop (kit/me.js shop, kit/outfit.js) ─────────────────────────── */
.shop .view-top { justify-content: flex-start; }
.purse-mini { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3) var(--s1) var(--s1); background: var(--surface); border: var(--border); border-radius: var(--r-full); }
.purse-mini img { width: 32px; height: 32px; object-fit: contain; }
.purse-mini b { font-size: var(--t-md); font-weight: 600; }
.wardrobe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s4) var(--s5); background: var(--surface); border: var(--border); border-radius: var(--r-lg); }
.wardrobe-hero .hero { display: block; position: relative; left: auto; bottom: auto; transform: none; height: 200px; filter: drop-shadow(0 0 var(--s5) color-mix(in srgb, var(--belt) 30%, transparent)); }
.wardrobe-side { display: grid; gap: var(--s3); justify-items: start; min-width: 0; }
.wearing-name { font: 600 var(--t-lg)/1.2 var(--font-display); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sw { width: 32px; height: 32px; padding: 0; border-radius: var(--r-full); border: 2px solid var(--rule-2); cursor: pointer; transition: transform var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.sw:hover { transform: scale(1.08); }
.sw[aria-pressed="true"] { border-color: var(--belt-ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--belt-ink); }

.shop-tabs button { flex: 1; display: grid; place-items: center; gap: 2px; min-height: 48px; padding: var(--s1); border: 0; border-radius: 6px; background: none; color: var(--ink-2); font: 600 var(--t-sm) var(--font-display); cursor: pointer; }
.shop-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--belt-ink); }
.shop-tabs small { font: 500 var(--t-xs) var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); }
.shop-tabs .stars { font-size: 10px; letter-spacing: 0; }

.outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); }
.outfit { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s1); padding: var(--s3) var(--s2); background: var(--surface); border: var(--border); border-radius: var(--r-md); color: var(--ink); font: inherit; cursor: pointer; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.outfit:hover { border-color: var(--belt-ink); }
.outfit:active { transform: translateY(1px); }
.outfit img { width: 88px; height: 88px; object-fit: contain; }
.outfit-name { font: 600 var(--t-xs)/1.25 var(--font-display); text-align: center; min-height: 2.5em; display: grid; place-items: center; }
.outfit:not(.owned) .outfit-name { color: var(--muted); letter-spacing: .1em; }
.outfit.wearing { border-color: var(--belt-ink); background: var(--surface-2); }
/* not his yet: a dark shape, the art kept a surprise */
.sil { filter: brightness(0) opacity(.45); }
:root[data-dojo-theme="dojo-light"] .sil { filter: brightness(0) opacity(.25); }
.glow { filter: drop-shadow(0 0 var(--s4) color-mix(in srgb, var(--belt) 60%, transparent)); transition: filter var(--motion-slow) var(--ease); }
.badge { position: absolute; top: var(--s1); right: var(--s1); min-width: 22px; height: 22px; padding: 0 var(--s1); display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--rule-2); font: 600 var(--t-xs) var(--font-num); color: var(--ink-2); }
.badge.on { background: var(--belt); border-color: var(--belt-ink); color: var(--ground); }
:root[data-belt="green"] .badge.on, :root[data-belt="blue"] .badge.on, :root[data-belt="purple"] .badge.on, :root[data-belt="brown"] .badge.on, :root[data-belt="black"] .badge.on, :root[data-belt="red"] .badge.on { color: var(--ink); }
.badge.big { position: static; width: 40px; height: 40px; font-size: var(--t-lg); }
.badge .ico { width: 12px; height: 12px; stroke: var(--muted); }
.price { display: inline-flex; align-items: center; gap: var(--s1); font: 600 var(--t-sm) var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); }
.price img { width: 18px; height: 18px; object-fit: contain; }
.price.can { color: var(--ink); }
.btn .price { color: inherit; }

/* an outfit, up close */
.veil { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--s4); background: color-mix(in srgb, var(--ground) 60%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet { position: relative; width: min(100%, 360px); display: grid; justify-items: center; gap: var(--s3); padding: var(--s6) var(--s5) var(--s5); background: var(--surface); border: var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); text-align: center; }
.sheet .x { position: absolute; top: var(--s2); right: var(--s2); width: 32px; height: 32px; border-radius: var(--r-full); border: var(--border); background: var(--surface-2); color: var(--ink-2); font: inherit; cursor: pointer; }
.sheet h3 { font-size: var(--t-xl); }
.sheet-pic { width: 160px; height: 160px; object-fit: contain; }
.sheet .stars { font-size: var(--t-md); }
.needs { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.needs .ico { width: 16px; height: 16px; stroke: var(--muted); flex: none; }
.sheet-row { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
@media (max-width: 520px) {
  .wardrobe { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--s4); }
  .wardrobe-side { justify-items: center; }
  .wardrobe-hero .hero { height: 170px; }
  .outfits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .outfit img { width: 72px; height: 72px; }
}
.shop .stars { color: var(--ink); }
.shop .stars .off { color: var(--rule); }
.shop-tabs .stars { font-size: var(--t-xs); letter-spacing: 1px; }

/* ── his page, Luke 11 Oct (fourth pass) ─────────────────────────────────
   Left of him: reading, writing, maths, each its level with a bar to 99, the
   XP to the next level, and a Stats button. Right of him: Enter the dojo,
   then the shop. Under him: name and belt, the belts, the high scores. */
.shell.me { max-width: 760px; }
.me-top .hub { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s5); }
.hub-subjects { display: grid; gap: var(--s3); }
.subj { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); background: var(--surface); border: var(--border); border-radius: var(--r-md); }
.subj-head { display: flex; align-items: center; gap: var(--s2); }
.subj-head .area-ico { width: 32px; height: 32px; }
.subj-head b { font-size: var(--t-md); font-weight: 600; }
.subj-head small { font-size: var(--t-sm); color: var(--muted); font-weight: 500; }
.subj-bar { height: 6px; border-radius: var(--r-full); background: var(--rule-2); overflow: hidden; }
.subj-bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--belt); transition: width var(--motion-reveal) var(--ease-out); }
.subj-xp { font-size: var(--t-xs); color: var(--ink-2); }
/* the pictures that loop (Luke, 11 Oct): three frames each, in assets/areas/.
   The dojo's curtains sway on Enter the dojo; the bar chart pulses on Stats. */
.loop-ico { display: inline-block; flex: none; width: 32px; height: 32px; background: 0 0 / 300% 100% no-repeat; animation: loop-pulse 1.2s steps(1) infinite; }
.dojo-ico { background-image: url(/assets/areas/dojo.png); }
.stats-ico { background-image: url(/assets/areas/stats.png); }
@keyframes loop-pulse { 0% { background-position: 0 0; } 25% { background-position: 50% 0; } 50% { background-position: 100% 0; } 75% { background-position: 50% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .loop-ico { animation: none; } }
a.subj { color: var(--ink); text-decoration: none; transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
a.subj:hover { border-color: var(--belt-ink); }
a.subj:active { transform: translateY(1px); }
/* Enter the dojo: the same shape and picture size as Shop and Stats, white (the primary) */
.hub-go .hub-btn.enter { justify-self: stretch; min-width: 0; width: auto; background: var(--belt-ink); border-color: var(--belt-ink); color: var(--ground); }
:root[data-dojo-theme="dojo-light"] .hub-go .hub-btn.enter { color: var(--surface); }
.hub-go .hub-btn.enter:hover { border-color: var(--ink); }
.hub-go .hub-btn { min-height: 96px; }
.hub-go .hub-btn .loop-ico { width: 40px; height: 40px; }

/* his stats (#mystats) */
.my-stats .view-top .loop-ico { width: 36px; height: 36px; }
.my-stats .fact { flex: 1 1 120px; }
.by-subject { display: grid; gap: var(--s2); padding: var(--s4); background: var(--surface); border: var(--border); border-radius: var(--r-lg); }
.bs-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 72px; gap: var(--s3); align-items: center; }
.bs-row .area-ico { width: 32px; height: 32px; }
.bs-row .num { font-size: var(--t-sm); color: var(--ink-2); text-align: right; }
.bs-bar { height: 8px; border-radius: var(--r-full); background: var(--rule-2); overflow: hidden; }
.bs-bar i { display: block; height: 100%; background: var(--belt); border-radius: var(--r-full); }
.runs { list-style: none; margin: 0; padding: 0; display: grid; border: var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.run { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-bottom: var(--border); }
.run:last-child { border-bottom: 0; }
.run-name { display: grid; font-weight: 600; }
.run-name small { font-weight: 400; font-size: var(--t-xs); color: var(--muted); }
.run .num { font-weight: 600; }
.run-pass { color: var(--good); font-weight: 700; text-align: center; }
.hub-go { display: grid; gap: var(--s3); }

.hub-who { margin-top: var(--s2); }
.board h2 { text-align: center; }
@media (max-width: 600px) {
  .me-top .hub { grid-template-columns: 1fr; gap: var(--s4); }
  .hub-hero { order: -1; }
  .hub-go { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .hub-go .hub-btn.enter { grid-column: 1 / -1; }
  .hub-go .hub-btn { min-height: 0; padding: var(--s3); }
}

/* high scores hold still (Luke, 11 Oct): no bob on the little characters */
html .scores .mini .hero { animation: none; background-position: 0 0; }

/* both sides of him match (Luke, 11 Oct): three rows on the left (reading,
   writing, maths) and three on the right (shop, stats, Enter the dojo), the
   same height and lined up; on the right the picture sits beside its words */
.me-top .hub { align-items: stretch; }
.hub-subjects, .hub-go { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.hub-subjects .subj { align-content: center; }
.hub-go .hub-btn { min-height: 0; display: flex; align-items: center; justify-content: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); text-align: left; }
.hub-go .hub-btn .loop-ico, .hub-go .hub-btn .coin { width: 40px; height: 40px; flex: none; }
.hub-go .hub-btn b { margin-left: auto; }
@media (max-width: 600px) {
  .hub-subjects, .hub-go { grid-template-rows: none; }
  .hub-go { grid-template-columns: 1fr; }
  .hub-go .hub-btn.enter { grid-column: auto; }
}

/* he stands at the foot of his column, just above his name (Luke, 11 Oct) */
.me-top .hub-hero { align-self: end; }
.me-top .hub-hero .hero { margin-bottom: calc(var(--s2) * -1); }
.me-top .hub-who { margin-top: calc(var(--s3) * -1); }

/* ── the belt's scene behind the dojo and his page (Luke, 11 Oct) ───────
   Reading Dojo's home pictures (reading-dojo-app/shared/home/), full bleed
   and still. Two scrims keep the words readable: the top and the foot of the
   picture ease into the ground, and a soft halo of the ground sits behind
   the column. A bright picture takes a flat wash too (--scene-dim, as in
   Reading Dojo: blue). Night until black; daylight at black belt. */
html[data-belt="white"] { --scene: url("/assets/home/white.jpg"); }
html[data-belt="yellow"] { --scene: url("/assets/home/yellow.jpg"); }
html[data-belt="orange"] { --scene: url("/assets/home/orange.jpg"); }
html[data-belt="green"] { --scene: url("/assets/home/green.jpg"); }
html[data-belt="blue"] { --scene: url("/assets/home/blue.jpg"); --scene-dim: 50%; }
html[data-belt="purple"] { --scene: url("/assets/home/purple.jpg"); }
html[data-belt="brown"] { --scene: url("/assets/home/brown.jpg"); }
html[data-belt="black"] { --scene: url("/assets/home/black.jpg"); }
html[data-belt="red"] { --scene: url("/assets/home/red.jpg"); }
body:has(> main.shell.dojo, > main.shell.me)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--ground) 45%, transparent) 0, transparent 22%, transparent 58%, color-mix(in srgb, var(--ground) 88%, transparent) 100%),
    linear-gradient(color-mix(in srgb, var(--ground) var(--scene-dim, 0%), transparent), color-mix(in srgb, var(--ground) var(--scene-dim, 0%), transparent)),
    var(--scene, none) center top / cover no-repeat;
}
main.shell.dojo, main.shell.me { position: relative; z-index: 0; }
main.shell.dojo::before, main.shell.me::before {
  content: ""; position: absolute; inset: -12px -36px; z-index: -1; pointer-events: none;
  border-radius: 48px; background: color-mix(in srgb, var(--ground) 58%, transparent); filter: blur(26px);
}
/* the ground comes from <html> here, so the scene can sit between it and the page */
body:has(> main.shell.dojo, > main.shell.me) { background: transparent; }

/* his spare hearts, under his name and belt */
.who-hearts { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s1); }
.who-hearts .heart { width: 22px; height: 22px; }
.who-hearts b { font-size: var(--t-sm); font-weight: 600; color: var(--crit); }

/* an outfit he can't wear yet, tapped: a shake, and what it needs in place of its name */
.outfit.nope { animation: outfit-nope 360ms var(--ease); border-color: var(--rule-2); }
.outfit.nope .outfit-name { color: var(--ink-2); letter-spacing: 0; }
@keyframes outfit-nope { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .outfit.nope { animation: none; } }