.scenarios-page button{font:inherit;cursor:pointer;}

/* Scenario catalog */
.scenario-catalog-wrap{width:min(1120px,calc(100% - 40px));margin:0 auto;padding-bottom:34px;}
.scenario-catalog-hero{max-width:820px;margin-top:64px;}
.scenario-catalog-hero .section-kicker{margin:0 0 9px;}
.scenario-catalog-hero h1{margin:0;font:700 clamp(40px,6.4vw,66px)/1.06 var(--display);letter-spacing:-.04em;}
.scenario-catalog-hero > p:last-child{max-width:700px;margin:19px 0 0;color:var(--muted);font-size:17px;line-height:1.65;}
.scenario-catalog-section{margin-top:68px;}
.scenario-catalog-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;}
.scenario-catalog-heading .section-kicker{margin:0 0 6px;}
.scenario-catalog-heading h2{margin:0;font:700 clamp(28px,4vw,40px)/1.15 var(--display);letter-spacing:-.025em;}
.scenario-catalog-heading > span{padding:6px 10px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.7);color:var(--muted);font-size:10px;font-weight:700;white-space:nowrap;}
.scenario-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:27px;}
.scenario-catalog-card{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.82);box-shadow:0 24px 54px -42px rgba(22,31,51,.75);}
.scenario-card-image-link{position:relative;display:block;height:290px;overflow:hidden;background:#253553;}
.scenario-card-image-link img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 54%;transition:transform .35s ease;}
.scenario-catalog-card:first-child .scenario-card-image-link img{object-position:center 59%;}
.scenario-card-image-link::after{position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(18,27,47,.58));content:"";pointer-events:none;}
.scenario-card-image-link > span{position:absolute;z-index:1;right:16px;bottom:15px;padding:5px 9px;border:1px solid rgba(255,255,255,.38);border-radius:100px;background:rgba(18,27,47,.34);color:white;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(7px);}
.scenario-card-image-link:hover img{transform:scale(1.025);}
.scenario-card-image-link:focus-visible{outline:3px solid var(--persimmon);outline-offset:-3px;}
.scenario-card-copy{display:flex;min-height:260px;flex-direction:column;padding:23px;}
.scenario-card-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.scenario-card-title-row h3{margin:0;font:600 23px/1.25 var(--display);}
.scenario-card-title-row > span{flex:0 0 auto;color:var(--indigo-soft);font:600 11px/1.3 var(--display);}
.scenario-card-copy > p{flex:1;margin:11px 0 0;color:var(--muted);font-size:13px;line-height:1.6;}
.scenario-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;}
.scenario-card-meta span{padding:4px 8px;border-radius:100px;background:var(--paper-2);color:var(--muted);font-size:9px;font-weight:700;}
.scenario-card-copy .primary-button{align-self:flex-start;min-height:43px;margin-top:15px;padding:8px 17px;font-size:11px;}
.scenario-replay-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-top:24px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.64);}
.scenario-replay-note > span{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--paper-2);color:var(--indigo);font:600 19px var(--display);}
.scenario-replay-note b{font:600 15px/1.35 var(--display);}
.scenario-replay-note p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.5;}
.scenario-footer{margin-top:58px;}

/* Shared scenario player */
.scenario-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:0 0 52px;}
.scenario-main{width:min(1080px,100%);margin:42px auto 0;}
.scenario-session-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:11px;color:var(--muted);font-size:12px;font-weight:700;}
.scenario-session-topline .back-link{display:inline-flex;align-items:center;gap:7px;color:var(--indigo);text-decoration:none;}
.scenario-session-topline .back-link:hover{color:var(--persimmon);}
.scenario-progress{height:5px;margin-bottom:18px;border-radius:100px;background:rgba(202,211,224,.72);overflow:hidden;}
.scenario-progress-fill{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--persimmon),#db795c);transition:width .35s ease;}

.scenario-card.learning-card{min-height:0;padding:0;overflow:hidden;}
.scenario-card.learning-card::after{display:none;}
.scenario-card > *{position:relative;z-index:1;}
.scenario-card-header{min-height:72px;padding:16px 20px 15px;border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.96);}
.scenario-heading{display:grid;gap:5px;min-width:0;}
.scenario-heading-row{display:flex;align-items:baseline;gap:10px;min-width:0;}
.scenario-heading h1{margin:0;font:600 18px/1.3 var(--display);white-space:nowrap;}
.scenario-heading .scenario-jp{color:var(--muted);font:600 12px/1.3 var(--display);white-space:nowrap;}
.scenario-card .stage-badge{width:max-content;min-height:24px;padding:4px 9px;font-size:9px;}
.scenario-tools{display:flex;align-items:center;gap:8px;}
.scenario-tools .display-toggles{display:flex;gap:6px;}
.scenario-tools .fg-toggle{min-height:34px;padding:5px 10px;font-size:11px;}
.scenario-tools .audio-play{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--indigo);border-radius:50%;color:white;background:var(--indigo);}
.scenario-tools .audio-play[aria-pressed="false"]{color:var(--indigo);background:var(--card);}
.scenario-tools .audio-play[aria-pressed="false"]::after{position:absolute;width:22px;height:1.5px;border-radius:2px;background:currentColor;content:"";transform:rotate(-45deg);}
.scenario-tools .audio-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.scenario-player{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);height:620px;min-height:0;}
.scene-visual{position:relative;height:100%;margin:0;overflow:hidden;border-right:1px solid var(--line-soft);background:#253553;}
.scene-images{position:absolute;inset:0;}
.scene-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;transition:opacity .38s ease;}
.scene-image.is-current{opacity:1;}
.scene-visual::after{position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(22,31,51,.72));content:"";pointer-events:none;}
.scene-caption{position:absolute;z-index:2;right:18px;bottom:17px;left:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:white;}
.scene-caption span{display:grid;gap:2px;}
.scene-caption b{font:600 15px/1.3 var(--display);}
.scene-caption small{color:rgba(255,255,255,.78);font-size:10px;font-weight:600;letter-spacing:.04em;}
.scene-caption i{padding:4px 8px;border:1px solid rgba(255,255,255,.4);border-radius:100px;background:rgba(22,31,51,.26);font-size:9px;font-style:normal;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.mobile-scene-bar,.mobile-resume-button,.chat-resize-handle{display:none;}

.chat-panel{height:100%;min-height:0;background:var(--card);}
.chat-scroll{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--line) transparent;scrollbar-width:thin;}
.chat-scroll::-webkit-scrollbar{width:9px;}
.chat-scroll::-webkit-scrollbar-track{background:transparent;}
.chat-scroll::-webkit-scrollbar-thumb{border:3px solid white;border-radius:100px;background:var(--line);}
.chat-log{display:flex;min-height:100%;flex-direction:column;gap:14px;padding:24px 24px 28px;}
.chat-beat{display:grid;gap:7px;}
.chat-beat[hidden]{display:none;}

.scene-intro{display:grid;align-content:center;min-height:100%;padding:18px 10px;}
.scene-intro-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--paper-2);color:var(--indigo);font:600 20px/1 var(--display);}
.scene-intro .section-kicker{margin:19px 0 5px;}
.scene-intro h2{margin:0;font:600 clamp(27px,4vw,38px)/1.2 var(--display);}
.scene-intro > p:last-of-type{max-width:520px;margin:13px 0 0;color:var(--muted);font-size:14px;line-height:1.65;}
.scene-intro-actions{display:flex;align-items:center;gap:13px;margin-top:24px;}
.scene-intro-actions .primary-button{min-width:154px;}
.scene-intro-actions small{color:var(--muted);font-size:10px;line-height:1.4;}
.scene-intro-actions .primary-button:disabled{cursor:default;opacity:.6;}

.speaker{position:relative;z-index:2;display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:10px;font-weight:700;overflow:visible;}
.speaker-mark{display:grid;place-items:center;width:23px;height:23px;flex:0 0 auto;border-radius:50%;background:var(--indigo);color:white;font:600 10px/1 var(--display);}
.chat-bubble{width:fit-content;max-width:min(500px,88%);padding:13px 15px;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:4px;background:white;}
.line-ja{font:600 20px/1.85 var(--display);}
.line-ja-text{margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;transition:background .18s ease,color .18s ease;}
.line-ja-text:hover,.line-ja-text:focus-visible{background:var(--paper-2);color:var(--persimmon);}
.line-ja-text:focus-visible,.speak-ja:focus-visible{outline:3px solid rgba(47,71,122,.28);outline-offset:2px;}
.line-ja-text.is-playing{color:var(--persimmon);}
.line-ja ruby,.choice ruby{ruby-position:over;}
.line-ja rt,.choice rt{color:var(--indigo-soft);font:500 9px/1 var(--ui);}
.scenario-card.furigana-off rt{visibility:hidden;}
.line-romaji{display:none;margin:1px 0 0;color:var(--indigo-soft);font-size:11px;letter-spacing:.02em;}
.scenario-card.romaji-on .line-romaji{display:block;}
.line-en{margin:7px 0 0;padding-top:7px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:12px;}
.scenario-card.english-off .line-en,.scenario-card.english-off .choice small + small{display:none;}
.line-audio{display:inline-grid;place-items:center;width:27px;height:27px;margin-left:7px;padding:0;border:1px solid var(--indigo);border-radius:50%;color:var(--indigo);background:white;vertical-align:middle;}
.line-audio svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.line-audio.is-playing{color:white;background:var(--indigo);}

.help-button{width:max-content;min-height:34px;padding:6px 11px;border:1px dashed var(--indigo-soft);border-radius:100px;background:white;color:var(--indigo);font-size:10px;font-weight:700;}
.help-button:hover{border-style:solid;border-color:var(--persimmon);color:var(--persimmon);}
.guide-beat{position:relative;z-index:2;margin-left:22px;overflow:visible;}
.guide-beat .speaker-mark{background:var(--persimmon);font-family:var(--ui);font-size:13px;}
.guide-beat .chat-bubble{max-width:min(510px,92%);border:0;background:var(--paper-2);font-size:13px;line-height:1.65;}
.speak-ja{display:inline;margin:0;padding:0 .08em;border:0;border-bottom:1px dotted currentColor;background:transparent;color:var(--persimmon);font:inherit;font-weight:700;cursor:pointer;transition:background .18s ease,color .18s ease;}
.speak-ja:hover,.speak-ja:focus-visible,.speak-ja.is-playing{border-radius:4px;background:rgba(188,78,46,.12);color:#963a21;}

.scene-prompt-beat{padding:15px;border:1px solid var(--line-soft);border-radius:13px;background:var(--paper-2);}
.scene-prompt-beat .section-kicker{margin:0 0 4px;}
.scene-prompt-beat h2{margin:0;font:600 22px/1.3 var(--display);}
.scene-prompt-beat p:last-child{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.5;}
.choice-beat{justify-items:end;margin-top:2px;}
.choice-label{margin:0;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.choice-row{display:flex;max-width:540px;flex-wrap:wrap;justify-content:flex-end;gap:7px;}
.choice{min-width:92px;padding:9px 12px;border:1px solid var(--indigo-soft);border-radius:12px;border-bottom-right-radius:4px;background:white;color:var(--ink);font:600 15px/1.35 var(--display);text-align:left;}
.choice.action-choice{padding:12px 16px;font:700 12px/1.35 var(--ui);text-align:center;}
.choice small{display:block;margin-top:3px;color:var(--indigo-soft);font:500 9px/1.25 var(--ui);}
.choice small + small{margin-top:1px;color:var(--muted);}
.choice:hover{border-color:var(--persimmon);background:#fffdfc;}
.choice:disabled{cursor:default;opacity:.58;}
.choice-beat .help-button{justify-self:end;}

.learner-beat{justify-items:end;}
.learner-beat .chat-bubble{border-color:var(--indigo);border-radius:14px;border-bottom-right-radius:4px;background:var(--indigo);color:white;}
.learner-beat .line-ja-text:hover,.learner-beat .line-ja-text:focus-visible{background:rgba(255,255,255,.12);color:white;}
.learner-beat .line-romaji,.learner-beat .line-en{color:#d6deee;}
.learner-beat .line-en{border-top-color:rgba(255,255,255,.22);}
.selection-beat{justify-items:end;}
.selection-card{max-width:82%;padding:10px 13px;border-radius:12px;border-bottom-right-radius:4px;background:var(--indigo);color:white;font-size:11px;font-weight:700;line-height:1.5;}

.complete-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);}
.complete-card b{font:600 15px/1.3 var(--display);}
.complete-card p{margin:3px 0 0;color:var(--muted);font-size:11px;}
.complete-card-actions{display:flex;gap:7px;}
.complete-card .secondary-button,.complete-card .primary-button{min-height:39px;padding:8px 14px;font-size:11px;white-space:nowrap;}
.complete-card .primary-button{box-shadow:none;}

.scenario-card button:focus-visible{outline:3px solid rgba(47,71,122,.32);outline-offset:2px;}
.scenario-error{display:grid;place-items:center;min-height:420px;padding:30px;text-align:center;}
.scenario-error h1{margin:0;font:600 30px/1.25 var(--display);}
.scenario-error p{margin:10px 0 19px;color:var(--muted);}

@media (max-width:760px){
  .scenario-catalog-wrap{width:calc(100% - 24px);}
  .scenario-catalog-hero{margin-top:40px;}
  .scenario-catalog-hero h1{font-size:clamp(37px,12vw,54px);}
  .scenario-catalog-hero > p:last-child{font-size:15px;}
  .scenario-catalog-section{margin-top:50px;}
  .scenario-catalog-heading{align-items:flex-start;flex-direction:column;gap:11px;}
  .scenario-catalog-grid{grid-template-columns:1fr;}
  .scenario-card-image-link{height:250px;}
  .scenario-card-copy{min-height:0;}
  .scenario-card-title-row{align-items:flex-start;flex-direction:column;gap:4px;}
  .scenario-replay-note{align-items:start;padding:17px;}

  .scenario-wrap{width:calc(100% - 24px);padding-bottom:24px;}
  .scenario-main{margin-top:26px;}
  .scenario-session-topline{font-size:10px;}
  .scenario-card-header{min-height:67px;padding:13px 14px;}
  .scenario-heading h1{font-size:15px;}
  .scenario-heading .scenario-jp{display:none;}
  .scenario-tools{gap:5px;}
  .scenario-tools .display-toggles{gap:4px;}
  .scenario-tools .fg-toggle{min-height:31px;padding:4px 7px;font-size:9px;}
  .scenario-tools .audio-play{width:34px;height:34px;}
  .scenario-player{grid-template-columns:1fr;grid-template-rows:300px minmax(0,1fr);height:min(800px,calc(100dvh - 138px));min-height:620px;}
  .scene-visual{border-right:0;border-bottom:1px solid var(--line-soft);}
  .scene-image{object-position:var(--mobile-shot-position,center 45%);}
  .scene-caption{right:13px;bottom:11px;left:13px;}
  .scene-caption b{font-size:13px;}
  .chat-log{gap:12px;padding:18px 15px 22px;}
  .scene-intro{padding:8px 2px;}
  .scene-intro-mark{display:none;}
  .scene-intro .section-kicker{margin-top:0;}
  .scene-intro h2{font-size:27px;}
  .scene-intro-actions{align-items:flex-start;flex-direction:column;margin-top:18px;}
  .chat-bubble{max-width:94%;}
  .guide-beat{margin-left:8px;}
  .guide-beat .chat-bubble{max-width:97%;}
  .line-ja{font-size:18px;}
  .choice{min-width:84px;padding:8px 10px;font-size:14px;}
  .complete-card{align-items:stretch;flex-direction:column;}
  .complete-card-actions{display:grid;grid-template-columns:1fr 1fr;}
  .complete-card .secondary-button,.complete-card .primary-button{width:100%;}

  body.scenario-immersive{overflow:hidden;overscroll-behavior:none;}
  .scenario-card.is-immersive.learning-card{position:fixed;z-index:1000;inset:0;width:100%;height:100svh;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;background:#253553;}
  .scenario-card.is-immersive .scenario-card-header{display:none;}
  .scenario-card.is-immersive .scenario-player{--mobile-sheet-height:clamp(330px,52dvh,470px);position:relative;display:block;width:100%;height:100svh;height:100dvh;min-height:0;overflow:hidden;}
  .scenario-card.is-immersive .scene-visual{position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0;background:#253553;}
  .scenario-card.is-immersive .scene-image{width:100%;height:100%;object-fit:cover;}
  .scenario-card.is-immersive .scene-visual::before{position:absolute;z-index:1;inset:0 0 auto;height:124px;background:linear-gradient(rgba(18,27,47,.72),transparent);content:"";pointer-events:none;}
  .scenario-card.is-immersive .scene-visual::after{height:68%;background:linear-gradient(transparent,rgba(18,27,47,.62));}
  .scenario-card.is-immersive .scene-caption{display:none;}
  .mobile-scene-bar{position:absolute;z-index:8;top:0;right:0;left:0;display:none;align-items:center;justify-content:space-between;gap:18px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;color:white;}
  .scenario-card.is-immersive .mobile-scene-bar{display:flex;}
  .mobile-scene-status{display:grid;min-width:0;flex:1;gap:7px;}
  .mobile-scene-status-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
  .mobile-scene-status b{overflow:hidden;font:600 13px/1.2 var(--display);text-overflow:ellipsis;white-space:nowrap;}
  .mobile-scene-status small{flex:0 0 auto;color:rgba(255,255,255,.78);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
  .mobile-scene-progress{height:4px;overflow:hidden;border-radius:100px;background:rgba(255,255,255,.28);}
  .mobile-scene-progress span{display:block;width:0;height:100%;border-radius:inherit;background:var(--persimmon);transition:width .35s ease;}
  .mobile-exit-button{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;padding:0 0 3px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(18,27,47,.42);color:white;font:400 27px/1 var(--ui);backdrop-filter:blur(9px);}
  .scenario-card.is-immersive .chat-panel{position:absolute;z-index:5;right:0;bottom:0;left:0;width:100%;height:var(--mobile-sheet-height);overflow:hidden;border-radius:24px 24px 0 0;background:var(--card);box-shadow:0 -14px 38px rgba(18,27,47,.25);transition:height .24s ease;}
  .scenario-card.is-resizing .chat-panel,.scenario-card.is-entering .chat-panel{transition:none;}
  .scenario-card.is-immersive .chat-resize-handle{position:absolute;z-index:6;top:0;right:0;left:0;display:grid;width:100%;height:26px;place-items:start center;padding:8px 0 0;border:0;background:transparent;cursor:ns-resize;touch-action:none;}
  .scenario-card.is-immersive .chat-resize-handle::before{width:38px;height:4px;border-radius:100px;background:var(--line);content:"";transition:width .18s ease,background .18s ease;}
  .scenario-card.is-immersive .chat-resize-handle:hover::before,.scenario-card.is-immersive .chat-resize-handle:focus-visible::before,.scenario-card.is-resizing .chat-resize-handle::before{width:52px;background:var(--persimmon);}
  .scenario-card.is-immersive .chat-resize-handle:focus-visible{outline:0;}
  .scenario-card.is-immersive .chat-scroll{height:calc(100% - 24px);margin-top:24px;padding-top:0;}
  .scenario-card.is-immersive .chat-log{min-height:100%;padding:19px 15px calc(18px + env(safe-area-inset-bottom));}
  .scenario-card.is-immersive .choice-beat{position:sticky;z-index:3;bottom:calc(-18px - env(safe-area-inset-bottom));margin:4px -15px calc(-18px - env(safe-area-inset-bottom));padding:13px 15px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);background:rgba(255,255,255,.97);box-shadow:0 -10px 24px rgba(30,42,68,.08);backdrop-filter:blur(10px);}
  .scenario-card.is-immersive .choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;}
  .scenario-card.is-immersive .choice-row[data-choice-count="3"]{grid-template-columns:1fr;}
  .scenario-card.is-immersive .choice{width:100%;min-width:0;}
  .mobile-resume-button{position:absolute;z-index:4;top:50%;left:50%;align-items:center;gap:7px;min-height:42px;padding:9px 15px;border:1px solid rgba(255,255,255,.42);border-radius:100px;background:rgba(18,27,47,.72);color:white;font-size:11px;font-weight:700;transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(18,27,47,.2);backdrop-filter:blur(8px);white-space:nowrap;}
  .mobile-resume-button.is-visible{display:flex;}
}

@media (max-width:430px){
  .scenario-tools .fg-toggle{width:31px;overflow:hidden;padding:4px 6px;white-space:nowrap;text-indent:-999px;}
  .scenario-tools .fg-toggle::after{display:block;text-indent:0;content:"字";}
  .scenario-tools #rjToggle::after{content:"R";}
  .scenario-tools #enToggle::after{content:"EN";}
  .scenario-heading-row{display:grid;gap:1px;}
}

@media (prefers-reduced-motion:reduce){
  .scene-image,.scenario-progress-fill,.mobile-scene-progress span,.scenario-card.is-immersive .chat-panel,.scenario-card-image-link img{transition:none;}
}