/* ============ EMBERWATCH prototype styles ============ */
  /* ============ EMBERWATCH prototype styles ============ */
  * { margin:0; padding:0; box-sizing:border-box; }
  :root {
    --ui-font: "Courier New", Courier, monospace;
    --serif-font: Georgia, serif;
    --bg: #05070c;
    --panel: rgba(9, 14, 22, 0.82);
    --panel-strong: rgba(15, 22, 31, 0.9);
    --text: #e8edf6;
    --muted: #a9b7d0;
    --accent: #ff9a3c;
    --accent-strong: #ffb066;
    --cyan: #7fd4ff;
    --shadow: rgba(0,0,0,0.7);
  }
  html,body { width:100%; height:100%; overflow:hidden; background:#000;
    font-family:var(--ui-font); color:var(--text); font-size:clamp(18px,1vw + 15px,26px);
    line-height:1.5; letter-spacing:0.02em;
    -webkit-user-select:none; user-select:none; }
  #game { position:fixed; inset:0; }
  #game canvas { display:block; }

  /* ---- full-screen overlays ---- */
  .overlay { position:fixed; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; z-index:50; }
  .hidden { display:none !important; }

  /* ---- title screen ---- */
  #title { background:radial-gradient(ellipse at 50% 35%, #131a26 0%, #05070c 70%);
    cursor:pointer; }
  #title h1 { font-size:clamp(54px, 8vw, 128px); letter-spacing:0.35em; color:var(--accent);
    text-shadow:0 0 24px rgba(255,120,30,.55), 0 0 90px rgba(255,80,20,.25);
    font-weight:700; margin-left:0.35em; }
  #title h2 { margin-top:14px; font-size:clamp(20px, 2.6vw, 34px); letter-spacing:0.5em;
    color:#8fa3c8; margin-left:0.5em; }
  #title .mission { width:min(660px,90vw); margin-top:24px; color:var(--text); }
  #title .mission-title { color:var(--accent-strong); font-size:clamp(15px, 1.1vw + 10px, 22px); font-weight:700;
    letter-spacing:0.18em; }
  #title .mission p { margin-top:8px; font-size:clamp(18px, 1.2vw + 12px, 25px); line-height:1.7; color:#e6edf9; }
  #title .begin { margin-top:46px; font-size:clamp(24px, 2vw + 14px, 36px); letter-spacing:0.2em; color:#fff;
    animation:blink 1.6s ease-in-out infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.25} }
  #title .controls { margin-top:34px; font-size:clamp(16px, 1vw + 12px, 22px); line-height:1.9; color:#b4c4df;
    letter-spacing:0.08em; }
  #title .warn { margin-top:26px; font-size:clamp(12px, .7vw + 10px, 18px); color:#8c97ad;
    letter-spacing:0.12em; }
  @media (max-height:650px) {
    #title { justify-content:flex-start; overflow-y:auto; padding:32px 0; }
    #title .mission { margin-top:18px; }
    #title .begin { margin-top:28px; }
    #title .controls { margin-top:22px; }
    #title .warn { margin-top:18px; }
  }
  @media (max-width: 700px), (max-height: 700px) {
    html,body { font-size:20px; }
    #title h1 { font-size:min(13vw,92px); }
    #title h2 { font-size:min(5.2vw,24px); }
    #title .mission p, #title .controls, #title .begin { font-size: clamp(16px, 2.7vw, 24px); }
    #objective, #objective .obj-title, #objective .obj-hint, #prompt, #toast, #dialogue .who, #dialogue .line, #dialogue .next, #ending p, #pausehint { font-size: larger; }
  }
  #loaderr { background:#0a0a0a; z-index:99; color:#ff6b6b; padding:40px; }

  /* ---- HUD ---- */
  #hud { position:fixed; inset:0; pointer-events:none; z-index:30; }
  #objective { position:absolute; top:18px; left:20px; max-width:44ch;
    background:var(--panel); border-left:3px solid var(--accent);
    box-shadow:0 10px 28px rgba(0,0,0,.28); backdrop-filter:blur(2px);
    padding:12px 16px; font-size:clamp(16px, 1vw + 10px, 22px); letter-spacing:0.06em; }
  #objective .obj-title { color:var(--accent-strong); font-weight:700; font-size:clamp(17px, 1vw + 12px, 24px);
    letter-spacing:0.14em; }
  #objective .obj-hint { color:#9fb0cc; margin-top:4px; font-size:clamp(15px, .9vw + 10px, 20px); }
  #game-clock { position:absolute; top:18px; right:20px;
    background:var(--panel); border-right:3px solid var(--accent);
    box-shadow:0 10px 28px rgba(0,0,0,.28); backdrop-filter:blur(2px);
    padding:8px 14px; color:var(--accent-strong);
    font-size:clamp(17px, 1vw + 12px, 24px); font-weight:700; letter-spacing:0.12em;
    font-variant-numeric:tabular-nums; }
  #prompt { position:absolute; bottom:17%; left:50%; transform:translateX(-50%);
    background:var(--panel-strong); border:1px solid #3d4c66; box-shadow:0 10px 28px rgba(0,0,0,.38);
    padding:10px 20px; font-size:clamp(18px, 1vw + 13px, 27px); letter-spacing:0.1em; color:#fff; white-space:nowrap; }
  #prompt b { color:var(--accent); }
  #toast { position:absolute; top:66px; right:20px; font-size:clamp(15px, .8vw + 11px, 20px); color:#8fa3c8;
    letter-spacing:0.1em; text-align:right; }

  /* ---- mood overlays ---- */
  #vignette { position:fixed; inset:0; pointer-events:none; z-index:20;
    background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.62) 100%); }
  #grain { position:fixed; inset:-120px; pointer-events:none; z-index:21; opacity:.055;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="300" height="300" filter="url(%23n)" opacity="0.6"/></svg>');
    animation:grain 0.55s steps(4) infinite; }
  @keyframes grain {
    0%{transform:translate(0,0)} 25%{transform:translate(-40px,30px)}
    50%{transform:translate(30px,-45px)} 75%{transform:translate(-25px,-20px)}
    100%{transform:translate(0,0)} }
  #damage { position:fixed; inset:0; pointer-events:none; z-index:22; opacity:0;
    background:radial-gradient(ellipse at center, rgba(160,0,0,.25) 0%, rgba(160,0,0,.75) 100%);
    transition:opacity .12s; }

  /* ---- binocular mask ---- */
  #bino { position:fixed; inset:0; pointer-events:none; z-index:25; }
  #bino .mask { position:absolute; inset:0;
    background:radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,.985) 33.5%); }
  #bino .ch { position:absolute; left:50%; top:50%; background:rgba(0,0,0,.8); }
  #bino .ch.h { width:120px; height:1px; transform:translate(-50%,-50%); }
  #bino .ch.v { width:1px; height:120px; transform:translate(-50%,-50%); }

  /* ---- dialogue ---- */
  #dialogue { position:fixed; left:50%; bottom:6%; transform:translateX(-50%);
    width:min(760px, 92vw); z-index:35; background:rgba(3,6,11,.9);
    border:1px solid #33415c; box-shadow:0 12px 28px rgba(0,0,0,.42);
    padding:18px 22px 16px; text-align:left; }
  #dialogue .who { color:var(--cyan); letter-spacing:0.25em; font-size:clamp(14px, .8vw + 11px, 20px); margin-bottom:8px; }
  #dialogue .who.you { color:var(--accent); }
  #dialogue .line { font-size:clamp(18px, 1vw + 13px, 27px); line-height:1.7; min-height:52px; color:#edf4ff; }
  #dialogue .next { text-align:right; font-size:clamp(14px, .8vw + 10px, 19px); color:#8fa3c8; margin-top:6px;
    animation:blink 1.2s infinite; }

  /* ---- note ---- */
  #note { background:rgba(0,0,0,.78); z-index:45; cursor:pointer; }
  #note .paper { background:#d8cdb4; color:#2a2118; width:min(620px,90vw);
    padding:38px 42px; text-align:left; transform:rotate(-1.2deg);
    box-shadow:0 0 60px rgba(0,0,0,.9); font-family:var(--serif-font); }
  #note .paper h3 { font-size:clamp(15px, 1vw + 11px, 22px); letter-spacing:0.2em; margin-bottom:14px;
    border-bottom:1px solid #8a7c5f; padding-bottom:8px; }
  #note .paper p { font-size:clamp(18px, 1vw + 11px, 25px); line-height:1.8; font-style:italic; }
  #note .close { margin-top:26px; font-size:clamp(12px, .8vw + 9px, 18px); color:#cfd6e4; letter-spacing:0.2em;
    animation:blink 1.4s infinite; font-family:var(--ui-font); }

  /* ---- fade + ending ---- */
  #fade { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none;
    z-index:60; transition:opacity 2.6s ease; }
  #ending { background:radial-gradient(ellipse at 50% 42%, #111a20 0%, #05070c 62%, #000 100%);
    z-index:70; padding:32px; }
  #ending .ending-kicker { color:var(--accent-strong); font-size:clamp(12px, .8vw + 8px, 18px);
    letter-spacing:0.3em; margin-bottom:22px; }
  #ending h1 { font-size:clamp(42px, 7vw, 82px); letter-spacing:0.3em; color:var(--accent);
    margin-left:0.3em; line-height:1.2; }
  #ending p { width:min(720px, 90vw); margin-top:28px; color:#d0d8e4;
    letter-spacing:0.04em; font-size:clamp(18px, 1vw + 11px, 25px); line-height:1.8; }
  #ending .ending-detail { margin-top:30px; color:#8fa3c8;
    font-size:clamp(12px, .8vw + 8px, 18px); letter-spacing:0.16em; }
  #ending button { margin-top:44px; border:1px solid #80552d; background:rgba(18,24,31,.9);
    color:#fff; padding:14px 24px; font:inherit; font-size:clamp(14px, .8vw + 10px, 20px);
    letter-spacing:0.18em; cursor:pointer; }
  #ending button:hover, #ending button:focus-visible { background:#34271b; outline:2px solid var(--accent); }

  #pausehint { background:rgba(0,0,0,.72); z-index:55; cursor:pointer; font-size:clamp(18px, 1vw + 12px, 26px);
    letter-spacing:0.25em; }