/* Dashboard and direct login ------------------------------------------------
   These rules deliberately use the same slightly uneven ink lines as the
   learning paths: thin navy strokes, a coral brush mark and pale washi washes.
   The generated concept lives at assets/ui/dashboard-concept-v1.png; the live
   interface below is semantic HTML rather than text baked into that image. */

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("assets/fonts/josefin-sans-variable.ttf") format("truetype");
}

:root {
  --button-texture-coral: url("assets/ui/button-texture-coral-v2.webp");
  --button-texture-indigo: url("assets/ui/button-texture-indigo-v2.webp");
  --button-texture-powder: url("assets/ui/button-texture-powder-v2.webp");
  --button-texture-mint: url("assets/ui/button-texture-mint-v2.webp");
  --button-texture-gold: url("assets/ui/button-texture-gold-v2.webp");
  --button-texture-lavender: url("assets/ui/button-texture-lavender-v2.webp");
}

#dashboard-home {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V10M10 19V5M16 19v-7M3 19h18'/%3E%3Cpath d='m3 8 6-5 6 6 6-5'/%3E%3C/svg%3E");
}

.learning-nav-divider {
  width: 1px;
  height: 32px;
  align-self: center;
  background: rgba(17, 45, 80, .14);
  transform: rotate(1.5deg);
}

.learning-nav button + .learning-nav-divider,
.learning-nav-divider + button { margin-left: 0; }
.learning-nav .learning-nav-divider + button {
  padding-left: 20px;
  border-left: 0;
  border-radius: 12px;
}

/* The approved MojiMichi poster stays one composition at every viewport size. */
.profile-gate {
  box-sizing: border-box;
  width: 100%;
  place-items: center;
  overflow: hidden auto;
  padding: clamp(14px, 3vw, 34px);
  background:
    repeating-linear-gradient(0deg, rgba(30,50,70,.018) 0 1px, transparent 1px 5px),
    #f3eee4;
}
.profile-panel {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: min(100%, 940px);
  min-height: min(850px, calc(100dvh - 28px));
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px) clamp(28px, 6vw, 72px);
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 78%, rgba(203,220,243,.15), transparent 23%),
    #fffaf2;
  border: 10px solid transparent;
  border-image: none;
  border-radius: 0;
  box-shadow: 7px 9px 0 rgba(17,45,80,.06), 0 24px 62px rgba(31,44,55,.12);
  transform: none;
}
.profile-panel::before,
.profile-panel::after { content: none; display: none; }

.profile-story {
  position: static;
  z-index: 2;
  display: block;
  min-width: 0;
  padding: 0;
  overflow: visible;
  text-align: left;
}
.profile-story::after { content: none; display: none; }
.profile-brand {
  position: relative;
  z-index: 2;
  width: 295px;
  height: 84px;
}
.profile-brand-art {
  display: block;
  width: 100%;
  height: 100%;
  background: url("assets/ui/mojimichi-logo-transparent-v1.png") center / 100% auto no-repeat;
}
.profile-form-copy { margin: 0 0 clamp(52px, 8vh, 78px); }
.profile-form-copy .profile-tagline {
  box-sizing: border-box;
  width: 390px;
  height: 154px;
  overflow: hidden;
  margin: 0;
  color: var(--coral);
  background: none;
  font: 700 64px/1.08 var(--serif);
  letter-spacing: -.035em;
  text-shadow: none;
  text-indent: 0;
  white-space: normal;
}
.profile-landscape {
  position: absolute;
  z-index: 0;
  inset: 72px -54px -16px -54px;
  opacity: .94;
  pointer-events: none;
}
.profile-road-scene {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
}
.profile-road-scene.is-mobile { display: none; }
.profile-road-scene text {
  fill: var(--ink);
  stroke: #fffaf2;
  stroke-width: 5px;
  paint-order: stroke fill;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--jp-serif);
  font-weight: 800;
}
.profile-falling-leaves {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.profile-falling-leaves span {
  position: absolute;
  top: -28px;
  left: var(--leaf-x);
  width: var(--leaf-size);
  height: calc(var(--leaf-size) * .66);
  background: var(--button-texture-coral) center / cover no-repeat;
  border-radius: 0 85% 0 85%;
  opacity: 0;
  transform-origin: 50% 20%;
  animation: profile-leaf-fall var(--leaf-time) linear infinite;
  animation-delay: var(--leaf-delay);
}
.profile-falling-leaves span:nth-child(1) { --leaf-x: 12%; --leaf-size: 20px; --leaf-time: 15s; --leaf-delay: -3s; }
.profile-falling-leaves span:nth-child(2) { --leaf-x: 36%; --leaf-size: 26px; --leaf-time: 19s; --leaf-delay: -12s; }
.profile-falling-leaves span:nth-child(3) { --leaf-x: 68%; --leaf-size: 17px; --leaf-time: 16s; --leaf-delay: -8s; }
.profile-falling-leaves span:nth-child(4) { --leaf-x: 84%; --leaf-size: 24px; --leaf-time: 20s; --leaf-delay: -16s; }
.profile-falling-leaves span:nth-child(5) { --leaf-x: 54%; --leaf-size: 16px; --leaf-time: 18s; --leaf-delay: -5s; }
.profile-falling-leaves span:nth-child(6) { --leaf-x: 25%; --leaf-size: 21px; --leaf-time: 22s; --leaf-delay: -19s; }
@keyframes profile-leaf-fall {
  0% { opacity: 0; transform: translate(0, -25px) rotate(-28deg); }
  8% { opacity: .72; }
  25% { transform: translate(30px, 23vh) rotate(95deg); }
  50% { transform: translate(-26px, 46vh) rotate(220deg); }
  75% { transform: translate(34px, 70vh) rotate(330deg); opacity: .72; }
  100% { opacity: 0; transform: translate(-12px, 100vh) rotate(480deg); }
}
@media (prefers-reduced-motion: reduce) {
  .profile-falling-leaves { display: none; }
  .profile-road-scene text { display: none; }
}

.profile-login {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  gap: 0;
  margin: clamp(26px, 4vh, 34px) 0 0;
  padding: 0;
}
.profile-field { display: grid; gap: 8px; margin-top: 16px; }
.profile-login label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink);
  font: 800 .94rem/1.2 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
.profile-login label span { color: var(--coral-dark); font: 700 .64rem/1.2 var(--jp-sans); letter-spacing: .06em; }
.profile-login input,
.profile-login input:focus {
  box-sizing: border-box;
  width: 100%;
  height: 58px;
  padding: 9px 18px;
  color: var(--ink);
  background: rgba(255,253,248,.76);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}
.profile-login input:focus {
  background: rgba(255,247,239,.96);
  border-image-source: var(--ink-frame-coral);
}
.profile-login input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #fffaf2 inset;
  -webkit-text-fill-color: var(--ink);
}
.profile-login .profile-submit {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 0 12px 0 30px;
  color: #fffaf2;
  background: var(--coral);
  border: 8px solid transparent;
  border-image: var(--ink-frame-coral) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  font: 800 clamp(1rem, 2vw, 1.25rem)/1 var(--serif);
  text-transform: none;
}
.profile-login .profile-submit span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 47% 53% 46% 54%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}
.profile-login .profile-submit span { width: 40px; height: 40px; background: rgba(255,255,255,.12); border-color: #fffaf2; transform: rotate(-2deg); }
.profile-login .profile-submit:hover { color: #fff; background: #d94743; transform: none; }
.profile-login .profile-submit:disabled { opacity: .62; cursor: wait; }
.profile-login .profile-feedback { min-height: 1.35em; margin: 7px 0 0; text-align: left; }
.profile-or {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 13px 0 10px;
  color: #52677b;
  font: 800 .65rem/1 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.profile-or::before,
.profile-or::after {
  content: "";
  height: 4px;
  flex: 1;
  background: var(--ink-rule-navy) center / 100% 100% no-repeat;
  opacity: .42;
}
.profile-guest {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  justify-self: center;
  padding: 5px 8px;
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.profile-guest strong { font: 800 .94rem/1 var(--serif); text-shadow: 0 0 5px #fffaf2, 0 0 12px #fffaf2; }
.profile-guest-arrow {
  color: var(--ink);
  font: 800 1.2rem/1 var(--serif);
  text-shadow: 0 0 5px #fffaf2, 0 0 12px #fffaf2;
}
.profile-guest:hover { color: var(--coral-dark); background: transparent; text-decoration: underline; text-underline-offset: 3px; transform: none; }
.profile-guest-note { margin-top: 2px; color: #52677b; text-align: center; text-shadow: 0 0 6px #fffaf2, 0 0 12px #fffaf2; }

/* Dashboard canvas ------------------------------------------------------- */
body.dashboard-home {
  background:
    url("assets/ui/washi-learning-v3.png") center top / cover fixed no-repeat,
    #f5f0e7;
}
body.dashboard-home .shell { width: min(calc(100% - 38px), 1500px); }
body.dashboard-home .start-menu {
  padding: 18px 5px 42px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.dashboard-home .deck-picker { display: block; width: 100%; }
body.dashboard-home .menu-head,
body.dashboard-home .menu-tabs { display: none; }
.dashboard-page { color: var(--ink); }
.dashboard-intro {
  position: relative;
  display: grid;
  min-height: 235px;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  align-items: center;
  gap: 50px;
  padding: 32px clamp(20px, 5vw, 70px) 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(17, 45, 80, .2);
}
.dashboard-intro::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -135px;
  width: 370px;
  height: 270px;
  background: radial-gradient(circle at 50% 20%, rgba(237,85,77,.8) 0 31%, transparent 32%);
  opacity: .16;
  pointer-events: none;
}
.dashboard-intro::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 18px;
  width: 78px;
  height: 6px;
  background: var(--coral);
  border-radius: 60% 30% 70% 40%;
  transform: rotate(-2deg);
}
.dashboard-intro .eyebrow { margin: 0 0 10px; color: var(--ink); }
.dashboard-intro h2 {
  margin: 0;
  font: 800 clamp(2.8rem, 5.7vw, 5.25rem)/.88 var(--serif);
  letter-spacing: -.06em;
}
.dashboard-intro > div > p:last-child { margin: 18px 0 0; font-size: 1rem; }
.dashboard-proverb { position: relative; z-index: 1; display: grid; justify-items: start; gap: 5px; }
.dashboard-proverb strong { font: 500 clamp(1.4rem, 2.5vw, 2.1rem)/1.2 var(--jp-serif); letter-spacing: .11em; }
.dashboard-proverb em { color: var(--muted); font-family: var(--serif); }
.dashboard-proverb span { color: var(--ink); font-size: .84rem; }

.dashboard-metrics {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: 9px;
  margin: 18px 0 34px;
}
.dashboard-metric {
  position: relative;
  min-height: 178px;
  padding: 22px 20px;
  overflow: hidden;
  background: rgba(255, 250, 242, .83);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
}
.dashboard-metric:nth-child(2) { background: rgba(203, 220, 243, .66); transform: rotate(.08deg); }
.dashboard-metric:nth-child(3) { background: rgba(204, 231, 216, .66); transform: rotate(-.07deg); }
.dashboard-metric:nth-child(4) { background: rgba(247, 234, 208, .72); transform: rotate(.06deg); }
.dashboard-metric:nth-child(5) { background: rgba(210, 227, 244, .72); transform: rotate(-.08deg); }
.dashboard-metric h3 { margin: 0 0 26px; font: 800 .92rem/1.15 var(--serif); }
.dashboard-metric > strong { display: block; font: 800 clamp(2.2rem, 3.2vw, 3.35rem)/.9 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.dashboard-metric p { margin: 12px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.dashboard-metric.is-memory {
  padding-left: 126px;
  background: rgba(246, 206, 201, .72);
}
.dashboard-metric.is-memory::before,
.dashboard-metric.is-memory::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 58px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
}
.dashboard-metric.is-memory::before { background: conic-gradient(var(--coral) var(--memory-score), rgba(255,255,255,.55) 0); }
.dashboard-metric.is-memory::after { inset: 69px auto auto 33px; width: 60px; height: 60px; background: rgba(255, 250, 242, .92); }
.dashboard-metric.is-memory > strong { position: relative; z-index: 1; }

.dashboard-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: start;
  gap: 18px;
}
.dashboard-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 10px 15px;
}
.dashboard-section-heading .eyebrow { margin: 0 0 4px; color: var(--coral-dark); }
.dashboard-section-heading h3 { margin: 0; font: 800 clamp(1.8rem, 3vw, 2.65rem)/1 var(--serif); letter-spacing: -.035em; }
.dashboard-section-heading > span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.dashboard-group {
  --group-surface: rgba(246, 206, 201, .72);
  --group-accent: #d94743;
  margin-bottom: 10px;
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  background: var(--group-surface);
  box-shadow: none;
}
.dashboard-group.dashboard-tone-1 { --group-surface: rgba(204, 231, 216, .76); --group-accent: #176955; }
.dashboard-group.dashboard-tone-2 { --group-surface: rgba(203, 220, 243, .8); --group-accent: #224f82; }
.dashboard-group.dashboard-tone-3 { --group-surface: rgba(247, 234, 208, .82); --group-accent: #b36c31; }
.dashboard-group > summary,
.dashboard-deck > summary {
  display: grid;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.dashboard-group > summary::-webkit-details-marker,
.dashboard-deck > summary::-webkit-details-marker { display: none; }
.dashboard-group > summary {
  min-height: 112px;
  grid-template-columns: 70px minmax(155px, .9fr) minmax(160px, 1fr) 80px 80px 30px;
  gap: 15px;
  padding: 17px 20px;
}
.dashboard-group[open] > summary { border-bottom: 1px solid rgba(17,45,80,.22); }
.dashboard-group-glyph {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  background: rgba(255,250,242,.6);
  border: 1px solid rgba(17,45,80,.15);
  border-radius: 48% 52% 47% 53%;
  font: 1.95rem/1 var(--jp-serif);
  transform: rotate(-2deg);
}
.dashboard-group-title,
.dashboard-deck-title { display: grid; min-width: 0; gap: 5px; }
.dashboard-group-title > strong { font: 800 1.35rem/1 var(--serif); }
.dashboard-group-title small,
.dashboard-deck-title small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-group-progress { display: grid; gap: 8px; }
.dashboard-group-progress > span {
  height: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,45,80,.15);
  border-radius: 9px 4px 8px 5px;
}
.dashboard-group-progress b { display: block; height: 100%; background: var(--group-accent); border-radius: inherit; }
.dashboard-group-progress small { color: var(--muted); font-size: .65rem; }
.dashboard-group-stat,
.dashboard-deck-stat { display: grid; justify-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.dashboard-group-stat strong,
.dashboard-deck-stat strong { font: 800 1.05rem/1 var(--serif); }
.dashboard-group-stat small,
.dashboard-deck-stat small { color: var(--muted); font-size: .57rem; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-chevron { font-size: 1.25rem; transition: transform 160ms ease; }
details[open] > summary .dashboard-chevron { transform: rotate(180deg); }

.dashboard-decks { padding: 9px; background: rgba(255,250,242,.62); }
.dashboard-deck {
  margin: 6px 0;
  background: rgba(255,253,248,.78);
  border: 7px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 5px / 0 stretch;
}
.dashboard-deck > summary {
  min-height: 75px;
  grid-template-columns: 46px minmax(155px, 1fr) 72px 72px 72px 25px;
  gap: 10px;
  padding: 10px 14px;
}
.dashboard-deck[open] > summary { border-bottom: 1px solid rgba(17,45,80,.14); }
.dashboard-deck-icon { font: 1.55rem/1 var(--jp-serif); text-align: center; }
.dashboard-deck-title > strong { overflow: hidden; font: 800 .88rem/1.2 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-card-list { padding: 8px; background: rgba(17,45,80,.025); }
.dashboard-card-row {
  display: grid;
  min-height: 76px;
  grid-template-columns: 58px minmax(170px, 1fr) minmax(120px, .55fr) 76px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(17,45,80,.12);
}
.dashboard-card-row:last-child { border-bottom: 0; }
.dashboard-card-face { overflow: hidden; font: 1.55rem/1 var(--jp-serif); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-card-name,
.dashboard-card-latest,
.dashboard-card-score { display: grid; gap: 4px; }
.dashboard-card-name > strong { font: 800 .78rem/1 var(--serif); }
.dashboard-card-name span,
.dashboard-card-name small,
.dashboard-card-latest span,
.dashboard-card-latest small,
.dashboard-card-score span,
.dashboard-card-score small { color: var(--muted); font-size: .6rem; line-height: 1.3; }
.dashboard-card-score { justify-items: center; text-align: center; }
.dashboard-card-score > strong { font: 800 1.4rem/1 var(--serif); }
.dashboard-card-score span { text-transform: uppercase; letter-spacing: .06em; }

.dashboard-accuracy {
  padding: 23px 18px 20px;
  background: rgba(255,250,242,.84);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  transform: rotate(.05deg);
}
.dashboard-accuracy .dashboard-section-heading { margin-inline: 2px; }
.dashboard-accuracy .dashboard-section-heading h3 { font-size: 1.5rem; }
.dashboard-accuracy-rows { display: grid; gap: 15px; margin-top: 24px; }
.dashboard-accuracy-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 9px;
}
.dashboard-accuracy-row > span { font: 800 .72rem/1.2 var(--serif); }
.dashboard-accuracy-row > i { height: 8px; overflow: hidden; background: rgba(17,45,80,.1); border-radius: 7px 4px 8px 5px; }
.dashboard-accuracy-row > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), #176955); }
.dashboard-accuracy-row > strong { font: 800 .8rem/1 var(--serif); text-align: right; }
.dashboard-accuracy-row > small { grid-column: 2 / 4; margin-top: -5px; color: var(--muted); font-size: .58rem; }
.dashboard-muted { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }

.dashboard-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  padding: 34px;
  text-align: center;
  background: rgba(246,206,201,.45);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
}
.dashboard-empty > span { font: 3rem/1 var(--jp-serif); }
.dashboard-empty h3 { margin: 12px 0 6px; font: 800 1.7rem/1 var(--serif); }
.dashboard-empty p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.55; }
.dashboard-empty button {
  margin-top: 22px;
  padding: 12px 18px;
  color: var(--ink);
  background: rgba(255,250,242,.82);
  border: 7px solid transparent;
  border-image: var(--ink-frame-coral) 72 82 / 6px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  font: 800 .86rem/1 var(--serif);
}
.dashboard-empty button:hover { color: var(--coral-dark); background: #fffaf2; }

.dashboard-group summary:focus-visible,
.dashboard-deck summary:focus-visible,
.profile-guest:focus-visible,
.dashboard-empty button:focus-visible { outline: 3px solid rgba(237,85,77,.38); outline-offset: 3px; }

@media (max-width: 1120px) {
  .dashboard-metrics { grid-template-columns: repeat(3, 1fr); }
  .dashboard-metric.is-memory { grid-column: span 1; }
  .dashboard-content { grid-template-columns: 1fr; }
  .dashboard-accuracy { order: -1; }
  .dashboard-accuracy-rows { grid-template-columns: repeat(2, 1fr); }
  .dashboard-group > summary { grid-template-columns: 62px minmax(150px, 1fr) minmax(150px, 1fr) 70px 30px; }
  .dashboard-group-stat:nth-of-type(2) { display: none; }
}

@media (max-height: 760px) {
  .profile-gate { place-items: start center; padding-block: 10px; }
  .profile-panel { min-height: calc(100dvh - 20px); padding-block: 24px; }
  .profile-brand { height: 78px; }
  .profile-login { margin-top: 20px; }
  .profile-form-copy { margin-bottom: 42px; }
  .profile-field { margin-top: 11px; }
  .profile-login input,
  .profile-login input:focus { height: 54px; }
  .profile-login .profile-submit { min-height: 58px; margin-top: 18px; }
  .profile-login .profile-submit span { width: 37px; height: 37px; }
  .profile-login .profile-feedback { margin-top: 4px; }
  .profile-or { margin-block: 7px; }
  .profile-guest { min-height: 44px; }
}

@media (max-width: 880px) {
  .profile-gate { place-items: start center; padding: 10px; }
  .profile-panel {
    width: min(calc(100vw - 20px), 660px);
    min-height: 0;
    overflow: hidden;
    padding: 28px clamp(20px, 7vw, 46px) 30px;
  }
  .profile-story {
    z-index: 1;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }
  .profile-brand { width: 295px; height: 84px; }
  .profile-landscape {
    display: block;
    inset: 66px -260px -28px -250px;
    opacity: .46;
  }
  .profile-road-scene.is-wide {
    width: auto;
    height: 92%;
    inset: auto auto 0 66%;
    transform: translateX(-66%);
  }
  .profile-login { z-index: 1; max-width: none; margin-top: 28px; padding: 0; }
  .profile-form-copy { margin-bottom: clamp(28px, 5vh, 50px); }
}

@media (max-width: 760px) {
  .learning-nav-divider { display: none; }
  .learning-nav .learning-nav-divider + button { padding-left: 12px; }
  body.dashboard-home .shell { width: min(calc(100% - 18px), 1500px); }
  .dashboard-intro { min-height: 0; grid-template-columns: 1fr; gap: 25px; padding: 28px 10px 24px; }
  .dashboard-intro h2 { font-size: clamp(2.65rem, 13vw, 4.1rem); }
  .dashboard-proverb { display: none; }
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .dashboard-metric { min-height: 138px; padding: 16px 13px; }
  .dashboard-metric h3 { margin-bottom: 18px; font-size: .78rem; }
  .dashboard-metric > strong { font-size: 2.1rem; }
  .dashboard-metric.is-memory { grid-column: 1 / -1; min-height: 145px; padding-left: 128px; }
  .dashboard-metric.is-memory::before { top: 47px; }
  .dashboard-metric.is-memory::after { top: 58px; }
  .dashboard-accuracy-rows { grid-template-columns: 1fr; }
  .dashboard-section-heading { align-items: start; }
  .dashboard-group > summary {
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr) 26px;
    gap: 10px;
    padding: 13px 12px;
  }
  .dashboard-group-glyph { width: 44px; height: 44px; font-size: 1.5rem; }
  .dashboard-group-progress { grid-column: 2; }
  .dashboard-group-stat { display: none; }
  .dashboard-chevron { grid-column: 3; grid-row: 1 / 3; }
  .dashboard-deck > summary { grid-template-columns: 38px minmax(0,1fr) 58px 24px; padding: 9px; }
  .dashboard-deck-stat:nth-of-type(2),
  .dashboard-deck-stat:nth-of-type(3) { display: none; }
  .dashboard-card-row { grid-template-columns: 43px minmax(0,1fr) 62px; gap: 8px; padding: 9px 6px; }
  .dashboard-card-latest { display: none; }
  .dashboard-card-face { font-size: 1.3rem; }
  .dashboard-card-name small { display: none; }
}

@media (max-width: 470px) {
  .dashboard-metrics { grid-template-columns: 1fr 1fr; }
  .dashboard-metric:nth-child(5) { grid-column: 1 / -1; }
  .dashboard-metric p { font-size: .63rem; }
  .dashboard-section-heading > span { display: none; }
}

@media (max-width: 880px) {
  .profile-gate { place-items: start stretch; padding: 0; }
  .profile-panel {
    width: 100%;
    min-height: 100dvh;
    padding-inline: 22px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.profile-locked .profile-panel { border-radius: 0; }
  .profile-landscape {
    inset: 0 -135px -30px;
    opacity: .8;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.35) 12%, rgba(0,0,0,.65) 28%, rgba(0,0,0,.9) 44%, #000 55%, #000 95%, transparent);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.35) 12%, rgba(0,0,0,.65) 28%, rgba(0,0,0,.9) 44%, #000 55%, #000 95%, transparent);
  }
  .profile-road-scene.is-wide { display: none; }
  .profile-road-scene.is-mobile {
    display: block;
    width: auto;
    height: calc(160% - 211.2px);
    inset: auto clamp(40px, 8vw, 68px) 60px auto;
    transform: none;
  }
  .profile-brand { width: min(281px, calc(100vw - 64px)); height: auto; aspect-ratio: 281 / 80; }
  .profile-form-copy { margin: 0 0 4px 14px; }
  .profile-form-copy .profile-tagline {
    width: auto;
    height: auto;
    overflow: visible;
    color: var(--ink);
    background: none;
    font: 700 clamp(.65rem, 3.2vw, .82rem)/1.15 "Josefin Sans", var(--ui);
    letter-spacing: .155em;
    text-indent: 0;
    text-shadow: none;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .profile-tagline span:first-child,
  .profile-tagline-accent {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
  .profile-form-copy + .profile-field { margin-top: 4px; }
  .profile-login { margin-top: 0; }
  .profile-login label { text-shadow: 0 0 3px #fffaf2, 0 0 8px #fffaf2, 0 0 14px #fffaf2; }
  .profile-field { margin-top: 14px; }
  .profile-login input,
  .profile-login input:focus { height: 56px; }
  .profile-login .profile-submit { padding-left: 18px; font-size: 1rem; }
}

@media (max-width: 360px) {
  .profile-login .profile-submit { padding-left: 14px; font-size: .9rem; }
}

/* ImageGen paper textures give controls the same tactile printed surface as
   the login concept. Functional game controls keep their high-contrast HUD. */
.profile-login .profile-submit,
body:not(.is-playing) .learning-continue,
body:not(.is-playing) .deck-launch-start,
body:not(.is-playing) .dashboard-empty button {
  background-image: linear-gradient(rgba(255,250,242,.14), rgba(255,250,242,.14)), var(--button-texture-coral);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-nav button,
body:not(.is-playing) .learning-pager button,
body:not(.is-playing) .card-list-pager .text-button,
body:not(.is-playing) .active-profile,
body:not(.is-playing) .path-app-back,
body:not(.is-playing) .path-app-close {
  background-image: linear-gradient(rgba(255,250,242,.42), rgba(255,250,242,.42)), var(--button-texture-powder);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-nav button[aria-current="page"],
body:not(.is-playing) .menu-head .text-button,
body:not(.is-playing) .menu-tab.is-current {
  background-image: linear-gradient(rgba(255,250,242,.42), rgba(255,250,242,.42)), var(--button-texture-coral);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-tracks button,
body:not(.is-playing) .menu-tab,
body:not(.is-playing) .deck-launch-clear {
  background-image: linear-gradient(rgba(255,250,242,.34), rgba(255,250,242,.34)), var(--button-texture-gold);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-tracks button[aria-pressed="true"],
body:not(.is-playing) .deck-option.is-picked {
  background-image: linear-gradient(rgba(255,250,242,.2), rgba(255,250,242,.2)), var(--button-texture-mint);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+1),
body:not(.is-playing) .learning-trail > li:nth-child(4n+1) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+1) {
  background-image: linear-gradient(rgba(255,250,242,.42), rgba(255,250,242,.42)), var(--button-texture-coral);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+2),
body:not(.is-playing) .learning-trail > li:nth-child(4n+2) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+2) {
  background-image: linear-gradient(rgba(255,250,242,.2), rgba(255,250,242,.2)), var(--button-texture-mint);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+3),
body:not(.is-playing) .learning-trail > li:nth-child(4n+3) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+3) {
  background-image: linear-gradient(rgba(255,250,242,.66), rgba(255,250,242,.66)), var(--button-texture-indigo);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+4),
body:not(.is-playing) .learning-trail > li:nth-child(4n+4) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+4) {
  background-image: linear-gradient(rgba(255,250,242,.24), rgba(255,250,242,.24)), var(--button-texture-gold);
  background-position: center;
  background-size: cover;
}

/* The five top-level learning choices carry the full palette. They are the
   colourful focal point; the controls and deeper lists above stay quieter. */
body.learning-home .learning-area-card:nth-child(1) { background-image: var(--button-texture-coral); }
body.learning-home .learning-area-card:nth-child(2) { background-image: var(--button-texture-mint); }
body.learning-home .learning-area-card:nth-child(3) {
  background-image: linear-gradient(rgba(255,250,242,.48), rgba(255,250,242,.48)), var(--button-texture-indigo);
}
body.learning-home .learning-area-card:nth-child(4) { background-image: var(--button-texture-gold); }
body.learning-home .learning-area-card:nth-child(5) { background-image: var(--button-texture-lavender); }

/* ImageGen dashboard study (assets/design-mockups/dashboard-imagegen-v2.png):
   ink icons on the stat cards, a watercolour empty state, placeholder rows in
   the accuracy panel, and a closing proverb. */
.dashboard-metric h3 { display: flex; align-items: center; gap: 9px; }
.dashboard-icon { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-metric.is-memory .dashboard-icon { stroke: var(--coral-dark); }
.dashboard-empty {
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  place-items: center start;
  gap: 18px 26px;
  text-align: left;
}
.dashboard-empty-art { position: relative; width: 170px; height: 170px; }
.dashboard-empty-art span {
  position: absolute;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  color: var(--ink);
  font: 700 2.3rem/1 "Sumi Mincho", var(--jp-serif);
  border-radius: 46% 54% 51% 49% / 55% 46% 54% 45%;
}
.dashboard-empty-art .is-blush { top: 0; left: 6px; background: radial-gradient(circle at 45% 40%, rgba(246, 206, 201, .95), rgba(246, 206, 201, .35) 70%, transparent 72%); }
.dashboard-empty-art .is-mint { bottom: 0; left: 0; background: radial-gradient(circle at 50% 45%, rgba(204, 231, 216, .95), rgba(204, 231, 216, .35) 70%, transparent 72%); }
.dashboard-empty-art .is-indigo { top: 14px; right: 0; background: radial-gradient(circle at 50% 50%, rgba(201, 220, 245, .95), rgba(201, 220, 245, .35) 70%, transparent 72%); }
.dashboard-empty-art .is-cream { bottom: 6px; right: 12px; background: radial-gradient(circle at 50% 50%, rgba(248, 235, 203, .95), rgba(248, 235, 203, .35) 70%, transparent 72%); }
.dashboard-empty-copy h3 { margin-top: 0; }
.dashboard-empty button { color: #fff8ef; background: var(--coral); border: 1.5px solid var(--coral-dark); border-image: none; border-radius: 10px; box-shadow: 0 4px 0 rgba(206, 65, 60, .25); }
.dashboard-empty button:hover { color: #fff8ef; background: var(--coral-dark); }
.dashboard-accuracy-placeholder { display: grid; grid-template-columns: minmax(90px, auto) minmax(80px, 1fr) 42px; align-items: center; gap: 9px; opacity: .7; }
.dashboard-accuracy-placeholder > span { font: 800 .72rem/1.2 var(--serif); }
.dashboard-accuracy-placeholder > i { height: 8px; background: rgba(17, 45, 80, .1); border-radius: 7px 4px 8px 5px; }
.dashboard-accuracy-placeholder > strong { color: var(--muted); font: 800 .8rem/1 var(--serif); text-align: right; }
.dashboard-closing { display: grid; justify-items: center; gap: 3px; margin: 34px 0 10px; text-align: center; }
.dashboard-closing strong { color: var(--ink); font: 700 1.5rem/1.2 "Sumi Mincho", var(--jp-serif); letter-spacing: .08em; }
.dashboard-closing strong::after { content: ""; display: block; width: 52px; height: 3px; margin: 6px auto 0; border-radius: 2px 5px 3px 6px; background: var(--coral); opacity: .8; }
.dashboard-closing em { color: var(--muted); font-family: var(--serif); }
@media (max-width: 640px) {
  .dashboard-empty { grid-template-columns: 1fr; place-items: center; text-align: center; }
}
/* The ink sun over Fuji behind the proverb, from the same painting the
   learning path uses. */
.dashboard-intro::before {
  right: -20px;
  bottom: -18px;
  width: min(520px, 46%);
  height: 118%;
  background: url("assets/ui/dashboard-fuji-v1.webp") right bottom / contain no-repeat;
  opacity: .9;
}
.dashboard-proverb { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .dashboard-intro::before { display: none; }
}

/* Games in the site's hand ----------------------------------------------------
   The games' panels take the same slightly uneven ink frame as the dashboard
   and the learning paths, and their buttons the same watercolour paper as the
   site's own: coral for the one thing to do next, mint for "had it", gold for
   "nearly", indigo for the second choice. Kept here, beside the textures, so
   the site and its games are drawn from one set of materials. */
body.is-playing .flash-card,
body.is-playing.is-flashcard .flash-card,
body.is-playing.is-flashcard .flash-card.is-turned,
body.is-playing .grid-card,
body.is-playing .snap-table,
body.is-playing #maze-canvas,
body.is-wordmaze.is-engaged.is-clue .maze-clue,
body.is-playing:not(.is-shooter) .card-face,
body.is-playing:not(.is-shooter) .answer-form,
body.is-playing:not(.is-shooter) .hud,
.completion-popup,
.game-options,
.rescue-intro,
.rescue-result {
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
}
body.is-playing .grid-card:focus-within,
body.is-playing .snap-pile.is-fresh .snap-card { border-image-source: var(--ink-frame-coral); }
body.is-playing .grid-card:focus-within { box-shadow: 0 10px 24px rgba(31, 44, 55, .12); }
/* A painted frame has no corners to round, so shadows go soft and square. */
body.is-playing .flash-card,
body.is-playing .snap-table { box-shadow: 0 18px 38px rgba(31, 44, 55, .12); }

/* The next thing to do: coral paper. */
body.is-playing :is(.flash-turn, .flash-deal, .snap-call, .grid-finish:hover, .maze-clue-check, .maze-clue-back, .game-handwriting-check),
.game-options button[type=submit],
.rescue-intro [data-rescue=start]:not(:disabled),
.rescue-result [data-rescue=restart] {
  color: #3a1110 !important;
  background-image: linear-gradient(rgba(255,250,242,.16), rgba(255,250,242,.16)), var(--button-texture-coral) !important;
  background-position: center !important;
  background-size: cover !important;
  border: 7px solid transparent !important;
  border-image: var(--ink-frame-coral) 72 82 / 6px / 1px stretch !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 14px rgba(206, 65, 60, .18) !important;
  text-shadow: none;
}
/* The verdicts: mint, gold and coral, lightest to heaviest. */
body.is-playing.is-flashcard .flash-mark {
  border: 7px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 6px / 1px stretch;
  border-radius: 0;
  background-position: center;
  background-size: cover;
  box-shadow: 0 6px 14px rgba(31, 44, 55, .12);
}
body.is-playing.is-flashcard .flash-mark.is-had { color: #12302a; background-image: linear-gradient(rgba(255,250,242,.12), rgba(255,250,242,.12)), var(--button-texture-mint); }
body.is-playing.is-flashcard .flash-mark.is-nearly { color: #3b2a07; background-image: linear-gradient(rgba(255,250,242,.12), rgba(255,250,242,.12)), var(--button-texture-gold); }
body.is-playing.is-flashcard .flash-mark.is-missed { color: #3a1110; background-image: linear-gradient(rgba(255,250,242,.1), rgba(255,250,242,.1)), var(--button-texture-coral); }
/* The second choice: indigo paper. */
body.is-playing .snap-deal {
  color: #0e2440 !important;
  background-image: linear-gradient(rgba(255,250,242,.4), rgba(255,250,242,.4)), var(--button-texture-indigo) !important;
  background-position: center !important;
  background-size: cover !important;
  border: 7px solid transparent !important;
  border-image: var(--ink-frame-navy) 72 82 / 6px / 1px stretch !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 14px rgba(31, 44, 55, .14) !important;
}
body.is-playing :is(.snap-call, .snap-deal)::after { display: none; }
/* Quiet controls: powder paper, as on the site's navigation. */
body.is-playing :is(.grid-finish, .maze-clue-actions .maze-clue-hint-button, .maze-clue-sound, .flash-listen, .flash-peek),
.game-options button[data-options=cancel],
.rescue-intro-more button {
  background-image: linear-gradient(rgba(255,250,242,.5), rgba(255,250,242,.5)), var(--button-texture-powder);
  background-position: center;
  background-size: cover;
}