:root {
  --bg: #f7efe4;
  --paper: rgba(255, 250, 244, 0.92);
  --paper-strong: rgba(255, 255, 255, 0.82);
  --line: rgba(182, 148, 107, 0.24);
  --ink: #4a382d;
  --ink-soft: #7b6858;
  --accent: #9a3d4d;
  --gold: #d8bb78;
  --green: #93ad6a;
  --sky: #c9dff1;
  --shadow: 0 24px 70px rgba(150, 118, 80, 0.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: linear-gradient(180deg, #fffdf8, #f6ecdc); color: var(--ink); font-family: "Noto Serif JP", serif; }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { background: radial-gradient(circle at 12% 0%, rgba(255,255,255,0.92), transparent 28%), radial-gradient(circle at 88% 8%, rgba(255,228,218,0.58), transparent 24%); }
body::after { background: linear-gradient(rgba(201,173,129,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201,173,129,0.04) 1px, transparent 1px); background-size: 34px 34px; }
#app { width: 100%; }
.appShell { width: min(1180px, 100%); margin: 0 auto; padding: 20px 14px 36px; }
.topbar { margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); position: relative; z-index: 1; }
.topbarTitle { margin: 0; font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--accent); }
.topbarSubtitle { margin: 6px 0 0; color: var(--ink-soft); }
.screen { display: none; }
.screen.active { display: block; }
.panel { position: relative; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,247,238,0.92)); box-shadow: var(--shadow); overflow: hidden; }
.panel::before, .panel::after, .safePanel::before, .safePanel::after { pointer-events: none; }
.safePanel { position: relative; z-index: 1; padding: 24px; }
.safePanel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,0.66), transparent 22%), linear-gradient(135deg, rgba(255, 218, 225, 0.16), transparent 40%); }
.safePanel > * { position: relative; z-index: 1; }
.screenTitle { margin: 0 0 12px; color: var(--accent); font-size: clamp(1.5rem, 3.5vw, 2rem); }
.screenText { line-height: 1.85; margin: 0 0 18px; }
.hero-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 5; margin: 18px 0 0; }
.hero-actions button, .nickname-panel button, .choiceButton { position: relative; z-index: 10; pointer-events: auto; min-width: 210px; min-height: 56px; cursor: pointer; }
button { appearance: none; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; font: inherit; background: rgba(255,255,255,0.92); color: var(--ink); transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
button:hover { background: #fff6ee; transform: translateY(-1px); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid rgba(154, 61, 77, 0.28); outline-offset: 2px; }
#start-button, #start-from-howto-button, #retry-button, #next-step-button, #view-result-button { background: linear-gradient(135deg, var(--accent), #c66e7d); color: white; border-color: transparent; box-shadow: 0 12px 28px rgba(154, 61, 77, 0.18); }
.heroLayout, .gameLayout, .resultLayout, .howtoLayout { display: grid; gap: 18px; }
.heroLayout, .resultLayout { grid-template-columns: 1.1fr 0.9fr; }
.howtoLayout { grid-template-columns: 1fr 0.9fr; }
.heroMain { display: grid; align-content: center; gap: 12px; min-height: 540px; position: relative; z-index: 20; }
.heroEyebrow { color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }
.heroTitleLarge { margin: 0; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 0.95; color: var(--accent); font-family: "Cormorant Garamond", serif; }
.heroLead { max-width: 42rem; }
.heroStageCard, .miniStageCard, .resultMain, .gameMain, .sidebarPanel { padding: 24px; }
.heroStageCard, .miniStageCard, .resultMain { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,241,229,0.88)); box-shadow: var(--shadow); position: relative; z-index: 1; }
.heroStageMeta { margin-top: 18px; display: grid; gap: 14px; }
.stagePill { display: inline-flex; width: fit-content; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.72); border: 1px solid var(--line); color: var(--accent); }
.heroMiniStats, .statsColumn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nickname-panel { display: grid; gap: 10px; margin-top: 10px; width: min(460px, 100%); }
.nickname-panel label { font-weight: 600; }
.nickname-panel input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font: inherit; background: rgba(255,255,255,0.94); color: var(--ink); }
.statCard { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: rgba(255,255,255,0.82); display: grid; gap: 6px; }
.statCard span { font-size: 0.84rem; color: var(--ink-soft); }
.statCard strong { color: var(--accent); }
.howtoCards { display: grid; gap: 12px; margin-top: 18px; }
.infoCard { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.74); }
.gameLayout { grid-template-columns: 1.28fr 0.72fr; align-items: start; }
.gameMain { min-height: 760px; }
.gameMain.is-resolving .stageGlow { opacity: 1; }
.gameMain.is-late .stageBloom { opacity: 0.46; }
.gameMain.is-finale .stageGlow { opacity: 1; filter: saturate(1.1); }
.gameMain.is-finale .stageBloom { opacity: 0.28; }
.stageGlow, .stageBloom, .resultGlow { position: absolute; inset: 0; pointer-events: none; }
.stageGlow { background: radial-gradient(circle at 24% 16%, rgba(255,255,255,0.94), transparent 28%), radial-gradient(circle at 78% 18%, rgba(216,187,120,0.24), transparent 22%); opacity: 0.72; transition: opacity 220ms ease; }
.stageBloom { background: linear-gradient(180deg, rgba(201,223,241,0), rgba(201,223,241,0.22)), linear-gradient(180deg, rgba(147,173,106,0.16), rgba(147,173,106,0.24)); opacity: 0.6; }
.resultGlow { background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.92), transparent 30%), radial-gradient(circle at 50% 35%, rgba(216,187,120,0.2), transparent 32%); }
.gameStageHero { min-height: 420px; display: grid; place-items: center; }
.storyPanel { display: grid; gap: 12px; padding-top: 12px; }
.storyMeta, .sidebarHeading { color: var(--accent); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.storyTitle { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--accent); }
.storyBody { max-width: 44rem; }
.storyHint { color: var(--ink-soft); }
.choiceDock { margin-top: 8px; padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,244,233,0.92)); }
.choicePrompt { margin: 0 0 12px; color: var(--accent); font-weight: 700; }
.choiceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choiceButton { background: rgba(255,255,255,0.94); }
.choiceButton:disabled { opacity: 0.82; cursor: default; }
.choiceButton:hover:not(:disabled) { box-shadow: 0 12px 24px rgba(154,61,77,0.10); }
.compactActions { justify-content: flex-start; }
.gameSidebar { display: grid; gap: 18px; }
.sidebarPanel { display: grid; gap: 12px; }
.stepList { display: grid; gap: 10px; }
.stepRow { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,0.74); border: 1px solid rgba(182,148,107,0.12); }
.stepRow span { color: var(--ink-soft); }
.stepRow strong { font-size: 0.94rem; }
.stepRow.is-current { background: rgba(255,240,242,0.94); border-color: rgba(154,61,77,0.18); }
.stepRow.is-done { background: rgba(250,244,223,0.94); border-color: rgba(216,187,120,0.18); }
.towerWrap { padding-top: 8px; }
.towerBars { display: grid; align-items: end; grid-template-columns: repeat(var(--tower-count, 13), minmax(0, 1fr)); gap: 8px; min-height: 190px; }
.towerBar { position: relative; border-radius: 18px 18px 10px 10px; background: linear-gradient(180deg, rgba(216,187,120,0.36), rgba(201,223,241,0.42)); border: 1px solid rgba(182,148,107,0.14); }
.towerBar.is-current { outline: 2px solid rgba(154,61,77,0.18); }
.towerBar.is-best { background: linear-gradient(180deg, rgba(198,110,125,0.56), rgba(216,187,120,0.52)); }
.towerBar span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; color: var(--ink-soft); }
.characterFigure { position: relative; width: 280px; height: 420px; margin: 0 auto; transition: transform 260ms ease, filter 260ms ease; }
.characterFigure.is-preview { width: 240px; height: 360px; }
.characterFigure.is-resolving { transform: translateY(-6px); filter: drop-shadow(0 12px 24px rgba(216,187,120,0.18)); }
.figureAura, .figureHair, .figureFace, .figureBody, .figureLayer, .figureAccessory, .figureFail { position: absolute; left: 50%; transform: translateX(-50%); }
.figureAura { inset: 24px 24px 40px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.82), rgba(255,255,255,0)); }
.figureHair { top: 20px; width: 118px; height: 96px; border-radius: 58px 58px 34px 34px; background: linear-gradient(180deg, #3b2d24, #1f1713); }
.figureFace { top: 48px; width: 74px; height: 88px; border-radius: 48% 48% 52% 52%; background: linear-gradient(180deg, #f7dfcd, #edc7ad); z-index: 1; }
.figureBody { top: 120px; width: 176px; height: 244px; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); border-radius: 42px 42px 24px 24px; background: linear-gradient(180deg, #fff7ef, #eed8c4); }
.figureLayer, .figureAccessory, .figureFail { opacity: 0; transition: opacity 200ms ease; }
.figureLayer.is-visible, .figureAccessory.is-visible, .figureFail.is-visible { opacity: 1; }
.layer-inner { top: 124px; width: 184px; height: 234px; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,236,223,0.9)); }
.layer-juban { top: 126px; width: 192px; height: 238px; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(244,244,244,0.96), rgba(228,221,214,0.88)); }
.layer-kimono { top: 122px; width: 206px; height: 246px; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #d57a88, #9a3d4d); }
.layer-obiage { top: 214px; width: 156px; height: 26px; border-radius: 999px 999px 10px 10px; background: linear-gradient(90deg, #f5d9c0, #efc58f); }
.layer-obi { top: 230px; width: 214px; height: 38px; border-radius: 16px; background: linear-gradient(90deg, #d8bb78, #b98f49); }
.layer-obijime { top: 244px; width: 226px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #fffdf8, #d57a88); }
.layer-haori { top: 118px; width: 234px; height: 260px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(147,173,106,0.52), rgba(116,143,82,0.68)); }
.layer-tabi { bottom: 28px; width: 132px; height: 18px; border-radius: 999px; background: linear-gradient(90deg, #fffdf8, #f4f0ea); }
.layer-zori { bottom: 16px; width: 142px; height: 18px; border-radius: 999px; background: linear-gradient(90deg, #bfa381, #d6b48e); }
.acc-kanzashi { top: 62px; margin-left: 52px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #d8bb78, white); }
.acc-sensu { top: 250px; margin-left: 78px; width: 68px; height: 34px; clip-path: polygon(0 100%, 100% 76%, 80% 0, 26% 12%); background: linear-gradient(135deg, #d8bb78, #d57a88); }
.acc-bag { top: 242px; margin-left: -92px; width: 40px; height: 56px; border-radius: 12px 12px 16px 16px; border: 2px solid rgba(74,56,45,0.16); background: rgba(255,246,226,0.94); }
.acc-outing { top: 36px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(216,187,120,0.38); box-shadow: 0 0 0 18px rgba(255,255,255,0.14); }
.figureFail { inset: auto 0 0; width: 100%; height: 100%; }
.figureFail.fail-worn-socks.is-visible { opacity: 1; left: 50%; bottom: 16px; width: 140px; height: 20px; border-radius: 999px; background: repeating-linear-gradient(90deg, #7f90ae 0 12px, #ebf1fb 12px 22px); }
.figureFail.fail-haramaki.is-visible { opacity: 1; top: 226px; width: 188px; height: 44px; border-radius: 18px; background: linear-gradient(90deg, #e6b29c, #d68a73); }
.figureFail.fail-sleepwear.is-visible { opacity: 1; top: 124px; width: 206px; height: 246px; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #bcc8db, #8a98b0); }
.figureFail.fail-jersey.is-visible { opacity: 1; top: 122px; width: 210px; height: 248px; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #6aa18b, #355c4d); }
.figureFail.fail-rope.is-visible, .figureFail.fail-packing-string.is-visible { opacity: 1; top: 246px; width: 228px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #ae8759, #7b603b); }
.figureFail.fail-tenugui.is-visible { opacity: 1; top: 214px; width: 158px; height: 26px; border-radius: 999px; background: linear-gradient(90deg, #ffffff, #e8d4a9); }
.figureFail.fail-slippers.is-visible { opacity: 1; bottom: 14px; width: 140px; height: 18px; border-radius: 999px; background: linear-gradient(90deg, #d4a58c, #b17c64); }
.figureFail.fail-party-hat.is-visible { opacity: 1; top: 10px; width: 74px; height: 58px; clip-path: polygon(50% 0, 0 100%, 100% 100%); background: linear-gradient(180deg, #d8bb78, #d57a88); }
.figureFail.fail-uchiwa.is-visible { opacity: 1; top: 250px; margin-left: 78px; width: 50px; height: 64px; border-radius: 50% 50% 44% 44%; background: linear-gradient(180deg, #fff7ea, #e9b394); }
.figureFail.fail-plastic-bag.is-visible { opacity: 1; top: 242px; margin-left: -92px; width: 42px; height: 58px; border-radius: 10px; background: rgba(255,255,255,0.64); border: 1px solid rgba(74,56,45,0.14); }
.figureFail.fail-winter-coat.is-visible { opacity: 1; top: 114px; width: 226px; height: 274px; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #a6adb8, #707883); }
.figureFail.fail-snowstorm.is-visible { opacity: 1; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.9) 0 2px, transparent 3px) 0 0 / 50px 50px, radial-gradient(circle, rgba(255,255,255,0.64) 0 2px, transparent 3px) 14px 16px / 56px 56px, linear-gradient(180deg, rgba(201,223,241,0.32), rgba(255,255,255,0.1)); }
.resultMain { display: grid; justify-items: center; gap: 18px; min-height: 640px; }
.resultCopy { width: min(100%, 520px); text-align: center; }
.resultActions { margin-top: 8px; }
@media (max-width: 920px) {
  .heroLayout, .howtoLayout, .gameLayout, .resultLayout { grid-template-columns: 1fr; }
  .gameSidebar, .heroMiniStats, .statsColumn { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .appShell { padding: 14px 12px 28px; }
  .safePanel, .heroStageCard, .miniStageCard, .resultMain, .gameMain, .sidebarPanel { padding: 18px; }
  .hero-actions { gap: 12px; }
  .hero-actions button, .nickname-panel button, .choiceButton { width: 100%; min-width: 0; }
  .choiceGrid { grid-template-columns: 1fr; }
  .towerBars { gap: 6px; min-height: 150px; }
  .characterFigure { width: 236px; height: 364px; }
}

.gameMain.is-selected .stageGlow,
.gameMain.is-revealing .stageGlow,
.gameMain.is-resolved .stageGlow {
  opacity: 1;
}

.gameMain.is-revealing .stageBloom,
.gameMain.is-finale .stageBloom {
  opacity: 0.38;
}

.gameStageHero {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.choiceButton.is-selected {
  background: linear-gradient(135deg, rgba(154,61,77,0.12), rgba(216,187,120,0.22));
  border-color: rgba(154,61,77,0.24);
  box-shadow: 0 14px 34px rgba(154,61,77,0.14);
}

.choiceButton.is-dimmed {
  opacity: 0.52;
  filter: saturate(0.8);
}

.characterFigure.is-revealing {
  transform: translateY(-8px) scale(1.01);
  filter: drop-shadow(0 16px 28px rgba(216,187,120,0.22));
}

.characterFigure.is-success .figureAura {
  background: radial-gradient(circle, rgba(255,255,255,0.94), rgba(255,255,255,0));
}

.characterFigure.is-failure .figureAura {
  background: radial-gradient(circle, rgba(255,244,233,0.82), rgba(255,255,255,0));
}

.revealStage {
  position: absolute;
  inset: 26px 18px 46px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 3;
}

.revealStage.is-selected,
.revealStage.is-revealing,
.revealStage.is-open {
  opacity: 1;
}

.revealBacklight,
.revealParticles {
  position: absolute;
  inset: 0;
  border-radius: 28px;
}

.revealBacklight {
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.95), rgba(255,255,255,0) 62%);
  opacity: 0.6;
  transform: scale(0.94);
  transition: opacity 260ms ease, transform 260ms ease;
}

.revealStage.is-revealing .revealBacklight,
.revealStage.is-open .revealBacklight {
  opacity: 0.95;
  transform: scale(1);
}

.revealParticles {
  background:
    radial-gradient(circle at 22% 36%, rgba(255,215,160,0.34) 0 3px, transparent 4px),
    radial-gradient(circle at 74% 28%, rgba(244,190,205,0.34) 0 3px, transparent 4px),
    radial-gradient(circle at 64% 68%, rgba(255,255,255,0.44) 0 2px, transparent 3px);
  opacity: 0;
}

.revealStage.is-revealing .revealParticles,
.revealStage.is-open .revealParticles {
  opacity: 1;
}

.revealFrame {
  position: relative;
  width: min(300px, 74%);
  height: 190px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(182,148,107,0.24);
  box-shadow: 0 16px 36px rgba(112,83,53,0.12);
  background: linear-gradient(180deg, rgba(255,251,244,0.9), rgba(255,240,225,0.94));
}

.revealContent,
.revealDoor,
.revealSeam {
  position: absolute;
  inset: 0;
}

.revealContent {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,244,233,0.94));
}

.revealContent.is-visible {
  opacity: 1;
  transform: scale(1);
}

.revealBadge {
  display: inline-flex;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(182,148,107,0.24);
  background: rgba(255,255,255,0.84);
  color: var(--accent);
  font-size: 0.84rem;
}

.revealContent strong {
  font-size: 1.02rem;
  line-height: 1.6;
}

.revealDoor {
  width: 50%;
  transition: transform 620ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease;
  background:
    linear-gradient(90deg, rgba(214,194,162,0.28) 0, rgba(214,194,162,0.05) 6%, transparent 6%),
    linear-gradient(180deg, rgba(255,255,255,0.66), rgba(242,229,208,0.96)),
    repeating-linear-gradient(180deg, rgba(188,160,127,0.06) 0 12px, rgba(255,255,255,0.02) 12px 24px);
}

.revealDoor--left {
  left: 0;
  border-right: 1px solid rgba(182,148,107,0.16);
}

.revealDoor--right {
  right: 0;
  left: auto;
  border-left: 1px solid rgba(182,148,107,0.16);
}

.revealSeam {
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(182,148,107,0.2), rgba(182,148,107,0.46), rgba(182,148,107,0.2));
  transition: opacity 220ms ease;
}

.revealStage.is-open .revealDoor--left {
  transform: translateX(-102%);
}

.revealStage.is-open .revealDoor--right {
  transform: translateX(102%);
}

.revealStage.is-open .revealSeam {
  opacity: 0;
}

.revealStage.is-success .revealContent {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(251,243,227,0.96));
}

.revealStage.is-failure .revealContent {
  background: linear-gradient(180deg, rgba(255,252,248,0.96), rgba(246,234,225,0.96));
}

@media (max-width: 720px) {
  .gameStageHero {
    min-height: 390px;
  }

  .revealStage {
    inset: 20px 10px 38px;
  }

  .revealFrame {
    width: min(280px, 88%);
    height: 170px;
  }
}


.choiceDock--image {
  padding: 14px;
}

.choiceImageFrame {
  position: relative;
  width: min(540px, 100%);
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(112,83,53,0.12);
  background: rgba(255,255,255,0.72);
}

.choiceImage {
  display: block;
  width: 100%;
  height: auto;

}
.fusumaCharacterOverlay {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  z-index: 1;
  width: min(28%, 176px);
  transform: translateX(-50%);
  pointer-events: none;
}

.fusumaCharacterOverlay::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 82%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(84, 58, 38, 0.26), rgba(84, 58, 38, 0));
  filter: blur(4px);
}

.fusumaCharacterImage {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(66, 42, 27, 0.22));
}

.fusumaHitArea {
  position: absolute;
  top: 4%;
  bottom: 6%;
  width: 47%;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 18px;
  background: transparent;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
  z-index: 2;
}

.fusumaHitArea--left {
  left: 1.8%;
}

.fusumaHitArea--right {
  right: 1.8%;
}

.fusumaHitArea:hover:not(:disabled),
.fusumaHitArea:focus-visible {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12));
  box-shadow: inset 0 0 0 2px rgba(255,248,238,0.78), 0 0 0 1px rgba(182,148,107,0.12);
  outline: none;
}

.fusumaHitArea.is-selected {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,232,214,0.16));
  box-shadow: inset 0 0 0 2px rgba(255,248,238,0.86), inset 0 0 48px rgba(216,187,120,0.12);
}

.fusumaHitArea.is-dimmed {
  background: linear-gradient(180deg, rgba(74,56,45,0.04), rgba(74,56,45,0.08));
}

.fusumaHitArea:disabled {
  cursor: default;
}

.fusumaNext {
  position: absolute;
  bottom: 6%;
  z-index: 4;
  min-width: 220px;
  min-height: 76px;
  padding: 18px 32px;
  border-radius: 999px;
  border: 1px solid rgba(247, 227, 188, 0.96);
  background: linear-gradient(135deg, rgba(156, 34, 53, 0.98), rgba(211, 95, 75, 0.96));
  color: #fffdf7;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(88, 24, 18, 0.26);
  box-shadow: 0 24px 42px rgba(111, 28, 33, 0.34), inset 0 1px 0 rgba(255, 246, 231, 0.3), 0 0 0 4px rgba(255, 241, 220, 0.08);
  transform: translateY(0) scale(1);
  animation: fusuma-next-in 220ms ease-out;
}

.fusumaNext--left {
  left: auto;
  right: 7%;
}

.fusumaNext--right {
  right: 7%;
}

.fusumaNext:hover,
.fusumaNext:focus-visible {
  background: linear-gradient(135deg, rgba(172, 42, 61, 1), rgba(224, 114, 88, 0.98));
  box-shadow: 0 28px 46px rgba(111, 28, 33, 0.4), inset 0 1px 0 rgba(255, 246, 231, 0.36), 0 0 0 5px rgba(255, 241, 220, 0.12);
  transform: translateY(-2px) scale(1.03);
  outline: none;
}

.fusumaNext:active {
  transform: translateY(1px) scale(0.99);
}

@keyframes fusuma-next-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fusumaStageCopy {
  position: absolute;
  top: 4%;
  left: 4%;
  right: 4%;
  z-index: 5;
  display: grid;
  gap: 6px;
  justify-items: start;
  pointer-events: none;
}

.fusumaStageTitle {
  margin: 0;
  padding: 10px 18px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(78, 38, 30, 0.34), rgba(78, 38, 30, 0.16));
  color: #fffaf2;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 12px rgba(44, 23, 14, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 249, 239, 0.16);
}

.fusumaStageMeta {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(74, 56, 45, 0.28);
  color: rgba(255, 250, 244, 0.96);
  text-shadow: 0 1px 6px rgba(44, 23, 14, 0.28);
}

.fusumaStageHint {
  margin: 0;
  padding-left: 4px;
  color: rgba(255, 250, 244, 0.96);
  font-size: 0.9rem;
  max-width: 20rem;
  text-shadow: 0 1px 8px rgba(44, 23, 14, 0.32);
}

.gameStageHero .choicePrompt {
  margin: 0 0 10px;
}

.fusumaPreviewShell {
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(182,148,107,0.18);
  background: rgba(255,255,255,0.72);
}

.fusumaPreviewImage {
  display: block;
  width: 100%;
  height: auto;
}

.choiceDock--image {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.choiceImageFrame {
  width: min(680px, 100%);
}

@media (max-width: 720px) {
  .fusumaHitArea {
    top: 3%;
    bottom: 5%;
    width: 48%;
  }

  .fusumaCharacterOverlay {
    bottom: 2%;
    width: min(31%, 132px);
  }

  .fusumaNext {
    right: 6%;
    min-width: 168px;
    min-height: 62px;
    padding: 15px 22px;
    font-size: 1.45rem;
    letter-spacing: 0.11em;
  }

  .fusumaStageCopy {
    top: 3.5%;
    left: 3.5%;
    right: 3.5%;
    gap: 4px;
  }

  .fusumaStageTitle {
    padding: 8px 12px 10px;
    font-size: clamp(1.5rem, 7vw, 2.1rem);
  }

  .fusumaStageMeta {
    padding: 5px 10px;
    font-size: 0.72rem;
  }

  .fusumaStageHint {
    font-size: 0.8rem;
    max-width: 14rem;
  }
}