/* ==========================================================================
   Steampunk Fantasy Design System & Theme Stylesheet
   Palette: Brass, Copper, Dark Iron, Rivets, Amber Lantern Glow
   ========================================================================== */

:root {
  --color-ambient-void: #0b0d11;
  --color-iron-panel: #161920;
  --color-iron-dark: #22262d;
  --color-iron-light: #2c323b;
  --color-iron-rivet: #404856;
  
  --color-brass-primary: #c59b27;
  --color-brass-glow: #ffcf48;
  --color-brass-dark: #846313;
  --color-brass-bright: #ffe685;
  
  --color-copper-warm: #b87333;
  --color-copper-dark: #703816;
  --color-copper-light: #d88e4e;

  --color-lantern-amber: #ffaa2b;
  --color-lantern-glow: rgba(255, 170, 43, 0.28);
  --color-lantern-core: #fff4c2;

  --color-text-brass: #f5e4b5;
  --color-text-dim: #9d9685;
  --color-text-dark: #12100a;

  --color-status-success: #2ec4b6;
  --color-status-danger: #e71d36;
  --color-status-warning: #ff9f1c;

  --font-serif: "Georgia", "Palatino", "Times New Roman", serif;
  --font-mono: "Courier New", Courier, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: var(--color-ambient-void);
  color: var(--color-text-brass);
  font-family: var(--font-serif);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

/* Custom Steampunk Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-iron-panel);
  border: 1px solid var(--color-iron-rivet);
}
::-webkit-scrollbar-thumb {
  background: var(--color-brass-dark);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brass-primary);
}

/* View Containers */
.view-container {
  display: none;
  width: 100%;
  height: calc(100vh - 52px);
  max-height: calc(100vh - 52px);
  min-height: 0;
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
}

.view-container.active {
  display: flex;
}

/* Common Steampunk Panels */
.steampunk-panel {
  background: radial-gradient(circle at 50% 20%, #20252e 0%, var(--color-iron-panel) 100%);
  border: 2px solid var(--color-brass-primary);
  box-shadow: 
    inset 0 0 15px rgba(0, 0, 0, 0.8),
    0 8px 24px rgba(0, 0, 0, 0.7),
    0 0 10px rgba(197, 155, 39, 0.2);
  border-radius: 4px;
  position: relative;
}

/* Rivet Details at Corners */
.steampunk-panel::before,
.steampunk-panel::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #e0be5a 30%, #523e10 100%);
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}
.steampunk-panel::before {
  top: 4px;
  left: 4px;
}
.steampunk-panel::after {
  bottom: 4px;
  right: 4px;
}

/* Steampunk Buttons */
.btn-steampunk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #c79e2c 0%, #947119 50%, #684f0e 100%);
  color: #1a1408;
  font-family: var(--font-serif);
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.5px;
  border: 1px solid var(--color-brass-glow);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 0 rgba(255, 230, 133, 0.4);
  transition: all 0.15s ease-in-out;
}

.btn-steampunk:hover {
  background: linear-gradient(180deg, #e3b73b 0%, #b08722 50%, #7e6014 100%);
  box-shadow: 
    0 0 12px var(--color-brass-glow),
    0 3px 6px rgba(0, 0, 0, 0.7);
  color: #0b0904;
  transform: translateY(-1px);
}

.btn-steampunk:active {
  background: linear-gradient(180deg, #7e6014 0%, #b08722 100%);
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.btn-steampunk.btn-copper {
  background: linear-gradient(180deg, #c97c36 0%, #8f4c1c 50%, #5e300f 100%);
  border-color: #f7a259;
  color: #1a0b03;
}
.btn-steampunk.btn-copper:hover {
  background: linear-gradient(180deg, #dc8a3e 0%, #a65821 50%, #703814 100%);
  box-shadow: 0 0 12px #f7a259;
}

.btn-steampunk.btn-iron {
  background: linear-gradient(180deg, #3d4554 0%, #262c37 50%, #171b22 100%);
  border-color: #667287;
  color: var(--color-text-brass);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.btn-steampunk.btn-iron:hover {
  background: linear-gradient(180deg, #4b5568 0%, #303746 50%, #1e242d 100%);
  box-shadow: 0 0 8px rgba(102, 114, 135, 0.6);
}

.btn-steampunk.btn-launch {
  background: linear-gradient(180deg, #27ab89 0%, #1b7a61 50%, #10493a 100%);
  border-color: #55efc4;
  color: #05261e;
  font-size: 15px;
  padding: 10px 22px;
}
.btn-steampunk.btn-launch:hover {
  background: linear-gradient(180deg, #2ecc9a 0%, #229979 50%, #155b48 100%);
  box-shadow: 0 0 15px #55efc4;
}

/* Steampunk Header Banner */
.steampunk-header {
  position: relative;
  z-index: 1000;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #161a22 0%, #232935 50%, #161a22 100%);
  border-bottom: 2px solid var(--color-brass-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.header-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gear-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background: radial-gradient(circle, var(--color-brass-glow) 35%, var(--color-brass-dark) 85%);
  mask: radial-gradient(circle, transparent 30%, black 31%);
  animation: spinSlow 20s linear infinite;
  border-radius: 50%;
  border: 2px dashed var(--color-brass-glow);
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-brass-bright);
  text-shadow: 0 0 8px rgba(255, 207, 72, 0.5);
}

/* Open Beta Steam Badge */
.badge-beta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(231, 29, 54, 0.22) 0%, rgba(255, 159, 28, 0.30) 100%);
  border: 1px solid #ff9f1c;
  color: #ffcf48;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 159, 28, 0.35), inset 0 0 5px rgba(255, 207, 72, 0.2);
  vertical-align: middle;
  line-height: 1.2;
  white-space: nowrap;
  animation: betaPulse 2.5s infinite ease-in-out;
}

@keyframes betaPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 159, 28, 0.35), inset 0 0 4px rgba(255, 207, 72, 0.2);
    border-color: #ff9f1c;
    color: #ffcf48;
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 110, 30, 0.7), inset 0 0 8px rgba(255, 207, 72, 0.4);
    border-color: #ffe082;
    color: #ffffff;
  }
}

.header-nav {
  display: flex;
  gap: 10px;
}

/* Badge Indicator */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  font-family: var(--font-mono);
  border: 1px solid transparent;
}

.badge-status.valid {
  background: rgba(46, 196, 182, 0.15);
  border-color: var(--color-status-success);
  color: var(--color-status-success);
  box-shadow: 0 0 8px rgba(46, 196, 182, 0.4);
}

.badge-status.invalid {
  background: rgba(231, 29, 54, 0.15);
  border-color: var(--color-status-danger);
  color: var(--color-status-danger);
  box-shadow: 0 0 8px rgba(231, 29, 54, 0.4);
}

/* Lobby Screen Styling */
#view-lobby {
  flex-direction: column;
  background: 
    linear-gradient(rgba(11, 13, 17, 0.82), rgba(11, 13, 17, 0.94)),
    url('/assets/arena_backdrop.jpg') center/cover no-repeat;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
  max-height: calc(100vh - 52px) !important;
  height: calc(100vh - 52px) !important;
  flex: 1 1 0 !important;
}

.lobby-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px 80px 16px;
  gap: 20px;
  min-height: 100%;
  box-sizing: border-box;
  width: 100%;
}

.lobby-title-banner {
  text-align: center;
}

.lobby-title-banner h1 {
  font-size: 38px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-brass-bright);
  text-shadow: 0 0 15px rgba(255, 207, 72, 0.6), 0 4px 10px rgba(0, 0, 0, 0.9);
}

.lobby-title-banner p {
  color: var(--color-text-dim);
  font-size: 15px;
  margin-top: 6px;
  font-style: italic;
}

/* Two-column responsive lobby grid */
.lobby-grid {
  display: grid;
  grid-template-columns: minmax(320px, 470px) minmax(300px, 430px);
  gap: 20px;
  width: 100%;
  max-width: 940px;
  align-items: start;
}

@media (max-width: 860px) {
  .lobby-grid {
    grid-template-columns: 1fr;
    max-width: 490px;
  }
}

.lobby-side-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  box-sizing: border-box;
  width: 100%;
}

.lobby-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-brass-dark);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.lobby-card-header h3 {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--color-brass-bright);
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lobby-action-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
}

.lobby-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lobby-input-group label {
  font-size: 13px;
  color: var(--color-brass-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.steampunk-input {
  background: #11141a;
  border: 1px solid var(--color-brass-dark);
  color: var(--color-text-brass);
  font-family: var(--font-serif);
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 3px;
  outline: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

.steampunk-input:focus {
  border-color: var(--color-brass-glow);
  box-shadow: 0 0 8px rgba(255, 207, 72, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

/* Game View Screen */
body.in-game header.steampunk-header {
  display: none !important;
}

@media (max-width: 900px), (max-height: 520px) {
  body.in-game #view-game .steampunk-header {
    display: none !important;
  }
}

#view-game {
  flex-direction: column;
  background: #000;
  height: 100vh;
  width: 100vw;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.game-canvas-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#gameCanvas {
  display: block;
  background: #0b0d11;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.game-hud-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Idle Screen inside View Game */
.game-idle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(22, 26, 34, 0.94) 0%, rgba(11, 13, 17, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
  box-sizing: border-box;
}

.idle-card {
  max-width: 520px;
  width: 100%;
  background: rgba(18, 22, 30, 0.95);
  border: 2px solid var(--color-brass-primary);
  border-radius: 8px;
  padding: 32px 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), 0 0 24px rgba(197, 155, 39, 0.25);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: fadeIn 0.3s ease-out;
}

.idle-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--color-brass-glow);
  background: rgba(197, 155, 39, 0.15);
  border: 1px solid var(--color-brass-dark);
  padding: 4px 14px;
  border-radius: 12px;
  text-transform: uppercase;
}

.idle-title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--color-brass-bright);
  text-shadow: 0 0 10px rgba(255, 207, 72, 0.5);
  margin: 0;
}

.idle-desc {
  font-size: 14px;
  color: var(--color-text-dim);
  line-height: 1.5;
  margin: 0;
}

.idle-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

/* ==========================================================================
   VIEW 0: Steampunk Game Portal & Landing Website Styles
   ========================================================================== */
#view-home {
  display: none;
  width: 100%;
  height: calc(100vh - 52px);
  background: 
    linear-gradient(rgba(11, 13, 17, 0.80), rgba(11, 13, 17, 0.94)),
    url('/assets/arena_backdrop.jpg') center top / cover no-repeat fixed;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  user-select: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

#view-home.active {
  display: block !important;
}

.home-scroll-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  min-height: min-content;
  box-sizing: border-box;
}

.home-hero-section,
.home-portals-section,
.home-features-section,
.home-controls-section,
.home-footer {
  flex-shrink: 0 !important;
  min-height: min-content !important;
  width: 100% !important;
  overflow: visible !important;
}

.portal-card,
.feature-box,
.controls-card,
.home-battle-console {
  flex-shrink: 0 !important;
  min-height: min-content !important;
  overflow: visible !important;
}

/* Hero Section */
.home-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  width: 100%;
}

.hero-steam-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--color-brass-glow);
  background: rgba(197, 155, 39, 0.12);
  border: 1px solid var(--color-brass-dark);
  padding: 4px 14px;
  border-radius: 12px;
  text-shadow: 0 0 6px var(--color-brass-glow);
}

.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-title {
  font-size: 54px;
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--color-brass-bright);
  text-shadow: 
    0 0 25px rgba(255, 207, 72, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.9);
  margin: 0;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--color-text-brass);
  max-width: 680px;
  line-height: 1.4;
  margin: 0;
  font-style: italic;
  opacity: 0.9;
}

.hero-feature-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.feature-tag {
  background: #141820;
  border: 1px solid var(--color-brass-dark);
  color: var(--color-brass-glow);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Home Battle Station Console */
.home-battle-console {
  width: 100%;
  max-width: 580px;
  padding: 24px;
  background: radial-gradient(circle at 50% 15%, #242a35 0%, #151820 100%);
  border: 2px solid var(--color-brass-primary);
  border-radius: 6px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(197, 155, 39, 0.25);
  margin-top: 10px;
}

.console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(197, 155, 39, 0.3);
  margin-bottom: 18px;
}

.console-title {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--color-brass-bright);
}

.console-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-brass);
}

.pill-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-weight: bold;
}
.pill-badge.guest {
  background: rgba(255, 170, 43, 0.2);
  color: var(--color-lantern-amber);
  border: 1px solid var(--color-copper-warm);
}
.pill-badge.linked {
  background: rgba(46, 196, 182, 0.2);
  color: var(--color-status-success);
  border: 1px solid var(--color-status-success);
}

.console-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.console-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.console-field label {
  font-size: 12px;
  color: var(--color-brass-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: bold;
}

.mode-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mode-select-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #11141a;
  border: 1px solid #333c4a;
  border-radius: 4px;
  color: var(--color-text-dim);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease-in-out;
}
.mode-select-btn:hover {
  background: #1b212b;
  border-color: var(--color-brass-dark);
  color: var(--color-text-brass);
}
.mode-select-btn.active {
  background: linear-gradient(180deg, #2b3340 0%, #1a1f28 100%);
  border: 1px solid var(--color-brass-glow);
  color: var(--color-brass-bright);
  box-shadow: 0 0 10px rgba(255, 207, 72, 0.25);
}

.mode-select-btn .mode-icon {
  font-size: 24px;
}
.mode-select-btn strong {
  display: block;
  font-size: 13px;
  color: var(--color-brass-bright);
}
.mode-select-btn small {
  display: block;
  font-size: 11px;
  color: var(--color-text-dim);
}

.hero-launch-action {
  font-size: 18px;
  font-weight: 900;
  padding: 14px 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
  cursor: pointer;
  border-radius: 4px;
  background: linear-gradient(180deg, #2ec4b6 0%, #198754 50%, #105936 100%);
  border: 2px solid #55efc4;
  color: #032014;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.8),
    0 0 20px rgba(46, 196, 182, 0.5);
  animation: pulseGlow 2.5s infinite;
}
.hero-launch-action:hover {
  background: linear-gradient(180deg, #3ff4e4 0%, #20aa6a 50%, #157347 100%);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(85, 239, 196, 0.8);
  transform: translateY(-2px);
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 16px rgba(46, 196, 182, 0.4); }
  50% { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 28px rgba(46, 196, 182, 0.7); }
}

/* Sections Heading */
.section-heading {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-brass-bright);
  text-shadow: 0 0 10px rgba(255, 207, 72, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.section-heading span {
  color: var(--color-copper-warm);
}

/* Portals Section */
.home-portals-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
}

.portal-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.portal-card:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 12px 28px rgba(0,0,0,0.8),
    0 0 16px rgba(197, 155, 39, 0.3);
}

.portal-icon {
  font-size: 32px;
}
.portal-card h3 {
  font-size: 18px;
  color: var(--color-brass-bright);
  margin: 0;
}
.portal-card p {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.5;
  flex: 1;
}

/* Features Grid */
.home-features-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  width: 100%;
}

.feature-box {
  background: rgba(22, 25, 32, 0.9);
  border: 1px solid #2e3542;
  border-radius: 4px;
  padding: 18px;
  text-align: left;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}
.feature-box:hover {
  border-color: var(--color-brass-dark);
}
.feature-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.feature-icon {
  font-size: 20px;
}
.feature-box h4 {
  font-size: 15px;
  color: var(--color-brass-bright);
  margin: 0;
}
.feature-box p {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   Steampunk Lore & World Chronicles Dossier
   ========================================================================== */
.home-lore-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lore-main-card {
  width: 100%;
  padding: 24px;
  background: radial-gradient(circle at 50% 10%, #1c222c 0%, #12151b 100%);
  border: 2px solid #846313;
  border-radius: 6px;
  box-shadow: 
    inset 0 0 25px rgba(0, 0, 0, 0.9),
    0 12px 30px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(197, 155, 39, 0.15);
  position: relative;
}

.lore-prologue-box {
  background: rgba(10, 13, 18, 0.75);
  border: 1px solid rgba(197, 155, 39, 0.3);
  border-radius: 6px;
  padding: 20px 22px;
  position: relative;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
  margin-bottom: 24px;
}

.lore-badge-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(197, 155, 39, 0.15);
  border: 1px solid rgba(197, 155, 39, 0.4);
  color: var(--color-brass-glow);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  margin-bottom: 12px;
}

.lore-prologue-title {
  font-size: 20px;
  color: var(--color-brass-bright);
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 10px rgba(255, 207, 72, 0.3);
}

.lore-text-lead {
  font-size: 14px;
  color: var(--color-text-brass);
  line-height: 1.7;
  margin-bottom: 12px;
}

.lore-drop-cap {
  float: left;
  font-size: 42px;
  line-height: 38px;
  padding-top: 2px;
  padding-right: 10px;
  padding-bottom: 2px;
  color: var(--color-brass-bright);
  font-family: var(--font-serif);
  font-weight: bold;
  text-shadow: 0 0 12px rgba(255, 207, 72, 0.5);
}

.lore-highlight {
  color: var(--color-brass-glow);
  font-weight: bold;
  text-shadow: 0 0 6px rgba(255, 207, 72, 0.25);
}

.lore-highlight-cyan {
  color: #5ffbf1;
  font-weight: bold;
}

.lore-highlight-copper {
  color: #d88e4e;
  font-weight: bold;
}

.lore-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px 0;
}

.lore-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 155, 39, 0.5), transparent);
}

.lore-divider-title {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--color-brass-bright);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 207, 72, 0.3);
  white-space: nowrap;
}

/* 4 Guilds Grid */
.guilds-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 820px) {
  .guilds-showcase-grid {
    grid-template-columns: 1fr;
  }
}

.guild-dossier-card {
  background: linear-gradient(180deg, rgba(24, 28, 36, 0.95) 0%, rgba(14, 17, 23, 0.95) 100%);
  border: 1px solid rgba(197, 155, 39, 0.3);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.guild-dossier-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brass-primary);
  box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 12px rgba(197, 155, 39, 0.2);
}

.guild-dossier-card.vanguard {
  border-left: 4px solid #3b82f6;
}
.guild-dossier-card.sharpshooter {
  border-left: 4px solid #2ec4b6;
}
.guild-dossier-card.juggernaut {
  border-left: 4px solid #ffcf48;
}
.guild-dossier-card.infiltrator {
  border-left: 4px solid #ff4757;
}

.guild-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.guild-emblem-badge {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: radial-gradient(circle, #252b36 0%, #11141a 100%);
  border: 1.5px solid var(--color-brass-dark);
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.guild-meta {
  flex: 1;
}

.guild-meta-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-brass-bright);
  letter-spacing: 0.5px;
}

.guild-meta-role {
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: 1px;
}

.guild-role-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--color-text-brass);
  letter-spacing: 1px;
  white-space: nowrap;
}

.guild-desc {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.guild-ability-chip {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(197, 155, 39, 0.25);
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.guild-ability-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
}

.guild-ability-desc {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.4;
}

/* Arenas Grid */
.arenas-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.arena-dossier-card {
  background: linear-gradient(180deg, rgba(20, 24, 32, 0.9) 0%, rgba(12, 15, 20, 0.9) 100%);
  border: 1px solid rgba(197, 155, 39, 0.25);
  border-radius: 5px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.arena-dossier-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brass-glow);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}

.arena-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.arena-sector-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(197, 155, 39, 0.15);
  border: 1px solid rgba(197, 155, 39, 0.35);
  color: var(--color-brass-bright);
  border-radius: 3px;
  font-weight: bold;
  letter-spacing: 0.8px;
}

.arena-type-tag {
  font-size: 10px;
  color: var(--color-text-dim);
  font-style: italic;
}

.arena-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-brass-bright);
  display: flex;
  align-items: center;
  gap: 6px;
}

.arena-desc {
  font-size: 11px;
  color: var(--color-text-dim);
  line-height: 1.45;
}

/* Controls Guide */
.home-controls-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controls-card {
  width: 100%;
  max-width: 680px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(17, 20, 26, 0.6);
  border-radius: 4px;
  border: 1px solid #2a313d;
}

.keys-badge {
  display: flex;
  gap: 6px;
}

kbd {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  color: var(--color-brass-bright);
  background: linear-gradient(180deg, #333a46 0%, #1e232b 100%);
  border: 1px solid var(--color-brass-dark);
  border-radius: 3px;
  box-shadow: 0 2px 0 #000, 0 0 4px rgba(255, 207, 72, 0.3);
}

.control-desc {
  font-size: 13px;
  color: var(--color-text-brass);
}

/* SEO FAQ Section */
.home-faq-section {
  width: 100%;
  margin-top: 10px;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  width: 100%;
}
.faq-card {
  background: rgba(18, 22, 30, 0.92);
  border: 1px solid rgba(197, 155, 39, 0.35);
  border-radius: 6px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.faq-card:hover {
  border-color: var(--color-brass-glow);
  transform: translateY(-2px);
}
.faq-question {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: bold;
  color: var(--color-brass-bright);
  display: flex;
  align-items: center;
  gap: 8px;
}
.faq-question .faq-q-icon {
  color: var(--color-brass-glow);
  font-size: 16px;
}
.faq-answer {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-dim);
}

/* Footer */
.home-footer {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(197, 155, 39, 0.2);
  color: var(--color-text-dim);
  font-size: 13px;
}

/* Active Chambers Browser & Lobby Guidance */
.lobby-guide-banner {
  background: rgba(22, 26, 34, 0.9);
  border-left: 4px solid var(--color-brass-glow);
  padding: 10px 14px;
  border-radius: 4px;
  text-align: left;
}
.lobby-guide-banner .guide-title {
  font-weight: bold;
  color: var(--color-brass-bright);
  font-size: 13px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lobby-guide-banner ol, .lobby-guide-banner ul {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.room-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #141820;
  border: 1px solid #2e3644;
  border-radius: 4px;
  transition: all 0.15s ease-in-out;
  text-align: left;
}
.room-card:hover {
  border-color: var(--color-brass-primary);
  background: #1a202a;
}
.room-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.room-card-name {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-brass-bright);
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}
.room-card-sub {
  font-size: 11px;
  color: var(--color-text-dim);
  display: flex;
  gap: 8px;
  align-items: center;
}
.room-badge {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.room-badge.open {
  background: rgba(46, 196, 182, 0.2);
  color: #2ec4b6;
  border: 1px solid rgba(46, 196, 182, 0.4);
}
.room-badge.battle {
  background: rgba(230, 115, 0, 0.2);
  color: #ff9f43;
  border: 1px solid rgba(230, 115, 0, 0.4);
}
.room-badge.full {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.4);
}
.empty-rooms-msg {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-dim);
  border: 1px dashed #333d4b;
  border-radius: 4px;
  background: rgba(17, 20, 26, 0.4);
}

/* ==========================================================================
   Alchemical Smelter Panel
   ========================================================================== */
.alchemical-smelter-panel {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.alchemical-smelter-panel:hover {
  border-color: var(--color-brass-glow);
  box-shadow: 0 4px 20px rgba(197, 155, 39, 0.25);
}

/* ==========================================================================
   Mobile Touch Controls & Virtual Joystick
   ========================================================================== */
.mobile-touch-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  display: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Visible on touch screens or when touch active or responsive mobile/tablet displays */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  .mobile-touch-controls {
    display: block;
  }
}
.mobile-touch-controls.touch-active {
  display: block !important;
}

/* Force hide touch controls during match outcome / victory / defeat */
.mobile-touch-controls.hidden,
.match-over .mobile-touch-controls,
.game-canvas-container.match-over .mobile-touch-controls,
#mobileTouchControls.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.touch-joystick-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: 48%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.touch-joystick-base {
  position: absolute;
  width: 124px;
  height: 124px;
  margin-left: -62px;
  margin-top: -62px;
  border-radius: 50%;
  border: 2px solid rgba(197, 155, 39, 0.55);
  background: radial-gradient(circle, rgba(197, 155, 39, 0.12) 0%, rgba(20, 24, 30, 0.75) 70%);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.75), inset 0 0 12px rgba(197, 155, 39, 0.2);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.15s ease-out;
}

.joystick-arrow {
  position: absolute;
  font-size: 10px;
  color: rgba(255, 207, 72, 0.65);
  user-select: none;
  pointer-events: none;
  line-height: 1;
}
.joystick-arrow.arrow-up { top: 6px; left: 50%; transform: translateX(-50%); }
.joystick-arrow.arrow-down { bottom: 6px; left: 50%; transform: translateX(-50%); }
.joystick-arrow.arrow-left { left: 6px; top: 50%; transform: translateY(-50%); }
.joystick-arrow.arrow-right { right: 6px; top: 50%; transform: translateY(-50%); }

.touch-joystick-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe685 0%, #c59b27 60%, #703816 100%);
  border: 2px solid #ffcf48;
  box-shadow: 0 0 14px rgba(255, 207, 72, 0.7);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

/* Touch Action Buttons Cluster */
.touch-action-cluster {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 200px;
  height: 200px;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.touch-btn {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--color-brass-primary);
  background: radial-gradient(circle, #2c323b 0%, #161920 100%);
  color: var(--color-brass-bright);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), inset 0 0 8px rgba(197, 155, 39, 0.3);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.touch-btn:active, .touch-btn.active {
  transform: scale(0.92);
  background: radial-gradient(circle, #703816 0%, #30180a 100%);
  border-color: var(--color-brass-glow);
  box-shadow: 0 0 16px rgba(255, 207, 72, 0.85);
}

/* Primary FIRE BUTTON - Large, glowing crimson trigger */
.touch-btn-fire {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 80px;
  height: 80px;
  border: 3px solid #ff4d4d;
  background: radial-gradient(circle, #9a2215 0%, #540e06 70%, #200502 100%);
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.6), inset 0 0 14px rgba(255, 200, 77, 0.4);
  color: #fff;
  z-index: 10;
}
.touch-btn-fire:active, .touch-btn-fire.active {
  transform: scale(0.93);
  background: radial-gradient(circle, #ff4757 0%, #b32214 70%, #3d0702 100%);
  border-color: #ff9999;
  box-shadow: 0 0 26px rgba(255, 71, 87, 0.95), inset 0 0 16px rgba(255, 255, 255, 0.6);
}
.touch-btn-fire .btn-icon-fire {
  font-size: 28px;
  line-height: 1;
}
.touch-btn-fire .btn-label-fire {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #ffcf48;
  margin-top: 2px;
}

/* Reload Button with Ammo Count */
.touch-btn-reload {
  position: absolute;
  right: 106px;
  bottom: 10px;
  width: 58px;
  height: 58px;
}
.touch-btn-reload.reloading {
  animation: reloadSpin 1s infinite linear;
  border-color: #ffcf48;
}
@keyframes reloadSpin {
  100% { transform: rotate(360deg); }
}
.ammo-count-badge {
  font-size: 10px;
  font-weight: bold;
  color: #ffcf48;
  margin-top: 2px;
}

/* Ability Button [E] */
.touch-btn-ability {
  position: absolute;
  right: 98px;
  bottom: 96px;
  width: 58px;
  height: 58px;
  border-color: #2ec4b6;
  background: radial-gradient(circle, rgba(46, 196, 182, 0.25) 0%, #152226 100%);
  overflow: hidden;
}
.touch-btn-ability.ability-active {
  box-shadow: 0 0 20px rgba(46, 196, 182, 0.9), inset 0 0 10px rgba(46, 196, 182, 0.5);
  border-color: #6ee7dc;
}
.touch-btn-ability.on-cooldown {
  opacity: 0.65;
  filter: grayscale(40%);
}
.touch-cooldown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 18, 24, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #cbd5e1;
  border-radius: 50%;
}

/* Sprint Button (Shift) */
.touch-btn-sprint {
  position: absolute;
  right: 10px;
  bottom: 106px;
  width: 56px;
  height: 56px;
}
.touch-btn-sprint.active {
  background: radial-gradient(circle, #703816 0%, #30180a 100%);
  border-color: #ffcf48;
  box-shadow: 0 0 14px rgba(255, 207, 72, 0.8);
}

/* Lantern Button (F) */
.touch-btn-lantern {
  position: absolute;
  right: 76px;
  bottom: 168px;
  width: 52px;
  height: 52px;
  border-color: #ffaa2b;
  background: radial-gradient(circle, rgba(255, 170, 43, 0.28) 0%, #22180e 100%);
  overflow: hidden;
}
.touch-btn-lantern.lantern-extinguished {
  border-color: #ff5a5f;
  background: radial-gradient(circle, rgba(255, 90, 95, 0.35) 0%, #1c1012 100%);
  box-shadow: 0 0 14px rgba(255, 90, 95, 0.7);
}
.touch-btn-lantern.lantern-cooldown {
  opacity: 0.65;
  filter: grayscale(30%);
}

.touch-btn .btn-icon {
  font-size: 18px;
  line-height: 1;
}
.touch-btn .btn-label {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--color-brass-light);
  margin-top: 2px;
}

/* Top Utility Bar */
.touch-top-bar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  z-index: 55;
}
.touch-util-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(22, 26, 34, 0.88);
  border: 1.5px solid #846313;
  color: #ffcf48;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  touch-action: none;
}
.touch-util-btn:active {
  transform: scale(0.92);
  border-color: #ffcf48;
}
.touch-util-btn-exit {
  background: rgba(40, 16, 16, 0.90);
  border-color: #9a2215;
  color: #ffcf48;
  font-size: 13px;
  font-weight: bold;
}
.touch-util-btn-exit:active {
  background: rgba(70, 20, 20, 0.95);
  border-color: #ff4d4d;
}

/* Non-Blocking Landscape Notification Banner */
.landscape-rotate-prompt {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  z-index: 55;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.rotate-prompt-card {
  pointer-events: auto;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-brass-primary);
  border-radius: 6px;
  background: rgba(18, 22, 30, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 207, 72, 0.25);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rotate-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rotate-phone-anim {
  font-size: 18px;
  line-height: 1;
}
.rotate-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-brass-bright);
  flex: 1;
}
.rotate-close-btn {
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s ease;
}
.rotate-close-btn:hover {
  color: #ff4757;
}
.rotate-desc {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.3;
}
.rotate-prompt-buttons {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

/* Arena Loading Overlay */
.game-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 13, 17, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 45;
  pointer-events: auto;
}
.loading-gear-spin {
  width: 50px;
  height: 50px;
  border: 4px dashed var(--color-brass-glow);
  border-radius: 50%;
  animation: spinSlow 3s linear infinite;
  box-shadow: 0 0 16px rgba(255, 207, 72, 0.4);
}
.loading-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-brass-bright);
  letter-spacing: 1px;
}
.loading-desc {
  font-size: 12px;
  color: var(--color-text-dim);
  font-style: italic;
}

/* Mobile Hamburger Button ("Бутерброд") */
.btn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #2b3340 0%, #161a22 100%);
  border: 2px solid var(--color-brass-primary);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 0 6px rgba(197, 155, 39, 0.25);
  padding: 8px;
  touch-action: manipulation;
  position: relative;
  z-index: 10005;
  pointer-events: auto;
}
.btn-hamburger:active, .btn-hamburger.open {
  background: linear-gradient(180deg, #3d4758 0%, #202632 100%);
  border-color: var(--color-brass-glow);
  box-shadow: 0 0 10px rgba(255, 207, 72, 0.6);
}
.hamburger-bar {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--color-brass-bright);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255, 207, 72, 0.5);
  pointer-events: none;
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: none;
  flex-direction: column;
  pointer-events: none;
}
.mobile-nav-drawer.open {
  display: flex !important;
  pointer-events: auto !important;
}
.mobile-nav-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 10, 14, 0.75);
  backdrop-filter: blur(4px);
}
.mobile-nav-content {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  height: 100%;
  background: linear-gradient(180deg, #1b202a 0%, #10131a 100%);
  border-left: 2px solid var(--color-brass-primary);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.85);
  overflow-y: auto;
  box-sizing: border-box;
  animation: slideDrawer 0.2s ease-out;
}
@keyframes slideDrawer {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(197, 155, 39, 0.3);
}
.mobile-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-brass-bright);
  letter-spacing: 1px;
}
.mobile-nav-close {
  background: transparent;
  border: 1px solid var(--color-iron-rivet);
  color: var(--color-brass-glow);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mobile-nav-close:hover {
  border-color: #ff4757;
  color: #ff4757;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-serif);
  font-weight: bold;
  color: var(--color-text-brass);
  background: rgba(22, 26, 34, 0.85);
  border: 1px solid #333a46;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.mobile-nav-btn:hover, .mobile-nav-btn.active {
  background: linear-gradient(180deg, #2b3340 0%, #1a1f28 100%);
  border-color: var(--color-brass-glow);
  color: var(--color-brass-bright);
  box-shadow: 0 0 10px rgba(255, 207, 72, 0.2);
}
.mobile-nav-btn.auth-pill {
  border-color: var(--color-brass-primary);
  background: rgba(197, 155, 39, 0.15);
  color: var(--color-brass-bright);
}

/* Compact adaptation for short mobile landscape displays (<= 480px height) */
@media (max-height: 480px) and (orientation: landscape) {
  .touch-action-cluster {
    width: 170px;
    height: 170px;
    right: 10px;
    bottom: 10px;
  }
  .touch-btn-fire {
    width: 70px;
    height: 70px;
    right: 4px;
    bottom: 4px;
  }
  .touch-btn-fire .btn-icon-fire {
    font-size: 22px;
  }
  .touch-btn-fire .btn-label-fire {
    font-size: 9px;
  }
  .touch-btn-reload {
    right: 88px;
    bottom: 6px;
    width: 50px;
    height: 50px;
  }
  .touch-btn-ability {
    right: 80px;
    bottom: 70px;
    width: 50px;
    height: 50px;
  }
  .touch-btn-sprint {
    right: 8px;
    bottom: 88px;
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   MOBILE WEBSITE ADAPTATION: Zero Horizontal Scroll, 1 Column Layout, Hamburger Menu
   ========================================================================== */
@media (max-width: 900px) {
  /* 1. Header & Hamburger ("Бутерброд") */
  .header-nav#desktopNav {
    display: none !important;
  }
  .btn-hamburger {
    display: flex !important;
  }
  .steampunk-header {
    padding: 0 12px !important;
    height: 48px !important;
  }
  .header-title {
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
  }

  /* 2. Global Zero Horizontal Scroll */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #view-home {
    width: 100% !important;
    max-width: 100vw !important;
    height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #view-home.active {
    display: block !important;
  }

  .home-scroll-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 16px 10px 80px 10px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .home-hero-section, .home-portals-section, .home-features-section, .home-controls-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-height: min-content !important;
    overflow: visible !important;
  }

  .hero-title {
    font-size: clamp(26px, 8vw, 42px) !important;
    letter-spacing: 2px !important;
    word-break: break-word !important;
  }

  .hero-subtitle {
    font-size: 13px !important;
    padding: 0 4px !important;
  }

  .hero-feature-tags {
    gap: 6px !important;
  }
  .feature-tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  .home-battle-console {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 10px !important;
    flex-shrink: 0 !important;
    min-height: min-content !important;
    overflow: visible !important;
  }

  /* 3. Single Column Stacking ("Все в один стовпчик") */
  .mode-selector-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .portals-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .portal-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-height: min-content !important;
    overflow: visible !important;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .feature-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-height: min-content !important;
    overflow: visible !important;
  }

  .lobby-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .lobby-hero {
    padding: 16px 10px 80px 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .room-input-action-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .room-action-btns-wrap {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .controls-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 10px !important;
  }

  .control-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .section-heading {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  .hero-launch-action {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
  }
}