/* ============================================================
   Nihongo Quest — a practice notebook for Japanese.
   Paper: washi. Ink: sumi. Seal: shu vermilion. Accent: ai indigo.

   Colour rules, from Hanzi Quest: completion always reads green; red is
   only the seal and "today's target", never a tick and never a miss. A miss
   is amber — it's something to look at, not an alarm.
   ============================================================ */

:root {
  --paper:     #F3F0E8;
  --sheet:     #FBFAF6;
  --sunken:    #E8E4D9;
  --ink:       #1E1D1A;
  --ink-2:     #4E4B44;
  --ink-3:     #858074;
  --rule:      #D6D0C2;
  --rule-2:    #E6E1D5;
  --seal:      #C2402F;
  --seal-wash: rgba(194, 64, 47, .09);
  --ai:        #2F4B7C;
  --ai-wash:   rgba(47, 75, 124, .09);
  --jade:      #3D7A57;
  --jade-wash: rgba(61, 122, 87, .13);
  --amber:     #A86A12;
  --amber-wash:rgba(168, 106, 18, .13);
  /* the three scripts, wherever they're told apart: hiragana is indigo,
     katakana plum, kanji ink — none of them green, amber or seal red */
  --c-hira:    #2F4B7C;
  --c-kata:    #86457A;
  --c-kanji:   #1E1D1A;
  --blush:     #F2A6A0;
  --gold:      #BF8F2E;
  --gold-soft: #F3E3BD;
  --petal:     #F6C1CC;
  /* the sections' groups, in the tab row and the phone's wheel (app.js
     NAV_GROUPS) — kept off green, amber and seal red, which mean things */
  --g-study:   #2F4B7C;
  --g-practise:#2A7472;
  --g-play:    #A87B22;
  --g-out:     #9A4870;
  --g-you:     #6B675E;
  --shadow:    0 1px 2px rgba(30, 29, 26, .06), 0 6px 18px rgba(30, 29, 26, .05);
  --shadow-lift: 0 2px 4px rgba(30, 29, 26, .08), 0 14px 34px rgba(30, 29, 26, .12);

  --f-display: "Newsreader", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ja: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --f-ja-serif: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif;

  --r: 12px;
  --col: 44rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151513; --sheet: #1F1E1B; --sunken: #0F0F0D;
    --ink: #ECE8DF; --ink-2: #B4AEA2; --ink-3: #7F796E;
    --rule: #37342E; --rule-2: #2A2824;
    --seal: #E26A56; --seal-wash: rgba(226, 106, 86, .13);
    --ai: #8CA7DA; --ai-wash: rgba(140, 167, 218, .12);
    --jade: #6CC195; --jade-wash: rgba(108, 193, 149, .14);
    --amber: #E0A646; --amber-wash: rgba(224, 166, 70, .14);
    --c-hira: #8CA7DA; --c-kata: #D38CC4; --c-kanji: #ECE8DF; --blush: #D9807A; --petal: #E7A2B3; --gold: #DDB45E; --gold-soft: #4A3C1E;
    --g-study: #8CA7DA; --g-practise: #6CC0BC; --g-play: #DDB45E; --g-out: #DA8DB4; --g-you: #B4AEA2;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151513; --sheet: #1F1E1B; --sunken: #0F0F0D;
  --ink: #ECE8DF; --ink-2: #B4AEA2; --ink-3: #7F796E;
  --rule: #37342E; --rule-2: #2A2824;
  --seal: #E26A56; --seal-wash: rgba(226, 106, 86, .13);
  --ai: #8CA7DA; --ai-wash: rgba(140, 167, 218, .12);
  --jade: #6CC195; --jade-wash: rgba(108, 193, 149, .14);
  --amber: #E0A646; --amber-wash: rgba(224, 166, 70, .14);
  --c-hira: #8CA7DA; --c-kata: #D38CC4; --c-kanji: #ECE8DF; --blush: #D9807A; --petal: #E7A2B3; --gold: #DDB45E; --gold-soft: #4A3C1E;
  --g-study: #8CA7DA; --g-practise: #6CC0BC; --g-play: #DDB45E; --g-out: #DA8DB4; --g-you: #B4AEA2;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* The painted places (a shopfront, the sushi door and counter, the station,
   the konbini, the stalls) are pictures with their own light, the same by
   day or night: inside them, ink and paper keep their light-theme values,
   so a word on a pale wall never turns pale itself. What's in your hands
   beside them follows the theme as usual. */
.kb-store, .ws-street-door, .ws-entry-scene, .sn-station {
  --paper: #F3F0E8; --sheet: #FBFAF6; --sunken: #E8E4D9;
  --ink: #1E1D1A; --ink-2: #4E4B44; --ink-3: #858074;
  --rule: #D6D0C2; --rule-2: #E6E1D5;
  --seal: #C2402F; --seal-wash: rgba(194, 64, 47, .09);
  --ai: #2F4B7C; --ai-wash: rgba(47, 75, 124, .09);
  --jade: #3D7A57; --jade-wash: rgba(61, 122, 87, .13);
  --amber: #A86A12; --amber-wash: rgba(168, 106, 18, .13);
  --c-hira: #2F4B7C; --c-kata: #86457A; --c-kanji: #1E1D1A;
  --blush: #F2A6A0; --gold: #BF8F2E; --gold-soft: #F3E3BD; --petal: #F6C1CC;
  --shadow: 0 1px 2px rgba(30, 29, 26, .06), 0 6px 18px rgba(30, 29, 26, .05);
  --shadow-lift: 0 2px 4px rgba(30, 29, 26, .08), 0 14px 34px rgba(30, 29, 26, .12);
  color-scheme: light; color: var(--ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
[lang="ja"] { font-family: var(--f-ja); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
code { font-size: .9em; background: var(--sunken); padding: 1px 5px; border-radius: 4px; }
kbd {
  font: 500 .72em var(--f-body); border: 1px solid currentColor; border-radius: 4px;
  padding: 0 4px; opacity: .55; margin-left: .35em; vertical-align: 1px;
}
textarea, input[type="text"], select, .sp-input {
  font: inherit; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; width: 100%;
}
select { width: auto; }

.muted { color: var(--ink-3); }
.small { font-size: .86rem; }
.warn { color: var(--amber); }
.lede { color: var(--ink-2); font-size: 1.02rem; }
.eyebrow { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .35rem; font-weight: 500; }
.rom { display: block; font-size: .78rem; color: var(--ink-3); }
.rom-always { color: var(--ink-3); font-size: .9em; }
.link { color: var(--ai); font-size: .9rem; font-weight: 500; }
.link:hover { text-decoration: underline; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 6px 0; border-top: 1px solid var(--rule-2); font-size: .9rem; }
ul.plain li:first-child { border-top: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  background: var(--ink); color: var(--paper); border-radius: 999px;
  padding: 10px 20px; font-weight: 500; transition: transform .08s, background .15s;
  position: relative; overflow: hidden;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .35; }
.btn-lg { padding: 13px 26px; font-size: 1.02rem; margin-top: .4rem; }
.btn-sm { padding: 7px 14px; font-size: .88rem; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink-3); }
.btn.danger, .btn-ghost.danger { color: var(--seal); border-color: var(--seal-wash); }
.btn.danger-fill { background: var(--seal); color: #fff; }
/* the auto-advance countdown, drawn across the Next button */
.btn.counting::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; background: var(--jade);
  animation: adv var(--adv, 1100ms) linear forwards;
}
@keyframes adv { from { width: 0; } to { width: 100%; } }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; position: relative; }
.icon-btn:hover { background: var(--sunken); }

/* ---------- drawings: icons, the cat, the hanamaru, stamps, petals ---------- */

.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; flex: none; }
.icon-btn .ico { width: 20px; height: 20px; }
.play .ico { width: 42%; height: 42%; stroke-width: 1.5; }
.v-ico { stroke-width: 2.4; }
.task .tick .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.task.locked .tick .ico { width: 16px; height: 16px; stroke-width: 1.7; color: var(--ink-3); }
.check-days .ico { width: 18px; height: 18px; stroke-width: 2.6; }

.neko { width: 88px; height: 88px; overflow: visible; }
.neko .nk-body { fill: var(--sheet); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.neko .nk-ear { fill: var(--blush); opacity: .75; }
.neko .nk-line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.neko .nk-ink { fill: var(--ink); }
.neko .nk-shine { fill: var(--sheet); }
.neko .nk-cheek { fill: var(--blush); opacity: .7; }
.neko .nk-whisk { stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
.neko .nk-spark { stroke: var(--gold, #C9A13B); stroke: #D9A93E; stroke-width: 2.4; stroke-linecap: round; }
.neko .nk-band { fill: var(--seal); }
.neko .nk-z { font: 700 13px var(--f-body); fill: var(--ink-3); }
.neko .nk-z.small { font-size: 9px; }
.neko .nk-dot { fill: var(--ink-3); }
.neko.bob { animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.neko.hop { animation: hop .9s cubic-bezier(.3,1.6,.5,1) 1; transform-origin: 50% 100%; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes hop { 0% { transform: translateY(12px) scale(.9, 1.08); } 40% { transform: translateY(-14px) scale(1.02); } 100% { transform: none; } }

.hanamaru { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; z-index: -1; }
.hanamaru path { fill: none; stroke: var(--seal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.5s .25s cubic-bezier(.5,.1,.3,1) forwards; opacity: .9; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.score-wrap { position: relative; display: inline-block; margin: 2.8rem auto 2.4rem; padding: 0 .3em; z-index: 0; isolation: isolate; }

.stamp {
  display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  border: 3.5px double var(--seal); color: var(--seal); font: 700 1.7rem/1 var(--f-ja-serif);
  transform: rotate(-12deg); opacity: .9; animation: thunk .45s .5s cubic-bezier(.2,1.8,.4,1) both;
  box-shadow: inset 0 0 0 2px var(--seal-wash);
}
.stamp span { writing-mode: horizontal-tb; letter-spacing: .02em; }
.stamp.stamp-long { width: 104px; height: 104px; font-size: 1rem; border-radius: 16px; }
.stamp.stamp-long span { writing-mode: vertical-rl; line-height: 1.15; }
@keyframes thunk { from { transform: scale(2.2) rotate(-4deg); opacity: 0; } 70% { opacity: .95; } to { transform: scale(1) rotate(-12deg); opacity: .9; } }

.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.petals i {
  position: absolute; top: -20px; left: var(--x); width: 12px; height: 9px; background: var(--petal);
  border-radius: 150% 0 150% 0; opacity: .9; transform: scale(var(--s));
  animation: fall var(--t) var(--d) linear forwards;
}
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0) scale(var(--s)); opacity: 0; }
  10% { opacity: .95; }
  100% { transform: translate(var(--drift), 105vh) rotate(540deg) scale(var(--s)); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .hanamaru path, .stamp, .neko.bob, .neko.hop { animation: none; stroke-dashoffset: 0; }
}

/* the finish screens */
.celebrate { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: .4rem 0 .6rem; min-height: 100px; }
.celebrate .neko { width: 104px; height: 104px; }
.finish .finish-big { margin: 0; }

/* ---------- the frame ---------- */

.app { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem;
  padding: 10px max(16px, calc((100vw - 72rem) / 2)); background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-2);
}
.brand { display: flex; align-items: center; gap: .55rem; }
.brand-seal {
  width: 30px; height: 30px; border-radius: 6px; background: var(--seal); color: #fff;
  display: grid; place-items: center; font: 700 20px/1 var(--f-ja-serif);
}
.brand-name { font: 600 1.12rem var(--f-display); }
.top-nav { display: flex; gap: .2rem; margin-left: 1rem; }
.top-nav button { padding: 6px 12px; border-radius: 999px; color: var(--ink-2); font-size: .92rem; }
.top-nav button:hover { background: var(--sunken); }
.top-nav button.on { background: var(--ink); color: var(--paper); }
.top-nav .nz { font-size: .85em; margin-right: .2em; color: var(--g); }
[data-g="study"] { --g: var(--g-study); } [data-g="practise"] { --g: var(--g-practise); } [data-g="play"] { --g: var(--g-play); }
[data-g="out"] { --g: var(--g-out); } [data-g="you"] { --g: var(--g-you); }
.top-nav button:hover { background: color-mix(in srgb, var(--g) 12%, transparent); }
.top-nav button.on { background: var(--g); color: var(--paper); }
.top-nav button.on .nz { color: inherit; opacity: .8; }
.top-nav button.g-first:not(:first-child) { margin-left: .5rem; }
/* nine sections fit on one line from here; narrower, each label stacks */
/* Nine sections fit on one line each from 1300px. Narrower, each label
   stacks (the Japanese over the English), the padding tightens, "Out &
   about" is just "Out" (as in the phone's drawer), and below 1000px the
   wordmark gives way to its seal. */
@media (min-width: 1300px) { .top-nav button { white-space: nowrap; } .brand-name { white-space: nowrap; } }
@media (max-width: 1299px) { .top-nav { gap: 0; margin-left: .5rem; } .top-nav button { padding: 5px 9px; } .top-nav .nav-more { display: none; } }
@media (max-width: 999px) and (min-width: 721px) { .brand-name { display: none; } }
.top-actions { margin-left: auto; display: flex; gap: .2rem; }
#saveBtn.nudge::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--amber);
}

main { max-width: 72rem; margin: 0 auto; padding: 20px 16px; }
.view { display: none; }
.view.on { display: block; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

/* Phone-only pieces: nothing on a desktop. The phone layer at the end of
   this file is the only thing that shows them. */
.burger, .drawer, .sheet-done, .m-title { display: none; }

.card {
  background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.count { color: var(--ink-3); font-size: .84rem; }
.banner { background: var(--ai-wash); border-color: transparent; box-shadow: none; }

/* ---------- Today ---------- */

.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 16px; align-items: start; }
.hero { padding: 24px 26px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--seal);
}
.hero.done::before { background: var(--jade); }
.hero.check::before { background: var(--ai); }
.hero.review::before { background: var(--amber); }
.hero.review .eyebrow { color: var(--amber); }
.hero.review .btn-ghost { margin-left: 8px; }
.hero-row { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.hero-seal {
  width: 64px; height: 64px; border-radius: 12px; border: 2px solid var(--seal); color: var(--seal);
  display: grid; place-items: center; font: 700 38px var(--f-ja-serif); margin-bottom: 1rem;
}
.hero-ring { position: relative; flex: none; width: 64px; height: 64px; }
.hero-ring span {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem; line-height: 1.05;
}
.hero-ring small { font-size: .62rem; color: var(--ink-3); font-weight: 400; }
.ring-bg { fill: none; stroke: var(--rule-2); }
.ring-fg { fill: none; stroke: var(--jade); stroke-linecap: round; transition: stroke-dashoffset .5s; }

.check-days { display: flex; gap: .5rem; margin: .6rem 0 1rem; }
.check-days span {
  width: 38px; height: 38px; border-radius: 50%; border: 2px dashed var(--rule); display: grid; place-items: center;
  color: var(--ink-3); font-weight: 600;
}
.check-days span.on { border: 2px solid var(--jade); background: var(--jade-wash); color: var(--jade); }

.tasks { list-style: none; margin: 0; padding: 0; }
.task {
  width: 100%; display: grid; grid-template-columns: 28px 3.2rem 1fr; align-items: center; gap: .6rem;
  text-align: left; padding: 10px 8px; border-radius: 8px; border-top: 1px solid var(--rule-2);
}
.tasks li:first-child .task { border-top: 0; }
.task:hover:not(:disabled) { background: var(--sunken); }
.task .tick {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule); display: grid; place-items: center;
  font-size: .78rem; color: #fff;
}
.task.done .tick { background: var(--jade); border-color: var(--jade); }
.task.locked { opacity: .55; }
.task.locked .tick { border: 0; color: inherit; }
.task-jp { font-size: 1.05rem; color: var(--ink-2); }
.task-en { display: flex; flex-direction: column; font-weight: 500; }
.task-en small { color: var(--ink-3); font-weight: 400; font-size: .82rem; }
.task.done .task-en { color: var(--ink-2); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 8px; }
.tile {
  text-align: left; border: 1px solid var(--rule-2); border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: .4rem; background: var(--paper);
}
.tile:hover:not(:disabled) { border-color: var(--ink-3); box-shadow: var(--shadow); }
.tile:disabled { opacity: .5; }
.tile-top { display: flex; align-items: center; gap: .5rem; }
.tile-top > div { display: flex; flex-direction: column; line-height: 1.2; }
.tile-jp { font-size: 1.05rem; }
.tile-big { font-size: 1.35rem; width: 44px; text-align: center; }
.tile-en { font-size: .85rem; color: var(--ink-2); }
.tile small { color: var(--ink-3); font-size: .78rem; }

.spread { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--rule-2); }
.spread i { display: block; }
.spread .s3 { background: var(--jade); }
.spread .s2 { background: color-mix(in srgb, var(--jade) 62%, var(--rule-2)); }
.spread .s1 { background: color-mix(in srgb, var(--jade) 30%, var(--rule-2)); }
.spread .s0 { background: var(--rule-2); }

.prog-row { display: grid; grid-template-columns: 5.2rem 1fr 3.4rem; gap: .6rem; align-items: center; margin: .4rem 0; font-size: .9rem; }
.prog-row small { color: var(--ink-3); text-align: right; }
.bar { height: 6px; border-radius: 3px; background: var(--rule-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--jade); }

/* ---------- Today, compact ---------- */

/* one row for an ordinary day; a busy day (words and kanji) wraps rather than squeezing */
.tasks.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr)); gap: 8px; }
.tasks.grid .task-en { min-width: 0; font-size: .9rem; line-height: 1.3; }
.tasks.grid .task-en small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasks.grid .task {
  border: 1px solid var(--rule-2); border-top: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper);
  grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: .5rem; padding: 8px 10px; height: 100%;
}
.tasks.grid li:first-child .task { border-top: 1px solid var(--rule-2); }
.tasks.grid .task.done { background: var(--jade-wash); border-color: transparent; }
.tasks.grid .task:hover:not(:disabled) { border-color: var(--ink-3); background: var(--sheet); }
.tasks.grid .task.done:hover { background: var(--jade-wash); }

.tasks.grid .task .tick { grid-row: span 2; align-self: center; }
.tasks.grid .task-jp { font-size: .8rem; color: var(--ink-3); line-height: 1; }
.tile .ring { width: 36px; height: 36px; }

.prog { padding: 12px 16px; }
.prog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .2rem; }
.prog-head .eyebrow { margin: 0; }
.prog .prog-row { grid-template-columns: 4.4rem 1fr 3rem; margin: .25rem 0; font-size: .82rem; }
.prog .bar { height: 4px; }
.tiny { font-size: .76rem; margin: .3rem 0 0; }

.more { flex: none; width: 30px; display: grid; place-items: center; color: var(--ink-3); border-radius: 6px; }
.more:hover { background: var(--sunken); color: var(--ink); }
.empty { display: flex; gap: .8rem; align-items: center; }
.neko.mini { width: 56px; height: 56px; flex: none; }
.stamp.mini { width: 52px; height: 52px; font-size: 1.1rem; flex: none; animation-delay: .9s; }

.hero-first .hero-art { display: flex; align-items: flex-end; gap: .6rem; margin-bottom: .8rem; }
.hero-first .hero-seal { margin-bottom: 0; }
.hero .hero-neko { width: 72px; height: 72px; flex: none; }
.hero-row .hero-text { flex: 1; }
.hero .hero-corner { position: absolute; right: 16px; top: 14px; width: 64px; height: 64px; }
.hero.check h1, .hero.check .eyebrow { padding-right: 70px; }
.banner-done {
  display: flex; gap: .9rem; align-items: center; text-align: left; max-width: 30rem; margin: 1rem auto 0;
  background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow);
}

/* On a desktop screen Today fits without scrolling: the rail fills the
   height and its word list scrolls inside its own card. */
@media (min-width: 901px) and (min-height: 620px) {
  /* The rail is as tall as the main column and no taller: its content is
     taken out of the flow, so the row's height comes from the left, and the
     words list ends level with the last card there, scrolling inside. */
  #v-today.on .today-grid { align-items: stretch; }
  #v-today .col-rail { position: relative; min-height: 22rem; }
  #v-today .rail-in { position: absolute; inset: 0 0 12px; display: flex; flex-direction: column; }
  #v-today .col-rail .card { margin-bottom: 12px; }
  #v-today .deck { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
  #v-today .deck .wgrid { flex: 1; min-height: 0; overflow: auto; margin-right: -8px; padding-right: 6px; }
  #v-today .hero { padding: 18px 22px; }
  #v-today .hero h1 { font-size: 1.5rem; }
  #v-today .hero .lede { margin-bottom: .5rem; }
  #v-today .card { margin-bottom: 12px; }
}

/* Words you can read: small squarish tiles, three or so across, so the
   rail holds many at once instead of one long list. Tap says it; the
   corner › opens its card. */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 6px; align-content: start; }
.wtile { position: relative; }
.wt-say {
  width: 100%; min-height: 4.6rem; height: 100%; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px 6px; text-align: center;
}
.wt-say:hover { border-color: var(--ink-3); background: var(--sheet); }
.wt-jp { font-size: 1.05rem; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.wt-jp rt { font-size: .5em; }
.wt-en { font-size: .7rem; color: var(--ink-3); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wt-say .rom { font-size: .66rem; }
.wt-more {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  color: var(--ink-3); opacity: .6;
}
.wt-more .ico { width: 13px; height: 13px; }
.wt-more:hover { opacity: 1; background: var(--sunken); color: var(--ink); }

/* ---------- the kana chart ---------- */

.chart-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 14px; }
.seg { display: inline-flex; background: var(--sunken); border-radius: 999px; padding: 3px; flex-wrap: wrap; }
.seg button { padding: 6px 14px; border-radius: 999px; font-size: .9rem; color: var(--ink-2); }
.seg button.on { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.seg button:disabled { opacity: .35; }
.seg.seg-sm button { padding: 3px 10px; font-size: .8rem; }
.chart-sec h2 [lang="ja"] { color: var(--ink-3); font-size: .85em; margin-right: .3em; }
.chart-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0 16px; align-items: start; }
.kgrid { display: grid; gap: 6px; }
.kgrid.c5 { grid-template-columns: repeat(5, minmax(0, 4.6rem)); }
.kgrid.c3 { grid-template-columns: repeat(3, minmax(0, 5.6rem)); }
.kgrid.c5.labelled { grid-template-columns: 1.6rem repeat(5, minmax(0, 4.6rem)); }
.kgrid.c3.labelled { grid-template-columns: 1.6rem repeat(3, minmax(0, 5.6rem)); }
.kh { display: flex; align-items: center; justify-content: center; font: 600 .95rem var(--f-body); color: var(--ink-2); }
.kh-col { padding-bottom: 2px; }
.kh-row { justify-content: flex-end; padding-right: 4px; }
.kgrid.c4 { grid-template-columns: repeat(4, minmax(0, 5rem)); }
.kc {
  aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;
}
.kc.blank { border: 0; background: transparent; }
.kc.got { background: var(--sheet); border-color: var(--rule); }
.kc.not { color: var(--ink-3); opacity: .5; }
.kc:hover:not(.blank) { box-shadow: var(--shadow-lift); opacity: 1; }
.kg { font-size: 1.75rem; line-height: 1; font-family: var(--f-ja); }
.c3 .kg, .c4 .kg { font-size: 1.45rem; }
.kr { font-size: .7rem; color: var(--ink-3); margin-top: 3px; }
.dots { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 2px; background: var(--rule-2); }
.dots::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--jade); }
.dots.d0::after { width: 0; } .dots.d1::after { width: 33%; } .dots.d2::after { width: 66%; } .dots.d3::after { width: 100%; }
.legend .dots { position: relative; display: inline-block; bottom: auto; left: auto; transform: none; vertical-align: middle; }

/* ---------- Record ---------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--sheet); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; }
.stat b { font: 600 1.7rem var(--f-display); display: flex; align-items: center; gap: 4px; }
.stat span { color: var(--ink-3); font-size: .84rem; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0 16px; }
.sk-line { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: .6rem; align-items: center; margin: .5rem 0; font-size: .9rem; }
.sk-line small { color: var(--ink-3); text-align: right; }
.cal { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; }
.cal i { border-radius: 3px; background: var(--rule-2); }
.cal i.l1 { background: color-mix(in srgb, var(--jade) 35%, var(--rule-2)); }
.cal i.l2 { background: color-mix(in srgb, var(--jade) 65%, var(--rule-2)); }
.cal i.l3 { background: var(--jade); }
.cal i.now { outline: 1.5px solid var(--seal); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; font-size: 1.05rem; background: var(--paper); }
.chip small { font-family: var(--f-body); color: var(--ink-3); font-size: .74rem; }
.foot-ver { text-align: center; margin-top: 1rem; }

/* ---------- Sprint picker ---------- */

.sprint-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 16px; align-items: start; }
.pick { display: flex; align-items: center; gap: .8rem; margin: .7rem 0; flex-wrap: wrap; }
.pick-l { width: 5.5rem; color: var(--ink-3); font-size: .86rem; }
.pick-pair { display: contents; }

/* ---------- overlays: session and sprint ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--paper); display: none;
  flex-direction: column;
}
.overlay.on { display: flex; animation: fade .15s ease-out; }
.s-top { display: flex; align-items: center; gap: .8rem; padding: 10px 16px; max-width: var(--col); width: 100%; margin: 0 auto; position: relative; }
.s-title { flex: 1; font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-count { color: var(--ink-3); font-size: .86rem; font-variant-numeric: tabular-nums; }
.s-prog { height: 3px; background: var(--rule-2); max-width: var(--col); width: calc(100% - 32px); margin: 0 auto; border-radius: 2px; overflow: hidden; }
.s-prog i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .25s; }
/* the question timer: drains, and costs nothing when it runs out */
.s-timer { height: 2px; max-width: var(--col); width: calc(100% - 32px); margin: 4px auto 0; }
.s-timer i { display: block; height: 100%; width: 0; background: var(--ai); opacity: .5; }
.s-timer.run i { animation: drain var(--dur, 3000ms) linear forwards; }
.s-timer.stop i { animation-play-state: paused; }
@keyframes drain { from { width: 100%; } to { width: 0; } }
.s-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 24px 16px; }
.s-body > * { width: 100%; max-width: var(--col); margin: auto 0; }
.s-foot {
  display: flex; justify-content: space-between; gap: .6rem; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  max-width: var(--col); width: 100%; margin: 0 auto;
}

.intro { text-align: center; }
.glyph-xl {
  font: 500 min(9rem, 30vw)/1.1 var(--f-ja-serif); display: block; margin: .2rem auto .1rem;
  padding: 0 .3em; border-radius: 16px;
}
button.glyph-xl:hover:not(:disabled) { background: var(--sunken); }
.intro-rom { font: 600 1.6rem var(--f-display); color: var(--ai); margin-bottom: 1rem; min-height: 1em; }
.story { font-size: 1.05rem; color: var(--ink-2); max-width: 30rem; margin: 0 auto .8rem; }
.rule { background: var(--ai-wash); border-radius: 8px; padding: 10px 14px; max-width: 30rem; margin: 0 auto .8rem; font-size: .95rem; }
.twin { color: var(--ink-3); font-size: .9rem; }
.twin [lang="ja"] { font-size: 1.2em; color: var(--ink); }
.concept h2 { margin-top: .5rem; }
.concept p { max-width: 32rem; margin: 0 auto 1rem; color: var(--ink-2); }
.glyph-xl.static { font-size: min(6rem, 22vw); }
.ex-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: .5rem 0 1rem; }
.ex { border: 1px solid var(--rule); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; align-items: center; background: var(--sheet); }
.ex span { font-size: 1.3rem; }
.ex small { color: var(--ink-3); font-size: .78rem; }
.ex:hover { border-color: var(--ink-3); }
.ex.dim { opacity: .55; }

/* "Now you can read": a word taken apart into its kana, then whole */
.spell-why { max-width: 32rem; margin: 0 auto 1rem; text-align: left; }
.spell-why h2 { text-align: center; margin: .3rem 0 .6rem; }
.spell-why p { color: var(--ink-2); margin: 0 0 .6rem; font-size: .95rem; }
.spell-why [lang="ja"] { color: var(--ink); font-size: 1.1em; }
.spell-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 10px; max-width: 40rem; margin: 0 auto; }
.spell-word { border: 1px solid var(--rule); border-radius: var(--r); background: var(--sheet); padding: 10px 8px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.spell-parts { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; }
.spell-k { display: flex; flex-direction: column; align-items: center; min-width: 30px; padding: 2px 4px;
  border-radius: 8px; background: var(--ai-wash); }
.spell-k span { font: 500 1.15rem/1.2 var(--f-ja); }
.spell-k small, .spell-whole small { color: var(--ai); font-weight: 600; font-size: .72rem; }
.spell-k:hover { background: var(--sunken); }
.spell-plus { color: var(--ink-3); font-size: .75rem; }
.spell-whole { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 10px; margin-top: 4px; border-radius: 8px; }
.spell-whole span { font: 500 1.9rem/1.15 var(--f-ja); color: var(--ink); }
.spell-whole:hover { background: var(--sunken); }
.spell-m { font: 600 1.05rem/1.25 var(--f-display); color: var(--ink); text-align: center; }
.spell-hook { margin-top: 4px; font-size: .8rem; line-height: 1.35; color: var(--ink-2); text-align: center; }
.spell-hook .ico { width: 12px; height: 12px; vertical-align: -1px; color: var(--amber); }
.spell-kj { margin-top: 2px; font-size: .74rem; color: var(--ink-3); text-align: center; }
.spell-kj [lang="ja"] { font-size: 1.15em; color: var(--ink-2); }

.q { text-align: center; }
.q-ask { color: var(--ink-2); margin-bottom: .6rem; font-size: 1rem; }
.glyph-l { font: 500 min(6.5rem, 26vw)/1.15 var(--f-ja-serif); margin: .2rem 0 1.4rem; }
.glyph-l.word { font-size: min(3.6rem, 13vw); line-height: 1.6; }
.play {
  width: 104px; height: 104px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--rule);
  font-size: 2.3rem; box-shadow: var(--shadow); margin: .4rem 0 1.4rem;
}
.play:hover { box-shadow: var(--shadow-lift); }
.play.small { width: 56px; height: 56px; font-size: 1.3rem; margin-bottom: 1rem; }

.opts { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); max-width: 34rem; margin: 0 auto; }
@media (min-width: 820px) { .opts.n4 { grid-template-columns: repeat(4, 1fr); } .opts.n3 { grid-template-columns: repeat(3, 1fr); } }
.opt {
  border: 1.5px solid var(--rule); border-radius: 12px; background: var(--sheet); padding: 14px 10px;
  font-size: 1.2rem; font-weight: 500; position: relative; min-height: 64px;
  display: flex; align-items: center; justify-content: center; transition: border-color .1s, background .1s;
}
.opt.jp { font-size: 1.9rem; font-weight: 400; }
.opt kbd { position: absolute; top: 5px; left: 7px; font-size: .62rem; margin: 0; }
.opt:hover:not(:disabled) { border-color: var(--ink-3); }
.opt.right { border-color: var(--jade); background: var(--jade-wash); }
.opt.wrong { border-color: var(--amber); background: var(--amber-wash); }
.opt:disabled:not(.right):not(.wrong) { opacity: .5; }
.verdict { min-height: 3.2rem; margin-top: 1.1rem; font-size: 1.05rem; }
.verdict.ok { color: var(--jade); }
.verdict.miss { color: var(--amber); }
/* △ nearly: neither jade nor amber — ink, with the mark in gold */
.verdict.near { color: var(--ink); }
.verdict.near .v-ico { color: var(--gold); fill: none; }
.verdict [lang="ja"] { font-size: 1.2em; color: var(--ink); }
.verdict .note { color: var(--ink-2); font-size: .88rem; margin-top: .3rem; }
.mist-l { font-size: .78rem; color: var(--ink-3); margin: .5rem 0 .25rem; }
.badge-quick { display: inline-block; font-size: .75rem; background: var(--jade-wash); color: var(--jade); border-radius: 999px; padding: 1px 8px; margin-left: .4rem; vertical-align: 2px; }

.finish { text-align: center; }
.finish-big { font: 600 4rem/1 var(--f-display); margin: .4rem 0 .2rem; }
.finish-big small { font-size: .45em; color: var(--ink-3); }
.finish h2 { margin-top: 1rem; font-size: 1.5rem; }
.finish p { max-width: 30rem; margin: 0 auto .8rem; color: var(--ink-2); }
.learned-list { font-size: 1.8rem; letter-spacing: .15em; }
.missed { margin-top: 1.2rem; }
.missed .chip { margin: 3px; }

/* ---------- writing ---------- */

.pad {
  position: relative; width: min(19rem, 72vw); aspect-ratio: 1 / 1; margin: .2rem auto .8rem;
  background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 14px; overflow: hidden;
}
.pad > svg, .pad-model, .pad-model svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pad-guide line { stroke: var(--rule); stroke-width: 4; stroke-dasharray: 18 14; }
.pad-ink { touch-action: none; cursor: crosshair; }
.pad-ink polyline { fill: none; stroke: var(--ink); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }
.pad-ink circle { fill: var(--ink); }
.pad-ink .ok { stroke: var(--jade); } .pad-ink circle.ok { fill: var(--jade); stroke: none; }
.pad-ink .miss { stroke: var(--amber); } .pad-ink circle.miss { fill: var(--amber); stroke: none; }
.pad-ink .near { stroke: var(--gold); } .pad-ink circle.near { fill: var(--gold); stroke: none; }
.pad-tools { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mdl path { fill: var(--ink); }
.mdl.faint path { fill: var(--ink); opacity: .13; }
.mdl .mdl-ghost { fill: var(--ink); opacity: .08; }
.mdl .mdl-sweep { fill: none; stroke: var(--c-hira); stroke-width: 150; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sweep { to { stroke-dashoffset: 0; } }
.kd-strokes { margin: .4rem 0 1rem; }
.kd-strokes #kdStrokes { width: 7.5rem; height: 7.5rem; margin: 0 auto .4rem; position: relative; background: var(--paper); border-radius: 12px; }
.kd-strokes #kdStrokes svg { width: 100%; height: 100%; }

/* ---------- the guide ---------- */

.info { max-width: 34rem; margin: auto; }
.info h2 { font-size: 1.6rem; margin-bottom: .7rem; }
.info p { color: var(--ink-2); }
.info .muted { color: var(--ink-3); }
.sc-sentence { font-size: 2.2rem; line-height: 1.4; margin: .4rem 0 .2rem; color: var(--ink); }
.sc { border-bottom: 3px solid currentColor; padding-bottom: 1px; }
.sc-h { color: var(--c-hira); }
.sc-k { color: var(--c-kata); }
.sc-j { color: var(--c-kanji); }
.sc-legend { display: flex; gap: 1rem; font-size: .84rem; color: var(--ink-3); margin: .2rem 0 1rem; flex-wrap: wrap; }
.sc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-right: .35rem; vertical-align: -1px; }
.sc-legend .sc-dot.sc-h { background: var(--c-hira); } .sc-legend .sc-dot.sc-k { background: var(--c-kata); } .sc-legend .sc-dot.sc-j { background: var(--c-kanji); }
.info ruby { font-size: 1.5rem; } .info rt { font-size: .5em; color: var(--c-hira); }
.mini-chart {
  display: grid; grid-template-columns: 1.6rem repeat(5, 2.6rem); gap: 4px; justify-content: center; margin: .2rem 0 1rem;
  font-size: 1.35rem; text-align: center;
}
.mini-chart span { display: grid; place-items: center; height: 2.6rem; border-radius: 8px; background: var(--sheet); border: 1px solid var(--rule-2); }
.mini-chart .mc-h { background: none; border: 0; font: 500 .85rem var(--f-body); color: var(--ink-3); }
.mini-chart .mc-row { background: var(--ai-wash); border-color: var(--c-hira); }
.mini-chart .mc-col { box-shadow: inset 0 0 0 2px var(--c-kata); }
.mini-chart .mc-more { background: none; border: 0; font: .82rem var(--f-body); color: var(--ink-3); height: auto; }
.pairs-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.pairs-row span { font-size: 1.4rem; padding: 4px 12px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule-2); }
ol.how { padding-left: 1.2rem; color: var(--ink-2); }
ol.how li { margin: .35rem 0; }
.how-chart summary { cursor: pointer; list-style: none; }
.how-chart summary::-webkit-details-marker { display: none; }
.how-chart summary h2 { display: inline; }
.how-chart summary::after { content: " ▾"; color: var(--ink-3); }
.how-chart[open] summary { margin-bottom: .6rem; }
.how-chart p { color: var(--ink-2); max-width: 44rem; }

/* ---------- words ---------- */

ruby { ruby-position: over; }
rt { font-size: .45em; color: var(--c-hira); font-weight: 400; letter-spacing: 0; }
.word-xl {
  font: 500 min(4.2rem, 13vw)/1.5 var(--f-ja-serif); display: block; margin: .3rem auto 0; padding: 0 .3em; border-radius: 14px;
}
.word-xl:hover { background: var(--sunken); }
.word-m { font: 600 1.4rem var(--f-display); margin: .3rem 0 .9rem; }
.ex-sent {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin: .4rem auto; padding: 8px 16px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); max-width: 32rem;
}
.ex-sent span { font-size: 1.3rem; line-height: 1.8; }
.ex-sent small { color: var(--ink-3); }
.ex-sent:hover { border-color: var(--ink-3); }
.opts.words .opt { font-size: 1.05rem; }
.opt.furi { font-size: 1.5rem; line-height: 1.7; padding-top: 18px; }
.type-m { font: 600 1.6rem var(--f-display); margin: .2rem 0 1rem; }
.type-in { max-width: 20rem; }
.type-preview { font-size: 1.8rem; min-height: 2.6rem; color: var(--c-hira); margin-bottom: .4rem; }
.learned-list.words { font-size: 1.5rem; letter-spacing: 0; line-height: 1.9; }

.lib-search { flex: 1 1 14rem; max-width: 22rem; width: auto; }
/* the Words tab: Today's word tiles, larger, as many across as fit */
ul.lib { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); grid-auto-flow: row dense; gap: 8px; }
.lib .wtile.wide { grid-column: span 2; }
.lib .wt-say { min-height: 6.4rem; padding: 14px 10px 10px; }
.lib .wt-jp { font-size: 1.45rem; }
.lib .wt-jp.long { font-size: 1.1rem; }
.lib .wt-jp.xlong { font-size: 1.25rem; }
.lib .wt-en { font-size: .82rem; color: var(--ink-2); }
.lib .wt-say .rom { font-size: .74rem; }
.not-yet .chips { margin-top: .3rem; }

.forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 26rem; margin: .2rem auto .8rem; }
.form { display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule-2); }
.form span { font-size: 1.15rem; line-height: 1.7; }
.form small { color: var(--ink-3); font-size: .74rem; }
.form:hover { border-color: var(--ink-3); }
.conj-verb span { font-family: var(--f-ja-serif); font-size: 2rem; line-height: 1.6; }
.conj-verb small { display: block; font: 400 .9rem var(--f-body); color: var(--ink-3); }

/* ---------- patterns ---------- */

.pat-big { font: 500 2.2rem/1.6 var(--f-ja-serif); margin: .2rem 0 .1rem; }
.pat-sent { font: 500 1.9rem/1.8 var(--f-ja-serif); margin: .2rem 0 .3rem; }
.pat-en { margin-bottom: 1rem; }
.gap {
  display: inline-block; min-width: 1.6em; padding: 0 .15em; margin: 0 .08em; border-bottom: 3px dashed var(--c-hira);
  background: var(--ai-wash); border-radius: 4px; line-height: 1.3;
}
.gap.filled { border-bottom-style: solid; color: var(--c-hira); font-weight: 600; }
.pat-list { display: flex; flex-direction: column; gap: 6px; }
.pat-item { border: 1px solid var(--rule-2); border-radius: 12px; padding: 8px 12px; background: var(--paper); }
.pat-item summary { cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; list-style: none; }
.pat-item summary::-webkit-details-marker { display: none; }
.pat-name { font-size: 1.15rem; line-height: 1.7; }
.pat-m { color: var(--ink-3); font-size: .88rem; text-align: right; }
.pat-item[open] { background: var(--sheet); }
.pat-item .ex-sent { width: 100%; align-items: flex-start; }

/* ---------- kanji ---------- */

.kanji { font-family: var(--f-ja-serif); }
.kgrid.c6 { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }
.kgrid.c6 .kg { font-size: 1.9rem; }
.kgrid.c6 .kr { font-size: .64rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.kanji-top { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.kanji-top .glyph-xl { margin: 0; }
.k-strokes { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-3); }
.k-strokes #kdStrokes { width: 5.5rem; height: 5.5rem; position: relative; background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 12px; }
.k-strokes #kdStrokes svg { width: 100%; height: 100%; }
.k-strokes small { font-size: .74rem; }
.k-read { display: inline-flex; flex-direction: column; gap: 2px; margin: 0 auto .9rem; font-size: 1.05rem; text-align: left; }
.k-rl { display: inline-block; width: 2.4rem; font: 500 .72rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.k-target { color: var(--c-hira); border-bottom: 3px solid var(--c-hira); }

/* ---------- the Grammar tab ---------- */

.g-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 14px; flex-wrap: wrap; }
.g-head .lede { max-width: 44rem; margin: 0; }
.g-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
.g-chunks { display: flex; flex-wrap: wrap; gap: 6px; margin: .3rem 0 .4rem; }
.g-chunk { display: flex; flex-direction: column; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule-2); font: inherit; color: inherit; cursor: pointer; }
.g-chunk:hover, .g-form:hover { border-color: var(--ai); }
/* an ending, and the example word in it — tap to hear */
.g-form { font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }
.g-form small { font-size: .82rem; color: var(--ink-2); }
.g-form span, .g-form small { white-space: nowrap; }
.g-chunk.verb { border-color: var(--c-hira); background: var(--ai-wash); }
.g-jp { font-size: 1.25rem; line-height: 1.8; }
.g-role { font: 600 .72rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--c-hira); }
.g-chunk small { font-size: .68rem; color: var(--ink-3); }
.g-en { color: var(--ink-2); font-style: italic; margin: .2rem 0 .6rem; }
.g-points { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: .92rem; }
.g-points li { margin: .3rem 0; line-height: 1.7; }
.g-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 8px; }
.g-part { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: baseline; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule-2); }
.g-part:hover { border-color: var(--ink-3); }
.g-p { font: 600 1.7rem var(--f-ja-serif); grid-row: span 2; color: var(--c-hira); }
.g-r { font-size: .74rem; color: var(--ink-3); }
.g-job { font-size: .85rem; color: var(--ink-2); grid-column: 2; }
.g-ex { grid-column: 1 / -1; font-size: 1.05rem; line-height: 1.8; margin-top: .3rem; }
.g-exen { grid-column: 1 / -1; font-size: .78rem; color: var(--ink-3); }
.g-table-wrap { overflow-x: auto; }
.g-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.g-table th, .g-table td { padding: 8px 8px; border-bottom: 1px solid var(--rule-2); text-align: left; }
.g-table thead th { font: 500 .74rem var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.g-table tbody th { font-weight: 600; font-size: .86rem; white-space: nowrap; }
.g-table tbody th small { display: block; font-weight: 400; color: var(--ink-3); font-size: .85rem; line-height: 1.8; }
.g-sub { margin: 1rem 0 .6rem; }
.pat-item.ahead { opacity: .72; }
.pat-item.ahead .pat-name .ico { margin-right: .3rem; color: var(--ink-3); }

/* ---------- flashcards ---------- */

.cards-pick { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.cd-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 16px 14px; padding: 6px 4px 8px; }
/* a deck: a card with two more peeking out behind it */
.deck-tile { position: relative; height: 6.4rem; }
.deck-tile::before, .deck-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule);
  transition: transform .15s;
}
.deck-tile::before { transform: rotate(-4deg) translate(-3px, 3px); }
.deck-tile::after { transform: rotate(3deg) translate(3px, 2px); }
.dt-card {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.dt-jp { font: 500 1.35rem var(--f-ja-serif); }
.dt-en { font-size: .82rem; font-weight: 500; }
.dt-n { font-size: .72rem; color: var(--ink-3); }
.deck-tile:hover:not(:disabled) .dt-card { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.deck-tile:hover:not(:disabled)::before { transform: rotate(-6deg) translate(-5px, 3px); }
.deck-tile:hover:not(:disabled)::after { transform: rotate(5deg) translate(5px, 2px); }
.deck-tile.on .dt-card { border: 2px solid var(--ink); transform: translateY(-3px); }
.deck-tile:disabled { opacity: .45; }
.cd-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.cd-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cd-count { color: var(--ink-3); font-size: .9rem; font-variant-numeric: tabular-nums; }
.flashcard { width: min(30rem, 100%); aspect-ratio: 3 / 2; perspective: 1400px; display: block; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .14s ease-out, opacity .14s; }
.flashcard.dragging { transition: none; }
.flashcard.out-left { transform: translateX(-60%) rotate(-8deg); opacity: 0; }
.flashcard.out-right { transform: translateX(60%) rotate(8deg); opacity: 0; }
.fc-inner { position: relative; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.flashcard.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; padding: 20px 24px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow-lift); text-align: center; overflow: auto;
}
.fc-back { transform: rotateY(180deg); background: var(--paper); }
.fc-hint { position: absolute; bottom: 10px; font-size: .74rem; color: var(--ink-3); }
.cf-glyph { font: 500 6rem/1.1 var(--f-ja-serif); }
.cf-word { font: 500 2.8rem/1.6 var(--f-ja-serif); }
.cf-pat { font: 500 2rem/1.6 var(--f-ja-serif); }
.cf-en { font: 600 1.6rem var(--f-display); }
.cf-bigrom { font: 600 2.6rem var(--f-display); color: var(--c-hira); }
.cf-kana { font-size: 1.5rem; line-height: 1.8; }
.cf-rom { color: var(--ink-3); }
.cf-note { color: var(--ink-2); font-size: .92rem; max-width: 26rem; margin: .2rem 0 0; }
.cf-ex { font-size: 1.15rem; line-height: 1.8; color: var(--ink-2); }
.cf-ex-en { color: var(--ink-2); font-style: italic; }
.fc-back .k-read { margin-bottom: .2rem; }
.cd-btns { display: flex; gap: 10px; align-items: center; }
.cd-got { background: var(--jade); }
.cd-again { color: var(--amber); border-color: var(--amber); }
.cd-end { text-align: center; }

/* ---------- milestones, cheers, numbers ---------- */

.medal { width: 64px; height: 77px; overflow: visible; }
.medal .md-ring { fill: var(--gold); }
.medal .md-face { fill: var(--gold-soft); stroke: var(--sheet); stroke-width: 2; }
.medal .md-rib.a { fill: var(--seal); }
.medal .md-rib.b { fill: var(--ai); }
.medal .md-text { font: 700 22px var(--f-ja-serif); fill: var(--ink); }
.medal .md-text.long { font-size: 15px; font-family: var(--f-body); }
.medal.locked .md-ring, .medal.locked .md-rib { fill: var(--rule); }
.medal.locked .md-face { fill: var(--sunken); }
.medal.locked .md-text { fill: var(--ink-3); }
.medal.mini { width: 40px; height: 48px; }
.medal.ms-big { width: 96px; height: 115px; animation: medalIn .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes medalIn { from { transform: scale(.2) rotate(-30deg); opacity: 0; } }

.ms-pop { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 16px; }
.ms-veil { position: absolute; inset: 0; background: rgba(20, 19, 17, .5); animation: fade .15s both; }
.ms-card {
  position: relative; width: min(26rem, 100%); background: var(--sheet); border-radius: 22px; padding: 22px 22px 20px; text-align: center;
  box-shadow: var(--shadow-lift); animation: rise .25s cubic-bezier(.2, .9, .3, 1.2) both;
}
.ms-top { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: .2rem 0 .4rem; }
.ms-card h2 { font-size: 1.5rem; margin-bottom: .2rem; }
.ms-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: .4rem 0; }
.ms-more > div { display: flex; flex-direction: column; align-items: center; font-size: .78rem; color: var(--ink-2); max-width: 6rem; }
.ms-cheer { font-weight: 600; color: var(--seal); margin: .6rem 0 .9rem; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 12px 8px; }
.ms-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: .76rem; color: var(--ink-2); }
.ms-next-h { margin-top: 1rem; }
.ms-next { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 10px; }
.ms-n { display: flex; gap: 10px; align-items: center; }
.ms-n > div { flex: 1; display: flex; flex-direction: column; font-size: .88rem; }
.ms-n small { color: var(--ink-3); font-size: .76rem; }
.ms-n .bar { margin: 4px 0 2px; }

.cheer { display: inline-block; margin: .5rem 0 0; padding: 5px 14px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); font-size: .95rem; }
.cheer b { color: var(--seal); margin-right: .2rem; }
.combo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 5px 14px; font-size: .88rem; box-shadow: var(--shadow-lift);
  animation: comboIn 1.2s cubic-bezier(.2, 1.4, .4, 1) both;
}
.combo b { color: var(--gold); margin-right: .15rem; }
.combo .ico { color: var(--gold); }
@keyframes comboIn { 0% { transform: translate(-50%, -50%) scale(.7); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -50%); opacity: 0; } }

.hero-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--ink-2); margin-top: .1rem; }
.hero-stats span { display: inline-flex; align-items: center; gap: 4px; }
.hero-stats .ico { color: var(--seal); width: 16px; height: 16px; }

.stats-wide { grid-template-columns: repeat(5, 1fr); }
.stat small { color: var(--ink-3); font-size: .76rem; margin-top: 2px; }
.st-ico { width: 22px; height: 22px; color: var(--seal); }
.record-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--rule-2); stroke-width: 1; }
.chart .ax { font: 10px var(--f-body); fill: var(--ink-3); }
.chart .bar { fill: var(--jade); }
.chart .bar.now { fill: var(--jade); stroke: var(--ink); stroke-width: 1.5; }
.chart .hit { fill: transparent; }
.chart .bar-hit:hover .bar { fill: color-mix(in srgb, var(--jade) 80%, var(--ink)); }
.chart .line { fill: none; stroke: var(--jade); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: var(--jade-wash); }
.chart .dot { fill: var(--jade); stroke: var(--sheet); stroke-width: 2; opacity: 0; }
.chart .bar-hit:hover .dot { opacity: 1; }
.chart-tip {
  position: absolute; z-index: 60; transform: translate(-50%, -100%); pointer-events: none;
  background: var(--ink); color: var(--paper); font-size: .78rem; padding: 4px 9px; border-radius: 6px; white-space: nowrap;
}
@media (max-width: 1000px) and (min-width: 721px) { .stats-wide { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Read a Menu ---------- */

.noren { width: 220px; height: 86px; display: block; margin: -6px auto .4rem; overflow: visible; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite; }
.noren .nr-pole { fill: var(--ink-2); }
.noren .nr-panel { fill: var(--c-hira); }
.noren.diner .nr-panel { fill: var(--seal); }
.noren .nr-text { font: 700 26px var(--f-ja-serif); fill: var(--paper); }
@keyframes sway { 50% { transform: rotate(.8deg) skewX(-1deg); } }
.noren.mini { width: 96px; height: 38px; margin: 0; flex: none; animation: none; }
.noren.mini .nr-text { font-size: 24px; }

.menu-card { display: flex; align-items: center; gap: 1rem; padding-top: 12px; padding-bottom: 12px; }
.menu-card-text { flex: 1; font-size: .92rem; }
.menu-card-text .eyebrow { margin-bottom: .1rem; }

.menu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 16px; align-items: start; }
.menu-board { padding: 22px 28px 26px; background: var(--sheet); text-align: center; }
.menu-name { margin: .2rem 0 0; font-family: var(--f-ja-serif); font-size: 1.8rem; line-height: 1.6; }
.menu-en { color: var(--ink-3); font: italic 1rem var(--f-display); margin-bottom: 1rem; }
.menu-sec { text-align: left; margin-top: 1.1rem; }
.menu-sec h3 { font-family: var(--f-ja-serif); font-size: 1.15rem; border-bottom: 1.5px solid var(--ink); padding-bottom: .3rem; margin-bottom: .3rem; }
.menu-sec h3 small { font: 400 .8rem var(--f-body); color: var(--ink-3); margin-left: .4rem; }
.mi-list { list-style: none; margin: 0; padding: 0; columns: 2 15rem; column-gap: 2rem; }
.mi-list li { break-inside: avoid; }
.mi {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: .4rem;
  padding: 6px 6px; border-radius: 8px; text-align: left; transition: background .15s;
}
.mi:hover { background: var(--sunken); }
.mi-name { font-size: 1.2rem; line-height: 1.7; }
.mi.dim .mi-price { opacity: .5; }
.mi-dots { border-bottom: 2px dotted var(--rule); transform: translateY(-5px); }
.mi-price { font-variant-numeric: tabular-nums; font-weight: 500; }
.mi-m { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-3); height: 0; overflow: hidden; transition: height .15s; }
.mi.open .mi-m { height: 1.3em; }
.mi.got { background: var(--jade-wash); }
.mi.got .mi-m { height: 1.3em; color: var(--jade); }
.mi.wrong { background: var(--amber-wash); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.menu-side .card { text-align: left; }
.order-head { display: flex; gap: .8rem; align-items: flex-start; }
.order-ask { font-size: 1.1rem; margin: .2rem 0; }
.order-msg { background: var(--amber-wash); color: var(--ink-2); border-radius: 8px; padding: 6px 10px; font-size: .9rem; }
.order-dots { display: flex; gap: 6px; margin: .6rem 0; }
.order-dots i { width: 28px; height: 6px; border-radius: 3px; background: var(--rule-2); }
.order-dots i.on { background: var(--jade); }
.receipt { background: var(--paper); border-style: dashed; }
.receipt .celebrate { justify-content: flex-start; min-height: 0; margin-top: 0; }
.stamp.mini-long { width: 70px; height: 70px; font-size: .78rem; border-radius: 12px; }
.stamp.mini-long span { writing-mode: vertical-rl; }
ul.rc { list-style: none; margin: .3rem 0; padding: 0; font-variant-numeric: tabular-nums; }
ul.rc li { display: grid; grid-template-columns: auto 1fr auto; column-gap: .4rem; align-items: baseline; padding: 2px 0; }
.rc-total { display: flex; justify-content: space-between; border-top: 1.5px solid var(--ink); padding-top: .4rem; margin-top: .3rem; font-size: 1.05rem; }
.rc-say { font-size: 1.2rem; color: var(--c-hira); margin: .2rem 0 .8rem; }
.receipt .ex-sent { width: 100%; }
.menu-side .ex-sent { width: 100%; align-items: flex-start; }
.menu-side .ex-sent span { font-size: 1.1rem; }
@media (max-width: 900px) { .menu-layout { grid-template-columns: 1fr; } .menu-board { padding: 18px 14px; } }

/* ---------- the sprint sheet ---------- */

.sp-strip { flex: 1; display: flex; gap: 2px; align-items: center; min-width: 0; }
.sp-strip i { flex: 1; height: 6px; border-radius: 2px; background: var(--rule-2); min-width: 2px; }
.sp-strip i.done { background: var(--ink-3); }
.sp-strip i.now { background: var(--ink); }
.sp-strip i.ok { background: var(--jade); }
.sp-strip i.miss { background: var(--amber); }
.sp-strip i.near { background: linear-gradient(90deg, var(--jade) 50%, var(--amber) 50%); }
.sp-clock { font: 600 1.1rem var(--f-body); font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }
.sp-clock.low { color: var(--seal); }
.sp-ready { text-align: center; }
.sp-count { font: 600 6rem/1 var(--f-display); margin: .5rem 0; }
.sp-input { max-width: 16rem; font-size: 1.4rem; text-align: center; margin: 0 auto .6rem; display: block; }
.grade { display: inline-flex; flex-direction: column; align-items: center; border: 2px solid var(--jade); color: var(--jade); border-radius: 14px; padding: 8px 18px; margin-bottom: .6rem; }
.grade.miss { border-color: var(--amber); color: var(--amber); }
.grade span { font-size: 2.4rem; line-height: 1.1; }
.grade small { font-size: .8rem; }
.badge-best { display: inline-block; background: var(--jade-wash); color: var(--jade); border-radius: 999px; padding: 3px 12px; font-size: .86rem; margin-bottom: .8rem; }
.sp-review { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 1rem; }
.sp-review > span, .sp-review > button { display: flex; flex-direction: column; align-items: center; width: 3rem; padding: 4px 0; border-radius: 6px; border: 1px solid var(--rule-2); }
.sp-review b { font-weight: 400; font-size: 1.25rem; }
.sp-review small { font-size: .66rem; color: var(--ink-3); }
.sp-review .ok { background: var(--jade-wash); border-color: transparent; }
.sp-review .miss { background: var(--amber-wash); border-color: var(--amber); }
.sp-review .skip { opacity: .45; }
.sp-review .near { background: var(--gold-soft); border: 1px dashed var(--gold); }
/* a words sheet: tiles as wide as their word */
.sp-review.words > span { width: auto; min-width: 3rem; padding: 4px 8px; }
.sp-review.words b { font-size: 1.05rem; }
.sp-review.words small { font-size: .7rem; max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-review > button { font: inherit; color: inherit; cursor: pointer; }
.sp-review button.miss:hover, .sp-review button.near:hover { box-shadow: 0 0 0 2px var(--amber); }
.sp-pop-tri { color: var(--gold); vertical-align: -3px; }
/* a miss opened */
.sp-pop-pair { display: flex; justify-content: center; gap: 14px; margin: .8rem 0 .4rem; }
.sp-pop-pair figure { margin: 0; flex: 1; max-width: 10rem; }
.sp-pop-pair figcaption { font-size: .8rem; color: var(--ink-3); margin-top: .3rem; }
.sp-pop-box { position: relative; aspect-ratio: 1; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper); }
.sp-pop-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-pop-box .sp-ink { margin: 0; }
.sp-pop-box .sp-ink polyline { stroke-width: 34; }
.sp-pop-why { color: var(--ink-2); font-size: .92rem; min-height: 1.4em; }
.sp-pop .ask-btns { justify-content: center; flex-wrap: wrap; }
.sp-q.q-w .q-ask { font-size: 1.1rem; }
.sp-w-r { font: 600 1.6rem var(--f-display); color: var(--ai); margin: 0 .15em; }
.sp-q .pad-tools { margin-top: .6rem; }
/* Write's Next: a row of its own straight under the box, as wide as it, where it's quickest to hit */
.sp-next { display: flex; justify-content: center; width: min(19rem, 72vw); margin: 0 auto; min-height: 48px; }
.sp-ink { width: 2.2rem; height: 2.2rem; margin-top: 2px; }
.sp-ink polyline { fill: none; stroke: var(--amber); stroke-width: 60; stroke-linecap: round; stroke-linejoin: round; }
.sp-ink circle { fill: var(--amber); }
/* marking as you go: how the last one went, small, where a verdict goes */
.sp-last { font-size: .95rem; min-height: 2.4rem; margin-top: .7rem; }
.sp-last .sp-lbl { color: var(--ink-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-right: .3rem; }
.sp-last .sp-you { color: var(--ink-3); font-size: .88rem; margin-left: .2rem; }
.sp-last .sp-ink { width: 1.7rem; height: 1.7rem; margin: 0; vertical-align: middle; }
/* Next on an empty box: a shake, not a skip */
.sp-nudge { animation: shake .35s; }

/* ---------- sheets, ask, crash, toast ---------- */

.sheet-wrap, .crash {
  position: fixed; inset: 0; z-index: 70; background: rgba(20, 19, 17, .38); display: none;
  align-items: flex-end; justify-content: center;
}
.sheet-wrap.on, .crash.on { display: flex; animation: fade .15s; }
.sheet {
  background: var(--sheet); width: 100%; max-width: 34rem; max-height: 88vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); position: relative;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 720px) { .sheet-wrap, .crash { align-items: center; } .sheet { border-radius: 18px; } }
.sheet-x { position: absolute; top: 12px; right: 12px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 12px 0; border-top: 1px solid var(--rule-2); cursor: pointer; }
.set-row > span { display: flex; flex-direction: column; font-weight: 500; }
.set-row small { font-weight: 400; color: var(--ink-3); font-size: .82rem; }
.set-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--jade); flex: none; }
.set-block { border-top: 1px solid var(--rule-2); padding-top: 12px; margin-top: 4px; }
.set-block .btn { margin: 0 6px 6px 0; }
.set-block textarea { margin: 6px 0; }
.kana-detail { text-align: center; }
.kana-detail .sk-rows { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--ink-2); margin-bottom: 1rem; }
.ask { z-index: 90; }
.ask-box { max-width: 26rem; }
.ask-k { font-size: 1.1rem; color: var(--seal); margin-bottom: .3rem; }
.ask-btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.crash { z-index: 95; }
.sound-bar {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 96; display: none;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 10px 18px; box-shadow: var(--shadow-lift);
}
.sound-bar.on { display: block; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 97; opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); border-radius: 10px; padding: 10px 16px; font-size: .9rem;
  transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Keyboard hints mean nothing on a touch screen. */
@media (hover: none) { kbd { display: none; } .opt kbd { display: block; } }

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  .today-grid, .sprint-grid { grid-template-columns: 1fr; }
}


/* ---------- out and about: the scenes ---------- */
.ob-head .eyebrow { margin: 0 0 .5rem; }
.scene-strip { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 4px 2px 12px; margin-bottom: 8px; scrollbar-width: thin; }
.scene-tile { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 7.6rem; padding: 10px 14px 10px 12px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--sheet); box-shadow: var(--shadow); cursor: pointer; text-align: left; color: var(--ink);
  transition: transform .12s, box-shadow .12s, border-color .12s; }
.scene-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.scene-tile.on { border-color: var(--seal); background: var(--seal-wash); }
.st-jp { font-family: var(--f-ja-serif); font-size: 1.25rem; line-height: 1.2; }
.st-en { font-size: .76rem; color: var(--ink-2); }
.st-n { position: absolute; top: 6px; right: 8px; font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-lock { position: absolute; top: 6px; right: 8px; color: var(--ink-3); }
.st-lock svg { width: 12px; height: 12px; }

.scene-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.scene-head h1 { margin: 0 0 .2rem; }
.scene-head .lede { margin: 0; max-width: 40rem; }
.scene-score { position: relative; display: grid; justify-items: center; flex: 0 0 auto; }
.scene-score > span { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-weight: 600; font-size: .95rem; }
.scene-score > span small { font-weight: 400; color: var(--ink-3); font-size: .7rem; }
.scene-score > small { font-size: .68rem; color: var(--ink-3); margin-top: 2px; }
.scene-sub { display: flex; align-items: center; gap: 6px; font-size: 1rem; margin: 1.4rem 0 .6rem; }
.scene-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.2rem; }
.si-jp { display: block; font-family: var(--f-ja); }
.si-m { display: block; font-size: .78rem; margin-top: 4px; opacity: .75; }
.open .si-m { opacity: 1; font-weight: 500; }

/* ink: characters you know are dark; the rest grey (js/scenes-ui.js inkHtml) */
.ink-no { opacity: .3; }
.ink-sound { opacity: .55; }
.ink-key { font-size: .78rem; color: var(--ink-3); margin: .5rem 0 0; }
.ink-key .ink-no { opacity: .45; font-weight: 600; }

/* a place not open yet */
.place-shut { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 1rem; border-radius: 10px;
  background: var(--sunken); color: var(--ink-2); font-size: .88rem; line-height: 1.45; }
.place-shut .ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.scene-tile.shut .st-jp { opacity: .6; }
.scene-tile.home { flex-direction: row; align-items: center; gap: 6px; }
.scene-tile.home .ico { width: 14px; height: 14px; }

/* the landing page: what this is, how far along you are, every place */
.out-intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.6rem; align-items: start; }
.out-intro h1 { margin: 0 0 .4rem; }
.out-intro .lede { margin: 0 0 .8rem; }
.out-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-2); }
.out-steps b { color: var(--ink); }
.out-journey { border-left: 1px solid var(--rule); padding-left: 1.4rem; }
.out-journey .small { margin: .6rem 0 0; line-height: 1.5; }
.oj-track { display: flex; gap: 5px; margin-top: .5rem; }
.oj-track i { flex: 1; height: 8px; border-radius: 4px; background: var(--rule); }
.oj-track i.on { background: var(--jade); }
.oj-track i.next { background: var(--amber); animation: oj-pulse 1.6s ease-in-out infinite; }
@keyframes oj-pulse { 50% { opacity: .45; } }
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 12px; margin-top: 12px; }
.place { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 14px 14px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--sheet);
  transition: transform .12s, box-shadow .12s; }
.place:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.place.open { border-color: color-mix(in srgb, var(--jade) 45%, var(--rule)); }
.pl-jp { font: 500 1.6rem/1.2 var(--f-ja-serif); }
.place.shut .pl-jp { opacity: .55; }
.pl-en { font-weight: 600; font-size: .92rem; }
.pl-bar { position: relative; align-self: stretch; height: 6px; border-radius: 3px; background: var(--rule); margin: 8px 0 4px; }
.pl-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ink-3); }
.place.open .pl-bar i { background: var(--jade); }
.pl-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink-2); border-radius: 1px; }
.pl-n { font-size: .78rem; color: var(--ink-2); }
.pl-state { font-size: .78rem; color: var(--ink-3); }
.place.open .pl-state { color: var(--jade); font-weight: 600; }
.pl-lock { position: absolute; top: 12px; right: 12px; color: var(--ink-3); }
.pl-lock .ico { width: 14px; height: 14px; }
.pl-new { position: absolute; top: 10px; right: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--seal); padding: 2px 7px; border-radius: 999px; }

/* a place's three levels, and its stars on the landing page */
.levels { list-style: none; margin: .2rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.levels li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; }
.levels li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.levels b { font-size: .84rem; }
.levels small { font-size: .76rem; color: var(--ink-3); }
.lv-jp { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font: 500 1.05rem var(--f-ja-serif); background: var(--sunken); color: var(--ink-3); }
.levels li.done { border-color: color-mix(in srgb, var(--jade) 45%, var(--rule)); }
.levels li.done .lv-jp { background: var(--jade); color: #fff; }
.levels li.next { border-color: var(--amber); }
.levels li.next .lv-jp { background: var(--amber-wash); color: var(--amber); }
.pl-stars { display: inline-flex; gap: 3px; vertical-align: -1px; margin-right: 4px; }
.pl-stars i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--jade); }
.pl-stars i.on { background: var(--jade); }

/* a word a day from the street: shown, never taught */
.out-word { margin-top: 12px; }
.ow-row { display: flex; align-items: center; gap: 1.2rem; margin: .4rem 0 .5rem; }
.ow-jp { font: 500 2.2rem/1.3 var(--f-ja); padding: 4px 14px; border-radius: 10px; border: 1px solid var(--rule); background: var(--sheet); }
.ow-jp:hover { border-color: var(--ink-3); }
.ow-jp rt { font-size: .4em; }
.ow-rom { color: var(--ai); font-weight: 600; font-size: .9rem; }
.ow-m { font: 600 1.15rem var(--f-display); }
.out-word > .muted.tiny { margin: 0; }
.ow-mini { display: block; margin-top: 6px; text-align: left; font-size: .82rem; color: var(--ink-2); }
.ow-mini span { font-size: 1.05rem; color: var(--ink); margin: 0 4px; }
.ow-mini:hover { color: var(--ink); }

/* the early three's signs: a sushi curtain, a bath's, a festival banner */
.plates-sushi .plate { background: #23304A; color: #F4EEDF; border-radius: 3px 3px 12px 12px; border-top: 6px solid #6B4A2B; }
.plates-sento .plate { background: #8E2F2F; color: #FBEFE2; border-radius: 3px 3px 12px 12px; border-top: 6px solid #4A3322; }
.plates-festival .plate { background: #F4C84F; color: #A8201A; border: 3px solid #A8201A; border-radius: 6px; }
.plates-festival .plate .si-m { color: #5A1410; }

/* sign plates */
.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 12px; }
.plate { position: relative; border: 0; border-radius: 8px; padding: 14px 10px 10px; min-height: 5.6rem; cursor: pointer;
  text-align: center; box-shadow: var(--shadow); transition: transform .12s; font: inherit; }
.plate:hover { transform: translateY(-2px); }
.plate .si-jp { font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; }
.plate.known::after, .voice.known::after, .bubble.known::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--jade); }
.plates-station .plate { background: #1F4E8C; color: #fff; border-top: 5px solid #F2B705; }
.plates-shop .plate { background: #5B3A21; color: #FBEBD3; border: 3px solid #3E2714; border-radius: 6px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 6px, transparent 6px 14px); }
.plates-road .plate { background: #fff; color: #1E4FA3; border: 4px solid #1E4FA3; border-radius: 10px; }
.plates-road .plate.tri { background: #C8102E; color: #fff; border: 0; border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%); padding: 10px 10px 34px; }
.plates-road .plate.tri .si-m { display: none; }
.plate ruby rt { color: inherit; opacity: .8; }

/* announcements and staff: a speaker line */
.voices { display: grid; gap: 8px; }
.voice { position: relative; display: block; width: 100%; border: 1px solid var(--rule); border-left: 4px solid var(--ai);
  border-radius: 8px; background: var(--sheet); padding: 10px 14px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.voice:hover { background: var(--ai-wash); }
.voice .si-jp { font-size: 1.15rem; }

/* conversations */
.chat { display: grid; gap: 10px; max-width: 40rem; }
.bubble-row { display: flex; align-items: flex-end; gap: 8px; }
.bubble-row.you { justify-content: flex-end; }
.neko.avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.bubble { position: relative; max-width: 80%; border: 0; border-radius: 16px; padding: 10px 14px; cursor: pointer; text-align: left; font: inherit; }
.bubble .si-jp { font-size: 1.12rem; }
.bubble.them { background: var(--sunken); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble.you { background: var(--jade); color: #fff; border-bottom-right-radius: 4px; }
.bubble.you ruby rt { color: inherit; opacity: .85; }
.bubble.you.known::after { background: #fff; }
.chat-key { margin-top: .8rem; }
.key-you, .key-them { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.key-you { background: var(--jade); } .key-them { background: var(--sunken); border: 1px solid var(--rule); }

/* the receipt */
.receipt-wrap { display: grid; grid-template-columns: minmax(16rem, 20rem) 1fr; gap: 1.6rem; align-items: start; }
.paper-receipt { background: #FFFEFA; color: #222; font-family: var(--f-ja); font-size: .95rem; padding: 18px 18px 26px;
  box-shadow: var(--shadow-lift); position: relative;
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, #0000 98%, #000) 50% 100% / 14px 100% repeat-x;
          mask: radial-gradient(circle 6px at 50% 100%, #0000 98%, #000) 50% 100% / 14px 100% repeat-x; }
.pr-store { text-align: center; font-weight: 700; font-size: 1.15rem; letter-spacing: .1em; }
.pr-meta { text-align: center; font-size: .72rem; color: #777; margin: 2px 0 12px; }
.pr-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.pr-row.big { font-size: 1.1rem; font-weight: 700; }
.pr-row.small { font-size: .82rem; }
.pr-rule { border-top: 1px dashed #999; margin: 8px 0; }
.pr-foot { text-align: center; margin-top: 14px; font-size: .82rem; color: #555; }
.paper-receipt ruby rt { color: #777; }
.rc-term { border: 0; background: #FDF2C4; color: inherit; font: inherit; padding: 0 4px; border-radius: 3px; cursor: pointer; }
.rc-term:hover { background: #F8E08A; }
.rc-term.open { background: #D8EEDF; }
.rc-gloss > div { padding: 4px 0; }
.rc-gloss .eyebrow { margin-top: 1rem; }
.rc-gloss .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-item { position: relative; border: 1px solid var(--rule); background: var(--sheet); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.paper-receipt.mini { max-width: 18rem; margin: .8rem auto 0; font-size: .9rem; padding-bottom: 20px; }

/* in a quiz */
.q-scene { display: flex; justify-content: center; margin: 1rem 0; }
.q-scene .static { cursor: default; max-width: 30rem; }
.q-scene .plate { min-width: 12rem; min-height: 0; padding: 18px 22px; }
.q-scene .plate .si-jp { font-size: 1.8rem; }
.q-scene .plates-road .plate.tri, .q-scene.plates-road .plate.tri { padding-bottom: 44px; }
.q-scene .voice .si-jp, .q-scene .bubble .si-jp { font-size: 1.4rem; }

@media (max-width: 900px) {
  .receipt-wrap { grid-template-columns: 1fr; }
}


/* ---------- 練習帳 the notebook ---------- */
.bk-head .lede { max-width: 46rem; margin: 0 0 1rem; }
.bk-layout { display: grid; grid-template-columns: minmax(22rem, 30rem) minmax(0, 1fr); gap: 16px; align-items: start; }
.bk-left, .bk-right { display: grid; gap: 16px; min-width: 0; }
.bk-left .card, .bk-right .card { margin: 0; }

.bk-tools { display: grid; gap: 8px; margin-bottom: 12px; }
.bk-tool { display: flex; align-items: center; gap: 10px; }
.bk-tl { width: 3rem; flex: 0 0 3rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.bk-seg button { display: inline-flex; align-items: center; gap: 5px; }
.bk-seg button span { text-transform: capitalize; }
.pen-sample { width: 30px; height: 12px; }
.pen-sample path { fill: none; stroke: var(--ink); }
.pen-sample.pen-pencil path { stroke: var(--ink-2); }
.nib { display: inline-block; border-radius: 50%; background: var(--ink); }
.nib-fine { width: 4px; height: 4px; } .nib-medium { width: 7px; height: 7px; } .nib-broad { width: 11px; height: 11px; }

.bk-box-wrap { display: grid; justify-items: center; gap: 6px; }
.bk-box { position: relative; width: 100%; max-width: 26rem; aspect-ratio: 1; background: var(--sheet);
  border: 2px solid var(--rule); border-radius: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.05); overflow: hidden; }
.bk-box > svg, .bk-trace, .bk-trace svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-trace { display: grid; place-items: center; pointer-events: none; }
.bk-trace > span { font-family: var(--f-ja-serif); font-size: min(19rem, 70vw); line-height: 1; opacity: .12; }
.bk-grid line, .bk-guide line { stroke: var(--seal); opacity: .3; stroke-width: 4; stroke-dasharray: 22 18; }
.bk-ink { touch-action: none; cursor: crosshair; }
.bk-stroke path { fill: none; stroke: var(--ink); }
.bk-stroke.pen-pencil path { stroke: var(--ink-2); }
.bk-tracing { display: flex; gap: 12px; align-items: baseline; font-size: .85rem; color: var(--ink-2); }
.bk-tracing b { font-size: 1.05rem; color: var(--ink); }
.bk-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.bk-actions .bk-add { margin-left: auto; }
.bk-add kbd { font-size: .72rem; opacity: .7; margin-left: 4px; }

.bk-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .7rem; }
.bk-page-head h2 { margin: 0; }
.bk-paper { background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; padding: 10px; box-shadow: var(--shadow); }
.bk-page-svg { display: block; width: 100%; height: auto; }
.bk-sq-bg { fill: transparent; stroke: var(--rule); stroke-width: 10; }
.bk-sq.next .bk-sq-bg { fill: var(--jade-wash); stroke: var(--jade); stroke-width: 18; }
.bk-sq.just > .bk-stroke { animation: bkIn .35s cubic-bezier(.2, .9, .3, 1.2) both; transform-box: fill-box; transform-origin: center; }
@keyframes bkIn { from { opacity: 0; transform: scale(.6); } }
.bk-page-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

.bk-day + .bk-day { margin-top: 12px; }
.bk-day-label { font-size: .8rem; color: var(--ink-2); margin-bottom: 6px; }
.bk-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-thumb { display: grid; gap: 4px; justify-items: center; width: 96px; padding: 6px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--sheet); cursor: pointer; font-size: .7rem; color: var(--ink-3); transition: transform .12s, box-shadow .12s; }
.bk-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.bk-thumb.on { border-color: var(--seal); box-shadow: 0 0 0 2px var(--seal-wash); }
.bk-page-svg.thumb .bk-sq-bg { stroke-width: 16; }
.bk-page-svg.thumb .bk-stroke { stroke-width: 60; }

.bk-picker .card-head { flex-wrap: wrap; }
.bk-stage { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.bk-stage-box { position: relative; width: 7.5rem; height: 7.5rem; flex: 0 0 7.5rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); display: grid; place-items: center; }
.bk-stage-box svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.bk-stage-box > span { font-family: var(--f-ja-serif); font-size: 5rem; }
.bk-stage-side { display: grid; gap: 4px; }
.bk-stage-side b { font-size: 1.6rem; font-family: var(--f-ja); }
.bk-stage-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.bk-stage-empty { margin: 0 0 12px; }
.bk-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: 6px; max-height: 15rem; overflow-y: auto; padding: 2px; }
.bk-char { aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); font-size: 1.25rem; cursor: pointer; color: var(--ink); }
.bk-char:hover { border-color: var(--ink-3); }
.bk-char.ahead { color: var(--ink-3); opacity: .6; }
.bk-char.on { background: var(--seal); border-color: var(--seal); color: #fff; opacity: 1; }

@media (max-width: 1000px) and (min-width: 721px) {
  .bk-layout { grid-template-columns: 1fr; }
  .bk-box { max-width: 24rem; }
}


/* ============================================================
   コンビニ, the convenience store (js/konbini-ui.js)

   The store is lit the same in both themes: it's a picture of a shop,
   and a shop's fluorescent light doesn't dim at night. Packages, tags
   and labels are printed paper, so their ink is fixed dark.
   ============================================================ */

.kb-defs { position: absolute; width: 0; height: 0; }
.kb-modes { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; }
.kb-dotkey i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3D7A57; margin-right: 4px; vertical-align: 1px; }
.kb-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1000px) and (min-width: 721px) { .kb-body { grid-template-columns: minmax(0, 1fr) 270px; } }

/* the shop floor */
.kb-store { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-2); background: linear-gradient(#FBFAF5, #EFEDE6); color: #1E1D1A; }
.kb-ceiling { height: 26px; background: linear-gradient(#E7E4DC, #FBFAF5); position: relative; }
.kb-tube { position: absolute; top: 8px; height: 5px; width: 120px; border-radius: 3px; background: #FFFDF4;
  box-shadow: 0 0 10px 3px rgba(255, 251, 225, .9), 0 6px 40px 14px rgba(255, 251, 225, .45); }
.kb-aisles { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 0; position: relative; z-index: 2; }
.kb-chip { border: 1px solid #D6D0C2; background: #FBFAF6; color: #1E1D1A; border-radius: 999px; padding: 3px 11px; font-size: .82rem; }
.kb-chip small { color: #858074; }
.kb-walk { position: relative; }
.kb-strip { display: flex; gap: 30px; align-items: flex-end; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 14px 56px 0; scrollbar-width: none; }
.kb-strip::-webkit-scrollbar { display: none; }
.kb-sec { position: relative; flex: 0 0 auto; scroll-snap-align: start; scroll-margin-left: 48px; display: flex; flex-direction: column; align-items: center; }
.kb-sign { font: 600 .9rem var(--f-ja); padding: 4px 16px; border-radius: 6px; background: #2F4B7C; color: #fff; margin-bottom: 10px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.kb-sign small { font: 500 .7rem var(--f-body); opacity: .8; margin-left: 6px; }
.kb-sign .ink-no { opacity: .4; } .kb-sign rt { color: #fff; }
.kb-floor { height: 28px; background: linear-gradient(rgba(0, 0, 0, .06), transparent 40%), repeating-linear-gradient(90deg, #E4E1D9 0 58px, #CFCBC2 58px 60px); }
.kb-walkbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #D6D0C2; background: #FBFAF6; color: #1E1D1A; box-shadow: var(--shadow); display: grid; place-items: center; }
.kb-walkbtn .ico { width: 18px; height: 18px; }
.kb-walkbtn.l { left: 8px; } .kb-walkbtn.r { right: 8px; }

/* the cooler: a dark frame, a lit header, glass doors with the bright cold inside; the warmer is the same, warm */
.kb-cooler { background: linear-gradient(90deg, #2E3339, #454C54 50%, #2E3339); border-radius: 8px 8px 0 0; padding: 0 9px; }
.kb-cab-head { height: 22px; margin: 0 -9px 8px; border-radius: 8px 8px 0 0; background: linear-gradient(#F6F8FA, #DDE3E8); display: grid; place-items: center;
  font: 700 .68rem var(--f-body); color: #2F4B7C; letter-spacing: .12em; box-shadow: 0 4px 10px rgba(240, 248, 255, .6); }
.kb-doors { display: flex; gap: 9px; }
.kb-door { position: relative; border: 3px solid #A9B1B8; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#F7FAFC, #E6ECF0);
  padding: 0 14px 0 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 4px 0 14px rgba(255, 255, 255, .9); }
.kb-door::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(112deg, transparent 0 14%, rgba(255, 255, 255, .16) 14% 20%, transparent 20% 64%, rgba(255, 255, 255, .1) 64% 67%, transparent 67%); }
.kb-door::after { content: ""; position: absolute; right: 3px; top: 30%; height: 40%; width: 5px; border-radius: 3px; z-index: 5;
  background: linear-gradient(90deg, #8F979E, #E3E7EA, #9AA2A9); box-shadow: 1px 1px 2px rgba(0, 0, 0, .3); }
.kb-warmer { background: linear-gradient(90deg, #5A2F22, #7A4330 50%, #5A2F22); }
.kb-warmer .kb-cab-head { background: linear-gradient(#FFF1E2, #F6D7B8); color: #B5452E; letter-spacing: .04em; white-space: nowrap; }
.kb-warmer .kb-cab-head .ink-no { opacity: .4; }
.kb-warmer .kb-door { background: linear-gradient(#FFF6EA, #F8E4CC); border-color: #C9A27F; box-shadow: inset 0 0 18px rgba(255, 190, 120, .45); }
.kb-warmer .kb-shelf { background: linear-gradient(transparent calc(100% - 41px), #FFFFFF calc(100% - 41px), #E2CDB8 calc(100% - 36px), #F6B26B calc(100% - 36px), #E8954A calc(100% - 2px), rgba(0, 0, 0, .14) calc(100% - 2px)); }
/* the open chiller for onigiri, and the sweets gondola */
.kb-chiller { background: linear-gradient(#EEF1F2, #E2E6E8); border: 7px solid #CDD2D5; border-top-width: 0; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0 8px; }
.kb-canopy { height: 16px; margin: 0 -15px 10px; border-radius: 8px 8px 0 0; background: linear-gradient(#CDD2D5, #BFC5C9); position: relative; }
.kb-canopy::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -3px; height: 3px; border-radius: 2px; background: #FFFDF2; box-shadow: 0 2px 16px 6px rgba(255, 251, 225, .75); }
.kb-gondola { background: repeating-linear-gradient(90deg, #F1EFEA 0 10px, #E9E6DF 10px 11px); border: 6px solid #D9D5CC; border-bottom: 0; border-radius: 6px 6px 0 0; padding: 12px 8px 0; }

/* a shelf: its products spread evenly and stand on the shelf top; the rail runs its whole width under them */
.kb-shelf { display: flex; align-items: flex-end; justify-content: space-evenly; position: relative; margin: 0 auto;
  background: linear-gradient(transparent calc(100% - 41px), #FFFFFF calc(100% - 41px), #D3D8DB calc(100% - 36px), #F7D96A calc(100% - 36px), #E9C445 calc(100% - 2px), rgba(0, 0, 0, .14) calc(100% - 2px)); }
.kb-col { display: flex; flex-direction: column; align-items: center; width: 62px; position: relative; z-index: 1; }
.kb-col.wide { width: 86px; }
.kb-col .kb-prod { margin-bottom: 5px; }
.kb-rail { height: 36px; display: flex; justify-content: center; align-items: center; }
.kb-tag { width: 58px; height: 29px; background: #fff; border-radius: 2px; padding: 1px 3px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  font-family: var(--f-ja); color: #222; line-height: 1.1; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.kb-tag.two { height: 34px; }
.kb-col.wide .kb-tag { width: 80px; }
.kb-tag .n { font-weight: 700; text-align: center; white-space: nowrap; }
.kb-tag .n rt { font-size: .45em; }
.kb-tag .pr { font-size: 9.5px; font-weight: 700; display: flex; gap: 3px; align-items: baseline; }
.kb-tag .pr small { font-size: 6.5px; font-weight: 500; color: #666; }
.kb-ok { color: #3D7A57; font-size: 7px; font-weight: 700; }

/* products */
.kb-prod { position: relative; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; transition: transform .15s; cursor: pointer; }
.kb-prod:hover, .kb-prod:focus-visible { transform: translateY(-5px); outline: none; }
.kb-prod:focus-visible .kb-pk { outline: 2px solid var(--ai); outline-offset: 3px; border-radius: 4px; }
.kb-prod:hover .kb-ground { opacity: .45; }
.kb-prod.gone { visibility: hidden; }
.kb-prod.readable::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3D7A57; box-shadow: 0 0 0 1.5px #fff; z-index: 3; }
.kb-prod.wrong { animation: kb-shake .35s; }
@keyframes kb-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* a package: the drawing, the print on it (HTML, so it takes the ink), the gloss over both */
.kb-pk { position: relative; flex: 0 0 auto; color: #1E1D1A; }
.kb-pk > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kb-pk > .kb-gl { pointer-events: none; z-index: 2; }
.kb-lbl { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--f-ja); }
.kb-lc { background: #FFFEF8; border-radius: 1.5px; padding: 2px 2.5px; max-width: 100%; max-height: 100%; flex-shrink: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; box-shadow: 0 0 0 .4px rgba(0, 0, 0, .12); }
.kb-nm { font-weight: 900; line-height: 1.08; letter-spacing: -.01em; }
.kb-nm.r { line-height: 1.5; }
.kb-nm > span { display: block; white-space: nowrap; }
.kb-pk.vert .kb-nm { writing-mode: vertical-rl; letter-spacing: .06em; }
.kb-nm rt { font-size: .5em; line-height: 1; letter-spacing: 0; }
.kb-copy { font-weight: 500; white-space: nowrap; margin-top: .15em; }
.kb-copy rt { font-size: .5em; }
.kb-tg { background: #C2402F; color: #fff; border-radius: 1.5px; padding: 0 .3em; white-space: nowrap; margin-top: .25em; font-weight: 700; }
.kb-tg .ink-no { opacity: .5; }
.kb-brand { font: 700 3.8px var(--f-body); letter-spacing: .14em; opacity: .7; line-height: 1; margin-bottom: .2em; }
.kb-copy, .kb-tg, .kb-brand { display: none; }
.kb-big .kb-copy, .kb-big .kb-tg, .kb-big .kb-brand, .kb-zoom .kb-copy, .kb-zoom .kb-tg, .kb-zoom .kb-brand { display: block; }
/* a label that grows (the onigiri's sticker, the pudding's lid band) takes its slogan under the name in the hand */
.kb-pk.grow .kb-lbl { justify-content: flex-start; }
.kb-big .kb-pk.grow .kb-lc, .kb-zoom .kb-pk.grow .kb-lc { max-height: none; }
.kb-pk.onigiri .kb-lc { min-width: 100%; border-top: 2.5px solid var(--c); }

/* the register */
.kb-register { width: 240px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kb-clerk { width: 88px; height: auto; margin-bottom: -8px; }
.kb-counter { width: 100%; height: 60px; background: linear-gradient(#D3BE95, #BBA578); border-radius: 6px 6px 0 0; position: relative; margin-bottom: 8px; }
.kb-counter::before { content: ""; position: absolute; left: 16px; top: -28px; width: 56px; height: 30px; background: linear-gradient(#6A7077, #4C5157); border-radius: 5px 5px 0 0; }
.kb-register .tiny { color: #858074; margin: 0 8px 10px; }

/* in your hands */
.kb-hands { border: 1px solid var(--rule-2); border-radius: 12px; background: var(--sheet); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 30rem; position: sticky; top: 76px; }
.kb-hands h3 { margin: 0; font: 600 1.05rem var(--f-display); }
.kb-hhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kb-grab { display: none; }
.kb-empty { color: var(--ink-3); font-size: .88rem; text-align: center; margin: auto 0; padding: 12px; }
.kb-hold { display: flex; justify-content: center; align-items: center; height: 270px; background: radial-gradient(ellipse at 50% 45%, var(--sunken), transparent 70%); border-radius: 10px; }
.kb-big { transform: scale(2.1); }
.kb-big.s-onigiri, .kb-big.s-can, .kb-big.s-cup, .kb-big.s-box { transform: scale(2.6); }
.kb-big.s-pouch, .kb-big.s-tub { transform: scale(3.1); }
.kb-big.s-pack { transform: scale(3.6); }
.kb-back { width: 230px; background: #FFFEFA; color: #1E1D1A; border-radius: 6px; padding: 10px; font: .78rem/1.35 var(--f-ja); box-shadow: var(--shadow-lift); }
.kb-back .bh { font-size: .66rem; font-weight: 700; margin-bottom: 4px; }
.kb-back table { border-collapse: collapse; width: 100%; }
.kb-back td { border: 1px solid #9C978C; padding: 3px 5px; vertical-align: top; font-size: .72rem; }
.kb-back td:first-child { white-space: nowrap; font-weight: 500; background: rgba(0, 0, 0, .04); }
.kb-back rt { color: #777; }
.kb-sides { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.kb-terms { display: flex; flex-direction: column; gap: 6px; }
.kb-term { text-align: left; border: 1px solid var(--rule-2); background: var(--paper); border-radius: 9px; padding: 7px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; cursor: pointer; }
.kb-term .jp { font-size: 1.05rem; }
.kb-term .en { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-2); display: none; }
.kb-term.open .en { display: block; }
.kb-term .side { font-size: .66rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.kb-note { font-size: .82rem; color: var(--ink-2); background: var(--amber-wash); border-radius: 8px; padding: 8px 10px; margin: 0; }
.kb-note.good { background: var(--jade-wash); }
.kb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.kb-row .btn { flex: 1; }
.kb-stamps { display: flex; gap: 5px; }
.kb-st { font: 600 .76rem var(--f-ja-serif); border: 1.5px solid var(--rule); color: var(--ink-3); border-radius: 50%; width: 27px; height: 27px; display: grid; place-items: center; }
.kb-st.done { border-color: var(--seal); color: var(--seal); transform: rotate(-8deg); }
.kb-q { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.kb-q .q-ask { margin: 0; }
.kb-q .q-ask .jp { font-size: 1.3rem; color: var(--ink); }
.kb-opts { grid-template-columns: 1fr 1fr; gap: 8px; }
.kb-opts .opt { font-size: .92rem; min-height: 56px; padding: 10px 8px; }
.kb-q .verdict { min-height: 0; margin: 0; font-size: .95rem; }
.kb-list { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; background: repeating-linear-gradient(var(--sheet) 0 29px, var(--rule-2) 29px 30px); }
.kb-list ul { list-style: none; margin: 4px 0 0; padding: 0; }
.kb-list li { font-size: 1.15rem; height: 30px; display: flex; align-items: center; gap: 8px; }
.kb-list li.got { text-decoration: line-through; text-decoration-color: var(--jade); }
.kb-list li.got::before { content: "✓"; color: var(--jade); font-size: .9rem; }
.kb-receipt { padding-bottom: 22px; }
.kb-ps, .kb-hint { display: none; }


/* ---------- the sushi counter and the festival stalls, walked (js/stalls-ui.js) ---------- */

.kb-signword { position: relative; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
[data-act="kb-gloss"] { position: relative; }
.kb-gloss, .kb-signword .kb-gloss { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); z-index: 40; white-space: nowrap;
  background: #1E1D1A; color: #FBFAF6; font: 500 .72rem var(--f-body); padding: 3px 8px; border-radius: 6px; pointer-events: none; }
.kb-signword.known::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #3D7A57; box-shadow: 0 0 0 1.5px #fff; }

/* sushi: plates on the belt */
.ws-plate { position: relative; width: 96px; height: 76px; color: #1E1D1A; }
.ws-plate svg { position: absolute; left: 0; top: 0; width: 96px; height: 60px; overflow: visible; }
.ws-card { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: #FFFEF8; border: 1px solid #CFC7B6; border-radius: 2px;
  padding: 1px 6px; font: 700 10.5px/1.25 var(--f-ja); white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.ws-sushi { background: linear-gradient(#EFE7D6, #E4D6BC); }
/* the way in */
.ws-front { width: 290px; height: 100%; min-height: 470px; display: flex; flex-direction: column; }
.ws-eave { height: 30px; margin: 0 -6px; background: repeating-linear-gradient(90deg, #44464D 0 15px, #2E3036 15px 17px); border-radius: 0 0 4px 4px; box-shadow: 0 6px 10px rgba(0, 0, 0, .25); position: relative; z-index: 2; }
.ws-facade { flex: 1; position: relative; display: flex; justify-content: center; align-items: flex-end;
  background: linear-gradient(90deg, #5B3A21 0 10px, #EDE3CF 10px calc(100% - 10px), #5B3A21 calc(100% - 10px)); }
.ws-doorframe { position: relative; width: 168px; height: 360px; border: 11px solid #5B3A21; border-bottom: 0; background: #2A1E14; overflow: visible; }
.ws-doorframe::before { content: ""; position: absolute; left: -11px; right: -11px; top: -24px; height: 14px; background: #5B3A21; border-radius: 2px; }
.ws-lattice { position: absolute; inset: auto 0 0 0; height: 230px; background:
  repeating-linear-gradient(90deg, #7A5130 0 3px, transparent 3px 17px), repeating-linear-gradient(#7A5130 0 3px, transparent 3px 26px), linear-gradient(#F7E9C8, #EBD6A8); }
.ws-noren { position: absolute; left: 0; right: 0; top: 0; }
.ws-noren-cloth { display: flex; gap: 3px; }
.ws-noren-cloth b { flex: 1; height: 132px; background: linear-gradient(#2A3A5C, #1E2A44); color: #F4EEDF; display: flex; justify-content: center; padding-top: 30px;
  font: 700 2.4rem var(--f-ja-serif); border-radius: 0 0 3px 3px; box-shadow: 0 4px 8px rgba(0, 0, 0, .3); }
.ws-noren-cloth b .ink-no { opacity: .35; }
.ws-noren .kb-gloss { top: calc(100% + 8px); }
.ws-chochin { position: absolute; left: 14px; top: 64px; width: 30px; height: 46px; border-radius: 45%;
  background: radial-gradient(ellipse at 50% 45%, #FFE2B0, #E06A3A 60%, #B8322A); border-top: 4px solid #2B1A12; border-bottom: 4px solid #2B1A12; box-shadow: 0 0 22px 6px rgba(255, 170, 90, .35); }
/* inside: the wall, the kitchen, the belt, the bench */
.ws-wall { position: relative; display: flex; gap: 22px; align-items: flex-end; padding: 46px 22px 14px;
  background: repeating-linear-gradient(90deg, #C9A57A 0 34px, #BE986B 34px 36px); box-shadow: inset 0 -6px 0 #8C6239; }
.ws-lamps { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-around; pointer-events: none; }
.ws-lamps i { width: 2px; height: 22px; background: #3A2A1C; position: relative; }
.ws-lamps i::after { content: ""; position: absolute; left: -15px; top: 22px; width: 32px; height: 14px; border-radius: 16px 16px 4px 4px; background: #2E2A26;
  box-shadow: 0 10px 26px 8px rgba(255, 236, 190, .55); }
.ws-plaques { display: flex; gap: 6px; padding-top: 12px; border-top: 3px solid #5B3A21; }
.ws-plaque { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 32px; min-height: 92px; padding: 7px 0 6px;
  background: linear-gradient(90deg, #F6E9CD, #EBD9B4); border: 1.5px solid #8C6239; border-radius: 2px; color: #2A1E14; box-shadow: 0 2px 3px rgba(0, 0, 0, .2); }
.ws-plaque-jp { writing-mode: vertical-rl; font: 700 15px/1 var(--f-ja-serif); letter-spacing: .08em; }
.ws-kitchen { display: flex; align-items: flex-end; gap: 34px; padding: 16px 36px 0; min-height: 128px;
  background: linear-gradient(#DCCBAA, #D3BF9B); border-bottom: 10px solid #B9BFC4; }
.ws-chef { position: relative; width: 104px; height: 104px; margin-bottom: -8px; }
.ws-cat { position: absolute; left: 6px; top: 16px; width: 92px; height: 92px; }
.ws-cap { position: absolute; left: 30px; top: 0; width: 44px; height: 26px; background: #FFFFFF; border-radius: 12px 12px 4px 4px; box-shadow: inset 0 -4px 0 #E3E1DA, 0 1px 2px rgba(0, 0, 0, .15); }
.ws-coat { position: absolute; left: 22px; bottom: 0; width: 60px; height: 22px; background: #FFFFFF; border-radius: 14px 14px 0 0; box-shadow: inset 0 3px 0 #E3E1DA; }
.ws-coat::after { content: ""; position: absolute; left: 27px; top: 2px; width: 6px; height: 18px; background: linear-gradient(135deg, transparent 45%, #CFCBC1 45% 55%, transparent 55%); }
.ws-board-cut { width: 92px; height: 16px; margin-bottom: 4px; background: linear-gradient(#F3E6CB, #E2CFA6); border-radius: 3px; box-shadow: 0 2px 2px rgba(0, 0, 0, .2); position: relative; }
.ws-board-cut i { position: absolute; left: 14px; top: 5px; width: 54px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #9AA1A7 0 70%, #5B3A21 70%); }
.ws-gari { width: 26px; height: 11px; border-radius: 50%; background: #F3F0E8; border: 1px solid #D2CCBE; display: grid; place-items: center; }
.ws-gari i { width: 14px; height: 6px; border-radius: 50%; background: #F2B7B5; }
.ws-shoyu { width: 12px; height: 26px; border-radius: 3px 3px 2px 2px; background: linear-gradient(90deg, #2A1A12, #4A2E1E, #2A1A12); position: relative; }
.ws-shoyu::before { content: ""; position: absolute; left: 2px; top: -6px; width: 8px; height: 7px; border-radius: 3px 3px 0 0; background: #C0392B; }
.ws-hashi { width: 40px; height: 4px; border-radius: 2px; background: #8C6239; box-shadow: 0 6px 0 #8C6239; }
.ws-board { margin-left: auto; align-self: center; display: flex; gap: 10px; background: #5B3A21; border: 3px solid #3E2714; border-radius: 4px; padding: 7px 10px; color: #FBEBD3; font: 700 .78rem var(--f-body); }
.ws-board span { display: flex; align-items: center; gap: 5px; }
.ws-board i, .ws-dot { display: inline-block; width: 18px; height: 9px; border-radius: 50%; border: 2px solid; vertical-align: -1px; }
.ws-dot { width: 12px; height: 7px; border-width: 0; }
.ws-case { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ws-case-glass { display: flex; gap: 3px; padding: 6px 8px; min-width: 0; justify-content: center; border-radius: 6px 6px 2px 2px; background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(214, 232, 240, .55)); border: 2px solid #B9C6CC; }
.ws-case-glass i { width: 10px; height: 6px; border-radius: 1px; }
.ws-case-label, .ws-tag { background: #FFFEF8; color: #1E1D1A; border: 1px solid #CFC7B6; border-radius: 2px; padding: 0 6px; font: 700 .82rem var(--f-ja); }
.ws-slot { position: relative; display: flex; justify-content: center; width: 104px; }
.ws-tick { position: absolute; right: 6px; top: -4px; }
.ws-bench { display: flex; gap: 26px; align-items: center; padding: 16px 24px 18px; margin-top: 8px; border-radius: 0 0 6px 6px; background: linear-gradient(#B98D5A, #9C7344); }
.ws-wasabi, .ws-slipsign { display: flex; align-items: center; gap: 6px; }
.ws-slipsign small { color: #F6EAD6; font: 500 .7rem var(--f-body); }
.ws-dish { width: 34px; height: 14px; border-radius: 50%; background: #F3F0E8; border: 1px solid #D2CCBE; display: grid; place-items: center; }
.ws-dish i { width: 12px; height: 7px; border-radius: 50%; background: #8DB255; }
.ws-tea { width: 22px; height: 26px; border-radius: 3px 3px 7px 7px; background: linear-gradient(90deg, #6C7A5A, #8A9A74, #5E6B4E); }

/* the festival: a summer night, lanterns overhead, a street of stalls, each its own */
.ws-night { background: linear-gradient(#0F1530, #241F44 50%, #3A2C3E); border-color: #241F44; position: relative; }
.ws-sky { position: absolute; inset: 0 0 auto 0; height: 160px; pointer-events: none;
  background: radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 34% 12%, #fff, transparent), radial-gradient(1.4px 1.4px at 58% 26%, #fff, transparent),
              radial-gradient(1px 1px at 72% 10%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 30%, #fff, transparent), radial-gradient(1px 1px at 22% 38%, #fff, transparent); }
.ws-moon { position: absolute; right: 9%; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: #FFF4CF; box-shadow: 0 0 24px 6px rgba(255, 240, 190, .35); }
.ws-trees { position: absolute; left: 0; right: 0; top: 70px; height: 90px; opacity: .55;
  background: radial-gradient(circle at 6% 100%, #0B0F22 0 60px, transparent 61px), radial-gradient(circle at 22% 100%, #0B0F22 0 80px, transparent 81px), radial-gradient(circle at 44% 100%, #0B0F22 0 56px, transparent 57px),
              radial-gradient(circle at 66% 100%, #0B0F22 0 84px, transparent 85px), radial-gradient(circle at 88% 100%, #0B0F22 0 66px, transparent 67px); }
.ws-lstring { display: flex; justify-content: space-between; position: relative; pointer-events: none; }
.ws-lstring::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1.5px; background: #1A1210; }
.ws-lstring i { width: 14px; height: 18px; margin-top: 3px; border-radius: 45%; background: radial-gradient(ellipse at 50% 45%, #FFE2B0, #F08A3C 55%, #C8323A);
  box-shadow: 0 0 10px 3px rgba(255, 160, 80, .45); animation: ws-glow 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ws-glow { 50% { box-shadow: 0 0 14px 5px rgba(255, 170, 90, .6); } }
.ws-lstring.over { position: absolute; left: 0; right: 0; top: 22px; padding: 0 10px; z-index: 1; }
.ws-lstring.under { position: absolute; left: 6px; right: 6px; top: 2px; }
.ws-lstring.under i { width: 10px; height: 13px; }
.ws-street { padding-top: 92px; gap: 22px; align-items: flex-end; position: relative; }
.ws-ground { height: 26px; background: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(#4A3A35, #3A2D29); }
.ws-gate { justify-content: flex-end; padding-bottom: 0; align-items: center; gap: 12px; }
.ws-torii { position: relative; width: 170px; height: 260px; }
.ws-torii::before { content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 14px; background: #C8323A; border-radius: 40% 40% 4px 4px / 100% 100% 4px 4px; box-shadow: 0 6px 0 #1A1210; }
.ws-torii::after { content: ""; position: absolute; left: 6px; right: 6px; top: 32px; height: 9px; background: #C8323A; }
.ws-torii i { position: absolute; top: 12px; bottom: 0; width: 12px; background: #B02A31; }
.ws-torii i:first-child { left: 22px; } .ws-torii i:last-child { right: 22px; }
.ws-lantern { width: 34px; height: 44px; border-radius: 45%; display: grid; place-items: center; font: 700 1.2rem var(--f-ja-serif); color: #3A0C08;
  background: radial-gradient(ellipse at 50% 45%, #FFD9A0, #F08A3C 55%, #C8323A); box-shadow: 0 0 18px 4px rgba(255, 160, 80, .45);
  border-top: 4px solid #2B1A12; border-bottom: 4px solid #2B1A12; }
.ws-lantern .ink-no { opacity: .3; }
.ws-lanterns { display: flex; gap: 8px; }
.ws-lanterns .kb-gloss { top: calc(100% + 8px); }

/* a stall, built the way they are: a roof on poles with the name along it,
   lanterns and bulbs under the eaves, someone in the light, a counter at
   waist height with the cooking on it beside the food, cloth below */
.fs-stall { position: relative; width: 220px; display: flex; flex-direction: column; align-items: center; color: #1E1D1A; }
.fs-roof { width: 108%; height: 34px; position: relative; z-index: 2; }
.fs-roof.stripes { background: repeating-linear-gradient(90deg, var(--c) 0 22px, #FBF6EC 22px 44px); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.fs-roof.stripes.thin { height: 22px; }
.fs-roof.tent { height: 44px; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 80%, #000)); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.fs-roof.tiles { height: 30px; width: 112%; background: repeating-linear-gradient(90deg, #3A3C42 0 12px, #2A2C31 12px 14px); border-radius: 4px 4px 0 0; box-shadow: 0 4px 0 #1A1210; }
.fs-valance { width: 104%; margin-top: -1px; padding: 4px 6px 6px; background: #FFF8EA; border-bottom: 3px solid var(--c); text-align: center; position: relative; z-index: 2; }
/* the scalloped edge hangs below (a mask would clip the meaning that shows under the name) */
.fs-valance::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; background: radial-gradient(circle 7px at 50% 0, var(--c) 98%, #0000) 50% 0 / 14px 100% repeat-x; }
.fs-valance:has(.kb-gloss), .fs-board:has(.kb-gloss), .fs-noren:has(.kb-gloss) { z-index: 30; }
.fs-valance.solid { background: var(--c); border-bottom: 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18); } .fs-valance.solid::after { display: none; }
.fs-name { font: 900 1.55rem/1.1 var(--f-ja); letter-spacing: .06em; color: var(--c); white-space: nowrap; }
.fs-valance.solid .fs-name { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.fs-name .ink-no { opacity: .35; }
.fs-board { width: 112%; padding: 8px 6px; margin-bottom: -2px; background: linear-gradient(135deg, #FFF3C4, #FFE08A); border: 4px solid var(--c); border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 0 3px #fff; text-align: center; position: relative; z-index: 3; }
.fs-board .fs-name { font-size: 1.75rem; text-shadow: 2px 2px 0 #fff; }
.fs-noren { display: flex; gap: 2px; width: 92%; margin-top: 4px; position: relative; z-index: 3; padding: 0; border: 0; background: none; cursor: pointer; }
.fs-name.kb-nameplate { color: var(--c); font: 900 1.55rem/1.1 var(--f-ja); letter-spacing: .06em; cursor: pointer; }
.fs-board .fs-name.kb-nameplate { font-size: 1.75rem; }
.fs-valance.solid .fs-name.kb-nameplate { color: #fff; }
.fs-noren b { flex: 1; height: 50px; display: flex; justify-content: center; padding-top: 5px; background: #2A3A5C; color: #F4EEDF; font: 700 1.35rem var(--f-ja-serif); border-radius: 0 0 3px 3px; }
.fs-noren b .ink-no { opacity: .35; }
.fs-body { position: relative; width: 96%; height: var(--h); display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  background: linear-gradient(rgba(255, 220, 160, .22), rgba(255, 220, 160, .06) 55%, transparent 55%); }
.fs-body::before, .fs-body::after { content: ""; position: absolute; top: -4px; bottom: 0; width: 6px; background: linear-gradient(90deg, #8E959B, #C9CED2, #8E959B); }
.fs-body::before { left: 0; } .fs-body::after { right: 0; }
.t-cart .fs-body::before, .t-cart .fs-body::after { background: #5A3D22; width: 8px; }
.ws-lstring.eaves { position: absolute; left: 6px; right: 6px; top: 0; z-index: 2; }
.ws-lstring.eaves i { width: 14px; height: 19px; }
.fs-bulb { position: absolute; top: 30px; width: 9px; height: 12px; margin-left: -4px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 14px 6px rgba(255, 230, 160, .55); }
.fs-bulb::before { content: ""; position: absolute; left: 4px; top: -18px; width: 1px; height: 18px; background: #1A1210; }
.fs-cook { position: absolute; left: 50%; bottom: calc(42% + 50px); transform: translateX(-50%); z-index: 0; }
.fs-cook.person i { display: block; width: 46px; height: 62px; border-radius: 23px 23px 6px 6px; background: rgba(20, 16, 30, .45); }
.fs-counter { position: relative; z-index: 2; width: 100%; height: 0; }
.fs-counter::after { content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 12px; background: linear-gradient(#B98D5A, #8C6239); border-radius: 2px; box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.fs-rig { position: absolute; left: 4px; bottom: 0; width: 104px; height: 45px; }
.fs-counter .kb-prod { position: absolute; right: 6px; bottom: 2px; z-index: 3; }
.fs-counter .ws-food.bare { transform: scale(1.45); transform-origin: bottom center; }
.fs-front { position: relative; width: 100%; height: 42%; margin-top: 12px; background: repeating-linear-gradient(90deg, #C8323A 0 16px, #FBF6EC 16px 32px); box-shadow: inset 0 8px 8px -6px rgba(0, 0, 0, .4); }
.t-tent .fs-front { background: linear-gradient(color-mix(in srgb, var(--c) 85%, #000), var(--c)); }
.t-cart .fs-front { background: repeating-linear-gradient(90deg, #6B4A2B 0 22px, #5A3D22 22px 24px); }
.t-board .fs-front { background: repeating-linear-gradient(90deg, #FBF6EC 0 16px, var(--c) 16px 32px); }
.fs-front .ws-price { position: absolute; left: 50%; top: 10px; right: auto; transform: translateX(-50%) rotate(-2deg); }
.fs-wheels { position: absolute; left: 0; right: 0; bottom: -10px; height: 0; }
.fs-wheels i { position: absolute; bottom: 0; width: 44px; height: 44px; border-radius: 50%; border: 5px solid #2A1A10; background: radial-gradient(circle, #2A1A10 0 4px, transparent 5px), repeating-conic-gradient(#2A1A10 0 8deg, #6B4A2B 8deg 45deg); }
.fs-wheels i:first-child { left: 10px; } .fs-wheels i:last-child { right: 10px; }
.ws-torii-lanterns { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 2; }
.ws-torii-lanterns .ws-lanterns { gap: 4px; }
.ws-torii-lanterns .ws-lantern { width: 28px; height: 38px; font-size: 1rem; }
.ws-food { position: relative; width: 72px; height: 56px; }
.ws-food svg { width: 72px; height: 56px; overflow: visible; }
.ws-food:not(.bare) { height: 74px; }
.ws-slip { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: #FFF6E0; color: #B3241B; border: 1px solid #C9A877; border-radius: 2px;
  padding: 0 6px; font: 900 10.5px/1.35 var(--f-ja); white-space: nowrap; }
.ws-price { position: absolute; right: -10px; top: 92px; background: #FFFEF8; border: 1px solid #CFC7B6; border-radius: 2px; padding: 2px 6px; font: .72rem/1.25 var(--f-ja);
  display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transform: rotate(4deg); z-index: 3; }
.ws-price b { font: 700 .78rem var(--f-body); }
.ws-hitotsu { font-weight: 700; }
.ws-flag { position: absolute; left: 8px; top: 40px; background: #F7D14A; color: #8E1C14; border: 1px solid #8E1C14; font: 700 .72rem var(--f-ja); padding: 1px 5px; transform: rotate(-6deg); z-index: 3; }
.kb-big.s-plate { transform: scale(2.4); }
.kb-big.s-food { transform: scale(2.6); }
.ws-signs, .ws-phone-lanterns { display: none; }

/* ---------- 看板, the street of signs (js/street-ui.js) ---------- */

.st-pavement { height: 28px; background: repeating-linear-gradient(90deg, #CFCBC2 0 46px, #BDB8AE 46px 48px); box-shadow: inset 0 4px 0 #A8A398; }
.st-at { position: relative; display: flex; flex-direction: column; align-items: center; }
.st-at .kb-ok { position: absolute; right: -6px; top: -8px; font-size: 9px; }
.st-at .kb-prod.readable::after { bottom: -9px; }

/* the signs: HTML, so the words take the ink */
.st-sign { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: nowrap;
  font: 700 15px/1.2 var(--f-ja); color: #1E1D1A; padding: 4px 9px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .18); position: relative; }
.st-sign rt { font-size: .5em; }
.st-picto { height: 22px; width: auto; }
.st-arrow { font: 700 16px var(--f-body); }
.st-sign.hang { background: #FFFDF6; border: 3px solid #8C6239; font-size: 16px; padding: 5px 12px; margin-top: 18px; }
.st-sign.hang::before { content: ""; position: absolute; left: 22%; right: 22%; top: -19px; height: 18px; border: 1.5px solid #5A3A1E; border-bottom: 0; transform: perspective(40px) rotateX(30deg); }
.st-sign.hang.open { color: #C0392B; } .st-sign.hang.shut { color: #2F4B7C; }
.st-sign.board { background: #2B2E2C; color: #FBFAF6; border: 3px solid #8C6239; font-size: 14px; }
.st-sign.board.small { font-size: 12px; }
.st-hours { font: 500 11px var(--f-body); color: #E7E2D6; }
.st-sign.band { background: #2E8B57; color: #fff; font-size: 12px; padding: 2px 14px; border-radius: 2px; }
.st-sign.pop { padding: 5px 10px; }
.st-sign.pop.red { background: #D2232A; color: #fff; }
.st-big { font: 800 20px/1 var(--f-body); color: #FFE14D; }
.st-sign.pop.bubble { background: #fff; color: #2F4B7C; border: 2px solid #2F4B7C; border-radius: 14px; }
.st-sign.pop.bubble::after { content: ""; position: absolute; left: 14px; bottom: -8px; border: 6px solid transparent; border-top-color: #2F4B7C; }
.st-wifi { font: 700 12px var(--f-body); }
.st-sign.dot { width: 58px; height: 58px; border-radius: 50%; background: #FFE14D; color: #D2232A; border: 3px solid #D2232A; font-size: 16px; padding: 0; }
.st-sign.card { background: #fff; border: 2px solid #D2232A; color: #D2232A; font-size: 12px; padding: 2px 8px; transform: rotate(-4deg); }
.st-sign.ceiling { background: #FFFFFF; border: 1px solid #BDB8AE; font-size: 15px; padding: 4px 14px; margin-top: 16px; }
.st-sign.ceiling::before { content: ""; position: absolute; left: 12px; right: 12px; top: -17px; height: 16px; border-left: 1.5px solid #6B6B6B; border-right: 1.5px solid #6B6B6B; }
.st-sign.paper { width: 74px; height: 96px; background: #FFFFFF; font-size: 15px; writing-mode: vertical-rl; letter-spacing: .1em; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); }
.st-sign.paper::before, .st-sign.paper::after { content: ""; position: absolute; width: 26px; height: 9px; background: rgba(240, 225, 170, .8); }
.st-sign.paper::before { left: -8px; top: 4px; transform: rotate(-35deg); } .st-sign.paper::after { right: -8px; bottom: 4px; transform: rotate(-35deg); }
.st-sign.wc { flex-direction: row; background: #1F5FAE; color: #fff; gap: 6px; padding: 5px 12px; }
.st-sign.door-m, .st-sign.door-f { color: #fff; padding: 6px 10px; font-size: 18px; }
.st-sign.door-m { background: #1F5FAE; } .st-sign.door-f { background: #D2232A; }
.st-sign.rule { background: #FFFFFF; border: 1px solid #CFCBC2; font-size: 13px; }
.st-ban { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.st-ban svg:last-child { position: absolute; inset: 0; }
.st-ban .st-picto { height: 20px; }
.st-sign.smoke { flex-direction: row; background: #5E6B74; color: #fff; gap: 6px; }
.st-sign.exit { flex-direction: row; background: #1E8C4E; color: #fff; gap: 6px; padding: 5px 10px; }
.st-sign.tape { padding: 6px 10px; background: repeating-linear-gradient(45deg, #F7D046 0 9px, #222 9px 18px); }
.st-sign.tape .st-w { background: #fff; padding: 1px 6px; border-radius: 2px; }
.st-sign.hang .ink-no, .st-sign.doorplate .ink-no, .st-sign.rule .ink-no, .st-sign.ceiling .ink-no, .st-sign.paper .ink-no, .st-sign.pop.bubble .ink-no, .st-sign.card .ink-no, .st-sign.tape .ink-no { opacity: .3; }
.kb-big.s-sign { transform: scale(2); }

/* the shops: buildings of their own heights along one pavement, a pole
   and wires between them; each a floor or three over a shopfront */
.st-street { background: linear-gradient(#BFD7E8, #DCEAF3 40%, #EEF2F1 75%, #F3EFE6); }
.st-strip { padding: 24px 56px 0; gap: 0; align-items: flex-end; position: relative; }
.st-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 70px; height: 40px; pointer-events: none;
  border-top: 1.5px solid rgba(40, 40, 50, .45); border-radius: 50% 50% 0 0 / 30px 30px 0 0; }
.st-pole { position: absolute; left: -4px; bottom: 0; width: 9px; height: 640px; background: linear-gradient(90deg, #8E8A82, #B9B4AA, #8E8A82); z-index: 4; }
.st-pole::before { content: ""; position: absolute; left: -16px; top: 30px; width: 42px; height: 5px; background: #6E6A63; box-shadow: 0 14px 0 #6E6A63; }
.st-shop { position: relative; height: var(--bh); display: flex; flex-direction: column; color: #1E1D1A; border-right: 6px solid #B9B3A7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.st-floor { position: relative; height: 104px; display: flex; justify-content: space-around; align-items: center; padding: 0 18px; flex: 0 0 auto; }
.st-win { position: relative; width: 58px; height: 62px; background: linear-gradient(160deg, #DDEBF3, #A9C1D1); border: 4px solid #E9E4DA; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); overflow: hidden; }
.st-win b { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: repeating-linear-gradient(90deg, #F4EFE4 0 5px, #E8E1D2 5px 7px); }
.st-win.lit { background: linear-gradient(160deg, #FFF3D2, #F2D69A); }
.st-win::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #E9E4DA; }
.st-rail { position: absolute; left: 12px; right: 12px; bottom: 8px; height: 24px; border: 3px solid #3E4247; border-bottom-width: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, #3E4247 10px 12px); }
.st-rail.wood { border-color: #5A3D22; background: repeating-linear-gradient(90deg, transparent 0 10px, #5A3D22 10px 13px); }
.st-ac { position: absolute; right: 12px; bottom: 6px; width: 48px; height: 30px; background: #F1F0EC; border: 1px solid #C9C5BB; border-radius: 3px; box-shadow: inset 0 -8px 0 #DAD6CC;
  background-image: radial-gradient(circle at 70% 45%, #C9C5BB 0 9px, transparent 10px); }
.st-ac.left { right: auto; left: 12px; }
.st-floor.brick { background: repeating-linear-gradient(0deg, #A8634A 0 11px, #E8DACB 11px 13px); }
.st-floor.old { background: repeating-linear-gradient(90deg, #8A7558 0 22px, #7D694E 22px 24px); }
.st-floor.old .st-win { border-color: #4A3B2A; }
.st-floor.panel { background: #F1EFEA; box-shadow: inset 0 -3px 0 #DCD8CF; }
.st-floor.panel .st-win { width: 76px; border-color: #C9C5BB; }
.st-floor.glass { height: 88px; background: linear-gradient(160deg, #9FC0D4, #6F93AA); box-shadow: inset 0 -6px 0 #C9D2D8; padding: 0 8px; gap: 6px; }
.st-floor.glass .st-win { flex: 1; height: 70px; border: 0; border-right: 3px solid #C9D2D8; background: linear-gradient(160deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05)); }
.st-floor.glass .st-win b, .st-floor.glass .st-win::after { display: none; }
.st-floor.tile { background: repeating-linear-gradient(90deg, #D8D4CA 0 30px, #CEC9BE 30px 31px); }
.st-fascia { min-height: 46px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 4px 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, .18); position: relative; z-index: 2; flex: 0 0 auto; }
.st-name { font: 800 1.2rem/1.15 var(--f-ja); letter-spacing: .08em; white-space: nowrap; }
.st-name .ink-no { opacity: .4; }
.st-name .kb-gloss { font-size: .72rem; letter-spacing: 0; }
.st-fascia.green { background: #23453A; } .st-name.gold { color: #E8C878; font-family: var(--f-ja-serif); }
.st-fascia.wood { background: linear-gradient(#E9D6AE, #D8BF8F); border: 3px solid #4E3424; } .st-fascia.wood .st-name { font-family: var(--f-ja-serif); color: #2A1A10; font-size: 1.35rem; }
.st-fascia.led { background: linear-gradient(#22A39D, #1B847F); } .st-fascia.led .st-name { color: #fff; }
.st-fascia.old { background: #6B5A44; } .st-fascia.old .st-name { color: #F1E8D6; font-family: var(--f-ja-serif); }
.st-fascia.plate { background: linear-gradient(#B9BEC3, #9EA4AA); } .st-fascia.plate .st-name { color: #2A2E33; font-size: 1.05rem; letter-spacing: .2em; }
.st-logo { width: 30px; height: 30px; }
.st-front { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 14px; padding: 0 16px; }
.st-curb { position: absolute; left: 10px; right: 10px; bottom: 0; display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px; pointer-events: none; z-index: 3; }
.st-curb > * { pointer-events: auto; }
.st-curb.wide { justify-content: space-between; } .st-curb.left { justify-content: flex-start; }
.st-plant { width: 34px; height: 52px; }
.st-bike { width: 100px; height: 60px; }
.st-tanuki { width: 44px; height: 62px; }
/* the café */
.st-cafe { width: 420px; background: #E9DCC4; }
.st-cafe .st-front { padding-right: 104px; padding-top: 40px; background: linear-gradient(transparent 82%, #A8634A 82%); }
.st-canvas { position: absolute; left: 6px; right: 6px; top: 0; height: 30px; background: linear-gradient(#2F5C4D, #23453A); clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
  -webkit-mask: radial-gradient(circle 8px at 50% 100%, #0000 98%, #000) 50% 100% / 16px 100% repeat-x; mask: radial-gradient(circle 8px at 50% 100%, #0000 98%, #000) 50% 100% / 16px 100% repeat-x; }
.st-window.lace { position: relative; width: 138px; height: 150px; margin-bottom: 40px; border: 6px solid #3E2A1C; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding-bottom: 8px;
  background: radial-gradient(circle at 10px 0, #fff 0 6px, transparent 6.5px) 0 0 / 20px 22px repeat-x, linear-gradient(#FFF6DE, #F0D7A6); }
.st-table { position: absolute; bottom: 10px; width: 34px; height: 30px; background: linear-gradient(#6B4226 0 5px, transparent 5px), linear-gradient(90deg, transparent 15px, #6B4226 15px 19px, transparent 19px); }
.st-table:nth-child(1) { left: 12px; } .st-table:nth-child(2) { right: 12px; }
.st-decal { width: 46px; height: 34px; } .st-glass-text { font: 700 .55rem var(--f-body); letter-spacing: .14em; color: #8C6239; }
.st-door { position: relative; width: 96px; height: 214px; }
.st-door.double { width: 132px; height: 206px; display: flex; gap: 4px; padding: 6px; background: #3E2A1C; }
.st-pane { flex: 1; background: linear-gradient(160deg, #FFF4DA, #E8C890 70%, #C9A06A); box-shadow: inset 0 0 0 3px #5B3A24; }
.st-at.on-door { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); z-index: 2; }
.st-at.on-door.low { top: 74px; }
.st-at.on-handle { position: absolute; right: 18px; top: 110px; z-index: 2; }
.st-wallside { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-bottom: 90px; }
.st-lamp { width: 18px; height: 24px; border-radius: 9px 9px 3px 3px; background: radial-gradient(circle at 50% 70%, #FFF3C4, #F2C25A); box-shadow: 0 0 16px 4px rgba(255, 220, 140, .6); }
.st-easel { position: relative; display: flex; flex-direction: column; align-items: center; margin-right: 6px; }
.st-easel i { width: 70px; height: 30px; margin-top: -4px; background: linear-gradient(90deg, transparent 10px, #6B4226 10px 14px, transparent 14px 56px, #6B4226 56px 60px, transparent 60px); }
/* the ramen shop */
.st-ramen { width: 290px; background: #3A271B; }
.st-tileroof { height: 46px; margin: 0 -10px; background: repeating-linear-gradient(90deg, #3A3C42 0 14px, #2A2C31 14px 16px); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); box-shadow: 0 6px 10px rgba(0, 0, 0, .3); flex: 0 0 auto; }
.st-ramen .st-front { padding-left: 14px; gap: 12px; }
.st-door.slide { width: 128px; height: 200px; overflow: visible; background:
  repeating-linear-gradient(90deg, #6B4226 0 3px, transparent 3px 16px), repeating-linear-gradient(#6B4226 0 3px, transparent 3px 24px), linear-gradient(#F4E3BE, #E6CC97); border: 7px solid #2A1A10; border-bottom: 0; }
.st-noren { position: absolute; left: -7px; right: -7px; top: 0; height: 62px; display: grid; place-items: center; box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
  background: repeating-linear-gradient(90deg, #B3241B 0 calc(33.3% - 2px), #8E1C14 calc(33.3% - 2px) 33.3%); color: #FBF6EC; font: 700 1rem var(--f-ja-serif); letter-spacing: .3em; }
.st-door.slide .on-handle { right: auto; left: 8px; top: 120px; }
.st-sidecol { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.st-lantern { width: 44px; height: 66px; border-radius: 45%; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 45%, #FFE2B0, #E0503A 60%, #B8322A); border-top: 5px solid #1A100A; border-bottom: 5px solid #1A100A; box-shadow: 0 0 22px 6px rgba(255, 150, 90, .35); }
.st-lantern span { writing-mode: vertical-rl; font: 700 .7rem var(--f-ja-serif); color: #2A0A06; }
.st-ticketmachine { width: 52px; height: 92px; background: linear-gradient(#E9ECEE, #C9CED2); border-radius: 4px 4px 0 0; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; }
.st-ticketmachine i { height: 30px; background: repeating-linear-gradient(90deg, #F2B33C 0 8px, #fff 8px 10px); border-radius: 2px; }
.st-ticketmachine b { height: 8px; background: #3E4247; border-radius: 2px; }
.st-menuboard { width: 78px; height: 100px; margin-bottom: 70px; background: #1A120C; border: 3px solid #6B4226; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; }
.st-menuboard i { border-radius: 2px; background: radial-gradient(circle at 50% 55%, var(--c) 0 9px, #F2E6C4 10px 13px, #fff 14px); }
/* the drugstore */
.st-drug { width: 470px; background: #F4F6F6; }
.st-sode { position: absolute; left: -2px; top: 40px; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: #E2554B; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.st-sode b { font: 900 1.6rem/1.1 var(--f-ja); color: #fff; }
.st-sode .ink-no { opacity: .5; }
.st-front.glass { background: #E9EEEF; margin: 8px 8px 0; border: 5px solid #9AA6AC; border-bottom: 0; padding: 0; gap: 0; align-items: stretch; }
.st-shopwin { position: relative; flex: 1; background: linear-gradient(#FFFFFF, #EEF4F6); overflow: hidden; }
.st-stock { position: absolute; left: 10px; right: 10px; bottom: 60px; display: flex; flex-direction: column; gap: 10px; }
.st-row { display: flex; gap: 3px; padding-bottom: 3px; border-bottom: 4px solid #C9CED2; }
.st-row i { flex: 1; height: 22px; border-radius: 2px 2px 0 0; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), inset 3px 0 0 rgba(255, 255, 255, .35); }
.st-row:nth-child(2) i { height: 16px; } .st-row:nth-child(3) i { height: 26px; }
.st-pop-top { position: absolute; left: 14px; top: 8px; z-index: 2; }
.st-till { position: absolute; right: 14px; top: 0; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.st-till i { width: 54px; height: 26px; margin-top: 4px; background: #4E555B; border-radius: 3px; box-shadow: inset 0 6px 0 #6A7279; }
.st-door.auto { width: 128px; height: 100%; background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(205, 225, 232, .65)); border-left: 5px solid #9AA6AC; box-shadow: inset 62px 0 0 -60px #9AA6AC; }
.st-at.on-glass { position: absolute; left: 0; right: 0; top: 110px; }
.st-at.on-glass-low { position: absolute; left: 0; right: 0; top: 176px; }
.st-nobori { width: 26px; height: 150px; background: #C8323A; border-left: 3px solid #8E959B; display: flex; justify-content: center; padding-top: 10px; }
.st-nobori b { writing-mode: vertical-rl; font: 800 .8rem var(--f-body); color: #FFE14D; letter-spacing: .3em; }
.st-wagon { position: relative; width: 120px; height: 60px; display: flex; align-items: flex-end; gap: 3px; padding: 0 8px 6px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(90, 100, 108, .55) 8px 10px), linear-gradient(transparent 0 30%, rgba(200, 210, 215, .4) 30%); border: 3px solid #6A7279; border-top-width: 2px; }
.st-wagon i { flex: 1; height: 24px; background: #F2B33C; border-radius: 2px; } .st-wagon i + i { background: #E2554B; } .st-wagon i + i + i { background: #5FA7D8; }
.st-at.on-wagon { position: absolute; right: -16px; top: -36px; z-index: 2; }
.st-tp { display: grid; grid-template-columns: repeat(2, 30px); gap: 2px; }
.st-tp i { height: 34px; border-radius: 4px; background: repeating-linear-gradient(#FFFFFF 0 6px, #E8EEF4 6px 8px); box-shadow: inset 0 0 0 2px #D0D8DE; }
.st-tp i:first-child { grid-column: span 2; width: 30px; justify-self: center; }
.st-standshelf { position: relative; width: 74px; height: 70px; border: 3px solid #9AA6AC; border-top: 0; background: linear-gradient(transparent 46%, #9AA6AC 46% 50%, transparent 50%); }
.st-standshelf i { position: absolute; left: 6px; right: 6px; bottom: 4px; height: 22px; background: repeating-linear-gradient(90deg, #7FB15A 0 14px, #6E9E4B 14px 16px); }
.st-at.on-shelf { position: absolute; left: 50%; top: 4px; transform: translateX(-50%) rotate(-4deg); }
.st-baskets { width: 40px; height: 30px; background: repeating-linear-gradient(#D23B3B 0 4px, #B8302F 4px 6px); border-radius: 2px 2px 4px 4px; }
/* the bookshop, shut; the vending machine by it */
.st-shut { width: 290px; background: #D9D1C2; }
.st-shut .st-front { justify-content: space-between; }
.st-shutter { width: 190px; height: 230px; background: repeating-linear-gradient(#B9BEC3 0 9px, #A4AAB0 9px 11px); display: flex; justify-content: center; padding-top: 40px; box-shadow: inset 0 10px 0 #8E959B; }
.st-vend { width: 62px; height: 170px; background: linear-gradient(90deg, #E9ECEE, #FFFFFF 40%, #D9DEE1); border: 3px solid #C8323A; border-radius: 4px 4px 0 0; padding: 6px; display: flex; flex-direction: column; gap: 8px; }
.st-vend-cans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 4px; background: #F7F9FA; box-shadow: inset 0 0 0 1px #D2D7DB; }
.st-vend-cans i { height: 16px; border-radius: 2px; }
.st-vend b { height: 14px; background: #3E4247; border-radius: 2px; margin-top: auto; }
/* the office block and its side */
.st-bldg { width: 400px; background: #D6D9DB; }
.st-front.lobby { margin: 0 10px; padding: 70px 14px 0; background: repeating-linear-gradient(90deg, transparent 0 39px, rgba(0, 0, 0, .05) 39px 40px), repeating-linear-gradient(transparent 0 39px, rgba(0, 0, 0, .05) 39px 40px), #F4F5F5;
  border: 8px solid #8E979E; border-bottom: 0; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 30px rgba(0, 0, 0, .06); }
.st-lobby-ceiling { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; }
.st-wcdoor { position: relative; width: 82px; height: 200px; background: linear-gradient(90deg, #B8BEC3, #CDD2D6); border: 4px solid #8E979E; border-bottom: 0; display: flex; justify-content: center; padding-top: 30px; }
.st-wallbits { display: flex; flex-direction: column; gap: 14px; margin-bottom: 60px; }
.st-alley { width: 340px; background: #C9C5BB; }
.st-front.alley { background: linear-gradient(transparent 85%, #9E9A90 85%); padding-top: 50px; }
.st-booth { position: relative; width: 118px; height: 200px; background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(190, 210, 220, .5)); border: 4px solid #8E979E; border-bottom: 0; }
.st-booth i { position: absolute; left: 20px; bottom: 0; width: 18px; height: 70px; background: #8E979E; border-radius: 3px 3px 0 0; }
.st-booth b { position: absolute; right: 16px; bottom: 0; width: 34px; height: 46px; background: #6E7980; border-radius: 4px 4px 0 0; }
.st-at.on-booth { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); }
.st-exit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.st-door.metal { width: 92px; height: 196px; background: linear-gradient(90deg, #9AA4AB, #B9C2C8); border: 4px solid #6E7980; border-bottom: 0; }
.st-stairs { position: relative; width: 100px; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
.st-stairs i { display: block; height: 22px; background: #8E8A82; border-top: 3px solid #F7D046; }
.st-stairs.down i:nth-child(1) { margin-right: 75%; } .st-stairs.down i:nth-child(2) { margin-right: 50%; } .st-stairs.down i:nth-child(3) { margin-right: 25%; }
.st-at.on-rope { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); }
.st-at.on-rope::before { content: ""; position: absolute; left: -36px; right: -36px; top: 18px; height: 3px; background: #B8322A; z-index: -1; }
.st-at.hang-top { margin-top: 0; }
/* the push and pull plates: small, sideways, at hand height */
.st-sign.doorplate { flex-direction: row; font-size: 11px; padding: 1px 6px; border-radius: 2px; background: linear-gradient(#F7E3A8, #D9B65E); border: 1px solid #A8873C; }
.st-sign.doorplate rt { font-size: .55em; }

/* a place's words, as a list */
.word-list { margin: 1rem 0 .4rem; border: 1px solid var(--rule-2); border-radius: 12px; overflow: hidden; }
.word-list table { width: 100%; border-collapse: collapse; }
.word-list th { text-align: left; font: 600 .72rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 8px 12px; background: var(--sunken); }
.word-list td { padding: 8px 12px; border-top: 1px solid var(--rule-2); vertical-align: middle; }
.word-list .wl-jp { font-size: 1.2rem; white-space: nowrap; }
.word-list .wl-r span { display: block; font-size: .9rem; color: var(--ink-2); }
.word-list .wl-r small { color: var(--ink-3); font-size: .74rem; }
.word-list .wl-m { color: var(--ink-2); font-size: .9rem; }
.word-list .wl-act { white-space: nowrap; text-align: right; }
.word-list .wl-act .icon-btn { vertical-align: middle; }
.wl-ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--jade-wash); color: var(--jade); vertical-align: middle; margin-left: 4px; }
.wl-ok .ico { width: 14px; height: 14px; }
.word-list tr.known .wl-jp { color: var(--ink); }
.kb-wordsbtn.on { border-color: var(--ink); }
.kb-prod.looking { outline: 2.5px solid var(--ai); outline-offset: 4px; border-radius: 6px; }
.kb-gate { margin-top: 4px; }

/* the sushi visit: the door, the entry hall, then the counter or a table */
.ws-street-door { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 18px; border-radius: 12px;
  background: linear-gradient(#DCE6EC, #EDE9E0 70%, #CFCBC2 70%, #BDB8AE); }
.ws-door-scene { display: flex; justify-content: center; }
.ws-door-scene .ws-front { min-height: 470px; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.ws-door-side .lede { margin-top: 0; }
.ws-entry { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ws-entry-scene { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-2); background: linear-gradient(#EADBC0, #E1CFAF); padding-bottom: 16px; }
.ws-foyer { position: relative; height: 200px; display: flex; align-items: flex-end; justify-content: center; gap: 0;
  background: repeating-linear-gradient(90deg, #C9A57A 0 34px, #BE986B 34px 36px); box-shadow: inset 0 -10px 0 #8C6239; }
.ws-foyer-wall { position: absolute; left: 24px; top: 26px; width: 90px; height: 110px; background: #F3E6CB; border: 5px solid #5B3A21; box-shadow: inset 0 0 0 4px #E6D3AE; }
.ws-foyer-wall::after { content: ""; position: absolute; left: 22px; top: 18px; width: 36px; height: 56px; border-radius: 50% 50% 4px 4px; background: radial-gradient(circle at 50% 70%, #6E9A45 0 30%, transparent 32%), linear-gradient(#E7D8B8, #E7D8B8); }
.ws-hostess { position: relative; width: 120px; height: 150px; margin-bottom: 10px; }
.ws-hostess .ws-cat { position: absolute; left: 10px; top: 0; width: 100px; height: 100px; }
.ws-kimono { position: absolute; left: 22px; top: 80px; width: 76px; height: 64px; border-radius: 30px 30px 6px 6px; background: linear-gradient(90deg, #B8323A, #D24A4F 50%, #B8323A); }
.ws-kimono::before { content: ""; position: absolute; left: 24px; top: 0; width: 28px; height: 26px; background: linear-gradient(135deg, transparent 48%, #FBF6EC 48% 58%, transparent 58%), linear-gradient(225deg, transparent 48%, #FBF6EC 48% 58%, transparent 58%); }
.ws-obi { position: absolute; left: 22px; top: 112px; width: 76px; height: 14px; background: #E9C46A; box-shadow: inset 0 3px 0 #C99A3A; }
.ws-podium { width: 70px; height: 92px; margin-left: 12px; background: linear-gradient(#7A5130, #5B3A21); border-radius: 4px 4px 0 0; box-shadow: inset 0 8px 0 #4A2E1A; }
.ws-chat { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 6px; }
.ws-bubble { display: flex; }
.ws-bubble.you { justify-content: flex-end; }
.ws-line { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; text-align: left; border: 1px solid var(--rule-2); background: var(--sheet); color: var(--ink);
  border-radius: 14px; padding: 8px 12px; max-width: 100%; cursor: pointer; }
.ws-line .jp { font-size: 1.1rem; }
.ws-line small { grid-column: 1; color: var(--ink-3); font-size: .78rem; }
.ws-hear { grid-row: 1 / span 2; grid-column: 2; color: var(--ink-3); }
.ws-hear .ico { width: 18px; height: 18px; }
.ws-bubble.them .ws-line { border-bottom-left-radius: 4px; }
.ws-bubble.you .ws-line { background: var(--jade); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.ws-bubble.you .ws-line small, .ws-bubble.you .ws-hear { color: rgba(255, 255, 255, .8); }
.ws-bubble.you .ws-line .ink-no { opacity: .55; }
.ws-answers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 6px 18px 0; align-items: center; }
.ws-answers .eyebrow { width: 100%; text-align: right; margin: 0; }
.ws-answer { display: flex; flex-direction: column; align-items: flex-end; border: 1.5px solid var(--jade); color: var(--ink); background: var(--sheet); border-radius: 12px; padding: 8px 14px; cursor: pointer; }
.ws-answer span { font-size: 1.05rem; } .ws-answer small { color: var(--ink-3); font-size: .76rem; }
.ws-answer:hover { background: var(--jade-wash); }
.ws-phrasebook { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--rule-2); border-radius: 12px; padding: 14px; background: var(--sheet); }
.ws-phrasebook .eyebrow { margin: 0; }
.ws-phrasebook .ws-line.you { border-color: color-mix(in srgb, var(--jade) 45%, var(--rule-2)); }
.ws-phrasebook .ws-line .jp { font-size: 1rem; }
.ws-seatbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(255, 255, 255, .45); font-size: .82rem; color: #4E4B44; }
/* the counter, standing still */
.ws-room { display: flex; flex-direction: column; }
.ws-room .ws-wall { flex-wrap: wrap; }
.ws-beltrow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 10px 4px; position: relative; }
.ws-beltrow .kb-walkbtn { position: static; transform: none; flex: 0 0 auto; }
.ws-beltwin { width: 448px; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(90deg, #C9CED2 0 22px, #BCC2C7 22px 24px);
  box-shadow: inset 0 3px 0 #E4E8EB, inset 0 -4px 0 #9AA1A7, 0 2px 0 #7D858C; padding: 10px 4px 8px; }
.ws-track { display: flex; gap: 8px; transition: transform .5s cubic-bezier(.4, .1, .2, 1); }
.ws-track .ws-slot { flex: 0 0 104px; }
.ws-pager { display: flex; justify-content: center; gap: 6px; padding: 4px 0 2px; }
.ws-pager i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .18); }
.ws-pager i.on { background: #5B3A21; }
/* a table */
.ws-table { margin: 16px 18px 10px; border-radius: 14px; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 20px;
  background: linear-gradient(170deg, #C99A62, #B88449 60%, #A87538); box-shadow: inset 0 0 0 6px #8C6239, 0 8px 18px rgba(0, 0, 0, .2); }
.ws-far, .ws-near { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 48px; }
.ws-center { display: flex; justify-content: center; padding: 10px 0; }
.ws-setting { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; background: rgba(255, 250, 240, .25); }
.ws-setting.far { opacity: .75; transform: scale(.85); }
.ws-sdish { width: 26px; height: 14px; border-radius: 50%; background: #F3F0E8; border: 1px solid #D2CCBE; box-shadow: inset 0 0 0 5px #F3F0E8, inset 0 0 0 9px #3A2216; }
.ws-menu.shut { width: 150px; height: 104px; border: 0; border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(90deg, #1E2A44 0 8px, #2A3A5C 8px); color: #F4EEDF; box-shadow: 4px 6px 0 rgba(0, 0, 0, .25), inset -3px 0 0 rgba(255, 255, 255, .15); transform: rotate(-3deg); transition: transform .15s; }
.ws-menu.shut:hover { transform: rotate(-3deg) translateY(-4px); }
.ws-menu.shut span { font: 700 1.8rem var(--f-ja-serif); } .ws-menu.shut small { font: 700 .62rem var(--f-body); letter-spacing: .3em; opacity: .8; }
.ws-menu.open { width: 100%; max-width: 560px; background: #FBF6EA; color: #1E1D1A; border-radius: 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); border: 6px solid #2A3A5C; perspective: 900px; }
.ws-mhead { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 14px; background: #2A3A5C; color: #F4EEDF; }
.ws-mhead span { font: 700 1.2rem var(--f-ja-serif); } .ws-mhead small { font: .72rem var(--f-body); opacity: .8; }
.ws-spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 210px; }
.ws-mpage { display: flex; flex-direction: column; justify-content: space-around; gap: 6px; padding: 10px 12px; }
.ws-mpage + .ws-mpage { border-left: 1px solid #D9CFB8; box-shadow: inset 8px 0 10px -8px rgba(0, 0, 0, .25); }
.ws-mitem { display: flex; align-items: center; gap: 10px; }
.ws-mpic .ws-plate { transform: scale(1.05); transform-origin: left center; }
.ws-mtext { display: flex; align-items: center; gap: 6px; font: .9rem var(--f-body); }
.ws-mfoot { display: flex; justify-content: space-between; gap: 6px; padding: 8px 10px; border-top: 1px solid #E5DCC7; }
.ws-mfoot .btn { color: #1E1D1A; border-color: #D2C8B2; }
.ws-menu.turn-on .ws-spread { animation: ws-leaf-on .45s ease; transform-origin: left center; }
.ws-menu.turn-back .ws-spread { animation: ws-leaf-back .45s ease; transform-origin: right center; }
@keyframes ws-leaf-on { from { transform: rotateY(-35deg); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes ws-leaf-back { from { transform: rotateY(35deg); opacity: .3; } to { transform: none; opacity: 1; } }

/* ---------- 駅, the station, as a trip (js/station-ui.js) ---------- */

.sn-station { position: relative; background: #E6E9EB; min-height: 500px; overflow: hidden; }
.sn-stage { position: relative; min-height: 500px; overflow: hidden; }
.sn-stage.rise { animation: sn-rise .55s cubic-bezier(.3, .1, .2, 1); }
.sn-stage.sink { animation: sn-sink .55s cubic-bezier(.3, .1, .2, 1); }
@keyframes sn-rise { from { transform: translateY(70%); opacity: .2; } }
@keyframes sn-sink { from { transform: translateY(-70%); opacity: .2; } }
.sn-sign { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 700 16px/1.2 var(--f-ja); padding: 5px 12px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .18); }
.sn-sign rt { font-size: .5em; }
.sn-sign .ink-no { opacity: .35; }
.sn-sign.exit { background: #F7D046; color: #1E1D1A; }
.sn-sign.enter, .sn-sign.navy { background: #1F3B66; color: #fff; }
.sn-sign.orange { background: #F08A3C; color: #1E1D1A; }
.sn-sign.pink { background: #E4789C; color: #fff; }
.sn-sign.platform { background: #fff; color: #1E1D1A; border: 2px solid #1F3B66; flex-direction: column; gap: 0; padding: 4px 14px; font-size: 14px; }
.sn-sign.platform.deco { box-shadow: 0 2px 4px rgba(0, 0, 0, .18); }
.sn-num { font: 800 2.2rem/1 var(--f-body); color: #1F3B66; }
.sn-sign.type { font-size: 13px; padding: 2px 8px; color: #fff; border-radius: 2px; }
.sn-sign.type.green { background: #2E8B57; } .sn-sign.type.orange { background: #E8762C; } .sn-sign.type.red { background: #C8323A; }
.sn-picto { height: 22px; width: auto; }
.sn-arrow { font: 800 18px var(--f-body); }
.sn-lines { display: flex; gap: 3px; } .sn-lines i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; }
.sn-at.hang { margin-top: 20px; } .sn-at.hang::before { content: ""; position: absolute; left: 22%; right: 22%; top: -20px; height: 19px; border-left: 2px solid #6B7178; border-right: 2px solid #6B7178; }
.sn-term { color: inherit; } .sn-term .kb-gloss { font-size: .72rem; }
.sn-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: .82rem; color: #fff; background: rgba(20, 24, 30, .55); padding: 3px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; z-index: 4; }
.sn-ceiling-lights { height: 26px; display: flex; justify-content: space-around; background: linear-gradient(#C9CED2, #DDE1E4); }
.sn-ceiling-lights i { width: 120px; height: 7px; margin-top: 9px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 0 16px 5px rgba(255, 255, 255, .9); }
/* the views: one place to stand at a time, the side buttons to turn */
.sn-stage.from-r { animation: sn-from-r .45s cubic-bezier(.3, .1, .2, 1); }
.sn-stage.from-l { animation: sn-from-l .45s cubic-bezier(.3, .1, .2, 1); }
@keyframes sn-from-r { from { transform: translateX(30%); opacity: .2; } }
@keyframes sn-from-l { from { transform: translateX(-30%); opacity: .2; } }
.sn-nav { position: absolute; top: 50%; z-index: 8; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; width: 76px; }
.sn-nav.l { left: 6px; } .sn-nav.r { right: 6px; }
.sn-nav-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); display: grid; place-items: center; color: #1E1D1A; }
.sn-nav-ico .ico { width: 20px; height: 20px; }
.sn-nav:hover .sn-nav-ico { transform: scale(1.06); }
.sn-station .sn-ticket.chip { left: auto; right: 10px; bottom: auto; top: calc(50% - 96px); transform: none; width: auto; }
@keyframes sn-pop { from { transform: translateY(20px); opacity: 0; } }
.sv { position: relative; height: 500px; overflow: hidden; }
.sn-hint.dark { color: #fff; }
.sn-arrow.dark { color: #1E1D1A; }
/* the signs: white on dark, kana you don't know still readable */
.sn-sign.navy rt, .sn-sign.enter rt, .sn-sign.pink rt, .sn-sign.type rt { color: rgba(255, 255, 255, .9); }
.sn-sign.navy .ink-no, .sn-sign.enter .ink-no, .sn-sign.pink .ink-no, .sn-sign.type .ink-no { opacity: .62; }
.sn-sign.exit rt, .sn-sign.orange rt { color: #2A2A2A; }
/* the street */
.sv-street { background: linear-gradient(#8FBBDB, #CFE2EF 62%, #D9D6CF 62%); }
.sv-skyline { position: absolute; left: 0; right: 0; top: 52px; height: 260px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 10px; opacity: .9; }
.sv-skyline i { display: block; background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, .55) 10px 22px, transparent 22px 28px), repeating-linear-gradient(transparent 0 14px, rgba(0, 0, 0, .06) 14px 26px); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .08); }
.sv-tree { position: absolute; left: 4%; bottom: 120px; width: 90px; height: 170px; }
.sv-tree b { position: absolute; left: 0; top: 0; width: 90px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8EBF6E, #4E8A3E); box-shadow: 30px 20px 0 -14px #5E9A48; }
.sv-tree i { position: absolute; left: 40px; bottom: 0; width: 12px; height: 80px; background: #6B4A2B; }
.sv-pole { position: absolute; left: 15%; bottom: 120px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sv-pole::after { content: ""; width: 6px; height: 120px; background: #8E959B; }
.sv-map { width: 120px; height: 80px; background: #fff; border: 4px solid #46525A; border-radius: 3px; padding: 3px 6px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; color: #46525A; font: 700 .72rem var(--f-ja); transition: transform .15s; }
.sv-map:hover { transform: translateY(-3px); }
.sv-map-mini { width: 100%; height: 40px; }
.sv-entrance { position: absolute; left: 50%; bottom: 96px; transform: translateX(-38%); width: 330px; display: flex; flex-direction: column; align-items: center; }
.sv-ent-sign { display: flex; align-items: center; gap: 10px; background: #1F3B66; color: #fff; padding: 6px 14px; border-radius: 4px 4px 0 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.sv-logo { width: 28px; height: 28px; border-radius: 50%; background: #F08A3C; display: grid; place-items: center; font: 800 .9rem var(--f-body); color: #fff; }
.sv-ent-sign .sn-term { color: #fff; font: 700 .8rem var(--f-ja); }
.sv-ent-sign .sv-ent-name { font: 800 1.25rem var(--f-ja); letter-spacing: .1em; }
.sv-ent-sign .ink-no { opacity: .6; } .sv-ent-sign rt { color: #fff; }
.sv-canopy { position: relative; width: 320px; height: 22px; background: linear-gradient(#8E959B, #6B7178); box-shadow: 0 4px 6px rgba(0, 0, 0, .25); display: flex; justify-content: center; align-items: flex-start; z-index: 2; }
.sv-canopy > i { display: none; }
.sv-canopy .on-canopy { position: absolute; top: 14px; z-index: 2; }
.sv-down { position: relative; display: block; width: 300px; height: 250px; border: 0; padding: 0; cursor: pointer; background: #2A2E33; border-left: 6px solid #6B7178; border-right: 6px solid #6B7178; }
.sv-stairs-svg { display: block; width: 100%; height: 100%; }
.sv-down:hover .sv-stairs-svg, .sv-up:hover .sv-stairs-svg { filter: brightness(1.08); }
.sv-bikes { position: absolute; right: 4%; bottom: 102px; display: flex; gap: 4px; }
.sv-bikes .st-bike { width: 92px; height: 56px; } .sv-bikes .st-bike + .st-bike { margin-left: -40px; filter: hue-rotate(180deg); }
.sv-pavement { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: repeating-linear-gradient(90deg, #CFCBC2 0 58px, #BDB8AE 58px 60px), #CFCBC2; box-shadow: inset 0 6px 0 #A8A398; }
/* the lobby */
.sv-lobby { background: linear-gradient(#F1F3F4, #E6E9EB 64%, #C9CED2 64%, #BFC5C9); }
.sv-wallsign { display: flex; justify-content: center; padding-top: 4px; }
.sv-machines { position: absolute; left: 0; right: 0; bottom: 140px; display: flex; justify-content: center; gap: 10px; }
.sv-machine { width: 92px; height: 210px; border: 0; padding: 12px 8px; border-radius: 6px 6px 0 0; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(#3A6EA5, #2C5582); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .15), 0 6px 10px rgba(0, 0, 0, .15); transition: transform .15s; }
.sv-machine.ic { background: linear-gradient(#3E9A4A, #2E7A3A); }
.sv-machine:hover { transform: translateY(-4px); }
.sv-scr { display: grid; gap: 4px; padding: 6px; height: 78px; background: linear-gradient(160deg, #F2F8FC, #A9CBE2); border-radius: 3px; box-shadow: 0 0 12px rgba(200, 230, 255, .6); }
.sv-scr b { border-radius: 2px; background: #3A6EA5; opacity: .5; }
.sv-slots { height: 14px; background: #1A2C44; border-radius: 2px; }
.sv-tray { height: 26px; margin-top: auto; background: #1A2C44; border-radius: 3px; box-shadow: inset 0 6px 0 #0E1A2A; }
.sv-board { background: linear-gradient(#F1F3F4, #E6E9EB 64%, #C9CED2 64%); }
.sv-exits { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 0 70px; }
.sv-exit.l { justify-self: start; } .sv-exit.r { justify-self: end; }
.sv-exit.c { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sv-dboard { position: absolute; left: 50%; top: 168px; transform: translateX(-50%); width: min(520px, 76%); background: #121418; border: 6px solid #3A3E44; border-radius: 6px; padding: 8px 12px 10px; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); color: #FFB347; }
.sv-db-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2A2E33; padding-bottom: 4px; margin-bottom: 4px; }
.sv-db-title .sn-term { font: 800 1rem var(--f-ja); color: #fff; letter-spacing: .3em; }
.sv-db-clock { font: 700 .9rem var(--f-body); color: #7FD3FF; }
.sv-db-head, .sv-db-row { display: grid; grid-template-columns: 56px 92px 1fr 84px; gap: 8px; align-items: center; }
.sv-db-head .sn-term { font: 600 .72rem var(--f-ja); color: #C9CED2; }
.sv-db-row { padding: 5px 0; border-top: 1px solid #22262B; }
.sv-db-row b { font: 700 1.05rem var(--f-body); }
.sv-db-to .sn-term { font: 700 1.1rem var(--f-ja); color: #FFC56E; }
.sv-db-n .sn-term { font: 700 .82rem var(--f-ja); color: #fff; }
.sv-dboard .ink-no, .sv-led .ink-no, .sv-dirsign .ink-no { opacity: .7; }
.sv-dboard .ink-sound, .sv-led .ink-sound, .sv-dirsign .ink-sound, .sn-sign .ink-sound { opacity: .85; }
.sv-dboard rt, .sv-led rt { font-size: .58em; }
.sv-dboard rt { color: #E9ECEE; }
.sv-db-n .sn-sign.platform { padding: 0 6px; font-size: 11px; flex-direction: row; gap: 4px; } .sv-db-n .sn-num { font-size: 1rem; }

.sv-gates { background: linear-gradient(#F1F3F4, #E6E9EB 64%, #C9CED2 64%); }
.sv-gaterow { position: absolute; left: 0; right: 0; bottom: 140px; display: flex; justify-content: center; align-items: flex-end; gap: 20px; }
.sv-office { width: 90px; height: 190px; background: linear-gradient(#DADFE2, #C9CED2); border: 5px solid #8E979E; border-bottom: 0; position: relative; }
.sv-office i { position: absolute; left: 10px; right: 10px; top: 20px; height: 70px; background: linear-gradient(160deg, #EAF3F8, #9FC3DD); border: 3px solid #8E979E; }
.sv-gatebank { display: flex; gap: 16px; border: 0; background: none; cursor: pointer; padding: 0; }
.sv-gate { position: relative; display: block; width: 40px; height: 130px; background: linear-gradient(90deg, #B9C0C5, #E9ECEE 50%, #B9C0C5); border-radius: 8px 8px 0 0; }
.sv-gate .sv-ic { position: absolute; left: 8px; top: 8px; width: 24px; height: 16px; border-radius: 3px; background: #3E9A4A; box-shadow: 0 0 8px rgba(62, 154, 74, .7); }
.sv-gate b { position: absolute; left: 12px; top: 34px; width: 16px; height: 16px; border-radius: 50%; background: #2E8B57; box-shadow: 0 0 8px #2E8B57; }
.sv-gate b.no { background: #C8323A; box-shadow: 0 0 8px #C8323A; }
.sv-gate u { position: absolute; left: 100%; top: 58px; width: 16px; height: 22px; background: #E46A7A; border-radius: 0 7px 7px 0; }
.sv-gate:last-child u { display: none; }
.sv-gatebank:hover .sv-gate { filter: brightness(1.06); }
/* the paid side: the stairs up */
.sv-paid { background: linear-gradient(#F1F3F4, #E4E7E9 58%, #D0D5D8 58%, #C2C8CC); }
.sv-paid-signs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 0 70px; }
.sv-backexit { display: flex; align-items: center; gap: 6px; justify-self: start; }
.sv-transfer { justify-self: end; }
.sv-dirsign { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: #1F3B66; color: #fff; padding: 8px 14px; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.sv-dirsign .sn-term { color: #fff; font: 700 .95rem var(--f-ja); }
.sv-dir-pl .sn-term { font-size: 1.1rem; background: #fff; color: #1F3B66; padding: 1px 6px; border-radius: 3px; }
.sv-dir-to i { font-style: normal; opacity: .8; }
.sv-dirsign .ink-no { opacity: .62; } .sv-dirsign rt { color: #fff; }
.sv-dir-pl rt { color: #1F3B66; }
.sv-dirsign .sn-arrow { font-size: 1.4rem; }
.sv-stairhall { position: absolute; left: 0; right: 0; bottom: 0; height: 330px; display: flex; justify-content: center; align-items: flex-end; gap: 30px; padding: 0 90px; }
.sv-up { position: relative; display: block; width: 280px; height: 300px; border: 0; padding: 0; cursor: pointer; background: #8E959B; border: 10px solid #A8AFB5; border-bottom: 0; border-radius: 6px 6px 0 0; overflow: hidden; }
.sv-stairhall .sn-speakers { width: 230px; margin-bottom: 40px; }
/* a platform */
.sv-plat { height: 560px; background: linear-gradient(#D7DEE3, #E9ECEE 58%, #B9C0C5 58%, #A8AFB5); }
.sv-canopy-in { height: 24px; display: flex; justify-content: space-around; background: linear-gradient(#5E656B, #7D858C); }
.sv-canopy-in i { width: 120px; height: 6px; margin-top: 18px; background: #fff; border-radius: 3px; box-shadow: 0 0 14px 4px rgba(255, 255, 255, .8); }
.sv-ekimei { margin: 10px auto 0; width: 330px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: #fff; border: 2px solid #46525A; padding: 6px 10px; font-size: .82rem; position: relative; }
.sv-ekimei::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 4px; background: #3E9A4A; z-index: 0; }
.sv-ekimei > span:last-child { text-align: right; }
.sv-ekimei .sv-ek-name { font: 800 1.6rem var(--f-ja); color: #1E1D1A; letter-spacing: .15em; position: relative; z-index: 1; }
.sv-ekimei .ink-no { opacity: .5; }
.sv-platrow { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; padding: 12px 90px 0; }
/* the speakers: what they say, tap to hear it */
.sn-speakers { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sn-speaker-head { font: 700 .66rem var(--f-body); color: #46525A; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 4px; }
.sn-speaker-head .ico { width: 13px; height: 13px; }
.sn-ann { display: flex; align-items: center; gap: 6px; text-align: left; background: #fff; border: 1px solid #CFD5D9; border-radius: 8px; padding: 3px 8px; font-size: .74rem; color: #1E1D1A; cursor: pointer; }
.sn-ann:hover { border-color: #8E979E; }
.sn-cone { color: #46525A; display: grid; } .sn-cone .ico { width: 13px; height: 13px; }
.sn-ann-jp { white-space: normal; line-height: 1.5; }
.sn-ann .kb-gloss { white-space: normal; width: 220px; }
.sv-anns { position: absolute; left: 90px; right: 90px; bottom: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.sv-anns .sn-speaker-head { grid-column: 1 / -1; }
.sv-platsign { padding-top: 20px; }
.sv-train { position: relative; }
.sv-led { display: flex; align-items: center; justify-content: center; gap: 10px; background: #0E0E10; border: 4px solid #3A3E44; border-radius: 4px; padding: 5px 8px; }
.sv-led-to .sn-term { color: #FFC56E; font: 700 1.1rem var(--f-ja); }
.sv-led .ink-no { opacity: .6; } .sv-led rt { color: #E9ECEE; }
.sv-car { position: relative; margin-top: 8px; height: 200px; border-radius: 14px 14px 0 0; background: linear-gradient(#F4F6F7, #D9DEE1); border-top: 12px solid #3E9A4A; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 14px; box-shadow: inset 0 -22px 0 #B9C0C5, inset 0 -26px 0 #3E9A4A; }
.sv-win { width: 52px; height: 52px; margin-bottom: 82px; background: linear-gradient(160deg, #EAF3F8, #8FB0C6); border: 3px solid #6B7178; border-radius: 4px; }
.sv-tdoor { display: flex; gap: 2px; padding: 3px; background: #6B7178; border: 0; border-radius: 4px 4px 0 0; cursor: pointer; transition: transform .15s; margin-bottom: 26px; }
.sv-tdoor:hover { transform: translateY(-3px); }
.sv-tdoor i { width: 32px; height: 140px; background: linear-gradient(#EAF3F8 0 38%, #C9CED2 38%); }
.sv-women { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 2; }
.sv-edge { position: absolute; left: 0; right: 0; bottom: 176px; height: 14px; background: repeating-linear-gradient(90deg, #F7D046 0 14px, #E9C445 14px 16px); }
.sv-edge i.pink { position: absolute; left: 44%; top: 18px; width: 140px; height: 14px; background: #E4789C; }
.sv-downbtn { position: absolute; left: 0; right: 0; bottom: 10px; width: max-content; margin: 0 auto; }
.sv-platrow .sn-speakers { padding-top: 6px; }
/* the ride: the inside of the carriage */
.sv-ride { height: 560px; background: linear-gradient(#EEF0F1, #E3E6E8); }
.sv-ride.paused *, .sv-ride.paused *::before, .sv-ride.paused *::after { animation-play-state: paused !important; }
.sv-ride.paused .sv-annpop-box { animation-play-state: running !important; }
.sv-ceil { position: relative; height: 34px; display: flex; justify-content: space-around; background: linear-gradient(#CDD2D6, #E9ECEE); box-shadow: inset 0 -3px 0 #B9C0C5; }
.sv-ceil i { width: 180px; height: 12px; margin-top: 10px; border-radius: 3px; background: #FFFFFF; box-shadow: 0 0 20px 7px rgba(255, 255, 255, .95); }
.sv-ceil::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 6px; background: linear-gradient(90deg, #A8AFB5, #E9ECEE 50%, #A8AFB5); }
/* overhead: the ads hanging, the straps on their rail */
.sv-hangads { position: absolute; left: 70px; right: 260px; top: 48px; display: flex; justify-content: space-around; z-index: 5; }
.sv-straps { position: absolute; left: 50px; right: 250px; top: 112px; display: flex; justify-content: space-between; z-index: 6; pointer-events: none; }
.sv-straps i { width: 4px; height: 30px; background: linear-gradient(#5E656B, #8E959B); position: relative; transform-origin: top; }
.sv-straps i::after { content: ""; position: absolute; left: -9px; bottom: -20px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid #F4F4F4; box-shadow: 0 2px 0 #B9C0C5, inset 0 0 0 1px #D2D7DB; }
.sv-ride.moving .sv-straps i, .sv-ride.leaving .sv-straps i, .sv-ride.slowing .sv-straps i { animation: sv-sway 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.13s); }
@keyframes sv-sway { 50% { transform: rotate(-11deg); } }
.sv-ride.moving .sv-carwall { animation: sv-rock .55s ease-in-out infinite; }
@keyframes sv-rock { 50% { transform: translateY(1.5px); } }
/* an ad: a poster, its picture and its words */
.sv-ad { position: relative; border: 0; cursor: pointer; display: flex; align-items: stretch; gap: 0; padding: 0; overflow: visible;
  background: var(--ad); color: #fff; border-radius: 2px; text-align: left; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.sv-ad-art { flex: 0 0 auto; display: block; width: 84px; } .sv-ad-art svg { display: block; width: 84px; height: 100%; min-height: 58px; }
.sv-ad-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px; min-width: 0; }
.sv-ad-head { font: 800 1rem/1.2 var(--f-ja); white-space: nowrap; } .sv-ad-sub { font: 600 .76rem/1.2 var(--f-ja); opacity: .95; white-space: nowrap; }
.sv-ad .ink-no { opacity: .6; } .sv-ad .ink-sound { opacity: .85; } .sv-ad rt { color: #fff; }
.sv-ad.hang { width: 230px; transform-origin: top center; }
.sv-ad.hang::before { content: ""; position: absolute; left: 22%; right: 22%; top: -14px; height: 14px; border-left: 1.5px solid #8E959B; border-right: 1.5px solid #8E959B; }
.sv-ride.moving .sv-ad.hang, .sv-ride.leaving .sv-ad.hang { animation: sv-swing 2.2s ease-in-out infinite; }
@keyframes sv-swing { 50% { transform: rotate(1.6deg); } }
.sv-ad.top { flex: 1; height: 46px; } .sv-ad.top .sv-ad-art svg { min-height: 46px; height: 46px; width: 66px; } .sv-ad.top .sv-ad-art { width: 66px; }
/* the wall: one outside behind it all, seen through the windows and the door */
.sv-carwall { position: absolute; left: 16px; right: 16px; top: 172px; height: 328px; }
.sv-outside { position: absolute; left: 0; right: 0; top: 56px; height: 190px; overflow: hidden; background: #15171C; }
.sv-tunnel { position: absolute; inset: 0; background:
  linear-gradient(transparent 22%, rgba(255, 236, 170, .95) 22% 25%, transparent 25%),
  repeating-linear-gradient(90deg, transparent 0 180px, rgba(255, 236, 170, .9) 180px 196px, transparent 196px 360px) 0 22% / 360px 6px no-repeat,
  repeating-linear-gradient(90deg, #262A31 0 70px, #1E2127 70px 72px),
  #1A1C22; }
.sv-tunnel::before { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 4px; background: repeating-linear-gradient(90deg, #4A4E56 0 26px, transparent 26px 34px); box-shadow: 0 16px 0 #33373E; }
.sv-tunnel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(#2A2E35, #121418); }
.sv-ride.moving .sv-tunnel, .sv-ride.leaving .sv-tunnel { animation: sv-tunnel .32s linear infinite; }
.sv-ride.slowing .sv-tunnel { animation: sv-tunnel 1.1s linear infinite; }
@keyframes sv-tunnel { to { background-position: 0 0, -360px 22%, -72px 0, 0 0; } }
.sv-pform { position: absolute; inset: 0; display: flex; justify-content: flex-start; align-items: flex-start; padding: 22px 0 0 9%;
  background: linear-gradient(transparent 70%, #F7D046 70% 73%, #B9C0C5 73%), linear-gradient(transparent 0 30%, #DDE2E5 30% 70%, transparent 70%), repeating-linear-gradient(90deg, #E9ECEE 0 46px, #D8DDE0 46px 48px); }
.sv-pform .sv-pf-name { background: #fff; color: #1E1D1A; border: 3px solid #46525A; padding: 3px 20px; font: 800 1.2rem var(--f-ja); letter-spacing: .14em; box-shadow: 0 3px 0 #3E9A4A; }
.sv-pform .ink-no { opacity: .5; }
.sv-pf-people { position: absolute; left: 0; right: 0; bottom: 30%; height: 54px; background:
  radial-gradient(circle at 12% 14px, #5E656B 0 9px, transparent 10px), radial-gradient(ellipse at 12% 46px, #5E656B 0 15px, transparent 16px),
  radial-gradient(circle at 70% 14px, #46525A 0 9px, transparent 10px), radial-gradient(ellipse at 70% 46px, #46525A 0 15px, transparent 16px),
  radial-gradient(circle at 86% 16px, #7D858C 0 8px, transparent 9px), radial-gradient(ellipse at 86% 46px, #7D858C 0 13px, transparent 14px); opacity: .55; }
.sv-pform.to { transform: translateX(110%); }
.sv-ride.board .sv-pform.from { transform: none; }
.sv-ride.leaving .sv-pform.from { animation: sv-leave 2.4s .9s cubic-bezier(.6, 0, .9, .5) forwards; }
.sv-ride.moving .sv-pform.from, .sv-ride.slowing .sv-pform.from, .sv-ride.there .sv-pform.from { transform: translateX(-110%); }
.sv-ride.slowing .sv-pform.to { animation: sv-arrive 3.4s cubic-bezier(.12, .6, .25, 1) forwards; }
.sv-ride.there .sv-pform.to { transform: none; }
/* a phase that has run its course holds its end, even when a pop redraws it */
.sv-ride.leaving.done .sv-pform.from { animation: none; transform: translateX(-110%); }
.sv-ride.slowing.done .sv-pform.to { animation: none; transform: none; }
@keyframes sv-leave { to { transform: translateX(-110%); } }
@keyframes sv-arrive { from { transform: translateX(110%); } to { transform: none; } }
.sv-wallface { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.sv-wallface > * { pointer-events: auto; }
.sv-band.top { height: 56px; display: flex; gap: 12px; align-items: center; padding: 0 14px; background: linear-gradient(#F2F4F5, #E3E6E8); }
.sv-band.low { flex: 1; background: linear-gradient(#E3E6E8, #CDD2D6); }
.sv-row { display: flex; height: 190px; }
.sv-pier { flex: 0 0 26px; background: linear-gradient(90deg, #D8DDE0, #EEF0F1 50%, #D8DDE0); }
.sv-pier.end { flex-basis: 18px; }
.sv-glass { flex: 1; position: relative; border: 8px solid #B9C0C5; border-radius: 12px; box-shadow: inset 0 0 0 2px #8E959B, 0 0 0 2px #E9ECEE; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0 18%, transparent 18% 60%, rgba(255, 255, 255, .08) 60% 64%, transparent 64%); }
.sv-glass::after { content: ""; position: absolute; left: -8px; right: -8px; top: 46%; height: 8px; background: #B9C0C5; }
/* the door: two leaves that slide into the wall, the outside behind them */
.sv-dooropen { position: relative; flex: 0 0 180px; overflow: hidden; border: 6px solid #9AA1A7; border-bottom: 0; border-radius: 6px 6px 0 0; height: 272px; pointer-events: none; }
.sv-leaf { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; flex-direction: column; z-index: 2; transition: transform 1.2s cubic-bezier(.5, 0, .2, 1); }
.sv-leaf.l { left: 0; } .sv-leaf.r { right: 0; }
.sv-leaf b { flex: 0 0 120px; border: 12px solid #DADFE2; border-bottom-width: 16px; border-radius: 4px; background: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 40%); box-shadow: inset 0 0 0 2px #9AA1A7; }
.sv-leaf u { flex: 1; background: linear-gradient(90deg, #CDD2D6, #E3E6E8 50%, #CDD2D6); text-decoration: none; }
.sv-leaf.l u { box-shadow: inset -4px 0 0 #2A2E33; } .sv-leaf.r u { box-shadow: inset 4px 0 0 #2A2E33; }
.sv-ride.board .sv-leaf.l, .sv-ride.there .sv-leaf.l { transform: translateX(-100%); }
.sv-ride.board .sv-leaf.r, .sv-ride.there .sv-leaf.r { transform: translateX(100%); }
.sv-dooropen::after { content: ""; position: absolute; left: 0; right: 0; top: 190px; bottom: 0; background: linear-gradient(#B9C0C5, #A8AFB5); z-index: 1; }
.sv-chime { position: absolute; left: 50%; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #5E656B; z-index: 3; }
.sv-ride.leaving .sv-chime, .sv-ride.there .sv-chime { background: #FF5A4E; box-shadow: 0 0 10px #FF5A4E; animation: sv-blink .5s step-end 4; }
@keyframes sv-blink { 50% { opacity: .2; } }
.sv-lcd { flex: 0 0 196px; background: #0E0E10; border: 4px solid #3A3E44; border-radius: 4px; padding: 6px 8px; text-align: center; }
.sv-lcd .sv-lcd-t { color: #FFC56E; font: 700 .9rem/1.3 var(--f-ja); }
.sv-lcd .ink-no { opacity: .6; } .sv-lcd .ink-sound { opacity: .85; } .sv-lcd rt { color: #E9ECEE; }
/* the seat: a padded back against the wall, the cushion, the base; the priority end in its own colour; a glass partition */
.sv-seat { position: absolute; left: 0; right: 196px; bottom: 34px; height: 116px; }
.sv-seatback { position: absolute; left: 6px; right: 6px; top: 0; height: 58px; border-radius: 14px 14px 4px 4px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 4px, transparent 4px 8px), linear-gradient(#4E7FAE, #3A6890); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .15); }
.sv-cushion { position: absolute; left: 0; right: 0; top: 50px; height: 34px; display: flex; gap: 2px; padding: 0 4px; }
.sv-cushion i { flex: 1; border-radius: 10px 10px 6px 6px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px), linear-gradient(#5E8FBE, #3E6E9A);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .2), 0 4px 0 #2C4F70; }
.sv-cushion i.yu { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px), linear-gradient(#D98E44, #B8702C); box-shadow: inset 0 5px 0 rgba(255, 255, 255, .2), 0 4px 0 #8A5420; }
.sv-seatbase { position: absolute; left: 6px; right: 6px; top: 88px; bottom: 0; background: linear-gradient(#9AA1A7, #7D858C); display: flex; justify-content: space-around; align-items: center; }
.sv-seatbase i { width: 28%; height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, #5E656B 0 3px, transparent 3px 6px); }
.sv-partition { position: absolute; right: -16px; top: -60px; width: 14px; height: 176px; border-radius: 8px; background: linear-gradient(90deg, #A8AFB5, #F2F4F5, #A8AFB5); box-shadow: -40px 0 0 -4px rgba(200, 220, 230, .35); }
.sv-yusen { position: absolute; right: 30px; top: -24px; background: #E8762C; padding: 1px 8px; border-radius: 3px; }
.sv-yusen .sn-term { color: #fff; font: 700 .72rem var(--f-ja); } .sv-yusen .ink-no { opacity: .6; } .sv-yusen rt { color: #fff; }
.sv-stanchion { position: absolute; top: -24px; bottom: 34px; width: 9px; margin-left: -4px; border-radius: 5px; background: linear-gradient(90deg, #A8AFB5, #F7F8F9, #A8AFB5); z-index: 4; }
.sv-carfloor { position: absolute; left: 0; right: 0; bottom: 60px; height: 34px; background: linear-gradient(#B9C0C5, #A8AFB5); box-shadow: inset 0 3px 0 #9AA1A7; }
.sv-carfloor::after { content: ""; position: absolute; right: 50px; top: 8px; width: 170px; height: 18px; background: repeating-linear-gradient(90deg, #F7D046 0 6px, transparent 6px 10px); opacity: .7; }
/* an announcement: it stays until it's been read, and everything waits */
.sv-annpop { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 0 16px 84px; background: rgba(15, 18, 24, .22); }
.sv-annpop-box { position: relative; width: 100%; max-width: 440px; background: #0E0E10; color: #fff; border: 4px solid #3A3E44; border-radius: 10px; padding: 14px 16px 12px 52px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: sv-annin .25s ease; }
@keyframes sv-annin { from { transform: translateY(16px); opacity: 0; } }
.sv-annpop-ico { position: absolute; left: 14px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: #FFC56E; color: #0E0E10; display: grid; place-items: center; }
.sv-annpop-ico .ico { width: 16px; height: 16px; }
.sv-annpop-jp .sv-annpop-t { color: #FFC56E; font: 700 1.15rem/1.6 var(--f-ja); text-align: left; }
.sv-annpop .ink-no { opacity: .6; } .sv-annpop .ink-sound { opacity: .85; } .sv-annpop rt { color: #E9ECEE; }
.sv-annpop p { margin: 4px 0 10px; font-size: .84rem; color: #C9CED2; }
.sv-annpop .kb-row { justify-content: flex-end; } .sv-annpop .kb-row .btn { flex: 0 0 auto; }
.sv-annpop .btn-ghost { color: #fff; border-color: #5E656B; }
/* the controls under it all, steady whatever the phase */
.sv-ctl { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px; background: #D2D7DB; z-index: 20; }
.sv-ctl .btn { flex: 0 0 auto; white-space: nowrap; }
.sv-riding { margin-right: auto; font-size: .84rem; color: #46525A; }
.sv-riding.mine { color: #2E7A3A; font-weight: 700; }
/* the route map: the loop */
.sn-map { width: 100%; background: #fff; color: #1E1D1A; border-radius: 6px; padding: 12px 14px; }
.sn-map-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1E1D1A; padding-bottom: 6px; margin-bottom: 10px; }
.sn-map-head .sn-term { font: 800 1.1rem var(--f-ja); } .sn-map-head small { font: .7rem var(--f-body); color: #6E767D; }
.sn-ring { position: relative; height: 300px; margin: 0 auto; max-width: 420px; }
.sn-ring::before { content: ""; position: absolute; left: 10%; right: 10%; top: 12%; bottom: 12%; border: 10px solid #3E9A4A; border-radius: 50%; }
.sn-map-st { position: absolute; z-index: 1; transform: translate(-50%, -14px); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sn-map-st > i { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid #1E1D1A; }
.sn-map-st.here > i { background: #C8323A; border-color: #C8323A; box-shadow: 0 0 0 6px rgba(200, 50, 58, .25); }
.sn-map-you { position: absolute; top: -26px; background: #C8323A; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.sn-map-you .sn-term { color: #fff; font: 700 .68rem var(--f-ja); } .sn-map-you rt { color: #fff; } .sn-map-you .ink-no { opacity: .6; }
.sn-map-name { font: 700 1rem var(--f-ja); background: rgba(255, 255, 255, .9); padding: 0 4px; border-radius: 3px; }
.sn-map-st small { font: 700 .74rem var(--f-body); color: #46525A; }
.sn-ring-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: .72rem var(--f-ja); color: #46525A; text-align: center; white-space: nowrap; }
.sn-map .ink-no { opacity: .45; }

/* the moment you find it */
.sn-found { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6px; }
.sn-found h3 { font: 600 1.7rem var(--f-display); margin: 0; }
.sn-found p { margin: 0; }
.sn-found-art { position: relative; width: 200px; height: 150px; margin-bottom: 4px; }
.sn-found-art .sn-maru { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; transform: translate(-50%, -50%); z-index: 0; }
.sn-found-cat { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform: translate(-50%, -46%); z-index: 1; }
.sn-found-art .stamp { position: absolute; right: -14px; top: 4px; transform: rotate(12deg); z-index: 2; }
.sn-found .btn { white-space: nowrap; }
.sn-modal-box.found { overflow: hidden; }
/* the windows */
.sn-modal { position: absolute; inset: 0; z-index: 20; background: rgba(20, 22, 26, .55); display: grid; place-items: center; padding: 14px; }
.sn-modal-box { position: relative; background: var(--sheet); color: var(--ink); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-lift); max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.sn-close { align-self: center; }
.sn-msg { font-size: .95rem; line-height: 1.6; }
.sn-tm { width: 100%; max-width: 440px; background: linear-gradient(#3A6EA5, #2C5582); border-radius: 10px; padding: 10px; color: #fff; }
.sn-tm-top { font: 700 .8rem var(--f-ja); text-align: center; padding-bottom: 6px; }
.sn-screen { background: linear-gradient(#F7FBFE, #E1EEF7); color: #1E1D1A; border-radius: 6px; padding: 12px; min-height: 230px; display: flex; flex-direction: column; gap: 10px; }
.sn-scr-head { font: 700 1.05rem var(--f-ja); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 2px solid #2C5582; padding-bottom: 6px; }
.sn-scr-head small { font-size: .78rem; }
.sn-scr-note { font-size: .78rem; color: #4E555B; margin: 0; }
.sn-routemap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sn-here { grid-column: 1 / -1; justify-self: center; font: 700 .9rem var(--f-ja); background: #2C5582; color: #fff; padding: 2px 12px; border-radius: 999px; }
.sn-fare { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 6px; border: 2px solid #3A6EA5; background: #fff; color: #1E1D1A; font: 600 1rem var(--f-ja); cursor: pointer; }
.sn-fare b { font: 700 .95rem var(--f-body); color: #2C5582; }
.sn-fare:hover { background: #EAF3FA; }
.sn-who { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; font: 700 1.1rem var(--f-ja); }
.sn-big { padding: 12px; border-radius: 6px; border: 2px solid #3A6EA5; background: #fff; font: 700 1.1rem var(--f-body); color: #2C5582; cursor: pointer; }
.sn-paybox { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #0E0E10; color: #FFB347; border-radius: 4px; padding: 10px 12px; font: 600 .9rem var(--f-ja); }
.sn-paybox b { font: 700 1.3rem var(--f-body); }
.sn-coins { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sn-coin { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; font: 700 .78rem var(--f-body); color: #3A2A10; background: radial-gradient(circle at 40% 35%, #F7E3A8, #C9A24A); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12); }
.sn-coin.bill { width: 90px; height: 46px; border-radius: 4px; background: linear-gradient(90deg, #DCE8D4, #B9D0AA); color: #2A3A20; }
.sn-tm-foot { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.sn-cancel { background: #C8323A; color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; font: 700 .85rem var(--f-ja); cursor: pointer; }
.sn-cancel small { font: .7rem var(--f-body); opacity: .85; }
.sn-slot-ticket { flex: 1; height: 8px; background: #1A2C44; border-radius: 4px; }
.sn-slot-coin { width: 40px; height: 14px; background: #1A2C44; border-radius: 4px; }
.sn-ticket.big { width: 100%; max-width: 360px; background: linear-gradient(135deg, #FFF3E2, #F9D7A8); color: #2A1A10; border-radius: 6px; padding: 14px 16px; box-shadow: var(--shadow-lift);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px), linear-gradient(135deg, #FFF3E2, #F9D7A8); }
.sn-tk-head { display: flex; justify-content: space-between; align-items: baseline; font: 700 1rem var(--f-ja); border-bottom: 1px dashed #A8874A; padding-bottom: 6px; }
.sn-tk-head small { font: .7rem var(--f-body); }
.sn-tk-route { font: 800 1.6rem var(--f-ja); text-align: center; padding: 10px 0; }
.sn-tk-route span { color: #A8874A; }
.sn-tk-row { display: flex; justify-content: space-between; font: 700 1rem var(--f-ja); }
.sn-tk-row b { font: 800 1.2rem var(--f-body); }
.sn-tk-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font: .78rem var(--f-ja); border-top: 1px dashed #A8874A; padding-top: 6px; }
.sn-tk-foot small { font: .7rem var(--f-body); }
.sn-ticket .ink-no { opacity: .4; }
.sn-ticket.chip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 12; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0;
  background: linear-gradient(135deg, #FFF3E2, #F9D7A8); color: #2A1A10; border-radius: 4px; padding: 6px 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); font: .78rem var(--f-ja); }
.sn-ticket.chip.fresh { animation: sn-pop .4s ease; }
.sn-ticket.chip b { font: 800 .7rem var(--f-ja); color: #A8874A; letter-spacing: .2em; }

.opt.rom { font: 600 1.05rem var(--f-body); letter-spacing: .02em; }
.kb-nameplate { color: inherit; font: inherit; letter-spacing: inherit; }
.kb-gloss { animation: kb-gloss-in .15s ease; }
@keyframes kb-gloss-in { from { opacity: 0; transform: translate(-50%, -3px); } }
.kb-dotkey .kb-ok { font-size: .8rem; margin-left: 6px; }
/* A narrow station: a phone, or a desktop window small enough that the
   scene beside the side panel is under 720px. The same compact layout
   either way (it lived in the phone layer, and a narrow desktop got the
   wide one squeezed: the board wrapping a character at a time, the
   concourse signs on top of each other). */
.sn-station { container-type: inline-size; }
@container (max-width: 719px) {
  .sv { height: 440px; }
  .sn-nav { width: 50px; } .sn-nav-ico { width: 40px; height: 40px; }
  .sv-entrance { transform: translateX(-40%) scale(.74); transform-origin: bottom center; } .sv-bikes { display: none; } .sv-tree { left: -30px; }
  .sv-pole { left: 4px; transform: scale(.78); transform-origin: bottom left; z-index: 3; }
  .sv-machines { gap: 6px; bottom: 120px; } .sv-machine { width: 64px; height: 170px; }
  .sv-exits { padding: 0 52px; } .sv-dboard { width: 92%; top: 190px; padding: 6px 8px; }
  .sv-db-head, .sv-db-row { grid-template-columns: 40px 76px 1fr 54px; gap: 4px; } .sv-db-to .sn-term { font-size: .95rem; }
  .sv-gaterow { gap: 8px; bottom: 120px; } .sv-office { display: none; } .sv-gatebank { gap: 10px; } .sv-gate { width: 30px; }
  .sv-paid-signs { padding: 0 52px; grid-template-columns: 1fr; justify-items: center; } .sv-backexit, .sv-transfer { display: none; }
  .sv-dirsign { flex-wrap: wrap; justify-content: center; }
  .sv-stairhall { padding: 0 50px; height: 250px; } .sv-up { width: 190px; height: 230px; } .sv-stairhall .sn-speakers { display: none; }
  .sv-platrow { grid-template-columns: 1fr; padding: 8px 52px 0; } .sv-platsign { padding-top: 0; display: flex; justify-content: center; }
  /* the platform on a phone flows: train, edge, the floor sign, announcements, then the way down and the ticket */
  .sv-plat { height: auto; padding-bottom: 64px; } .sv-plat .sv-edge { position: relative; bottom: auto; }
  .sv-plat .sv-anns { position: static; margin: 64px 12px 0; grid-template-columns: 1fr; }
  .sv-women { top: auto; bottom: -62px; } .sv-plat .sv-downbtn { left: 12px; right: auto; margin: 0; }
  .sn-station:has(.sv-plat) .sn-ticket.chip { bottom: 10px; }
  .sv-car { height: 170px; } .sv-tdoor i { width: 24px; height: 110px; } .sv-win { width: 30px; }
  .sv-ekimei { width: 92%; }
  .sv-ride { height: 600px; } .sv-hangads { left: 8px; right: 8px; gap: 6px; } .sv-ad.hang { width: 48%; } .sv-ad.hang .sv-ad-art, .sv-ad.hang .sv-ad-art svg { width: 54px; }
  .sv-ad-head { font-size: .82rem; white-space: normal; } .sv-ad-sub { font-size: .66rem; white-space: normal; }
  .sv-straps { left: 10px; right: 10px; } .sv-carwall { left: 6px; right: 6px; }
  .sv-band.top .sv-ad.top { display: none; } .sv-lcd { flex: 1; }
  .sv-row .sv-glass + .sv-pier + .sv-glass { display: none; } .sv-dooropen { flex-basis: 120px; }
  .sv-pform { padding-left: 6%; } .sv-pform .sv-pf-name { font-size: 1rem; padding: 3px 12px; }
  .sv-seat { right: 130px; } .sv-cushion i:nth-child(n+5) { display: none; } .sv-partition { display: none; }
  .sv-ctl { height: auto; flex-wrap: wrap; padding: 8px 10px; } .sv-riding { flex: 1 1 100%; } .sv-ctl .btn { flex: 1; }
  .sv-annpop { padding-bottom: 110px; }
  .sn-station .sn-ticket.chip { top: auto; bottom: 64px; right: 8px; }
}

/* ---------- 読む Read ---------- */

.rd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rd-intro { grid-column: 1 / -1; }
.rd-rung-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.rd-rung-head h2 { margin: 0; }
.rd-n { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--ai-wash); color: var(--ai); font-weight: 600; font-size: .9rem; flex: none; }
.rd-rung.locked { opacity: .6; }
.rd-stat { margin: .4rem 0 .8rem; font-size: .95rem; }
.rd-pace { font: 600 .95rem var(--f-body); font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 4.5rem; text-align: right; }


/* Word chains: big characters you drag across; a found word keeps its colour */
.rd-chains { text-align: center; }
.rd-chain {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 1.4rem auto 1rem; max-width: 40rem;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.rd-ch {
  font-size: clamp(1.9rem, 7vw, 3rem); line-height: 1.25; padding: .15em .06em; min-width: 1.1em; margin: 3px 0;
  border: 2px solid transparent; border-left-width: 0; border-right-width: 0;
  transition: background .12s, transform .12s, margin .2s;
}
/* adjacent characters overlap a pixel, so a band has no seams — which is
   why a band's colours are solid (mixed with the paper), not see-through:
   an overlap of two see-through ones would draw a line */
.rd-ch + .rd-ch { margin-left: -1px; }
/* a selection, and a found word, are one band with rounded ends */
.rd-ch.sel { background: color-mix(in srgb, var(--ai) 12%, var(--paper)); border-color: var(--ai); }
.rd-ch.sel.s0 { border-left: 2px solid var(--ai); border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.rd-ch.sel.s1 { border-right: 2px solid var(--ai); border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.rd-ch.nope { animation: rd-nope .4s; }
@keyframes rd-nope { 20% { transform: translateX(-4px); background: var(--amber-wash); } 60% { transform: translateX(4px); background: var(--amber-wash); } }
.rd-ch.found { cursor: default; }
.rd-ch.found.ws { margin-left: 6px; border-left: 2px solid color-mix(in srgb, var(--hue) 55%, var(--paper)); border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.rd-ch.found.we { margin-right: 6px; border-right: 2px solid color-mix(in srgb, var(--hue) 55%, var(--paper)); border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.rd-ch.found.h0, .rd-chip.h0 { --hue: var(--c-hira); }
.rd-ch.found.h1, .rd-chip.h1 { --hue: var(--jade); }
.rd-ch.found.h2, .rd-chip.h2 { --hue: var(--gold); }
.rd-ch.found.h3, .rd-chip.h3 { --hue: var(--c-kata); }
.rd-ch.found.h4, .rd-chip.h4 { --hue: var(--blush); }
.rd-ch.found { background: color-mix(in srgb, var(--hue) 22%, var(--paper)); border-color: color-mix(in srgb, var(--hue) 55%, var(--paper)); }
.rd-found.done .rd-chip { animation: rd-pop .4s ease-out; }
/* a found word lifts out of the line */
.rd-ch.leaving { transition: opacity .25s, transform .25s; opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
@keyframes rd-pop { 40% { transform: translateY(-6px); } }
.rd-found { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 2.2rem; margin-top: .4rem; }
.rd-chip { padding: 4px 12px; border-radius: 999px; font-size: .9rem; background: color-mix(in srgb, var(--hue) 18%, transparent); animation: fade .2s; }
.rd-chip b { font-weight: 500; margin-right: .3rem; font-size: 1.05rem; }
/* phrases: the sentence's english once it's split */
.rd-en { text-align: center; color: var(--ink-2); margin-top: .8rem; font-size: 1.05rem; animation: fade .3s; }

/* ---------- 探す Word search ---------- */

.rd-n.rd-game { background: var(--gold-soft); color: var(--ink); font-size: 1rem; }
.srch-play { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: flex-start; width: 100%; }
/* wider than the usual column, so the clues sit beside the grid on a desktop */
.s-body > .srch-play { max-width: 62rem; }
.srch-board { text-align: center; }
/* the grid is a square as big as the screen allows; a cell's character is half its width */
.srch-grid {
  --w: min(92vw, 30rem, calc(100svh - 230px));
  position: relative; width: var(--w); height: var(--w); margin: .8rem auto 0;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 14px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.srch-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.srch-lines line { stroke-width: .78; stroke-linecap: round; opacity: .3; }
.srch-lines .sel { stroke: var(--ai); opacity: .22; }
.srch-lines .h0 { stroke: var(--c-hira); } .srch-lines .h1 { stroke: var(--jade); } .srch-lines .h2 { stroke: var(--gold); }
.srch-lines .h3 { stroke: var(--c-kata); } .srch-lines .h4 { stroke: var(--blush); }
.srch-c { position: relative; display: grid; place-items: center; font-size: calc(var(--w) / var(--n) * .5); line-height: 1; }
.srch-c.nope { animation: rd-nope .4s; border-radius: 8px; }
.srch-c.hint { animation: srch-hint 1.6s ease-out; border-radius: 50%; }
@keyframes srch-hint { 0%, 60% { box-shadow: 0 0 0 3px var(--gold); background: var(--gold-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.srch-side { width: min(92vw, 16rem); display: flex; flex-direction: column; gap: .7rem; padding-top: 2.2rem; }
.srch-count { font: 600 1.05rem var(--f-body); color: var(--ink-2); }
.srch-clues, .srch-bonus { display: flex; flex-wrap: wrap; gap: 6px; }
.srch-clue { padding: 4px 12px; border-radius: 999px; font-size: .92rem; border: 1px solid var(--rule-2); }
.srch-clue.got { border-color: transparent; }
.srch-extra { --hue: var(--ink-3); border: 1px dashed var(--rule); }
.srch-extra small { color: var(--ink-3); margin-left: .2rem; }
.srch-done { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.srch-done .neko { width: 56px; height: 56px; }
.srch-done .stamp { transform: scale(.7); transform-origin: left center; }

/* ---------- 結ぶ Match ---------- */

.mt-card {
  font: inherit; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 12px;
  min-height: 56px; padding: 10px 14px; cursor: pointer; text-align: center; transition: border-color .12s, background .12s;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.mt-card.h0 { --hue: var(--c-hira); } .mt-card.h1 { --hue: var(--jade); } .mt-card.h2 { --hue: var(--gold); }
.mt-card.h3 { --hue: var(--c-kata); } .mt-card.h4 { --hue: var(--blush); }
.mt-card.sel { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-wash); }
.mt-card.got { background: color-mix(in srgb, var(--hue) 18%, var(--sheet)); border-color: color-mix(in srgb, var(--hue) 60%, var(--sheet)); cursor: default; }
.mt-card:disabled { color: var(--ink); opacity: 1; }
.mt-card.nope { animation: rd-nope .4s; }
/* four and four: two columns with room between for the lines */
.mt-four { text-align: center; }
.mt-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 38rem; margin: 1.2rem auto 0; }
.mt-col { display: flex; flex-direction: column; gap: .7rem; }
.mt-w { font-size: 1.45rem; }
.mt-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mt-lines line { stroke-width: 3; stroke-linecap: round; }
.mt-lines .tmp { stroke: var(--ai); stroke-dasharray: 6 6; }
.mt-lines .h0 { stroke: var(--c-hira); } .mt-lines .h1 { stroke: var(--jade); } .mt-lines .h2 { stroke: var(--gold); }
.mt-lines .h3 { stroke: var(--c-kata); } .mt-lines .h4 { stroke: var(--blush); }
/* one at a time: the word in the middle, a meaning each way round it */
.mt-one { text-align: center; }
.mt-compass {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center;
  max-width: 36rem; margin: 1.4rem auto 0;
}
.mt-t.d0 { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 20rem); }
.mt-t.d3 { grid-column: 1; grid-row: 2; }
.mt-centre { grid-column: 2; grid-row: 2; display: grid; place-items: center; padding: 1.4rem .4rem; }
.mt-t.d1 { grid-column: 3; grid-row: 2; }
.mt-t.d2 { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: min(100%, 20rem); }
.mt-arrow { position: absolute; top: 5px; left: 8px; font-size: .8rem; color: var(--ink-3); }
.mt-drag {
  font-size: 2.4rem; padding: 12px 28px; background: var(--sheet); border: 2px solid var(--ai); border-radius: 16px;
  box-shadow: var(--shadow-lift); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .2s; position: relative; z-index: 5;
}
.mt-drag.lift { transition: none; cursor: grabbing; transform-origin: center; }
/* far enough that letting go will answer */
.mt-drag.sure { border-color: var(--jade); }
.mt-drag.fly { transition: transform .22s ease-in, opacity .22s; opacity: .6; }
.mt-t { position: relative; min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 1.02rem; }
.mt-m { font-size: 1.02rem; }
.mt-t.over { border-color: var(--ai); background: color-mix(in srgb, var(--ai) 10%, var(--sheet)); }
.mt-t:disabled:not(.got) { opacity: .45; }
.mt-in { font-size: 1.35rem; font-weight: 500; }

/* ---------- 字幕 Subtitles ---------- */

.sb-play { text-align: center; width: 100%; }
/* a screen, dark whatever the theme, as a video is */
.sb-screen {
  position: relative; aspect-ratio: 16 / 9; width: min(92vw, 40rem); margin: 0 auto; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 30% 25%, #3B4351, #14161A 72%); box-shadow: var(--shadow-lift);
}
.sb-line {
  position: absolute; left: 4%; right: 4%; bottom: 11%; color: #fff; font-size: clamp(1.3rem, 4.6vw, 2.1rem); line-height: 1.4;
  text-shadow: 0 0 3px #000, 0 2px 8px rgba(0, 0, 0, .85); transition: opacity .1s;
}
.sb-line.gone { opacity: 0; }
.sb-time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.sb-time i { display: block; height: 100%; background: rgba(255, 255, 255, .6); transform-origin: left; animation: sb-drain linear forwards; }
@keyframes sb-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.sb-opts { margin-top: 1.1rem; }
/* hidden till the line goes, but holding its place so nothing jumps */
.sb-opts[hidden] { display: grid; visibility: hidden; }

/* ---------- teaching a pattern ---------- */

.pat-big.small { font-size: 1.6rem; margin-bottom: .1rem; }
/* the conversation: A on the left, B on the right, like a chat */
.tc-lines { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 .4rem; text-align: left; }
.tc-line { display: flex; align-items: flex-start; gap: .5rem; max-width: 88%; }
.tc-line.b { align-self: flex-end; flex-direction: row-reverse; }
.tc-line .ex-sent { margin: 0; }
.tc-line.b .ex-sent { background: var(--ai-wash); }
.tc-who { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .85rem; background: var(--gold-soft); color: var(--ink); margin-top: .35rem; }
.tc-line.b .tc-who { background: var(--ai-wash); color: var(--ai); }
/* how it's built: the pattern's own parts lit */
.tc-parts { justify-content: center; margin: 1rem 0 .4rem; }
.g-chunk.hl { border-color: var(--seal); background: color-mix(in srgb, var(--seal) 10%, var(--paper)); }
.g-chunk.hl .g-role { color: var(--seal); }
.tc-pair { display: grid; gap: .5rem; margin: 1rem 0 .4rem; }
/* the same teaching, as reference on the Grammar tab */
.g-teach { margin: .4rem 0; }
.g-teach .tc-parts { justify-content: flex-start; margin: .4rem 0; }
.g-vs { margin: .6rem 0; padding: .5rem .7rem; border-left: 3px solid var(--seal); background: color-mix(in srgb, var(--seal) 5%, transparent); border-radius: 0 10px 10px 0; }
.g-talk { display: flex; gap: .5rem; align-items: flex-start; }
.g-talk .tc-who { margin-top: .5rem; }
.g-talk .ex-sent { flex: 1; }
.g-teach .ex-sent { margin-left: 0; margin-right: 0; max-width: 34rem; }
/* build it: the line you're making, and the tray of pieces */
.bd-line {
  min-height: 3.6rem; margin: 1rem auto .8rem; width: 100%; max-width: 36rem; padding: 8px; border-radius: 14px;
  border: 1.5px dashed var(--rule); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
}
.bd-line.ok { border-style: solid; border-color: var(--jade); background: var(--jade-wash); }
.bd-line.miss { border-style: solid; border-color: var(--amber); background: var(--amber-wash); }
.bd-tray { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 36rem; margin: 0 auto; }
.bd-tile {
  font: inherit; font-size: 1.35rem; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--rule);
  border-radius: 12px; padding: 8px 14px; cursor: pointer; min-width: 3rem;
}
.bd-tile:hover { border-color: var(--ai); }
.bd-tile.used { visibility: hidden; }
.bd-tile.in { background: color-mix(in srgb, var(--ai) 10%, var(--sheet)); border-color: var(--ai); }
.bd-tile:disabled { cursor: default; }
/* change it: four whole sentences, one to a row */
.opts.sents { grid-template-columns: 1fr; max-width: 30rem; }
.opts.sents .opt { font-size: 1.3rem; justify-content: flex-start; text-align: left; padding: 12px 16px 12px 2.4rem; }

/* ---------- hiragana and katakana side by side ---------- */

.kg-h { color: var(--c-hira); }
.kg-k { color: var(--c-kata); }
.kc.pair { position: relative; }
.kc.pair .kp { display: flex; gap: .2em; align-items: baseline; justify-content: center; font-size: 1.3rem; line-height: 1.2; }
.kc.pair .not { opacity: .3; }
.kc.pair .kr { display: block; font-size: .68rem; color: var(--ink-3); }
.kc.pair.alike::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.alike-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); vertical-align: 2px; }
.pair-intro p { margin: 0; }
.pair-xl { display: flex; justify-content: center; gap: 2rem; }
.pair-side { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.pair-side small { color: var(--ink-3); font-size: .8rem; }

/* ---------- 文章 Short texts: each drawn as what it is ---------- */

.tx-play { text-align: center; width: 100%; }
.tx-card { max-width: 26rem; margin: 1rem auto; text-align: left; font-size: 1.35rem; line-height: 1.75; padding: 16px 20px; }
.tx-line { display: block; }
button.tx-line { font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; width: 100%; text-align: left; cursor: pointer; border-radius: 6px; }
button.tx-line:hover { background: color-mix(in srgb, var(--ai) 8%, transparent); }
.tx-line small { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.3; margin-bottom: .3rem; }
/* a message: a chat bubble from a friend */
.tx-message { background: var(--ai-wash); border-radius: 18px 18px 18px 4px; }
/* a sign: a white board with a heavy edge */
.tx-sign { background: var(--sheet); border: 3px solid var(--ink); border-radius: 6px; font-weight: 500; text-align: center; }
.tx-sign button.tx-line { text-align: center; }
/* a menu board: chalk on green, whatever the theme */
.tx-menu { background: #2E3B32; color: #F4F1E6; border: 6px solid #6B4F35; border-radius: 6px; }
.tx-menu .tx-line small { color: #BFC6B8; }
/* a receipt: thin paper, a dashed rule top and bottom */
.tx-receipt { background: #FBFAF6; color: #2A2724; border-top: 2px dashed #B9B2A3; border-bottom: 2px dashed #B9B2A3; font-size: 1.2rem; }
.tx-receipt .tx-line small { color: #807868; }
/* a diary: ruled lines */
.tx-diary { background: var(--sheet) repeating-linear-gradient(transparent 0 calc(1.75em - 1px), var(--rule-2) calc(1.75em - 1px) 1.75em); border-left: 3px solid var(--blush); }
.tx-q { font-size: 1.15rem; margin: .8rem 0 1rem; color: var(--ink); }
.tx-peek .tx-card { font-size: 1.1rem; margin-top: 0; }

/* ---------- Today's read ---------- */

.today-read { border-left: 4px solid var(--ai); }
.today-read.done { border-left-color: var(--jade); }
.tr-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tr-done { display: inline-flex; align-items: center; gap: 4px; color: var(--jade); font-size: .85rem; }
.tr-done .ico { width: 16px; height: 16px; }
.tr-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 .3rem; }
.tr-what { display: flex; flex-direction: column; }
.tr-what b { font-size: 1.15rem; font-weight: 600; }
.tr-what small { color: var(--ink-2); }

/* ---------- 遊ぶ Games: the capsule toys (js/toys-art.js) ----------
   Little vinyl figures with their own light: the same colours in either
   theme, like the painted places. */

.toy { display: block; width: 100%; height: auto; overflow: visible; }
.toy path, .toy circle, .toy ellipse, .toy rect { stroke: #3B342D; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.toy .n { stroke: none; }
.toy .l { fill: none; }
.toy .w { fill: #FFFDF8; } .toy .c { fill: #F4E6C8; } .toy .r { fill: #D9483B; } .toy .r2 { fill: #A8362C; }
.toy .g { fill: #E6B23E; } .toy .k { fill: #2E2B27; } .toy .p { fill: #F4A9B8; } .toy .b { fill: #4F7FC0; }
.toy .nv { fill: #2F4B7C; } .toy .sk { fill: #B9DDF0; } .toy .gr { fill: #6BAF73; } .toy .dg { fill: #3F7D56; }
.toy .br { fill: #9A6A3A; } .toy .wd { fill: #D3A26A; } .toy .o { fill: #EE8A3C; } .toy .y { fill: #F5CF52; }
.toy .gy { fill: #A9A499; } .toy .pu { fill: #8E5A9A; } .toy .mt { fill: #8DB05A; } .toy .cr { fill: #B8732E; } .toy .sl { fill: #F49A6C; }

/* the Games tab */
.gm-intro { grid-column: 1 / -1; }
.gm-machine { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.gm-purse { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px;
  background: var(--gold-soft); color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-purse b { font-size: 1.15rem; }
.gm-purse span { font-size: .85rem; color: var(--ink-2); }
.coin { width: 1.3em; height: 1.3em; display: inline-block; vertical-align: -.28em; }
.gm-stage { width: min(220px, 60vw); margin: -.4rem auto 0; }
.gm-art .gm-knob { transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.3,.1,.3,1); }
.gm-art .gm-drop { opacity: 0; }
.gm-stage.turning .gm-knob { transform: rotate(360deg); }
.gm-stage.turning .gm-caps { animation: gm-jiggle .3s 3 ease-in-out; transform-box: fill-box; transform-origin: center; }
.gm-stage.turning .gm-drop { animation: gm-drop .5s .9s ease-in forwards; }
@keyframes gm-jiggle { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(-2px, 2px) rotate(-2deg) } 75% { transform: translate(2px, -1px) rotate(2deg) } }
@keyframes gm-drop { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: translateY(0) } }
.gm-set { font-size: .95rem; color: var(--ink-2); }
.gm-turn { min-width: 15rem; justify-content: center; }
.gm-turn .coin { margin: 0 2px; }

.coin-gain { display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: .8rem auto 0;
  padding: 6px 14px; border-radius: 999px; background: var(--gold-soft); color: var(--ink); font-size: .95rem; animation: coin-in .5s ease-out; }
.coin-gain b { font-size: 1.1rem; }
.coin-gain .link { font-size: .85rem; }
@keyframes coin-in { from { transform: scale(.7); opacity: 0 } 60% { transform: scale(1.08) } to { transform: scale(1); opacity: 1 } }

/* the shelves: five to a plank, beside the machine (under it on a phone) */
.gm-shelf-head { display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left; margin-bottom: .4rem; }
.gm-shelf-head h2 { margin: 0; }
.gm-shelf-head .count { margin-right: auto; }
.gm-fold { width: 18px; height: 18px; align-self: center; color: var(--ink-3); transform: rotate(90deg); transition: transform .15s; }
.gm-shelves.shut .gm-fold { transform: none; }
.gm-shelves.shut .gm-shelf-head { margin-bottom: .6rem; }
/* folded: a dot for each toy in the set, in its capsule's colour once found */
.gm-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 26rem; }
.gm-dots i { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--rule); background: var(--sunken); }
.gm-dots i.on { border: 0; background: var(--h); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.gm-dots i.on.rare { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.gm-dots i.landed { animation: gm-land .7s; }
.gm-tabs { margin: .2rem 0 .6rem; }
.gm-tabs button { display: inline-flex; align-items: center; gap: 4px; }
.gm-tabs button:disabled { opacity: .5; }
.gm-tabs .ico { width: 14px; height: 14px; }
.gm-shelf { display: flex; flex-direction: column; gap: 6px; margin: .4rem auto 0; max-width: 40rem; }
.gm-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0 8px 10px; position: relative;
  border-bottom: 9px solid #B98551; border-radius: 0 0 4px 4px; box-shadow: 0 6px 0 -2px rgba(80, 50, 20, .25); }
.gm-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 0; text-align: center; min-width: 0; }
.gm-fig { width: min(84px, 100%); aspect-ratio: 1; position: relative; display: block; transition: transform .2s; }
.gm-slot:hover .gm-fig { transform: translateY(-3px); }
.gm-slot.rare .gm-fig::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(230, 178, 62, .45), transparent 70%); }
.gm-slot .toy { position: relative; }
.gm-x { position: absolute; right: -2px; top: -2px; font: 600 .7rem var(--f-body); font-style: normal; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0 5px; }
.gm-box { width: min(64px, 80%); aspect-ratio: 1; margin: 10px 0 6px; border-radius: 10px; border: 2px dashed var(--rule); background: var(--sunken);
  display: grid; place-items: center; font: 600 1.6rem var(--f-display); color: var(--ink-3); }
.gm-name { font-size: .95rem; line-height: 1.2; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.gm-slot.empty .gm-name { color: var(--ink-3); }
.gm-slot small { font-size: .72rem; color: var(--ink-3); line-height: 1.15; }
.gm-slot.bounce .gm-fig { animation: gm-bounce .45s; }
.gm-slot.landed .gm-fig { animation: gm-land .7s; }
@keyframes gm-bounce { 30% { transform: translateY(-8px) scale(1.06) } 60% { transform: translateY(0) scale(.97) } }
@keyframes gm-land { 0% { transform: translateY(-30px) scale(.4); opacity: 0 } 60% { transform: translateY(2px) scale(1.1); opacity: 1 } 100% { transform: none } }

/* a capsule, opened in the middle of the screen */
.ga-open { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 18, 15, .55);
  opacity: 0; transition: opacity .2s; }
.ga-open.on { opacity: 1; }
.ga-card { background: var(--sheet); border-radius: 20px; box-shadow: var(--shadow-lift); padding: 1.4rem 1.4rem 1.2rem; width: min(360px, 100%); text-align: center; }
.ga-cap { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 0 auto; }
.ga-cap[hidden], .ga-toy[hidden] { display: none; }
.ga-cap .capsule { width: 170px; animation: ga-wobble 1.4s ease-in-out infinite; }
.ga-hint { color: var(--ink-2); font-size: .95rem; }
@keyframes ga-wobble { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-6deg) } 40% { transform: rotate(5deg) } 60% { transform: rotate(-2deg) } }
.ga-open .cap-top, .ga-open .cap-bot { transition: transform .38s cubic-bezier(.3, 0, .4, 1), opacity .38s; transform-box: fill-box; }
.ga-open.cracked .ga-cap .capsule { animation: none; }
.ga-open.cracked .cap-top { transform: translate(-18px, -40px) rotate(-30deg); opacity: 0; }
.ga-open.cracked .cap-bot { transform: translate(14px, 40px) rotate(20deg); opacity: 0; }
.ga-fig { width: 150px; margin: 0 auto; animation: ga-pop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes ga-pop { from { transform: scale(.2) rotate(-20deg); opacity: 0 } to { transform: none; opacity: 1 } }
.ga-new { display: inline-block; margin: .4rem 0 .2rem; padding: 2px 12px; border-radius: 999px; background: var(--jade); color: var(--sheet); font-weight: 600; font-size: .85rem; }
.ga-dup { margin: .4rem 0 .2rem; color: var(--ink-2); font-size: .9rem; }
.ga-name { font-size: 2rem; line-height: 1.3; margin-top: .2rem; }
.ga-m { color: var(--ink-2); margin-bottom: 1rem; }
.ga-acts { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ga-complete h2 { margin-top: .4rem; }
/* every coin at once: a rainbow capsule, then everything that was in it */
.gm-turn-all { min-width: 15rem; justify-content: center; }
.gm-stage.many .gm-caps { animation: gm-jiggle .2s 7 ease-in-out; }
.ga-card.ga-many { width: min(440px, 100%); }
.ga-cap .capsule.big { width: 200px; filter: drop-shadow(0 0 18px rgba(245, 207, 82, .7)); animation: ga-wobble .9s ease-in-out infinite; }
.ga-sum { color: var(--ink-2); margin-bottom: .8rem; }
.ga-sum .coin { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.ga-haul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; max-height: min(52vh, 26rem); overflow-y: auto; padding: 4px 2px; margin-bottom: .6rem; }
.ga-got { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 4px 2px; border-radius: 12px; animation: ga-pop .45s var(--d) cubic-bezier(.3, 1.5, .5, 1) both; }
.ga-got.new { background: var(--jade-wash); }
.ga-got.rare { background: var(--gold-soft); }
.ga-got .gm-fig { width: min(64px, 100%); }
.ga-got .gm-name { font-size: .82rem; }
.ga-got em { font-style: normal; font-size: .68rem; font-weight: 600; color: var(--jade); }
.ga-got.rare em { color: var(--amber); }
.ga-got.bounce .gm-fig { animation: gm-bounce .45s; }

/* 忍者 Ninja slice: things fly up a field; a drag is a blade */
.nj-play { display: flex; flex-direction: column; gap: .6rem; height: 100%; min-height: calc(100dvh - 160px); }
.nj-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nj-prompt { font-size: 1.15rem; }
.nj-show { font-size: 1.5rem; margin-left: .3rem; }
.nj-lives { display: flex; gap: 6px; }
.nj-lives i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--seal); }
.nj-lives i.on { background: var(--seal); }
.nj-field { position: relative; flex: 1; min-height: 340px; border-radius: 18px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #2B3550, #1C2236); cursor: crosshair; }
.nj-field.shake { animation: nj-shake .35s; }
@keyframes nj-shake { 20% { transform: translateX(-6px) } 40% { transform: translateX(6px) } 60% { transform: translateX(-4px) } 80% { transform: translateX(3px) } }
.nj-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.nj-trail path { fill: none; stroke: #FFFDF8; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(185, 221, 240, .9)); }
.nj-it { position: absolute; left: 0; top: 0; border-radius: 50%; display: grid; place-items: center; background: #FFFDF8; color: #1E1D1A;
  border: 3px solid #3B342D; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); font-weight: 600; line-height: 1; will-change: transform; z-index: 2; }
.nj-it.word { border-radius: 999px; }
.nj-it.hit, .nj-it.slip { background: none; border-color: transparent; box-shadow: none; }
.nj-half { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; border: 3px solid #3B342D; background: #FFFDF8; }
.nj-it.hit .nj-half { background: #DDF1E3; border-color: #3D7A57; }
.nj-it.slip .nj-half { background: #F7E2BF; border-color: #A86A12; }
.nj-half.a { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); transform-origin: center; animation: nj-a .6s ease-in forwards; }
.nj-half.b { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); animation: nj-b .6s ease-in forwards; }
.nj-it.hit, .nj-it.slip { rotate: var(--a); }
@keyframes nj-a { to { transform: translateY(-26px) rotate(-18deg); opacity: 0 } }
@keyframes nj-b { to { transform: translateY(30px) rotate(16deg); opacity: 0 } }
.nj-banner { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; color: #FFFDF8; font-size: 1.5rem;
  opacity: 0; pointer-events: none; z-index: 4; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); white-space: nowrap; }
.nj-banner small { display: block; font-size: .8rem; opacity: .75; letter-spacing: .08em; text-transform: uppercase; }
.nj-banner.on { animation: nj-banner 1.6s ease-out; }
@keyframes nj-banner { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.9) } 15%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0 } }
.nj-combo { position: absolute; z-index: 4; transform: translate(-50%, -50%); color: #F5CF52; font: 700 1.1rem var(--f-body); pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6); animation: nj-combo .8s ease-out forwards; }
@keyframes nj-combo { to { transform: translate(-50%, -150%); opacity: 0 } }
.nj-score { font: 600 1.2rem var(--f-body); font-variant-numeric: tabular-nums; }
.nj-slips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: .4rem 0; }
.nj-slips small.muted { flex-basis: 100%; }
.nj-slips b { font-size: 1.3rem; }

/* めくる Swipe deck: a word on top, a looping deck underneath */
.dk-play { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding-top: 1rem; }
.dk-prompt { font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.2; text-align: center; }
.dk-prompt.en { font: 600 clamp(1.5rem, 6vw, 2.2rem) var(--f-display); }
.dk-hear { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.dk-deck { position: relative; width: min(300px, 82vw); height: 170px; margin: 1.6rem 0 .4rem; }
.dk-card { position: absolute; inset: 0; border-radius: 18px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow);
  display: grid; place-items: center; padding: 12px 18px; text-align: center; font-size: 1.3rem; user-select: none; -webkit-user-select: none; }
.dk-card[lang="ja"] { font-size: 2rem; }
.dk-card.top { z-index: 3; touch-action: none; cursor: grab; transition: transform .17s ease-out, opacity .17s, background .2s, border-color .2s; box-shadow: var(--shadow-lift); }
.dk-card.top.drag { transition: none; cursor: grabbing; }
.dk-card.top.up { border-color: var(--jade); background: var(--jade-wash); }
.dk-card.back1 { z-index: 2; transform: translateY(-16px) scale(.94); background: var(--sunken); }
.dk-card.back2 { z-index: 1; transform: translateY(-30px) scale(.88); background: var(--sunken); opacity: .6; }
.dk-card.back1 span, .dk-card.back2 span { visibility: hidden; }
.dk-card.off-r { transform: translate(140%, 10px) rotate(18deg); opacity: 0; }
.dk-card.off-l { transform: translate(-140%, 10px) rotate(-18deg); opacity: 0; }
.dk-card.off-u { transform: translateY(-160%) scale(.9); opacity: 0; }
.dk-card.good { background: var(--jade-wash); border-color: var(--jade); }
.dk-card.burn { background: var(--amber-wash); border-color: var(--amber); animation: dk-burn .38s; }
@keyframes dk-burn { 30% { transform: translateX(-8px) rotate(-2deg) } 60% { transform: translateX(8px) rotate(2deg) } 100% { transform: scale(.8); opacity: 0 } }
.dk-card.in-r { animation: dk-in-r .2s ease-out; }
.dk-card.in-l { animation: dk-in-l .2s ease-out; }
@keyframes dk-in-r { from { transform: translateX(40px); opacity: 0 } }
@keyframes dk-in-l { from { transform: translateX(-40px); opacity: 0 } }
.dk-dots { display: flex; gap: 6px; }
.dk-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.dk-dots i.on { background: var(--ink); }
.dk-dots i.burnt { background: none; border: 1.5px solid var(--amber); }
.dk-btns { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.dk-b .ico { width: 22px; height: 22px; }

/* a word's topic, and a word beyond N5 */
.tag-x { display: inline-block; margin: .1rem auto .4rem; padding: 1px 10px; border-radius: 999px; font-size: .78rem; color: var(--ink-2); border: 1px dashed var(--rule); }
.lib-topic + .lib-topic { margin-top: .9rem; }
.lib-topic h3 { font: 600 .9rem var(--f-body); color: var(--ink-2); margin: .2rem 0 .5rem; }
.lib-topic h3 span { margin-right: .3rem; color: var(--ink); }
h1 .h-en { font-size: .6em; color: var(--ink-2); font-weight: 500; }

/* 外来語 Loanwords: a word to sound out, and the rules sheet */
.rd-btns { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.ln-play { text-align: center; padding-top: 1rem; }
.ln-word { font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1.2; margin: .6rem 0 .2rem; }
.ln-hear { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; margin-bottom: 1.2rem; }
.ln-opts { max-width: 34rem; margin: 0 auto; }
.ln-why { min-height: 3.6rem; margin-top: 1rem; }
.ln-because { margin-top: .3rem; font-size: .9rem; color: var(--ink-2); }
.ln-rules h2 { margin-top: .2rem; }
.ln-rule { padding: .7rem 0; border-top: 1px solid var(--rule-2); }
.ln-rule h3 { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .3rem; }
.ln-rule p { margin-bottom: .5rem; }
.ln-hide { margin: .2rem 0 .6rem; }
.ln-group { padding: .6rem 0; border-top: 1px solid var(--rule-2); }
.ln-group h3 { margin-bottom: .4rem; }
.ln-group.tricky h3 { color: var(--amber); }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 6px; }
.ln-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--sheet); text-align: left; }
.ln-item b { font-size: 1.15rem; font-weight: 500; }
.ln-item b.lg { font-size: .95rem; }
.ln-rom { color: var(--ink-3); font-size: .75rem; }
.ln-en { color: var(--ink-2); font-size: .85rem; line-height: 1.25; }
.ln-item.hid .ln-en { visibility: hidden; }
.ln-n { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ai-wash); color: var(--ai); font: 600 .8rem var(--f-body); flex: none; }

/* ============================================================
   PHONE LAYER

   Everything from this marker to the end of the file is inside
   @media (max-width: 720px) and can't reach a desktop window; smoke.mjs
   reads this file from the marker and fails on any rule outside it.

   Designed for a phone held in one hand. The bottom third of the screen
   is where the thumb lives, so that's where the doing is: the one main
   button of each screen, pinned bottom-left; the round sections button,
   bottom-right; answers and Next at the foot of every question. The top is
   for reading, and for the rare Close — out of the way of a stray tap.
   Targets are at least 48px, and the ones next to each other are spaced
   so a thumb can't land between them on the wrong one.
   ============================================================ */

@media (max-width: 720px) {

  /* ---------- the page ---------- */

  html { -webkit-tap-highlight-color: transparent; }
  body { font-size: 16px; }
  button, .btn, input, select { touch-action: manipulation; }
  main { padding: 12px 12px calc(104px + env(safe-area-inset-bottom)); }
  .card { padding: 16px; margin-bottom: 12px; border-radius: 16px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.18rem; }
  .muted.small, .small { font-size: .88rem; }
  .tiny { font-size: .8rem; }
  .card-head { flex-wrap: wrap; row-gap: .15rem; }
  .card-head .count { flex-basis: 100%; }
  /* the fade-in moves the view with a transform, and a transformed ancestor
     would pin the bottom buttons to the view instead of the screen */
  .view.on { animation: fadeOnly .18s ease-out; }
  @keyframes fadeOnly { from { opacity: 0; } }
  .btn { min-height: 48px; padding: 12px 20px; font-size: 1rem; }
  .btn-sm { min-height: 44px; }
  kbd { display: none; }

  /* ---------- the top bar: the name and where you are, nothing to tap by mistake ---------- */

  .topbar { padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top)); gap: .6rem; }
  .top-nav, .top-actions { display: none; }
  .brand-name { font-size: 1.05rem; }
  .brand-seal { width: 30px; height: 30px; }
  .m-title { display: block; margin-left: auto; color: var(--ink-2); font-size: .95rem; font-weight: 500; }
  .m-title [lang="ja"] { color: var(--ink-3); margin-right: .2em; }

  /* ---------- the sections button and the rolodex ---------- */

  .burger {
    display: grid; place-items: center; position: fixed; z-index: 45;
    right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--ink); color: var(--paper); box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  }
  .burger-bars { display: grid; gap: 5px; width: 22px; }
  .burger-bars i { display: block; height: 2.2px; border-radius: 2px; background: currentColor; }
  .burger:active { transform: scale(.94); }
  .burger.nudge::after, .d-settings.nudge::after {
    content: ""; position: absolute; top: 6px; right: 6px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--amber); border: 2px solid var(--ink);
  }
  .d-settings.nudge::after { border-color: var(--sheet); top: 2px; right: 2px; }

  .drawer { position: fixed; inset: 0; z-index: 44; }
  .drawer.on { display: block; }
  .drawer-veil { position: absolute; inset: 0; background: rgba(20, 19, 17, .42); animation: fade .12s both; }
  /* the wheel of groups: a capsule floating above the button, rounded all
     round so it reads as a wheel to spin rather than a panel */
  .drawer-sheet {
    position: absolute; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom));
    background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25); padding: 10px 6px;
    animation: rise .16s cubic-bezier(.2, .9, .3, 1.15) both;
  }
  @keyframes rise { from { transform: translateY(12px) scale(.97); opacity: 0; } }
  /* a flick can carry past several groups and still come to rest on one */
  .drawer-nav {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 calc(50% - 2.5rem);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative;
  }
  .drawer-nav::-webkit-scrollbar { display: none; }
  .drawer-nav button {
    flex: none; width: 5rem; height: 5rem; border-radius: 50%; scroll-snap-align: center; position: relative;
    /* the scale and fade are set every frame of a scroll (phone.js); easing
       them as well made them trail the finger */
    transition: background .12s; will-change: transform, opacity;
    background: color-mix(in srgb, var(--g) 10%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--ink-2); font-size: .8rem; font-weight: 500;
  }
  .drawer-nav button [lang="ja"] { font-size: 1.3rem; color: var(--g); line-height: 1.2; }
  .drawer-nav button.mid { background: var(--g); color: var(--paper); }
  .drawer-nav button.mid [lang="ja"] { color: var(--paper); opacity: .85; }
  /* the group in the middle, its sections as squares above the wheel */
  .drawer-sub {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 12px);
    max-height: calc(100dvh - 230px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--sheet); border: 1px solid var(--rule-2); border-top: 4px solid var(--g); border-radius: 22px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25); padding: 4px 10px 10px; animation: rise .16s cubic-bezier(.2, .9, .3, 1.15) both;
  }
  .drawer-sub:empty { display: none; }
  .ds-head { display: flex; align-items: center; gap: .45rem; padding: 8px 4px 9px; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g); }
  .ds-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--g); }
  .ds-head [lang="ja"] { font-size: 1rem; letter-spacing: 0; }
  .ds-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
  .ds-go .coin { width: 1.1em; height: 1.1em; vertical-align: 0; }
  .ds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .ds-tile {
    position: relative; min-height: 78px; border-radius: 14px; padding: 7px 3px; text-align: center; min-width: 0;
    background: color-mix(in srgb, var(--g) 8%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--g) 22%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  .ds-tile:active { transform: scale(.96); }
  .ds-jp { font-size: 1.15rem; line-height: 1.15; color: var(--g); max-width: 100%; overflow-wrap: anywhere; }
  .ds-jp.long { font-size: .92rem; white-space: nowrap; letter-spacing: -.02em; }
  .ds-en { font-size: .7rem; line-height: 1.15; color: var(--ink-2); }
  .ds-note { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .ds-note .coin { width: 1.1em; height: 1.1em; vertical-align: 0; }
  .ds-note .ico { width: 12px; height: 12px; }
  .ds-tile.shut { background: var(--sunken); border-color: transparent; }
  .ds-tile.shut .ds-jp, .ds-tile.shut .ds-en { color: var(--ink-3); }
  .ds-tile.on { background: var(--g); border-color: var(--g); }
  .ds-tile.on .ds-jp, .ds-tile.on .ds-en, .ds-tile.on .ds-note { color: var(--paper); }
  .ds-new { position: absolute; top: 4px; right: 4px; font-size: .6rem; font-weight: 600; line-height: 1.5; padding: 0 5px; border-radius: 999px; background: var(--seal); color: #fff; }
  /* Settings: a round button beside the sections button, while the drawer is open */
  .d-settings {
    position: absolute; right: calc(88px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
    width: 60px; height: 60px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--rule-2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: .66rem; font-weight: 500; color: var(--ink-2); animation: rise .16s .04s cubic-bezier(.2, .9, .3, 1.15) both;
  }
  .d-settings .ico { width: 22px; height: 22px; }

  /* ---------- the one main button of a screen: bottom-left, beside the sections button ---------- */

  .view.on .cta {
    position: fixed; z-index: 40; margin: 0;
    left: calc(16px + env(safe-area-inset-left)); right: calc(92px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom)); height: 60px; min-height: 60px;
    font-size: 1.05rem; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  }

  /* ---------- Today ---------- */

  .today-grid { gap: 0; }
  .hero { padding: 18px 18px 16px; }
  .hero h1 { font-size: 1.45rem; }
  .hero .lede { font-size: 1rem; margin-bottom: .2rem; }
  .hero-row { align-items: center; }
  /* with the cat: the cat and the ring share the top line, the words get the full width under them */
  .hero-row:has(.hero-neko) { display: grid; grid-template-columns: 1fr auto; row-gap: .4rem; }
  .hero-row:has(.hero-neko) .hero-neko { grid-area: 1 / 1; }
  .hero-row:has(.hero-neko) .hero-ring { grid-area: 1 / 2; }
  .hero-row:has(.hero-neko) .hero-text { grid-area: 2 / 1 / 3 / 3; }
  .hero .hero-neko { width: 60px; height: 60px; }
  .hero-ring, .hero-ring .ring { width: 56px; height: 56px; }
  .hero-first .hero-art .neko { width: 72px; height: 72px; }
  .hero-seal { width: 52px; height: 52px; font-size: 30px; }
  .hero .btn-ghost { width: 100%; margin-top: .6rem; }
  .hero.check .hero-corner { width: 52px; height: 52px; }

  .tasks.grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tasks.grid .task { min-height: 76px; padding: 12px; grid-template-columns: 26px 1fr; column-gap: .6rem; border-radius: 14px; }
  .tasks.grid .task-en { font-size: .98rem; }
  .tasks.grid .task-en small { font-size: .82rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tasks.grid .task { align-content: center; }
  .tasks.grid .task-jp { font-size: .85rem; }
  .task .tick { width: 26px; height: 26px; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px; min-height: 96px; border-radius: 14px; }
  .tile .ring { width: 40px; height: 40px; }
  .tile-jp { font-size: 1.15rem; }
  .tile-en { font-size: .9rem; }
  .tile small { font-size: .8rem; }
  .seg.seg-sm button { padding: 6px 12px; font-size: .88rem; }

  .menu-card { flex-wrap: wrap; gap: .8rem; }
  .menu-card .noren.mini { width: 88px; }
  .menu-card-text { flex: 1 1 12rem; font-size: .98rem; }
  /* a way in, not the screen's main job: outlined, so the one filled button stays the one to press */
  .menu-card .btn { flex: 1 1 100%; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }

  .prog { padding: 14px 16px; }
  .prog .prog-row { grid-template-columns: 4.6rem 1fr 3.6rem; font-size: .9rem; margin: .35rem 0; }
  .prog .bar { height: 6px; }

  /* the rail's words: a taste, not the whole list — the Words tab has it */
  .deck .wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .deck .wtile:nth-child(n+13) { display: none; }
  .deck .wt-say { min-height: 5.2rem; }
  .deck .wt-jp { font-size: 1.15rem; }
  .deck .wt-en { font-size: .78rem; }
  .wt-more { width: 32px; height: 32px; }
  .more { width: 44px; }
  .more .ico { width: 20px; height: 20px; }

  /* ---------- the kana chart ---------- */

  .chart-head { gap: .6rem; }
  .chart-head > .muted { font-size: .86rem; flex-basis: 100%; }
  .seg { width: 100%; }
  .seg button { flex: 1; min-height: 44px; font-size: 1rem; }
  .chart-cols { grid-template-columns: 1fr; }
  .chart-sec { padding: 14px 10px; }
  .kgrid { gap: 5px; }
  .kgrid.c5 { grid-template-columns: repeat(5, 1fr); }
  .kgrid.c3 { grid-template-columns: repeat(3, 1fr); }
  .kgrid.c4 { grid-template-columns: repeat(4, 1fr); }
  .kgrid.c5.labelled { grid-template-columns: 1.5rem repeat(5, 1fr); }
  .kgrid.c3.labelled { grid-template-columns: 1.8rem repeat(3, 1fr); }
  .kc { border-radius: 12px; }
  .kg { font-size: 1.7rem; }
  .c3 .kg, .c4 .kg { font-size: 1.6rem; }
  .kh { font-size: .95rem; }
  .how-chart summary h2 { font-size: 1.1rem; }

  /* ---------- the Words library ---------- */

  .lib-search { flex: 1 1 100%; max-width: none; min-height: 48px; font-size: 1rem; order: -1; }
  .chart-head .seg { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .chart-head .seg::-webkit-scrollbar { display: none; }
  .chart-head .seg button { flex: 1 0 auto; }
  ul.lib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib .wt-more { width: 36px; height: 36px; }

  /* ---------- sessions: read at the top, answer at the bottom ---------- */

  .s-top { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .s-top .icon-btn { width: 44px; height: 44px; }
  .s-title { font-size: .95rem; }
  .s-body { padding: 10px 16px 6px; align-items: stretch; }
  .s-body > * { margin: 0 auto; }
  .s-foot { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); gap: 12px; }
  .s-foot .btn { height: 60px; min-height: 60px; font-size: 1.05rem; border-radius: 999px; }
  .s-foot .btn:not(.btn-ghost) { flex: 1; }
  .s-foot .btn-ghost { flex: 0 0 auto; padding: 12px 18px; }
  .s-foot > span:empty { display: none; }

  /* a question fills the screen: prompt in the middle of the top, the
     verdict under it, the answers down where the thumb is */
  .q { display: flex; flex-direction: column; min-height: 100%; }
  .q > :first-child { margin-top: auto; }
  .q > .q-ask { font-size: 1.05rem; }
  .q > .opts { order: 3; margin-top: auto; margin-bottom: 10px; }
  .q > .verdict { order: 2; min-height: 3.6rem; margin: .4rem 0 .6rem; font-size: 1.05rem; }
  .glyph-l { font-size: min(7.5rem, 32vw); margin: .2rem 0 .6rem; }
  .play { width: 112px; height: 112px; margin: .4rem auto .6rem; }
  .opts { gap: 12px; max-width: none; width: 100%; }
  .opts.n3 { grid-template-columns: repeat(3, 1fr); }
  .opt { min-height: 78px; font-size: 1.35rem; border-radius: 16px; }
  .opt.jp { font-size: 2.1rem; }
  .opt.furi { font-size: 1.55rem; }
  .opts.words .opt { font-size: 1.1rem; padding: 12px 10px; }
  .opt kbd { display: none; }

  .intro { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
  .glyph-xl { font-size: min(10rem, 40vw); }
  .word-xl { font-size: min(3.6rem, 14vw); }
  .story, .rule { font-size: 1rem; }
  .info { padding-top: 6px; }
  .info h2 { font-size: 1.5rem; }
  .info p { font-size: 1.02rem; }
  .sc-sentence { font-size: 1.9rem; }

  /* writing: a big pad in the middle, its tools spaced out beneath */
  /* as big as the screen allows: the full width, unless the height runs out first */
  .q-w .pad { width: min(92vw, calc(100svh - 330px)); margin-top: .4rem; }
  .pad-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(92vw, calc(100svh - 330px)); min-width: 17rem; margin: 0 auto; }
  .pad-tools .btn { min-height: 48px; padding: 8px 4px; font-size: .92rem; }
  .q-w > .verdict { order: 4; }

  /* typing: the input high up, so the keyboard doesn't cover it */
  .q-c > .q-ask { margin-top: 1rem; }
  .type-in { font-size: 1.4rem; min-height: 56px; max-width: none; }
  .type-preview { font-size: 2rem; }

  .finish { padding-top: .5rem; }
  .ex-sent { width: 100%; }

  /* ---------- sprint ---------- */

  .pick { gap: .4rem; }
  .pick-l { width: 100%; font-size: .9rem; }
  .pick .seg button { min-height: 48px; line-height: 1.25; }
  .pick .seg button [lang="ja"] { display: block; font-size: 1.05rem; }
  .sprint-grid { gap: 0; }
  /* Sprint's sheet on a phone: the six modes as a 3×2 block of tiles rather
     than a pill that wraps unevenly; questions and minutes side by side */
  .sprint-grid .seg { border-radius: 16px; gap: 3px; }
  .sprint-grid .seg button { border-radius: 13px; padding: 6px 4px; }
  .sprint-grid .seg-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sprint-grid .seg-mode button { min-height: 56px; }
  .sprint-grid .seg-mode button [lang="ja"] { font-size: 1rem; }
  .pick-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .pick-pair .pick { margin: .7rem 0 0; }
  .pick-pair .seg button { font-size: .95rem; padding: 6px 2px; }
  .sprint-grid .seg-mark button { font-size: .9rem; }
  .sp-strip { gap: 1px; }
  .sp-clock { font-size: 1.2rem; }
  .sp-input { font-size: 1.5rem; min-height: 56px; }
  /* the box gives up a little height for Next's own row; everything is the box's width */
  .sp-q.q-w .pad, .sp-q .pad-tools, .sp-next { width: min(92vw, calc(100svh - 350px)); }
  .sp-q .pad-tools { min-width: 0; }
  .sp-next { min-height: 56px; font-size: 1.05rem; border-radius: 999px; }
  .sp-q .pad-tools { margin-top: 10px; }
  .sp-count { font-size: 7rem; }

  /* ---------- Read a Menu ---------- */

  .menu-layout { grid-template-columns: 1fr; gap: 0; }
  .menu-board { padding: 16px 12px 20px; }
  .menu-name { font-size: 1.6rem; }
  .mi-list { columns: 1; }
  .mi { min-height: 52px; padding: 8px 8px; }
  .mi-name { font-size: 1.3rem; }
  .mi-price { font-size: 1rem; }
  .noren { width: 200px; height: 78px; }
  /* while an order is on, the request rides along at the top of the screen */
  .menu-side { display: flex; flex-direction: column; }
  .menu-layout:has(.order-ask) .menu-side {
    order: -1; position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 5;
  }
  .menu-layout:has(.order-ask) .menu-side > :not(.order) { display: none; }
  .menu-side .order:has(.order-ask) { box-shadow: var(--shadow-lift); padding: 12px 14px; margin-bottom: 10px; }
  .order:has(.order-ask) .neko.mini { width: 44px; height: 44px; }
  .order:has(.order-ask) .order-ask { font-size: 1.12rem; margin: 0; }
  .order:has(.order-ask) .tiny { display: none; }
  .order:has(.order-ask) .order-dots { margin: .4rem 0; }
  .order:has(.order-ask) .btn-sm { min-height: 36px; padding: 6px 14px; font-size: .88rem; }

  /* ---------- Record ---------- */

  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 14px; border-radius: 14px; }
  .stat:last-child:nth-child(odd) { grid-column: span 2; }
  /* the calendar: twelve weeks across the whole card, not two-thirds of it */
  .cal { grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(7, 18px); gap: 4px; }
  .record-grid { grid-template-columns: 1fr; }
  .sk-line { grid-template-columns: 7rem 1fr 3rem; font-size: .92rem; }

  /* ---------- sheets and questions: full-width, with Done where the thumb is ---------- */

  .sheet { max-height: 86vh; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .sheet-x { width: 44px; height: 44px; }
  .sheet-done { display: flex; width: 100%; height: 56px; margin-top: 1rem; border-radius: 999px; font-size: 1.05rem;
    position: sticky; bottom: 0; box-shadow: 0 -10px 14px 6px var(--sheet); }
  .set-row { padding: 14px 0; min-height: 60px; }
  .set-row input[type="checkbox"] { width: 26px; height: 26px; }
  .set-row select { min-height: 44px; font-size: 1rem; }
  .set-block .btn { width: 100%; margin: 0 0 8px; }
  /* the safe choice at the bottom, the one that can't be undone above it */
  .ask-btns { flex-direction: column-reverse; gap: 10px; }
  .ask-btns .btn { width: 100%; min-height: 54px; font-size: 1.02rem; }
  .ask .sheet-done { display: none; }

  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .sound-bar { bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* ---------- patterns ---------- */
  .pat-big { font-size: 2rem; }
  .pat-sent { font-size: 1.6rem; }
  .pat-item { padding: 12px 14px; }
  .pat-item summary { min-height: 40px; align-items: center; }

  /* ---------- kanji ---------- */
  .kgrid.c6 { grid-template-columns: repeat(4, 1fr); }
  .kgrid.c6 .kg { font-size: 2rem; }
  .kgrid.c6 .kr { font-size: .72rem; }
  .k-read { font-size: 1.1rem; }

  /* ---------- grammar and flashcards ---------- */
  .g-grid { grid-template-columns: 1fr; }
  .g-parts { grid-template-columns: 1fr; }
  .g-jp { font-size: 1.1rem; }
  .g-table { font-size: .85rem; }
  .cd-decks { display: flex; overflow-x: auto; gap: 14px; padding: 8px 6px 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .cd-decks::-webkit-scrollbar { display: none; }
  .deck-tile { flex: 0 0 7.4rem; height: 5.8rem; scroll-snap-align: center; }
  .cd-opts .seg { width: 100%; }
  /* the card takes the room between the deck picker and the buttons at the foot */
  .flashcard { width: 100%; aspect-ratio: auto; height: max(15rem, calc(100svh - 470px)); }
  .cf-glyph { font-size: 7rem; }
  .cf-word { font-size: 2.4rem; }
  .cd-btns { position: fixed; left: 16px; right: 92px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; }
  .cd-btns .btn { height: 60px; min-height: 60px; }
  .cd-btns .cd-flip, .cd-btns .cd-got { flex: 1; }
  .cd-btns [data-act="cd-prev"], .cd-btns [data-act="cd-next"] { display: none; }

  /* ---------- numbers and milestones ---------- */
  .stats-wide { grid-template-columns: repeat(2, 1fr); }
  .record-charts { grid-template-columns: 1fr; }
  .ms-grid { grid-template-columns: repeat(4, 1fr); }
  .combo { top: calc(50% + env(safe-area-inset-top) / 2); }

  /* out and about */
  .out-intro { grid-template-columns: 1fr; gap: 1rem; }
  .levels { grid-template-columns: 1fr; gap: 6px; }
  .ow-jp { font-size: 1.8rem; }
  .out-journey { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .place { padding: 12px 12px 10px; }
  .pl-jp { font-size: 1.35rem; }
  .pl-en { font-size: .85rem; }
  .scene-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 6px; padding: 4px 16px 12px; scroll-snap-type: x mandatory; }
  .scene-tile { scroll-snap-align: start; min-width: 7rem; min-height: 3.6rem; }
  .scene-head { flex-direction: row; }
  .scene-head h1 { font-size: 1.5rem; }
  .plates { grid-template-columns: 1fr 1fr; gap: 10px; }
  .plate { min-height: 5rem; }
  .bubble { max-width: 86%; }
  .scene-actions .btn-ghost { width: 100%; min-height: 48px; }
  .paper-receipt { font-size: 1rem; }

  /* the notebook: the box first and big, the page under it */
  .bk-head h1 { font-size: 1.5rem; }
  .bk-head .lede { font-size: .95rem; }
  .bk-layout { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .bk-left, .bk-right { display: contents; }
  .bk-desk { order: 1; } .bk-page-card { order: 2; } .bk-picker { order: 3; } .bk-diary { order: 4; }
  .bk-tool { gap: 6px; }
  .bk-tl { width: 2.6rem; flex-basis: 2.6rem; font-size: .66rem; }
  .bk-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bk-seg button { padding: 6px 9px; min-height: 36px; }
  .bk-seg button span { display: none; }
  .bk-seg button span[lang] { display: inline; }
  .bk-box { max-width: none; }
  .bk-actions { justify-content: center; }
  .bk-actions .btn-ghost { flex: 1 1 0; min-height: 44px; }
  .bk-add kbd { display: none; }
  .bk-paper { padding: 6px; }
  .bk-chars { grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); max-height: 13rem; }
  .bk-char { font-size: 1.35rem; }
  .bk-page-tools .btn { flex: 1 1 auto; min-height: 44px; }

  /* コンビニ: the phone's own store — one long shelf, a product a screen,
     and what's in your hands comes up as a sheet over it */
  .kb-body { grid-template-columns: 1fr; }
  .kb-modes .seg { width: 100%; flex-wrap: nowrap; }
  .kb-modes .seg button { flex: 1; padding: 8px 6px; font-size: .86rem; white-space: nowrap; min-height: 44px; }
  .kb-dotkey { display: none; }
  .kb-aisles { padding: 10px 12px 0; }
  .kb-chip { font-size: .9rem; padding: 6px 12px; min-height: 36px; }
  .kb-ps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 10px; scrollbar-width: none;
    background: linear-gradient(transparent calc(100% - 66px), #FFFFFF calc(100% - 66px), #D3D8DB calc(100% - 60px), #F7D96A calc(100% - 60px), #E9C445 100%); }
  .kb-ps::-webkit-scrollbar { display: none; }
  .kb-ps-sign { flex: 0 0 84px; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding-bottom: 70px; }
  .kb-ps-sign .kb-sign { writing-mode: vertical-rl; padding: 12px 7px; font-size: 1.1rem; letter-spacing: .1em; }
  .kb-slot { flex: 0 0 62%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 340px; }
  .kb-slot.end { flex-basis: 20%; }
  .kb-slot > .kb-prod { height: 272px; justify-content: flex-end; margin-bottom: 8px; }
  .kb-slot > .kb-prod:hover { transform: none; }
  .kb-slot > .kb-prod.readable::after { bottom: -14px; }
  .kb-zoom { transform-origin: bottom center; }
  .kb-ptag { height: 52px; width: 88%; margin-bottom: 5px; background: #fff; color: #222; border-radius: 3px; display: flex; flex-direction: column; justify-content: center;
    padding: 2px 10px; font-family: var(--f-ja); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
  .kb-ptag .n { font-size: 1rem; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; }
  .kb-ptag .pr { font-size: .85rem; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
  .kb-ptag .pr small { font-size: .62rem; font-weight: 500; color: #666; }
  .kb-ptag .kb-ok { font-size: .8rem; }
  .kb-hint { display: block; text-align: center; margin: 8px 0; }
  .kb-hands { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 48; max-height: 86vh; overflow-y: auto;
    border-radius: 22px 22px 0 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); min-height: 0; }
  .kb-hands.up { display: flex; }
  .kb-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 0 auto; }
  .kb-hold { height: 290px; }
  .kb-row .btn, .kb-main { min-height: 52px; }
  .kb-opts .opt { min-height: 64px; font-size: 1rem; }

  /* the sushi counter and the festival, on a phone: one long belt, one long street */
  .ws-signs { display: flex; align-items: center; }
  .ws-signs .ws-noren { position: static; }
  .ws-signs .ws-noren-cloth b { flex: 0 0 26px; height: 44px; padding-top: 6px; font-size: 1rem; }
  .ws-sushi .ws-board { margin: 8px 12px 0; justify-content: center; }
  .ws-belt-ps { background: linear-gradient(transparent calc(100% - 66px), #BCC2C7 calc(100% - 66px), #9AA1A7 calc(100% - 60px), #F7D96A calc(100% - 60px), #E9C445 100%); }
  .ws-phone-lanterns { display: flex; justify-content: center; padding: 14px 0 4px; }
  .ws-street-ps { background: none; }
  .ws-stall-slot { height: 430px; flex-basis: 80%; }
  .ws-stall-slot .kb-zoom { transform-origin: bottom center; }
  .ws-night .kb-hint { color: #CFC6DA; }

  /* the street of signs, on a phone: one shop a screen */
  .st-ps { background: none; padding-top: 14px; }
  .st-slot { flex: 0 0 auto; height: auto; padding: 0 6px; }
  .st-slot .st-shop { transform-origin: bottom center; }
  .st-slot .st-shop { zoom: .74; }
  .st-slot .st-ramen, .st-slot .st-shut { zoom: .9; }

  /* the word list: reading under the word, meaning beside */
  .word-list th:nth-child(2), .word-list td.wl-r { display: none; }
  .word-list td { padding: 10px 10px; }

  /* the sushi visit on a phone: the door and the hall stack; the phrasebook goes under */
  .ws-street-door { grid-template-columns: 1fr; padding: 12px; }
  .ws-door-scene .ws-front { min-height: 430px; }
  .ws-entry { grid-template-columns: 1fr; }
  .ws-foyer { height: 170px; }
  .ws-answers { justify-content: stretch; }
  .ws-answer { flex: 1 1 100%; align-items: flex-start; min-height: 52px; }

  /* the station on a phone: its modal over the whole screen (the rest of it,
     shared with a narrow desktop, is in the container query above) */
  .sn-modal { position: fixed; z-index: 60; }

  /* ---------- 読む Read ---------- */
  .rd-grid { grid-template-columns: 1fr; gap: 12px; }
  .rd-chain { margin-top: 2.2rem; }

  /* word search: the grid the width of the screen, the clues under it */
  .srch-grid { --w: min(92vw, calc(100svh - 300px)); }
  .srch-side { padding-top: 0; width: min(92vw, 30rem); }
  .srch-play { gap: .8rem; }

  /* match: the meanings where the thumb is */
  .mt-board { gap: 2.2rem; }
  .mt-w { font-size: 1.3rem; }
  .mt-card { padding: 8px 10px; font-size: .95rem; }
  .mt-w.mt-card { font-size: 1.3rem; }
  /* the compass in the lower half, in reach of the thumb */
  .mt-one { display: flex; flex-direction: column; min-height: 100%; }
  .mt-compass { margin-top: auto; margin-bottom: 14px; width: 100%; gap: 10px; }
  .mt-t { min-height: 74px; padding: 8px; font-size: .95rem; }
  .mt-drag { font-size: 2rem; padding: 10px 18px; }
  .mt-centre { padding: 1.6rem .2rem; }

  /* subtitles: the screen at the top, the answers down where the thumb is */
  .sb-play { display: flex; flex-direction: column; min-height: 100%; }
  .sb-play > .verdict { order: 2; min-height: 2.6rem; margin: .8rem 0 .4rem; }
  .sb-opts { order: 3; margin-top: auto; margin-bottom: 10px; }

  .opts.sents { grid-template-columns: 1fr; }
  .opts.sents .opt { min-height: 56px; font-size: 1.2rem; }

  /* side by side: a smaller pair, so five still fit across */
  .kc.pair .kp { font-size: 1.1rem; gap: .1em; }
  .pair-xl { gap: 1.2rem; }

  /* short texts: the answers down where the thumb is */
  .tx-play.q { display: flex; flex-direction: column; min-height: 100%; }
  .tx-play.q > .opts { margin-top: auto; margin-bottom: 10px; }
  .tx-card { font-size: 1.25rem; padding: 14px 16px; }

  /* games: the machine smaller, the shelves five across still */
  .gm-stage { width: min(190px, 52vw); }
  .gm-turn, .gm-turn-all { min-width: 0; width: 100%; }
  .gm-row { gap: 4px; padding: 0 2px 8px; }
  .gm-name { font-size: .82rem; }
  .gm-slot small { display: none; }
  .ga-name { font-size: 1.7rem; }

  /* the arcade: the ninja's field fills the screen; the deck sits low, by the thumb */
  .nj-play { min-height: calc(100dvh - 150px); }
  .nj-prompt { font-size: 1rem; }
  .dk-play { min-height: 100%; }
  .dk-deck { margin-top: auto; }
  .dk-btns { margin-bottom: 10px; }
}