:root{
    --bg:#12131c; --panel:#1b1d2a; --panel-2:#222436;
    --ink:#e8eaf2; --dim:#9aa0b4; --line:#2e3346;
    --amber:#f5b83d; --amber-dim:#8a6a2a; --blue:#5ec8f2; --red:#e57373; --green:#81c784;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  body{
    background:var(--bg); color:var(--ink);
    font-family:'IBM Plex Mono',monospace;
    display:flex; flex-direction:column; align-items:center;
    min-height:100vh; padding:18px 12px 30px; user-select:none;
  }
  h1{font-family:'Bungee',cursive; font-size:clamp(24px,4vw,34px); color:var(--amber); line-height:1}
  .sub{font-size:11px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;margin:6px 0 14px}

  .hud{
    width:min(96vw,720px);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--panel); border:1px solid var(--line); border-radius:8px;
    padding:10px 14px; margin-bottom:10px; flex-wrap:wrap;
  }
  .hud .lvl{font-size:12px; color:var(--dim)}
  .hud .lvl b{color:var(--ink); font-weight:600}
  .oil{display:flex; align-items:center; gap:8px; font-size:13px}
  .oil .flame{font-size:16px}
  .oil b{color:var(--amber); font-size:18px; min-width:2ch; text-align:right; transition:color .15s}
  .oil.deny b{color:var(--red)}
  .oilbar{width:110px; height:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:99px; overflow:hidden}
  .oilbar i{display:block; height:100%; background:linear-gradient(90deg,var(--amber-dim),var(--amber)); width:100%; transition:width .25s}

  .mapwrap{position:relative; width:min(96vw,720px)}
  #map{width:100%; display:block; background:#0e0f18; border:1px solid var(--line); border-radius:10px; cursor:pointer}

  .controls{width:min(96vw,720px); display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
  button{
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
    border-radius:8px; padding:11px 18px; cursor:pointer; letter-spacing:.05em;
    border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  }
  button:active{transform:translateY(1px)}
  button.primary{background:var(--amber); border-color:var(--amber); color:#151006}
  button:disabled{opacity:.35; cursor:default}
  .spacer{flex:1}

  .hint{width:min(96vw,720px); font-size:11.5px; color:var(--dim); margin-top:10px; line-height:1.6}

  /* letter overlay */
  .veil{
    position:fixed; inset:0; background:rgba(10,11,18,.82);
    display:none; align-items:center; justify-content:center; padding:18px; z-index:20;
  }
  .veil.show{display:flex}
  .paper{
    background:#efe6cf; color:#2c2418; max-width:460px; width:100%;
    border-radius:4px; padding:30px 30px 24px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    font-family:'IM Fell English',serif; font-size:17px; line-height:1.65;
    position:relative;
  }
  .paper .from{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#8a7a5a; font-family:'IBM Plex Mono',monospace; margin-bottom:12px}
  .paper .sig{margin-top:14px; font-style:italic; text-align:right}
  .paper .meta{margin-top:18px; padding-top:12px; border-top:1px dashed #c9bb98; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8a7a5a; display:flex; justify-content:space-between; align-items:center}
  .paper .star{color:#b08a2a}
  .paper button{margin-top:16px; width:100%; background:#2c2418; color:#efe6cf; border-color:#2c2418}

  /* archive */
  .arch{
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    max-width:520px; width:100%; max-height:80vh; overflow:auto; padding:20px;
  }
  .arch h2{font-family:'Bungee',cursive; font-size:16px; color:var(--amber); margin-bottom:12px}
  .arch .entry{border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:10px; background:var(--panel-2)}
  .arch .entry .t{font-size:12px; color:var(--amber); margin-bottom:6px}
  .arch .entry .b{font-family:'IM Fell English',serif; font-size:15px; line-height:1.55; color:var(--ink)}
  .arch .locked{color:var(--dim); font-size:12px; font-style:italic}
  .toast{
    position:fixed; top:14px; left:50%; transform:translateX(-50%);
    background:var(--panel-2); border:1px solid var(--amber); color:var(--amber);
    font-size:12px; padding:7px 16px; border-radius:999px; opacity:0;
    transition:opacity .3s; pointer-events:none; z-index:30;
  }
  .toast.show{opacity:1}