/* ============== TOKENS ============== */
  :root{
    --bg:#0d0c0c; --bg-2:#1a1614; --bg-3:#2a221e;
    --steel:#3a322e; --steel-hi:#5a4d44;
    --blood:#c41e0e; --blood-dk:#6e0606;
    --lava:#ff5a1a; --ember:#ff8c3a; --gold:#f5b042;
    --amber:#ffb000; --bone:#ffe0b3;
    --green:#33ff66;
    --hud-h: clamp(72px, 9vw, 110px);
    --f-doom:'Black Ops One', 'Bungee Inline', system-ui, sans-serif;
    --f-mono:'VT323', monospace;
    --f-pixel:'Press Start 2P', monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#000;color:var(--bone);font-family:var(--f-mono);overflow:hidden;height:100%}
  body{
    background:
      radial-gradient(ellipse at 50% 0%, #2a1a14 0%, #0d0c0c 55%, #000 100%),
      #000;
    background-attachment: fixed;
  }
  img{display:block;-webkit-user-drag:none;user-select:none}

  /* ============== METAL TEXTURE (CSS, no asset) ============== */
  .metal{
    background:
      repeating-linear-gradient(90deg, #2a221e 0 2px, #1f1916 2px 4px),
      linear-gradient(180deg, #3a322e 0%, #1a1410 100%);
    border:2px solid #000;
    box-shadow:
      inset 0 2px 0 #5a4d44,
      inset 0 -2px 0 #100c0a,
      inset 2px 0 0 #45382f,
      inset -2px 0 0 #1f1916;
  }
  .metal::before, .metal::after{content:'';position:absolute;background:#1a1410;border:1px solid #000}
  /* hazard tape */
  .hazard{
    background: repeating-linear-gradient(45deg,
      #f5b042 0 14px, #1a1410 14px 28px);
    border-top:2px solid #000; border-bottom:2px solid #000;
  }

  /* ============== TOP MARQUEE (TITLE BAR) ============== */
  .q-top{
    position:fixed; inset:0 0 auto 0; z-index:50;
    height: var(--hud-h);
    display:grid; grid-template-columns: 1fr auto 1fr; align-items:stretch;
    border-bottom:3px solid #000;
  }
  .q-top .panel{
    position:relative;
    background:
      radial-gradient(ellipse at 50% 100%, #4a3024, transparent 70%),
      linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
    border-bottom:2px solid #5a4d44;
    overflow:hidden;
  }
  .q-top .panel::before{
    content:''; position:absolute; inset:auto 0 0 0; height:8px;
    background: repeating-linear-gradient(90deg,
      #f5b042 0 12px, #1a1410 12px 24px);
  }
  .q-top .center{
    display:flex; align-items:center; gap: 18px; padding: 0 28px;
    background:
      radial-gradient(ellipse at 50% 0%, #6e0606, transparent 60%),
      linear-gradient(180deg, #2a0a08, #0d0303);
    border-left:3px solid #000; border-right:3px solid #000;
    border-bottom:2px solid #c41e0e;
    box-shadow: inset 0 -10px 30px #c41e0e30;
  }
  .q-title{
    font-family: var(--f-doom);
    font-size: clamp(20px, 3.4vw, 44px);
    color: #ffd089;
    letter-spacing: .04em;
    text-shadow:
      0 0 4px #ff5a1a,
      0 0 14px #c41e0e,
      0 2px 0 #6e0606,
      0 4px 10px #000;
    -webkit-text-stroke: 1px #2a0606;
    white-space:nowrap;
    user-select:none;
  }
  .q-title .Q{
    color:#ff8c3a; cursor:crosshair;
    display:inline-block; transition:transform .1s;
  }
  .q-title .Q:hover{ transform: scale(1.18) rotate(-4deg); filter:drop-shadow(0 0 8px #ff5a1a) }
  .q-title .Q:active{ transform: scale(.9) }

  .q-side-stat{
    display:grid; grid-template-columns: 1fr; align-items:center;
    padding: 10px 22px; gap: 4px;
    color: var(--ember);
    font-family: var(--f-mono);
    font-size: clamp(13px, 1.2vw, 18px);
  }
  .q-side-stat.left  { text-align:left; border-right:3px solid #000; }
  .q-side-stat.right { text-align:right; border-left:3px solid #000; }
  .q-side-stat .lbl{ font-family: var(--f-pixel); font-size: clamp(8px, .85vw, 11px); color:#a36c2e; letter-spacing:.15em; text-transform:uppercase }
  .q-side-stat .val{ font-size: clamp(18px, 1.8vw, 26px); color:#ffd089; font-family:var(--f-doom); letter-spacing:.04em }
  .q-side-stat .blink{ animation: qBlink 1s steps(2) infinite }
  @keyframes qBlink{ 50%{opacity:.2} }

  /* ============== STAGE ============== */
  .q-stage{
    position:fixed;
    top: var(--hud-h); bottom: 86px; left:0; right:0;
    overflow:hidden;
    display:grid;
    grid-template-columns: minmax(220px, 1fr) minmax(380px, 1.4fr) minmax(220px, 1fr);
    grid-template-rows: 1fr;
    gap: 0;
  }

  /* center column */
  .q-center{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-left: 3px solid #000; border-right:3px solid #000;
    background:
      radial-gradient(circle at 50% 40%, #2a0a06 0%, transparent 55%),
      radial-gradient(circle at 50% 80%, #6e0606 -10%, transparent 50%),
      #100c0a;
    overflow:hidden;
  }
  /* pulsing pentagram floor */
  .q-floor{
    position:absolute; left:50%; bottom:-30%; transform:translateX(-50%);
    width: 120%; aspect-ratio:2/1;
    background:
      radial-gradient(ellipse at 50% 100%, #c41e0e80 0%, transparent 45%),
      conic-gradient(from 0deg at 50% 100%,
        #6e060600, #c41e0e30, #6e060600, #c41e0e30, #6e060600,
        #c41e0e30, #6e060600, #c41e0e30, #6e060600);
    filter: blur(4px);
    animation: qFloor 8s linear infinite;
    pointer-events:none;
  }
  @keyframes qFloor{
    to{ transform:translateX(-50%) rotate(360deg) }
  }
  /* embers */
  .q-embers{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
  .q-embers i{
    position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
    background: radial-gradient(circle, #ffd089, #ff5a1a 60%, transparent 80%);
    animation: qEmber linear infinite;
    box-shadow:0 0 6px #ff5a1a;
  }
  @keyframes qEmber{
    0%   { transform: translate(0,0) scale(1); opacity:0 }
    10%  { opacity:1 }
    100% { transform: translate(var(--dx), -110vh) scale(.2); opacity:0 }
  }

  /* TORCH = the original logo, central, clickable */
  .q-torch{
    position:relative; z-index:3;
    cursor:crosshair;
    transition:transform .15s;
    filter: drop-shadow(0 0 18px #ff5a1aaa) drop-shadow(0 0 60px #c41e0e80);
    animation: qTorchPulse 1.6s ease-in-out infinite;
  }
  .q-torch img{ width: clamp(140px, 18vw, 240px); height:auto }
  .q-torch:hover{ filter: drop-shadow(0 0 28px #ff5a1a) drop-shadow(0 0 90px #c41e0e) brightness(1.1) }
  .q-torch:active{ transform: scale(.95) }
  @keyframes qTorchPulse{
    0%,100%{ transform:translateY(0) scale(1) }
    50%{ transform:translateY(-6px) scale(1.03) }
  }
  .q-torch-base{
    position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
    width: 240px; height: 50px; pointer-events:none;
    background: radial-gradient(ellipse, #ff5a1a90 0%, #c41e0e40 30%, transparent 70%);
    filter: blur(8px);
    animation: qTorchPulse 1.6s ease-in-out infinite;
  }
  .q-torch-hint{
    position:absolute; left:50%; bottom:-58px; transform:translateX(-50%);
    font-family:var(--f-pixel); font-size:9px; color:#ff8c3a;
    letter-spacing:.2em; opacity:.7; white-space:nowrap;
  }

  /* WEAPON SLOTS — 9 tiles flanking the torch */
  .q-slots{
    position:relative; z-index:2;
    display:grid; gap:14px;
    align-content:center; justify-content:center;
    padding: 22px 16px;
    overflow-y:auto; overflow-x:hidden;
  }
  .q-slots.left  { grid-template-columns: 1fr; border-right: 0 }
  .q-slots.right { grid-template-columns: 1fr; border-left: 0 }
  .q-slots .slots-title{
    font-family:var(--f-pixel); font-size:10px; color:#a36c2e;
    letter-spacing:.2em; text-transform:uppercase;
    text-align:center; padding-bottom:6px; border-bottom:1px dashed #5a4d44;
    margin-bottom: 6px;
  }
  .slot{
    position:relative;
    display:grid; grid-template-columns: 36px 1fr auto; align-items:center;
    gap: 10px; padding: 10px 12px;
    background:
      linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
    border:2px solid #000;
    box-shadow:
      inset 0 1px 0 #5a4d44,
      inset 0 -1px 0 #000,
      0 2px 0 #000;
    color: var(--bone);
    text-decoration:none;
    font-family: var(--f-mono);
    font-size: 19px;
    cursor:pointer;
    transition: transform .08s, background .15s, box-shadow .15s;
  }
  .slot::before{
    content:''; position:absolute; left:-2px; top:-2px; bottom:-2px; width:6px;
    background: linear-gradient(180deg, #6e0606, #c41e0e, #6e0606);
    border:1px solid #000;
  }
  .slot:hover{
    transform: translateX(4px);
    background: linear-gradient(180deg, #3a1414 0%, #1a0606 100%);
    box-shadow: inset 0 0 20px #c41e0e60, 0 0 12px #c41e0e80, 0 2px 0 #000;
    color: #ffd089;
  }
  .slot:hover .slot-key{ background:#c41e0e; color:#fff }
  .slot:active{ transform: translateX(4px) scale(.97) }
  .slot-key{
    font-family:var(--f-doom); font-size:18px; line-height:1;
    background:#0d0303; color:#ff8c3a; border:2px solid #6e0606;
    width:32px; height:32px; display:grid; place-items:center;
    box-shadow: inset 0 -2px 0 #000;
  }
  .slot-name{ letter-spacing:.06em }
  .slot-meta{
    font-family:var(--f-pixel); font-size:8px; color:#a36c2e;
    letter-spacing:.15em;
  }
  .slot[data-soon] .slot-name{ color:#7a5a3a }
  .slot[data-soon]::after{
    content:'SOON'; position:absolute; right:6px; top:-7px;
    font-family:var(--f-pixel); font-size:7px; color:#0d0303;
    background:#f5b042; padding:2px 4px; border:1px solid #000;
  }

  /* ============== STATUS BAR (BOTTOM) ============== */
  .q-status{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    height: 86px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:0;
    border-top:3px solid #000;
    background: linear-gradient(180deg, #2a221e 0%, #100c0a 100%);
  }
  .q-status::before{
    content:''; position:absolute; inset:auto 0 100% 0; height:8px;
    background: repeating-linear-gradient(45deg,
      #f5b042 0 14px, #1a1410 14px 28px);
    border-bottom:2px solid #000;
  }
  .q-stat{
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 6px 8px; gap: 2px;
    border-right: 2px solid #000;
    background:
      radial-gradient(ellipse at 50% 100%, #6e060640, transparent 60%);
  }
  .q-stat:last-child{ border-right:0 }
  .q-stat .lbl{
    font-family:var(--f-pixel); font-size:9px; color:#a36c2e;
    letter-spacing:.18em; text-transform:uppercase;
  }
  .q-stat .num{
    font-family:var(--f-doom); font-size: clamp(22px, 2.6vw, 38px);
    color:#ff8c3a; letter-spacing:.04em; line-height:1;
    text-shadow: 0 0 8px #ff5a1a, 0 2px 0 #6e0606;
  }
  .q-stat .num.warn{ color:#33ff66; text-shadow:0 0 8px #33ff66 }
  .q-stat.face{
    padding: 4px;
  }
  .q-face{
    width: 64px; height: 64px;
    background:
      radial-gradient(circle at 35% 35%, #ffd089, #c08054 70%),
      #c08054;
    border: 3px solid #000;
    box-shadow: inset 0 0 0 2px #6e0606, 0 0 0 1px #5a4d44;
    border-radius: 4px;
    position:relative;
    image-rendering: pixelated;
  }
  .q-face::before, .q-face::after{
    content:''; position:absolute; top:24px; width:8px; height:8px;
    background:#0d0303; border:1px solid #6e0606;
    box-shadow: 0 0 4px #c41e0e;
  }
  .q-face::before{ left:14px }
  .q-face::after{ right:14px }
  .q-face .mouth{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    width:24px; height:6px; background:#0d0303; border:1px solid #6e0606;
  }
  .q-face .blood{
    position:absolute; top:0; left:14px; width:2px; height:14px;
    background:linear-gradient(to bottom, transparent, #c41e0e80, #6e060680);
    border-radius:0 0 1px 1px;
    opacity:.55;
  }
  .q-face .blood:nth-child(2){ left:48px; height:8px; opacity:.4 }

  /* ============== ACTIVITY FEED PANEL ============== */
  .q-feed-toggle{
    position:fixed; bottom: 100px; right: 14px; z-index: 60;
    background: #2a0606; color: #ff8c3a;
    border: 2px solid #c41e0e;
    font-family: var(--f-pixel); font-size: 10px; letter-spacing:.15em;
    padding: 10px 14px; cursor:pointer;
    box-shadow: 0 0 14px #c41e0e80, inset 0 0 8px #00000088;
  }
  .q-feed-toggle:hover{ background:#c41e0e; color:#fff }

  .q-feed{
    position:fixed; right:0; top: var(--hud-h); bottom: 86px;
    width: clamp(280px, 28vw, 380px);
    background:
      linear-gradient(180deg, #1a1410 0%, #0d0303 100%);
    border-left: 3px solid #000;
    box-shadow: inset 4px 0 0 #6e0606, -8px 0 30px #000a;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    z-index: 55;
    display:flex; flex-direction:column;
  }
  .q-feed.open{ transform:translateX(0) }
  .q-feed-head{
    background: linear-gradient(180deg, #2a0606, #100c0a);
    border-bottom: 2px solid #c41e0e;
    padding: 12px 16px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .q-feed-head h3{
    font-family: var(--f-doom); font-size: 18px; color:#ffd089; letter-spacing:.06em;
  }
  .q-feed-head button{
    background:transparent; border:1px solid #c41e0e; color:#ff8c3a;
    font-family: var(--f-pixel); font-size:9px; padding: 4px 8px; cursor:pointer;
  }
  .q-feed-list{ overflow-y:auto; padding: 8px; flex:1 }
  .q-feed-item{
    display:grid; grid-template-columns: 50px 1fr; gap: 10px;
    padding: 8px; border:1px solid #2a221e;
    margin-bottom: 6px;
    background: #0d0303;
    transition: background .15s, border .15s;
    cursor:pointer;
  }
  .q-feed-item:hover{ background:#1a0606; border-color:#c41e0e }
  .q-feed-thumb{
    width:50px; height:50px;
    background:
      repeating-linear-gradient(45deg, #2a221e 0 4px, #100c0a 4px 8px);
    border:1px solid #5a4d44;
    display:grid; place-items:center;
    color:#ff8c3a; font-family:var(--f-pixel); font-size:9px;
  }
  .q-feed-tag{
    font-family:var(--f-pixel); font-size:8px;
    color: var(--ember); letter-spacing:.15em; margin-bottom:2px;
  }
  .q-feed-title{
    font-family: var(--f-mono); font-size:18px; color:#ffd089; line-height:1.1;
  }
  .q-feed-time{
    font-family: var(--f-pixel); font-size:7px; color:#a36c2e; margin-top:2px;
  }

  /* ============== ADMIN BUTTON ============== */
  .q-admin{
    position:fixed; right:14px; top: calc(var(--hud-h) + 12px); z-index: 60;
    background: #0d0d0d; color: #33ff66;
    border: 2px solid #33ff66;
    font-family: var(--f-pixel); font-size: 9px; letter-spacing:.15em;
    padding: 8px 12px; cursor:pointer;
    box-shadow: 0 0 12px #33ff6660;
  }
  .q-admin:hover{ background:#33ff66; color:#0d0d0d }

  /* ============== DOOM DOOR (overlay) ============== */
  .q-door{
    position:fixed; inset: var(--hud-h) 0 86px 0; z-index: 70;
    pointer-events:none;
    transition: transform 1.6s cubic-bezier(.55,.05,.4,.95);
    transform: translateY(-100%);
  }
  .q-door.closed{ transform: translateY(0); pointer-events:auto; cursor:pointer }
  .q-door .panes{
    position:absolute; inset:0;
    display:grid; grid-template-columns: 1fr 1fr;
    background:#0d0303;
  }
  .q-door .pane{
    background:
      linear-gradient(180deg, #100c0a 0%, #2a221e 50%, #100c0a 100%),
      url('../assets/doordoom.png');
    background-size: cover, 256px 256px;
    background-blend-mode: multiply, normal;
    image-rendering: pixelated;
    filter: contrast(1.05) saturate(.9);
    border: 4px solid #000;
    position:relative;
  }
  .q-door .pane:nth-child(1){
    background:
      linear-gradient(90deg, #100c0a 0%, transparent 30%),
      url('../assets/doordoom.png');
    background-size: cover, 256px 256px;
  }
  .q-door .pane::after{
    content:''; position:absolute; inset:auto 0 0 0; height:24px;
    background: repeating-linear-gradient(45deg,
      #f5b042 0 14px, #1a1410 14px 28px);
    border-top:3px solid #000;
  }
  .q-door .seam{
    position:absolute; left:50%; top:0; bottom:0; width:6px; transform:translateX(-50%);
    background: linear-gradient(180deg, #c41e0e, #6e0606);
    box-shadow: 0 0 12px #ff5a1a;
  }
  .q-door .lock{
    position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
    width: clamp(80px, 9vw, 130px); aspect-ratio:1;
    background:
      radial-gradient(circle at 50% 50%, #c41e0e 0%, #6e0606 40%, #2a0606 70%, #000 100%);
    border: 4px solid #000;
    box-shadow: inset 0 0 30px #000, 0 0 30px #c41e0e;
    display:grid; place-items:center;
    color:#ffd089; font-family:var(--f-doom); font-size: clamp(14px, 1.6vw, 22px);
    letter-spacing:.06em;
    text-shadow: 0 0 8px #ff5a1a, 0 2px 0 #6e0606;
    text-align:center;
    animation: qLockPulse 1.8s ease-in-out infinite;
  }
  @keyframes qLockPulse{
    50%{ box-shadow: inset 0 0 30px #000, 0 0 50px #ff5a1a }
  }

  /* ============== RAGE METER ON THE TITLE ============== */
  .q-rage-bar{
    position:fixed; left:0; right:0; top:0; height:3px; z-index:80;
    background: linear-gradient(90deg, #c41e0e var(--rage,0%), transparent var(--rage,0%));
    pointer-events:none;
    box-shadow: 0 0 8px #c41e0e;
  }

  /* ============== MOBILE ============== */
  @media (max-width: 900px){
    :root{ --hud-h: 56px }
    html, body{ overflow-y:auto; height:auto; min-height:100% }
    .q-stage{
      position:relative; top:0; bottom:0; left:0; right:0;
      margin-top: var(--hud-h); margin-bottom: 70px;
      grid-template-columns: 1fr; grid-template-rows: auto auto auto;
      overflow:visible;
    }
    .q-center{ min-height: 60vh; border-left:0; border-right:0; border-bottom:3px solid #000; padding: 30px 0 }
    .q-slots{ padding:14px 10px; grid-template-columns: 1fr 1fr; display:grid; gap:8px }
    .q-slots.left, .q-slots.right{ grid-template-columns: 1fr 1fr }
    .q-side-stat.left, .q-side-stat.right{ display:none }
    .q-top{ grid-template-columns: 1fr }
    .q-top .panel{ display:none }
    .q-top .center{ border-left:0; border-right:0 }
    .q-feed{ width: 100%; top: var(--hud-h); bottom: 70px }
    .q-status{ grid-template-columns: repeat(3, 1fr); height: 70px }
    .q-status .q-stat:nth-child(n+4){ display:none }
    .q-console{ height: 80vh }
    .q-cons-out{ font-size: 16px }
    .q-cons-prompt input, .q-cons-prompt .ps1{ font-size: 16px }
    .q-admin-row{ grid-template-columns: 28px 1fr 1fr; row-gap:6px }
    .q-admin-row > select, .q-admin-row > .toggle, .q-admin-row > .del{ grid-column: span 1 }
    .q-admin-cmd-row{ grid-template-columns: 1fr 1fr }
    .q-preview-frame{ aspect-ratio: 4/3 }
    .q-feed-toggle{ bottom: 80px; font-size:9px; padding: 8px 10px }
  }

  /* ===== scrollbars ===== */
  .q-slots::-webkit-scrollbar, .q-feed-list::-webkit-scrollbar{ width:8px }
  .q-slots::-webkit-scrollbar-thumb, .q-feed-list::-webkit-scrollbar-thumb{ background:#6e0606 }
  .q-slots::-webkit-scrollbar-track, .q-feed-list::-webkit-scrollbar-track{ background:#100c0a }

  /* ============== QUAKE CONSOLE (drop-down) ============== */
  .q-console{
    position:fixed; left:0; right:0; top:0; height:65vh; z-index:200;
    background: linear-gradient(180deg, rgba(8,12,10,.985) 0%, rgba(13,3,3,.97) 100%);
    border-bottom: 3px solid #c41e0e;
    box-shadow: 0 8px 0 #6e0606, 0 12px 60px #000c, inset 0 0 0 1px #1f3a26, inset 0 -10px 30px #c41e0e30;
    transform: translateY(-100%);
    transition: transform .55s cubic-bezier(.55,.05,.4,.95);
    display:grid; grid-template-rows: auto 1fr auto;
    font-family: 'VT323', monospace; color:#33ff66;
    overflow:hidden;
  }
  .q-console.open{ transform: translateY(0) }
  .q-console.boot{ transform: translateY(0); height:100vh; border-bottom-width:0; box-shadow:none }
  .q-console::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
  }
  .q-console::after{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
  }
  .q-cons-bar{
    position:relative; z-index:2;
    display:grid; grid-template-columns: auto 1fr auto; gap:14px; align-items:center;
    padding:6px 14px;
    background: linear-gradient(180deg,#0d1a14,#060a08);
    border-bottom:1px solid #1f3a26;
    font-family: 'IBM Plex Mono', 'VT323', monospace; font-size:12px; color:#ffb000;
    letter-spacing:.05em;
  }
  .q-cons-bar .dots{ display:flex; gap:6px }
  .q-cons-bar .dot{ width:10px; height:10px; border-radius:50%; background:#1f3a26; border:1px solid #0d6e2c }
  .q-cons-bar .dot.on{ background:#33ff66; box-shadow:0 0 8px #33ff66 }
  .q-cons-bar .dot.warn{ background:#ffb000; box-shadow:0 0 8px #ffb000 }
  .q-cons-bar .dot.bad{ background:#c41e0e; box-shadow:0 0 8px #c41e0e }
  .q-cons-bar .path{ color:#cfd6c8 } .q-cons-bar .path b{ color:#33ff66 }
  .q-cons-bar .close{
    background:transparent; border:1px solid #c41e0e; color:#ff8c3a;
    font-family:'Press Start 2P', monospace; font-size:8px; padding:4px 8px;
    letter-spacing:.15em; cursor:pointer;
  }
  .q-cons-bar .close:hover{ background:#c41e0e; color:#fff }
  .q-cons-out{
    position:relative; z-index:2;
    overflow-y:auto; padding:14px 18px;
    font-size:22px; line-height:1.18;
  }
  .q-cons-out::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(51,255,102,.06) 0 1px, transparent 1px 26px);
  }
  .q-cons-line{ position:relative; z-index:1; white-space:pre-wrap; word-break:break-word }
  .q-cons-line .dim{ color:#7e8e7a } .q-cons-line .ok{ color:#33ff66 }
  .q-cons-line .warn{ color:#ffb000 } .q-cons-line .bad{ color:#c41e0e; text-shadow:0 0 4px #c41e0e }
  .q-cons-line .hl{ color:#ff8c1a; text-shadow:0 0 4px #ff8c1a }
  .q-cons-prompt{
    position:relative; z-index:2;
    display:flex; gap:8px; align-items:center;
    padding:10px 18px;
    background: linear-gradient(180deg, transparent, #0d1a14);
    border-top:1px dashed #1f3a26;
  }
  .q-cons-prompt .ps1{ color:#33ff66; font-family:'VT323',monospace; font-size:22px }
  .q-cons-prompt .ps1 b{ color:#ff8c1a }
  .q-cons-prompt input{
    flex:1; background:transparent; border:0; outline:none;
    color:#33ff66; font-family:'VT323',monospace; font-size:22px;
    caret-color: transparent;
  }
  .q-cons-prompt .caret{ display:inline-block; width:10px; height:1em; background:#33ff66; animation:qCaret 1s steps(2) infinite; vertical-align:-2px }
  @keyframes qCaret{ 50%{opacity:0} }

  /* QUAKE LOADING ART (boot full-screen) */
  .q-boot{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:28px;
    background: radial-gradient(ellipse at 50% 50%, #2a0a06 0%, #0a0214 70%, #000 100%);
  }
  .q-boot.gone{ opacity:0; transition:opacity .4s; pointer-events:none }
  .q-boot .banner{
    color:#ff8c1a; font-family:'IBM Plex Mono','VT323',monospace; font-size:11px;
    line-height:1.1; white-space:pre; text-shadow:0 0 8px #ff8c1a; text-align:center;
  }
  .q-boot .map{
    font-family:'Black Ops One', sans-serif; font-size: clamp(28px, 4vw, 56px);
    color:#ffd089; letter-spacing:.05em;
    text-shadow: 0 0 8px #ff5a1a, 0 0 24px #c41e0e, 0 4px 0 #6e0606;
    -webkit-text-stroke:1px #2a0606;
  }
  .q-boot .sub{
    font-family:'Press Start 2P', monospace; font-size:10px;
    color:#a36c2e; letter-spacing:.2em;
  }
  .q-boot .bar{
    position:relative; width: min(60vw, 600px); height: 18px;
    background:#0d0303; border:2px solid #6e0606;
    box-shadow: inset 0 0 12px #00000088;
  }
  .q-boot .bar > span{
    display:block; height:100%; width:0%;
    background: repeating-linear-gradient(90deg, #c41e0e 0 8px, #ff5a1a 8px 16px);
    box-shadow: 0 0 12px #c41e0e, inset 0 -2px 0 #6e0606;
    transition: width .15s linear;
  }
  .q-boot .pct{
    font-family:'VT323',monospace; font-size:24px; color:#ff8c3a;
    text-shadow:0 0 8px #ff5a1a;
  }
  .q-boot .lines{
    width: min(70vw, 720px); max-height: 30vh; overflow:hidden;
    font-family:'VT323',monospace; font-size:18px; color:#7e8e7a;
    border-top:1px dashed #1f3a26; padding-top:12px;
  }
  .q-boot .lines .ok{ color:#33ff66 } .q-boot .lines .warn{ color:#ffb000 }
  .q-boot .lines .hl{ color:#ff8c1a; text-shadow:0 0 4px #ff8c1a }
  .q-boot .hint{
    position:absolute; bottom:24px; left:0; right:0; text-align:center;
    color:#a36c2e; font-family:'Press Start 2P', monospace; font-size:9px;
    letter-spacing:.18em; opacity:0; transition: opacity .3s;
  }
  .q-boot .hint.show{ opacity:.85 }

  /* CONSOLE TOGGLE — DISCRETE ² */
  .q-cons-toggle{
    position:fixed; left:8px; top:8px; z-index:60;
    width:24px; height:24px; padding:0;
    background:#0d0303; color:#33ff66;
    border:1px solid #1f3a26;
    font-family:'VT323', monospace; font-size:18px; line-height:1;
    display:grid; place-items:center;
    cursor:pointer; opacity:.4;
    transition: opacity .15s, background .15s, color .15s, transform .1s, box-shadow .15s;
  }
  .q-cons-toggle:hover{
    opacity:1; background:#33ff66; color:#0d0303;
    box-shadow: 0 0 8px #33ff6680;
  }
  body.q-cons-locked .q-cons-toggle{ display:none }

  /* ============== CENTER STAGE PREVIEW ============== */
  .q-preview{
    position:absolute; inset:0; z-index:4;
    display:none;
    flex-direction:column; align-items:center; justify-content:center;
    gap:14px; padding:20px;
    background: radial-gradient(ellipse at 50% 40%, #2a0a06ee 0%, #0d0303f2 70%);
  }
  .q-preview.show{ display:flex; animation: qPrevIn .25s ease-out }
  @keyframes qPrevIn{
    from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:scale(1) }
  }
  .q-preview-tag{
    font-family: var(--f-pixel); font-size:10px; color:#ff8c3a;
    letter-spacing:.25em;
  }
  .q-preview-title{
    font-family: var(--f-doom); font-size: clamp(24px, 3.6vw, 48px);
    color:#ffd089; letter-spacing:.04em; text-align:center;
    text-shadow: 0 0 8px #ff5a1a, 0 0 24px #c41e0e, 0 4px 0 #6e0606;
    -webkit-text-stroke:1px #2a0606; line-height:1;
  }
  .q-preview-frame{
    width: min(86%, 460px); aspect-ratio: 16/10;
    background:
      repeating-linear-gradient(45deg, #2a221e 0 6px, #100c0a 6px 12px),
      #1a1410;
    border: 3px solid #6e0606;
    box-shadow: inset 0 0 30px #000c, 0 0 40px #c41e0e60;
    position:relative;
    display:grid; place-items:center;
    overflow:hidden;
  }
  .q-preview-frame img{
    max-width:100%; max-height:100%; object-fit:cover; width:100%; height:100%;
    image-rendering: pixelated; filter: contrast(1.05) saturate(.85);
  }
  .q-preview-frame .placeholder{
    font-family: var(--f-pixel); font-size:11px; color:#a36c2e;
    letter-spacing:.18em; text-align:center; padding:20px; line-height:1.6;
  }
  .q-preview-frame .placeholder b{ color:#ff8c3a; display:block; font-size:32px; margin-bottom:8px }
  .q-preview-frame::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  }
  .q-preview-meta{
    font-family: var(--f-mono); font-size:18px; color:#cfd6c8; text-align:center;
    max-width: 86%; line-height:1.2;
  }
  .q-preview-actions{ display:flex; gap:14px; margin-top:6px }
  .q-preview-actions button{
    font-family: var(--f-doom); font-size:18px; letter-spacing:.06em;
    padding: 10px 22px; cursor:pointer;
    border: 3px solid #000;
    box-shadow: inset 0 -4px 0 #000a, 0 2px 0 #000;
    transition: transform .08s, background .15s;
  }
  .q-preview-actions button:active{ transform: translateY(2px) }
  .q-preview-actions .yes{
    background: linear-gradient(180deg, #c41e0e, #6e0606);
    color:#ffd089; text-shadow: 0 2px 0 #000;
  }
  .q-preview-actions .yes:hover{ background: linear-gradient(180deg, #ff5a1a, #c41e0e) }
  .q-preview-actions .no{
    background: linear-gradient(180deg, #2a221e, #100c0a); color:#a36c2e;
  }
  .q-preview-actions .no:hover{ color:#ff8c3a }
  .q-preview-kbd{
    font-family: var(--f-pixel); font-size:8px; color:#a36c2e;
    letter-spacing:.2em; margin-top:4px;
  }

  /* ============== ADMIN AUTH MODAL ============== */
  .q-auth-overlay{
    position:fixed; inset:0; z-index:310; display:none;
    background: rgba(0,0,0,.92); backdrop-filter: blur(3px);
    align-items:center; justify-content:center; padding: 24px;
  }
  .q-auth-overlay.show{ display:flex; animation: qPrevIn .25s ease-out }
  .q-auth-panel{
    width: min(420px, 96vw);
    background: linear-gradient(180deg, #1a1410 0%, #0d0303 100%);
    border: 3px solid #c41e0e;
    box-shadow: 0 0 60px #c41e0e80, inset 0 0 30px #000a;
    display:flex; flex-direction:column;
  }
  .q-auth-head{
    background: linear-gradient(180deg, #2a0606, #100c0a);
    border-bottom: 2px solid #c41e0e;
    padding: 12px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .q-auth-head h2{
    font-family: var(--f-doom); font-size: 20px; color:#ffd089; letter-spacing:.06em;
    text-shadow: 0 0 8px #ff5a1a;
  }
  .q-auth-badge{
    font-family: var(--f-pixel); font-size: 8px; color:#33ff66;
    background:#0d0d0d; border:1px solid #33ff66; padding:3px 6px;
    letter-spacing:.2em;
  }
  .q-auth-badge.warn{ color:#f5b042; border-color:#f5b042 }
  .q-auth-body{ padding: 16px; display:flex; flex-direction:column; gap:10px }
  .q-auth-msg{
    font-family: var(--f-mono); font-size: 18px; color:#cfd6c8;
    line-height:1.3;
  }
  .q-auth-body input{
    background:#0d0303; border:2px solid #2a221e;
    color:#ffd089; font-family: var(--f-mono); font-size: 20px;
    padding: 10px 12px; outline:none; width:100%;
    letter-spacing:.04em;
  }
  .q-auth-body input:focus{ border-color:#c41e0e; background:#1a0606 }
  .q-auth-err{
    font-family: var(--f-pixel); font-size: 10px; color:#c41e0e;
    letter-spacing:.15em; min-height: 14px;
    text-shadow: 0 0 6px #c41e0e80;
  }
  .q-auth-actions{
    display:flex; justify-content:space-between; gap:10px;
    padding: 12px 16px; border-top:1px solid #2a221e;
    background:#0d0303;
  }
  .q-auth-ok{
    background: linear-gradient(180deg, #c41e0e, #6e0606);
    color:#ffd089; border:2px solid #000;
    font-family: var(--f-doom); font-size: 16px; letter-spacing:.06em;
    padding: 8px 18px; cursor:pointer;
    box-shadow: inset 0 -3px 0 #000a, 0 2px 0 #000;
    text-shadow: 0 2px 0 #000;
  }
  .q-auth-ok:hover{ background: linear-gradient(180deg, #ff5a1a, #c41e0e) }
  .q-auth-ok:active{ transform: translateY(2px); box-shadow: inset 0 -3px 0 #000a }
  .q-auth-ok:disabled{ opacity:.4; cursor:not-allowed }
  .q-auth-cancel{
    background:transparent; border:1px solid #5a4d44; color:#a36c2e;
    font-family: var(--f-pixel); font-size: 9px; letter-spacing:.15em;
    padding: 8px 12px; cursor:pointer;
  }
  .q-auth-cancel:hover{ color:#c41e0e; border-color:#c41e0e }
  .q-auth-panel.shake{ animation: qAuthShake .35s }
  @keyframes qAuthShake{
    10%,90%{ transform: translate3d(-2px,0,0) }
    20%,80%{ transform: translate3d(4px,0,0) }
    30%,50%,70%{ transform: translate3d(-6px,0,0) }
    40%,60%{ transform: translate3d(6px,0,0) }
  }

  /* ============== ADMIN PANEL (hidden until IDDQD) ============== */
  .q-admin-overlay{
    position:fixed; inset:0; z-index:300; display:none;
    background: rgba(0,0,0,.86); backdrop-filter: blur(2px);
    align-items:center; justify-content:center; padding: 24px;
  }
  .q-admin-overlay.show{ display:flex; animation: qPrevIn .25s ease-out }
  .q-admin-panel{
    width: min(960px, 96vw); max-height: 92vh; overflow:hidden;
    display:flex; flex-direction:column;
    background: linear-gradient(180deg, #1a1410 0%, #0d0303 100%);
    border: 3px solid #c41e0e;
    box-shadow: 0 0 60px #c41e0e80, inset 0 0 30px #000a;
  }
  .q-admin-head{
    background: linear-gradient(180deg, #2a0606, #100c0a);
    border-bottom: 2px solid #c41e0e;
    padding: 10px 16px;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
  }
  .q-admin-head h2{
    font-family: var(--f-doom); font-size:22px; color:#ffd089; letter-spacing:.06em;
    text-shadow: 0 0 8px #ff5a1a;
  }
  .q-admin-head .left-grp{ display:flex; align-items:center; gap:10px }
  .q-admin-head .iddqd-badge{
    font-family: var(--f-pixel); font-size:8px; color:#33ff66;
    background:#0d0d0d; border:1px solid #33ff66; padding:3px 6px;
    letter-spacing:.2em;
  }
  .q-admin-head .close{
    background:transparent; border:1px solid #c41e0e; color:#ff8c3a;
    font-family: var(--f-pixel); font-size:9px; padding:6px 10px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-head .close:hover{ background:#c41e0e; color:#fff }
  .q-admin-tabs{
    display:flex; border-bottom: 1px solid #2a221e; background:#0d0303;
  }
  .q-admin-tabs button{
    flex:1; padding: 10px 12px; cursor:pointer;
    background: transparent; border:0; border-right:1px solid #2a221e;
    color:#a36c2e; font-family: var(--f-pixel); font-size:10px;
    letter-spacing:.15em;
  }
  .q-admin-tabs button:last-child{ border-right:0 }
  .q-admin-tabs button.active{ background:#2a0606; color:#ff8c3a; box-shadow: inset 0 -3px 0 #c41e0e }
  .q-admin-tabs button:hover{ color:#ffd089 }
  .q-admin-body{ flex:1; overflow-y:auto; padding: 14px 16px }
  .q-admin-pane{ display:none }
  .q-admin-pane.active{ display:block }
  .q-admin-row{
    display:grid; grid-template-columns: 36px 1.4fr 1.6fr 1fr 80px 60px;
    gap:8px; align-items:center;
    padding: 6px; margin-bottom: 4px;
    background:#100c0a; border:1px solid #2a221e;
  }
  .q-admin-row:hover{ border-color:#6e0606 }
  .q-admin-row .key{
    font-family:var(--f-doom); font-size:18px;
    background:#0d0303; color:#ff8c3a; border:2px solid #6e0606;
    width:32px; height:32px; display:grid; place-items:center;
  }
  .q-admin-row input, .q-admin-row select, .q-admin-cmd-row input, .q-admin-cmd-row select{
    background:#0d0303; border:1px solid #2a221e;
    color:#ffd089; font-family:var(--f-mono); font-size:16px;
    padding: 6px 8px; outline:none; width:100%;
  }
  .q-admin-row input:focus, .q-admin-row select:focus,
  .q-admin-cmd-row input:focus, .q-admin-cmd-row select:focus{
    border-color:#c41e0e; background:#1a0606;
  }
  .q-admin-row .toggle{
    background:transparent; border:1px solid #5a4d44; color:#a36c2e;
    font-family:var(--f-pixel); font-size:8px; padding:4px 6px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-row .toggle.on{ border-color:#33ff66; color:#33ff66 }
  .q-admin-row .toggle.soon{ border-color:#f5b042; color:#f5b042 }
  .q-admin-row .del, .q-admin-cmd-row .del{
    background:#2a0606; border:1px solid #c41e0e; color:#ff8c3a;
    font-family:var(--f-pixel); font-size:8px; padding:4px 6px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-row .del:hover, .q-admin-cmd-row .del:hover{ background:#c41e0e; color:#fff }
  .q-admin-cmd-row{
    display:grid; grid-template-columns: 1fr 1.4fr 1.4fr 80px 60px;
    gap:8px; align-items:center;
    padding:6px; margin-bottom:4px;
    background:#100c0a; border:1px solid #2a221e;
  }
  .q-admin-cmd-row:hover{ border-color:#6e0606 }
  .q-admin-cmd-row code{
    font-family:var(--f-mono); color:#33ff66; padding:6px 8px;
    background:#0d0303; border:1px solid #1f3a26;
  }
  .q-admin-actions{
    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding: 10px 16px;
    background:#0d0303; border-top:1px solid #2a221e;
  }
  .q-admin-actions .btn-add{
    background: linear-gradient(180deg, #1a3a1a, #0d2a0d);
    color:#33ff66; border:2px solid #33ff66;
    font-family: var(--f-pixel); font-size:9px; padding:8px 14px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-actions .btn-add:hover{ background:#33ff66; color:#0d0d0d }
  .q-admin-actions .btn-reset{
    background:transparent; color:#a36c2e; border:1px solid #5a4d44;
    font-family: var(--f-pixel); font-size:9px; padding:8px 14px; cursor:pointer;
    letter-spacing:.15em;
  }
  .q-admin-actions .btn-reset:hover{ color:#c41e0e; border-color:#c41e0e }
  .q-admin-info{
    font-family: var(--f-mono); font-size:14px; color:#7e8e7a;
    padding:8px 6px 14px; line-height:1.4;
  }
  .q-admin-info code{
    color:#ff8c3a; background:#0d0303; padding:1px 5px; border:1px solid #2a221e;
    font-family: var(--f-mono);
  }
  .q-admin-pane h4{
    font-family: var(--f-pixel); font-size:10px; color:#a36c2e;
    letter-spacing:.2em; margin: 6px 0 8px;
  }