/* ---- HUD ---- */
    #hud{
      position:absolute;top:max(12px, env(safe-area-inset-top));left:12px;right:12px;
      display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
      pointer-events:none;z-index:10;transition:opacity .35s ease;
    }
    #hud.hidden{opacity:0;pointer-events:none}
    .hud-group{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
    .hud-card{
      background: linear-gradient(180deg, rgba(18,26,44,.92), rgba(12,17,30,.78));
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      backdrop-filter: blur(18px) saturate(140%);
      padding:8px 14px;border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      display:flex;flex-direction:column;justify-content:center;gap:3px;
      box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
      min-height:56px; position:relative; overflow:hidden;
    }
    .hud-card::before{
      content:"";position:absolute;inset:0 0 auto 0;height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
      opacity:.7;
    }
    .hud-title{font-size:.64rem;opacity:.62;font-weight:700;letter-spacing:.3px}
    .hud-value{font-size:1.18rem;font-weight:900;color:var(--accent);line-height:1.1;font-variant-numeric:tabular-nums}
    #txtTimer.urgent{color:var(--primary);animation:pulseNum .55s ease-in-out infinite}
    @keyframes pulseNum{50%{transform:scale(1.12)}}
    .stamina-container{width:148px;height:9px;background:rgba(255,255,255,.07);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.10);margin-top:3px;position:relative}
    #staminaBar{width:100%;height:100%;background: linear-gradient(90deg, #2ed573, #7bed9f 60%, #2ed573);transition:width .08s linear, filter .2s;position:relative}
    #staminaBar::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);transform:translateX(-100%);animation:shine 1.8s linear infinite;animation-play-state:paused}
    #staminaBar.tired::after{animation-play-state:running}
    @media (prefers-reduced-motion: reduce){ #staminaBar::after{animation:none} }
    @keyframes shine{to{transform:translateX(100%)}}
    #staminaBar.tired{background: linear-gradient(90deg, #ff3b5c, #ffa502);filter:saturate(1.1)}
    .icon-btn{
      background: rgba(18,26,44,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,.12);border-radius:13px;width:44px;min-height:56px;
      color:#fff;font-size:1.05rem;display:flex;align-items:center;justify-content:center;
      cursor:pointer;pointer-events:auto;transition:all .18s ease;box-shadow:0 6px 18px rgba(0,0,0,.35);
    }
    .icon-btn svg{width:18px;height:18px;fill:none;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .icon-btn:hover{background:rgba(255,255,255,.10);transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
    .icon-btn:active{transform:scale(.94)}
    .icon-btn.muted{background:rgba(255,71,87,.18);border-color:rgba(255,71,87,.45)}
    .icon-btn.no-mic{opacity:.65}
    .icon-btn.talking{background:rgba(46,213,115,.22);border-color:rgba(46,213,115,.6);box-shadow:0 0 12px rgba(46,213,115,.45)}
    #dangerVignette{position:absolute;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 0 rgba(255,59,92,0);transition:box-shadow .25s ease}
    #flash{position:absolute;inset:0;pointer-events:none;z-index:6;background:#fff;opacity:0;transition:opacity .35s ease}
    /* toasts */
    #toastStack{position:absolute;top:calc(var(--sat, 0px) + 122px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:12;pointer-events:none;width:min(92%,560px)}
    .toast{
      background: linear-gradient(180deg, rgba(18,26,44,.96), rgba(12,17,30,.92));
      -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
      border:1px solid rgba(255,192,72,.45);padding:9px 18px;border-radius:999px;
      font-weight:800;font-size:.92rem;text-align:center;
      box-shadow:0 12px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08) inset;
      animation:toastIn .42s cubic-bezier(.2,1.4,.4,1) both;max-width:100%;display:flex;align-items:center;gap:8px;
    }
    .toast.out{animation:toastOut .28s ease forwards}
    .toast.bad{border-color:rgba(255,59,92,.65);box-shadow:0 12px 32px rgba(255,59,92,.18)}
    .toast.good{border-color:rgba(46,213,115,.55);box-shadow:0 12px 32px rgba(46,213,115,.15)}
    @keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.94)}to{opacity:1;transform:none}}
    @keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}
    /* mini-quests — positioned here rather than inline so the breakpoints that
       move the toast stack can keep the two from landing on top of each other */
    #questBar{
      /* left:50% + translateX only offers half the wrapper as available width,
         so the pills wrapped onto three lines while looking centred. Span the
         full row and centre with flexbox instead. */
      position:absolute; top:calc(var(--sat, 0px) + 76px); left:0; right:0;
      display:flex; gap:6px; z-index:11; pointer-events:none;
      padding:0 10px; justify-content:center; flex-wrap:wrap;
    }
    #questBar.hidden{display:none !important}
    .quest-pill{
      display:inline-flex; align-items:center; gap:7px;
      background: linear-gradient(180deg, rgba(20,28,48,.92), rgba(12,17,30,.86));
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px; padding:6px 12px 6px 10px;
      font-size:.70rem; font-weight:800; color: rgba(255,255,255,.88);
      box-shadow:0 6px 16px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.06) inset;
      transition: background .3s, color .3s, box-shadow .3s; white-space:nowrap;
    }
    .quest-pill.done{
      background: linear-gradient(180deg, #34d97c, #1e8a4a);
      border-color: rgba(255,255,255,.24); color:#fff;
      box-shadow:0 8px 20px rgba(46,213,115,.30);
    }
    .quest-pill .qp-bar{ width:46px; height:5px; background: rgba(255,255,255,.14); border-radius:999px; overflow:hidden; flex:none }
    .quest-pill .qp-fill{ height:100%; background: linear-gradient(90deg,#c4f542,#7bed9f); width:0%; transition: width .35s ease; border-radius:999px }
    .quest-pill.done .qp-fill{ background: white; width:100% !important; }
    .quest-pill .qp-icon{ font-size:.85rem; line-height:1 }
    .quest-pill .qp-count{ font-variant-numeric:tabular-nums; opacity:.85 }
    @media (max-width:820px){ .quest-pill{ font-size:.64rem; padding:5px 10px; gap:6px } .quest-pill .qp-bar{ width:34px } }
    /* Three full-text pills cannot share a phone-width row — they wrapped onto
       three lines and buried the toast stack. Drop to icon + progress. */
    @media (max-width:620px){
      .quest-pill .qp-desc{ display:none }
      .quest-pill{ padding:5px 9px; gap:6px }
      .quest-pill .qp-bar{ width:38px }
    }
    /* mobile controls */
    #mobileControls{position:absolute;bottom:max(18px, env(safe-area-inset-bottom));left:18px;right:18px;display:none;justify-content:space-between;align-items:flex-end;z-index:15;pointer-events:none}
    body.touch.playing #mobileControls{display:flex}
    .joystick-zone{
      width:128px;height:128px;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,.02));
      border:1.5px dashed rgba(255,255,255,.22);border-radius:50%;position:relative;pointer-events:auto;
      box-shadow:0 8px 24px rgba(0,0,0,.35) inset;
    }
    .joystick-zone::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(255,255,255,.06)}
    .joystick-knob{
      width:52px;height:52px;background: radial-gradient(circle at 32% 28%, #fff, #cbd5e1 65%, #94a3b8);
      border-radius:50%;position:absolute;top:38px;left:38px;box-shadow:0 8px 18px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.9) inset;
      transition:transform .05s linear;
    }
    /* Triangular / Cluster Mobile Action Controls */
    .action-buttons {
      position: relative;
      width: 176px;
      height: 168px;
      pointer-events: none;
    }
    .action-buttons button {
      position: absolute;
      pointer-events: auto;
    }
    .sprint-touch-btn, .smoke-touch-btn, .trap-touch-btn, .ability-touch-btn {
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.65);
      color: #fff;
      font-family: inherit;
      font-weight: 900;
      font-size: 0.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      transition: transform 0.1s, filter 0.1s, opacity 0.2s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }
    /* 1. Primary Sprint Button — Bottom Right Anchor */
    .sprint-touch-btn {
      width: 84px;
      height: 84px;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, #ff3b5c, #ff6b81 55%, #ff8fa0);
      box-shadow: 0 12px 28px rgba(255, 59, 92, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
      z-index: 2;
    }
    /* 2. Hero Ability Button — Top Vertex of Triangle */
    .ability-touch-btn {
      width: 70px;
      height: 70px;
      right: 36px;
      top: 0;
      background: linear-gradient(135deg, #6c5ce7, #a55eea 55%, #c8a6ff);
      box-shadow: 0 10px 24px rgba(108, 92, 231, 0.45), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
      overflow: visible;
      z-index: 2;
    }
    /* 3. Smoke Bomb Button — Bottom Left Vertex */
    .smoke-touch-btn {
      width: 70px;
      height: 70px;
      left: 0;
      bottom: 6px;
      background: linear-gradient(135deg, #4b6584, #778ca3 55%, #a5b1c2);
      box-shadow: 0 10px 24px rgba(75, 101, 132, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
      overflow: visible;
      z-index: 2;
    }
    /* 4. Trap Button (for Seeker) — Bottom Left Vertex */
    .trap-touch-btn {
      width: 70px;
      height: 70px;
      left: 0;
      bottom: 6px;
      background: linear-gradient(135deg, #b7791f, #e6a23c 55%, #f5c86a);
      box-shadow: 0 10px 24px rgba(183, 121, 31, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
      overflow: visible;
      z-index: 2;
    }
    .trap-touch-btn.used {
      opacity: .35;
      filter: grayscale(.6);
      pointer-events: none;
    }
    .smoke-touch-btn.cooldown, .ability-touch-btn.cooldown {
      opacity: 0.72;
      filter: grayscale(.35);
      pointer-events: none;
    }
    .smoke-touch-btn .cooldown-ring, .ability-touch-btn .cooldown-ring {
      position: absolute;
      inset: -5px;
      width: calc(100% + 10px);
      height: calc(100% + 10px);
      transform: rotate(-90deg);
      pointer-events: none;
    }
    .smoke-touch-btn .cooldown-ring-bg, .ability-touch-btn .cooldown-ring-bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.2);
      stroke-width: 3.5;
    }
    .smoke-touch-btn .cooldown-ring-fill, .ability-touch-btn .cooldown-ring-fill {
      fill: none;
      stroke: #fff;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 125.6;
      stroke-dashoffset: 125.6;
    }
    .smoke-touch-btn.cooldown .cooldown-ring-fill, .ability-touch-btn.cooldown .cooldown-ring-fill {
      stroke: #ffd32a;
    }
    .smoke-touch-btn .cooldown-text, .ability-touch-btn .cooldown-text {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.72rem;
      font-weight: 900;
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      padding: 1px 7px;
      border-radius: 999px;
      line-height: 1.2;
      min-width: 18px;
      text-align: center;
      display: none;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .smoke-touch-btn.cooldown .cooldown-text, .ability-touch-btn.cooldown .cooldown-text {
      display: block;
    }
    .sprint-touch-btn span, .smoke-touch-btn span, .ability-touch-btn span, .trap-touch-btn span {
      font-size: 1.22rem;
      line-height: 1;
    }
    .sprint-touch-btn:active, .smoke-touch-btn:active, .ability-touch-btn:active, .trap-touch-btn:active {
      transform: scale(0.92);
      filter: brightness(1.1);
    }

    /* Desktop Ability Key Badge in HUD */
    #cardAbility {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s;
    }
    #cardAbility.ready {
      border-color: rgba(165, 94, 234, 0.5);
      box-shadow: 0 0 12px rgba(165, 94, 234, 0.25);
    }
    #cardAbility.cooldown {
      opacity: 0.65;
    }