/* Night Crawl: lantern-lit route map and turn-based Mute fights. Single dark look (night). */
:root {
  --night: #0b0912; --panel: #171320; --line: #342b45; --ink: #f2e8d5; --muted: #a99e8c;
  --lamp: #ffb347; --lamp-soft: rgba(255, 179, 71, .25); --blood: #e8584a; --jade: #79d39a; --gold: #ffcf6b;
  --display: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; --body: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--ink); font: 16px/1.45 var(--body); }
body { min-height: 100vh; background: linear-gradient(rgba(11, 9, 18, .78), rgba(11, 9, 18, .94)), var(--scene) center top / cover fixed, var(--night); }
button { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
button.primary { background: var(--lamp); color: #1b1206; border: none; font-weight: 700; }
button[disabled] { opacity: .45; cursor: default; }
input { font: inherit; width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0f0c17; color: var(--ink); }

#hud { position: sticky; top: 0; z-index: 5; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); background: rgba(11, 9, 18, .92); border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.hud-top { display: flex; align-items: center; gap: 10px; }
.hud-top strong { font-family: var(--display); font-size: 20px; }
#depth { color: var(--muted); font-size: 14px; white-space: nowrap; }
.hud-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mute { white-space: nowrap; }
#menu { margin-left: auto; padding: 4px 10px; font-size: 13px; }
#mute { padding: 4px 10px; font-size: 13px; }
.hud-bars { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.hp { position: relative; flex: 1; height: 18px; border-radius: 9px; background: #2a1518; overflow: hidden; }
.hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b8322a, var(--blood)); transition: width .4s; }
.hp span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 18px; font-weight: 700; }
#coins { color: var(--gold); }
#combo.hot { color: #ff9a5a; font-weight: 700; }
#charms { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
#charms span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--lamp-soft); color: var(--lamp); }

main { max-width: 560px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 14px; }
h1 { font-family: var(--display); font-size: 26px; margin: 0; text-wrap: balance; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); }
.muted { color: var(--muted); margin: 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Map: rows of lantern nodes descending toward the boss. */
.map { position: relative; display: grid; gap: 26px; padding: 8px 0 20px; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-row { position: relative; display: flex; justify-content: space-around; }
.node { position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: #14101c; border: 2px solid var(--line); }
.node img { width: 44px; height: 44px; object-fit: contain; }
.node .glyph { font-size: 26px; font-family: var(--display); color: var(--muted); }
.node small { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--muted); }
.node.visited { opacity: .45; }
.node.here { border-color: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-soft); }
.node.open { border-color: var(--lamp); box-shadow: 0 0 18px var(--lamp-soft); animation: beckon 1.6s ease-in-out infinite; }
.node.boss { width: 78px; height: 78px; border-color: var(--blood); }
@keyframes beckon { 50% { box-shadow: 0 0 4px var(--lamp-soft); transform: translateY(-2px); } }

/* Teaching and reading cards */
.card { background: rgba(23, 19, 32, .92); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 12px; }
.kana-big { font-family: var(--display); font-size: 88px; line-height: 1; text-align: center; margin: 4px 0; }
.word-big { font-family: var(--display); font-size: 46px; text-align: center; margin: 0; }
.reading { text-align: center; font-size: 20px; margin: 0; }
.result.good { color: var(--jade); } .result.bad { color: var(--blood); }
.result { margin: 0; min-height: 1.4em; }

/* Fight */
.arena { display: flex; justify-content: center; gap: 18px; min-height: 170px; align-items: end; }
.foe { position: relative; display: grid; justify-items: center; gap: 6px; width: 46%; max-width: 170px; }
.foe img { width: 100%; max-width: 130px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); animation: hover 2.6s ease-in-out infinite; }
.foe.boss img { max-width: 170px; }
.foe.dead { opacity: .15; filter: grayscale(1); }
.foe .bar { width: 100%; height: 8px; border-radius: 4px; background: #2a1518; overflow: hidden; }
.foe .bar i { display: block; height: 100%; background: var(--blood); transition: width .35s; }
.intent { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #2a1518; color: #ffb0a5; }
.intent.now { background: var(--blood); color: #fff; animation: pulse .7s ease-in-out infinite; }
.foe.hit img { animation: hit .4s; }
.dmg { position: absolute; top: 10%; left: 50%; font: 800 30px var(--body); color: var(--gold); text-shadow: 0 2px 6px #000; pointer-events: none; animation: rise 1s ease-out forwards; }
@keyframes hover { 50% { transform: translateY(-6px); } }
@keyframes hit { 25% { transform: translateX(-10px) rotate(-6deg); filter: brightness(2); } 60% { transform: translateX(8px); } }
@keyframes rise { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -60px); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
.call .choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.call .choices button { font-family: var(--display); font-size: 40px; padding: 14px; }
.seals { display: flex; gap: 6px; justify-content: center; }
.seals span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lamp); }
.seals span.ok { background: var(--lamp); } .seals span.fail { background: var(--blood); border-color: var(--blood); }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#flash.hurt { animation: hurt .5s; }
@keyframes hurt { 0% { background: rgba(232, 88, 74, .45); } 100% { background: transparent; } }
body.shake main { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.offers { display: grid; gap: 10px; }
.offer { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; text-align: left; }
.offer b { color: var(--lamp); }
.offer small { grid-column: 1; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.link { background: none; border: none; color: var(--lamp); text-decoration: underline; justify-self: start; padding: 0; }
.area-card { background: linear-gradient(90deg, rgba(23, 19, 32, .96) 55%, rgba(23, 19, 32, .4)), var(--thumb) right center / cover; min-height: 76px; }
.foe img.great { max-width: 200px; }

/* Attack choice, gimmicks, effects (CSS fallbacks until generated art arrives) */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tab { display: grid; gap: 2px; text-align: left; padding: 10px 12px; }
.tab small { color: var(--muted); font-size: 12px; }
.tab.on { border-color: var(--lamp); box-shadow: 0 0 0 2px var(--lamp-soft); }
.foe .weak { color: var(--gold); } .foe .gimmick { color: #ffb0a5; font-size: 11px; text-align: center; }
.foe.elite img { filter: drop-shadow(0 0 12px rgba(232, 88, 74, .7)); }
.foe.winding img { animation: windup .8s ease-in-out infinite; }
.foe.phase-2 img { filter: drop-shadow(0 0 16px #ff7a3a) saturate(1.3); }
.foe.phase-3 img { filter: drop-shadow(0 0 24px #ffcf6b) brightness(1.2); animation: windup .5s ease-in-out infinite; }
@keyframes windup { 50% { transform: translateY(-4px) scale(1.04) rotate(-3deg); } }
.choices.steamed button { filter: blur(6px); }
.choices.drifting button { animation: drift 2.8s ease-in-out infinite; animation-delay: calc(var(--n) * -.7s); }
@keyframes drift { 50% { transform: translateX(10px); } }
.fx-strike { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none; animation: strike .45s ease-out forwards; }
img.fx-strike { width: 160%; max-width: none; }
span.fx-strike { width: 140%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, transparent, #fff 40%, var(--lamp) 70%, transparent); rotate: -25deg; }
span.fx-slash { height: 18px; } span.fx-special { height: 26px; box-shadow: 0 0 24px var(--lamp); } span.fx-critical { height: 30px; background: linear-gradient(90deg, transparent, #fff, var(--gold), #fff, transparent); }
@keyframes strike { from { opacity: 0; scale: .4 1; } 30% { opacity: 1; } to { opacity: 0; scale: 1.2 1; } }
.dmg.crit { color: #fff; font-size: 40px; text-shadow: 0 0 12px var(--gold); }
.festival-burst { position: fixed; inset: 0; z-index: 30; pointer-events: none; animation: burst 1.4s ease-out forwards; }
div.festival-burst { background: radial-gradient(circle at 30% 30%, rgba(255, 207, 107, .8), transparent 30%), radial-gradient(circle at 70% 40%, rgba(232, 88, 74, .7), transparent 28%), radial-gradient(circle at 50% 70%, rgba(121, 211, 154, .6), transparent 30%); }
img.festival-burst { width: 100%; height: 100%; object-fit: cover; }
@keyframes burst { from { opacity: 0; transform: scale(.6); } 20% { opacity: 1; } to { opacity: 0; transform: scale(1.3); } }
.map-row.fogged { filter: blur(2px) brightness(.5); }
.event-art { width: 100%; border-radius: 12px; }
#charms span img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
#charms .set { border-color: var(--gold); color: var(--gold); }

.scene-art { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.context { margin: 0; font-style: italic; color: var(--ink); }
.context.small { font-size: 14px; color: var(--muted); text-align: center; }
.choices.words { display: grid; grid-template-columns: 1fr; gap: 8px; }
.choices.words button { font-size: 26px; }
.word-note { margin: 0; color: var(--muted); font-size: 14px; }

/* Generated art hooks */
.hud-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.hud-icon.flame { width: 22px; height: 22px; }
.hp.framed::after { content: ""; position: absolute; inset: -6px -10px; background: var(--hp-frame) center / 100% 100% no-repeat; pointer-events: none; }
.hp.framed { overflow: visible; }
.hp.framed i { border-radius: 9px; }
.map-row.fogged::after { content: ""; position: absolute; inset: -10px 0; background: var(--fog) center / cover; opacity: .55; pointer-events: none; }
.firefly { position: absolute; width: 14px; height: 14px; pointer-events: none; animation: fly 4s ease-in-out infinite; }
.firefly.f0 { margin: -20px 0 0 -30px; } .firefly.f1 { margin: 10px 0 0 40px; animation-delay: -1.3s; } .firefly.f2 { margin: 50px 0 0 -10px; animation-delay: -2.6s; }
@keyframes fly { 0%, 100% { transform: translate(0, 0); opacity: .3; } 50% { transform: translate(14px, -18px); opacity: 1; } }
.fx-overlay { position: absolute; left: 50%; top: 45%; width: 120%; max-width: none; transform: translate(-50%, -50%); pointer-events: none; animation: fxpop .9s ease-out forwards; z-index: 3; }
.fx-overlay.wave { top: 55%; width: 90%; }
.fx-overlay.shield, .fx-overlay.heal { width: 60%; }
@keyframes fxpop { from { opacity: 0; scale: .5; } 25% { opacity: 1; } to { opacity: 0; scale: 1.15; } }
.arena, .call, #view { position: relative; }
.charm-art { width: 28px; height: 28px; vertical-align: -8px; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .fx-overlay, .firefly { display: none; } }

.menu { display: grid; gap: 10px; }
.warn { margin: 0; color: var(--blood); }
button.danger { background: var(--blood); border: none; color: #fff; font-weight: 700; }

/* Hear (or watch) first, then the word */
.demo { position: relative; border-radius: 12px; overflow: hidden; }
.demo img, .demo video { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; background: #0f0c17; }
.demo.playing img, .card.playing .scene-art { animation: beat .5s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.04); filter: brightness(1.25); } }
.play-sound { font-size: 18px; padding: 14px; }
.temp-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.reveal { display: grid; gap: 8px; animation: reveal .5s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
.center { text-align: center; }

/* Lantern room action: a dark lantern that lights when its word is read */
.lantern-call { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px dashed var(--lamp-soft); border-radius: 12px; }
.lantern-call p { margin: 4px 0 0; }
.lantern-pair { position: relative; width: 64px; height: 64px; flex: none; }
.lantern-pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s; }
.lantern-pair .lantern-lit { opacity: 0; }
.lantern-pair.lit .lantern-lit { opacity: 1; filter: drop-shadow(0 0 18px var(--lamp)); animation: kindle 1.2s ease-out; }
.lantern-pair.lit .lantern-dark { opacity: 0; }
@keyframes kindle { 0% { transform: scale(.8); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Context notes */
.intro-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 179, 71, .1); border: 1px solid var(--lamp-soft); font-size: 14px; }
.seal-words { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.foe .weak { text-align: center; font-size: 11px; }
.seal-note { margin: 0; color: var(--lamp); font-size: 14px; }

/* Painted lantern that lights gradually while the reading is typed (--glow 0..1) */
.lantern-pair { width: 110px; height: 120px; }
.lantern-pair .lantern-lit { opacity: var(--glow); transition: opacity .25s, filter .25s; filter: drop-shadow(0 0 calc(var(--glow) * 22px) var(--lamp)); }
.lantern-pair .lantern-dark { opacity: calc(1 - var(--glow) * .7); transition: opacity .25s; }
.lantern-pair.flicker .lantern-dark { animation: sputter .4s ease-in-out 2; }
@keyframes sputter { 50% { transform: translateX(-3px) rotate(-3deg); filter: brightness(.7); } }

/* Reading step: the lantern is the focus. --glow 0..1 is set on .wake while typing. */
.card.wake { text-align: center; background: radial-gradient(circle at 50% 22%, rgba(255, 179, 71, calc(var(--glow) * .38)), rgba(23, 19, 32, .94) 62%); transition: background .3s; overflow: hidden; }
.lantern-stage { position: relative; width: 190px; height: 230px; margin: 4px auto 0; }
.lantern-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; }
.lantern-stage .lantern-dark { opacity: calc(1 - var(--glow)); filter: brightness(.55) saturate(.6); transition: opacity .3s; }
.lantern-stage .lantern-lit { opacity: var(--glow); filter: drop-shadow(0 0 calc(var(--glow) * 34px) var(--lamp)) brightness(calc(.8 + var(--glow) * .5)); transition: opacity .3s, filter .3s; }
.lantern-stage .halo { position: absolute; left: 50%; top: 48%; width: 340px; height: 340px; transform: translate(-50%, -50%) scale(calc(.4 + var(--glow) * .8)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 207, 107, .75), rgba(255, 140, 50, .25) 40%, transparent 70%); opacity: var(--glow); transition: transform .35s, opacity .35s; z-index: 1; }
.lantern-stage .rays { position: absolute; left: 50%; top: 48%; width: 420px; height: 420px; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255, 207, 107, .18) 0 6deg, transparent 6deg 24deg); border-radius: 50%; mask: radial-gradient(circle, #000 20%, transparent 65%); opacity: 0; z-index: 0; }
.wake.ready .rays, .wake.lit .rays { opacity: 1; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.lantern-stage .ember { position: absolute; left: calc(30% + var(--i, 0) * 8%); bottom: 30%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0; z-index: 3; }
.lantern-stage .ember:nth-of-type(1) { --i: 0; } .lantern-stage .ember:nth-of-type(2) { --i: 1; animation-delay: .3s !important; } .lantern-stage .ember:nth-of-type(3) { --i: 2; animation-delay: .6s !important; } .lantern-stage .ember:nth-of-type(4) { --i: 3; animation-delay: .9s !important; } .lantern-stage .ember:nth-of-type(5) { --i: 4; animation-delay: 1.2s !important; } .lantern-stage .ember:nth-of-type(6) { --i: 5; animation-delay: 1.5s !important; }
.wake.ready .ember, .wake.lit .ember { animation: ember 1.8s ease-out infinite; }
@keyframes ember { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px); } }
.wake.lit .lantern-stage { animation: kindle 1s ease-out; }
.wake.flicker .lantern-stage { animation: sputter .4s ease-in-out 2; }
.lantern-state { margin: 0; font-family: var(--display); font-size: 20px; color: color-mix(in srgb, var(--muted), var(--gold) calc(var(--glow) * 100%)); }
.wake.flicker .lantern-state { color: var(--blood); }
.word-row { display: flex; gap: 14px; align-items: center; text-align: left; }
.word-row .word-big { font-size: 40px; text-align: left; }
.word-row > div { min-width: 0; }
.sound-tile { position: relative; flex: none; width: 76px; height: 76px; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--lamp-soft); }
.sound-tile .tile-media img, .sound-tile .tile-media video { width: 76px; height: 76px; object-fit: cover; display: block; border-radius: 0; max-height: none; }
.sound-tile .tile-play { position: absolute; inset: auto 6px 6px auto; width: 26px; height: 26px; border-radius: 50%; background: var(--lamp); color: #1b1206; font-size: 12px; display: grid; place-items: center; }
.wake form { text-align: left; }
.wake.ready #f button { box-shadow: 0 0 20px var(--lamp); animation: pulse .9s ease-in-out infinite; }

/* Opening sequence */
#opening { position: fixed; inset: 0; z-index: 50; background: #000; color: var(--ink); }
body.opening { overflow: hidden; }
.op-scene { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); text-align: center; animation: opfade .9s ease-out; }
@keyframes opfade { from { opacity: 0; } }
.op-black { background: radial-gradient(circle at 50% 40%, #1a1424, #000 70%); }
.op-bg { background: linear-gradient(transparent 40%, rgba(0, 0, 0, .85)), var(--bg) center / cover; place-content: end center; }
.op-drain { animation: drain 2.4s ease-out; }
@keyframes drain { from { filter: saturate(1.4) brightness(1.3); } to { filter: none; } }
.op-mute { position: absolute; top: 12%; left: 50%; width: 46%; max-width: 260px; transform: translateX(-50%); animation: loom 2.4s ease-out; filter: drop-shadow(0 0 30px #000); }
@keyframes loom { from { opacity: 0; transform: translate(-50%, 30px) scale(.8); } }
.op-line { margin: 0; max-width: 30ch; font-family: var(--display); font-size: 24px; line-height: 1.4; text-shadow: 0 2px 12px #000; text-wrap: balance; }
.op-small { margin: 0; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; color: var(--lamp); }
.op-title-jp { margin: 0; white-space: nowrap; font-family: var(--display); font-size: clamp(32px, 11vw, 54px); letter-spacing: .15em; color: var(--lamp); text-shadow: 0 0 24px rgba(255, 179, 71, .5); animation: opfade 2.5s ease-out; }
.op-btn { min-width: 220px; padding: 14px 24px; border-radius: 999px; background: var(--lamp); color: #1b1206; border: none; font-weight: 700; font-size: 17px; }
.op-btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, .35); }
.op-skip { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); background: transparent; border: none; color: var(--muted); font-size: 14px; text-decoration: underline; }
.op-lantern { position: relative; width: 150px; height: 180px; }
.op-lantern img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 1s; }
.op-lantern .lit { opacity: 0; } .op-lantern.lit .lit { opacity: 1; filter: drop-shadow(0 0 30px var(--lamp)); }
.op-kana { display: flex; gap: 14px; }
.op-k { display: grid; gap: 2px; width: 92px; padding: 12px; font-family: var(--display); font-size: 46px; border-radius: 16px; }
.op-k small { font-family: var(--body); font-size: 13px; color: var(--muted); }
.op-k.on { border-color: var(--lamp); box-shadow: 0 0 18px var(--lamp-soft); }
.op-video { width: min(80vw, 320px); border-radius: 16px; }
.op-word { margin: 0; font-family: var(--display); font-size: 64px; color: var(--lamp); animation: opfade 1.5s ease-out; }
.op-h1 { margin: 0; font-family: var(--display); font-size: 40px; text-shadow: 0 2px 16px #000; }
@media (prefers-reduced-motion: reduce) { .op-scene, .op-mute, .op-title-jp, .op-word, .op-drain { animation: none; } }

.sound-shot{position:fixed;z-index:60;pointer-events:none;font-size:2rem;font-weight:700;color:#ffe9a8;text-shadow:0 0 12px #ffb340,0 0 28px #ff8a00;translate:-50% -50%}
.sound-shot.miss{color:#9a92b8;text-shadow:0 0 10px #3b2f66}
.dmg.swallow{color:#b9b0d8;font-size:.9rem}
.seals span.break{animation:seal-break .6s ease-out}
@keyframes seal-break{0%{transform:scale(1)}40%{transform:scale(1.8);box-shadow:0 0 18px #ffd27a}100%{transform:scale(1)}}

.op-lantern .lit{opacity:var(--glow);filter:drop-shadow(0 0 calc(var(--glow)*30px) var(--lamp));transition:opacity .25s,filter .25s}
.op-lantern img:not(.lit){opacity:calc(1 - var(--glow)*.7)}
.op-lantern.lit .lit{opacity:1;filter:drop-shadow(0 0 40px var(--lamp))}
.op-lantern.flicker{animation:shake .3s}
.op-type{display:flex;gap:8px;justify-content:center;width:100%;max-width:340px;padding:0 16px;box-sizing:border-box}.op-type .op-btn{flex:0 0 auto;width:auto;padding:10px 16px}
.op-type input{font-size:18px;padding:10px 12px;border-radius:10px;border:2px solid var(--lamp);background:#0d0a14;color:#fff;flex:1;min-width:0}
.foe.falling img{animation:mute-fall 1.2s ease-in forwards}
@keyframes mute-fall{40%{transform:scale(1.1);filter:brightness(2)}100%{transform:scale(.4) translateY(30px);opacity:0;filter:brightness(3) blur(4px)}}
.foe .dmg.swallow{top:55%}
.card.victory{text-align:center;overflow:hidden}
.victory-scene{width:calc(100% + 32px);margin:-16px -16px 12px;max-height:180px;object-fit:cover;animation:light-up 1.6s ease-out}
@keyframes light-up{from{filter:brightness(.25) saturate(0)}to{filter:none}}
.loot{display:flex;align-items:center;justify-content:center;gap:8px}
.loot .charm-art{width:44px;height:44px}
.coin-pop{color:var(--gold);font-size:22px;animation:pulse .6s ease-out 2}
.card.shrine{text-align:center}.shrine-art{width:96px;filter:drop-shadow(0 0 16px var(--lamp))}
.heal-note{color:#bff5c7;animation:fade-in .6s ease-out}@keyframes fade-in{from{opacity:0}}
.node.visited.lit{opacity:.85;border-color:var(--lamp);box-shadow:0 0 12px var(--lamp-soft)}
.map-row.fogged{filter:brightness(.5)}
.map-row.fogged::after{-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);inset:-30px 0}
.op-type .op-btn{flex:0 0 110px!important;width:110px!important;min-width:0!important;margin:0}
.op-type input{flex:1 1 auto!important;width:auto!important}
/* Opening lantern: brighter halo, size and warmth as the reading is typed */
.op-lantern{transform:scale(calc(1 + var(--glow,0)*.25));transition:transform .3s}
.op-lantern::before{content:"";position:absolute;inset:-90px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,90,calc(var(--glow,0)*.75)) 0%,rgba(255,140,40,calc(var(--glow,0)*.35)) 35%,transparent 70%);transition:background .3s;pointer-events:none}
.op-lantern .lit{filter:drop-shadow(0 0 calc(var(--glow)*45px) #ffb347) brightness(calc(1 + var(--glow)*.6))}
.op-lantern.lit{animation:op-blaze 1.2s ease-out}
.op-lantern.lit::before{inset:-160px;background:radial-gradient(circle,rgba(255,210,120,.9),rgba(255,140,40,.4) 40%,transparent 70%)}
@keyframes op-blaze{0%{transform:scale(1.25)}35%{transform:scale(1.45);filter:brightness(1.8)}100%{transform:scale(1.3)}}

.start-choice{text-align:center;overflow:hidden}
.choice{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:12px;padding:14px;text-align:left}
.choice b{font-size:17px}.choice small{font-weight:400;opacity:.85;line-height:1.35}
/* Start choice and test-out pages */
.start-choice{padding-top:0;border:1px solid rgba(255,179,71,.35);box-shadow:0 0 40px rgba(255,150,50,.12)}
.start-choice .victory-scene{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);max-height:220px;margin-bottom:-30px}
.start-choice h1{font-family:var(--display);font-size:clamp(24px,7vw,32px);text-shadow:0 0 18px rgba(255,179,71,.35)}
.choice{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;border-radius:16px;transition:transform .15s,box-shadow .2s}
.choice b,.choice small{grid-column:2}
.choice-icon{grid-row:1/3;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,179,71,.6))}
.choice.primary{box-shadow:0 0 22px rgba(255,179,71,.45);animation:beckon 2s ease-in-out infinite}
.choice.test{background:linear-gradient(135deg,#1f1430,#140f1e);border:1px solid rgba(200,90,90,.6)}
.choice.test b{color:#ffb0a5}
.choice:hover{transform:translateY(-2px)}
.choice-or{margin:10px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.test-card{border:1px solid rgba(200,90,90,.5)}
.test-card .kana-big,.test-card .word-big{text-shadow:0 0 calc(var(--glow)*30px + 6px) #ffb347;margin:18px 0}
.test-progress{height:8px;border-radius:99px;background:#241a30;overflow:hidden;margin:8px 0 4px}
.test-progress i{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,#ffd27a);box-shadow:0 0 10px #ffb347;transition:width .3s}
.test-arena{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:8px;margin:8px 0}
.test-arena .arena{min-height:0}.test-arena .foe img{max-height:150px}
.test-lantern{width:100%;height:170px;position:relative}
.test-lantern img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.test-lantern.ready .lantern-lit{opacity:1;filter:drop-shadow(0 0 30px #ffb347) brightness(1.4)}
.side-wrap{text-align:center}.side-wrap #lantern-state{margin:4px 0 0;color:var(--muted)}
.side-lantern{height:160px}
.side-lantern.blaze{animation:op-blaze .6s ease-out}
.card + .test-arena,.test-arena:has(.side-lantern){grid-template-columns:3fr 2fr}
.side-wrap #lantern-state{font-size:12px}
.test-arena .foe img{height:170px;max-height:none;width:auto;max-width:100%;object-fit:contain;aspect-ratio:auto}
.test-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.choice-word{font-size:22px;padding:14px 6px}
.skip-more{display:grid;gap:8px}.small-choice{grid-template-columns:1fr;padding:10px 14px}.small-choice b{font-size:15px;grid-column:1}.small-choice small{grid-column:1}
.test-timer{height:5px;border-radius:99px;background:#2a1518;overflow:hidden;margin:6px 0}
.test-timer i{display:block;height:100%;background:linear-gradient(90deg,#ff5a4a,#ffb347);transform-origin:left;animation:test-time linear forwards}
@keyframes test-time{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.skip-card{margin-top:10px;text-align:left;background:linear-gradient(135deg,#1f1430,#140f1e);border:1px solid rgba(200,90,90,.5)}
.skip-q{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:#ffb0a5;margin:0}
.skip-card .small-choice{background:#120d1a}
[hidden]{display:none!important}
/* Journey: compact strip */
.jstrip{display:flex;align-items:center;gap:0;margin:2px 0 4px;flex-wrap:nowrap}
.jdot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:#1a1424;border:2px solid #3a2f4a;color:#1a1020;position:relative}
.jdot.done{background:var(--lamp);border-color:var(--lamp);box-shadow:0 0 10px var(--lamp-soft)}
.jdot.open{border-color:var(--lamp)}
.jdot.here{width:26px;height:26px;border-color:#fff;background:conic-gradient(var(--lamp) var(--p,0%),#2a2036 0);box-shadow:0 0 0 4px rgba(255,179,71,.25),0 0 16px var(--lamp);animation:beckon 1.6s ease-in-out infinite}
.jdot.here i{position:absolute;inset:4px;border-radius:50%;background:#140f1e}
.jdot.lv2{color:var(--muted);font-size:10px}
.jlink{flex:1 1 auto;height:2px;min-width:6px;background:linear-gradient(90deg,#3a2f4a,#4a3d5c)}
.jdot.done + .jlink{background:var(--lamp)}
.jsplit{flex:0 0 auto;font-size:11px;color:var(--muted);margin:0 4px}
.jopen{flex:0 0 auto;margin-left:10px;font-size:13px;padding:0}
.jwhere{margin:0 0 10px;font-size:12px;color:var(--muted)}.jwhere b{color:var(--lamp)}
/* Journey: full trail */
.journey{position:relative;display:flex;flex-direction:column;gap:14px;padding:6px 0 10px}
.journey::before{content:"";position:absolute;left:50%;top:30px;bottom:40px;width:3px;transform:translateX(-50%);background:repeating-linear-gradient(#5a4a70 0 8px,transparent 8px 14px)}
.jhead{position:relative;z-index:1;align-self:center;margin:6px 0 0;padding:3px 12px;border-radius:99px;background:#140f1e;border:1px solid var(--line);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lamp)}
.jstop{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:88%;padding:10px;border-radius:18px;background:#171220;border:1px solid var(--line);text-align:left}
.jstop.left{align-self:flex-start}.jstop.right{align-self:flex-end;flex-direction:row-reverse;text-align:right}
.jimg{position:relative;flex:0 0 76px;height:76px;border-radius:50%;background:var(--thumb,#1a1424) center/cover;border:3px solid #3a2f4a;display:grid;place-items:center;font:700 26px var(--display);color:var(--muted)}
.jtext{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.jtext b{font-size:16px}.jtext small{color:var(--muted)}.jtext em{font-style:normal;font-size:12px;color:var(--muted)}
.jstop.done .jimg{border-color:var(--lamp);box-shadow:0 0 18px var(--lamp-soft)}
.jstop.done em{color:#bff5c7}
.jstop.locked{opacity:.45}.jstop.locked .jimg{filter:grayscale(1) brightness(.5)}
.jstop.here{border-color:var(--lamp);box-shadow:0 0 0 3px rgba(255,179,71,.2),0 0 28px rgba(255,150,50,.25);background:linear-gradient(135deg,#2a1d12,#171220)}
.jstop.here .jimg{border-color:#fff;animation:beckon 1.8s ease-in-out infinite}
.jstop.here em{color:var(--lamp);font-weight:700}
.jhere{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 10px var(--body);padding:2px 8px;border-radius:99px;background:var(--lamp);color:#1a1020;box-shadow:0 0 10px var(--lamp)}
.jmoon{position:absolute;top:-6px;right:-6px;font-size:18px;color:#cfe3ff;text-shadow:0 0 8px #8fb8ff}
.jbar{display:block;height:6px;border-radius:99px;background:#2a2036;overflow:hidden;margin-top:4px}
.jbar i{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,#ffd27a)}
.jstop.right .jbar i{margin-left:auto}
.jstop.locked{opacity:1}.jstop.locked>*{opacity:.45}
#view>.jstrip:first-child{margin-top:26px}
.jgate{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px}
.jgate .jhead{margin:0}
.jskip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;font-size:13px;font-weight:700;color:#ffd0c8;background:linear-gradient(135deg,#3a1520,#1f1430);border:1px solid rgba(255,120,110,.6);box-shadow:0 0 14px rgba(255,90,80,.25)}
.jskip span{color:#ff8a7a}
.jskip:hover{transform:translateY(-1px);box-shadow:0 0 20px rgba(255,90,80,.45)}
.start-choice .journey{margin-top:4px}.jnote{text-align:center;margin:4px 0 0}
/* Final (whole-level) test: its own gold banner; part tests: small red pills on section headers */
.jfinal{margin:12px 0 6px;padding:14px;border-radius:18px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(255,200,90,.22),transparent 70%),#1a1424;border:2px solid var(--lamp);box-shadow:0 0 26px rgba(255,179,71,.25)}
.jfinal p{margin:4px 0}.jfinal b{color:#ffe2a8}
.jskip.final{margin-top:8px;color:#1a1020;background:linear-gradient(135deg,#ffd27a,#ff9f40);border:0;box-shadow:0 0 18px rgba(255,179,71,.6);font-size:14px;padding:10px 16px}
.jskip.part{font-size:12px;padding:6px 12px;font-weight:600}
.jstop.play{flex-direction:column;align-items:stretch;width:100%;align-self:stretch}
.jrow{display:flex;align-items:center;gap:12px}
.jplay{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-top:10px}
.jplay button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:12px;text-align:left}
.jplay small{font-weight:400;font-size:12px;opacity:.85}
.jplay #start-night:only-child{grid-column:1/-1}
.hardbtn{background:linear-gradient(135deg,#21182e,#120d1a);border:1px solid #6a5a90;color:#cfd8ff}
.start-choice{padding-top:8px}
body.calm .hud-bars,body.calm #charms{display:none}
.jfinal{padding:12px}.jfinal .jskip.final{margin:6px 0 2px}
.start-choice{border:0;box-shadow:none;background:none}
.test-demo{margin:8px auto;max-width:260px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.test-demo .act{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.arena{position:relative}
.act-pop{position:absolute;left:50%;top:35%;transform:translateX(-50%);width:150px;z-index:6;border-radius:14px;overflow:hidden;border:2px solid var(--lamp);box-shadow:0 0 22px var(--lamp-soft);background:#120d1a;animation:act-in .25s ease-out,act-out .4s ease-in 2.2s forwards;pointer-events:none}
.act-pop .act{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.act-pop span{display:block;text-align:center;font-size:18px;padding:2px 0;color:#ffe2a8}
@keyframes act-in{from{opacity:0;transform:translateX(-50%) scale(.7)}}
@keyframes act-out{to{opacity:0}}
/* Teach screen: kana grouped under their word */
.teach-card h1{font-size:22px;margin-bottom:6px}
.kgroup{margin:12px 0}.kword{margin:0 0 6px}.kword b{font-size:22px;color:#ffe2a8}
.ktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.ktile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px;padding:6px 0;border-radius:14px;font:600 34px/1.1 var(--display);background:#140f1e;border:1px solid var(--line);transition:background .2s,box-shadow .2s}
.ktile small{font:500 13px var(--body);color:var(--muted)}
.ktile.on{background:linear-gradient(180deg,#3a2a12,#1f160c);border-color:var(--lamp);box-shadow:0 0 14px var(--lamp-soft)}
.ktile.on small{color:var(--lamp)}
.krule{margin:12px 0;padding:10px 12px;border-radius:14px;background:#140f1e;border:1px solid var(--line)}
.krule .kmark{font:600 30px var(--display);margin:0;color:#ffe2a8}.krule p{margin:4px 0}
.teach-go{width:100%;margin-top:12px;min-height:48px}
.kpairs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.kpair{min-height:48px;padding:6px 12px;border-radius:12px;font:600 24px var(--display);background:#1f1630;border:1px solid var(--line)}
.kpair b{color:#ffe2a8}
.kpair.on{border-color:var(--lamp);box-shadow:0 0 10px var(--lamp-soft)}
/* Phone: 44px minimum touch targets for small controls */
#hud button,.link,.jopen,.jskip,.op-skip,#view .row>button,form .primary{min-height:44px}
.link,.jopen{display:inline-flex;align-items:center}
/* Phone keyboard open (short viewport): shrink the arena so the prompt and answer fit together */
@media (max-height:560px){
  .foe img{max-width:84px}.test-arena .foe img{height:110px}.side-lantern,.test-lantern{height:110px}
  .intro-note,.foe .gimmick,.foe .weak{display:none}
  .kana-big{font-size:56px;margin:4px 0}.word-big{font-size:36px;margin:4px 0}
  #hud{padding-top:4px;padding-bottom:4px}#charms{display:none}
}
/* Opening lantern scene while typing on a phone: fill the space above the keyboard */
#opening.typing{bottom:auto}
#opening.typing .op-scene{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:6px;padding-top:10px;padding-bottom:10px}
#opening.typing .op-lantern{flex:1 1 0;width:min(150px,60vw);height:auto;min-height:110px;max-height:210px;transform:none}
#opening.typing .op-lantern::before{inset:-50px}
#opening.typing .op-kana,#opening.typing .op-skip{display:none}
#opening.typing .op-line{font-size:17px;margin:0}
#opening.typing .op-word{font-size:44px!important}
#opening.typing .op-line{font-size:0!important}#opening.typing .op-hint{font-size:18px;color:var(--muted)}
#opening.typing .op-hint{white-space:nowrap;display:inline-block}#opening.typing .op-lantern{max-height:170px;min-height:90px}
#opening.typing .op-hint{display:block;text-align:center}#opening.typing .op-line{width:100%}
.op-hint{display:none}
#opening.typing .op-line{display:none}
#opening.typing .op-hint{display:block;margin:0;font-size:18px;color:var(--muted)}
/* Phone fight layout: the whole turn fits one screen (no scrolling between the Mute and the answer) */
#hud{padding-top:6px;padding-bottom:6px}
.hud-top{margin-bottom:4px}
body.in-fight #view>.eyebrow{margin:2px 0}
body.in-fight .intro-note{font-size:13px;padding:6px 10px;margin:4px 0}
body.in-fight .arena{gap:6px;margin:2px 0}
body.in-fight .foe{position:relative}
body.in-fight .foe img{max-width:none;width:auto;height:clamp(84px,19vh,150px)}
body.in-fight .foe .intent{font-size:11px}
body.in-fight .foe small{font-size:12px;line-height:1.3}
body.in-fight .foe .weak,body.in-fight .foe .gimmick{font-size:11px;max-width:260px}
body.in-fight .foe .bar{margin:2px auto}
body.in-fight .card.call{padding:10px 12px;margin-top:6px}
body.in-fight .call .muted{margin:4px 0;font-size:14px}
body.in-fight .tabs{gap:6px;margin-bottom:4px}
body.in-fight .tab{padding:6px 10px;min-height:44px}
body.in-fight .tab b{font-size:15px}body.in-fight .tab small{font-size:11px}
body.in-fight .kana-big{font-size:58px;margin:2px 0}body.in-fight .word-big{font-size:38px;margin:2px 0}
body.in-fight .context{font-size:13px;margin:2px 0}
body.in-fight .choices button{min-height:56px;font-size:30px;padding:4px}
body.in-fight .result{margin:0 0 4px}
/* Phone fight: Mute picture left, its status right (one compact row per Mute) */
body.in-fight .arena .foe{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr;column-gap:12px;align-items:center;text-align:left;justify-items:start}
body.in-fight .arena .foe img{grid-column:1;grid-row:1/span 5;height:clamp(84px,16vh,130px)}
body.in-fight .arena .foe>:not(img){grid-column:2}
body.in-fight .arena .foe .bar{width:100%;margin:0}
body.in-fight .arena .foe .weak,body.in-fight .arena .foe .gimmick{text-align:left}
body.in-fight .call #hear{min-height:44px;padding:6px 12px;width:auto}
body.in-fight .arena{justify-content:center}body.in-fight .arena .foe{width:100%;max-width:340px;justify-self:center;grid-template-columns:auto minmax(0,1fr)}body.in-fight .arena .foe .intent{white-space:nowrap}body.in-fight .test-arena .arena .foe{max-width:none}
body.in-fight .arena{min-height:0;padding:0}body.in-fight .arena .foe img{height:clamp(90px,19vh,150px)}body.in-fight #f.row{flex-wrap:nowrap}body.in-fight #f.row input{flex:1;min-width:0}body.in-fight #f.row .primary{flex:0 0 auto}
body.in-fight .side-lantern{height:clamp(80px,15vh,120px)}body.in-fight .side-wrap #lantern-state{font-size:11px;margin:0}body.in-fight .seals{margin:2px 0}body.in-fight .test-arena{margin:2px 0;grid-template-columns:3fr 1.3fr}
body.in-fight .test-arena{overflow:hidden}
/* Effects on a Mute centre on its picture */
body.in-fight .foe .fx-strike,body.in-fight .foe .fx-overlay,body.in-fight .foe .dmg{left:var(--cx,50%);top:var(--cy,45%)}
body.in-fight .foe .dmg{top:calc(var(--cy,45%) - 30px)}
body.in-fight .foe img.fx-strike{width:calc(var(--iw,120px) * 1.6)}
body.in-fight .foe .fx-overlay{width:calc(var(--iw,120px) * 1.3)}
/* Typing in a fight on a phone: only Mute, prompt and answer */
body.in-fight.typing #charms,body.in-fight.typing #view>.eyebrow,body.in-fight.typing .intro-note,body.in-fight.typing .tabs,body.in-fight.typing .call .context,body.in-fight.typing .call>.muted,body.in-fight.typing .call .seal-note,body.in-fight.typing .foe .weak,body.in-fight.typing .foe .gimmick,body.in-fight.typing .call .result+p{display:none}
body.in-fight.typing .arena .foe img{height:72px}
body.in-fight.typing .side-lantern{height:72px}
body.in-fight.typing .card.call{margin-top:4px;padding:8px 12px}
body.in-fight.typing .call .word-big{font-size:34px}body.in-fight.typing .call .kana-big{font-size:48px}
body.in-fight .act-pop{left:auto;right:4px;top:0;transform:none;width:118px;animation:act-in2 .25s ease-out,act-out .4s ease-in 2.2s forwards}@keyframes act-in2{from{opacity:0;transform:scale(.7)}}body.in-fight .act-pop span{font-size:15px}
body.in-fight.typing .arena .foe img{height:108px}.choices.reads button{font-size:22px!important;font-family:var(--body)}
body.in-fight .call .result~.context{display:none}body.in-fight .call .result{font-size:15px}
/* Phone audit fixes */
#view button{min-height:44px}
.test-card .test-arena .foe img{height:clamp(80px,14vh,120px)!important}
.test-card .test-lantern{height:clamp(80px,14vh,120px)}
.test-card .test-demo{max-width:min(200px,50vw)}
.test-card .muted.small{margin:4px 0}
.test-card .choices button{min-height:52px}
.card.wake .lantern-pair{height:clamp(130px,26vh,220px)}
.card.wake .lantern-pair img{max-height:100%}
.test-card .lantern-stage{height:clamp(80px,14vh,120px)!important;width:100%!important;margin:0}
.test-card #skip-f.row{flex-wrap:nowrap}.test-card #skip-f input{flex:1;min-width:0}.test-card #skip-f .primary{flex:0 0 auto}
.test-card .kana-big,.test-card .word-big{margin:6px 0}
.test-card #lantern-state{margin:2px 0}
.test-card .test-demo{max-width:min(150px,40vw);margin:4px auto}
.test-card .seal-note{display:none}
.test-card #skip-hear{min-height:44px;padding:4px 14px;width:auto;margin:0 auto;display:block}
.test-card .test-choices{margin-top:6px}
.test-card.q-listen .test-arena{grid-template-columns:auto 1fr;align-items:center}
.test-card.q-listen .test-lantern{display:none}
.test-card.q-listen .test-arena{display:flex;justify-content:center;gap:12px}
.test-card.q-listen .test-demo{margin:0}
.test-card.q-listen .test-arena .arena{flex:0 0 auto}.test-card.q-listen .test-arena .foe img{height:120px!important;width:auto;max-width:none}
/* Dark path */
.node.dark{border-color:#9a5cff;background:radial-gradient(circle,#2a1640,#120a1c);box-shadow:0 0 14px rgba(154,92,255,.45)}
.node.dark.open{border-color:#c79bff;box-shadow:0 0 22px rgba(190,110,255,.7)}
.node.dark small{color:#c9a8ff}
.node .moon{position:absolute;top:-6px;right:-6px;font-style:normal;font-size:16px;color:#d9c2ff;text-shadow:0 0 8px #9a5cff}
.dark-key{color:#c9a8ff}
.foe.dark img{filter:drop-shadow(0 0 12px rgba(154,92,255,.8)) hue-rotate(-20deg) saturate(.8)}
/* Typing in the lantern room on a phone: lantern, word and answer above the keyboard */
body.typing #view>.eyebrow,body.typing .card.wake .context,body.typing .card.wake form>label,body.typing #charms{display:none}
body.typing .card.wake{padding-top:8px;padding-bottom:8px}
body.typing .card.wake .lantern-pair{height:clamp(80px,13vh,120px)!important;margin:0 auto}
body.typing .card.wake .lantern-state{margin:2px 0;font-size:15px}
body.typing .card.wake .word-row{margin:4px 0}
body.typing .card.wake .sound-tile{width:56px;height:56px}
body.typing .card.wake .word-big{font-size:34px;margin:0}
body.typing .card.wake #f.row{flex-wrap:nowrap}body.typing .card.wake #f input{flex:1;min-width:0}body.typing .card.wake #f .primary{flex:0 0 auto;padding:8px 12px}
.lantern-stage .rays,.lantern-stage .halo,.lantern-stage .ember,.op-lantern::before{pointer-events:none}
.sound-credits{display:none}
body.menu-open .sound-credits{display:block;margin:0 16px 24px;padding:10px 14px;border-radius:12px;background:#14101c;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.sound-credits summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.sound-credits a{color:var(--lamp)}
.loot-charm{display:flex;align-items:center;gap:10px;text-align:left;margin:8px 0}
.loot-charm p{margin:0;flex:1}.loot-charm .charm-art{width:44px;height:44px;flex:none}
/* Village, review, settings */
.village h2{font-size:16px;margin:14px 0 6px;color:var(--lamp)}
.vstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0;text-align:center}
.vstats span{padding:8px 4px;border-radius:12px;background:#140f1e;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.vstats b{display:block;font-size:20px;color:var(--ink)}
.chips{list-style:none;padding:0;margin:6px 0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{padding:6px 10px;border-radius:12px;background:#140f1e;border:1px solid var(--line);font-size:14px}
.chips li b{font-size:18px;margin-right:4px}.chips li small{color:var(--muted)}
.village button{width:100%;margin-top:8px}
.village details{margin-top:12px}.village summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--lamp)}
.history{padding-left:20px;margin:4px 0;font-size:13px;color:var(--muted)}.history li{margin:4px 0}
.card.review{text-align:center}.card.review .row{justify-content:center}.card.review .row button{flex:1}
.review-offer{width:100%;margin:6px 0 10px;border:1px dashed var(--lamp);background:#1f160c;color:#ffe2a8}
.settings{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:10px;text-align:left}
.settings label{display:flex;align-items:center;gap:10px;min-height:44px}.settings input[type=range]{flex:1}
.settings .toggle input{width:22px;height:22px}
body.large #view{font-size:112%}body.large .kana-big{font-size:96px}body.large .word-big{font-size:54px}body.large .choices button{font-size:1.15em}
.choices.reads{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choices.reads button{min-height:52px;width:100%}
/* Boss stage on phones: big Mute and lantern side by side, status as a slim strip above */
body.in-fight .test-arena{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:4px;margin:0}
body.in-fight .test-arena .arena .foe{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:none;gap:2px}
body.in-fight .test-arena .arena .foe img{order:3;height:clamp(130px,26vh,220px)!important;width:auto;max-width:100%}
body.in-fight .test-arena .arena .foe .intent{order:0}
body.in-fight .test-arena .arena .foe .bar{order:1;width:90%}
body.in-fight .test-arena .arena .foe small{order:2}
body.in-fight .test-arena .arena .foe .weak,body.in-fight .test-arena .arena .foe .gimmick{order:4;text-align:center;font-size:11px}
body.in-fight .side-lantern{height:clamp(120px,24vh,200px)!important}
/* While typing: keep the stage, drop the extra text */
body.in-fight.typing .call .result,body.in-fight.typing .seals,body.in-fight.typing .side-wrap #lantern-state,body.in-fight.typing .test-arena .foe .weak{display:none}
body.in-fight.typing .test-arena .arena .foe img{height:clamp(90px,20vh,150px)!important}
body.in-fight.typing .side-lantern{height:clamp(90px,20vh,150px)!important}
body.in-fight.typing .call .word-big{margin:0}
body.in-fight:not(.typing) .test-arena .arena .foe img{height:clamp(150px,32vh,280px)!important}
body.in-fight:not(.typing) .side-lantern{height:clamp(150px,32vh,280px)!important}
body.in-fight:not(.typing) .test-arena{min-height:34vh}
body.in-fight:not(.typing) .test-arena .arena .foe img,body.in-fight:not(.typing) .side-lantern{height:clamp(140px,27vh,260px)!important}
body.in-fight:not(.typing) .test-arena{min-height:0}
body.in-fight .call .seal-note{font-size:13px;margin:2px 0}
body.in-fight.typing .test-arena .arena .foe img,body.in-fight.typing .side-lantern{height:clamp(100px,24vh,170px)!important}
/* Level 2 */
body.level2 #hud{display:none}
.l2-hud{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 0;margin:0 0 8px;background:rgba(11,9,18,.92);font-size:13px;color:var(--muted)}
.l2-hud b{color:var(--lamp);font-size:14px}.l2-hud .link{margin-left:auto;min-height:44px}
.l2-hp{position:relative;flex:1 1 120px;height:16px;border-radius:8px;background:#2a1518;overflow:hidden}
.l2-hp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#b8322a,var(--blood))}.l2-hp em{position:relative;display:block;text-align:center;font:700 11px/16px var(--body);color:#fff}
.l2-route{display:flex;flex-direction:column;align-items:center;gap:22px;margin:16px 0 40px}
.l2-row{display:flex;gap:40px;justify-content:center}
.l2-voice{text-align:center}
.l2-person{font-size:72px;line-height:1;margin:8px 0;filter:drop-shadow(0 0 16px var(--lamp-soft))}.l2-person.silent{filter:grayscale(1) brightness(.7)}
.wtiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.wtile{display:flex;flex-direction:column;align-items:center;min-height:52px;min-width:52px;padding:6px 12px;border-radius:12px;font:600 24px var(--display);background:#140f1e;border:1px solid var(--line)}
.wtile small{font:400 11px var(--body);color:var(--muted);max-width:110px}
.l2-built{min-height:56px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;padding:8px;border-radius:12px;border:1px dashed var(--lamp);margin:8px 0}
.l2-built span{font:600 24px var(--display);color:#ffe2a8}
.choices.reads.big button{font:600 32px var(--display)}
/* Level 2 fights on phones */
body.level2.in-fight .l2-hud{padding:4px 0;margin-bottom:4px}
body.level2.in-fight .call #l2-hear{min-height:36px;margin:0 auto;display:block}
body.level2.in-fight .call .word-big{font-size:28px;margin:2px 0}
body.level2.in-fight .call .kana-big{font-size:64px;margin:2px 0}
body.level2.in-fight .call .choices.reads{gap:6px}
body.level2.in-fight .call .choices.reads button{min-height:48px;font-size:17px;padding:4px 6px}
body.level2.in-fight .call .choices.reads.big button{font-size:30px}
body.level2.in-fight .wtiles{margin:4px 0}body.level2.in-fight .l2-built{min-height:48px;margin:4px 0}
body.level2 .card.wake .lantern-stage{height:clamp(110px,20vh,170px)}
.l2-hud{flex-wrap:nowrap}.l2-hud b{white-space:nowrap}.l2-hud>span:not(.l2-hp){white-space:nowrap}
.l2-built .muted{font:400 14px var(--body);color:var(--muted)}
.choices.reads.say{grid-template-columns:1fr}.choices.reads.say button{font:600 19px var(--display)!important;min-height:46px}
.l2-listen{display:block;margin:6px auto;min-height:48px}
.choices.reads.say{grid-template-columns:1fr}.choices.reads.say button{font:600 19px var(--display)!important;min-height:46px}
.l2-listen{display:block;margin:6px auto;min-height:48px}
.scene-q{font-size:17px;font-style:italic;margin:6px 0;color:#ffe2a8}.choices.reads.jp button{font-family:var(--display)!important;font-size:24px!important}
/* Village hero */
.v-hero{position:relative;margin:-16px -16px 10px;padding:16px 16px 22px;min-height:150px;display:flex;align-items:flex-end;gap:12px;background:linear-gradient(180deg,rgba(11,9,18,.15),rgba(11,9,18,.92)),var(--bg) center/cover;border-radius:16px 16px 0 0}
.v-hero h1{margin:2px 0}.v-why{margin:0;color:#ffd0c8}
.v-foe{width:84px;height:auto;flex:none;filter:drop-shadow(0 4px 10px #000) grayscale(.2)}
.v-track{position:absolute;left:16px;right:16px;bottom:8px;height:5px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.v-track i{display:block;height:100%;background:linear-gradient(90deg,var(--lamp),#ff6a4a)}
.village>button{width:100%;margin-top:8px}
/* Active review */
.card.review .rv-media{width:min(150px,40vw);margin:6px auto;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.card.review .rv-media .act{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.card.review .reading.good b{color:#9be7a9}.card.review .reading.bad b{color:#ffb0a5}
.card.review #review-next{width:100%;min-height:52px;margin-top:6px}
.card.review .choices.reads{margin-top:8px}
.l2-line{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;background:#171220;border:1px solid var(--line);min-height:44px}
.l2-line b{flex:1;font-size:15px}.l2-line span{font-size:13px;color:var(--muted)}.l2-line.done{border-color:rgba(255,179,71,.5)}.l2-line.done span{color:#9be7a9}.l2-line.locked{opacity:.55}
.l2-line .link{min-height:44px;padding:0 4px}
/* Lantern style (Festival book) */
.lantern-pair,.op-lantern,.test-lantern{filter:var(--lantern-filter,none)}
/* Daily, book, story, toast */
.daily-offer{width:100%;margin:6px 0 10px;border:1px solid #ff8a3d;background:linear-gradient(135deg,#3a1d0c,#1f160c);color:#ffd9b0;font-weight:700;min-height:48px}
.book-tabs{margin:8px 0}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.bcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;border-radius:12px;background:#140f1e;border:1px solid rgba(255,179,71,.45);min-height:120px}
.bcard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.bcard .bq{font-size:34px;line-height:2}
.bcard b{font:600 16px var(--display)}.bcard small{font-size:10px;color:var(--muted);text-align:center}
.bcard.locked{border-color:var(--line);opacity:.55}.bcard.style img{object-fit:contain;height:70px}.bcard.on{box-shadow:0 0 0 2px var(--lamp)}
.badges{list-style:none;padding:0;display:grid;gap:6px}.badges li{display:grid;grid-template-columns:28px 1fr;column-gap:8px;padding:8px 10px;border-radius:12px;background:#140f1e;border:1px solid var(--line);opacity:.6}
.badges li.on{opacity:1;border-color:rgba(255,179,71,.6)}.badges span{grid-row:1/3;font-size:22px}.badges small{color:var(--muted)}
.story{position:relative;min-height:calc(100vh - 120px);margin:-8px -16px;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(11,9,18,0) 30%,rgba(11,9,18,.95) 75%),var(--bg) center/cover;animation:light-up 1.8s ease-out}
.story-text{padding:20px 20px 32px;text-align:center;width:100%}.story-text h1{font-size:28px;text-shadow:0 0 18px var(--lamp)}.story-text button{width:100%;min-height:52px}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:80;padding:10px 16px;border-radius:99px;background:#1f160c;border:1px solid var(--lamp);color:#ffe2a8;box-shadow:0 0 20px rgba(255,179,71,.5);animation:fade-in .3s,act-out .5s 2.7s forwards;white-space:nowrap;font-size:14px}
.book-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.book-tabs .tab{min-height:44px;justify-content:center;align-items:center}
.bcard.locked{min-height:64px;justify-content:center}.bcard.locked b,.bcard.locked small{display:none}.bcard.locked .bq{font-size:22px;line-height:1}
.story .story-text{animation:fade-in 1s .6s both}.story{animation:none}
.l2-person-img{display:block;height:clamp(140px,26vh,220px);margin:6px auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}.l2-person-img.silent{filter:grayscale(.7) brightness(.8)}
/* Boons, chests, omens, traits */
.boon-h{font-size:15px;margin:12px 0 6px;color:var(--lamp)}
.boons{display:grid;gap:8px}
.boon{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;background:#140f1e;border:1px solid rgba(255,179,71,.45);min-height:64px}
.boon .bk{grid-row:1/3;font:600 34px var(--display);color:#ffe2a8;position:relative;min-width:64px;text-align:center}
.boon .bk i{position:absolute;top:-8px;right:-6px;font-size:16px;font-style:normal;color:#ffd27a}
.boon small{color:var(--muted)}.boon em{font-style:normal;font-size:13px}
.boon.rare{border-color:#ffd27a;box-shadow:0 0 16px rgba(255,210,122,.45)}
.boon.on{border-color:#9be7a9;box-shadow:0 0 14px rgba(155,231,169,.4)}.boon.off{opacity:.4}
.boon-chip,.omen-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:13px;background:#1f160c;border:1px solid rgba(255,179,71,.5);color:#ffe2a8;margin-right:4px}
.omen-chip{border-color:#c79bff;color:#e6d4ff;background:#1d1430}
.card.treasure,.card.omen{text-align:center}
.chest,.omikuji{font-size:72px;line-height:1.2;margin:6px 0}.chest.open{animation:pulse .6s 2}.chest.stuck{filter:grayscale(1)}
.omen-k{font:700 96px/1.1 var(--display);margin:8px 0;color:#ffe2a8;text-shadow:0 0 24px var(--lamp)}
.foe .trait{display:block;font-size:11px;color:#c9a8ff}.foe .trait b{color:#e6d4ff}
.foe.shielded img{filter:drop-shadow(0 0 10px #8fd3ff) drop-shadow(0 0 2px #fff)}
.foe.trait-swift img{animation-duration:1.2s}
.foe.trait-mirror img{transform:scaleX(-1)}
.card.victory:has(.boons) .victory-scene{max-height:80px}
.card.victory:has(.boons) h1{font-size:22px;margin:4px 0}.card.victory:has(.boons) .loot{margin:2px 0}
.boon{min-height:58px;padding:8px 12px}.boon .bk{font-size:30px}
.l2-hud{flex-wrap:wrap!important;row-gap:4px}.l2-hud b{flex:1 1 auto;order:0}.l2-hud .link{order:1;margin-left:0}
.l2-hud>span:not(.l2-hp){order:2}.l2-hud .l2-hp{order:2;flex:1 1 100px;min-width:90px}
.l2-hud .boon-chip,.l2-hud .omen-chip{font-size:12px;padding:1px 6px;max-width:120px;overflow:hidden;white-space:nowrap}
.l2-ico{width:1.6em;height:1.6em;object-fit:contain;vertical-align:middle}
.l2-finale{margin:12px 0}.l2-finale-img{width:100%;border-radius:12px}.l2-finale-line{display:flex;gap:10px;align-items:center;margin:8px 0}.l2-finale-line .l2-person-img,.l2-finale-line .l2-person{width:64px;max-height:96px;flex:none;font-size:32px}
.l2-clock{display:block;font-weight:700;font-size:1.2em;color:#ffcf6b;margin-top:4px}.trait.trick{border-color:#ff9a6b}
.deeper{margin:14px 0;padding:12px;border-radius:12px;background:rgba(80,60,140,.18);border:1px solid rgba(160,130,255,.35)}.mastery{margin:6px 0}
.op-journey{list-style:none;padding:0;margin:10px auto 16px;display:grid;gap:8px;max-width:340px;text-align:left}
.op-journey li{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.45);border:1px solid rgba(255,207,107,.35)}
.op-journey b{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lamp,#ffcf6b);color:#1a1020}
.op-journey small{color:var(--muted,#bbb)}
.op-title .link{display:block;margin:10px auto 0}
.op-strike .op-mute{position:relative;top:auto;left:auto;transform:none;margin:0 auto 12px;display:block}
.op-strike .op-mute.hit{animation:ophit .4s}
@keyframes ophit{30%{transform:translateX(-8px) rotate(-4deg);filter:brightness(1.8)}70%{transform:translateX(6px)}}
.story .eyebrow{text-transform:uppercase}
.op-foe{position:relative;width:min(60vw,260px);margin:0 auto 12px}
.op-foe .op-mute{width:100%;max-width:none;margin:0}
.op-mute.laugh{animation:oplaugh .5s}
@keyframes oplaugh{25%{transform:rotate(4deg) scale(1.03)}75%{transform:rotate(-4deg)}}
.op-slash{position:absolute;left:50%;top:45%;width:130%;pointer-events:none;mix-blend-mode:screen;animation:opslash .45s ease-out forwards}
@keyframes opslash{0%{opacity:0;transform:translate(-80%,-80%) scale(.6) rotate(-20deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-35%,-35%) scale(1.15) rotate(0)}}
.op-dmg{position:absolute;top:30%;right:-4%;font:800 44px/1 var(--display,serif);color:#ffcf6b;text-shadow:0 0 12px #ff7a3c,0 2px 0 #000;animation:opdmg 1s ease-out forwards}
@keyframes opdmg{0%{opacity:0;transform:translateY(10px) scale(.5)}25%{opacity:1;transform:translateY(-6px) scale(1.25)}100%{opacity:0;transform:translateY(-50px) scale(1)}}
.op-burst{position:absolute;left:50%;top:45%;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(255,207,107,.9);animation:opburst .55s ease-out forwards}
@keyframes opburst{to{box-shadow:0 0 0 120px rgba(255,207,107,0)}}
.op-strike.struck{animation:opshake .35s,opflash .35s}
@keyframes opshake{20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,0)}}
@keyframes opflash{0%{background:#fff3d0}100%{background:#000}}
@media (prefers-reduced-motion: reduce){.op-slash,.op-dmg,.op-burst,.op-strike.struck,.op-mute.laugh{animation:none}}