@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Share+Tech+Mono&display=swap');

:root{
  --brass:#b88a45; --brass-hi:#e0bd77; --ink:#120e0b; --paper:#e7d7b8; --text:#f3eadb;
  --panel:rgba(15,12,10,.90); --choice-bar:none;

  /* ORPHEA ARCHIVE web typography source of truth: /archive.css */
  --display:"Cinzel","Noto Serif KR","Malgun Myeongjo",Batang,serif;
  --serif:"Cormorant Garamond","EB Garamond","Noto Serif KR","Malgun Myeongjo",Batang,serif;
  --body:"EB Garamond","Cormorant Garamond","Noto Serif KR","Malgun Myeongjo",Batang,serif;
  --mono:"Share Tech Mono","Noto Sans Mono","Malgun Gothic",monospace;

  /* Engine aliases: keep semantic roles stable across episodes. */
  --font-system:var(--mono);
  --font-display:var(--display);
  --font-record:var(--body);
  --font-voice:var(--serif);
}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;background:#050403;color:var(--text);font-family:var(--font-record);overflow:hidden}
button,input{font:inherit} button{cursor:pointer}
#game-shell{width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#16110c,#030302 72%)}
#game{position:relative;width:min(100vw,177.777vh);height:min(100vh,56.25vw);aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 0 80px #000}
.layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#bg-layer,#cg-layer{background-size:cover;background-position:center;transition:opacity .32s ease,filter .32s ease}
#bg-layer.black{background:#000}
#cg-layer{opacity:0;z-index:2} #cg-layer.active{opacity:1}
#cg-layer.cg-framed{
  inset:auto;left:18%;top:13%;width:64%;height:57%;
  background-size:cover;background-position:center;
  border:8px solid #3b2916;
  outline:2px solid rgba(208,163,91,.82);
  box-shadow:
    0 18px 55px rgba(0,0,0,.72),
    inset 0 0 0 2px rgba(224,189,119,.38),
    0 0 0 5px rgba(26,18,11,.96);
}
#cg-layer.cg-framed:before{
  content:"";position:absolute;inset:8px;
  border:1px solid rgba(224,189,119,.45);pointer-events:none
}
#cg-layer.cg-highlight{
  left:18%;top:12.5%;width:64%;height:auto;aspect-ratio:16/9;z-index:11;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:#0a0705;
  animation-name:ao-framed-cg-settle;
  animation-timing-function:ease-out;
  animation-fill-mode:both;
}
@keyframes ao-framed-cg-settle{
  from{transform:scale(.992);filter:brightness(.92);opacity:.65}
  to{transform:scale(1);filter:brightness(1);opacity:1}
}
#cg-layer.cg-highlight.cg-exiting{
  animation:none;
  transition:opacity var(--cg-exit-ms,400ms) ease,filter var(--cg-exit-ms,400ms) ease,transform var(--cg-exit-ms,400ms) ease;
  opacity:0;
  filter:brightness(.96);
  transform:scale(1.004);
}
#game.framed-cg-active #bg-layer{filter:brightness(.56) saturate(.82)}
#game.framed-cg-active #character-layer{opacity:.14;transition:opacity .18s ease}
#game.framed-cg-active #dialogue-box,
#game.framed-cg-active #choice-layer,
#game.framed-cg-active #stat-change{display:none!important}
#cg-layer.cg-prop{
  inset:auto;left:38%;top:26%;width:24%;height:32%;z-index:18;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 15px 22px rgba(0,0,0,.72));
}
#cg-layer.cg-small-prop{
  inset:auto;left:46%;top:32%;width:8%;height:12%;z-index:18;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.66));
}
#cg-layer.cg-document{
  inset:auto;left:35%;top:9%;width:30%;height:69%;z-index:18;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.76));
}
#character-layer{z-index:3}.character{position:absolute;bottom:var(--char-bottom,-3%);height:var(--char-height,96%);max-width:72%;object-fit:contain;transform:translateX(-50%) translateY(12px);opacity:0;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));transition:opacity .22s,transform .22s}
.character.visible-character{opacity:1;transform:translateX(-50%) translateY(0)}
.character.hidden-character{opacity:0}
.character.overlay-suppressed{opacity:0!important;transform:translateX(-50%) translateY(8px)!important;pointer-events:none}

#vignette{z-index:4;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.35) 100%)}
.frame{
  z-index:12;object-fit:fill;
  transition:opacity .25s ease,filter .25s ease
}
.frame.ingame-frame{opacity:.92}

#topbar{
  position:absolute;z-index:20;inset:0 0 auto 0;height:11.5%;
  pointer-events:none
}
.brand-block{
  position:absolute;left:5.2%;top:17%;
  display:flex;flex-direction:column;gap:4px;text-shadow:0 2px 8px #000
}
.brand-block strong{
  font:400 clamp(12px,.92vw,16px)/1.1 var(--font-system);
  letter-spacing:.24em;color:#d7ae5c;white-space:nowrap
}
.brand-block small{
  font:400 clamp(7px,.52vw,9px)/1.1 var(--font-display);
  letter-spacing:.18em;color:rgba(210,180,124,.58);text-transform:uppercase;white-space:nowrap
}
.brand-block #prototype-badge{
  font:400 clamp(8px,.65vw,11px)/1.4 var(--font-system);
  letter-spacing:.15em;color:var(--brass-hi)
}
#system-strip{
  position:absolute;left:50%;top:13%;
  transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;filter:drop-shadow(0 5px 12px #0008)
}
#controls{
  display:flex;gap:5px;pointer-events:auto;
  flex-wrap:nowrap;justify-content:center
}
#controls button,.modal-head button{
  border:1px solid rgba(184,138,69,.55);
  background:rgba(12,9,7,.78);color:#dbc49d;
  padding:6px 9px;
  font:400 clamp(8px,.65vw,11px)/1 var(--font-system);
  letter-spacing:.12em;white-space:nowrap
}
#controls button:hover,#controls button.active{
  background:#5a3e1e;color:#fff4d5;border-color:var(--brass-hi)
}
.frame-device{position:absolute;z-index:22;border:0;background:transparent;padding:0;pointer-events:auto}
.astrolabe-anchor{
  /* v0.29: complete master + transparent safe canvas.
     The visible astrolabe disk stays concentric with the lower-left frame ring. */
  left:-0.434%;bottom:-0.621%;width:15.575%;aspect-ratio:1/1;
  z-index:18;
  overflow:visible;
  filter:drop-shadow(0 5px 8px #0009);transition:transform .18s,filter .18s
}
.astrolabe-anchor:hover,.astrolabe-anchor.active{
  transform:scale(1.04);filter:drop-shadow(0 8px 14px #000d) brightness(1.08)
}
#astrolabe-icon{width:100%;height:100%;object-fit:contain}

.stat-orb{
  position:absolute;width:7.86%;aspect-ratio:1/1;border-radius:50%;
  border:1px solid rgba(218,177,104,.88);
  background:var(--orb-color,#b89054);
  opacity:var(--orb-opacity,.7);
  box-shadow:
    0 0 0 2px rgba(36,24,12,.94),
    0 0 8px var(--orb-glow,rgba(196,153,83,.45)),
    inset 0 0 4px rgba(255,238,190,.65);
  transition:opacity .25s,filter .25s,transform .25s;
  pointer-events:none
}
.orb-n{left:49.91%;top:13.93%;transform:translate(-50%,-50%)}
.orb-e{right:11.83%;top:49.74%;transform:translate(50%,-50%)}
.orb-s{left:50%;bottom:13.93%;transform:translate(-50%,50%)}
.orb-w{left:11.66%;top:49.48%;transform:translate(-50%,-50%)}
.stat-orb.pulse{animation:orbPulse .85s ease-out}
@keyframes orbPulse{
  0%{filter:brightness(1);box-shadow:0 0 0 2px rgba(36,24,12,.94),0 0 7px var(--orb-glow)}
  35%{filter:brightness(1.55);box-shadow:0 0 0 2px rgba(36,24,12,.94),0 0 20px var(--orb-glow)}
  100%{filter:brightness(1);box-shadow:0 0 0 2px rgba(36,24,12,.94),0 0 7px var(--orb-glow)}
}

.lantern-anchor{
  right:1.50%;top:2.65%;width:9.15%;height:25.8%;
  z-index:13;
  display:flex;align-items:flex-start;justify-content:center;pointer-events:none
}
#status-lantern,#status-lantern-light,#status-lantern-light-next{
  position:absolute;left:50%;top:0;
  width:auto;max-width:100%;height:100%;object-fit:contain;object-position:center top;
  transform:translateX(-50%);transform-origin:50% 0;pointer-events:none
}
/* A-03 invariant: the physical lantern housing is permanent. Survival changes only the emitted/reflected light layer. */
#status-lantern{opacity:1;filter:drop-shadow(0 5px 10px #000c)}
#status-lantern-light,#status-lantern-light-next{
  filter:drop-shadow(0 0 8px rgba(224,145,55,.18));
  transition:opacity .9s ease-in-out,filter .45s ease
}
#status-lantern-light,#status-lantern-light-next{opacity:0}
#status-lantern-light.lantern-light-active,#status-lantern-light-next.lantern-light-active{opacity:1}

.status-panel{
  position:absolute;z-index:43;left:3.1%;bottom:18%;
  width:clamp(270px,21vw,355px);padding:14px 16px 12px;
  background:linear-gradient(180deg,rgba(20,16,12,.96),rgba(8,7,6,.97));
  border:1px solid rgba(184,138,69,.78);box-shadow:0 12px 34px #000c
}
.status-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.status-head strong{letter-spacing:.15em;color:#e3c181}
.status-head button{border:0;background:transparent;color:#d8bd8b;font-size:22px}
.status-panel small{display:block;margin-top:8px;opacity:.42;text-transform:uppercase;font:8px var(--font-system);letter-spacing:.12em}
.status-row{
  display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;
  min-height:46px;padding:5px 0;border-top:1px solid rgba(185,140,72,.16)
}
.status-row img{width:36px;height:36px;object-fit:contain}
.status-row span{font-size:clamp(13px,.9vw,16px)}
.status-row strong{font-size:clamp(18px,1.35vw,23px);color:#f0d6a4}

.stat-change{
  position:absolute;z-index:45;left:13.9%;bottom:22.1%;
  width:clamp(300px,22vw,372px);height:clamp(68px,6.8vw,94px);
  display:flex;align-items:center;justify-content:center;
  padding:11px 13% 10px 13%;
  background-image:var(--result-strip);
  background-size:100% 100%;background-repeat:no-repeat;
  border:0;box-shadow:none;
  opacity:1;transition:opacity .22s,transform .22s
}
.stat-change.hidden{display:none}
#stat-change-icon{display:none}
.stat-change > div{width:100%;text-align:center;color:#342313;text-shadow:none;font-family:var(--font-system);min-width:0}
.stat-change-main{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:center;gap:11px;width:100%;white-space:nowrap;word-break:keep-all}
#stat-change-label{display:block;color:#4e3218;font-size:clamp(18px,1.18vw,22px);font-weight:700;white-space:nowrap;word-break:keep-all;flex:0 1 auto}
#stat-change-value{display:block;font-size:clamp(24px,1.72vw,31px);font-weight:700;color:#2f1c0d;white-space:nowrap;flex:0 0 auto}
#stat-change-total{display:none!important}

#stat-values{display:none!important}
.floating-panel{position:absolute;z-index:40;left:50%;top:10%;transform:translateX(-50%);padding:12px 14px;background:#120e0be8;border:1px solid #73552d;box-shadow:0 10px 30px #000a;display:grid;gap:9px}.floating-panel label{display:grid;grid-template-columns:35px 130px;gap:8px;align-items:center;font:11px Arial,sans-serif}.hidden{display:none!important}
#dialogue-box{position:absolute;z-index:25;left:16.4%;right:7.2%;bottom:4.8%;min-height:18%;padding:3.2% 4.0% 2.1%;background:linear-gradient(180deg,rgba(23,18,14,.90),rgba(8,7,6,.94));border:1px solid rgba(186,141,73,.7);box-shadow:0 10px 40px #000b,inset 0 0 0 1px #000;cursor:pointer}#dialogue-box:before{content:"";position:absolute;inset:5px;border:1px solid rgba(224,189,119,.18);pointer-events:none}#speaker{position:absolute;left:2.6%;top:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-width:108px;min-height:38px;padding:8px 18px;transform:translateY(-46%);background:#342313;border:1px solid #a4773d;color:#f3d59d;font:700 clamp(15px,1.02vw,18px)/1.15 var(--font-record);letter-spacing:.04em;box-shadow:0 5px 12px #0008}#speaker.empty{visibility:hidden}#dialogue-text{display:block;padding-top:.15em;font-family:var(--font-record);font-size:clamp(15px,1.35vw,24px);line-height:1.58;text-shadow:0 2px 2px #000;white-space:normal;word-break:keep-all;line-break:strict;overflow-wrap:break-word;text-wrap:pretty}#dialogue-text.thought{font-family:var(--font-voice);font-style:italic;color:#e4dacb}.advance-mark{position:absolute;right:2.5%;bottom:10%;font-size:10px;color:#cda45d;animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.25;transform:translateY(2px)}}

.center-presentation{
  position:absolute;z-index:48;inset:0;
  pointer-events:none;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 48%,rgba(0,0,0,.14),rgba(0,0,0,.36) 68%,rgba(0,0,0,.48));
}
.center-presentation-card{
  width:min(560px,54%);min-height:210px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 42px;text-align:center;
  background:radial-gradient(circle at 50% 42%,rgba(29,21,13,.86),rgba(7,5,4,.95) 74%);
  border:1px solid rgba(184,138,69,.72);
  box-shadow:0 22px 72px #000,inset 0 0 0 4px rgba(0,0,0,.65);
}
#sync-label{
  font:600 clamp(9px,.68vw,12px)/1.25 var(--font-system);
  letter-spacing:.10em;color:#c9a663
}
#sync-value{
  display:block;margin-top:10px;
  font:400 clamp(26px,2.8vw,42px)/1 var(--font-system);
  color:#f0d5a0;text-shadow:0 3px 16px #000
}
#sync-subtitle{
  max-width:88%;margin:14px 0 0;color:#e0d3bf;
  font-size:clamp(12px,.95vw,16px);line-height:1.55
}
.center-presentation-card small{
  margin-top:14px;font:600 8px/1 var(--font-system);
  letter-spacing:.12em;color:rgba(201,166,99,.55)
}
.center-presentation.timed-presentation .center-presentation-card small{display:none}
.center-presentation.system-presentation .center-presentation-card{min-height:190px}
.center-presentation.system-presentation #sync-label{letter-spacing:.18em}
.center-presentation.system-presentation #sync-value{max-width:92%;margin-top:16px;font:400 clamp(16px,1.45vw,24px)/1.5 var(--font-system);letter-spacing:.07em;text-wrap:balance}
.center-presentation.system-presentation .center-presentation-card small{display:block}

.sync-rule{
  width:76%;height:4px;margin-top:20px;
  background:rgba(184,138,69,.18);overflow:hidden
}
#sync-rule-fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#86602f,#e0bd77);
  transition:width .28s ease
}

#choice-layer{
  position:absolute;z-index:30;
  left:50%;top:50%;bottom:auto;
  width:min(58.5%,920px);
  transform:translate(-50%,-50%);
  display:grid;gap:1.25vh
}
.choice-button{
  position:relative;width:100%;height:clamp(170px,18.3vh,184px);
  min-height:0;box-sizing:border-box;
  padding:8px 4.2% 8px 4.2%;
  border-style:solid;
  border-width:54px 96px;
  border-image-source:var(--choice-bar);
  border-image-slice:165 398 fill;
  border-image-width:1;
  border-image-repeat:stretch;
  background:none;color:#2c1c0d;text-align:center;
  font-family:var(--font-record);font-weight:700;font-size:clamp(16px,1.08vw,20px);line-height:1.28;
  filter:drop-shadow(0 9px 13px #0009);
  transition:transform .14s,filter .14s;
  display:flex;align-items:center;justify-content:center
}
.choice-button > span:last-child,.choice-text{
  display:block;max-width:100%;padding:0 2.8% 0 4.6%;
  white-space:normal;word-break:keep-all;line-break:strict;overflow-wrap:normal
}
.choice-button:hover:not(:disabled):not(.choice-status-locked){
  transform:translateY(-3px) scale(1.012);
  filter:drop-shadow(0 13px 17px #000c) brightness(1.06)
}
.choice-button:disabled{filter:grayscale(1) brightness(.58);cursor:not-allowed}
.choice-button.choice-hidden-locked{opacity:.72}
.choice-button.choice-hidden-locked .choice-text{letter-spacing:.18em;color:rgba(72,54,36,.72)}
.choice-button.choice-status-locked{
  filter:grayscale(.88) brightness(.70) drop-shadow(0 7px 10px #0007);
  opacity:.86;cursor:not-allowed
}
.choice-button.choice-status-locked .choice-text{color:rgba(55,43,31,.88)}
.choice-button.choice-status-locked:focus-visible{outline:2px solid rgba(189,145,83,.72);outline-offset:3px}
.choice-key{
  position:absolute;left:24px;top:50%;
  width:22px;text-align:center;
  transform:translateY(-50%);
  font-family:var(--font-system);color:#6e481d;font-size:.92em
}
#toast{position:absolute;z-index:60;left:50%;top:16%;transform:translate(-50%,-8px);opacity:0;padding:9px 16px;background:#17110de8;border:1px solid #8f6837;color:#efd7aa;transition:.2s;font:400 12px/1.2 var(--font-system);letter-spacing:.03em;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#debug-status{display:none;position:absolute;z-index:15;right:5%;bottom:2%;font:9px var(--font-system);color:#ffffff48;letter-spacing:.07em}body.debug #debug-status{display:block}
.modal-overlay{position:absolute;z-index:100;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}.archive-card{width:min(720px,76%);max-height:78%;overflow:auto;padding:34px 42px;background:linear-gradient(#20170f,#0e0b09);border:1px solid #946a35;box-shadow:0 20px 80px #000,inset 0 0 0 4px #0b0806,inset 0 0 0 5px #5e4528}.archive-card h1{font-size:clamp(35px,4vw,64px);margin:.2em 0 .1em;color:#e4c181;letter-spacing:.04em}.archive-card h2{font-family:var(--font-display);color:#e4c181}.eyebrow{font:400 10px var(--font-system);letter-spacing:.2em;color:#ae8040}.start-note,.prototype-note{color:#c7b79c;line-height:1.6}.button-row{display:flex;gap:10px;margin:25px 0 15px}.archive-card button{font-family:var(--font-system);padding:10px 18px;border:1px solid #8b6534;background:#17100b;color:#d9bd8c}.archive-card button.primary{background:#6d4b25;color:#fff0cf;border-color:#c09250}.archive-card button:disabled{opacity:.35;cursor:not-allowed}.archive-card small{font-family:var(--font-system);opacity:.55}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.history-card{height:70%}#history-list{display:grid;gap:12px}.history-entry{display:grid;grid-template-columns:90px 1fr;gap:12px;border-bottom:1px solid #ffffff14;padding-bottom:8px}.history-entry strong{color:#d5ad70}.history-entry span{line-height:1.5;color:#e2d9ca}.complete-grid{display:grid;gap:8px;margin:18px 0}.complete-grid div{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:9px;border-bottom:1px solid #ffffff18}.complete-grid span{opacity:.55}.complete-grid strong{color:#e1c797}
@media (max-width:760px){
  .brand-block{left:3%;top:12%}
  .brand-block small,#prototype-badge{display:none!important}
  #system-strip{top:7%}
  #controls{gap:2px}
  #controls button{padding:5px 5px;font-size:6.5px}
  .astrolabe-anchor{left:-0.493%;bottom:-0.718%;width:15.687%}
  .lantern-anchor{right:.4%;top:2.45%;width:11.6%;height:23.8%}
  .status-panel{left:3%;bottom:19%;width:62vw}
  .stat-change{left:16%;bottom:23%;width:54vw;height:78px}
  #dialogue-box{left:18%;right:4%;bottom:3%;min-height:25%;padding:6.4% 5% 4%}
  .center-presentation-card{width:76%;min-height:170px;padding:24px 26px}
  #cg-layer.cg-framed{left:10%;top:14%;width:80%;height:52%}
  #cg-layer.cg-highlight{left:8%;top:18%;width:84%;height:auto;aspect-ratio:16/9;background-size:contain}
  #cg-layer.cg-prop{left:30%;top:27%;width:40%;height:30%}
  #cg-layer.cg-small-prop{left:42%;top:32%;width:16%;height:12%}
  #cg-layer.cg-document{left:27%;top:10%;width:46%;height:66%}
  #choice-layer{width:88%;top:49%;gap:.8vh}
  .choice-button{height:132px;border-width:38px 64px;font-size:clamp(12px,2.6vw,15px);padding:6px 3.5%}
  .choice-key{left:14px}
  .archive-card{width:90%;padding:25px}
}

/* v0.12 Asset Presentation Contract ---------------------------------------
   Dedicated CGs are transient cinematic beats. They must never behave as a
   persistent background. BG stays underneath and is restored after the beat. */
#cg-layer.cinematic-cg{
  inset:0;
  width:100%;height:100%;
  z-index:11;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform-origin:50% 48%;
  animation-name:ao-cg-slow-push;
  animation-timing-function:ease-out;
  animation-fill-mode:both;
}
@keyframes ao-cg-slow-push{
  from{transform:scale(1);filter:brightness(.96)}
  to{transform:scale(1.025);filter:brightness(1)}
}
#game.cinematic-cg-active #character-layer{
  opacity:0!important;
  transition:opacity .16s ease;
}
#game.cinematic-cg-active #dialogue-box,
#game.cinematic-cg-active #choice-layer,
#game.cinematic-cg-active #stat-change{
  display:none!important;
}

/* v2.1.2 player-facing intro acceptance lock */
#prototype-badge{display:none!important}
.episode-start-subtitle{margin:.2em 0 0;color:#d9c7a8;font-size:clamp(16px,1.2vw,22px);letter-spacing:.025em}
.character[data-entity="abigail"][data-state="hysteria"].visible-character{animation:ao-abigail-tremor .20s ease-in-out infinite alternate}
@keyframes ao-abigail-tremor{from{translate:-1px 0}to{translate:1px 1px}}

/* ORPHEA ARCHIVE cross-media typography lock: archive-system / record / voice. */
.start-card h1{font:400 clamp(30px,3.4vw,54px)/1.05 var(--font-system);letter-spacing:.22em;color:#d7ae5c;text-transform:uppercase}
.episode-start-subtitle{font:600 clamp(9px,.72vw,12px)/1.25 var(--font-display);letter-spacing:.18em;color:rgba(210,180,124,.72);text-transform:uppercase}
.modal-head,.eyebrow,#status-panel .status-head{font-family:var(--font-system);letter-spacing:.12em}

/* Cross-media type roles — exact website families. */
.type-system{font-family:var(--font-system)!important}
.type-display{font-family:var(--font-display)!important}
.type-body{font-family:var(--font-record)!important}
.type-voice{font-family:var(--font-voice)!important;font-style:italic}


/* v0.36 — TITLE CARD / GAME BRAND LOCK -----------------------------------
   Source of truth: v0.32 card presentation.
   Preserve the original contained Archive card. Do not turn title screen into
   a full-page landing layout. Only align typography/copy and restrained hover
   behavior with the locked Orphea Archive brand language. */
.title-card-overlay{
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(3px);
}
.title-card-overlay:before,
.title-card-overlay:after{content:none!important}
.title-card-overlay .title-card{
  width:min(720px,76%);
  max-height:78%;
  overflow:auto;
  padding:34px 42px 30px;
  background:linear-gradient(#20170f,#0e0b09);
  border:1px solid #946a35;
  box-shadow:0 20px 80px #000,inset 0 0 0 4px #0b0806,inset 0 0 0 5px #5e4528;
  text-align:left;
}
.title-system-label{
  margin:0 0 12px;
  font:400 9px/1.2 var(--font-system);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#8f7955;
}
.title-card-overlay .start-card h1{
  margin:.10em 0 .12em;
  font:400 clamp(30px,3.4vw,54px)/1.05 var(--font-system);
  letter-spacing:.22em;
  color:#d7ae5c;
  text-transform:uppercase;
}
.title-card-overlay .episode-start-subtitle{
  margin:.2em 0 0;
  font:600 clamp(9px,.72vw,12px)/1.25 var(--font-display);
  letter-spacing:.18em;
  color:rgba(210,180,124,.72);
  text-transform:uppercase;
}
.title-card-overlay .title-button-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:22px 0 15px;
}
.title-card-overlay .archive-card button{
  min-height:46px;
  font:400 11px/1.1 var(--font-system);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:12px 16px;
  border:1px solid rgba(190,145,72,.52);
  background:#17100b;
  color:#d9bd8c;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.title-card-overlay .archive-card button.primary{
  background:#281a0f;
  color:#f2deb4;
  border-color:rgba(215,171,92,.88);
  box-shadow:inset 0 0 0 1px rgba(215,171,92,.08);
}
.title-card-overlay .archive-card button:hover:not(:disabled),
.title-card-overlay .archive-card button:focus-visible:not(:disabled){
  background:#251910;
  border-color:#d1aa53;
  color:#f0dab0;
  outline:none;
}
.title-card-overlay .archive-card small{
  font:400 9px/1.2 var(--font-system);
  letter-spacing:.06em;
  color:rgba(199,183,156,.50);
}


/* v0.43 — adaptive nine-slice choice contract
   Source choice frame is 2048×682 and already uses 9-slice coordinates:
   border-image-slice: 165 398 fill.
   Compact modes preserve corner proportions by scaling rendered border widths
   rather than letting top/bottom borders consume the whole button. */

#choice-layer.choice-compact-4{
  gap:1.05vh;
  width:min(59.5%,930px);
}
#choice-layer.choice-compact-4 .choice-button{
  height:clamp(146px,14.8vh,160px);
  border-width:38px 92px;
  font-size:clamp(16px,1.08vw,20px);
  line-height:1.28;
  padding:8px 4%;
}

#choice-layer.choice-compact-5-plus{
  gap:.9vh;
  width:min(60.5%,940px);
}
#choice-layer.choice-compact-5-plus .choice-button{
  height:clamp(126px,12.4vh,138px);
  border-width:32px 77px;
  font-size:clamp(16px,1.08vw,20px);
  line-height:1.28;
  padding:8px 3.8%;
}
#choice-layer.choice-compact-5-plus .choice-key,
#choice-layer.choice-compact-4 .choice-key{
  left:20px;
  font-size:.84em;
}

@media (max-width:760px){
  #choice-layer.choice-compact-4,
  #choice-layer.choice-compact-5-plus{
    width:91%;
  }
  #choice-layer.choice-compact-4 .choice-button{
    height:clamp(104px,15.2vh,118px);
    border-width:26px 63px;
    font-size:clamp(13px,2.7vw,16px);
  }
  #choice-layer.choice-compact-5-plus{
    gap:.55vh;
  }
  #choice-layer.choice-compact-5-plus .choice-button{
    height:clamp(90px,12.8vh,102px);
    border-width:22px 53px;
    font-size:clamp(12px,2.55vw,15px);
  }
}

/* v0.58 series-core document presentation contract.
   Legal/document inserts own the central frame while preserving story-state roster for restoration. */
#character-layer.document-presentation-suppressed img.character {
  opacity: 0 !important;
  pointer-events: none !important;
}


/* EP01 v0.70 — post-ending Archive Record.
   FRAMELESS PAPER LOCK: black simulation backdrop + one OA-derived parchment sheet.
   No brass/metal outer frame. OA identity comes from approved parchment material,
   typography, ink rules, relevant visual insert, and restrained controls. */
.ending-archive-overlay{
  z-index:130;
  background:rgba(2,2,2,.94);
  backdrop-filter:blur(7px) saturate(.56);
}
.ending-archive-card{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  width:min(1080px,89%);
  min-height:590px;
  max-height:88%;
  overflow:auto;
  padding:48px 62px 42px;
  color:#2c2117;
  border:0;
  border-radius:1px;
  background:
    linear-gradient(180deg,rgba(255,247,226,.035),rgba(91,56,25,.025)),
    url('assets/ui/archive_parchment_sheet.webp') center/cover no-repeat;
  box-shadow:0 32px 76px rgba(0,0,0,.78),0 0 0 1px rgba(219,191,143,.12);
}
.ending-archive-card::before{
  content:"";
  position:absolute;inset:14px;
  border:1px solid rgba(91,59,30,.16);
  pointer-events:none;z-index:0;
}
.ending-archive-card::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 68%,rgba(73,45,21,.055) 100%);
  pointer-events:none;z-index:0;
}
.ending-archive-card > *{position:relative;z-index:1}
.ending-archive-topline{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-bottom:12px;margin-bottom:22px;
  border-bottom:1px solid rgba(77,50,26,.28);
  font:600 10px var(--font-system);
  letter-spacing:.22em;
  color:#65472b;
}
.ending-archive-layout{
  display:grid;
  grid-template-columns:minmax(165px,225px) minmax(0,1fr);
  gap:clamp(28px,3.5vw,48px);
  align-items:center;
  min-height:325px;
}
.ending-archive-card:not(.has-visual) .ending-archive-layout{
  grid-template-columns:minmax(0,1fr);
  max-width:790px;
  margin-inline:auto;
}
.ending-archive-visual-wrap{
  position:relative;
  justify-self:center;
  width:min(225px,100%);
  height:260px;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(73,48,26,.28);
  background:rgba(83,58,33,.035);
  box-shadow:0 6px 18px rgba(49,31,15,.12);
}
.ending-archive-visual-wrap[data-visual-type="insert"],
.ending-archive-visual-wrap[data-visual-type="character"]{
  background:rgba(84,59,33,.022);
  border-color:rgba(73,48,26,.20);
  box-shadow:none;
}
.ending-archive-visual-wrap::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 22px rgba(41,25,13,.12);
  pointer-events:none;
}
.ending-archive-visual-wrap[data-visual-type="insert"]::after,
.ending-archive-visual-wrap[data-visual-type="character"]::after{box-shadow:none}
.ending-archive-visual{
  width:100%;height:100%;display:block;
  object-fit:cover;
  filter:saturate(.74) contrast(.96) sepia(.08) brightness(.96);
}
.ending-archive-visual-wrap[data-visual-type="insert"] .ending-archive-visual,
.ending-archive-visual-wrap[data-visual-type="character"] .ending-archive-visual{
  object-fit:contain;
  padding:10px;
  box-sizing:border-box;
  filter:saturate(.88) contrast(.97) sepia(.04);
}
.ending-archive-copy{min-width:0;padding-right:clamp(0px,1vw,8px)}
.ending-archive-classification{
  margin-bottom:9px;
  font:600 10px var(--font-system);
  letter-spacing:.18em;text-transform:uppercase;
  color:#765231;
}
.ending-archive-card h2{
  margin:0 0 18px;
  max-width:100%;
  font-family:var(--font-display);
  font-size:clamp(30px,3vw,var(--archive-title-size,42px));
  line-height:1.12;
  color:#2b1d13;
  letter-spacing:-.025em;
  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
}
.ending-archive-card p{
  margin:0;
  max-width:44em;
  font-family:var(--font-body);
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.72;
  color:#39291c;
  word-break:keep-all;
}
.ending-archive-source{
  margin-top:23px;padding-top:12px;
  border-top:1px solid rgba(72,47,25,.20);
  font:500 10px var(--font-system);
  letter-spacing:.08em;line-height:1.55;
  color:#70543a;
}
.ending-archive-record-action{
  display:flex;justify-content:flex-end;align-items:center;
  margin-top:14px;
}
.ending-archive-record-action button{
  min-width:178px;
  min-height:42px;padding:9px 17px;
  border:1px solid rgba(72,47,24,.44);
  background:rgba(238,219,178,.20);
  color:#49331f;
  font:600 10px var(--font-system);
  letter-spacing:.10em;
  box-shadow:none;
}
.ending-archive-record-action button:hover:not(:disabled),
.ending-archive-record-action button:focus-visible:not(:disabled){background:rgba(226,203,158,.36)}
.ending-archive-controls{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:25px;padding-top:17px;
  border-top:1px solid rgba(72,47,25,.21);
}
.ending-archive-controls button{
  min-width:178px;
  min-height:42px;padding:9px 17px;
  border:1px solid rgba(72,47,24,.44);
  background:rgba(238,219,178,.20);
  color:#49331f;
  font:600 10px var(--font-system);
  letter-spacing:.10em;
  box-shadow:none;
}
.ending-archive-controls button:hover:not(:disabled),
.ending-archive-controls button:focus-visible:not(:disabled){background:rgba(226,203,158,.36)}
.ending-archive-controls button.primary{
  background:#39281a;color:#ead9b7;border-color:#4a3320;
  box-shadow:inset 0 0 0 1px rgba(211,170,102,.16);
}
.ending-archive-controls button:disabled{opacity:.28;cursor:not-allowed}
.ending-archive-spacer{display:none}
#ending-archive-full,#ending-archive-restart{display:none}
.ending-archive-card.is-final #ending-archive-full,
.ending-archive-card.is-final #ending-archive-restart{display:inline-flex;justify-content:center;align-items:center}
.ending-archive-card.is-final #ending-archive-next{display:none}
@media (max-width:760px){
  .ending-archive-card{
    width:94%;max-height:92%;min-height:0;
    padding:42px 34px 36px;
  }
  .ending-archive-card::before{inset:10px}
  .ending-archive-layout{grid-template-columns:1fr;gap:18px;min-height:0}
  .ending-archive-visual-wrap{width:min(220px,68%);height:190px}
  .ending-archive-card h2{font-size:clamp(28px,7vw,var(--archive-title-size,38px))}
  .ending-archive-record-action{justify-content:flex-start}
  .ending-archive-controls{flex-wrap:wrap}
  .ending-archive-controls button{flex:0 1 190px;min-width:150px}
}

/* EP01 site integration v0.2 — mobile game orientation contract.
   The Orphea Archive site remains portrait-responsive; the 16:9 simulation itself
   is landscape-only on phone/tablet portrait viewports. Do not compress the VN
   into portrait. This guard blocks input until the physical viewport is landscape. */
#orientation-guard{display:none}
@media (orientation:portrait) and (max-width:900px){
  #orientation-guard{
    position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
    padding:max(24px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right))
            max(24px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
    background:
      radial-gradient(circle at 50% 36%,rgba(85,58,31,.20),transparent 34%),
      linear-gradient(rgba(3,3,2,.965),rgba(3,3,2,.992));
    color:#e9d7b4;text-align:center;touch-action:none;
  }
  .orientation-card{
    width:min(430px,90vw);padding:34px 30px 31px;
    border:1px solid rgba(184,138,69,.58);
    box-shadow:0 20px 80px #000,inset 0 0 0 4px #090705,inset 0 0 0 5px rgba(94,69,40,.76);
    background:linear-gradient(180deg,rgba(31,23,15,.97),rgba(13,10,8,.985));
  }
  .orientation-system{
    margin-bottom:22px;font:400 9px/1.25 var(--font-system);letter-spacing:.20em;
    color:#9c7c4f;text-transform:uppercase;
  }
  .orientation-device{
    position:relative;width:72px;height:44px;margin:0 auto 22px;
    border:2px solid #c79b54;border-radius:7px;transform:rotate(-90deg);
    box-shadow:0 0 20px rgba(199,155,84,.10);
    animation:ao-rotate-device 1.8s ease-in-out infinite alternate;
  }
  .orientation-device:before{
    content:"";position:absolute;left:50%;bottom:3px;width:14px;height:2px;
    transform:translateX(-50%);background:rgba(231,205,158,.65);border-radius:2px;
  }
  .orientation-device span{
    position:absolute;inset:5px;border:1px solid rgba(184,138,69,.26);
    background:radial-gradient(circle at 55% 44%,rgba(184,138,69,.08),transparent 62%);
  }
  .orientation-card h1{
    margin:0 0 12px;font:400 clamp(24px,7.5vw,34px)/1.05 var(--font-system);
    letter-spacing:.16em;color:#d7ae5c;text-transform:uppercase;
  }
  .orientation-card p{
    margin:0 0 9px;font:500 clamp(16px,4.6vw,20px)/1.45 var(--font-display);
    color:#e7d5b5;
  }
  .orientation-card small{
    display:block;font:400 10px/1.5 var(--font-system);letter-spacing:.07em;color:#9e8f77;
  }
  @keyframes ao-rotate-device{
    from{transform:rotate(-90deg)}
    to{transform:rotate(0deg)}
  }
}