:root{color-scheme:dark;--ink: #1a1230;--rose: #f4b6c1;--peach: #ffd3b8;--gold: #f0d18a;--violet: #7c6aa8;--moon: #9ec3e8;--cream: #fff4ea;--shadow: rgba(12, 6, 22, .55);font-family:Palatino Linotype,Palatino,Book Antiqua,Georgia,serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 20%,#3a2458,#120c1c 68%);color:var(--cream)}#stage{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw);margin:0 auto;overflow:hidden;box-shadow:0 0 80px #00000073}#game{display:block;width:100%;height:100%;background:#120c1c}.overlay{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.overlay button,.overlay input{pointer-events:auto}.topbar{display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 1.25rem;text-shadow:0 2px 12px var(--shadow)}.eyebrow{margin:0;letter-spacing:.28em;font-size:.68rem;color:var(--gold)}.topbar h1{margin:.15rem 0 0;font-weight:500;font-size:1.35rem}.controls{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end}.controls button,.doors button,.touch-pad button,.notes button{border:1px solid rgba(240,209,138,.45);background:#120c1c8c;color:var(--cream);border-radius:999px;padding:.4rem .8rem;font:inherit;cursor:pointer}.controls button[aria-pressed=true]{background:#f4b6c140}.vol{display:flex;align-items:center;gap:.4rem;font-size:.8rem}.hud{position:absolute;left:1.1rem;top:5.1rem;max-width:16rem;padding:.7rem .85rem;background:#120c1c6b;border:1px solid rgba(240,209,138,.28);border-radius:1rem;font-size:.82rem;line-height:1.4}.caption,.dialogue,.hint{position:absolute;left:50%;transform:translate(-50%);width:min(46rem,88%);text-align:center}.caption{bottom:7.4rem;font-size:1.15rem;line-height:1.45;text-shadow:0 3px 16px var(--shadow)}.dialogue{bottom:4.6rem;padding:.7rem 1rem;background:#120c1c8c;border:1px solid rgba(244,182,193,.35);border-radius:1rem}.labels{position:absolute;right:1.1rem;top:5.1rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}.labels span{padding:.25rem .65rem;border-radius:999px;background:#8c18308c;border:1px solid rgba(255,190,190,.45);font-size:.72rem;letter-spacing:.08em}.labels span.mercy{background:#c46e5c73}.doors{pointer-events:auto;position:absolute;left:50%;bottom:12%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}.doors button{min-width:13rem;padding:.8rem 1.2rem;background:linear-gradient(180deg,#f4b6c147,#120c1c99)}.doors .ghost{min-width:auto;opacity:.85}.touch-pad{pointer-events:auto;position:absolute;left:.7rem;bottom:.7rem;display:grid;grid-template-columns:repeat(4,3rem);gap:.35rem}.notes{pointer-events:auto;position:absolute;right:1rem;bottom:5.5rem;display:flex;gap:.4rem}.hint{bottom:1.15rem;font-size:.82rem;color:var(--peach);opacity:.9}[hidden]{display:none!important}@media (max-width: 820px),(orientation: portrait){.topbar{padding:.55rem .7rem}.topbar h1{font-size:1.05rem}.caption{bottom:8.6rem;font-size:1rem}.doors button{min-width:10rem}.hud{top:4.4rem;font-size:.74rem}}
/* Keep narrow/portrait UI in document flow around the unchanged 16:9 canvas. */
@media (max-width: 820px), (orientation: portrait) {
  #stage {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: max(.75rem, env(safe-area-inset-top))
      max(.75rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(.75rem, env(safe-area-inset-left));
  }
  #game {
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .overlay { display: contents; }
  .topbar {
    order: 0;
    flex-direction: column;
    gap: .75rem;
    padding: 0;
  }
  .controls { width: 100%; justify-content: flex-start; }
  .controls button, .controls a, .controls input,
  .doors button, .touch-pad button, .notes button {
    min-width: 44px;
    min-height: 44px;
  }
  .controls a { display: inline-flex; align-items: center; pointer-events: auto; }
  .vol { flex: 1 1 10rem; min-width: 0; }
  .vol input { flex: 1; min-width: 44px; width: 100%; }
  .hud, .caption, .dialogue, .labels, .doors, .touch-pad, .notes, .hint {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }
  .hud { order: 2; }
  .caption { order: 3; }
  .dialogue { order: 4; }
  .labels { order: 5; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .doors { order: 6; }
  .doors button { flex: 1 1 10rem; }
  .touch-pad { order: 7; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .touch-pad button { padding: .4rem .25rem; }
  .notes { order: 8; flex-wrap: wrap; }
  .hint { order: 9; line-height: 1.5; }
  sae-wink {
    position: relative;
    right: auto;
    bottom: auto;
    margin: .75rem max(.75rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom)) auto;
  }
}