@font-face {
  font-family: "Zen Kaku Gothic Game";
  src: url("./assets/fonts/ZenKakuGothicNew-Game.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: var(--font-ui);
  background: #0b0e18;
  color: #fff9e8;
  --ink: #171925;
  --night: #151827;
  --red: #ff5838;
  --red-dark: #b82f20;
  --gold: #ffc43d;
  --gold-dark: #a76b0d;
  --mint: #45e0bd;
  --rice: #fff9e8;
  --muted: #aeb2c5;
  --font-ui: "Zen Kaku Gothic Game", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", system-ui, sans-serif;
  --font-display: "Zen Kaku Gothic Game", "Avenir Next", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body { display: grid; place-items: center; background: radial-gradient(circle at 50% 4%, rgba(84,96,153,.43), transparent 34%), linear-gradient(145deg,#080a12 0%,#171b2b 55%,#080a12 100%); }
button { font: inherit; -webkit-tap-highlight-color: transparent; }

/* 盤面は画面の高さでも決まるため、100vw と盤面幅は横長の画面で大きく食い違う。
   盤面の中の文字は vw ではなくこの変数を基準にすること（vw だと横向きで文字だけ巨大になる）。 */
#game-shell { --shell-w: min(100vw, 480px, calc(100dvh * 9 / 16)); position: relative; width: var(--shell-w); aspect-ratio: 9 / 16; overflow: hidden; background: var(--night); isolation: isolate; box-shadow: 0 34px 100px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.09); }
#game { display: block; width: 100%; height: 100%; }
#hud[hidden], .panel[hidden], .unlock-toast[hidden], .daily-reward[hidden], .result-stars[hidden], .drop-hint[hidden], .onigiri-speech[hidden], .rare-omen[hidden] { display: none; }
#theme-button[hidden] { display: none; }

#hud { position: absolute; inset: max(15px, env(safe-area-inset-top)) 15px auto; z-index: 3; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 9px; pointer-events: none; }
#hud > p:not(.goal):not(.combo-badge):not(.omamori-badge) { min-width: 75px; margin: 0; padding: 8px 10px 7px; border: 1px solid rgba(255,255,255,.62); border-radius: 15px; background: rgba(255,249,232,.9); color: #735f51; box-shadow: 0 5px 0 rgba(61,45,33,.18), 0 10px 24px rgba(34,24,17,.12); font-size: .64rem; font-weight: 950; letter-spacing: .12em; }
#hud p span, #hud p strong { display: block; }
#hud p strong { margin-top: 1px; color: var(--ink); font-family: var(--font-display); font-size: 1.75rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.score-bump { animation: score-bump .28s cubic-bezier(.2,1.7,.4,1); }
#sound-button { justify-self: end; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.76); border-bottom: 4px solid rgba(62,42,30,.26); border-radius: 16px; background: rgba(255,249,232,.92); color: var(--ink); font-size: 1.15rem; font-weight: 950; pointer-events: auto; cursor: pointer; box-shadow: 0 8px 20px rgba(31,22,17,.14); }
#sound-button[aria-pressed="false"] { color: #9c8c81; text-decoration: line-through; }
#hud .goal { grid-column: 1 / -1; justify-self: center; margin: 3px 0 0; padding: 7px 14px; border: 1px solid rgba(255,255,255,.76); border-radius: 999px; background: rgba(26,29,43,.82); color: #fff; box-shadow: 0 6px 20px rgba(21,24,39,.18); font-size: .75rem; font-weight: 900; letter-spacing: .03em; backdrop-filter: blur(8px); }
#hud .combo-badge, #hud .omamori-badge { position: absolute; top: 111px; margin: 0; padding: 8px 13px; border: 2px solid rgba(255,255,255,.62); border-radius: 999px; font-size: .72rem; font-weight: 950; letter-spacing: .06em; box-shadow: 0 6px 20px rgba(22,18,14,.18); animation: badge-pop .24s cubic-bezier(.2,1.5,.5,1); }
#hud .combo-badge { left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; }
#hud .omamori-badge { right: 0; background: var(--mint); color: #10261f; }
#hud .combo-badge[hidden], #hud .omamori-badge[hidden] { display: none; }

.drop-hint { position: absolute; z-index: 3; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); margin: 0; padding: 9px 15px 10px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(21,24,39,.86); color: rgba(255,255,255,.82); font-size: .7rem; font-weight: 950; letter-spacing: .12em; transform: translateX(-50%); animation: hint-pulse 1.35s ease-in-out infinite; pointer-events: none; backdrop-filter: blur(8px); }
.drop-hint span { color: var(--gold); }
.onigiri-speech { position:absolute;z-index:5;left:14px;top:clamp(116px,24%,154px);max-width:112px;margin:0;padding:7px 11px;border:2px solid #5a713d;border-radius:17px 17px 17px 4px;background:#fff7d7;color:#493b27;font-size:.78rem;font-weight:950;line-height:1.2;text-align:center;box-shadow:0 5px 0 rgba(62,74,37,.25),0 10px 24px rgba(59,49,25,.16);pointer-events:none;animation:speech-pop .24s cubic-bezier(.2,1.4,.4,1);}
.onigiri-speech[data-side="right"]{right:14px;left:auto;border-radius:17px 17px 4px 17px}
.onigiri-speech[data-tone="oops"]{border-color:#a54b3c;color:#8f3027;transform:rotate(-2deg)}
.onigiri-speech[data-tone="joy"]{border-color:#d59a27;color:#8a5711}
.rare-omen { position:absolute;z-index:7;left:50%;top:clamp(136px,24%,166px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;width:min(286px,calc(100% - 74px));padding:8px 11px;border:3px solid #9a6920;border-bottom:5px solid #60451c;border-radius:10px;background:linear-gradient(105deg,#ffe9a2,#fff8d2,#f0c664);color:#70481a;text-align:center;translate:-50% 0;box-shadow:0 14px 34px rgba(70,49,18,.26),inset 0 0 0 2px rgba(255,255,255,.7);pointer-events:none;animation:rare-omen-in .42s cubic-bezier(.15,1.4,.4,1);}
.rare-omen>span{color:#d08b18;font-size:1.2rem;animation:rare-spark .5s ease-in-out infinite alternate}
.rare-omen small,.rare-omen strong{display:block;grid-column:2}
.rare-omen small{font-size:.62rem;letter-spacing:.08em}
.rare-omen strong{font-size:.88rem;line-height:1.3}

.panel { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(18px, 3.5vh) 18px max(18px, 3.5vh); text-align: center; color: var(--rice); background: radial-gradient(circle at 78% 9%, rgba(255,196,61,.25), transparent 25%), radial-gradient(circle at 10% 52%, rgba(69,224,189,.12), transparent 30%), linear-gradient(152deg,#24283b 0%,#141724 52%,#0d101a 100%); }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .13; background-image: linear-gradient(45deg, transparent 46%, rgba(255,255,255,.35) 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(255,255,255,.25) 47% 53%, transparent 54%); background-size: 42px 42px; mask-image: linear-gradient(to bottom,#000,transparent 62%); }

.op-panel { justify-content:flex-start;padding:max(20px,env(safe-area-inset-top)) 19px max(18px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.7),transparent 28%),linear-gradient(180deg,#b8d57a 0%,#e9d590 67%,#d9ba6b 100%);color:#342f23; }
.op-panel::before { opacity:.55;background-image:radial-gradient(circle,rgba(255,255,255,.58) 0 2px,transparent 2.5px),linear-gradient(90deg,transparent 49%,rgba(80,103,49,.08) 50%,transparent 51%);background-size:27px 27px,54px 54px;mask-image:linear-gradient(#000,rgba(0,0,0,.3)); }
.op-live-content { display:flex;flex-direction:column;align-items:center;width:100%;height:100%; }
.op-poster { position:absolute;inset:0;z-index:1;overflow:hidden;background:#fff6d9; }
.op-poster>img { display:block;width:100%;height:100%;object-fit:cover;object-position:top center; }
.op-poster button { position:absolute;z-index:2;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent; }
/* プラットフォームのミュートと同じ絵に見えないよう、ポスターもHUDと同じ♪に揃える。
   スピーカーの絵は画像から消してあるので、この丸ボタンが唯一の音の操作になる。 */
#op-poster-sound { top:1.35%;right:13.67%;display:grid;place-items:center;width:10%;aspect-ratio:1;padding:0;border:2px solid #355431;border-radius:50%;background:#fff5d5;color:#355431;font-size:calc(var(--shell-w) * 3 / 100);font-weight:900;line-height:1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
#op-poster-sound::before { content:"\266A"; }
/* 斜線は♪を潰してしまうので、HUDの音符ボタンと同じ「薄い色＋打ち消し線」で揃える */
#op-poster-sound[aria-pressed="false"] { color:#9c8c81; }
#op-poster-sound[aria-pressed="false"]::before { text-decoration:line-through; }
#op-poster-language { top:1.35%;right:.4%;display:grid;place-items:center;width:10%;aspect-ratio:1;padding:0;border:2px solid #355431;border-radius:50%;background:#fff5d5;color:#355431;font-size:calc(var(--shell-w) * 2.2 / 100);font-weight:900;white-space:nowrap;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
#op-poster-start { left:7.2%;right:7.2%;top:77.05%;height:10.8%;border:0;border-radius:13% / 38%;background:transparent; }
.op-poster button:focus-visible { outline:4px solid #f4b13a;outline-offset:3px; }
html[lang="ja"] .op-panel { padding:0; }
html[lang="ja"] .op-panel::before,html[lang="ja"] .op-live-content { display:none; }
/* 英語も同じ絵柄のポスターを使う。日本語の文字を抜いた版を背景に敷き、
   空いた帯に英文をHTMLで重ねる（画像%×1.0502=枠%。画像は上端基準のため）。 */
html[lang="en"] .op-poster { background:#fff6d9 url("./assets/onigiri-start-en.webp") top center/cover no-repeat; }
html[lang="en"] .op-poster>img,html[lang="en"] #op-poster-start { display:none; }
html[lang="en"] #op-poster-language { pointer-events:auto; }
html[lang="en"] .op-panel { padding:0; }
html[lang="en"] .op-panel::before { display:none; }
html[lang="en"] .op-live-content { position:absolute;inset:0;z-index:2;display:block;pointer-events:none; }
html[lang="en"] #op-eyebrow,html[lang="en"] .op-logo,html[lang="en"] .op-play-preview,html[lang="en"] #op-start-hint { display:none; }
html[lang="en"] .op-title-lockup { position:absolute;left:5%;right:5%;top:33.9%;height:11.5%;display:grid;place-content:center;margin:0; }
html[lang="en"] #game-shell .op-panel h1 { font-size:calc(var(--shell-w) * 7.9 / 100);line-height:1.04; }
html[lang="en"] .op-rule { position:absolute;left:6%;right:6%;top:74.9%;max-width:none;margin:0;font-size:calc(var(--shell-w) * 3.1 / 100);line-height:1.38; }
html[lang="en"] .op-start { position:absolute;left:7.2%;right:7.2%;top:81.9%;justify-content:center;width:auto;min-height:0;height:6.2%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:auto; }
html[lang="en"] .op-start span { color:#fffaf0;font-size:calc(var(--shell-w) * 5.2 / 100);letter-spacing:.02em;text-shadow:0 2px 3px rgba(96,26,18,.45); }
html[lang="en"] .op-foot { position:absolute;left:5%;right:5%;top:92.4%;margin:0;font-size:calc(var(--shell-w) * 2.6 / 100); }
.op-eyebrow { margin:0;color:#8f3028;font-size:.68rem;font-weight:900;letter-spacing:.18em; }
.op-title-lockup { width:100%;margin-top:4px; }
.op-logo { margin:0 0 3px;color:#59733e;font-size:.72rem;font-weight:900;letter-spacing:.22em; }
.op-panel h1 { margin:0;color:#2f4d2d;font-family:var(--font-display);font-size:calc(var(--shell-w) * 9.8 / 100);font-weight:900;line-height:1.06;letter-spacing:-.055em;text-shadow:0 2px 0 #fff8d8; }
.op-panel h1 span,.op-panel h1 strong { display:block; }
.op-panel h1 strong { color:#9d3329;font-size:1.08em; }
.op-play-preview { position:relative;width:min(100%,350px);margin:8px auto 7px;overflow:hidden;border:3px solid #4f6b39;border-bottom-width:7px;border-radius:18px;background:linear-gradient(180deg,#fff6cf,#f2dda3);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 12px 30px rgba(70,59,29,.2); }
#op-demo { display:block;width:100%;height:auto;aspect-ratio:18/17; }
.op-tap-cue { position:absolute;top:12px;right:12px;display:grid;place-items:center;width:54px;height:54px;margin:0;border:2px solid #fff3ca;border-radius:50%;background:#9f382e;color:#fff9e4;font-size:.7rem;font-weight:900;letter-spacing:.08em;box-shadow:0 4px 0 #6e271f;animation:op-tap 1.35s ease-in-out infinite; }
.op-tap-cue span { display:block;font-size:1rem;line-height:.8; }
.op-rule { max-width:340px;margin:0;color:#4f432f;font-size:.9rem;font-weight:700;line-height:1.55;letter-spacing:.01em; }
.op-start { display:flex;align-items:center;justify-content:space-between;width:min(100%,340px);min-height:62px;margin-top:11px;padding:10px 15px 10px 20px;border:2px solid #a53b2e;border-bottom:7px solid #74271f;border-radius:13px;background:linear-gradient(180deg,#df604b,#bd3c2f);color:#fffaf0;box-shadow:0 10px 24px rgba(118,44,28,.22);cursor:pointer; }
.op-start span { font-size:1.06rem;font-weight:900;letter-spacing:.03em; }
.op-start small { padding:6px 9px;border-radius:999px;background:rgba(89,21,16,.24);font-size:.62rem;font-weight:900;letter-spacing:.08em; }
.op-foot { margin:9px 0 0;color:#65553a;font-size:.7rem;font-weight:700;letter-spacing:.03em; }
.op-panel.is-leaving { animation:op-leave .36s cubic-bezier(.55,0,.8,.2) forwards;pointer-events:none; }

.home-panel { justify-content: flex-start; padding-top: max(14px, env(safe-area-inset-top)); }
.home-meta { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; }
.home-meta p { display: flex; align-items: center; gap: 5px; min-height: 42px; margin: 0; padding: 6px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.075); color: #d7d9e3; font-family: var(--font-display); font-size: .8rem; font-weight: 950; backdrop-filter: blur(7px); }
.home-meta p:first-child span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--gold); color: #4b3100; font-size: .68rem; box-shadow: inset 0 -2px 0 rgba(99,57,0,.2); }
.home-meta strong { color: #fff; font-size: 1rem; }
.home-meta small { font-size: .72rem; }
#theme-button, #language-button { min-width: 48px; min-height: 40px; padding: 0 9px; border: 1px solid rgba(255,255,255,.18); border-bottom: 3px solid rgba(0,0,0,.35); border-radius: 13px; background: #30354b; color: #fff; font-size: .68rem; font-weight: 950; cursor: pointer; }
#theme-button { margin-left: auto; min-width: 64px; color: var(--gold); }
#theme-button[hidden] + #language-button { margin-left: auto; }

.brand-lockup { display: grid; grid-template-columns: 89px 1fr; align-items: center; width: 100%; margin: 8px 0 1px; text-align: left; }
#brand-mascot { display: block; width: 89px; height: 78px; filter: drop-shadow(0 9px 8px rgba(0,0,0,.25)); }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: .67rem; font-weight: 950; letter-spacing: .15em; }
h1 { margin: 0; color: var(--rice); font-family: var(--font-display); font-size: clamp(2.7rem, calc(var(--shell-w) * 12 / 100), 4rem); font-weight:900; line-height: .82; letter-spacing: -.045em; text-shadow: 0 3px 0 var(--red-dark), 0 8px 22px rgba(0,0,0,.24); }
h1 span { display: block; }
h2 { margin: 4px 0 0; color: var(--rice); font-family: var(--font-display); font-size: clamp(2.6rem, calc(var(--shell-w) * 12 / 100), 4.4rem); font-weight:900; line-height: .92; letter-spacing: -.04em; text-shadow: 0 3px 0 var(--red-dark), 0 12px 30px rgba(0,0,0,.3); }
#game-over-title { width: 100%; max-width: 100%; font-size: clamp(2rem, calc(var(--shell-w) * 9.5 / 100), 3.15rem); line-height: .95; letter-spacing: -.035em; white-space: nowrap; }
.prompt { align-self: stretch; margin: 9px 0 11px; color: #dadce6; font-family: var(--font-display); font-size: 1rem; font-weight: 900; letter-spacing: .02em; text-align: left; }

.mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; width: 100%; }
.mode-button { position: relative; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 5px 7px; min-height: 84px; padding: 12px 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-bottom: 5px solid rgba(0,0,0,.34); border-radius: 18px; background: linear-gradient(150deg,#353a50,#262a3d); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.2); text-align: left; cursor: pointer; }
.mode-button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,rgba(255,255,255,.16),transparent 34%); pointer-events: none; }
.mode-button.primary { grid-column: 1 / -1; min-height: 108px; padding: 15px 17px; border-color: #ff8d77; border-bottom-color: var(--red-dark); background: linear-gradient(145deg,#ff7855 0%,var(--red) 58%,#e33c29 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px rgba(255,63,35,.2); }
.mode-button.accent { grid-column: 1 / -1; border-color: #ffe087; border-bottom-color: var(--gold-dark); background: linear-gradient(145deg,#ffd967,#f6ad27); color: #3b2705; }
.mode-button.dark { border-color: #6af1d2; border-bottom-color: #16735f; background: linear-gradient(145deg,#3be0bc,#20a88e); color: #0d2a23; }
.mode-title { grid-column:1 / -1;display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--font-display);font-weight:900;white-space:nowrap; }
.mode-title b { overflow:hidden;font-size:1.2rem;line-height:1.1;text-overflow:ellipsis; }
.mode-title em { display:grid;flex:0 0 28px;place-items:center;width:28px;height:28px;border:2px solid currentColor;border-radius:50%;font-size:.7rem;font-style:normal;line-height:1; }
.mode-button.primary .mode-title b { font-size:1.95rem; }
.mode-button > strong { grid-column:1;font-family:var(--font-display);font-size:.9rem;line-height:1.25; }
.mode-button.primary > strong { font-size: 1.08rem; }
.mode-button > small { grid-column:2;grid-row:2;align-self:center;font-family:var(--font-display);font-size:.7rem;font-weight:950;text-align:right;opacity:.92;white-space:nowrap; }
.mode-button.primary > small { grid-row:1; }
.mode-button.primary > small { margin-right: 48px; padding: 5px 8px; border-radius: 999px; background: rgba(86,15,7,.22); }
.mode-button > i { position: absolute; right: 16px; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.76); border-radius: 50%; background: #fff; color: var(--red); font-size: .9rem; font-style: normal; transform: translateY(-50%); box-shadow: 0 5px 0 rgba(93,18,8,.28); }

.home-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; margin-top: 10px; }
.home-nav button { display: flex; align-items: center; justify-content: space-between; min-height:54px; padding:9px 13px; border: 1px solid rgba(255,255,255,.17); border-bottom: 4px solid rgba(0,0,0,.33); border-radius: 16px; background: #2c3044; color: #fff; font-family:var(--font-display); font-size: .92rem; font-weight: 950; cursor: pointer; }
.home-nav strong { color: var(--gold); font-size: .78rem; }
.tales-button { display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;margin-top:8px;padding:7px 13px;border:2px solid #775227;border-bottom:5px solid #4e361f;border-radius:9px;background:linear-gradient(90deg,#f6d477,#fff4c2,#edc262);color:#51361f;font-family:var(--font-display);text-align:left;box-shadow:inset 0 0 0 2px rgba(255,255,255,.44);cursor:pointer;}
.tales-button>span,.tales-button small,.tales-button strong{display:block}
.tales-button>b span{display:inline}
.tales-button small{color:#9f342a;font-size:.7rem;font-weight:950;letter-spacing:.09em}
.tales-button strong{margin-top:1px;font-size:.98rem}
.tales-button>b{padding:5px 9px;border-radius:999px;background:#6b803f;color:#fff7d6;font-size:.72rem;white-space:nowrap}
.weekly-line { display:none; }
.weekly-line strong { color: #fff; font-size: .72rem; }
.daily-reward { margin: 6px 0 0; padding: 5px 11px; border: 1px solid rgba(255,226,132,.38); border-radius: 999px; background: rgba(255,196,61,.16); color: #ffe08a; font-size: .68rem; font-weight: 950; animation: badge-pop .3s ease-out; }

.mode-button:active, #restart-button:active, .home-nav button:active, .dialog-footer button:active, .stage-card:active, #theme-button:active, #language-button:active, #sound-button:active { transform: translateY(3px); border-bottom-width: 1px; }
button:focus-visible { outline: 4px solid rgba(69,224,189,.72); outline-offset: 3px; }

.panel.compact { justify-content: center; background: rgba(15,17,27,.88); backdrop-filter: blur(12px); }
.panel.compact::before { opacity: .08; }
.result-stars { margin: 16px 0 -16px; color: var(--gold); font-size: 2.2rem; letter-spacing: .12em; text-shadow: 0 3px 0 var(--gold-dark), 0 7px 20px rgba(255,196,61,.22); }
.result-stars .empty { color: rgba(255,255,255,.16); text-shadow: none; }
.result-row { display: grid; grid-template-columns: repeat(2,minmax(100px,1fr)); gap: 10px; width: min(305px,100%); margin: 30px 0 13px; }
.result-row p { margin: 0; padding: 14px 9px; border: 1px solid rgba(255,255,255,.17); border-bottom: 4px solid rgba(0,0,0,.34); border-radius: 19px; background: linear-gradient(150deg,#30354b,#24283a); }
.result-row span, .result-row strong { display: block; }
.result-row span { color: #bfc2d0; font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.result-row strong { margin-top: 3px; color: #fff; font-family: var(--font-display); font-size: 2.55rem; font-weight:900;font-variant-numeric:tabular-nums; }
.run-insight { min-height: 48px; margin: 0 0 7px; color: #e2e3e8; font-size: .85rem; font-weight: 850; line-height: 1.5; }
.run-insight strong { color: var(--gold); }
.run-reward { min-height: 20px; margin: 0 0 10px; color: var(--gold); font-size: .82rem; font-weight: 950; }
#restart-button, #tutorial-start { min-width: 210px; min-height: 54px; padding: 12px 29px; border: 1px solid #ff8c76; border-bottom: 6px solid var(--red-dark); border-radius: 18px; background: linear-gradient(145deg,#ff7554,var(--red)); color: #fff; font-weight: 950; letter-spacing: .06em; box-shadow: 0 10px 24px rgba(255,67,39,.18); cursor: pointer; }
.share-button { margin-top: 9px; min-width: 160px; min-height: 44px; padding: 8px 18px; border: 1px solid rgba(255,255,255,.18); border-bottom: 3px solid rgba(0,0,0,.34); border-radius: 15px; background: #30354b; color: #fff; font-size: .74rem; font-weight: 950; cursor: pointer; }
.text-button { margin-top: 7px; min-height: 40px; padding: 8px 14px; border: 0; background: transparent; color: #c2c4cf; font-size: .78rem; font-weight: 850; text-decoration: underline; cursor: pointer; }
.retry-hint { margin: 4px 0 0; color: #9296aa; font-size: .68rem; font-weight: 750; }

.unlock-toast { position: absolute; z-index: 8; top: 23%; left: 50%; display: grid; justify-items: center; min-width: 252px; padding: 4px 21px 17px; border: 2px solid #ffe28f; border-bottom: 6px solid var(--gold-dark); border-radius: 24px; background: linear-gradient(155deg,#fff8d9,#ffd86a); color: #4a3109; text-align: center; box-shadow: 0 20px 60px rgba(16,11,4,.4), 0 0 38px rgba(255,196,61,.26); transform: translateX(-50%); animation: toast-in .35s cubic-bezier(.2,1.4,.4,1); }
#unlock-icon { width: 72px; height: 63px; margin-top: -25px; filter: drop-shadow(0 8px 5px rgba(85,53,6,.2)); }
.unlock-toast small { color: #ad570d; font-size: .64rem; font-weight: 950; letter-spacing: .14em; }
.unlock-toast strong { margin: 3px 0; font-size: 1.18rem; }
.unlock-toast span { font-size: .72rem; font-weight: 800; }

.game-dialog, .tutorial-dialog { width: min(calc(100% - 22px), 440px); max-height: min(calc(100% - 26px), 780px); margin: auto; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-bottom: 6px solid #080a11; border-radius: 24px; background: #202437; color: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.68); }
.game-dialog::backdrop, .tutorial-dialog::backdrop { background: rgba(6,8,14,.78); backdrop-filter: blur(5px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 17px 8px 20px; }
.dialog-head p { margin: 0 0 2px; color: var(--gold); font-size: .65rem; font-weight: 950; letter-spacing: .16em; }
.dialog-head h2 { margin: 0; color: #fff; font-family: inherit; font-size: 1.4rem; text-shadow: none; }
.dialog-close { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-bottom: 3px solid rgba(0,0,0,.3); border-radius: 15px; background: #31364d; color: #fff; font-size: 1.35rem; cursor: pointer; }
.dialog-copy { margin: 0; padding: 0 20px 11px; color: #b7bac9; font-size: .77rem; font-weight: 750; }

.collection-meter { height: 8px; margin: 0 20px 12px; overflow: hidden; border-radius: 99px; background: #111421; }
.collection-meter span { display: block; width: 3.125%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),var(--gold)); box-shadow: 0 0 15px rgba(255,196,61,.35); transition: width .3s ease; }
.collection-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-height: min(555px,calc(100dvh - 205px)); padding: 0 13px 13px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.collection-card { position: relative; min-height: 137px; padding: 7px 5px 9px; border: 1px solid rgba(255,255,255,.14); border-bottom: 4px solid rgba(0,0,0,.3); border-radius: 16px; background: linear-gradient(150deg,#33384e,#292d41); text-align: center; }
.collection-card canvas { display: block; width: 74px; height: 65px; margin: 0 auto; filter: drop-shadow(0 6px 5px rgba(0,0,0,.22)); }
.collection-card h3 { margin: 0; color: #fff; font-size: .7rem; line-height: 1.2; }
.collection-card p { margin: 2px 0 0; color: #aeb2c3; font-size: .58rem; font-weight: 800; letter-spacing: .04em; }
.collection-card.locked canvas { filter: grayscale(1); opacity: .17; }
.collection-card.locked h3 { color: #767b91; }
.rarity { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: #4b5064; color: #d9dbe4; font-size: .5rem; font-weight: 950; letter-spacing: .07em; }
.rarity.rare { background: #174f46; color: #6af1d2; }
.rarity.epic { background: #55316c; color: #e9b7ff; }
.rarity.legendary { background: #694a10; color: #ffe08a; box-shadow: 0 0 12px rgba(255,196,61,.18); }
.dialog-footer { position: sticky; bottom: 0; padding: 9px 14px 14px; background: linear-gradient(transparent,#202437 20%); }
.dialog-footer button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 49px; padding: 9px 15px; border: 1px solid #ffe18b; border-bottom: 5px solid var(--gold-dark); border-radius: 15px; background: linear-gradient(145deg,#ffd862,#f4ac26); color: #3e2804; font-size: .76rem; font-weight: 950; cursor: pointer; }
.dialog-footer button:disabled { border-color: #4c5060; background: #393d4f; color: #85899b; cursor: not-allowed; }

.journey-scroll { max-height: min(630px,calc(100dvh - 145px)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.stage-grid, .mission-list { display: grid; gap: 9px; max-height: min(610px,calc(100dvh - 145px)); padding: 0 14px 17px; overflow-y: auto; touch-action: pan-y; }
#journey-dialog .stage-grid { max-height: none; overflow: visible; }
.stage-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 82px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.16); border-bottom: 5px solid rgba(0,0,0,.34); border-radius: 18px; background: linear-gradient(150deg,#33384f,#292d40); color: #fff; text-align: left; cursor: pointer; }
.stage-card .stage-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: #444a61; font-size: 1.42rem; }
.stage-card h3 { margin: 0; font-size: .84rem; }
.stage-card p { margin: 2px 0 0; color: #b4b7c6; font-size: .67rem; font-weight: 750; }
.stage-card small { display: block; margin-top: 5px; color: #ffe18b; font-size: .58rem; font-weight: 900; line-height: 1.25; }
.stage-card .stage-stars { color: var(--gold); font-size: .78rem; white-space: nowrap; }
.stage-card.locked { opacity: .45; cursor: not-allowed; }
.stage-card.locked .stage-stars { color: #767b8d; }

.mission-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 13px 14px; border: 1px solid rgba(255,255,255,.14); border-bottom: 4px solid rgba(0,0,0,.28); border-radius: 17px; background: linear-gradient(150deg,#33384f,#292d40); }
.mission-card h3 { margin: 0; color: #fff; font-size: .81rem; }
.mission-card p { margin: 2px 0 0; color: var(--gold); font-size: .67rem; font-weight: 850; }
.mission-card button { grid-column: 2; grid-row: 1 / 3; min-width: 78px; min-height: 40px; padding: 8px 9px; border: 1px solid #ff856d; border-bottom: 4px solid var(--red-dark); border-radius: 13px; background: var(--red); color: #fff; font-size: .68rem; font-weight: 950; cursor: pointer; }
.mission-card button:disabled { border-color: #4c5061; background: #3a3e50; color: #898d9e; cursor: default; }
.mission-progress { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: #141724; }
.mission-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--red),var(--gold)); }

.tutorial-dialog { padding: 25px 22px 23px; text-align: center; }
.tutorial-dialog h2 { margin-bottom: 20px; color: #fff; font-family: inherit; font-size: 1.58rem; text-shadow: none; }
.tutorial-dialog ol { display: grid; gap: 9px; margin: 0 0 20px; padding: 0; list-style: none; text-align: left; }
.tutorial-dialog li { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; background: #2d3247; }
.tutorial-dialog li > span { display: grid; flex: 0 0 auto; place-items: center; width: 35px; height: 35px; border-radius: 12px; background: var(--red); color: #fff; font-family: var(--font-display);font-weight:900; box-shadow: 0 4px 0 var(--red-dark); }
.tutorial-dialog p { display: grid; gap: 1px; margin: 0; }
.tutorial-dialog strong { color: #fff; font-size: .84rem; }
.tutorial-dialog small { color: #b4b7c7; font-size: .71rem; }

.tale-grid { display:grid;gap:9px;max-height:min(620px,calc(100dvh - 150px));padding:0 14px 16px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;}
.tale-card { display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:92px;padding:8px 10px;border:2px solid #6b7d47;border-bottom:5px solid #485b34;border-radius:9px;background:#fff3c5;color:#3d3424;text-align:left;cursor:pointer;}
.tale-card:disabled{opacity:.58;cursor:not-allowed}
.tale-card canvas{display:block;width:92px;height:58px;border:2px solid #8c733e;border-radius:6px;background:#ddcd8f}
.tale-card small,.tale-card strong,.tale-card span{display:block}
.tale-card small{color:#a13a2e;font-size:.57rem;font-weight:950;letter-spacing:.08em}
.tale-card strong{margin-top:3px;font-size:.79rem;line-height:1.25}
.tale-card span{color:#756142;font-size:.62rem;font-weight:800}
.tale-card>b{color:#9e342b;font-size:.62rem;white-space:nowrap}
.tale-unlock-dialog{width:min(calc(100% - 28px),420px);padding:18px 17px 20px;border:4px solid #58763e;border-bottom:8px solid #385128;border-radius:11px;background:linear-gradient(#fff4c8,#e8ce83);color:#3e3524;box-shadow:0 25px 80px rgba(42,37,20,.6);}
.tale-unlock-dialog::backdrop{background:rgba(53,47,27,.78);backdrop-filter:blur(5px)}
.tale-unlock-dialog .eyebrow{margin-bottom:9px;color:#b43c2f;text-align:center}
#tale-unlock-art{display:block;width:100%;height:auto;aspect-ratio:12/7;border:3px solid #6b7d47;border-radius:8px;background:#ddcd8f;box-shadow:inset 0 0 0 2px #fff0b8}
.tale-chapter{display:block;margin:12px 0 2px;color:#a23a2e;font-size:.65rem;font-weight:950;letter-spacing:.12em;text-align:center}
.tale-unlock-dialog h2{margin:0;color:#3f542e;font-family:var(--font-display);font-size:1.46rem;font-weight:900;line-height:1.3;letter-spacing:-.035em;text-shadow:none}
.tale-unlock-dialog .tale-body{display:block;margin:10px 4px 14px;color:#5f4c32;font-size:.86rem;font-weight:800;line-height:1.6;text-align:left}
#tale-unlock-close{width:100%;min-height:50px;padding:10px 16px;border:2px solid #b44a38;border-bottom:6px solid #7f2b22;border-radius:9px;background:linear-gradient(#dd6047,#bd3c2e);color:#fff8dd;font-weight:950;cursor:pointer}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes badge-pop { from { opacity: 0; transform: translateY(7px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
#hud .combo-badge { animation-name: combo-pop; }
@keyframes combo-pop { from { opacity: 0; transform: translateX(-50%) scale(.82); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%,18px) scale(.76) rotate(-2deg); } to { opacity: 1; transform: translate(-50%,0) scale(1) rotate(0); } }
@keyframes hint-pulse { 0%,100% { opacity: .72; transform: translateX(-50%) scale(.98); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } }
@keyframes score-bump { 0% { transform: scale(.78); color: var(--red); } 65% { transform: scale(1.22); color: var(--gold-dark); } 100% { transform: scale(1); } }
@keyframes speech-pop { from{opacity:0;translate:0 8px;scale:.78} to{opacity:1;translate:0 0;scale:1} }
@keyframes rare-omen-in { from{opacity:0;translate:-50% 8px;scale:.78} to{opacity:1;translate:-50% 0;scale:1} }
@keyframes rare-spark { to{transform:scale(1.35) rotate(18deg);filter:brightness(1.25)} }
@keyframes op-tap { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@keyframes op-leave { to{opacity:0;transform:scale(1.04)} }

@media (hover:hover) { .mode-button:hover, .home-nav button:hover, .stage-card:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); } }
@media (min-width: 481px) { #game-shell { border-radius: 28px; } }
/* 盤面は width:min(100vw,480px,100dvh*9/16) の 9:16 なので、画面が細いときも盤面は低くなる。
   高さ条件だけだと縦長スマホで圧縮が効かずホーム下端が切れるため、対応する幅条件も併記する
   （760px * 9/16 ≒ 427px）。 */
@media (max-height: 760px), (max-width: 427px) {
  .home-panel { padding-top: 9px; }
  .home-meta { min-height: 34px; }
  .home-meta p { min-height: 34px; padding-block: 4px; }
  #theme-button, #language-button { min-height: 36px; }
  .brand-lockup { grid-template-columns: 73px 1fr; margin: 3px 0 0; }
  #brand-mascot { width: 72px; height: 63px; }
  h1 { font-size: 2.55rem; }
  .eyebrow { font-size: .59rem; }
  .prompt { margin: 7px 0; font-size: .9rem; }
  .mode-grid { gap: 7px; }
  .mode-button { min-height:70px; padding:8px 10px; border-bottom-width:4px; }
  .mode-button.primary { min-height:86px; padding:10px 13px; }
  .mode-button.primary .mode-title b { font-size:1.58rem; }
  .mode-title b { font-size:1rem; }
  .mode-title em { flex-basis:24px;width:24px;height:24px;font-size:.62rem; }
  .mode-button > strong { font-size:.78rem; }
  .mode-button.primary > strong { font-size:.92rem; }
  .mode-button > small { font-size:.62rem; }
  .mode-button > i { width: 36px; height: 36px; right: 13px; }
  .home-nav { margin-top: 7px; gap: 7px; }
  .home-nav button { min-height:44px; padding-block:7px; font-size:.8rem; }
  .home-nav strong { font-size:.66rem; }
  .tales-button{min-height:42px;margin-top:6px;padding-block:5px}
  .tales-button small{font-size:.61rem}
  .tales-button strong{font-size:.84rem}
  .tales-button>b{font-size:.63rem}
  .weekly-line { margin-top: 4px; }
  .daily-reward { display:none !important; }
  .op-panel{padding-top:12px;padding-bottom:10px}
  .op-play-preview{width:min(100%,258px);margin-block:5px}
  .op-panel h1{font-size:1.9rem}
  .op-rule{font-size:.8rem;line-height:1.42}
  .op-start{min-height:53px;margin-top:7px}
  .op-foot{margin-top:6px;font-size:.63rem}
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* 昔ばなし絵巻版 — ONIGIRI TOWER WORLD の正式デザイン。 */
body[data-theme="storybook"] { background: radial-gradient(circle at 50% 12%,#f5e8ba 0%,#c9a95e 42%,#4c6739 100%); }
#game-shell[data-theme="storybook"] { --ink:#352f22;--night:#e9d797;--red:#d84935;--red-dark:#8d2b22;--gold:#e0a12c;--gold-dark:#946414;--mint:#779d43;--rice:#fff8dc;--muted:#745f40; font-family:var(--font-ui); background:#eadca8; box-shadow:0 34px 90px rgba(55,45,23,.48),0 0 0 5px #fff3c4,0 0 0 7px #5f7a3b; }
#game-shell[data-theme="storybook"] .panel { color:#352f22; background:radial-gradient(circle at 18% 17%,rgba(255,255,255,.54),transparent 25%),repeating-linear-gradient(8deg,rgba(105,83,34,.035) 0 1px,transparent 1px 9px),linear-gradient(180deg,#a9c66c 0%,#86ab58 38%,#f0dc9d 38.2%,#dfc17a 100%); }
#game-shell[data-theme="storybook"] .panel::before { opacity:.35; background-image:radial-gradient(circle,rgba(255,250,218,.62) 0 2px,transparent 2.5px),linear-gradient(90deg,transparent 48%,rgba(79,105,54,.13) 49% 51%,transparent 52%);background-size:27px 27px,58px 58px;mask-image:linear-gradient(to bottom,#000,transparent 72%); }
#game-shell[data-theme="storybook"] .op-panel { background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.7),transparent 28%),linear-gradient(180deg,#b8d57a 0%,#e9d590 67%,#d9ba6b 100%); }
#game-shell[data-theme="storybook"] .op-panel::before { opacity:.55;background-image:radial-gradient(circle,rgba(255,255,255,.58) 0 2px,transparent 2.5px),linear-gradient(90deg,transparent 49%,rgba(80,103,49,.08) 50%,transparent 51%);background-size:27px 27px,54px 54px;mask-image:linear-gradient(#000,rgba(0,0,0,.3)); }
#game-shell[data-theme="storybook"] .home-meta p { border:2px solid #54733d;border-bottom-width:4px;border-radius:9px;background:#fff4ca;color:#665334;box-shadow:0 4px 0 rgba(76,69,34,.2);backdrop-filter:none; }
#game-shell[data-theme="storybook"] .home-meta p:first-child span { background:#e0a12c;color:#503610; }
#game-shell[data-theme="storybook"] .home-meta strong { color:#362f20; }
#game-shell[data-theme="storybook"] #theme-button,#game-shell[data-theme="storybook"] #language-button { border:2px solid #4f7138;border-bottom:4px solid #365126;border-radius:9px;background:#fff4ca;color:#3e5d2d;box-shadow:none; }
#game-shell[data-theme="storybook"] .brand-lockup { margin-top:11px;padding:8px 11px 9px;border:3px solid #57783c;border-radius:8px;background:linear-gradient(90deg,#fff5cb,#f5e4ac);box-shadow:inset 8px 0 0 #d5aa55,inset -8px 0 0 #d5aa55,0 5px 0 rgba(73,72,38,.18); }
#game-shell[data-theme="storybook"] #brand-mascot { filter:drop-shadow(0 6px 2px rgba(84,60,25,.22)); }
#game-shell[data-theme="storybook"] .eyebrow { color:#a22f29;font-family:var(--font-ui);letter-spacing:.1em; }
#game-shell[data-theme="storybook"] h1 { color:#35562e;font-family:var(--font-display);font-size:calc(var(--shell-w) * 11 / 100);font-weight:900;line-height:.86;letter-spacing:-.065em;text-shadow:2px 2px 0 #fff7d8,4px 4px 0 #cf8f2b; }
#game-shell[data-theme="storybook"] .op-panel h1{font-size:calc(var(--shell-w) * 9.8 / 100);line-height:1.06;text-shadow:0 2px 0 #fff8d8}
#game-shell[data-theme="storybook"] .prompt { margin:11px 0 10px;padding:6px 11px;border-left:6px solid #b23b2e;background:rgba(255,247,210,.76);color:#4c3e28;font-weight:900;text-align:center; }
#game-shell[data-theme="storybook"] .mode-grid { gap:8px; }
#game-shell[data-theme="storybook"] .mode-button { border:3px solid #526f39;border-inline-width:8px;border-bottom-width:5px;border-radius:9px;background:linear-gradient(180deg,#fff8dc,#f2dfab);color:#3c3525;box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),0 5px 0 rgba(66,75,36,.24); }
#game-shell[data-theme="storybook"] .mode-button::after { background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(104,79,37,.035) 12px 13px); }
#game-shell[data-theme="storybook"] .mode-button.primary { border-color:#9f362a;border-inline-color:#d25a43;background:linear-gradient(180deg,#fff2c7 0%,#f7dca0 100%);color:#8f2f26;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 6px 0 rgba(96,53,31,.25); }
#game-shell[data-theme="storybook"] .mode-button.dark { border-color:#8b3b69;border-inline-color:#ca6c98;background:linear-gradient(180deg,#ffe5ec,#edb8ca);color:#612847; }
#game-shell[data-theme="storybook"] .mode-button.accent { border-color:#3c6081;border-inline-color:#6e99bd;background:linear-gradient(180deg,#eaf4f4,#bedde0);color:#294b66; }
#game-shell[data-theme="storybook"] .home-panel :is(.home-meta p,.prompt,.mode-button,.home-nav button,.tales-button) { font-family:var(--font-display); }
#game-shell[data-theme="storybook"] .mode-title { font-family:var(--font-display);font-weight:900;letter-spacing:-.025em; }
#game-shell[data-theme="storybook"] .mode-title b,#game-shell[data-theme="storybook"] .home-nav button>span,#game-shell[data-theme="storybook"] .tales-button strong { text-shadow:1px 1px 0 #fff8dc,2px 2px 0 rgba(121,86,35,.22); }
#game-shell[data-theme="storybook"] .mode-button.primary .mode-title b { color:#a3352b;text-shadow:1px 1px 0 #fff8dc,3px 3px 0 #d59a35; }
#game-shell[data-theme="storybook"] .mode-button.dark .mode-title b { text-shadow:1px 1px 0 #fff8dc,2px 2px 0 rgba(130,51,90,.2); }
#game-shell[data-theme="storybook"] .mode-button.accent .mode-title b { text-shadow:1px 1px 0 #fff8dc,2px 2px 0 rgba(52,91,122,.2); }
#game-shell[data-theme="storybook"] .mode-title em { background:rgba(82,111,57,.1); }
#game-shell[data-theme="storybook"] .mode-button:not(.primary) > small { font-size:.64rem; }
#game-shell[data-theme="storybook"] .mode-button.primary > small { background:rgba(151,54,41,.12); }
#game-shell[data-theme="storybook"] .mode-button > i { border-color:#9f362a;background:#c34432;color:#fff;box-shadow:0 4px 0 #7f2b22; }
#game-shell[data-theme="storybook"] .home-nav button { border:2px solid #5a713d;border-bottom:4px solid #3f552d;border-radius:8px;background:#fff4ca;color:#3f4e2f; }
#game-shell[data-theme="storybook"] .tales-button{border-color:#775227;border-bottom-color:#4e361f;background:linear-gradient(90deg,#f2ca67,#fff3b8,#e8b955);}
#game-shell[data-theme="storybook"] .home-nav strong,#game-shell[data-theme="storybook"] .weekly-line strong { color:#9b3028; }
#game-shell[data-theme="storybook"] .weekly-line { color:#5a4a33; }
#game-shell[data-theme="storybook"] .daily-reward { border-color:#a56d1c;background:#fff0b7;color:#7c4f12; }
#game-shell[data-theme="storybook"] #hud > p:not(.goal):not(.combo-badge):not(.omamori-badge),#game-shell[data-theme="storybook"] #sound-button { border:2px solid #55723c;border-bottom:4px solid #365028;border-radius:9px;background:#fff4ca;color:#665334;box-shadow:0 4px 0 rgba(61,57,28,.2); }
#game-shell[data-theme="storybook"] #hud .goal { border:2px solid #fff2c8;background:#54733d;color:#fff9dc;backdrop-filter:none; }
#game-shell[data-theme="storybook"] .drop-hint { border:2px solid #fff2c8;background:#4f7138;color:#fff9df;backdrop-filter:none; }
#game-shell[data-theme="storybook"] .drop-hint span { color:#ffd16c; }
#game-shell[data-theme="storybook"] .panel.compact { background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.52),transparent 28%),linear-gradient(180deg,#a9c56c 0%,#e7ce88 100%);backdrop-filter:none; }
#game-shell[data-theme="storybook"] h2 { color:#8e3028;font-family:var(--font-display);font-weight:900;text-shadow:2px 2px 0 #fff5cb,4px 4px 0 #b9852d; }
#game-shell[data-theme="storybook"] #game-over-title { padding-inline:4px;font-family:var(--font-display);font-size:calc(var(--shell-w) * 9.5 / 100);font-weight:900;letter-spacing:-.055em; }
#game-shell[data-theme="storybook"] .result-row p { border:3px solid #55733d;border-radius:8px;background:#fff4ca; }
#game-shell[data-theme="storybook"] .result-row span,#game-shell[data-theme="storybook"] .run-insight,#game-shell[data-theme="storybook"] .retry-hint { color:#665334; }
#game-shell[data-theme="storybook"] .result-row strong { color:#352f22; }
#game-shell[data-theme="storybook"] #restart-button,#game-shell[data-theme="storybook"] #tutorial-start { border-color:#b44a38;border-bottom-color:#7f2b22;border-radius:9px;background:linear-gradient(#dd6047,#bd3c2e); }
#game-shell[data-theme="storybook"] .share-button { border:2px solid #55733d;border-bottom:4px solid #365028;border-radius:8px;background:#fff4ca;color:#405831; }
#game-shell[data-theme="storybook"] .text-button { color:#5b482e; }
#game-shell[data-theme="storybook"] .game-dialog,#game-shell[data-theme="storybook"] .tutorial-dialog { border:4px solid #58763e;border-bottom:8px solid #385128;border-radius:10px;background:#efe0aa;color:#3e3524;box-shadow:0 25px 80px rgba(42,37,20,.6); }
#game-shell[data-theme="storybook"] .game-dialog::backdrop,#game-shell[data-theme="storybook"] .tutorial-dialog::backdrop { background:rgba(53,47,27,.72); }
#game-shell[data-theme="storybook"] .dialog-head { background:#789c4c;border-bottom:3px solid #557138; }
#game-shell[data-theme="storybook"] .dialog-head p { color:#ffedaa; }
#game-shell[data-theme="storybook"] .dialog-head h2 { color:#fff8d7;text-shadow:1px 2px 0 #415b2e; }
#game-shell[data-theme="storybook"] .dialog-close { border:2px solid #fff1be;border-bottom:4px solid #8d2d24;border-radius:8px;background:#c74434;color:#fff; }
#game-shell[data-theme="storybook"] .dialog-copy { padding-top:10px;color:#675637; }
#game-shell[data-theme="storybook"] .collection-card,#game-shell[data-theme="storybook"] .stage-card,#game-shell[data-theme="storybook"] .mission-card,#game-shell[data-theme="storybook"] .tutorial-dialog li { border:2px solid #6b7d47;border-bottom:4px solid #4a5e35;border-radius:8px;background:#fff3c5;color:#3d3424; }
#game-shell[data-theme="storybook"] .collection-card h3,#game-shell[data-theme="storybook"] .stage-card h3,#game-shell[data-theme="storybook"] .mission-card h3,#game-shell[data-theme="storybook"] .tutorial-dialog strong { color:#3d3424; }
#game-shell[data-theme="storybook"] .collection-card p,#game-shell[data-theme="storybook"] .stage-card p,#game-shell[data-theme="storybook"] .tutorial-dialog small { color:#756142; }
#game-shell[data-theme="storybook"] .stage-card small,#game-shell[data-theme="storybook"] .stage-card .stage-stars,#game-shell[data-theme="storybook"] .mission-card p { color:#9e342b; }
#game-shell[data-theme="storybook"] .stage-card .stage-icon { border-color:#809855;border-radius:7px;background:#d8e1a4; }
#game-shell[data-theme="storybook"] .tutorial-dialog h2 { color:#453824;text-shadow:none; }
#game-shell[data-theme="storybook"] .dialog-footer { background:linear-gradient(transparent,#efe0aa 22%); }
#game-shell[data-theme="storybook"] .dialog-footer button { border-color:#b64c39;border-bottom-color:#7d2a21;border-radius:8px;background:#d95743;color:#fff7d9; }
#game-shell[data-theme="storybook"] .mission-progress,#game-shell[data-theme="storybook"] .collection-meter { background:#b8a46f; }
#game-shell[data-theme="storybook"] .mission-progress span,#game-shell[data-theme="storybook"] .collection-meter span { background:linear-gradient(90deg,#73984b,#d29c2f); }
#game-shell[data-theme="storybook"] .unlock-toast { border-color:#56743c;border-bottom-color:#395329;border-radius:10px;background:linear-gradient(#fff2be,#e8ca7d);color:#443620; }
@media (max-height:760px),(max-width:427px){#game-shell[data-theme="storybook"] .brand-lockup{margin-top:4px;padding-block:4px}#game-shell[data-theme="storybook"] h1{font-size:2.25rem}#game-shell[data-theme="storybook"] .op-panel h1{font-size:1.9rem}#game-shell[data-theme="storybook"] .prompt{margin-block:6px;padding-block:4px}}
@media (max-width:360px){
  #game-over-title,#game-shell[data-theme="storybook"] #game-over-title{font-size:2rem}
  .result-row{width:100%}
  .result-row strong{font-size:2.2rem}
  #game-shell[data-theme="storybook"] .mode-button:not(.primary){padding-inline:8px;border-inline-width:6px}
  #game-shell[data-theme="storybook"] .mode-title b{font-size:.92rem;letter-spacing:-.045em}
  #game-shell[data-theme="storybook"] .mode-button.primary .mode-title b{font-size:1.48rem;letter-spacing:-.03em}
  #game-shell[data-theme="storybook"] .mode-button:not(.primary)>small{font-size:.58rem;letter-spacing:-.03em}
  .home-nav button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;padding-inline:8px}
  .home-nav button>span{font-size:.68rem;white-space:nowrap}
  .home-nav strong{font-size:.6rem;white-space:nowrap}
}