:root {
  --paper: #f4efe4;
  --paper-2: #ede4d3;
  --ink: #161513;
  --ink-soft: #5f5a51;
  --line: rgba(22, 21, 19, 0.16);
  --line-strong: rgba(22, 21, 19, 0.28);
  --seal: #a63c2d;
  --shadow: 0 18px 55px rgba(35, 29, 20, 0.12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.6), transparent 25%),
    radial-gradient(circle at 82% 88%, rgba(166,60,45,.05), transparent 28%),
    var(--paper);
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 18px 10px;
  max-width: 980px; width: 100%; margin: 0 auto;
}
.brand { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 9px; padding: 8px 4px; cursor: pointer; }
.brand-name { font-size: 14px; letter-spacing: .22em; font-weight: 800; }
.seal { width: 9px; height: 9px; border-radius: 2px; background: var(--seal); transform: rotate(7deg); }
.top-actions { display: flex; gap: 7px; }
.icon-button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.2); display: grid; place-items: center; cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.icon-button:active { transform: scale(.94); }
.text-icon { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ink-button { font-family: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif; font-size: 19px; }

.game-main { flex: 1; display: grid; place-items: center; padding: 4px 16px max(18px, env(safe-area-inset-bottom)); }
.intro-screen, .game-screen, .summary-screen { width: min(100%, 520px); }

.intro-screen { min-height: 72dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.intro-wall {
  font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: clamp(38px, 9vw, 62px); letter-spacing: .16em;
  opacity: .16; filter: blur(.25px); margin-bottom: 20px; animation: introFade 1.4s ease .5s forwards;
}
.intro-focus { font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 112px; line-height: 1; margin-top: -18px; opacity: 0; animation: focusIn .9s ease 1.05s forwards; }
.intro-break { font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 34px; letter-spacing: .3em; opacity: 0; transform: translateY(8px); animation: focusIn .7s ease 1.8s forwards; }
.intro-line { margin: 34px 0 18px; font-size: 18px; color: var(--ink-soft); opacity: 0; animation: focusIn .6s ease 2.25s forwards; }
.intro-screen .primary-button { opacity: 0; visibility: hidden; animation: introButtonIn .6s ease 2.55s forwards; }
.skip-button { margin-top: 14px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; opacity: .7; }
@keyframes introFade { to { opacity: .055; transform: scale(.97); } }
@keyframes focusIn { to { opacity: 1; transform: translateY(0); } }
@keyframes introButtonIn { to { opacity: 1; visibility: visible; transform: translateY(0); } }

.primary-button, .secondary-button {
  border-radius: 999px; padding: 14px 23px; min-height: 48px; border: 1px solid var(--ink); cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.primary-button { background: var(--ink); color: var(--paper); box-shadow: 0 8px 20px rgba(22,21,19,.14); }
.secondary-button { background: transparent; color: var(--ink); }
.primary-button:active, .secondary-button:active { transform: translateY(1px) scale(.985); }

.game-screen { min-height: 78dvh; display: flex; flex-direction: column; justify-content: center; position: relative; }
.progress-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 14px; }
.progress-text { font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); font-weight: 700; }
.tiny-button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink-soft); }
.stage {
  direction: ltr;
  min-height: 350px; border-radius: var(--radius); position: relative; display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
}
.stage::before {
  content: ""; position: absolute; inset: 12% 8%; border-radius: 45%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 66%); z-index: -3;
}
.ghost-char {
  position: absolute; font-family: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif;
  font-size: clamp(170px, 47vw, 260px); line-height: 1; opacity: .055; user-select: none; z-index: -1;
  transition: opacity .3s ease;
}
.slot-grid { width: min(290px, 76vw); height: min(290px, 76vw); display: grid; gap: 10px; position: relative; z-index: 2; }
.slot-grid.layout-left-right { grid-template-columns: 1fr 1fr; align-items: center; }
.slot-grid.layout-top-bottom { grid-template-rows: 1fr 1fr; align-items: center; }
.slot-grid.layout-top-bottom .slot { width: min(54%, 150px); min-width: 88px; max-width: 100%; justify-self: center; }
.slot {
  min-width: 104px; min-height: 128px; border: 1px dashed var(--line-strong); border-radius: 22px;
  display: grid; place-items: center; font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 82px;
  color: var(--ink); background: rgba(255,255,255,.13); transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.slot.ready { border-color: rgba(166,60,45,.65); background: rgba(166,60,45,.045); animation: breathe 1.05s ease-in-out infinite alternate; }
.slot.near { transform: scale(1.045); border-color: var(--seal); background: rgba(166,60,45,.07); }
.slot.filled { border-style: solid; border-color: transparent; background: transparent; }
@keyframes breathe { to { transform: scale(1.018); } }

.component-tray { direction: ltr; min-height: 124px; display: flex; justify-content: center; align-items: center; gap: 18px; padding: 14px 10px 8px; position: relative; }
.component {
  width: 96px; height: 96px; border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.3);
  box-shadow: 0 8px 26px rgba(34,28,20,.08); display: grid; place-items: center;
  font-family: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif; font-size: 58px; cursor: grab;
  user-select: none; touch-action: none; transition: transform .18s ease, opacity .2s ease, box-shadow .18s ease;
  animation: tileFloat 2.8s ease-in-out infinite alternate;
}
.component:nth-child(2) { animation-delay: .18s; }
.component:nth-child(3) { animation-delay: .34s; }
.component:active { cursor: grabbing; }
.component.selected { box-shadow: 0 0 0 2px rgba(166,60,45,.38), 0 10px 30px rgba(34,28,20,.12); transform: translateY(-3px); }
.component.placed { opacity: 0; pointer-events: none; transform: scale(.86); }
.component.dragging { position: fixed !important; z-index: 1000; margin: 0; pointer-events: none; animation: none; transform: scale(1.07) rotate(-1deg); box-shadow: 0 18px 50px rgba(34,28,20,.2); }
.component.reject { animation: reject .32s ease; }
@keyframes tileFloat { to { transform: translateY(-3px) rotate(.25deg); } }
@keyframes reject { 25% { transform: translateX(-7px) rotate(-1deg); } 65% { transform: translateX(6px) rotate(1deg); } }

.gesture-hint { position: absolute; left: 50%; bottom: 140px; width: 150px; transform: translateX(-50%); pointer-events: none; opacity: .82; z-index: 4; }
.gesture-dot { position: absolute; left: 10px; font-size: 22px; color: var(--seal); animation: gestureMove 1.45s ease-in-out infinite; }
.gesture-arrow { position: absolute; left: 54px; top: 3px; color: var(--ink-soft); letter-spacing: .16em; }
@keyframes gestureMove { 0%,15% { transform: translateX(0); opacity:.35; } 65%,85% { transform: translateX(104px); opacity:1; } 100% { opacity:.15; } }

.final-char {
  position: absolute; z-index: 5; font-family: "Songti SC", "Noto Serif CJK SC", serif;
  font-size: clamp(180px, 50vw, 275px); line-height: 1; transform-origin: center;
  animation: finalIn .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes finalIn { 0% { opacity:0; transform:scale(.72); filter: blur(8px); } 70% { transform:scale(1.05); } 100% { opacity:1; transform:scale(1); filter: blur(0); } }
.reveal-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.reveal-layer span { position: absolute; display: block; }
.reveal-layer.reveal-forest::before,
.reveal-layer.reveal-forest::after {
  content: ""; position:absolute; left:50%; bottom:14%; width:110px; height:190px; transform-origin: bottom center;
  background: linear-gradient(to bottom, rgba(74,100,64,.8), rgba(31,45,26,.72));
  clip-path: polygon(50% 0, 82% 35%, 66% 35%, 94% 70%, 66% 70%, 100% 100%, 0 100%, 34% 70%, 7% 70%, 35% 35%, 18% 35%);
  opacity:0; animation: growTree 1.8s ease forwards;
}
.reveal-layer.reveal-forest::before { transform: translateX(-94%) scale(.85); }
.reveal-layer.reveal-forest::after { transform: translateX(5%) scale(1.02); animation-delay:.08s; }
.reveal-layer.reveal-deepforest { background: radial-gradient(circle at 50% 70%, rgba(51,81,46,.24), transparent 58%); animation: revealFade 2s ease; }
.reveal-layer.reveal-deepforest::before { content:"▲ ▲ ▲ ▲ ▲"; position:absolute; width:100%; bottom:14%; text-align:center; font-size:78px; letter-spacing:-.2em; color:rgba(46,73,42,.72); transform:scaleY(1.5); animation: forestRise 1.6s ease both; }
.reveal-layer.reveal-fire::before { content:""; position:absolute; width:180px; height:220px; left:50%; bottom:11%; transform:translateX(-50%); border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 50% 70%, rgba(255,213,116,.92), rgba(207,73,34,.62) 50%, rgba(166,60,45,.18) 71%, transparent 72%); filter: blur(2px); animation: flame 1.8s ease both; }
.reveal-layer.reveal-light { background: radial-gradient(circle at 50% 50%, rgba(255,227,142,.72), rgba(255,227,142,.18) 32%, transparent 62%); animation: lightBurst 1.7s ease both; }
.reveal-layer.reveal-rest::before { content:"人   木"; position:absolute; width:100%; top:42%; text-align:center; font-family:"Songti SC",serif; font-size:84px; color:rgba(22,21,19,.3); animation: settle 1.7s ease both; }
.reveal-layer.reveal-crowd::before { content:"人 人 人 人 人"; position:absolute; width:100%; bottom:22%; text-align:center; font-family:"Songti SC",serif; font-size:50px; letter-spacing:.05em; color:rgba(22,21,19,.24); animation: crowdIn 1.7s ease both; }
.reveal-layer.reveal-mountain::before { content:"▲"; position:absolute; left:50%; bottom:8%; transform:translateX(-50%) scaleX(2.5); color:rgba(77,72,62,.27); font-size:230px; animation: mountainRise 1.8s ease both; }
.reveal-layer.reveal-joy { background: radial-gradient(circle at 50% 52%, rgba(203,102,83,.18), transparent 48%); animation: lightBurst 1.7s ease both; }
.reveal-layer.reveal-bird::before { content:"⌁  ︿  ⌁"; position:absolute; width:100%; top:30%; text-align:center; font-size:50px; color:rgba(46,45,42,.35); letter-spacing:.35em; animation: birds 1.8s ease both; }
@keyframes growTree { 0%{opacity:0; scale:.55 .1;} 45%{opacity:.65;} 100%{opacity:.58; scale:1 1;} }
@keyframes forestRise { 0%{opacity:0; transform:translateY(60px) scaleY(.8);} 100%{opacity:.55; transform:translateY(0) scaleY(1.55);} }
@keyframes flame { 0%{opacity:0; transform:translateX(-50%) scale(.4,.18);} 45%{opacity:.95;} 100%{opacity:0; transform:translateX(-50%) scale(1.12,1.18);} }
@keyframes lightBurst { 0%{opacity:0; transform:scale(.5);} 45%{opacity:1;} 100%{opacity:0; transform:scale(1.3);} }
@keyframes settle { 0%{opacity:0; transform:translateX(25px);} 45%{opacity:.3;} 100%{opacity:0; transform:translateX(0);} }
@keyframes crowdIn { 0%{opacity:0; transform:translateY(30px);} 55%{opacity:.32;} 100%{opacity:0; transform:translateY(0);} }
@keyframes mountainRise { 0%{opacity:0; transform:translateX(-50%) translateY(90px) scaleX(2.5);} 55%{opacity:.28;} 100%{opacity:0; transform:translateX(-50%) translateY(0) scaleX(2.5);} }
@keyframes birds { 0%{opacity:0; transform:translateY(20px) scale(.8);} 55%{opacity:.38;} 100%{opacity:0; transform:translateY(-26px) scale(1.08);} }
@keyframes revealFade { 0%,100%{opacity:0} 40%{opacity:1} }

.meaning-card { text-align: center; margin: 2px auto 6px; min-height: 86px; animation: cardIn .25s ease; }
@keyframes cardIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.meaning-char-wrap { display: inline-flex; align-items:center; gap:8px; }
.meaning-char { font-family:"Songti SC",serif; font-size:34px; }
.audio-replay { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; }
.meaning-pinyin { font-size:14px; color:var(--ink-soft); margin-top:2px; }
.meaning-text { font-size:17px; margin-top:4px; }
.mnemonic-note { max-width:370px; margin:6px auto 0; font-size:11px; line-height:1.4; color:var(--ink-soft); }
.bottom-controls { min-height: 58px; display:flex; justify-content:center; align-items:center; gap:9px; padding: 4px 0; }

.summary-screen { min-height:70dvh; display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center; }
.summary-mark { font-family:"Songti SC",serif; font-size:90px; opacity:.12; }
.summary-screen h1 { max-width:420px; font-size:clamp(28px,7vw,40px); line-height:1.05; margin:8px 0 12px; }
.summary-screen p { max-width:420px; color:var(--ink-soft); line-height:1.55; margin:0 0 24px; }
.summary-stats { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; justify-content:center; }
.stat-pill { border:1px solid var(--line); border-radius:999px; padding:9px 13px; font-size:12px; color:var(--ink-soft); }
.summary-screen .secondary-button { margin-top:10px; }

.dialog {
  width:min(92vw,560px); max-height:82dvh; border:1px solid var(--line); border-radius:28px; padding:22px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow);
}
.dialog::backdrop { background:rgba(18,17,15,.38); backdrop-filter:blur(3px); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.dialog-head h2 { margin:2px 0 0; font-size:28px; }
.dialog-kicker { font-size:10px; letter-spacing:.2em; color:var(--ink-soft); font-weight:800; }
.ink-count { color:var(--ink-soft); font-size:13px; margin:8px 0 16px; }
.ink-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.ink-cell { aspect-ratio:1; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.18); display:grid; place-items:center; font-family:"Songti SC",serif; font-size:38px; cursor:pointer; }
.ink-cell.locked { opacity:.15; filter:blur(.5px); cursor:default; }
.ink-cell.active { outline:2px solid rgba(166,60,45,.4); }
.ink-detail { margin-top:18px; padding:16px; border-radius:18px; background:rgba(255,255,255,.22); text-align:center; }
.detail-char { font-family:"Songti SC",serif; font-size:72px; }
.detail-pinyin { color:var(--ink-soft); margin-top:-5px; }
.detail-meaning { font-size:18px; margin:5px 0 12px; }
.detail-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.detail-actions button { padding:9px 13px; min-height:38px; }
.compact-dialog { max-width:430px; }
.help-demo { display:flex; gap:10px; align-items:center; justify-content:center; font-family:"Songti SC",serif; font-size:38px; padding:28px 8px 10px; }
.help-demo strong { color:var(--seal); }
.compact-dialog p { color:var(--ink-soft); line-height:1.55; }

.toast { position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); transform:translateX(-50%); padding:11px 16px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:13px; z-index:2000; box-shadow:var(--shadow); }

@media (max-width: 430px) {
  .game-main { padding-inline: 12px; }
  .stage { min-height: 330px; }
  .component { width:86px; height:86px; font-size:53px; }
  .slot { min-width:92px; min-height:116px; font-size:74px; }
  .ink-grid { grid-template-columns:repeat(4,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* --- Kanyoou v4: world / retention layer --- */
.home-screen, .wall-screen, .rush-screen { width:min(100%, 680px); }
.home-screen { min-height:76dvh; display:flex; flex-direction:column; justify-content:center; padding:26px 0 38px; }
.home-kicker, .section-label { font-size:10px; letter-spacing:.2em; font-weight:800; color:var(--seal); }
.home-screen h1 { font-size:clamp(34px,8vw,54px); line-height:1.02; letter-spacing:-.035em; max-width:600px; margin:10px 0 12px; }
.home-body { color:var(--ink-soft); max-width:520px; line-height:1.55; margin:0 0 24px; }
.visibility-card { border:1px solid var(--line); border-radius:24px; padding:18px 18px 16px; background:rgba(255,255,255,.2); }
.visibility-head { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:10px; letter-spacing:.14em; font-weight:800; }
.visibility-head strong { font-size:23px; letter-spacing:-.03em; }
.visibility-track { height:8px; background:rgba(22,21,19,.08); border-radius:999px; overflow:hidden; margin:13px 0 10px; }
.visibility-fill { height:100%; width:0; background:linear-gradient(90deg,var(--seal),var(--ink)); border-radius:inherit; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.visibility-sub { font-size:12px; color:var(--ink-soft); }
.mystery-card { margin-top:14px; border-radius:30px; padding:22px; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; box-shadow:0 18px 44px rgba(22,21,19,.16); }
.mystery-card::after { content:""; position:absolute; inset:auto -25% -60% 30%; height:210px; border-radius:50%; background:radial-gradient(circle,rgba(244,239,228,.12),transparent 65%); pointer-events:none; }
.mystery-kicker { font-size:10px; letter-spacing:.2em; font-weight:800; opacity:.6; }
.mystery-word { direction:ltr; font-family:"Songti SC","Noto Serif CJK SC",serif; font-size:clamp(72px,20vw,116px); line-height:1; margin:20px 0 10px; text-align:center; position:relative; z-index:1; }
.mystery-meta { text-align:center; font-size:13px; opacity:.7; margin-bottom:18px; }
.mystery-card .primary-button { display:block; margin:0 auto; background:var(--paper); color:var(--ink); border-color:var(--paper); position:relative; z-index:2; }
.known-glyph { filter:none; opacity:1; }
.unknown-glyph { display:inline-block; filter:blur(7px); opacity:.18; transform:scale(.95); }
.home-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 22px; }
.wide-button { width:100%; }
.home-recent { margin-top:2px; }
.home-word-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.mini-word-card { min-width:0; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.2); padding:12px 8px; cursor:pointer; text-align:center; }
.mini-word-card strong { display:block; font-family:"Songti SC",serif; font-size:28px; margin-bottom:5px; }
.mini-word-card span { display:block; font-size:10px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty-note { color:var(--ink-soft); font-size:13px; padding:10px 0; }
.text-tiny { font-size:17px; line-height:1; }
.target-hint { align-self:center; max-width:420px; border:1px solid rgba(166,60,45,.18); background:rgba(166,60,45,.045); color:var(--ink-soft); border-radius:999px; padding:8px 14px; font-size:11px; margin:-2px 0 5px; text-align:center; }

.slot-grid.layout-triangle { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; width:min(270px,72vw); height:min(270px,72vw); }
.slot-grid.layout-triangle .slot[data-slot="top"] { grid-column:1 / 3; width:46%; justify-self:center; }
.slot-grid.layout-triangle .slot { min-width:82px; min-height:104px; font-size:70px; }
.slot-grid.layout-enclosure { display:block; width:min(260px,70vw); height:min(280px,74vw); }
.slot-grid.layout-enclosure .slot { position:absolute; }
.slot-grid.layout-enclosure .slot[data-slot="outer"] { inset:5% 9%; font-size:132px; border-radius:30px; }
.slot-grid.layout-enclosure .slot[data-slot="inner"] { width:38%; height:34%; min-width:80px; min-height:80px; left:31%; top:42%; font-size:58px; z-index:3; background:rgba(244,239,228,.72); }

.unlock-card { width:min(100%,430px); margin:8px auto 6px; padding:15px 18px; border:1px solid rgba(166,60,45,.25); border-radius:22px; background:linear-gradient(135deg,rgba(166,60,45,.07),rgba(255,255,255,.2)); text-align:center; animation:unlockIn .45s cubic-bezier(.2,.8,.2,1); }
.unlock-label { font-size:9px; font-weight:800; letter-spacing:.2em; color:var(--seal); }
.unlock-word { direction:ltr; font-family:"Songti SC",serif; font-size:43px; margin-top:4px; }
.unlock-pinyin { color:var(--ink-soft); font-size:12px; }
.unlock-meaning { font-size:13px; margin-top:3px; }
@keyframes unlockIn { from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }

.summary-preview { direction:ltr; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; max-width:460px; margin:-6px 0 22px; }
.summary-preview span { font-family:"Songti SC",serif; font-size:25px; padding:7px 10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.15); }

.wall-screen, .rush-screen { min-height:75dvh; padding:28px 0 48px; align-self:start; }
.screen-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.screen-head h1 { font-size:clamp(30px,7vw,44px); line-height:1.05; margin:6px 0 0; letter-spacing:-.03em; }
.wall-body { color:var(--ink-soft); line-height:1.55; max-width:580px; margin:0 0 16px 44px; }
.wall-stats { display:flex; gap:8px; margin:0 0 18px 44px; }
.wall-stats span { border:1px solid var(--line); border-radius:999px; padding:7px 10px; font-size:11px; color:var(--ink-soft); }
.wall-grid { direction:ltr; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.wall-card { min-height:148px; border:1px solid var(--line); border-radius:24px; padding:18px; background:rgba(255,255,255,.17); position:relative; overflow:hidden; }
.wall-card.readable { background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(166,60,45,.035)); }
.wall-word { font-family:"Songti SC",serif; font-size:52px; letter-spacing:.06em; }
.wall-pinyin { font-size:12px; color:var(--ink-soft); margin-top:6px; }
.wall-meaning { font-size:15px; margin-top:3px; }
.wall-status { position:absolute; bottom:14px; left:18px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); }
.wall-card.partial .wall-word { margin-top:14px; }

.rush-screen { width:min(100%,560px); }
.rush-progress { font-size:11px; letter-spacing:.14em; color:var(--ink-soft); text-align:center; margin:32px 0 12px; }
.rush-prompt { font-size:22px; font-weight:700; line-height:1.3; text-align:center; min-height:60px; display:grid; place-items:center; }
.rush-options { direction:ltr; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0 18px; }
.rush-option { min-height:108px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.24); font-family:"Songti SC",serif; font-size:42px; cursor:pointer; box-shadow:0 8px 24px rgba(34,28,20,.05); }
.rush-option.correct { background:rgba(74,100,64,.12); border-color:rgba(74,100,64,.35); transform:scale(1.025); }
.rush-option.soft-miss { animation:reject .32s ease; opacity:.65; }
.rush-result { direction:ltr; text-align:center; min-height:56px; }
.rush-result strong { font-family:"Songti SC",serif; font-size:34px; display:block; }
.rush-result span { color:var(--ink-soft); font-size:12px; }
.rush-screen #rushAgainBtn { display:block; margin:24px auto 0; }

.connections-head { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.connection-map { display:flex; flex-direction:column; gap:8px; margin-top:11px; }
.connection-row { direction:ltr; display:grid; grid-template-columns:48px 28px 1fr; align-items:center; min-height:52px; }
.connection-root { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-family:"Songti SC",serif; font-size:26px; }
.connection-line { height:1px; background:var(--line-strong); }
.connection-children { display:flex; gap:5px; flex-wrap:wrap; }
.connection-node { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line); font-family:"Songti SC",serif; font-size:20px; }
.locked-node { opacity:.18; }
.locked-root { opacity:.28; }

.reveal-layer.reveal-star { background:radial-gradient(circle at 50% 48%,rgba(255,231,148,.62),transparent 48%); animation:lightBurst 1.8s ease both; }
.reveal-layer.reveal-star::before { content:"✦   ✧   ✦"; position:absolute; width:100%; top:28%; text-align:center; color:rgba(160,122,28,.46); font-size:38px; letter-spacing:.28em; animation:stars 1.8s ease both; }
.reveal-layer.reveal-calm { background:radial-gradient(ellipse at 50% 65%,rgba(85,112,98,.16),transparent 55%); animation:revealFade 2s ease; }
.reveal-layer.reveal-calm::before { content:"⌂"; position:absolute; width:100%; top:27%; text-align:center; font-size:150px; color:rgba(74,94,84,.16); animation:settle 1.7s ease both; }
.reveal-layer.reveal-question::before { content:"？"; position:absolute; width:100%; top:23%; text-align:center; font-family:serif; font-size:160px; color:rgba(166,60,45,.2); animation:questionPulse 1.7s ease both; }
.reveal-layer.reveal-sky { background:radial-gradient(circle at 50% 40%,rgba(142,166,184,.18),transparent 55%); animation:lightBurst 1.7s ease both; }
.reveal-layer.reveal-sky::before { content:"⌁   ⌁   ⌁"; position:absolute; width:100%; top:30%; text-align:center; color:rgba(84,111,129,.25); font-size:34px; letter-spacing:.3em; animation:birds 1.8s ease both; }
.reveal-layer.reveal-companion::before { content:"人   人"; position:absolute; width:100%; top:39%; text-align:center; font-family:"Songti SC",serif; font-size:72px; color:rgba(22,21,19,.25); animation:companions 1.7s ease both; }
.reveal-layer.reveal-cluster::before { content:"•   •   •"; position:absolute; width:100%; top:37%; text-align:center; font-size:70px; color:rgba(166,60,45,.24); animation:cluster 1.7s ease both; }
.reveal-layer.reveal-human::before { content:"人"; position:absolute; width:100%; top:30%; text-align:center; font-family:"Songti SC",serif; font-size:120px; color:rgba(22,21,19,.2); animation:settle 1.7s ease both; }
.reveal-layer.reveal-disaster { background:radial-gradient(circle at 50% 62%,rgba(192,74,42,.23),transparent 50%); animation:lightBurst 1.8s ease both; }
.reveal-layer.reveal-disaster::before { content:"⌂"; position:absolute; width:100%; top:21%; text-align:center; font-size:150px; color:rgba(73,62,52,.16); animation:settle 1.8s ease both; }
.reveal-layer.reveal-time::before { content:"◔   ◑   ◕"; position:absolute; width:100%; top:33%; text-align:center; font-size:56px; color:rgba(61,64,84,.24); letter-spacing:.22em; animation:timeFlow 1.8s ease both; }
@keyframes stars { 0%{opacity:0; transform:scale(.5) rotate(-5deg)} 50%{opacity:1} 100%{opacity:0; transform:scale(1.2) rotate(4deg)} }
@keyframes questionPulse { 0%{opacity:0; transform:scale(.7)} 45%{opacity:.35; transform:scale(1.06)} 100%{opacity:0; transform:scale(1.15)} }
@keyframes companions { 0%{opacity:0; transform:translateX(35px)} 45%{opacity:.32} 100%{opacity:0; transform:translateX(0)} }
@keyframes cluster { 0%{opacity:0; letter-spacing:.7em} 50%{opacity:.34} 100%{opacity:0; letter-spacing:.18em} }
@keyframes timeFlow { 0%{opacity:0; transform:translateX(30px)} 45%{opacity:.34} 100%{opacity:0; transform:translateX(-20px)} }

@media (max-width:560px) {
  .home-screen { justify-content:flex-start; padding-top:32px; }
  .home-word-strip { grid-template-columns:repeat(2,1fr); }
  .wall-grid { grid-template-columns:1fr; }
  .wall-body, .wall-stats { margin-left:0; margin-right:0; }
  .rush-options { grid-template-columns:1fr; }
  .rush-option { min-height:78px; font-size:36px; }
  .mystery-word { margin:15px 0 8px; }
}

@media (max-width:380px) {
  .topbar { padding-inline:12px; }
  .top-actions { gap:4px; }
  .icon-button { width:38px; height:38px; }
  .home-actions { grid-template-columns:1fr; }
  .slot-grid.layout-enclosure .slot[data-slot="outer"] { font-size:112px; }
}


/* --- Kanyoou v5: flow, prediction and Wall readability --- */
.familiarity-strip {
  align-self:center; display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap;
  min-height:28px; margin:0 0 3px; color:var(--ink-soft); font-size:11px;
}
.familiarity-label { opacity:.72; margin-inline-end:2px; }
.familiar-piece { display:inline-grid; place-items:center; min-width:29px; height:27px; padding:0 8px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.22); font-family:"Songti SC",serif; font-size:16px; color:var(--ink); }
.familiar-piece.new-piece { opacity:.42; border-style:dashed; }
.familiar-piece.known-piece::after { content:"·"; color:var(--seal); margin-inline-start:4px; font-family:system-ui,sans-serif; }

.stage-audio-replay { position:absolute; z-index:7; left:50%; bottom:16px; transform:translateX(-50%); width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(244,239,228,.88); color:var(--ink); box-shadow:0 8px 24px rgba(34,28,20,.1); cursor:pointer; font-size:17px; }
.stage-audio-replay.audio-attention { animation:audioPulse 1.25s ease-in-out 2; }
@keyframes audioPulse { 50%{ transform:translateX(-50%) scale(1.12); box-shadow:0 0 0 9px rgba(166,60,45,.08); } }
.final-char { cursor:pointer; }

.prediction-card { width:min(100%,430px); margin:7px auto 8px; border:1px solid var(--line); border-radius:24px; padding:16px; background:rgba(255,255,255,.25); text-align:center; box-shadow:0 10px 28px rgba(34,28,20,.05); animation:unlockIn .35s ease; }
.prediction-kicker { font-size:9px; font-weight:800; letter-spacing:.2em; color:var(--seal); }
.prediction-prompt { font-size:14px; font-weight:700; margin:6px 0 12px; }
.prediction-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; direction:ltr; }
.prediction-option { min-height:66px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.32); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.prediction-option .prediction-icon { font-size:25px; line-height:1; }
.prediction-option .prediction-label { font-size:9px; color:var(--ink-soft); line-height:1.15; }
.prediction-option.prediction-picked { border-color:rgba(74,100,64,.35); background:rgba(74,100,64,.1); transform:scale(1.025); }
.prediction-option.prediction-glance { opacity:.5; transform:scale(.98); }
.prediction-skip { border:0; background:transparent; color:var(--ink-soft); margin-top:9px; font-size:11px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

.unlock-more { margin-top:8px; display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.unlock-more span { border:1px solid var(--line); background:rgba(255,255,255,.25); border-radius:999px; padding:5px 8px; font-size:11px; }

.wall-grid { align-items:stretch; }
.wall-section-title { grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin:10px 0 1px; font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--seal); }
.wall-section-title::after { content:""; height:1px; background:var(--line); flex:1; }
.wall-card { min-height:184px; padding:18px 18px 15px; display:flex; flex-direction:column; text-align:left; width:100%; color:inherit; font:inherit; cursor:default; }
button.wall-card { appearance:none; -webkit-appearance:none; }
.wall-card.actionable { cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.wall-card.actionable:hover { transform:translateY(-2px); border-color:rgba(166,60,45,.3); background:rgba(166,60,45,.035); }
.wall-card.actionable:active { transform:translateY(0) scale(.99); }
.wall-word { line-height:1.05; min-height:58px; }
.wall-pinyin { line-height:1.25; margin-top:8px; }
.wall-meaning { line-height:1.32; margin-top:4px; overflow-wrap:anywhere; }
.wall-status { position:static; margin-top:auto; padding-top:13px; border-top:1px solid rgba(22,21,19,.07); line-height:1.25; min-height:25px; }
.wall-card.partial { min-height:160px; }
.wall-card.partial .wall-word { margin-top:0; display:flex; align-items:center; flex:1; }
.wall-decode-arrow { color:var(--seal); margin-left:5px; }

@media (max-width:560px) {
  .wall-card { min-height:168px; }
  .wall-card.partial { min-height:145px; }
  .wall-word { font-size:48px; }
  .prediction-options { gap:6px; }
  .prediction-option { min-height:61px; }
}

.familiarity-new { opacity:.55; font-size:10px; letter-spacing:.04em; }

/* --- Kanyoou v6: neo-device spatial UX --- */
:root {
  --desk: #dbe3e8;
  --shell: #f6f2ea;
  --panel: #fbf8f2;
  --panel-soft: #f1eadc;
  --edge: rgba(37, 34, 30, 0.18);
  --edge-strong: rgba(37, 34, 30, 0.28);
  --stack-shadow: 0 16px 36px rgba(43, 39, 31, 0.14);
  --lift-shadow: 0 8px 0 rgba(163, 152, 135, 0.45), 0 20px 34px rgba(41, 35, 28, 0.09);
}

html, body {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.55), transparent 24%),
    radial-gradient(circle at 80% 88%, rgba(110, 134, 149, .12), transparent 22%),
    linear-gradient(180deg, #dfe7eb 0%, #d6dee4 100%);
}

body {
  color: #1b1815;
}

.app-shell {
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 14px 12px 24px;
  position: relative;
}

.topbar {
  position: sticky;
  top: 10px;
  z-index: 40;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: rgba(248, 244, 236, 0.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(41,35,28,.08), inset 0 1px 0 rgba(255,255,255,.8);
}

.brand {
  padding: 4px 2px;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
}
.brand-name {
  font-size: 15px;
  letter-spacing: .22em;
  grid-column: 1 / span 2;
}
.brand::after {
  content: "CHARACTER DECODER";
  grid-column: 1 / span 2;
  font-size: 9px;
  letter-spacing: .24em;
  color: var(--ink-soft);
  margin-top: -1px;
}

.top-actions { gap: 8px; }
.icon-button, .tiny-button {
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(239,233,223,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 0 rgba(176,167,151,.65);
}
.icon-button { width: 48px; height: 44px; }
.tiny-button { width: 34px; height: 34px; }
.icon-button:active, .tiny-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 rgba(176,167,151,.65);
}

.game-main {
  padding-top: 16px;
}

.intro-screen,
.home-screen,
.game-screen,
.summary-screen,
.wall-screen,
.rush-screen {
  width: min(100%, 760px);
  background: linear-gradient(180deg, rgba(251,248,242,.98), rgba(243,237,226,.98));
  border: 1px solid var(--edge);
  border-radius: 28px;
  box-shadow: var(--stack-shadow), inset 0 1px 0 rgba(255,255,255,.85);
  padding: 22px 22px 26px;
  position: relative;
  isolation: isolate;
}

.intro-screen::before,
.home-screen::before,
.game-screen::before,
.summary-screen::before,
.wall-screen::before,
.rush-screen::before,
.dialog::before {
  content: "";
  position: absolute;
  inset: auto 16px -10px 16px;
  height: 98%;
  border-radius: 26px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(71,58,45,.06);
  z-index: -2;
}

.intro-screen::after,
.home-screen::after,
.game-screen::after,
.summary-screen::after,
.wall-screen::after,
.rush-screen::after,
.dialog::after {
  content: "";
  position: absolute;
  inset: auto 30px -19px 30px;
  height: 97%;
  border-radius: 24px;
  background: rgba(232,225,213,.95);
  border: 1px solid rgba(71,58,45,.05);
  z-index: -3;
}

.intro-screen,
.summary-screen {
  text-align: center;
}

.primary-button, .secondary-button {
  border-radius: 14px;
  min-height: 50px;
  padding: 13px 18px;
  letter-spacing: .02em;
  font-weight: 700;
  border: 1px solid var(--edge-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 4px 0 rgba(176,167,151,.76);
}
.primary-button {
  background: linear-gradient(180deg, #faf7f0 0%, #e9decc 100%);
  color: var(--ink);
}
.secondary-button {
  background: linear-gradient(180deg, #fffdf9 0%, #f2ebdf 100%);
  color: var(--ink);
}
.primary-button:active, .secondary-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 0 rgba(176,167,151,.76);
}

.home-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
  gap: 14px;
  align-content: start;
  min-height: auto;
}
.home-kicker, .home-screen h1, .home-body, .home-recent { grid-column: 1 / -1; }
.visibility-card { grid-column: 1; }
.mystery-card { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; align-self: stretch; }
.home-actions { grid-column: 1; margin: 0; align-self: start; }
.home-recent { margin-top: 2px; }
.home-kicker, .section-label, .mystery-kicker, .visibility-head, .unlock-label, .prediction-kicker, .dialog-kicker {
  letter-spacing: .18em;
}
.home-kicker, .section-label { color: var(--seal); }
.home-screen h1 { max-width: 620px; margin-top: 4px; }
.home-body { max-width: 600px; margin-bottom: 4px; }

.visibility-card,
.mystery-card,
.home-recent,
.unlock-card,
.prediction-card,
.rush-result,
.dialog,
.wall-card,
.mini-word-card,
.rush-option,
.ink-cell,
.ink-detail,
.summary-preview span {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,241,232,.98));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 0 rgba(188,177,160,.46);
}

.visibility-card,
.home-recent,
.unlock-card,
.prediction-card,
.mystery-card {
  border-radius: 18px;
}

.visibility-card,
.home-recent { padding: 18px; position: relative; }
.visibility-card::before,
.home-recent::before,
.mystery-card::before,
.stage::after,
.component-tray::before {
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 800;
  color: var(--seal);
}
.visibility-card::before { content: "VISIBILITY METER"; display:block; margin-bottom: 12px; }
.home-recent::before { content: "RECENTLY READ"; display:block; margin-bottom: 10px; }
.mystery-card::before { content: "ACTIVE MYSTERY"; display:block; margin-bottom: 12px; color: rgba(27,24,21,.56); }

.mystery-card {
  color: var(--ink);
  box-shadow: var(--lift-shadow), inset 0 1px 0 rgba(255,255,255,.92);
}
.mystery-card::after {
  inset: auto -10% -55% 28%;
  background: radial-gradient(circle, rgba(166,60,45,.06), transparent 65%);
}
.mystery-kicker { color: var(--seal); opacity: 1; }
.mystery-meta { color: var(--ink-soft); opacity: 1; }
.mystery-card .primary-button { background: linear-gradient(180deg, #fffdf8 0%, #efe7d9 100%); border-color: var(--edge-strong); }

.home-word-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mini-word-card {
  border-radius: 14px;
  padding: 14px 8px 12px;
  position: relative;
}
.mini-word-card::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(166,60,45,.45);
}

.game-screen {
  width: min(100%, 700px);
  min-height: auto;
  display: grid;
  gap: 12px;
  align-content: start;
}
.progress-row {
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: rgba(255,255,255,.42);
}
.target-hint, .familiarity-strip {
  border-radius: 14px;
  border: 1px solid rgba(166,60,45,.16);
  background: rgba(255,255,255,.5);
  padding: 10px 12px;
}
.target-hint { margin: 0 auto; }
.familiarity-strip {
  min-height: 42px;
  padding-inline: 12px;
}
.stage {
  min-height: 396px;
  padding: 34px 12px 52px;
  border: 1px solid var(--edge);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(241,233,220,.55)),
    repeating-linear-gradient(0deg, rgba(115,103,89,.05) 0 1px, transparent 1px 24px);
  box-shadow: inset 0 0 0 5px rgba(228,219,204,.9), 0 8px 0 rgba(188,177,160,.46);
}
.stage::before {
  inset: 12px 14px auto 14px;
  height: 26px;
  width: auto;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(166,60,45,.16), rgba(255,255,255,.28));
  z-index: -1;
}
.stage::after {
  content: "ASSEMBLY PAD";
  position: absolute;
  left: 18px;
  top: 8px;
}
.component-tray {
  min-height: 146px;
  padding: 36px 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(241,233,220,.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 0 rgba(188,177,160,.46);
}
.component-tray::before {
  content: "PARTS TRAY";
  position: absolute;
  left: 18px;
  top: 10px;
}
.component {
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdfa 0%, #f1e9dc 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 5px 0 rgba(188,177,160,.46), 0 15px 24px rgba(34,28,20,.06);
}
.slot {
  border-style: solid;
  border-radius: 18px;
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.slot.ready { background: rgba(166,60,45,.06); }
.prediction-card, .unlock-card { width: min(100%, 480px); }
.bottom-controls {
  min-height: 64px;
  justify-content: center;
}
.stage-audio-replay, .audio-replay {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,233,223,.88));
}

.summary-screen {
  width: min(100%, 620px);
}
.summary-mark { opacity: .18; }
.summary-preview span { border-radius: 12px; }

.wall-screen,
.rush-screen {
  width: min(100%, 760px);
  min-height: auto;
}
.wall-screen {
  background:
    linear-gradient(180deg, rgba(251,248,242,.98), rgba(242,236,225,.98)),
    repeating-linear-gradient(90deg, rgba(91,77,61,.03) 0 2px, transparent 2px 26px);
}
.wall-grid {
  gap: 14px;
}
.wall-card {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,242,234,.98));
  box-shadow: 3px 3px 0 rgba(196,186,168,.76), 0 10px 18px rgba(42,37,30,.05);
}
.wall-card::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(166,60,45,.62);
  right: 15px;
  top: 13px;
  box-shadow: 0 0 0 3px rgba(166,60,45,.1);
}
.wall-card.readable { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(243,239,230,.98)); }
.wall-card.partial { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,240,232,.92)); }
.wall-status { text-transform: none; font-size: 11px; letter-spacing: .08em; }
.wall-word { letter-spacing: .03em; }
.wall-section-title { margin-top: 4px; }

.rush-progress,
.rush-prompt {
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: rgba(255,255,255,.36);
  padding: 12px 14px;
}
.rush-prompt {
  min-height: 78px;
  font-size: 20px;
  margin-top: 10px;
}
.rush-options { gap: 12px; }
.rush-option {
  border-radius: 18px;
  min-height: 116px;
}
.rush-result {
  border-radius: 16px;
  padding: 12px;
}

.dialog {
  position: relative;
  background: linear-gradient(180deg, rgba(251,248,242,.99), rgba(242,236,225,.99));
  border-radius: 22px;
  padding-top: 28px;
}
.dialog::before {
  inset: 12px 12px auto 12px;
  height: 22px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(166,60,45,.14), rgba(255,255,255,.15));
  z-index: 0;
}
.dialog::after {
  inset: auto 18px -12px 18px;
  z-index: -2;
}
.dialog > * { position: relative; z-index: 1; }
.dialog-head h2 { letter-spacing: -.02em; }
.ink-cell { border-radius: 14px; }
.connection-root, .connection-node { border-radius: 12px; }
.connection-root { box-shadow: 0 4px 0 rgba(188,177,160,.46); }

.toast {
  border-radius: 14px;
  background: rgba(28, 25, 22, 0.92);
}

@media (max-width: 760px) {
  .home-screen {
    grid-template-columns: 1fr;
  }
  .visibility-card,
  .mystery-card,
  .home-actions,
  .home-recent { grid-column: 1; grid-row: auto; }
  .mystery-card { order: 3; }
  .home-actions { order: 4; }
  .home-recent { order: 5; }
}

@media (max-width: 560px) {
  .app-shell { padding-inline: 8px; }
  .topbar { padding: 10px 10px; border-radius: 16px; }
  .brand::after { letter-spacing: .18em; }
  .intro-screen,
  .home-screen,
  .game-screen,
  .summary-screen,
  .wall-screen,
  .rush-screen {
    padding: 18px 16px 22px;
    border-radius: 24px;
  }
  .home-screen h1,
  .screen-head h1 { font-size: clamp(28px, 8.5vw, 38px); }
  .home-word-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mystery-word { font-size: clamp(64px, 18vw, 92px); }
  .stage { min-height: 360px; padding-bottom: 48px; }
  .component-tray { min-height: 138px; }
  .rush-option { min-height: 84px; }
}

@media (max-width: 380px) {
  .icon-button { width: 42px; height: 40px; }
  .brand-name { font-size: 14px; }
  .top-actions { gap: 6px; }
  .home-word-strip { grid-template-columns: 1fr 1fr; }
}

/* --- Kanyoou v7: persistent device-world console --- */
.home-screen.device-world {
  display: block;
  padding: 22px;
  min-height: auto;
}

.device-world-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 4px 18px;
}
.device-world-head .home-kicker,
.device-world-head h1,
.device-world-head .home-body {
  grid-column: auto;
}
.device-world-head h1 {
  margin: 6px 0 8px;
  max-width: 620px;
}
.device-world-head .home-body {
  margin: 0;
}
.device-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 78px;
  justify-content: center;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(236,229,217,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 0 rgba(186,175,157,.55);
  padding: 9px 10px;
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 800;
  color: var(--ink-soft);
}
.status-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #607e5b;
  box-shadow: 0 0 0 3px rgba(96,126,91,.12), inset 0 1px 0 rgba(255,255,255,.55);
}

.decoder-console {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  grid-template-areas:
    "screen stations"
    "recent recent";
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--edge-strong);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(239,232,220,.9), rgba(225,216,201,.92)),
    repeating-linear-gradient(90deg, rgba(89,75,59,.035) 0 1px, transparent 1px 26px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 0 0 5px rgba(255,255,255,.16),
    0 9px 0 rgba(179,166,146,.5),
    0 22px 34px rgba(46,40,32,.08);
  position: relative;
}
.decoder-console::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(70,60,49,.18);
  transform: translateX(-50%);
}

.console-screen-zone {
  grid-area: screen;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-width: 0;
}
.console-screen-zone .visibility-card,
.console-screen-zone .mystery-card {
  grid-column: auto;
  grid-row: auto;
}
.device-readout {
  position: relative;
  padding-top: 31px;
  background:
    linear-gradient(180deg, rgba(248,246,238,.96), rgba(235,230,218,.97)),
    repeating-linear-gradient(0deg, rgba(57,67,54,.025) 0 1px, transparent 1px 4px);
}
.device-readout::after {
  content: "LANGUAGE SIGNAL";
  position: absolute;
  left: 15px;
  top: 10px;
  font-size: 9px;
  letter-spacing: .17em;
  color: var(--ink-soft);
  font-weight: 800;
}
.decoder-display {
  min-height: 286px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(49,53,43,.28);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.76), transparent 54%),
    linear-gradient(180deg, #edeedc 0%, #e4e6d2 100%);
  color: #26291f;
  box-shadow:
    inset 0 0 0 5px rgba(77,83,66,.07),
    inset 0 1px 5px rgba(38,42,33,.08),
    0 5px 0 rgba(171,162,144,.54);
}
.decoder-display::before {
  content: "MYSTERY DISPLAY";
  color: rgba(45,50,39,.5);
}
.decoder-display::after {
  inset: 0;
  height: auto;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(30,35,26,.025) 0 1px, transparent 1px 4px);
  opacity: .75;
}
.decoder-display .mystery-kicker,
.decoder-display .mystery-word,
.decoder-display .mystery-meta,
.decoder-display .primary-button {
  position: relative;
  z-index: 2;
}
.decoder-display .mystery-kicker { color: #5d6250; }
.decoder-display .mystery-word {
  color: #20231c;
  text-shadow: 0 1px rgba(255,255,255,.75);
}
.decoder-display .unknown-glyph {
  filter: blur(6px);
  opacity: .14;
}

.device-stations {
  grid-area: stations;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 11px;
  min-width: 0;
}
.device-station {
  position: relative;
  min-height: 116px;
  width: 100%;
  border: 1px solid var(--edge-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8 0%, #eee6d9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 5px 0 rgba(179,168,151,.68),
    0 13px 18px rgba(47,41,33,.055);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  padding: 15px 54px 14px 16px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.device-station:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fffefa 0%, #f1eadf 100%);
}
.device-station:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 0 rgba(179,168,151,.68);
}
.station-title {
  position: absolute;
  left: 15px;
  bottom: 13px;
  right: 48px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .04em;
}
.station-badge {
  position: absolute;
  right: 12px;
  top: 11px;
  min-width: 32px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge);
  background: rgba(255,255,255,.65);
  font-size: 9px;
  font-weight: 800;
  color: var(--ink-soft);
}
.station-object {
  position: absolute;
  left: 15px;
  top: 13px;
  width: 86px;
  height: 56px;
}

/* Wall = a tiny bulletin board with pinned slips */
.wall-object {
  border: 2px solid rgba(45,41,35,.55);
  border-radius: 5px;
  background: #d9ceba;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.28);
}
.wall-object i {
  position: absolute;
  width: 24px;
  height: 28px;
  background: #fbf7ef;
  border: 1px solid rgba(45,41,35,.2);
  box-shadow: 1px 2px 0 rgba(125,111,92,.18);
}
.wall-object i::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--seal);
}
.wall-object i:nth-child(1) { left: 8px; top: 10px; transform: rotate(-3deg); }
.wall-object i:nth-child(2) { left: 31px; top: 7px; transform: rotate(2deg); }
.wall-object i:nth-child(3) { right: 7px; top: 14px; transform: rotate(-1deg); }

/* My Ink = a small field notebook */
.ink-object {
  width: 70px;
  height: 57px;
  border: 2px solid rgba(45,41,35,.6);
  border-radius: 5px 8px 8px 5px;
  background: linear-gradient(90deg, #e7dece 0 10px, #fbf8f1 10px 100%);
  box-shadow: 3px 3px 0 rgba(152,139,120,.26);
}
.ink-object::before {
  content: "墨";
  position: absolute;
  left: 28px;
  top: 11px;
  font-family: "Songti SC", serif;
  font-size: 24px;
  color: rgba(28,25,22,.75);
}
.ink-object i {
  position: absolute;
  left: 6px;
  width: 8px;
  height: 2px;
  background: rgba(45,41,35,.38);
}
.ink-object i:nth-child(1) { top: 13px; }
.ink-object i:nth-child(2) { top: 27px; }
.ink-object i:nth-child(3) { top: 41px; }

/* Rush = a pattern scanner */
.rush-object {
  width: 78px;
  height: 55px;
  border: 2px solid rgba(45,41,35,.55);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(45,41,35,.08) 0 1px, transparent 1px 10px),
    #f1ece0;
  overflow: hidden;
}
.rush-object::before {
  content: "人 林 火";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 14px;
  font-family: "Songti SC", serif;
  font-size: 15px;
  letter-spacing: .09em;
  white-space: nowrap;
  color: rgba(35,32,28,.72);
}
.rush-object::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 2px;
  top: 9px;
  background: rgba(166,60,45,.72);
  box-shadow: 0 0 7px rgba(166,60,45,.36);
  animation: scanLine 2.1s ease-in-out infinite alternate;
}
@keyframes scanLine { to { transform: translateY(35px); } }

.discovery-tray {
  grid-area: recent;
  margin: 0;
  padding: 34px 16px 15px;
  border-radius: 18px;
  min-height: 122px;
  position: relative;
  background: linear-gradient(180deg, #ede4d6 0%, #f9f5ed 19%, #f7f2e8 100%);
  box-shadow:
    inset 0 6px 8px rgba(69,56,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75),
    0 5px 0 rgba(179,168,151,.54);
}
.discovery-tray::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 68px;
  height: 10px;
  border-radius: 0 0 9px 9px;
  border: 1px solid rgba(79,68,56,.15);
  border-top: 0;
  background: rgba(160,146,127,.14);
  transform: translateX(-50%);
}
.discovery-tray > .section-label {
  margin-bottom: 10px;
}
.discovery-tray.home-recent::before {
  content: "";
  display: block;
  margin: 0;
}
.discovery-tray .mini-word-card {
  box-shadow: 2px 3px 0 rgba(188,177,160,.48), inset 0 1px 0 rgba(255,255,255,.95);
}
.discovery-tray .mini-word-card:nth-child(2n) { transform: rotate(.6deg); }
.discovery-tray .mini-word-card:nth-child(2n+1) { transform: rotate(-.45deg); }
.discovery-tray .mini-word-card:hover { transform: translateY(-2px) rotate(0); }

/* Make the other screens feel like rooms in the same device */
.wall-screen .screen-head,
.rush-screen .screen-head {
  border-bottom: 1px solid var(--edge);
  padding-bottom: 14px;
}
.wall-screen::before,
.rush-screen::before {
  opacity: .86;
}
.dialog-head {
  border-bottom: 1px solid var(--edge);
  padding-bottom: 12px;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .decoder-console {
    grid-template-columns: 1fr;
    grid-template-areas:
      "screen"
      "stations"
      "recent";
  }
  .device-stations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .device-station {
    min-height: 124px;
    padding: 13px 10px 34px;
  }
  .station-object {
    left: 50%;
    transform: translateX(-50%);
  }
  .station-title {
    left: 8px;
    right: 8px;
    text-align: center;
    font-size: 10px;
  }
  .station-badge {
    right: 8px;
    top: 8px;
  }
}

@media (max-width: 520px) {
  .device-world-head {
    gap: 10px;
  }
  .device-status {
    min-width: 58px;
    padding: 8px 7px;
    letter-spacing: .12em;
  }
  .decoder-console {
    padding: 10px;
    gap: 12px;
    border-radius: 20px;
  }
  .decoder-display {
    min-height: 250px;
  }
  .device-stations {
    gap: 7px;
  }
  .device-station {
    min-height: 112px;
    border-radius: 15px;
  }
  .station-object {
    scale: .82;
    transform-origin: top center;
  }
  .station-title {
    font-size: 9px;
  }
  .station-badge {
    font-size: 8px;
    min-width: 28px;
    height: 21px;
  }
}

@media (max-width: 370px) {
  .device-world-head .home-body { display: none; }
  .device-stations { grid-template-columns: 1fr; }
  .device-station {
    min-height: 88px;
    padding: 12px 52px 12px 104px;
  }
  .station-object {
    left: 12px;
    top: 12px;
    transform: none;
    scale: .9;
  }
  .station-title {
    left: 104px;
    right: 48px;
    bottom: auto;
    top: 33px;
    text-align: left;
    font-size: 11px;
  }
}

/* --- Kanyoou v8: release content worlds + scanner --- */
.worlds-screen, .scan-screen {
  width:min(100%,760px);
  min-height:auto;
  background:linear-gradient(180deg,rgba(251,248,242,.98),rgba(242,236,225,.98));
  border:1px solid var(--edge);
  border-radius:28px;
  box-shadow:var(--stack-shadow), inset 0 1px 0 rgba(255,255,255,.85);
  padding:24px 22px 30px;
  position:relative;
  isolation:isolate;
}
.worlds-screen::before, .scan-screen::before {
  content:"";
  position:absolute;
  inset:auto 16px -10px 16px;
  height:98%;
  border-radius:26px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(71,58,45,.06);
  z-index:-2;
}
.device-stations { grid-template-rows:repeat(4,1fr); }
.station-worlds .worlds-object {
  width:72px; height:48px; top:17px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:4px;
}
.worlds-object i {
  display:block; border:1px solid rgba(73,64,53,.22); border-radius:7px;
  background:linear-gradient(180deg,#ece4d7,#dcd0be);
  box-shadow:inset 0 1px rgba(255,255,255,.65);
}
.world-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px;
}
.world-card {
  position:relative; min-height:176px; text-align:left; border:1px solid var(--edge-strong); border-radius:18px;
  background:linear-gradient(180deg,#fffdf8 0%,#eee6d9 100%); padding:18px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 0 rgba(179,168,151,.62),0 14px 20px rgba(47,41,33,.045);
}
.world-card:active { transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 0 rgba(179,168,151,.62); }
.world-card.active-world { outline:2px solid rgba(166,60,45,.18); }
.world-index { display:block; font-size:10px; letter-spacing:.18em; color:var(--seal); font-weight:800; }
.world-name { display:block; font-size:18px; font-weight:800; margin-top:9px; }
.world-description { display:block; font-size:11px; line-height:1.45; color:var(--ink-soft); margin-top:6px; min-height:32px; }
.world-progress { display:block; height:8px; background:rgba(22,21,19,.08); border-radius:999px; overflow:hidden; margin:18px 0 9px; }
.world-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--seal),var(--ink)); border-radius:inherit; }
.world-meta { display:block; font-size:10px; color:var(--ink-soft); }

.scan-console { margin-top:18px; }
.scan-display {
  min-height:330px; position:relative; display:grid; place-items:center; border:1px solid rgba(49,53,43,.28); border-radius:22px;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.78),transparent 52%),linear-gradient(180deg,#edefdf,#dfe2ce);
  box-shadow:inset 0 0 0 6px rgba(77,83,66,.07),inset 0 1px 5px rgba(38,42,33,.08),0 6px 0 rgba(171,162,144,.54); overflow:hidden;
}
.scan-lines { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(30,35,26,.025) 0 1px,transparent 1px 4px); pointer-events:none; }
.scan-char { font-family:"Songti SC","Noto Serif CJK SC",serif; font-size:clamp(150px,34vw,245px); line-height:1; filter:blur(3px); opacity:.3; transition:.5s ease; }
.scan-char.scan-known { filter:none; opacity:1; text-shadow:0 1px rgba(255,255,255,.85); }
.scan-char.scan-pulse { animation:scanPulse .75s ease; }
@keyframes scanPulse { 40%{transform:scale(1.08); filter:drop-shadow(0 0 22px rgba(166,60,45,.2));} }
.scan-display .stage-audio-replay { bottom:14px; }
.scan-reveal { text-align:center; margin:16px auto 0; padding:16px; max-width:520px; border:1px solid var(--edge); border-radius:16px; background:rgba(255,255,255,.5); }
.scan-pinyin { font-size:15px; color:var(--ink-soft); }
.scan-meaning { font-size:22px; font-weight:800; margin-top:5px; }
.scan-contexts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.scan-context { min-height:76px; padding:10px 8px; border:1px solid var(--edge); border-radius:13px; background:rgba(255,255,255,.45); }
.scan-context strong { display:block; font-family:"Songti SC",serif; font-size:27px; margin-bottom:4px; }
.scan-context > span { display:block; font-size:9px; color:var(--ink-soft); line-height:1.25; }
.scan-unlocks { max-width:520px; margin:10px auto 0; padding:12px 14px; border-radius:14px; border:1px solid rgba(166,60,45,.2); background:rgba(166,60,45,.045); text-align:center; }
.scan-unlocks > span { display:block; font-size:9px; letter-spacing:.18em; color:var(--seal); font-weight:800; margin-bottom:7px; }
.scan-unlocks strong { font-family:"Songti SC",serif; font-size:25px; margin:0 7px; }
.scan-actions { display:flex; justify-content:center; margin-top:16px; }
.wall-more { grid-column:1/-1; justify-self:center; margin:12px 0 4px; }

@media (max-width:760px) {
  .device-stations { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
}
@media (max-width:560px) {
  .worlds-screen, .scan-screen { padding:18px 16px 24px; border-radius:24px; }
  .world-grid { grid-template-columns:1fr; }
  .scan-display { min-height:280px; }
  .scan-contexts { grid-template-columns:1fr; }
  .scan-context { min-height:58px; }
}
@media (max-width:370px) {
  .device-stations { grid-template-columns:1fr; }
}

/* --- Kanyoou v9: memory signal, credits and release shell --- */
.device-stations { grid-template-rows: repeat(5, 1fr); }
.station-theme {
  background:
    radial-gradient(circle at 78% 26%, rgba(166,60,45,.07), transparent 23%),
    linear-gradient(180deg, #fffdf8 0%, #eee6d9 100%);
}
.theme-object {
  width: 76px;
  height: 48px;
  top: 17px;
  border-radius: 13px;
  background: linear-gradient(180deg, #e8ead8, #d8dcc5);
  box-shadow: inset 0 0 0 4px rgba(68,73,58,.06), 0 2px 0 rgba(178,168,151,.48);
}
.theme-object::before {
  content: "月";
  position: absolute;
  left: 9px;
  top: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(54,59,46,.24);
  border-radius: 50%;
  font-family: "Songti SC", "Noto Serif CJK SC", serif;
  font-size: 18px;
  color: rgba(38,42,33,.72);
  background: rgba(255,255,255,.36);
}
.theme-object::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(54,59,46,.22);
  background: repeating-radial-gradient(circle, rgba(45,50,39,.42) 0 1px, transparent 1px 4px);
}
.theme-object i:first-child {
  position: absolute;
  left: 44px;
  bottom: 7px;
  width: 18px;
  height: 2px;
  background: rgba(45,50,39,.26);
  transform: rotate(-14deg);
  transform-origin: left center;
}
.theme-object i:last-child {
  position: absolute;
  left: 42px;
  bottom: 10px;
  width: 2px;
  height: 8px;
  background: rgba(45,50,39,.35);
}

.site-footer {
  width: min(100%, 860px);
  margin: 28px auto 4px;
  padding: 18px 18px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  color: rgba(28,25,22,.66);
  font-size: 10px;
  line-height: 1.55;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(28,25,22,.24);
}
.site-footer a:hover { color: var(--ink); border-bottom-color: var(--seal); }
.footer-credit { max-width: 560px; }
.footer-links { display: flex; gap: 13px; flex-wrap: wrap; justify-content: flex-end; }

.theme-dialog { max-width: 520px; }
.theme-art {
  position: relative;
  min-height: 190px;
  margin: 20px 0 16px;
  border: 1px solid var(--edge);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 53% 42%, rgba(255,244,197,.66), transparent 26%),
    linear-gradient(180deg, #e6e9da 0%, #d7ddcf 54%, #d5cbb9 100%);
  box-shadow: inset 0 0 0 5px rgba(74,79,64,.05);
}
.theme-art::before,
.theme-art::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -26px;
  height: 80px;
  border-radius: 50%;
  border-top: 1px solid rgba(77,70,59,.18);
  background: rgba(208,194,168,.45);
  transform: rotate(-2deg);
}
.theme-art::after {
  bottom: -48px;
  left: 15%;
  right: -18%;
  transform: rotate(3deg);
  background: rgba(197,179,151,.34);
}
.theme-art span {
  position: relative;
  z-index: 2;
  font-family: "Songti SC", "Noto Serif CJK SC", serif;
  font-size: 82px;
  color: rgba(37,42,34,.74);
  text-shadow: 0 1px rgba(255,255,255,.75);
}
.theme-art i {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(166,60,45,.55);
  box-shadow: -54px 28px 0 rgba(166,60,45,.24), 68px 18px 0 rgba(166,60,45,.22), 98px -24px 0 rgba(166,60,45,.18);
}
.theme-credit { margin: 4px 0 7px; font-size: 14px; }
.theme-note { color: var(--ink-soft); line-height: 1.55; font-size: 12px; margin: 0 0 18px; }
.theme-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.theme-controls .primary-button { min-height: 44px; padding: 10px 14px; }
.theme-progress {
  width: 100%;
  accent-color: var(--seal);
}
.theme-time {
  min-width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 11px;
}

.legal-body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.55), transparent 24%),
    linear-gradient(180deg, #dfe7eb 0%, #d6dee4 100%);
  color: var(--ink);
}
.legal-shell {
  width: min(92vw, 820px);
  margin: 34px auto 52px;
}
.legal-card {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(251,248,242,.99), rgba(242,236,225,.99));
  box-shadow: var(--stack-shadow), inset 0 1px 0 rgba(255,255,255,.85);
  padding: 30px clamp(20px,5vw,46px) 36px;
}
.legal-card h1 { font-size: clamp(34px,7vw,52px); margin: 8px 0 12px; letter-spacing: -.035em; }
.legal-card h2 { margin: 30px 0 10px; font-size: 20px; }
.legal-card p, .legal-card li { color: #4d4841; line-height: 1.7; font-size: 14px; }
.legal-card ul { padding-left: 20px; }
.legal-kicker { font-size: 10px; color: var(--seal); font-weight: 800; letter-spacing: .2em; }
.legal-meta { color: var(--ink-soft); font-size: 12px; margin-bottom: 24px; }
.legal-card a { color: var(--ink); text-underline-offset: 3px; }
.legal-back { display: inline-block; margin-bottom: 18px; font-size: 12px; text-decoration: none; }
.legal-footer { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .device-stations { grid-template-rows: none; }
  .station-theme { grid-column: 1 / -1; min-height: 102px; }
  .site-footer { flex-direction: column; align-items: stretch; }
  .footer-links { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .theme-controls { grid-template-columns: 1fr auto; }
  .theme-controls .primary-button { grid-column: 1 / -1; }
  .theme-art { min-height: 160px; }
  .site-footer { padding-inline: 12px; }
}
@media (max-width: 370px) {
  .station-theme { grid-column: auto; }
}