html, body { margin:0; height:100%; overflow:hidden; background:#87c9ff; }
    #msg {
      position: fixed; left: 12px; bottom: 12px; right: 12px;
      color: #fff; background: rgba(0,0,0,.55); padding: 10px 12px; border-radius: 10px;
      font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: pre-wrap; z-index: 5;
    }

    /* Dragon health */
    #healthWrap{ position: fixed; left: 12px; bottom: 12px; width: 240px; z-index: 6; user-select:none; }
    #healthLabel{
      font: 12px system-ui; color: #111; background: rgba(255,255,255,.75);
      padding: 6px 10px; border-radius: 10px 10px 0 0;
    }
    #healthBar{
      height: 5px; background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.35); border-top: 0;
      border-radius: 0 0 10px 10px; overflow: hidden;
    }
    #healthFill{
      height: 100%; width: 100%;
      background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
      transform-origin: left center; transform: scaleX(1);
    }

    /* Radar */
    #radar{
      position: fixed; right: 12px; top: 12px;
      width: 180px; height: 180px; border-radius: 14px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.18);
      z-index: 6;
    }

    /* IronScale Interactive Splash */
    #studioSplash {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at center, #050505, #000);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      opacity: 1;
      transition: opacity 1s ease;
    }
    #studioSplash.hide { opacity: 0; pointer-events: none; }
    .studioLogo {
      max-width: 70%;
      max-height: 40%;
      filter:
        drop-shadow(0 0 25px rgba(255, 140, 40, 0.35))
        drop-shadow(0 0 60px rgba(255, 100, 20, 0.15));
      animation: studioPulse 3s ease-in-out infinite;
    }
    @keyframes studioPulse {
      0%   { transform: scale(1);   opacity: 0.552; }
      50%  { transform: scale(1.02); opacity: 1;   }
      100% { transform: scale(1);   opacity: 0.92; }
    }

    /* Dragonlands Splash Screen */
    #splash{
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 50% 40%, rgba(0,0,0,0.15), rgba(0,0,0,0.85)),
        url("dragonlands_splash.png") center / cover no-repeat;
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.8s ease;
    }
    #splash.ready{ opacity: 1; pointer-events: auto; }
    #splash.hidden{ opacity: 0; pointer-events: none; }

    #splash .card{
      background: rgba(10, 10, 10, 0.55);
      backdrop-filter: blur(4px);
      border-radius: 18px;
      padding: 26px 28px 22px;
      text-align: center;
      box-shadow: 0 25px 80px rgba(0,0,0,0.65);
      color: #fff;
      width: min(520px, 92vw);
    }
    #splash h1{
      margin: 6px 0 12px;
      font: 900 44px/1.05 system-ui;
      letter-spacing: 1px;
      color: #fff;
      text-shadow: 0 4px 18px rgba(0,0,0,0.8);
    }
    #splash p{ color: rgba(255,255,255,0.9); margin-bottom: 16px; }
    #startBtn{
      appearance: none;
      border: 0;
      padding: 14px 22px;
      border-radius: 14px;
      font: 800 16px system-ui;
      cursor: pointer;
      background: linear-gradient(135deg, #ef4444, #f97316);
      color: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    }
    #startBtn:hover{ filter: brightness(1.08); }

    
    /* Story Intro (scrolling crawl) */
    #story{
      position: fixed; inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 50% 40%, rgba(0,0,0,0.35), rgba(0,0,0,0.92)),
        url("dragonlands_splash.png") center / cover no-repeat;
      z-index: 22;
    }
    #story.show{ display:flex; }
    #story .card{
      width: min(820px, 94vw);
      background: rgba(10,10,10,0.68);
      backdrop-filter: blur(4px);
      border-radius: 18px;
      padding: 18px 18px 14px;
      box-shadow: 0 18px 70px rgba(0,0,0,0.60);
      color: #fff;
      text-align: center;
    }
    #story h2{
      margin: 8px 0 12px;
      font: 900 28px system-ui;
      letter-spacing: 0.5px;
      text-shadow: 0 4px 18px rgba(0,0,0,0.85);
    }
    #story .crawl{
  height: min(52vh, 420px);
  width: min(780px, 92vw);
  margin: 10px auto 12px;

  position: relative;
  overflow: hidden;

  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);

  /* ✅ parchment image */
  background: url("assets/parchment.png") center / 100% 100% no-repeat;

  /* ✅ padding = "margins" inside parchment so text doesn't hit edges */
 padding: 34px 40px 34px 14px;
}

#story .crawl::before{
  content:"";
  position:absolute;
  inset:0;
  /* subtle shading so parchment reads better */
  background: radial-gradient(circle at 50% 40%,
    rgba(255,255,255,0.10),
    rgba(0,0,0,0.18)
  );
  pointer-events:none;
}

  #story .crawlInner{
  width: 61%;
  margin-left: auto;
  margin-right: 0;
  text-align: left;

  /* ✅ parchment ink */
  font: 700 16px/1.55 system-ui;
  color: rgba(35, 24, 12, 0.92);

  /* keep your scroll */
  transform: translateY(65%);
  animation: storyCrawl 80s linear forwards;

  /* sit above the ::before overlay */
  position: relative;
  z-index: 1;

  /* remove old padding (padding now belongs to .crawl) */
  padding: 0;
}

    #story .crawlInner p{ margin: 0 0 12px; }
    #story .crawlInner ul{ margin: 0 0 12px 18px; padding: 0; }
    #story .crawlInner li{ margin: 0 0 6px; }
    #story .crawlInner hr{
      border: 0;
      height: 1px;
      background: rgba(255,255,255,0.12);
      margin: 14px 0;
    }
    #story .hint{
      margin-top: 10px;
      font: 600 12px system-ui;
      color: rgba(255,255,255,0.80);
      opacity: 0.95;
    }
    @keyframes storyCrawl {
      0%   { transform: translateY(65%); }
      100% { transform: translateY(-180%); }
    }



    /* Buttons (shared) */
    .btnRow{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top: 10px; }
    .btn{
      appearance:none;
      border:0;
      padding:12px 18px;
      border-radius: 12px;
      font: 800 14px system-ui;
      cursor:pointer;
      background: linear-gradient(135deg, #ef4444, #f97316);
      color:#fff;
      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    }
    .btn:hover{ filter: brightness(1.08); }
    .btn.secondary{
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.22);
      color:#fff;
      box-shadow:none;
    }
    .btn.secondary:hover{ background: rgba(255,255,255,0.18); }
    .btn.danger{
      background: linear-gradient(135deg, #991b1b, #ef4444);
    }

    /* Pause menu */
    #pause{
      position:fixed; inset:0;
      display:none;
      align-items:center; justify-content:center;
      background: rgba(0,0,0,0.55);
      z-index: 30;
    }
    #pause.show{ display:flex; }
    #pause .card{
      width:min(520px, 92vw);
      background: rgba(255,255,255,0.95);
      border-radius: 16px;
      padding: 18px 18px 14px;
      text-align:center;
      box-shadow: 0 18px 60px rgba(0,0,0,0.35);
    }
    #pause h2{ margin: 6px 0 8px; font: 800 28px system-ui; color:#111; }

    /* Fade overlay */
    #fade{
      position:fixed; inset:0;
      background:#000;
      opacity:0;
      pointer-events:none;
      transition: opacity 420ms ease;
      z-index: 25;
    }
    #fade.on{ opacity:1; }

    /* =====================
       Mission UI
       ===================== */

    #missionHud{
      position: fixed;
      left: 14px;
      top: 14px;
      z-index: 20;
      max-width: min(520px, calc(100vw - 28px));
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.12);
      color: #fff;
      font: 600 14px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial;
      text-shadow: 0 2px 10px rgba(0,0,0,.6);
    }
    #missionHud.hidden{ display:none; }

    #missionObjective{ letter-spacing: .2px; }

    #missionResult{
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 40;
      background: rgba(0,0,0,.72);
    }
    #missionResult.hidden{ display:none; }

    .missionCard{
      width: min(560px, calc(100vw - 40px));
      border-radius: 18px;
      padding: 18px 18px 16px;
      background: rgba(10,12,18,.92);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 16px 40px rgba(0,0,0,.55);
      color: #fff;
      text-align: center;
    }
    #missionResultTitle{
      font: 900 26px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
      letter-spacing: .8px;
      margin-bottom: 8px;
    }
    #missionResultSub{
      font: 500 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
      opacity: .92;
      margin-bottom: 14px;
    }
    .missionBtns{ display:flex; gap:10px; justify-content:center; }
    .missionBtns .btn{
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: #fff;
      font: 700 14px system-ui, -apple-system, Segoe UI, Roboto, Arial;
      cursor: pointer;
    }
    .missionBtns .btn:hover{ background: rgba(255,255,255,.10); }
    .missionBtns .btn.primary{ background: rgba(255,255,255,.14); }

/* Fortress HP bar (Mission HUD) */
.hpWrap{
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  width: 320px;
  max-width: 80vw;
  backdrop-filter: blur(6px);
}
.hpLabelRow{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.95;
  margin-bottom: 8px;
}
.hpLabel{ font-weight: 700; }
.hpText{ font-variant-numeric: tabular-nums; opacity:0.9; }
.hpBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow:hidden;
}
.hpFill{
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.9);
  border-radius: 999px;
  transition: width 120ms linear;
}