/* The Omega Virus — page styles.
 *
 * Generated from games/tempgamefolder/omegavirus/omega.html <style>, scoped for
 * embedding in the site shell:
 *   - every selector lives under #ov-root. This sheet was especially hostile to
 *     embedding: it had a bare `* { margin:0; padding:0 }` global reset and a
 *     `body, html { overflow:hidden }` that would have killed page scrolling
 *     site-wide. Both now collapse onto #ov-root.
 *   - `:root` (the --theme-color / --theme-dim pair the console re-tints per
 *     player) also collapses onto #ov-root, so the game's theming can't leak.
 *     updateUITheme() in the game JS was retargeted to match.
 *   - .game-container's 100vw/100vh -> 100%/100%; #ov-root owns the size now.
 *   - the three overlays (#start-overlay/#shield-overlay/#combat-overlay) were
 *     already position:absolute at 100%/100%, so they contain to #ov-root
 *     unchanged.
 *
 * The 3D board is a Three.js canvas sized from #canvas-container's client rect
 * (see onResize in js/games/omega-virus.js) — it reflows, unlike Notebook War's
 * fixed 800x600. Don't add transform/filter to #ov-root; OrbitControls reads
 * pointer coords against the canvas rect.
 */

#ov-root { --theme-color: #33ff33; --theme-dim: #002200; }
    #ov-root, #ov-root * { box-sizing: border-box; margin: 0; padding: 0; }
    /* Was `body, html`. The prototype owned the viewport (100%/100% of the screen);
   inside the site shell #ov-root has to state its own height instead, or it
   collapses to nothing and the absolutely-positioned board/overlays vanish.
   min() keeps the console usable on short laptop screens without ever pushing
   the site nav off the top. overflow:hidden is safe HERE (it was lethal on
   body) and is what clips the three overlays to the panel. */
#ov-root {
  width: 100%;
  height: min(78vh, 760px);
  min-height: 520px;
  background-color: #050510;
  color: var(--theme-color);
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  user-select: none;
  transition: color 0.5s ease;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 40px;
}
    
    #ov-root .game-container { display: flex; width: 100%; height: 100%; position: relative; }
    #ov-root #canvas-container { flex: 2; position: relative; border-right: 2px solid var(--theme-color); transition: border-color 0.5s ease; overflow: hidden; background: radial-gradient(circle at center, #1a1a24 0%, #000000 100%); }
    
    /* The console is a fixed-height flex column: everything above the log is
       flex:none, the log absorbs spare space (with a guaranteed minimum), and
       overflow-y:auto is the safety net so no section can ever be pushed
       clean out of the panel on short screens. */
    #ov-root .ui-console { flex: 1.2; background-color: #0a0a0a; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; max-width: 450px; z-index: 10; border-left: 4px solid #222; box-shadow: -10px 0 30px rgba(0,0,0,0.8); overflow-y: auto; }
    #ov-root .console-header { flex: none; text-align: center; border-bottom: 2px solid var(--theme-color); padding-bottom: 7px; transition: border-color 0.5s ease;}
    #ov-root .console-header h2 { font-size: 1.25rem; letter-spacing: 2px; }
    #ov-root .info-panel { flex: none; display: flex; justify-content: space-between; font-size: 0.9rem; color: #ffffaa; }

    #ov-root #timer { flex: none; font-size: clamp(1.9rem, 4.5vh, 2.6rem); line-height: 1.1; color: #ff3333; text-align: center; text-shadow: 0 0 15px #ff0000; margin: 0; font-weight: bold; letter-spacing: 2px; }

    #ov-root .hardware-panel { flex: none; background: #111; border: 2px solid #333; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; box-shadow: inset 0 0 20px #000; }
    
    #ov-root #turn-light { position: absolute; top: 15px; right: 15px; width: 15px; height: 15px; border-radius: 50%; background: #222; border: 2px solid #111; transition: all 0.3s ease; }
    #ov-root #turn-light.active { background: var(--theme-color); box-shadow: 0 0 15px var(--theme-color); border-color: #fff; }

    #ov-root .unit-selector { display: flex; gap: 10px; width: 80%; }
    #ov-root .unit-btn { flex: 1; background: #222; border: 2px solid #555; color: #aaa; padding: 6px; font-family: 'Courier New'; font-weight: bold; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem;}
    #ov-root .unit-btn.active { border-color: var(--theme-color); color: var(--theme-color); background: var(--theme-dim); box-shadow: inset 0 0 10px var(--theme-dim); }
    #ov-root .unit-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    #ov-root .lcd-display { background: var(--theme-dim); border: 3px inset #444; width: 80%; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: var(--theme-color); letter-spacing: 12px; text-shadow: 0 0 8px var(--theme-color); transition: all 0.5s ease; box-shadow: inset 0 0 15px #000;}
    #ov-root .lcd-display.error { color: #ff3333 !important; text-shadow: 0 0 8px #ff3333 !important; background: #330000; }
    
    /* Absolute positioning (not grid rows) so the vertical stagger is exact:
       1 and 2 keep R/0's x untouched — no button's box ever intersects another's —
       they're just raised to straddle the seam between R and 0, half their height
       reading against R above and half against 0 below. 0 sits close under R. */
    #ov-root .keypad-cross { position: relative; width: 148px; height: 100px; margin: 2px auto 0; }
    #ov-root .key-btn { position: absolute; width: 46px; height: 46px; background: linear-gradient(180deg, #333 0%, #111 100%); border: 2px solid #555; color: white; font-size: 1.25rem; font-weight: bold; cursor: pointer; border-radius: 4px; box-shadow: 0 3px 0 #000; transition: all 0.1s; }
    #ov-root .key-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #000; background: #444; }
    #ov-root .btn-r { left: 51px; top: 0; background: linear-gradient(180deg, #662222 0%, #330000 100%); border-color: #ff3333; z-index: 1; }
    #ov-root .btn-1 { left: 0; top: 27px; z-index: 2; }
    #ov-root .btn-2 { left: 102px; top: 27px; z-index: 2; }
    #ov-root .btn-0 { left: 51px; top: 54px; z-index: 1; }

    #ov-root #status-log { flex: 1 1 auto; min-height: 110px; background-color: #050505; border: 1px solid var(--theme-color); padding: 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; font-size: 0.85rem; line-height: 1.35; transition: border-color 0.5s ease; box-shadow: inset 0 0 10px #000;}
    #ov-root .log-virus { color: #ff4444; font-weight: bold; text-shadow: 0 0 2px #ff0000; }
    #ov-root .log-computer { color: #44ccff; font-weight: bold; }
    #ov-root .log-system { color: #888888; }
    #ov-root .log-secret { color: #ff44ff; font-weight: bold; }
    
    #ov-root #prompt-text { font-size: 0.85rem; color: #ffcc00; text-align: center; min-height: 1.2rem; font-weight: bold; letter-spacing: 0.5px;}

    #ov-root .inventory { flex: none; border: 1px solid var(--theme-color); padding: 8px 10px; transition: border-color 0.5s ease; background: #111;}
    #ov-root .inventory h3 { font-size: 0.85rem; letter-spacing: 1px; }
    #ov-root #inventory-items { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; max-height: 64px; overflow-y: auto; }
    #ov-root .item-badge { background: #000; border: 1px solid var(--theme-color); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; transition: border-color 0.5s ease; font-weight: bold;}
    
    #ov-root #start-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(0,20,0,0.95) 0%, rgba(0,0,0,1) 100%); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;}
    #ov-root #start-btn { background: #33ff33; color: #002200; border: 2px solid white; font-size: 2rem; font-weight: bold; font-family: 'Courier New'; padding: 20px 40px; cursor: pointer; border-radius: 10px; box-shadow: 0 0 30px #33ff33; transition: transform 0.1s;}
    #ov-root #start-btn:disabled { opacity: 0.58; cursor: wait; box-shadow: 0 0 14px #33ff33; }
    #ov-root #start-btn:active { transform: scale(0.95); }

    #ov-root #shield-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 0, 0, 0.4); z-index: 100; flex-direction: column; align-items: center; justify-content: center; }
    #ov-root #shield-overlay.active { display: flex; }
    #ov-root #shield-msg { font-size: 3rem; color: white; font-weight: bold; text-shadow: 0 0 20px red; text-align: center; margin-bottom: 20px;}
    #ov-root #shield-btn { background: #ff3333; color: white; border: 3px solid white; font-size: 2rem; font-weight: bold; padding: 20px 40px; cursor: pointer; border-radius: 10px; box-shadow: 0 0 20px red; }
    #ov-root #shield-btn:active { transform: scale(0.95); }

    #ov-root #combat-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 100, 0, 0.8); z-index: 150; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
    #ov-root #combat-overlay.active { display: flex; }
    #ov-root .combat-title { font-size: 4rem; color: #ffffff; text-shadow: 0 0 20px #ff0000; font-weight: bold; margin-bottom: 10px; }
    #ov-root .combat-msg { font-size: 2rem; color: #ffffaa; text-shadow: 0 0 10px #000; margin-bottom: 30px;}
    #ov-root .combat-prompt { font-size: 1.5rem; color: #ffffff; background: #000; padding: 15px 30px; border: 2px solid #ffaa00; border-radius: 8px;}

/* ═══ v2 additions: setup screen, endgame debrief, rival intel, CRT polish ═══ */

    #ov-root .ov-title { color: #33ff33; text-shadow: 0 0 20px #33ff33; font-size: clamp(2.2rem, 6vw, 4.6rem); margin-bottom: 8px; letter-spacing: 5px; text-align: center; }
    #ov-root .ov-subtitle { color: #88ff88; margin-bottom: 22px; font-weight: normal; letter-spacing: 2px; text-align: center; }

    #ov-root #start-overlay { overflow-y: auto; padding: 24px 16px; }
    #ov-root .setup-panel { display: flex; flex-direction: column; gap: 18px; align-items: center; background: rgba(0, 12, 0, 0.55); border: 1px solid #1d5a1d; border-radius: 12px; padding: 20px 26px; max-width: 640px; width: min(94%, 640px); box-shadow: 0 0 40px rgba(0, 80, 0, 0.35); }
    #ov-root .setup-group { width: 100%; text-align: center; transition: opacity 0.25s ease; }
    #ov-root .setup-group.setup-dim { opacity: 0.35; }
    #ov-root .setup-label { color: #88ff88; letter-spacing: 3px; font-size: 0.8rem; margin-bottom: 8px; }
    #ov-root .setup-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
    #ov-root .setup-btn { --sc: #33ff33; background: #0a0f0a; border: 2px solid #333; color: #999; padding: 9px 14px; font-family: 'Courier New', Courier, monospace; font-weight: bold; letter-spacing: 1px; cursor: pointer; border-radius: 6px; transition: all 0.15s ease; font-size: 0.85rem; }
    #ov-root .setup-btn:hover { border-color: var(--sc); color: var(--sc); }
    #ov-root .setup-btn.active { border-color: var(--sc); color: var(--sc); background: #000; box-shadow: 0 0 12px var(--sc), inset 0 0 8px rgba(0,0,0,0.8); }
    #ov-root .setup-hint { margin-top: 10px; color: #ffcc66; font-size: 0.8rem; min-height: 2.2em; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.4; }
    #ov-root #start-btn { font-size: clamp(1.2rem, 3vw, 1.8rem); padding: 14px 34px; }

    #ov-root #endgame-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.86); z-index: 220; align-items: center; justify-content: center; }
    #ov-root #endgame-overlay.active { display: flex; }
    #ov-root .endgame-panel { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 28px 34px; border: 1px solid #333; border-radius: 14px; background: rgba(8, 8, 14, 0.9); box-shadow: 0 0 60px rgba(0,0,0,0.9); max-width: 92%; }
    #ov-root .endgame-title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: bold; letter-spacing: 4px; }
    #ov-root .endgame-title.win { color: #33ff33; text-shadow: 0 0 24px #33ff33; }
    #ov-root .endgame-title.lose { color: #ff3333; text-shadow: 0 0 24px #ff3333; }
    #ov-root .endgame-sub { color: #ffffaa; letter-spacing: 1px; font-size: 1rem; }
    #ov-root .endgame-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
    #ov-root .endgame-stat { background: #0a0a12; border: 1px solid #2a2a3a; border-radius: 8px; padding: 10px 18px; min-width: 100px; }
    #ov-root .endgame-stat__value { color: #ffffff; font-size: 1.5rem; font-weight: bold; font-variant-numeric: tabular-nums; }
    #ov-root .endgame-stat__label { color: #888; font-size: 0.7rem; letter-spacing: 2px; margin-top: 4px; }
    #ov-root #endgame-btn { background: #33ff33; color: #002200; border: 2px solid white; font-size: 1.3rem; font-weight: bold; font-family: 'Courier New', Courier, monospace; padding: 12px 30px; cursor: pointer; border-radius: 8px; box-shadow: 0 0 22px #33ff33; transition: transform 0.1s; }
    #ov-root #endgame-btn:active { transform: scale(0.95); }

    /* Column layout (one row per AI rival, always 3) keeps the strip's
       height/width fixed turn to turn — a flex-wrap row would reflow and
       shove the timer/keypad/log below it as chip text length changes
       (item count, AVD count, STUNNED suffix all vary). */
    #ov-root #ov-opponents { display: flex; flex-direction: column; gap: 4px; }
    #ov-root .opp-chip { border: 1px solid; border-radius: 5px; padding: 4px 8px; font-size: 0.68rem; font-weight: bold; letter-spacing: 0.5px; background: #050508; opacity: 0.85; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #ov-root .opp-chip.opp-active { opacity: 1; box-shadow: 0 0 10px currentColor; }

    /* faint CRT scanlines over the console panel */
    #ov-root .ui-console { position: relative; }
    #ov-root .ui-console::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0px, rgba(0, 0, 0, 0.14) 1px, transparent 1px, transparent 3px); mix-blend-mode: multiply; }

    /* compact console on short viewports (e.g. 1366x768 classroom laptops):
       #ov-root is 78vh, which leaves ~575px of console — the full-size timer,
       keypad and log don't fit, so everything shrinks a notch. The console's
       overflow-y:auto stays as the fallback for anything shorter still. */
    @media (max-height: 850px) {
      #ov-root .ui-console { gap: 7px; padding: 10px 12px; }
      #ov-root .console-header { padding-bottom: 5px; }
      #ov-root .console-header h2 { font-size: 1.05rem; }
      #ov-root .info-panel { font-size: 0.8rem; }
      #ov-root #timer { font-size: 1.8rem; }
      #ov-root .hardware-panel { padding: 8px; gap: 6px; }
      #ov-root .unit-btn { padding: 4px; font-size: 0.75rem; }
      #ov-root .lcd-display { height: 38px; font-size: 1.6rem; letter-spacing: 10px; }
      #ov-root .keypad-cross { width: 122px; height: 83px; }
      #ov-root .key-btn { width: 38px; height: 38px; font-size: 1.05rem; }
      #ov-root .btn-r { left: 42px; top: 0; }
      #ov-root .btn-1 { left: 0; top: 23px; }
      #ov-root .btn-2 { left: 84px; top: 23px; }
      #ov-root .btn-0 { left: 42px; top: 45px; }
      #ov-root #prompt-text { font-size: 0.72rem; }
      #ov-root #status-log { min-height: 88px; font-size: 0.78rem; }
      #ov-root .opp-chip { font-size: 0.58rem; padding: 2px 6px; }
      #ov-root .inventory h3 { font-size: 0.75rem; }
      #ov-root #inventory-items { max-height: 46px; margin-top: 5px; }
      #ov-root .item-badge { font-size: 0.65rem; padding: 2px 6px; }
    }

    /* last few pixels for very short screens (1280x720) */
    @media (max-height: 760px) {
      #ov-root #timer { font-size: 1.5rem; }
      #ov-root #status-log { min-height: 74px; }
    }

    /* stacked layout on narrow screens: board on top, console below */
    @media (max-width: 900px) {
      #ov-root { height: auto; min-height: 0; }
      #ov-root .game-container { flex-direction: column; }
      #ov-root #canvas-container { flex: none; height: 380px; border-right: none; border-bottom: 2px solid var(--theme-color); }
      #ov-root .ui-console { max-width: none; flex: none; border-left: none; }
      #ov-root #start-overlay, #ov-root #endgame-overlay { position: fixed; z-index: 400; }
      #ov-root #timer { font-size: 2.4rem; }
    }

/* ─── Mode walkthrough (tutorial) ───────────────────
   Mirrors Four Fours' #ffTutorialOverlay/.ff-tut-* exactly, just
   ov-prefixed. See the comment on #ffTutorialOverlay in four-fours.html
   for why the spotlight is a synthetic fixed-position box rather than
   a class on the real target. Omega Virus only has one real mode
   (Mission), so unlike other games' tutorials this is a single flat
   step list, not a per-mode config map. */
#ovTutorialOverlay {
  align-items: flex-end; padding: 28px 20px;
  background: rgba(0,0,0,.4); backdrop-filter: none;
  /* The 3D board's own overlays (#start-overlay etc.) run high z-indexes —
     make sure the tour always renders above them. */
  z-index: 500;
}
#ovTutorialOverlay.ov-tut-has-target { background: transparent; }
.ov-tut-modal { max-height: 46vh; overflow-y: auto; }
.ov-tut-step-indicator {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3); font-weight: 700; margin-bottom: 8px;
}
.ov-tut-dontshow {
  border: none; background: none; color: var(--text3); font-size: .75rem;
  text-decoration: underline; cursor: pointer; font-family: inherit; padding: 4px;
}
.ov-tut-dontshow:hover { color: var(--text2); }
.ov-tut-spotlight-box {
  display: none; position: fixed; z-index: 550; border-radius: 12px;
  pointer-events: none;
  animation: ov-tut-pulse 1.4s ease-in-out infinite;
}
.ov-tut-spotlight-box.visible { display: block; }
@keyframes ov-tut-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124,111,247,.75), 0 0 0 9999px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(124,111,247,1), 0 0 0 9999px rgba(0,0,0,.55); }
}
.ov-help-btn { font-size: 1rem; }
@media (max-width: 900px) {
  html:not(.force-desktop) .ov-tut-modal { max-height: 42vh; padding: 16px; }
  html:not(.force-desktop) .ov-tut-modal .modal__title { font-size: 1.05rem; margin-bottom: 6px; }
  html:not(.force-desktop) #ovTutBody { font-size: .85rem; margin-bottom: 14px !important; }
}