/*
  style.css — Slagwork Studios Terminal
  Pure CSS — no build step required.
  Fonts + Tailwind CDN are loaded from index.html.
*/

/* ─── Custom Accent CSS Variables ───────────────────────── */
:root {
  /* Accent (interactive colour) */
  --accent-h: 186;
  --accent-s: 100%;
  --accent-l: 50%;
  --accent:     hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-20:  hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.20);
  --accent-28:  hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.28);
  --accent-35:  hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.35);
  --accent-40:  hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.40);
  --accent-55:  hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.55);

  /* Extended custom-theme variables (overridden by JS on html element) */
  --cust-bg-h:       233;
  --cust-bg-s:       47%;
  --cust-bg-l:       4%;
  --cust-glow-h:     186;
  --cust-glow-s:     100%;
  --cust-glow-l:     50%;
  --cust-glow-int:   0.18;    /* 0–1 */
  --cust-glass-op:   0.40;    /* 0–1 */
  --cust-border-op:  0.05;    /* 0–1 */
  --cust-sidebar-op: 0.92;    /* 0–1 */
}

/* ─── Custom Theme — full environment overhaul ──────────────── */

/* Computed glow colour used by the Terminal inline gradient */
html.custom {
  --cust-glow-color: hsla(var(--cust-glow-h), var(--cust-glow-s), var(--cust-glow-l), var(--cust-glow-int));
}

/* ── Body background ── */
html.custom body {
  background-color: hsl(var(--cust-bg-h), var(--cust-bg-s), var(--cust-bg-l)) !important;
}

/* ── Glass panels — tinted + custom opacity + accent glow ring ── */
html.custom .glass-panel {
  background-color: hsla(var(--cust-bg-h), var(--cust-bg-s), calc(var(--cust-bg-l) * 1 + 3%), var(--cust-glass-op)) !important;
  border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 3)) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px var(--accent-20),
    0 0 28px var(--accent-20) !important;
}
html.custom .glass-panel-hover:hover {
  background-color: hsla(var(--cust-bg-h), var(--cust-bg-s), calc(var(--cust-bg-l) * 1 + 5%), calc(var(--cust-glass-op) + 0.08)) !important;
  border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 4)) !important;
}

/* ── Sidebar ── */
html.custom .sw-sidebar,
html.custom .bg-\[\#04040A\]\/92,
html.custom .bg-\[\#04040a\]\/92 {
  background-color: hsla(var(--cust-bg-h), var(--cust-bg-s), calc(var(--cust-bg-l) * 1 + 1%), var(--cust-sidebar-op)) !important;
}

/* ── Header bar ── */
html.custom .bg-\[\#020205\]\/88 {
  background-color: hsla(var(--cust-bg-h), var(--cust-bg-s), var(--cust-bg-l), 0.92) !important;
  border-bottom-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 2)) !important;
}

/* ── Hard-coded dark page backgrounds ── */
html.custom .bg-\[\#04040A\],
html.custom .bg-\[\#04040a\] {
  background-color: hsl(var(--cust-bg-h), var(--cust-bg-s), var(--cust-bg-l)) !important;
}
html.custom .bg-\[\#05050A\],
html.custom .bg-\[\#05050a\] {
  background-color: hsl(var(--cust-bg-h), var(--cust-bg-s), var(--cust-bg-l)) !important;
}

/* ── White/alpha borders → accent-tinted borders ── */
html.custom .border-white\/5  { border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 0.8)) !important; }
html.custom .border-white\/7  { border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 1.0)) !important; }
html.custom .border-white\/8  { border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 1.2)) !important; }
html.custom .border-white\/10 { border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 1.5)) !important; }
html.custom .border-white\/12 { border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), calc(var(--cust-border-op) * 2.0)) !important; }

/* ── Semi-transparent white fills → accent-tinted fills ── */
html.custom .bg-white\/\[0\.03\] { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.04) !important; }
html.custom .bg-white\/\[0\.04\] { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.05) !important; }
html.custom .bg-white\/\[0\.06\] { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.07) !important; }
html.custom .bg-white\/5        { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.06) !important; }
html.custom .bg-white\/8        { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.09) !important; }
html.custom .bg-white\/10       { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.11) !important; }
html.custom .bg-white\/12       { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.13) !important; }

/* ── Active nav / selected state gets accent tint ── */
html.custom .bg-white\/22 { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.20) !important; }

/* ── Toggle knob (bypass toggle) ── */
html.custom .bg-cyan-500 { background-color: var(--accent) !important; }

/* ── Input focus ring ── */
html.custom .focus\:border-cyan-500\/40:focus,
html.custom .focus\:border-cyan-500\/38:focus,
html.custom .focus\:border-cyan-500\/35:focus {
  border-color: var(--accent-40) !important;
}

/* ── Send button / icon buttons ── */
html.custom .text-cyan-400 {
  color: var(--accent) !important;
  filter: brightness(1.1);
}

/* ── Accent-tinted backgrounds (chat bubbles, friend cards, etc.) ── */
html.custom .bg-cyan-500\/20  { background-color: var(--accent-20) !important; }
html.custom .bg-cyan-500\/15  { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15) !important; }
html.custom .bg-cyan-500\/25  { background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.25) !important; }

/* ── Accent borders ── */
html.custom .border-cyan-500\/28 { border-color: var(--accent-28) !important; }
html.custom .border-cyan-500\/35 { border-color: var(--accent-35) !important; }
html.custom .border-cyan-500\/18 { border-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.18) !important; }

/* ── Online indicator dots → accent colour ── */
html.custom .bg-emerald-400 { background-color: var(--accent) !important; }

/* ── Radio / selection dots ── */
html.custom .border-cyan-400 { border-color: var(--accent) !important; }
html.custom .bg-cyan-400     { background-color: var(--accent) !important; }
html.custom .text-cyan-400.shrink-0 { color: var(--accent) !important; }

/* ── Tag shimmer border ── */
html.custom .tag-new,
html.custom .tag-new-sm {
  border-color: var(--accent-55);
  text-shadow: 0 0 8px var(--accent);
}

/* ── Sidebar active game indicator uses accent ── */
html.custom .sw-game-items button.bg-white\/10 {
  background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12) !important;
}

/* ─── CSS Custom Properties ─────────────────────────────── */
:root {
  --font-sans:    'Inter', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --border:     240 3.7% 15.9%;
  --input:      240 3.7% 15.9%;
  --ring:       240 4.9% 83.9%;

  --card:            240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --card-border:     240 3.7% 15.9%;

  --primary:             0 0% 98%;
  --primary-foreground:  240 5.9% 10%;
  --secondary:           240 3.7% 15.9%;
  --secondary-foreground:0 0% 98%;
  --muted:               240 3.7% 15.9%;
  --muted-foreground:    240 5% 64.9%;
  --accent:              240 3.7% 15.9%;
  --accent-foreground:   0 0% 98%;
  --destructive:         0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --radius:    0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* Dark theme overrides */
.dark {
  --background: 233 47% 4%;
  --foreground: 0 0% 98%;
  --border:     240 10% 12%;
  --input:      240 10% 12%;
  --ring:       240 10% 25%;

  --card:            233 40% 6%;
  --card-foreground: 0 0% 98%;
  --card-border:     240 10% 15%;

  --primary:             0 0% 98%;
  --primary-foreground:  240 5.9% 10%;
  --secondary:           240 10% 12%;
  --secondary-foreground:0 0% 98%;
  --muted:               240 10% 12%;
  --muted-foreground:    240 5% 64.9%;
  --accent:              240 10% 18%;
  --accent-foreground:   0 0% 98%;
  --destructive:         0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
}

/* ─── Base Reset ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ─── Glassmorphism Utilities ───────────────────────────── */
.glass-panel {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-panel-hover:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  transition: background-color 300ms, border-color 300ms;
}

/* ─── Scrollbar Hiding ──────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ─── Toast Animation Utilities ─────────────────────────── */
@keyframes slideInFromTop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes slideInFromBottom {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

[data-state=open].animate-in  { animation: slideInFromBottom 0.2s ease; }
[data-state=closed].animate-out { animation: fadeOut 0.15s ease forwards; }

/* ─── Game Tag Styles ────────────────────────────────────── */

/* NEW tag — sparkly shimmer effect */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes sparkle-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,255,255,0.35), 0 0 12px rgba(255,255,255,0.15); }
  50%       { box-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 20px rgba(255,255,255,0.25); }
}

.tag-new {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(
    90deg,
    rgba(200,210,255,0.18) 0%,
    rgba(255,255,255,0.55) 30%,
    rgba(200,210,255,0.18) 60%,
    rgba(255,255,255,0.55) 100%
  );
  background-size: 200% auto;
  border: 1px solid rgba(255, 255, 255, 0.45);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  animation:
    shimmer 2.4s linear infinite,
    sparkle-pulse 1.8s ease-in-out infinite;
}

/* BETA tag — cool cyberpunk purple */
.tag-beta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d8b4fe;
  background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(99,102,241,0.15));
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow:
    0 0 8px rgba(139, 92, 246, 0.35),
    inset 0 1px 0 rgba(168, 85, 247, 0.15);
  text-shadow: 0 0 6px rgba(168, 85, 247, 0.8);
}

/* Sidebar tag variants (smaller) */
.tag-new-sm {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(
    90deg,
    rgba(200,210,255,0.15) 0%,
    rgba(255,255,255,0.42) 50%,
    rgba(200,210,255,0.15) 100%
  );
  background-size: 200% auto;
  border: 1px solid rgba(255, 255, 255, 0.38);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation: shimmer 2.4s linear infinite;
}

.tag-beta-sm {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #c084fc;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(168, 85, 247, 0.38);
  box-shadow: 0 0 5px rgba(139, 92, 246, 0.25);
}

/* ─── Light Mode ────────────────────────────────────────────── */
html.light {
  color-scheme: light;
}

/* Warm off-white base with a very subtle blue-grey tint */
html.light body {
  background-color: #f1f3f8;
  color: #1a1d2e;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(99,102,241,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(6,182,212,0.05) 0%, transparent 55%);
}

/* ── Glass panels → crisp white cards with shadow ── */
html.light .glass-panel {
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(99, 102, 241, 0.10) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
html.light .glass-panel-hover:hover {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.08),
    0 8px 24px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ── Hardcoded dark backgrounds → light equivalents ── */
html.light .bg-\[\#04040A\],
html.light .bg-\[\#04040a\] { background-color: #f1f3f8 !important; }

html.light .bg-\[\#05050A\],
html.light .bg-\[\#05050a\] { background-color: #f1f3f8 !important; }

html.light .bg-\[\#0a0a14\]\/95,
html.light .bg-\[\#0a0a14\] { background-color: rgba(245, 246, 252, 0.96) !important; }

/* Header bar */
html.light .bg-\[\#020205\]\/88,
html.light .bg-\[\#020205\] {
  background-color: rgba(248, 249, 254, 0.94) !important;
  border-bottom-color: rgba(99,102,241,0.10) !important;
}

/* Toast container */
html.light .bg-\[\#0a0a14\]\/95 {
  background-color: rgba(255,255,255,0.96) !important;
  color: #1a1d2e !important;
}

/* Card-inner backgrounds inside game art */
html.light .bg-\[\#111\],
html.light .bg-\[\#1a1a1a\] { background-color: #dde0ec !important; }

/* ── White text → slate text ── */
html.light .text-white     { color: #1a1d2e !important; }
html.light .text-white\/88 { color: rgba(26,29,46,0.88) !important; }
html.light .text-white\/85 { color: rgba(26,29,46,0.85) !important; }
html.light .text-white\/82 { color: rgba(26,29,46,0.82) !important; }
html.light .text-white\/78 { color: rgba(26,29,46,0.78) !important; }
html.light .text-white\/72 { color: rgba(26,29,46,0.72) !important; }
html.light .text-white\/65 { color: rgba(26,29,46,0.65) !important; }
html.light .text-white\/60 { color: rgba(26,29,46,0.60) !important; }
html.light .text-white\/55 { color: rgba(26,29,46,0.55) !important; }
html.light .text-white\/50 { color: rgba(26,29,46,0.50) !important; }
html.light .text-white\/45 { color: rgba(26,29,46,0.45) !important; }
html.light .text-white\/38 { color: rgba(26,29,46,0.38) !important; }
html.light .text-white\/35 { color: rgba(26,29,46,0.35) !important; }
html.light .text-white\/30 { color: rgba(26,29,46,0.30) !important; }
html.light .text-white\/28 { color: rgba(26,29,46,0.28) !important; }
html.light .text-white\/25 { color: rgba(26,29,46,0.25) !important; }
html.light .text-white\/22 { color: rgba(26,29,46,0.22) !important; }
html.light .text-white\/18 { color: rgba(26,29,46,0.18) !important; }
html.light .text-white\/12 { color: rgba(26,29,46,0.12) !important; }

/* ── White borders → slate borders ── */
html.light .border-white\/5  { border-color: rgba(99,102,241,0.06) !important; }
html.light .border-white\/7  { border-color: rgba(99,102,241,0.08) !important; }
html.light .border-white\/8  { border-color: rgba(99,102,241,0.09) !important; }
html.light .border-white\/10 { border-color: rgba(99,102,241,0.11) !important; }
html.light .border-white\/12 { border-color: rgba(99,102,241,0.13) !important; }
html.light .border-white\/18 { border-color: rgba(99,102,241,0.18) !important; }
html.light .border-white\/45 { border-color: rgba(26,29,46,0.30) !important; }

/* ── Semi-transparent white fills → light ink fills ── */
html.light .bg-white\/\[0\.02\] { background-color: rgba(99,102,241,0.03) !important; }
html.light .bg-white\/\[0\.03\] { background-color: rgba(99,102,241,0.04) !important; }
html.light .bg-white\/\[0\.04\] { background-color: rgba(99,102,241,0.05) !important; }
html.light .bg-white\/\[0\.06\] { background-color: rgba(99,102,241,0.06) !important; }
html.light .bg-white\/\[0\.08\] { background-color: rgba(99,102,241,0.07) !important; }
html.light .bg-white\/5        { background-color: rgba(99,102,241,0.06) !important; }
html.light .bg-white\/8        { background-color: rgba(99,102,241,0.08) !important; }
html.light .bg-white\/10       { background-color: rgba(99,102,241,0.10) !important; }
html.light .bg-white\/12       { background-color: rgba(99,102,241,0.12) !important; }
html.light .bg-white\/22       { background-color: rgba(99,102,241,0.15) !important; }
html.light .bg-white\/\[0\.22\]{ background-color: rgba(99,102,241,0.15) !important; }

/* ── Inputs — clean white with indigo ring on focus ── */
html.light input,
html.light textarea {
  color: #1a1d2e !important;
  background-color: rgba(255,255,255,0.80) !important;
  border-color: rgba(99,102,241,0.15) !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: rgba(26,29,46,0.30) !important;
}
html.light input:focus,
html.light textarea:focus {
  background-color: #ffffff !important;
  border-color: rgba(6,182,212,0.45) !important;
}

/* ── Buttons — invert the white-on-dark submit buttons ── */
html.light button.bg-white {
  background-color: #1a1d2e !important;
  color: #ffffff !important;
}
html.light button.bg-white:hover,
html.light button.hover\:bg-gray-100:hover {
  background-color: #2d3150 !important;
}
html.light button.bg-gray-100 {
  background-color: #e8eaf2 !important;
  color: #1a1d2e !important;
}

/* ── Red / destructive stays red ── */
html.light .text-red-400  { color: #dc2626 !important; }
html.light .border-red-500\/20 { border-color: rgba(220,38,38,0.20) !important; }
html.light .bg-red-500\/10     { background-color: rgba(220,38,38,0.08) !important; }

/* ── Cyan interactive elements stay as-is (they pop on light) ── */

/* ── Tags — keep their own decorative colours ── */
html.light .tag-new,
html.light .tag-new-sm { color: #ffffff; }
html.light .tag-beta,
html.light .tag-beta-sm { color: #a855f7; }

/* ─── Compatibility indicators ─────────────────────────────── */
.sw-compatibility {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sw-game-hero .sw-compatibility {
  margin-top: 9px;
}

.sw-compatibility-label {
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.07em;
}

.sw-compatibility-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 7px 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.sw-compatibility-icon {
  width: 15px;
  height: 15px;
  color: #ffffff;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.32));
}

.sw-phone-icon {
  width: 14px;
  height: 14px;
}

/* ─── Keyboard and touch accessibility ─────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.9);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Phone and tablet layout ─────────────────────────────────
   Desktop rules above remain unchanged. At smaller widths the
   sidebar becomes a compact, touch-friendly navigation band so
   the game content retains usable width and height. */
@media (max-width: 1023px) {
  .sw-terminal-body {
    flex-direction: column;
  }

  .sw-sidebar {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .sw-profile-button {
    padding: 10px 14px;
  }

  .sw-primary-nav {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .sw-primary-nav > button {
    min-height: 44px;
    width: auto;
    flex: 1 0 auto;
    white-space: nowrap;
  }

  .sw-game-list {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 12px 10px;
  }

  .sw-game-list > .text-\[9px\] {
    margin-bottom: 5px;
  }

  .sw-game-items {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .sw-game-items > button {
    min-width: 148px;
    min-height: 54px;
  }

  .sw-sidebar-status {
    display: none;
  }

  .sw-content {
    min-height: 0;
    flex: 1 1 auto;
  }
}

@media (max-width: 599px) {
  .sw-game-page,
  .sw-games-page {
    padding: 14px;
  }

  .sw-game-hero {
    height: 230px;
  }

  .sw-game-hero-content {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .sw-game-title {
    font-size: 3rem;
    line-height: 0.95;
    overflow-wrap: anywhere;
  }

  .sw-game-hero-content > button,
  .sw-game-hero-content > div:last-child {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .sw-game-card {
    height: 176px;
  }

  .sw-compatibility {
    gap: 5px;
    font-size: 9px;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .sw-game-hero-content {
    padding: 24px;
  }

  .sw-game-card {
    min-height: 188px;
  }
}

/* Device-incompatible games stay visible for discovery, but cannot be
   mistaken for playable titles. */
.sw-play-button-disabled {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.34);
  box-shadow: none;
  user-select: none;
}

.sw-play-device-disabled {
  background: rgba(148, 163, 184, 0.13);
  border-color: rgba(148, 163, 184, 0.28);
  color: rgba(203, 213, 225, 0.58);
}

/* ─── Ironbound identity ─────────────────────────────────────── */
:root {
  --iron-gold: #d7aa4a;
  --iron-gold-bright: #f0c866;
  --iron-ink: #080b12;
  --iron-steel: #9ba6b6;
  --iron-line: rgba(215, 170, 74, 0.28);
}

/* The terminal is the Slagwork product shell; Ironbound is one game inside it. */
.sw-terminal-brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(255, 197, 24, 0.36),
    0 0 18px rgba(255, 197, 24, 0.16);
}

.sw-ironbound-sidebar-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  object-fit: cover;
  filter: saturate(0.86) brightness(0.84);
  box-shadow:
    0 0 0 1px rgba(215, 170, 74, 0.28),
    0 0 14px rgba(215, 170, 74, 0.10);
}

.sw-ironbound-wordmark {
  color: var(--iron-gold-bright) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  text-shadow:
    0 0 2px rgba(255, 221, 132, 0.85),
    0 0 22px rgba(215, 170, 74, 0.34),
    0 3px 0 rgba(44, 27, 7, 0.7) !important;
}

.sw-ironbound-wordmark::first-letter {
  letter-spacing: 0.04em;
}

.ironbound-announcement-backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(215, 170, 74, 0.15), transparent 36%),
    rgba(2, 4, 8, 0.88);
}

.ironbound-announcement {
  border: 1px solid rgba(215, 170, 74, 0.42);
  background:
    linear-gradient(135deg, rgba(17, 21, 30, 0.98), rgba(7, 10, 16, 0.985));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 224, 142, 0.05) inset,
    0 0 42px rgba(215, 170, 74, 0.12);
}

.ib-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 140;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: auto;
}

.ib-overlay.is-visible {
  display: flex;
  animation: ib-notice-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ib-overlay .ironbound-announcement {
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

@keyframes ib-notice-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ironbound-announcement-banner {
  position: relative;
  height: 172px;
  min-height: 172px;
  overflow: hidden;
  isolation: isolate;
  background: #06090f;
  border-bottom: 1px solid rgba(215, 170, 74, 0.24);
}

.ironbound-announcement-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4,6,10,0.18) 0%, rgba(4,6,10,0.62) 100%),
    linear-gradient(90deg, rgba(4,6,10,0.55) 0%, transparent 50%);
  pointer-events: none;
}

.ironbound-banner-kicker {
  color: var(--iron-gold-bright);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px #000;
}

.ironbound-banner-title {
  color: #f7d781;
  font: 400 clamp(2.25rem, 7vw, 4rem)/0.9 Georgia, 'Times New Roman', serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 rgba(41, 23, 4, 0.9),
    0 0 24px rgba(215, 170, 74, 0.65);
}

@keyframes ib-icon-float {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-3px) rotate(2deg); }
}



.ib-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: 0;
  pointer-events: none;
}

.ironbound-announcement-copy {
  color: rgba(232, 236, 242, 0.72);
  line-height: 1.75;
}

.ironbound-date-chip {
  color: #f0c866;
  background: rgba(215, 170, 74, 0.1);
  border: 1px solid rgba(215, 170, 74, 0.3);
}

.ironbound-acknowledge {
  color: #171108;
  background: linear-gradient(135deg, #f1c965, #bd8c2c);
  box-shadow: 0 8px 24px rgba(215, 170, 74, 0.18);
}

.ironbound-acknowledge:hover {
  background: linear-gradient(135deg, #ffdc83, #d5a43e);
  box-shadow: 0 10px 30px rgba(215, 170, 74, 0.3);
}

.ironbound-never {
  color: rgba(236, 239, 245, 0.58);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ironbound-never:hover,
.ironbound-never.is-selected {
  color: #f5d47a;
  border-color: rgba(215, 170, 74, 0.45);
  background: rgba(215, 170, 74, 0.12);
}

@media (max-width: 599px) {
  .ironbound-announcement-banner { height: 156px; min-height: 156px; }
}