@keyframes flicker { 0%,100%{opacity:1;filter:brightness(1) drop-shadow(0 0 16px #ff9020)} 18%{opacity:.88;filter:brightness(.88) drop-shadow(0 0 10px #ff9020)} 50%{opacity:1;filter:brightness(1.06) drop-shadow(0 0 22px #ff9020)} 85%{opacity:.9;filter:brightness(.9) drop-shadow(0 0 12px #ff9020)} }

/* ── BAY GRID — fills the right panel, no max-width ──────── */
.bay-grid {
  display: grid;
  /* Auto-reflow: cards keep a sane min width and the column COUNT adapts to the
     panel width, so they never get crushed into each other on resize. The
     min(240px,100%) lets a card shrink to full width on very narrow screens
     instead of overflowing. */
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  /* Size each row to its tallest card. Without this, .rig's overflow:hidden
     zeroes the grid item's automatic minimum, the auto row collapses, and tall
     cards spill over the ones below them (the "rigs on top of each other" mess). */
  grid-auto-rows: max-content;
  gap: 12px;
  align-content: start;
  /* size each card to its own content (not stretched to the row height) — with
     page zoom the stretched height rounds a few px short and overflow:hidden
     clips the buttons. */
  align-items: start;
}

/* ── RIG CARD ────────────────────────────────────────────── */
.rig {
  background: linear-gradient(170deg, #2a2018 0%, #1e1810 60%, #171210 100%);
  border: 1px solid #5a4830;
  border-top: 2px solid #7a6040;
  overflow: hidden;
  position: relative;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  font-family: 'Courier New', monospace;
  box-shadow: inset 0 1px 0 #ffffff10, inset 0 0 40px #00000040, 0 4px 20px #00000088;
}
.rig.active { border-color: #6a5030; cursor: pointer; }
.rig.active:hover {
  border-color: #a07838;
  box-shadow: 0 0 28px #e8a02018, 0 0 60px #22880010, inset 0 0 40px #00000040, 0 8px 32px #000000aa;
  transform: translateY(-3px);
}
.rig.locked { border-color: #2e2418; opacity: .7; }

/* ── RARITY CARD TINT (rarer = stronger border + glow) ───── */
/* Border-top accent applies to every card (even locked, as a tier hint). */
.rig.rar-free     { border-top-color: #8a7c60; }
.rig.rar-bronze   { border-top-color: #cd7f32; }
.rig.rar-silver   { border-top-color: #cfcfd6; }
.rig.rar-gold     { border-top-color: #ffd24a; }
.rig.rar-platinum { border-top-color: #dff2f7; }
.rig.rar-diamond  { border-top-color: #9fe9ff; }

/* Resting glow on owned (active) cards — intensity climbs with rarity. */
.rig.active.rar-bronze   { border-color:#6a4520; box-shadow: 0 0 14px #cd7f3222, inset 0 1px 0 #ffffff10, inset 0 0 40px #00000040, 0 4px 20px #00000088; }
.rig.active.rar-silver   { border-color:#73737c; box-shadow: 0 0 18px #cfcfd628, inset 0 1px 0 #ffffff10, inset 0 0 40px #00000040, 0 4px 20px #00000088; }
.rig.active.rar-gold     { border-color:#8a6a14; box-shadow: 0 0 22px #ffd24a33, inset 0 1px 0 #ffffff12, inset 0 0 40px #00000040, 0 4px 20px #00000088; }
.rig.active.rar-platinum { border-color:#8fb6c2; box-shadow: 0 0 26px #cdeeff3a, inset 0 1px 0 #ffffff14, inset 0 0 40px #00000040, 0 4px 20px #00000088; }
.rig.active.rar-diamond  { border-color:#3aa6d6; box-shadow: 0 0 32px #8ff0ff48, 0 0 60px #3aa6d622, inset 0 1px 0 #ffffff16, inset 0 0 40px #00000040, 0 4px 20px #00000088; }

/* Hover boosts the rarity glow instead of the generic gold one. */
.rig.active.rar-bronze:hover   { border-color:#cd7f32; box-shadow: 0 0 26px #cd7f3240, inset 0 0 40px #00000040, 0 8px 32px #000000aa; transform: translateY(-3px); }
.rig.active.rar-silver:hover   { border-color:#dcdce2; box-shadow: 0 0 30px #cfcfd64a, inset 0 0 40px #00000040, 0 8px 32px #000000aa; transform: translateY(-3px); }
.rig.active.rar-gold:hover     { border-color:#ffd24a; box-shadow: 0 0 34px #ffd24a55, inset 0 0 40px #00000040, 0 8px 32px #000000aa; transform: translateY(-3px); }
.rig.active.rar-platinum:hover { border-color:#dff2f7; box-shadow: 0 0 40px #cdeeff5c, inset 0 0 40px #00000040, 0 8px 32px #000000aa; transform: translateY(-3px); }
.rig.active.rar-diamond:hover  { border-color:#9fe9ff; box-shadow: 0 0 46px #8ff0ff66, 0 0 80px #3aa6d633, inset 0 0 40px #00000040, 0 8px 32px #000000aa; transform: translateY(-3px); }

/* Per-rarity HARDWARE accent colors — drive the GPU LEDs, fan glow and riser
   flow inside the card so the hardware itself reads in the rig's rarity colour.
   --hw = bright accent, --hw-mid = gradient flank, --hw-glow = soft rgba glow. */
.rig.rar-free     { --hw:#e8a020; --hw-mid:#c84000; --hw-glow:rgba(232,160,32,.33); }
.rig.rar-bronze   { --hw:#ff9d4a; --hw-mid:#c8641e; --hw-glow:rgba(255,140,60,.33); }
.rig.rar-silver   { --hw:#dcdce4; --hw-mid:#9a9aa6; --hw-glow:rgba(205,205,215,.34); }
.rig.rar-gold     { --hw:#ffd24a; --hw-mid:#c89018; --hw-glow:rgba(255,210,74,.36); }
.rig.rar-platinum { --hw:#d8f4ff; --hw-mid:#88c4d8; --hw-glow:rgba(190,235,255,.40); }
.rig.rar-diamond  { --hw:#9fe9ff; --hw-mid:#3aa6d6; --hw-glow:rgba(143,240,255,.50); }

/* ── TOP TORCH STRIP ─────────────────────────────────────── */
.rig-led-strip {
  height: 3px;
  background: #1a1410;
}
.rig.active .rig-led-strip {
  background: linear-gradient(90deg, #1a0800 0%, #c84800 30%, #ff9020 50%, #c84800 70%, #1a0800 100%);
  box-shadow: 0 0 8px #ff902055;
  animation: strip-pulse 3s ease-in-out infinite;
}
.rig.locked .rig-led-strip {
  background: linear-gradient(90deg, #0e0806 0%, #1a1008 50%, #0e0806 100%);
}
@keyframes strip-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ── RIG HEADER ──────────────────────────────────────────── */
.rig-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 7px;
}
.rig-id {
  font-size: 11px;
  font-weight: bold;
  color: #6a5c44;
  letter-spacing: 2px;
  flex: 1;
  font-family: 'Courier New', monospace;
}

/* ── RARITY SHINE on rig names (metallic, animated shimmer) ─── */
.rig-id.rarity {
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: name-shine 3.2s linear infinite;
}
@keyframes name-shine { to { background-position: -200% center; } }

.rig-id.r-free     { background-image: linear-gradient(110deg,#5a5044 0%,#9a8c70 45%,#cfc4a8 50%,#9a8c70 55%,#5a5044 100%); }
.rig-id.r-bronze   { background-image: linear-gradient(110deg,#7a4518 0%,#cd7f32 42%,#ffd9a0 50%,#cd7f32 58%,#7a4518 100%); filter: drop-shadow(0 0 4px #cd7f3240); }
.rig-id.r-silver   { background-image: linear-gradient(110deg,#7d7d85 0%,#cfcfd6 42%,#ffffff 50%,#cfcfd6 58%,#7d7d85 100%); filter: drop-shadow(0 0 4px #c0c0c050); }
.rig-id.r-gold     { background-image: linear-gradient(110deg,#8a6a14 0%,#ffd24a 42%,#fff6c0 50%,#ffd24a 58%,#8a6a14 100%); filter: drop-shadow(0 0 5px #ffd70055); }
.rig-id.r-platinum { background-image: linear-gradient(110deg,#8fb6c2 0%,#dff2f7 42%,#ffffff 50%,#dff2f7 58%,#8fb6c2 100%); filter: drop-shadow(0 0 6px #cdeeff66); }
.rig-id.r-diamond  { background-image: linear-gradient(110deg,#3aa6d6 0%,#9fe9ff 38%,#ffffff 50%,#9fe9ff 62%,#3aa6d6 100%); filter: drop-shadow(0 0 8px #8ff0ff88); animation-duration: 2.4s; }
.rig-badge {
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 0;
}
.rig-badge.live     { background:#1a0e00; color:#d4841a; border:1px solid #5a3810; }
.rig-badge.offline  { background:#140a00; color:#5a3820; border:1px solid #2a1808; }
.rig-badge.inactive { background:#1a0606; color:#e05050; border:1px solid #6a2020; animation: inactive-blink 1.4s ease-in-out infinite; }
@keyframes inactive-blink { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ── OUT OF POWER (rig inactive) ─────────────────────────── */
.rig-poweroff-alert {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: #ff6a4a;
  background: rgba(8,3,2,.86);
  border: 1px solid #7a2818;
  border-top: 2px solid #c8401a;
  border-radius: 4px;
  padding: 10px 16px;
  box-shadow: 0 0 0 1px #000, 0 8px 30px #000000cc, 0 0 30px #e8401022;
  pointer-events: none;
  animation: inactive-blink 1.6s ease-in-out infinite;
}
.rig-poweroff-alert span { display:block; font-size:9px; font-weight:400; color:#c89070; letter-spacing:1px; margin-top:3px; }
.rig.powered-off .rig-poweroff-alert { display: block; }

/* dim the rig + freeze all hardware animation when out of power */
.rig.powered-off { filter: grayscale(.6) brightness(.72); }
.rig.powered-off .hw-fan-wrap::before,
.rig.powered-off .hw-gpu-led,
.rig.powered-off .hw-status-dot,
.rig.powered-off .hw-riser::after,
.rig.powered-off .rig-led-strip { animation: none !important; }
.rig.powered-off .hw-status-dot { background:#3a0e0e; border-color:#5a1818; box-shadow:none; }

.rig-temp-badge {
  font-size: 8px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 0;
  letter-spacing: .5px;
}
.rig-temp-badge.cool   { background:#0a1400; color:#80aa40; border:1px solid #2a4010; }
.rig-temp-badge.warm   { background:#1a1000; color:#c89020; border:1px solid #604010; }
.rig-temp-badge.hot    { background:#180800; color:#e06020; border:1px solid #602010; }
.rig-temp-badge.danger { background:#180000; color:#cc2020; border:1px solid #601010; }

/* ── RIG HARDWARE CHASSIS ────────────────────────────────── */
.rig-chassis {
  margin: 2px 8px 3px;
  background: linear-gradient(180deg, #0d0b08 0%, #080604 100%);
  border: 1px solid #2a2010;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* Frame rails */
.hw-rail {
  height: 10px;
  background: linear-gradient(180deg, #1e1a10 0%, #141008 100%);
  border-bottom: 1px solid #3a3018;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  gap: 6px;
}
.hw-rail.bottom {
  border-top: 1px solid #3a3018;
  border-bottom: none;
}
.hw-rail-screw {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a4030, #1a1810);
  border: 1px solid #3a3020;
  flex-shrink: 0;
}
.hw-rail-label {
  font-family: 'Courier New', monospace;
  font-size: 7px;
  letter-spacing: 3px;
  color: #4a3e28;
  flex: 1;
  text-align: center;
}
.hw-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #1a0e00;
  border: 1px solid #3a2810;
  flex-shrink: 0;
}
.rig.active .hw-status-dot {
  background: #c84800;
  border-color: #e86010;
  box-shadow: 0 0 6px #ff6000aa;
  animation: led-blink 1.8s ease-in-out infinite;
}

/* GPU bay */
.hw-gpu-bay {
  display: flex;
  gap: 4px;
  padding: 5px 8px 3px;
  align-items: stretch;
  min-height: 72px;
}

/* Single GPU card */
.hw-gpu {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: linear-gradient(180deg, #111009 0%, #0d0c08 100%);
  border: 1px solid #2a2416;
  border-top: 1px solid #3a3020;
  border-radius: 1px;
  padding: 5px 3px 4px;
  position: relative;
}
.hw-gpu::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6a5028 50%, transparent);
}
.rig.active .hw-gpu::after {
  background: linear-gradient(90deg, transparent, var(--hw-mid, #6a5028) 50%, transparent);
}

/* Fan */
.hw-fan-wrap {
  width: 100%;
  aspect-ratio: 1;
  max-width: 44px;
  position: relative;
  border-radius: 50%;
  background: #090807;
  border: 1px solid #222018;
  box-shadow: inset 0 0 6px #00000099;
  overflow: hidden;
}
.hw-fan-wrap::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(
    #1c1a12 0deg,   #141208 50deg,
    #1c1a12 90deg,  #141208 140deg,
    #1c1a12 180deg, #141208 230deg,
    #1c1a12 270deg, #141208 320deg,
    #1c1a12 360deg
  );
}
.rig.active .hw-fan-wrap::before {
  animation: fan-spin 0.28s linear infinite;
}
.hw-fan-wrap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #1e1c14, #0e0c08);
  border: 1px solid #2a2418;
}
.rig.active .hw-fan-wrap {
  box-shadow: inset 0 0 6px #00000099, 0 0 8px var(--hw-glow, #e8a02015);
}
/* Tint the fan hub ring with the rarity colour */
.rig.active .hw-fan-wrap::after { border-color: var(--hw-mid, #2a2418); }

/* Heatsink fins */
.hw-fins {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  padding: 0 1px;
  flex: 1;
}
.hw-fin {
  height: 2px;
  background: linear-gradient(90deg, #161410, #2a2418, #161410);
  border-radius: 0;
}
.rig.active .hw-fin:nth-child(odd)  { background: linear-gradient(90deg, #1e1a10, #3a3020, #1e1a10); }
.rig.active .hw-fin:nth-child(even) { background: linear-gradient(90deg, #161208, #2e2418, #161208); }

/* GPU LED bar */
.hw-gpu-led {
  width: 100%;
  height: 3px;
  background: #0a0806;
  border-radius: 1px;
  margin-top: auto;
}
.rig.active .hw-gpu-led {
  background: linear-gradient(90deg, #1a0e00, var(--hw-mid, #c84000), var(--hw, #e8a020), var(--hw-mid, #c84000), #1a0e00);
  box-shadow: 0 0 6px var(--hw-glow, #e8a02055);
  animation: led-glow 2.4s ease-in-out infinite;
}
@keyframes led-glow {
  0%,100% { opacity: .7; }
  50%     { opacity: 1; box-shadow: 0 0 10px var(--hw, #e8a020); }
}

/* PCIe riser tray */
.hw-riser-tray {
  display: flex;
  gap: 4px;
  padding: 1px 8px 2px;
  align-items: center;
}
.hw-riser {
  flex: 1;
  height: 10px;
  background: linear-gradient(180deg, #1a1610 0%, #0e0c08 100%);
  border: 1px solid #2a2418;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.hw-riser::after {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: #2a2418;
}
.rig.active .hw-riser {
  border-color: #3a3020;
}
.rig.active .hw-riser::after {
  background: linear-gradient(90deg, transparent, var(--hw-mid, #6a5020) 50%, transparent);
  animation: riser-flow 1.8s ease-in-out infinite;
}
@keyframes riser-flow {
  0%   { opacity: .3; transform: translateY(0); }
  50%  { opacity: .9; }
  100% { opacity: .3; }
}

/* Bottom mobo strip */
.hw-mobo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}
.hw-mobo-port {
  width: 8px; height: 6px;
  background: #1a1810;
  border: 1px solid #3a3020;
  border-radius: 1px;
}
.hw-mobo-chip {
  flex: 1;
  height: 5px;
  background: linear-gradient(90deg, #121008, #1e1a10, #121008);
  border: 1px solid #2a2618;
  border-radius: 1px;
}
.hw-psu {
  font-size: 6px;
  letter-spacing: 1px;
  color: #3a3020;
  font-family: 'Courier New', monospace;
  padding: 1px 5px;
  border: 1px solid #2a2418;
  border-radius: 1px;
}

@keyframes fan-spin { to { transform: rotate(360deg); } }

/* ── DUNGEON CHAMBER (locked rigs only) ──────────────────── */
.dungeon-chamber {
  display: flex;
  height: 130px;
  margin: 0 8px 0;
  overflow: hidden;
  position: relative;
  background: #060402;
  border: 1px solid #2a2018;
}

/* ── STONE WALLS ─────────────────────────────────────────── */
.chamber-wall {
  width: 28px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: linear-gradient(180deg, #1a1410 0%, #100e08 50%, #1a1410 100%);
  position: relative;
  z-index: 2;
}
.chamber-wall.left  { border-right: 1px solid #2e2416; }
.chamber-wall.right { border-left:  1px solid #2e2416; }

.sc-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  gap: 0;
}
.sc-block {
  flex: 1;
  border-bottom: 1px solid #0e0c08;
  background: linear-gradient(90deg,
    #181410 0%, #221c14 40%, #1a1610 60%, #141008 100%);
  position: relative;
}
/* alternating stone offset */
.sc-col .sc-block:nth-child(even) {
  background: linear-gradient(90deg,
    #141008 0%, #1c1812 40%, #181410 60%, #201a12 100%);
}

/* ── WALL TORCH ──────────────────────────────────────────── */
.wall-torch {
  width: 100%;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
}
.torch-bracket {
  width: 8px; height: 4px;
  background: #4a3820;
  border-radius: 1px 1px 0 0;
  flex-shrink: 0;
}
.torch-glow {
  display: none;
  position: absolute;
  inset: -30px -40px;
  background: radial-gradient(ellipse at 50% 80%, #ff902055 0%, transparent 65%);
  pointer-events: none;
}
.torch-flame { font-size: 16px; line-height: 1; position: relative; z-index: 1; }
.torch-flame.dim { opacity: .25; filter: grayscale(1); font-size: 12px; }
.wall-torch.lit .torch-glow { display: block; }
.wall-torch.lit .torch-flame { animation: flicker 2.5s ease-in-out infinite; }

/* ambient torch light bleeding onto gate */
.rig.active .dungeon-chamber::before {
  content: '';
  position: absolute;
  inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 35% 70% at  0% 28%, #ff901022 0%, transparent 70%),
    radial-gradient(ellipse 35% 70% at 100% 28%, #ff901022 0%, transparent 70%);
  pointer-events: none;
}

/* ── IRON GATE ───────────────────────────────────────────── */
.chamber-gate {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gate-interior {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.gate-depth {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0806 0%, #060402 60%, #0e0a06 100%);
}

/* vertical iron bars */
.gate-bars {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0;
  z-index: 3;
  pointer-events: none;
}
.gate-bar {
  flex: 1;
  background: linear-gradient(90deg,
    #5a4828 0%, #3a2e18 30%, #2a2010 50%, #3a2e18 70%, #5a4828 100%);
  opacity: .55;
}
.gate-bars.sealed .gate-bar { opacity: .85; }
.rig.active .gate-bar { opacity: .38; }

/* horizontal crossbars */
.gate-hbar {
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  background: linear-gradient(180deg, #6a5030 0%, #4a3820 50%, #3a2810 100%);
  z-index: 4;
}

/* ── FIGHTER SILHOUETTES ─────────────────────────────────── */
.chamber-fighters {
  display: flex;
  gap: 6px;
  position: relative;
  z-index: 5;
  align-items: center;
}
.ch-fighter {
  font-size: 18px;
  filter: drop-shadow(0 0 6px #ff901066);
  animation: fighter-bob 2.2s ease-in-out infinite;
}
.ch-fighter:nth-child(even) { animation-delay: .6s; }
.ch-fighter:nth-child(3)    { animation-delay: 1.1s; }
@keyframes fighter-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* ── CHAMBER LEVEL BADGE ─────────────────────────────────── */
.chamber-lvl-badge {
  position: absolute;
  bottom: 5px; right: 6px;
  font-family: 'Cinzel', serif;
  font-size: 8px; font-weight: 700;
  color: #4a3820;
  letter-spacing: 2px;
  z-index: 5;
}

/* ── SEALED CHAMBER ──────────────────────────────────────── */
.gate-seal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 5;
  background: rgba(4,3,2,.55);
}
.seal-chains {
  display: flex;
  gap: 40px;
  font-size: 20px;
  opacity: .6;
  letter-spacing: 4px;
}
.seal-lock { font-size: 22px; opacity: .7; }
.seal-cost {
  font-family: 'Cinzel', serif;
  font-size: 12px; font-weight: 700;
  color: #c88820;
  letter-spacing: 1px;
}

/* ── CHAMBER NAME STRIP ──────────────────────────────────── */
.chamber-name-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #4a3c28;
  padding: 4px 10px;
  border-bottom: 1px solid #201a10;
  background: #0a0806;
}
.chamber-name-strip.sealed { color: #2a2218; }
.rig.active .chamber-name-strip { color: #8a6c3a; }
/* ── LIVE EARN BADGE (floats over chamber) ───────────────── */
.rig-earn-badge {
  position: absolute;
  top: 38px;
  right: 10px;
  z-index: 10;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  color: #f0c040;
  letter-spacing: 1px;
  padding: 3px 9px 3px 7px;
  background: rgba(10, 7, 2, 0.82);
  border: 1px solid #5a4010;
  border-radius: 3px;
  box-shadow: 0 0 10px #e8a02030, inset 0 1px 0 #ffffff08;
  pointer-events: none;
  animation: counter-pulse 1.2s ease-in-out infinite;
}
@keyframes counter-pulse {
  0%,100% { opacity: 1; text-shadow: 0 0 6px #e8a02077; }
  50%     { opacity: .78; text-shadow: 0 0 14px #e8a020bb; }
}

/* ── RIG STATS ───────────────────────────────────────────── */
.rig-stats {
  padding: 4px 12px 2px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rig-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.rsl { color:#4a3e28; letter-spacing:1px; white-space:nowrap; }
.rsv { color:#8a7860; font-weight:bold; }
.rsv.gold  { color:#c8901a; }
.rsv.green { color:#6a9840; }

.rig.locked .rsv { color:#2a2018; filter:blur(2px); }
.rig.locked .rsl { color:#1e1810; }

/* Temperature progress bar */
.temp-bar-wrap { display:flex; align-items:center; gap:5px; flex:1; }
.temp-bar-track {
  flex: 1;
  height: 4px;
  background: #141008;
  border-radius: 0;
  overflow: hidden;
}
.temp-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .6s;
}

/* ── RIG DIVIDER ─────────────────────────────────────────── */
.rig-divider { height:1px; background:linear-gradient(90deg,transparent,#3a2e1a,transparent); margin:4px 12px; }

/* ── RIG BUTTON ──────────────────────────────────────────── */
.rig-action { margin: 0 10px 10px; }
.rig-btn {
  width: 100%;
  padding: 7px 10px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all .15s;
  border: none;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}
.rig-btn.view {
  background: linear-gradient(180deg, #1e1208 0%, #120c04 100%);
  border: 1px solid #6a4820;
  border-bottom: 2px solid #0a0604;
  color: #d4841a;
}
.rig-btn.view:hover { background: linear-gradient(180deg,#2a1a0a,#1a1006); color:#ffa030; border-color:#8a6030; }
.rig-btn.buy {
  background: linear-gradient(180deg, #181008 0%, #0e0a04 100%);
  border: 1px solid #3a2a10;
  border-bottom: 2px solid #060402;
  color: #6a5030;
}
.rig-btn.buy:hover { background: linear-gradient(180deg,#201408,#14100a); border-color:#5a4020; color:#9a7840; }
.rig-btn.buy.cant { opacity:.35; cursor:not-allowed; }

/* SOL purchase button */
.rig-btn.sol-buy {
  background: linear-gradient(180deg, #0a1420 0%, #060e18 100%);
  border: 1px solid #1a4060;
  border-bottom: 2px solid #020810;
  color: #4090c0;
  letter-spacing: 1.5px;
  transition: all .18s;
}
.rig-btn.sol-buy:hover {
  background: linear-gradient(180deg, #0e1e30 0%, #0a1620 100%);
  border-color: #2a7ab0;
  color: #60b8e8;
  box-shadow: 0 0 18px #2a80c033;
}
.rig-btn.sol-buy:disabled {
  opacity: .6; cursor: not-allowed;
}

@keyframes led-blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── TOKEN RATE BADGE ────────────────────────────────────── */
.rate-badge {
  font-size: 9px;
  color: #8a9840;
  background: #0e1006;
  border: 1px solid #2a3010;
  border-radius: 0;
  padding: 1px 7px;
  margin-left: 6px;
}

/* ── MODAL ───────────────────────────────────────────────── */
#rig-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#rig-modal.open { display: flex; }

.modal-box {
  background: #0a0a18;
  border: 1px solid #222242;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 60px #6655cc1a, 0 30px 80px #00000099;
  max-width: 960px;
  width: 95vw;
}
.modal-bar {
  background: #0c0c1e;
  border-bottom: 1px solid #181832;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-dot { width:11px; height:11px; border-radius:50%; }
.modal-dot.r{background:#ff5f57;} .modal-dot.y{background:#ffbd2e;} .modal-dot.g{background:#28c840;}
.modal-title {
  flex: 1;
  text-align: center;
  font-family: monospace;
  font-size: 12px;
  color: #444;
  letter-spacing: 2px;
}
.modal-close {
  background:none; border:none; color:#444; font-size:18px;
  cursor:pointer; line-height:1; padding:0 4px;
}
.modal-close:hover { color:#fff; }
.modal-body { display:flex; }
.modal-game-wrap { flex-shrink:0; background:#0c0c1a; }
.modal-game-wrap iframe { display:block; border:none; }
.modal-info {
  width: 220px;
  flex-shrink: 0;
  padding: 16px;
  border-left: 1px solid #181832;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-info h3 { font-size:11px; color:#f0c040; letter-spacing:2px; font-family:monospace; }
.minfo-stat { display:flex; justify-content:space-between; font-size:11px; font-family:monospace; margin-bottom:3px; }
.minfo-label { color:#383848; }
.minfo-val   { color:#888; }
.minfo-val.green { color:#44aa44; }
.minfo-val.gold  { color:#c8a820; }
.modal-live-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:#001800; border:1px solid #003300;
  border-radius:4px; padding:5px 10px;
  font-size:10px; font-family:monospace; color:#44cc44;
}
.live-dot { width:7px;height:7px;border-radius:50%;background:#44ff44;box-shadow:0 0 6px #44ff44; animation:led-blink 1.2s ease-in-out infinite; }

/* ════════════════ RESPONSIVE ════════════════ */
/* NOTE: rigs.css is linked BEFORE the page's inline <style>, so these overrides
   use slightly higher-specificity selectors (`:root`, `body …`) to reliably beat
   the inline base rules of equal id/class specificity regardless of source order. */

/* Tablet / small laptop — shrink the fixed left column so the bay keeps room.
   (The rig grid itself auto-reflows its column count via .bay-grid.) */
@media (max-width: 1100px) {
  body #main { grid-template-columns: 240px 1px 1fr; }
}

/* Mobile / narrow — stack into one scrolling column. The desktop layout pins
   everything to the viewport with internal scroll; on phones we let the whole
   page flow and scroll naturally instead. */
@media (max-width: 760px) {
  :root { zoom: 1; }
  :root, :root body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }

  body #navbar { height: auto; min-height: 48px; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  body #nav-right { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

  body #main { display: flex; flex-direction: column; overflow: visible; }
  body #vert-divider { display: none; }
  body #hero-panel { width: 100%; overflow: visible; padding: 16px; }
  body #bay-panel  { width: 100%; overflow: visible; padding: 12px 14px 20px; }
  body #bay-grid   { flex: none; overflow: visible; padding-right: 0; }

  body .hp-title { font-size: 12px; }

  body #footer { height: auto; padding: 8px 14px; flex-wrap: wrap; gap: 2px 12px; }
}

/* Very small screens — scale the live-feed popup down so it never overflows */
@media (max-width: 440px) {
  body #dungeon-popup { transform: translate(-50%, -50%) scale(0.82); }
  body #buy-popup     { width: 94vw; }
}