/* Shared terminal/window styling for Voice Zork (demo + homepage). */
:root{
    --ink:#0b0e14;
    --ink-2:#0a0c11;
    --glass:rgba(22,26,36,0.72);
    --edge:rgba(255,255,255,0.08);
    --amber:#ecc579;        /* phosphor — game text */
    --amber-dim:#9c8556;
    --violet:#8b7bff;       /* voice accent */
    --violet-glow:rgba(139,123,255,0.55);
    --cyan:#7fd0c8;
    --txt-dim:#7b8494;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
    background:
      radial-gradient(1100px 700px at 50% -10%, #1a2030 0%, transparent 60%),
      radial-gradient(900px 600px at 90% 110%, #161a26 0%, transparent 55%),
      var(--ink);
    color:#e7ecf3;
    min-height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:28px 16px;
    -webkit-font-smoothing:antialiased;
  }

  .window{
    width:100%;max-width:880px;
    background:var(--glass);
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    border:1px solid var(--edge);
    border-radius:14px;
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset,
               0 40px 100px -30px rgba(0,0,0,0.8),
               0 0 0 1px rgba(0,0,0,0.4);
    overflow:hidden;
    display:flex;flex-direction:column;
    max-height:min(820px,92vh);
  }

  /* ---- title bar ---- */
  .bar{
    height:46px;flex:0 0 46px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:0 14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border-bottom:1px solid var(--edge);
  }
  .lights{display:flex;gap:8px;align-items:center}
  .light{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 0.5px rgba(0,0,0,0.25) inset}
  .red{background:#ff5f57}.yellow{background:#febc2e}.green{background:#28c840}
  .title{
    grid-column:2;text-align:center;font-size:13px;font-weight:600;letter-spacing:.2px;
    color:#c9d2de;display:flex;align-items:center;gap:8px;
  }
  .title .badge{font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--violet);
    border:1px solid rgba(139,123,255,.35);padding:1px 6px;border-radius:5px;background:rgba(139,123,255,.08)}
  .title.reveal{animation:titlein 1s ease both}
  @keyframes titlein{from{opacity:0;letter-spacing:3px;filter:blur(4px)}to{opacity:1;letter-spacing:.2px;filter:none}}
  .barstatus{grid-column:3;justify-self:end;font-size:11px;color:var(--txt-dim);
    display:flex;align-items:center;gap:6px}
  .dot{width:7px;height:7px;border-radius:50%;background:#3a4252;transition:.25s}
  .dot.live{background:var(--violet);box-shadow:0 0 10px var(--violet-glow)}
  .dot.speak{background:var(--amber);box-shadow:0 0 10px rgba(236,197,121,.6)}
  /* the menu-bar LED meter — exact macOS proportions (menuEQWidth 28 × 22) */
  .eq{width:28px;height:22px;display:block;margin-left:6px}

  /* ---- authentic v3 status line (inverse amber) ---- */
  .statusline{
    flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
    padding:5px 26px;
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
    font-size:12px;font-weight:700;letter-spacing:.3px;
    color:#10131b;background:linear-gradient(180deg,#f0cd86,var(--amber));
    box-shadow:0 0 18px rgba(236,197,121,.22);
    text-shadow:0 1px 0 rgba(255,255,255,.18);
  }
  .statusline .sl-r{font-variant-numeric:tabular-nums}

  /* ---- terminal ---- */
  .screen-wrap{position:relative;flex:1 1 auto;min-height:260px;background:var(--ink-2)}
  .screen{
    position:absolute;inset:0;overflow-y:auto;padding:22px 26px 26px;
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
    font-size:14px;line-height:1.62;color:var(--amber);
    text-shadow:0 0 12px rgba(236,197,121,.14);
    scroll-behavior:smooth;
  }
  .screen::-webkit-scrollbar{width:10px}
  .screen::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:8px}
  .scan{position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
    mix-blend-mode:multiply;opacity:.5}
  .vignette{position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 120px rgba(0,0,0,.6)}

  .line{white-space:pre-wrap;margin:0 0 2px}
  .line:empty{height:1.62em}   /* blank lines occupy a real line, not 0px */
  .room{color:#ffd98a;font-weight:600}
  .cmd{color:var(--violet);margin-bottom:7px}   /* a little air between your command and the reply */
  .cmd::before{content:"❯ ";color:#5e6a9c}
  .sys{color:var(--cyan);opacity:.85;font-style:italic}
  .dim{color:#8a774f;opacity:.55;text-shadow:none}  /* the kept-but-recessed Infocom banner */

  /* ---- dock ---- */
  .dock{
    flex:0 0 auto;border-top:1px solid var(--edge);
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
    padding:14px 16px;display:flex;align-items:center;gap:14px;
  }
  .orb{
    position:relative;width:46px;height:46px;flex:0 0 46px;border-radius:50%;cursor:pointer;
    background:radial-gradient(circle at 38% 34%, #2a3046, #14182400);
    border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;transition:.2s;
  }
  .orb svg{width:20px;height:20px;fill:#9aa3b5;transition:.2s}
  .orb .ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:.2s}
  .orb.listening{border-color:transparent}
  .orb.listening svg{fill:#fff}
  .orb.listening .ring{border-color:var(--violet);
    animation:pulse 1.3s ease-in-out infinite;box-shadow:0 0 22px var(--violet-glow)}
  .orb.speaking svg{fill:#ffe6b3}
  .orb.speaking .ring{border-color:var(--amber);animation:pulse 1.1s ease-in-out infinite;
    box-shadow:0 0 22px rgba(236,197,121,.5)}
  .orb:hover{border-color:rgba(255,255,255,.22)}
  .orb.inactive{opacity:.35;pointer-events:none}   /* dictation gated until the boot intro settles */
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.4}}

  .inwrap{flex:1 1 auto;display:flex;align-items:center;gap:10px;
    background:rgba(0,0,0,.32);border:1px solid var(--edge);border-radius:10px;padding:4px 6px 4px 14px}
  .inwrap:focus-within{border-color:rgba(139,123,255,.45);box-shadow:0 0 0 3px rgba(139,123,255,.12)}
  #cmd{flex:1;background:none;border:none;outline:none;color:#eef2f8;font-size:14px;
    font-family:"SF Mono",ui-monospace,Menlo,monospace;padding:8px 0}
  #cmd::placeholder{color:#5b6473}
  .send{background:var(--violet);color:#0b0c12;border:none;border-radius:8px;
    padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
  .send:hover{filter:brightness(1.08)}
  .send:active{transform:translateY(1px)}

  .toggles{display:flex;gap:8px;align-items:center}
  .tog{font-size:11px;color:var(--txt-dim);display:flex;align-items:center;gap:6px;cursor:pointer;
    user-select:none;padding:6px 9px;border:1px solid var(--edge);border-radius:8px;transition:.15s;white-space:nowrap}
  .tog:hover{border-color:rgba(255,255,255,.18)}
  .tog .sw{width:26px;height:15px;border-radius:9px;background:#2a3140;position:relative;transition:.2s;flex:0 0 26px}
  .tog .sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
    background:#8893a5;transition:.2s}
  .tog.on .sw{background:var(--violet)}
  .tog.on .sw::after{left:13px;background:#fff}
  .tog.on{color:#cfd6e2}

  /* ---- hints drawer ----
     Lives in .boxwrap alongside the window and is absolutely positioned just
     below it, so opening it drops a panel into the empty slot under the box
     without reflowing the page. */
  .boxwrap{position:relative;width:100%;max-width:880px;display:flex;justify-content:center}
  .boxwrap > .window{flex:1 1 auto}
  .hints{
    position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:5;
    background:var(--glass);
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    border:1px solid var(--edge);border-radius:14px;
    box-shadow:0 30px 80px -34px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.35);
    padding:18px 26px;   /* 26px sides → text lines up with the game screen above */
    opacity:0;transform:translateY(-12px);pointer-events:none;
    transition:opacity .26s ease,transform .26s ease;
  }
  .hints.open{opacity:1;transform:translateY(0);pointer-events:auto}

  /* floating "how to talk" line below the box — absolute, so it never moves the
     layout; the hints drawer (higher z) covers it when open, which is fine */
  .keyhint{
    position:absolute;left:0;right:0;top:calc(100% + 20px);z-index:1;text-align:center;
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
    font-size:15px;letter-spacing:.01em;color:#5a6373;pointer-events:none;  /* recessed, in shadow */
    opacity:0;transition:opacity .8s ease}
  .keyhint.show{opacity:.85}     /* it's the dim color, not transparency, that recedes it */
  .keyhint.show.used{opacity:.4} /* fades further once they've used the Ctrl+Option chord */
  .keyhint kbd{font-family:inherit;font-size:13px;color:#6b7484;
    background:rgba(255,255,255,.025);border:1px solid var(--edge);
    border-radius:6px;padding:1px 7px;margin:0 1px}
  .hints .hint-copy{margin:0;
    font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px;line-height:1.95;
    color:var(--amber);opacity:.92}
  .hints .lead{color:#ffd98a;font-weight:700}
  /* inline commands — highlighted so you know WHAT to say, but not clickable;
     you have to say (or type) them yourself. */
  .hints .try{color:#ffd98a;font-weight:700}
  .hints{max-height:46vh;overflow-y:auto}

  /* tabs */
  .hint-tabs{display:flex;gap:2px;margin:0 0 12px;border-bottom:1px solid var(--edge)}
  .hint-tab{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;
    color:var(--txt-dim);background:none;border:none;border-bottom:2px solid transparent;
    padding:4px 11px 8px;margin-bottom:-1px;cursor:pointer;transition:.14s}
  .hint-tab:hover{color:var(--amber)}
  .hint-tab.on{color:#ffd98a;border-bottom-color:var(--violet)}

  /* "Stuck?" — InvisiClues progressive reveal */
  .hint-where{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;
    color:var(--txt-dim);margin:0 0 12px}
  .hint-where b{color:var(--amber);font-weight:600}
  .iclue{margin:0 0 15px}
  .iclue-q{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13px;color:#ffd98a;font-weight:600}
  .iclue-q::before{content:"❯ ";color:var(--violet)}
  .iclue-reveals .rev{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13px;
    line-height:1.7;color:var(--amber);opacity:.92;margin-top:6px;padding-left:2ch;
    animation:revin .28s ease both}
  @keyframes revin{from{opacity:0;transform:translateY(-3px)}to{opacity:.92;transform:none}}
  .iclue-more{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;
    color:var(--txt-dim);background:none;border:1px dashed var(--edge);border-radius:6px;
    padding:3px 9px;margin-top:8px;margin-left:2ch;cursor:pointer;transition:.14s}
  .iclue-more:hover{color:var(--amber);border-color:rgba(236,197,121,.45)}

  /* Walkthrough */
  .walk-step{margin:0 0 11px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13px;line-height:1.7}
  .walk-step .wl{color:var(--txt-dim);font-size:11px;margin-bottom:3px}
  .walk-foot{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;
    color:var(--txt-dim);font-style:italic;margin:14px 0 0}
  @media (prefers-reduced-motion:reduce){.hints{transition:none}}

  .hint{font-size:11px;color:#586075;text-align:center;padding:6px 0 0}
  @media (max-width:640px){
    .toggles{display:none}
    .title .badge{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .orb .ring{animation:none!important}
    .screen{scroll-behavior:auto}
    .scan{display:none}
  }