/* Hallmark · component: dialogue window · genre: atmospheric · theme: Rain Archive
 * treatment: message and choice = borderless bottom-up gradient scrim · states: default · compact landscape · choice
 * contrast: pass · responsive split: desktop · phone landscape · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
@import url("../../../tokens.css");

:root {
  color-scheme:dark;
  --panel:rgba(8,8,10,.88);
  --line:rgba(235,235,240,.62);
  --muted:#b8b7bc;
  --ink:#f4f2ee;
  --accent:#d8d5cd;
  --dialogue-glass-start:oklch(7% .008 285/.4);
  --dialogue-glass-end:oklch(10% .01 285/.24);
  --dialogue-glass-border:oklch(88% .008 285/.68);
  --dialogue-glass-inner:oklch(94% .006 285/.2);
  --dialogue-glass-shadow:oklch(2% .004 285/.58);
  --dialogue-glass-highlight:oklch(96% .006 285/.08);
  --dialogue-text-shadow:oklch(2% .004 285/.95);
  --message-scrim-strong:oklch(2% .004 285/.95);
  --message-scrim-mid:oklch(2% .004 285/.55);
  --message-scrim-strong-mobile:oklch(2% .004 285/.68);
  --message-scrim-mid-mobile:oklch(2% .004 285/.35);
  --action-glass-bg:oklch(4% .004 285/.4);
  --action-glass-bg-hover:oklch(4% .004 285/.65);
  --action-glass-border:oklch(92% .008 285/.28);
}
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; min-height:100%; overflow-x:clip; background:#111; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-height:100dvh; }
#main-content { min-height:100dvh; display:grid; place-items:center; background:#050506; }
button,input { font:inherit; }
button { min-height:44px; border:1px solid rgba(255,255,255,.25); border-radius:2px; padding:.6rem 1rem; background:rgba(20,20,23,.9); color:var(--ink); cursor:pointer; }
button:hover:not(:disabled),button:focus-visible { border-color:#fff; background:#28282d; }
button:focus-visible,input:focus-visible { outline:2px solid #fff; outline-offset:2px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:rgba(255, 255, 254, 0.5); color:#121214; border-color:#a3a3a3; font-weight:700; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; background:#fff; color:#000; padding:.5rem; }
.skip-link:focus { top:1rem; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.stage { position:relative; width:min(100%,177.7778dvh); height:min(100dvh,56.25vw); aspect-ratio:16/9; min-height:0; overflow:hidden; isolation:isolate; }
.stage-bg { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; }
.stage-layer { position:absolute; max-height:96%; transform-origin:bottom center; pointer-events:none; }
.vignette { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.76),transparent 62%),linear-gradient(180deg,rgba(0,0,0,.48),transparent 35%,rgba(0,0,0,.65)); pointer-events:none; }
.title-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,340px); align-items:end; gap:2rem; padding:clamp(1.25rem,5vw,5rem); }
.title-copy { max-width:680px; }
.eyebrow { color:#cbc8c2; font-family:ui-monospace,monospace; font-size:.75rem; letter-spacing:.14em; }
h1 { margin:.2rem 0 1rem; font-size:clamp(2.5rem,8vw,6.5rem); line-height:1; }
.title-copy>p { max-width:50rem; line-height:1.8; }
.name-entry-screen { display:grid; place-items:center; }
.name-entry-card { width:min(100%,34rem); border:1px solid var(--line); background:rgba(10,10,12,.78); padding:clamp(1.25rem,4vw,2.5rem); }
.name-entry-card h1 { font-size:clamp(2rem,6vw,4rem); }
.name-entry-card form { display:grid; gap:.65rem; }
.name-entry-card label { color:var(--muted); }
.name-entry-card input { min-height:48px; width:100%; border:1px solid var(--line); border-radius:2px; padding:.65rem .8rem; background:rgba(0,0,0,.55); color:var(--ink); }
.name-entry-card form>div { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.6rem; }
.notice,.asset-wait { color:var(--muted); font-size:.8rem; }
.title-menu { display:grid; gap:.6rem; padding:1rem; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(8px); }
.cinematic-screen { background:#000; }
.cinematic-video { position:absolute; inset:0; width:100%; height:100%; }
.cinematic-poster { opacity:.48; }
.cinematic-animation-layer { position:absolute; inset:0; pointer-events:none; }
.cinematic-animation-layer.run-shake { animation:cinematic-shake .45s linear; }
.cinematic-animation-layer.run-pulse { animation:cinematic-pulse .7s ease-in-out; background:rgba(255,255,255,.18); }
.cinematic-animation-layer.run-fade { animation:cinematic-fade .9s ease-in-out; background:#000; }
.cinematic-status { position:absolute; left:max(1rem,env(safe-area-inset-left)); top:max(1rem,env(safe-area-inset-top)); color:var(--muted); font:700 .7rem/1 ui-monospace,monospace; letter-spacing:.14em; }
.cinematic-skip { position:absolute; right:max(1rem,env(safe-area-inset-right)); bottom:max(1rem,env(safe-area-inset-bottom)); z-index:5; background:rgba(8,8,10,.72); }
@keyframes cinematic-shake { 0%,100%{transform:translate(0)} 20%{transform:translate(-1.2%,.5%)} 40%{transform:translate(1%,-.7%)} 60%{transform:translate(-.7%,-.3%)} 80%{transform:translate(.8%,.6%)} }
@keyframes cinematic-pulse { 0%,100%{opacity:0} 50%{opacity:1} }
@keyframes cinematic-fade { 0%{opacity:0} 50%,100%{opacity:1} }
.topbar { position:relative; z-index:20; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:max(.65rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) .65rem max(.75rem,env(safe-area-inset-left)); background:linear-gradient(#09090bcf,transparent); font-size:.8rem; }
.topbar>span:nth-child(2) { color:var(--muted); }
.topbar nav { display:flex; gap:.35rem; }
.topbar button { min-height:32px; padding:.3rem .55rem; font-size:.7rem; background:var(--action-glass-bg); border-color:var(--action-glass-border); }
.topbar button:hover:not(:disabled),.topbar button:focus-visible { background:var(--action-glass-bg-hover); border-color:#fff; }
.asset-wait { position:absolute; z-index:10; top:4.5rem; left:1rem; margin:0; padding:.3rem .5rem; background:rgba(0,0,0,.62); }
.choice-window { position:absolute; z-index:30; left:0; right:0; bottom:0; min-height:clamp(150px,26vh,260px); padding:clamp(2rem,7vh,3.5rem) clamp(1.5rem,5vw,4rem) clamp(1rem,3vh,1.75rem); background:linear-gradient(to top,var(--message-scrim-strong) 0%,var(--message-scrim-mid) 45%,transparent 100%); }
.choice-window::before { content:none; }
.message-window { position:absolute; z-index:30; left:0; right:0; bottom:0; min-height:clamp(150px,26vh,260px); padding:clamp(2rem,7vh,3.5rem) clamp(1.5rem,5vw,4rem) clamp(1rem,3vh,1.75rem); background:linear-gradient(to top,var(--message-scrim-strong) 0%,var(--message-scrim-mid) 45%,transparent 100%); }
.speaker-row,.message-actions { position:relative; display:flex; flex-shrink:0; align-items:center; gap:.75rem; }
.speaker-row { justify-content:space-between; padding-bottom:.3rem; }
.speaker-row strong { font-size:clamp(.95rem,1.8vw,1.2rem); }
.speaker-row small { color:var(--muted); font-family:ui-monospace,monospace; }
.dialogue-text { position:relative; min-height:1.7em; margin:.45rem 0; font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.4; text-shadow:0 1px 3px var(--dialogue-text-shadow); }
.message-actions { justify-content:flex-end; width:fit-content; margin-left:auto; gap:.5rem; }
.message-actions button:not(.primary) { min-height:34px; padding:.35rem .7rem; font-size:.78rem; background:var(--action-glass-bg); border-color:var(--action-glass-border); }
.message-actions button:not(.primary):hover:not(:disabled),.message-actions button:not(.primary):focus-visible { background:var(--action-glass-bg-hover); border-color:#fff; }
.message-actions .mode { min-height:28px; padding:.15rem .5rem; font-size:.66rem; }
.message-actions .mode.active { background:var(--action-glass-bg-hover); border-color:#fff; color:#fff; }
.message-actions .dialogue-back { min-width:4.5rem; }
.message-actions .next { min-width:6.5rem; }
.choice-window { display:grid; align-content:end; gap:.85rem; }
.choice-window>p,.choice-list,.choice-actions { position:relative; }
.choice-window>p { margin:0; font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.4; text-shadow:0 1px 3px var(--dialogue-text-shadow); }
.choice-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.choice-list button { white-space:normal; }
.choice-actions { position:relative; display:flex; justify-content:flex-end; }
.effect-layer { position:absolute; inset:0; z-index:25; pointer-events:none; opacity:0; }
.effect-layer.run-flash { animation:flash .18s ease-out; }
.effect-layer.run-blackout { animation:blackout .7s ease-in-out; }
@keyframes flash { 0%,100%{opacity:0;background:#fff} 35%{opacity:1;background:#fff} }
@keyframes blackout { 0%{opacity:0;background:#000} 100%{opacity:1;background:#000} }
.menu-screen,.result-screen,.error-screen { width:100%; min-height:100dvh; padding:clamp(1rem,5vw,4rem); background:radial-gradient(circle at 80% 0,#292831,#0d0d0f 55%); }
.menu-screen>header { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); margin-bottom:2rem; padding-bottom:1rem; }
.menu-screen h1 { font-size:clamp(1.8rem,5vw,3.5rem); margin:0; }
.menu-screen h2 { font-size:1.1rem; }
.card-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.menu-card,.menu-screen>section,.settings-form { border:1px solid rgba(255,255,255,.18); background:rgba(10,10,12,.7); padding:1rem; }
.menu-card div { display:flex; gap:.5rem; }
.backlog { display:grid; gap:1rem; max-width:900px; padding-left:1.5rem; }
.backlog li { border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:.75rem; }
.backlog p { margin:.35rem 0; line-height:1.75; }
.settings-form { display:grid; gap:1.2rem; max-width:640px; }
.settings-form label:not(.check) { display:grid; grid-template-columns:10rem 1fr; align-items:center; gap:1rem; }
.check { display:flex; align-items:center; gap:.65rem; }
.result-screen { display:grid; align-content:center; max-width:none; }
.result-screen>* { max-width:720px; }
.result-screen h1 { font-size:clamp(2rem,6vw,5rem); }
.result-screen>div { display:flex; gap:.7rem; }
.error-screen pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.game-over-screen { width:100%; min-height:100dvh; display:grid; place-content:center; justify-items:center; gap:1rem; text-align:center; padding:clamp(1rem,5vw,4rem); background:#000; }
.game-over-title { color:#e11d2e; font-size:clamp(3rem,10vw,7rem); letter-spacing:.12em; text-shadow:0 0 24px rgba(225,29,46,.55); margin:0; }
.game-over-reason { max-width:36rem; color:#d8d5d0; }
.game-over-screen .notice { max-width:36rem; }
.orientation-gate { display:none; }
@media (orientation:portrait) and (max-width:1024px) {
  #main-content:has(.orientation-gate) .stage { visibility:hidden; }
  .orientation-gate { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; padding:2rem; background:radial-gradient(circle at 50% 35%,#2b2930,#08080a 65%); text-align:center; }
  .orientation-gate span { display:block; font-size:5rem; line-height:1; transform:rotate(90deg); }
  .orientation-gate strong { font-size:1.2rem; }
  .orientation-gate p { margin:0; color:var(--muted); }
}
@media (max-width:700px) {
  .title-screen { grid-template-columns:1fr; align-content:end; }
  .title-copy { align-self:end; }
  .topbar { grid-template-columns:1fr auto; }
  .topbar>span:nth-child(2) { display:none; }
  .topbar nav { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); }
  .topbar button { min-height:36px; padding:.25rem; }
  .asset-wait { top:6.4rem; }
  .choice-window { left:0; right:0; bottom:0; padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); min-height:220px; background:linear-gradient(to top,var(--message-scrim-strong-mobile) 0%,var(--message-scrim-mid-mobile) 50%,transparent 100%); }
  .message-window { left:0; right:0; bottom:0; min-height:0; height:150px; display:flex; flex-direction:column; padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--message-scrim-strong-mobile) 0%,var(--message-scrim-mid-mobile) 50%,transparent 100%); }
  .dialogue-text { flex:1; min-height:0; overflow-y:auto; }
  .choice-list { grid-template-columns:1fr; }
  .message-actions .next { min-width:5rem; }
  .message-actions .dialogue-back { min-width:4rem; }
  .settings-form label:not(.check) { grid-template-columns:1fr; gap:.35rem; }
}
@media (orientation:landscape) and (max-height:500px) {
  .title-screen { grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:1rem; padding:1rem 1.5rem; }
  .title-copy h1 { font-size:clamp(2.5rem,10vh,4rem); }
  .title-copy>p { margin:.5rem 0; line-height:1.45; font-size:.78rem; }
  .title-menu { padding:.65rem; gap:.35rem; }
  .title-menu button { min-height:38px; padding:.35rem .7rem; }
  .topbar { grid-template-columns:auto 1fr auto; padding:.35rem .65rem; }
  .topbar>span:nth-child(2) { display:block; }
  .topbar nav { grid-column:auto; display:flex; }
  .topbar button { min-height:30px; }
  .asset-wait { top:3.2rem; }
  .choice-window { left:0; right:0; bottom:0; min-height:145px; padding:.65rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--message-scrim-strong-mobile) 0%,var(--message-scrim-mid-mobile) 55%,transparent 100%); }
  .message-window { left:0; right:0; bottom:0; min-height:0; height:136px; display:flex; flex-direction:column; padding:.6rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--message-scrim-strong-mobile) 0%,var(--message-scrim-mid-mobile) 55%,transparent 100%); }
  .speaker-row { padding-bottom:.3rem; }
  .dialogue-text { flex:1; min-height:0; margin:.3rem 0; overflow-y:auto; font-size:clamp(.8rem,3vh,.95rem); line-height:1.4; }
  .message-actions .mode { min-height:26px; }
  .message-actions .next { min-height:32px; }
  .message-actions .dialogue-back { min-height:32px; }
  .choice-window { align-content:end; }
  .choice-window>p { margin:.2rem 0; font-size:.8rem; }
  .choice-list button { min-height:38px; padding:.35rem .7rem; }
}
@media (orientation:landscape) and (max-width:59rem) and (max-height:31.25rem) {
  .title-copy>p { font-size:.875rem; line-height:1.4; }
  .title-menu { gap:.5rem; }
  .title-menu button,.topbar button,.choice-list button,.choice-actions button { position:relative; }
  .title-menu button::after,.choice-list button::after { content:""; position:absolute; inset:-3px 0; }
  .topbar button::after { content:""; position:absolute; inset:-5px 0; }
  .message-window {
    left:0;
    right:0;
    bottom:0;
    min-height:0;
    height:34%;
    display:flex;
    flex-direction:column;
    padding-top:.5rem;
    padding-right:calc(.8rem + env(safe-area-inset-right));
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
    padding-left:calc(.8rem + env(safe-area-inset-left));
    background:linear-gradient(to top,var(--message-scrim-strong-mobile) 0%,var(--message-scrim-mid-mobile) 60%,transparent 100%);
  }
  .speaker-row { min-height:1.25rem; padding-bottom:.2rem; }
  .speaker-row strong { font-size:.82rem; }
  .speaker-row small { font-size:.58rem; }
  .dialogue-text {
    flex:1;
    min-height:0;
    margin:.25rem 0 .3rem;
    overflow-y:auto;
    font-size:.875rem;
    line-height:1.35;
  }
  .message-actions { gap:.3rem; }
  .message-actions button {
    position:relative;
    min-height:30px;
    padding:.2rem .55rem;
    white-space:nowrap;
    font-size:.68rem;
  }
  .message-actions button::after { content:""; position:absolute; inset:-7px 0; }
  .message-actions .mode { min-height:30px; padding:.2rem .45rem; font-size:.64rem; }
  .message-actions .dialogue-back { min-width:4.25rem; min-height:30px; }
  .message-actions .next { min-width:5.25rem; min-height:30px; }
  .choice-window {
    left:0;
    right:0;
    bottom:0;
    min-height:0;
    max-height:52%;
    gap:.35rem;
    padding:.4rem calc(.8rem + env(safe-area-inset-right)) calc(.45rem + env(safe-area-inset-bottom)) calc(.8rem + env(safe-area-inset-left));
    background:linear-gradient(to top,var(--message-scrim-strong-mobile) 0%,var(--message-scrim-mid-mobile) 60%,transparent 100%);
    overflow:hidden;
  }
  .choice-window::before { content:none; }
  .choice-window>p { max-height:2.7em; margin:.1rem 0; overflow-y:auto; font-size:.75rem; line-height:1.35; }
  .choice-list { min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; overflow-y:auto; overscroll-behavior:contain; }
  .choice-list button { min-height:32px; padding:.2rem .5rem; font-size:.72rem; line-height:1.25; }
  .choice-actions button { min-height:30px; padding:.2rem .55rem; white-space:nowrap; font-size:.68rem; }
  .choice-actions button::after { content:""; position:absolute; inset:-7px 0; }
}
@media (orientation:landscape) and (max-width:40rem) and (max-height:31.25rem) {
  .title-copy>p:not(.notice) { display:none; }
  .title-copy .notice { margin:.35rem 0; font-size:.875rem; line-height:1.35; }
}
@media (display-mode:standalone) and (orientation:landscape) and (max-width:59rem),
       (orientation:landscape) and (max-width:59rem) and (max-height:31.25rem) {
  html[data-display-mode="standalone"] .stage { width:100%; height:100dvh; aspect-ratio:auto; }
  html[data-display-mode="standalone"] .title-screen {
    padding-left:max(1.5rem,env(safe-area-inset-left));
    padding-right:max(1.5rem,env(safe-area-inset-right));
  }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }