/* ============================================================
   РУССКИЕ СКАЗКИ — Professional UI Redesign
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Uncial+Antiqua&family=Philosopher:ital,wght@0,400;0,700;1,400&family=Raleway:wght@400;600;700&display=swap');

/* ── CUSTOM PROPERTIES ── */
:root {
  --bg-dark:       #080b10;
  --bg-card:       #111620;
  --bg-panel:      #161d2a;
  --gold:          #d4a843;
  --gold-light:    #f5c842;
  --gold-dark:     #a07828;
  --gold-glow:     rgba(212,168,67,0.25);
  --crimson:       #9b1a1a;
  --crimson-light: #cc3333;
  --emerald:       #1e5c2e;
  --emerald-light: #2ecc71;
  --sapphire:      #1a2d5a;
  --sapphire-light:#4a90d9;
  --amethyst:      #6b2fa0;
  --amethyst-light:#9b59b6;
  --text:          #ecdfc6;
  --text-muted:    #7a6a55;
  --border:        #243040;
  --shadow:        rgba(0,0,0,0.5);
  --shadow-deep:   rgba(0,0,0,0.75);
}

/* ── RESET ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BODY & ATMOSPHERIC BACKGROUND ── */
body {
  font-family: 'Raleway', sans-serif;
  background-color: var(--bg-dark);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent, transparent 24px,
      rgba(255,255,255,0.013) 24px, rgba(255,255,255,0.013) 25px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent, transparent 24px,
      rgba(255,255,255,0.013) 24px, rgba(255,255,255,0.013) 25px
    ),
    radial-gradient(ellipse at 15% 10%,  rgba(155,26,26,0.15)  0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%,  rgba(30,92,46,0.12)   0%, transparent 50%),
    radial-gradient(ellipse at 85% 10%,  rgba(26,45,90,0.12)   0%, transparent 40%),
    radial-gradient(ellipse at 15% 90%,  rgba(107,47,160,0.08) 0%, transparent 40%);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Vignette overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── TYPOGRAPHY ── */
h1 {
  font-family: 'Cinzel Decorative', cursive;
  color: var(--gold);
  text-shadow:
    0 0 30px rgba(212,168,67,0.55),
    0 0 60px rgba(212,168,67,0.2),
    0 2px 4px rgba(0,0,0,0.9);
}

h2, h3 {
  font-family: 'Uncial Antiqua', cursive;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(212,168,67,0.3);
}

/* ── ORNAMENTAL DIVIDER ── */
.lobby-ornament {
  text-align: center;
  color: var(--gold-dark);
  font-size: 1.15rem;
  letter-spacing: 6px;
  margin-bottom: 32px;
  opacity: 0.75;
  user-select: none;
}

/* ═══════════════════════════════════════
   LOBBY SCREEN
   ═══════════════════════════════════════ */
.lobby {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.lobby-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 10px;
  text-align: center;
}

.lobby-subtitle {
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-family: 'Philosopher', serif;
  font-style: italic;
  letter-spacing: 0.5px;
}

/* ── LOBBY CARD with double-border effect ── */
.lobby-card {
  background: linear-gradient(180deg, #141a26 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 500px;
  box-shadow:
    0 12px 50px var(--shadow-deep),
    0 0 0 1px rgba(212,168,67,0.13),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}

/* Top-left corner accent */
.lobby-card::before {
  content: '';
  position: absolute;
  top: 9px; left: 9px;
  width: 20px; height: 20px;
  border-top: 2px solid var(--gold-dark);
  border-left: 2px solid var(--gold-dark);
  border-radius: 5px 0 0 0;
  opacity: 0.7;
  pointer-events: none;
}

/* Bottom-right corner accent */
.lobby-card::after {
  content: '';
  position: absolute;
  bottom: 9px; right: 9px;
  width: 20px; height: 20px;
  border-bottom: 2px solid var(--gold-dark);
  border-right: 2px solid var(--gold-dark);
  border-radius: 0 0 5px 0;
  opacity: 0.7;
  pointer-events: none;
}

/* ── TABS ── */
.lobby-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 28px;
  background: rgba(8,11,16,0.7);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--border);
}

.lobby-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s;
  color: var(--text-muted);
  background: transparent;
  letter-spacing: 0.3px;
}

.lobby-tab.active {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: #1a1000;
  box-shadow: 0 2px 10px rgba(212,168,67,0.35);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── FORM INPUTS ── */
.input-group { margin-bottom: 20px; }

.input-group label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.input-group input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(8,11,16,0.8);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.12);
}

.input-group input::placeholder { color: var(--text-muted); opacity: 0.55; }

/* ── BUTTONS ── */
.btn {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  transition: all 0.25s;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  color: #1a1000;
  box-shadow:
    0 4px 18px rgba(212,168,67,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 9px 28px rgba(212,168,67,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-secondary {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  margin-top: 10px;
}

.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,168,67,0.05);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── HERO SELECTION CARDS ── */
.hero-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 4px;
}

.hero-card {
  background: linear-gradient(180deg, #141a24 0%, #0e1318 100%);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
  position: relative;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

.hero-card:hover {
  border-color: var(--gold);
  border-top-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212,168,67,0.22);
}

.hero-card.selected {
  border-color: var(--gold);
  border-top-color: var(--gold);
  background: linear-gradient(180deg, rgba(212,168,67,0.13) 0%, rgba(212,168,67,0.04) 100%);
  box-shadow: 0 0 22px rgba(212,168,67,0.28), 0 4px 14px rgba(0,0,0,0.5);
}

.hero-card.taken {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* Per-hero accent color on top border */
.hero-card[data-hero-id="ivan-durak"]    { border-top-color: #c8a832; }
.hero-card[data-hero-id="koschei"]       { border-top-color: #8b3fc8; }
.hero-card[data-hero-id="baba-yaga"]     { border-top-color: #2d8040; }
.hero-card[data-hero-id="zmey-gorynich"] { border-top-color: #c83030; }
.hero-card[data-hero-id="vasilisa"]      { border-top-color: #3060c8; }
.hero-card[data-hero-id="svyatogor"]     { border-top-color: #7878a0; }

.hero-portrait {
  width: 100%;
  height: 130px;
  overflow: hidden;
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.3s;
}
.hero-card:hover .hero-portrait img {
  transform: scale(1.06);
}

.hero-card-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gold);
  margin-bottom: 6px;
  padding: 0 8px;
  letter-spacing: 0.3px;
}

.hero-card-hp {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 14px;
}

/* ── ROOM CODE & PLAYER LIST ── */
.room-info {
  text-align: center;
  padding: 18px;
  background: rgba(8,11,16,0.65);
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.room-code {
  font-family: 'Uncial Antiqua', cursive;
  font-size: 2.2rem;
  color: var(--gold);
  letter-spacing: 8px;
  text-shadow: 0 0 20px rgba(212,168,67,0.4);
}

.players-list { margin-top: 12px; }

.player-item {
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid transparent;
  margin-bottom: 5px;
}

.player-item .ready  { color: var(--emerald-light); font-size: 0.9rem; }
.player-item .waiting { color: var(--text-muted); font-size: 0.9rem; }

.error-msg {
  background: rgba(155,26,26,0.2);
  border: 1px solid var(--crimson-light);
  border-radius: 8px;
  padding: 10px 14px;
  color: #e05050;
  font-size: 0.9rem;
  margin-top: 12px;
  display: none;
}

.error-msg.visible { display: block; }

/* ═══════════════════════════════════════
   GAME SCREEN LAYOUT
   ═══════════════════════════════════════ */
.game-layout {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ── HEADER ── */
.game-header {
  background: linear-gradient(180deg, #12192a 0%, #0e1420 100%);
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 2px 24px rgba(212,168,67,0.12);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10;
}

.game-header h2 {
  font-size: 1.15rem;
  flex: 1;
  text-shadow: 0 0 16px rgba(212,168,67,0.4);
}

/* ── TURN BADGE ── */
.turn-badge {
  padding: 5px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.turn-badge.my-turn {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #1a1000;
}

.turn-badge.enemy-turn {
  background: var(--crimson);
  color: var(--text);
  border: 1px solid var(--crimson-light);
}

.turn-badge.combat {
  background: #7a0000;
  color: #ff8888;
  border: 1px solid #cc0000;
  animation: pulse 1s infinite;
}

/* ── GAME BODY ── */
.game-body {
  display: grid;
  grid-template-columns: 210px 1fr 265px;
  overflow: hidden;
}

/* ══════════════════════
   LEFT PANEL — HERO STATS
   ══════════════════════ */
.hero-panel {
  background: linear-gradient(180deg, #141b2a 0%, #111620 100%);
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-stat-card {
  background: linear-gradient(180deg, #181f30 0%, #111620 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-stat-card.active-turn {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212,168,67,0.22), inset 0 0 10px rgba(212,168,67,0.04);
}

.hero-stat-card.dead {
  opacity: 0.4;
  filter: grayscale(0.85);
}

.hero-stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hero-stat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.hero-stat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-stat-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gold);
  line-height: 1.25;
}

.hp-bar-wrap { margin-top: 6px; }

.hp-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.hp-bar {
  height: 10px;
  background: rgba(8,11,16,0.85);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}

.hp-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}

.hp-bar-fill.high {
  background: linear-gradient(90deg, #1a8a40, var(--emerald-light));
  box-shadow: 0 0 6px rgba(46,204,113,0.4);
}

.hp-bar-fill.mid {
  background: linear-gradient(90deg, #c07a10, #f39c12);
  box-shadow: 0 0 6px rgba(243,156,18,0.4);
}

.hp-bar-fill.low {
  background: linear-gradient(90deg, #8b1a1a, var(--crimson-light));
  animation: pulse 1s infinite;
  box-shadow: 0 0 8px rgba(204,51,51,0.5);
}

.hero-zone        { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }
.hero-cards-count { font-size: 0.78rem; color: var(--text-muted); }
.zone-effect      { font-size: 0.72rem; color: var(--gold); margin-top: 2px; opacity: 0.9; }

.debuff-list { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.debuff {
  font-size: 0.72rem;
  background: rgba(155,26,26,0.3);
  border: 1px solid rgba(155,26,26,0.55);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ══════════════════════
   CENTER — BOARD
   ══════════════════════ */
.board-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #020306;
  position: relative;
}

#game-board {
  flex: 1;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #0c1020 0%, #020306 100%);
}

/* SVG Zone styling */
.zone-hex {
  cursor: pointer;
  transition: filter 0.18s;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}
.zone-hex:hover {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.75)) brightness(1.18);
}
.zone-hex:hover .zone-bg {
  /* handled by group filter above */
}
.zone-hex.highlighted .zone-bg {
  stroke: var(--gold);
  stroke-width: 3;
  filter: brightness(1.5) drop-shadow(0 0 8px rgba(201,168,76,0.6));
}
.zone-hex.current-zone .zone-bg {
  stroke: #3dba5e;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(61,186,94,0.7));
}
.zone-hex.enemy-zone .zone-bg { stroke: #e74c3c; stroke-width: 2; }
.zone-hex.target-zone .zone-bg {
  stroke: #e74c3c;
  stroke-width: 3;
  filter: brightness(1.25) drop-shadow(0 0 8px rgba(231,76,60,0.6));
}

.zone-label {
  font-size: 11px;
  fill: rgba(236,223,198,0.95);
  font-family: 'Philosopher', serif;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.zone-type-icon { font-size: 16px; text-anchor: middle; pointer-events: none; }
.zone-hero-icon  { font-size: 20px; text-anchor: middle; }



/* ── ACTION BAR ── */
.action-bar {
  background: linear-gradient(180deg, #0e1420 0%, #080b10 100%);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -2px 22px rgba(212,168,67,0.1);
  padding: 12px 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.action-btn {
  padding: 9px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.2s;
  background: rgba(22,29,42,0.8);
  color: var(--text);
  letter-spacing: 0.3px;
}

/* Move */
#btn-move:hover:not(:disabled) {
  border-color: var(--sapphire-light);
  color: var(--sapphire-light);
  box-shadow: 0 0 14px rgba(74,144,217,0.22);
}

/* Fight */
.action-btn.danger:hover:not(:disabled) {
  border-color: var(--crimson-light);
  color: var(--crimson-light);
  box-shadow: 0 0 14px rgba(204,51,51,0.28);
}

/* End turn */
#btn-end-turn {
  background: linear-gradient(135deg, rgba(212,168,67,0.15), rgba(212,168,67,0.05));
  border-color: var(--gold-dark);
  color: var(--gold);
}

#btn-end-turn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(212,168,67,0.28), rgba(212,168,67,0.12));
  box-shadow: 0 0 14px rgba(212,168,67,0.22);
}

.action-btn.primary {
  background: linear-gradient(135deg, rgba(212,168,67,0.15), rgba(212,168,67,0.05));
  border-color: var(--gold-dark);
  color: var(--gold);
}

.action-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(212,168,67,0.28), rgba(212,168,67,0.12));
  box-shadow: 0 0 14px rgba(212,168,67,0.22);
}

.action-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.actions-left {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: 'Philosopher', serif;
}

/* Попап информации о зоне */
.zone-info-popup {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(12, 15, 26, 0.96);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 32px 10px 14px;
  min-width: 210px;
  max-width: 270px;
  z-index: 50;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.zone-info-title {
  font-weight: bold;
  font-size: 0.92rem;
  color: var(--gold);
  margin-bottom: 6px;
}
.zone-info-effects {
  font-size: 0.82rem;
  color: #e07070;
  margin-bottom: 6px;
  line-height: 1.5;
}
.zone-info-safe {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.zone-info-adj {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.zone-info-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  line-height: 1;
}
.zone-info-close:hover { color: var(--text); }

/* Обратная связь */
.feedback-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}
.feedback-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.feedback-input:focus { border-color: var(--gold); }
.feedback-input::placeholder { color: var(--text-muted); }
.feedback-btn {
  display: none;
  background: var(--gold);
  color: #000;
  border: none;
  padding: 7px 12px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.feedback-btn:hover { opacity: 0.85; }

/* ══════════════════════
   RIGHT PANEL
   ══════════════════════ */
.right-panel {
  background: linear-gradient(180deg, #141b2a 0%, #111620 100%);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: rgba(8,11,16,0.5);
}

.panel-tab {
  flex: 1;
  padding: 9px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
}

.panel-tab.active {
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  background: rgba(212,168,67,0.04);
}

.panel-content { flex: 1; overflow-y: auto; }

/* ── GAME LOG ── */
.game-log {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.log-entry {
  font-size: 0.81rem;
  line-height: 1.55;
  color: var(--text);
  padding: 5px 8px;
  border-radius: 5px;
  animation: fadeIn 0.3s ease;
}

.log-entry:nth-child(odd) { background: rgba(255,255,255,0.025); }

/* ── HAND CARDS ── */
.hand-area { padding: 12px; }

.hand-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

.hand-cards {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.card-in-hand {
  background: linear-gradient(180deg, #181f30 0%, #111620 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 70px;
}

.card-in-hand:hover { transform: translateX(4px); }

.card-in-hand.selected { background: rgba(212,168,67,0.08); }

.card-in-hand.playable-attack  { border-left-color: var(--crimson-light); }
.card-in-hand.playable-defense { border-left-color: var(--emerald-light); }
.card-in-hand.playable-scheme  { border-left-color: var(--sapphire-light); }
.card-in-hand.playable-hybrid  { border-left-color: var(--amethyst-light); }

.card-in-hand.playable-attack:hover {
  border-color: rgba(204,51,51,0.45);
  border-left-color: var(--crimson-light);
  box-shadow: -2px 0 14px rgba(204,51,51,0.22), 0 2px 8px rgba(0,0,0,0.35);
}

.card-in-hand.playable-defense:hover {
  border-color: rgba(46,204,113,0.38);
  border-left-color: var(--emerald-light);
  box-shadow: -2px 0 14px rgba(46,204,113,0.2), 0 2px 8px rgba(0,0,0,0.35);
}

.card-in-hand.playable-scheme:hover {
  border-color: rgba(74,144,217,0.38);
  border-left-color: var(--sapphire-light);
  box-shadow: -2px 0 14px rgba(74,144,217,0.2), 0 2px 8px rgba(0,0,0,0.35);
}

.card-in-hand.playable-hybrid:hover {
  border-color: rgba(155,89,182,0.38);
  border-left-color: var(--amethyst-light);
  box-shadow: -2px 0 14px rgba(155,89,182,0.2), 0 2px 8px rgba(0,0,0,0.35);
}

.card-in-hand.disabled { opacity: 0.38; cursor: not-allowed; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.card-name { font-weight: 700; font-size: 0.88rem; color: var(--text); }

.card-type-badge {
  font-size: 0.67rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.badge-attack  { background: rgba(204,51,51,0.22);  color: #e05050; border: 1px solid rgba(204,51,51,0.35); }
.badge-defense { background: rgba(46,204,113,0.18); color: #2ecc71; border: 1px solid rgba(46,204,113,0.35); }
.badge-hybrid  { background: rgba(155,89,182,0.2);  color: #a67bc2; border: 1px solid rgba(155,89,182,0.35); }
.badge-scheme  { background: rgba(74,144,217,0.18); color: #5a9fd4; border: 1px solid rgba(74,144,217,0.35); }

.card-values     { font-size: 0.8rem;  color: var(--text-muted); margin-bottom: 4px; }
.card-effect-text { font-size: 0.74rem; color: var(--text-muted); font-style: italic; line-height: 1.45; }

/* ══════════════════════
   COMBAT OVERLAY
   ══════════════════════ */
.combat-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(90,0,0,0.35) 0%, rgba(0,0,0,0.93) 70%);
  align-items: center;
  justify-content: center;
  z-index: 100;
  display: none;
  backdrop-filter: blur(3px);
}

.combat-overlay.visible { display: flex; }

.combat-box {
  background: linear-gradient(180deg, #1e0808 0%, var(--bg-card) 45%);
  border: 2px solid var(--crimson);
  border-radius: 18px;
  padding: 32px;
  max-width: 620px;
  width: 92%;
  box-shadow:
    0 0 70px rgba(155,26,26,0.55),
    0 0 130px rgba(155,26,26,0.18),
    inset 0 0 35px rgba(0,0,0,0.55);
  animation: zoomIn 0.3s ease;
  position: relative;
}

.combat-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 24px;
  color: #dd3333;
  font-family: 'Uncial Antiqua', cursive;
  text-shadow:
    0 0 22px rgba(220,50,50,0.65),
    0 0 45px rgba(220,50,50,0.22);
}

.combat-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.combat-player { text-align: center; }

.combat-vs {
  font-size: 2.2rem;
  color: var(--gold);
  font-weight: 700;
  font-family: 'Uncial Antiqua', cursive;
  text-shadow: 0 0 22px rgba(212,168,67,0.55);
  animation: pulse 2s infinite;
}

.combat-player-emoji {
  font-size: 3.2rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  display: block;
  margin-bottom: 6px;
}

.combat-player-name { font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.combat-player-hp   { font-size: 0.88rem; color: var(--text-muted); }

.combat-waiting {
  text-align: center;
  color: var(--text-muted);
  animation: pulse 1.5s infinite;
  margin-bottom: 16px;
  font-style: italic;
}

.combat-card-selection h3 {
  text-align: center;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 1rem;
  font-family: 'Philosopher', serif;
}

.combat-result-box {
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  display: none;
  animation: zoomIn 0.3s ease;
}

.combat-result-box.visible { display: block; }

.combat-damage {
  font-size: 4.2rem;
  font-weight: 700;
  color: var(--crimson-light);
  margin-bottom: 8px;
  text-shadow: 0 0 22px rgba(204,51,51,0.55);
  animation: shake 0.55s ease 0.1s;
  font-family: 'Cinzel Decorative', cursive;
  line-height: 1;
}

.combat-damage.no-damage {
  color: var(--emerald-light);
  text-shadow: 0 0 22px rgba(46,204,113,0.45);
}

/* Combat control buttons */
.combat-min-btn {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  padding: 4px 9px;
  border-radius: 6px;
  line-height: 1;
}

.combat-min-btn:hover { color: var(--text); background: rgba(255,255,255,0.1); }

.combat-reopen-float {
  position: fixed;
  top: 56px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #7a0505, #9b1a1a);
  border: 1px solid #c03030;
  color: var(--text);
  padding: 9px 28px;
  border-radius: 22px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  z-index: 90;
  display: none;
  box-shadow: 0 4px 22px rgba(139,26,26,0.7);
  animation: pulse 1.5s infinite;
  letter-spacing: 0.3px;
}

.combat-reopen-float.visible { display: block; }

.combat-no-cards-msg {
  background: rgba(155,26,26,0.15);
  border: 1px solid rgba(155,26,26,0.4);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  text-align: center;
  font-size: 0.88rem;
  color: #e05050;
  line-height: 1.5;
}

/* ══════════════════════
   CHAT
   ══════════════════════ */
.chat-area { display: flex; flex-direction: column; height: 100%; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-msg      { font-size: 0.82rem; line-height: 1.5; }
.chat-msg-name { font-weight: 700; color: var(--gold); }
.chat-msg-time { font-size: 0.72rem; color: var(--text-muted); }

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

.chat-input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(8,11,16,0.8);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  transition: border-color 0.2s;
}

.chat-input:focus { outline: none; border-color: var(--gold); }

.chat-send {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #1a1000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s;
}

.chat-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(212,168,67,0.3);
}

/* ══════════════════════
   VICTORY OVERLAY
   ══════════════════════ */
.victory-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(80,55,0,0.42) 0%, rgba(0,0,0,0.93) 70%);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  z-index: 200;
  display: none;
}

.victory-overlay.visible { display: flex; }

.victory-box {
  text-align: center;
  background: linear-gradient(180deg, #1a1500 0%, var(--bg-card) 55%);
  border: 2px solid var(--gold);
  border-radius: 22px;
  padding: 52px 50px;
  box-shadow:
    0 0 90px rgba(212,168,67,0.32),
    0 0 160px rgba(212,168,67,0.12),
    inset 0 0 45px rgba(0,0,0,0.55);
  animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.victory-emoji {
  font-size: 6rem;
  display: block;
  margin-bottom: 22px;
  filter: drop-shadow(0 4px 22px rgba(212,168,67,0.5));
}

.victory-title    { font-size: 2.8rem; margin-bottom: 8px; }
.victory-subtitle {
  color: var(--text-muted);
  margin-bottom: 36px;
  font-family: 'Philosopher', serif;
  font-size: 1.05rem;
}

/* ══════════════════════
   MODALS & RULES
   ══════════════════════ */
.rules-btn {
  display: block;
  margin: 0 auto 24px;
  background: transparent;
  border: 1px solid rgba(212,168,67,0.3);
  color: var(--text-muted);
  padding: 7px 24px;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.rules-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212,168,67,0.06);
}

.lobby-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}

.lobby-modal-overlay.visible { display: flex; }

.lobby-modal-box {
  background: linear-gradient(180deg, #141a26 0%, var(--bg-card) 100%);
  border: 1px solid var(--gold-dark);
  border-radius: 16px;
  padding: 28px 28px 24px;
  max-width: 560px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow:
    0 22px 65px rgba(0,0,0,0.85),
    0 0 0 1px rgba(212,168,67,0.12);
  animation: zoomIn 0.25s ease;
}

.lobby-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  padding: 2px;
  font-family: 'Raleway', sans-serif;
}

.lobby-modal-close:hover { color: var(--text); }

/* ── RULES CONTENT ── */
.rules-section { margin-bottom: 20px; }

.rules-section h3 {
  color: var(--gold);
  font-size: 0.92rem;
  margin-bottom: 8px;
  font-family: 'Philosopher', serif;
  font-weight: 700;
  text-shadow: none;
  letter-spacing: 0.3px;
}

.rules-section p, .rules-section li {
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.7;
}

.rules-section ul { list-style: none; padding: 0; }

.rules-section li {
  padding: 2px 0 2px 16px;
  position: relative;
}

.rules-section li::before {
  content: '▸';
  color: var(--gold);
  position: absolute;
  left: 0;
  opacity: 0.8;
}

.rules-card-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── HERO DETAIL ── */
.hero-card { position: relative; }

.hero-info-btn {
  position: absolute;
  top: 6px; right: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  cursor: pointer;
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
  font-style: italic;
}

.hero-info-btn:hover { border-color: var(--gold); color: var(--gold); }

.hero-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.hero-detail-portrait {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.hero-detail-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-detail-meta h2 { font-size: 1.2rem; margin-bottom: 4px; }
.hero-detail-meta span { color: var(--text-muted); font-size: 0.9rem; }

.hero-detail-desc {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
  font-family: 'Philosopher', serif;
}

.hero-detail-ability {
  background: rgba(212,168,67,0.08);
  border: 1px solid rgba(212,168,67,0.25);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.hero-detail-ability strong {
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.hero-detail-ability span { font-size: 0.86rem; color: var(--text); line-height: 1.6; }

.hero-detail-cards-title {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}

.hero-detail-cards-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
}

.hero-detail-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(8,11,16,0.5);
  border-radius: 6px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  transition: background 0.15s;
}

.hero-detail-card-row:hover { background: rgba(212,168,67,0.05); }

.hero-detail-card-name  { flex: 1; }
.hero-detail-card-stats { color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; }
.hero-detail-card-effect { color: var(--text-muted); font-size: 0.74rem; font-style: italic; }
.hero-detail-qty        { color: var(--text-muted); font-size: 0.72rem; }

/* ══════════════════════
   ANIMATIONS
   ══════════════════════ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.62; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* ══════════════════════
   SCROLLBAR
   ══════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(212,168,67,0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,67,0.6); }

/* ══════════════════════
   RESPONSIVE — MOBILE
   ══════════════════════ */
@media (max-width: 768px) {
  .game-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .hero-panel {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 120px;
    padding: 8px;
  }

  .right-panel { display: none; }

  .game-header { padding: 8px 12px; }

  .action-bar { padding: 10px 12px; gap: 8px; }
  .action-btn { padding: 7px 14px; font-size: 0.82rem; }
  .feedback-wrap { order: 1; flex-basis: 100%; }
}

/* ══════════════════════
   CHAT BADGE
   ══════════════════════ */
.chat-badge {
  display: inline-block;
  background: var(--crimson-light);
  color: #fff;
  border-radius: 50%;
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
  margin-left: 5px;
  vertical-align: middle;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  box-shadow: 0 0 6px rgba(204,51,51,0.55);
  animation: pulse 1.4s infinite;
}
.chat-badge:empty { display: none; }

/* ══════════════════════
   COMPANION DISPLAY
   ══════════════════════ */
.companion-row {
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--gold);
}
.companion-name {
  font-family: 'Philosopher', serif;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.companion-inactive {
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ══════════════════════
   MODAL OVERLAY (start-card, etc.)
   ══════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(5px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: linear-gradient(180deg, #141a26 0%, var(--bg-card) 100%);
  border: 1px solid var(--gold-dark);
  border-radius: 16px;
  padding: 28px 32px 24px;
  max-width: 560px;
  width: 92%;
  text-align: center;
  box-shadow:
    0 22px 65px rgba(0,0,0,0.85),
    0 0 0 1px rgba(212,168,67,0.12);
  animation: zoomIn 0.25s ease;
}

/* ============================================================
   COMPANION SYSTEM STYLES
   ============================================================ */

/* Выбор актора (Герой / Компаньон) */
.actor-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px 2px;
  min-height: 0;
}

.actor-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.actor-btn:hover {
  border-color: var(--text-muted);
}

.actor-btn.active {
  border-color: var(--gold);
  background: rgba(212,168,67,0.12);
  color: var(--gold);
}

/* Кнопки действий компаньона */
.companion-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.companion-actions .btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 0.78rem;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  transition: all 0.15s;
}

.companion-actions .btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.companion-actions .btn.primary {
  border-color: var(--gold);
  background: rgba(212,168,67,0.12);
  color: var(--gold);
}

.companion-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* HP компаньонов в панели героя */
.companion-list {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.companion-hp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-muted);
  gap: 6px;
}

.companion-hp-mini {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 80px;
}

/* Зональный эффект */
.zone-effect {
  font-size: 0.72rem;
  color: var(--gold);
  margin-top: 2px;
  opacity: 0.85;
}

body:has(.game-layout){display:flex;flex-direction:column;height:100dvh;overflow:hidden}body:has(.game-layout) .game-layout{flex:1;min-height:0;height:auto}#rooms-panel{flex-shrink:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px}#rooms-panel button,dialog button{padding:7px 10px;cursor:pointer}dialog::backdrop{background:#000b}dialog select,dialog input{max-width:100%;padding:8px}.feedback-wrap{flex-wrap:wrap}#zone-info-popup{max-height:70vh;overflow:auto}
dialog{margin:auto;padding:24px}dialog h2{margin-bottom:12px}dialog p{margin:12px 0}dialog button{margin-top:12px}
.lobby-workspace{display:grid;grid-template-columns:minmax(280px,520px) minmax(300px,520px);gap:24px;width:min(1100px,100%);align-items:start}.lobby-entry{min-width:0}.lobby-entry .lobby-card{width:100%;max-width:none}.active-rooms{position:relative;z-index:1;min-width:0;padding:24px;background:#161e2c;border:1px solid var(--border);border-radius:16px;color:var(--text);line-height:1.6}.active-rooms h2{margin-bottom:12px}.active-rooms>.btn{margin-bottom:16px}.active-rooms button{padding:8px 12px;border-radius:6px;cursor:pointer}.lobby:has(.lobby-workspace){min-height:auto;padding-top:32px;justify-content:flex-start}@media(max-width:760px){.lobby-workspace{grid-template-columns:1fr}.active-rooms{padding:18px}}

/* 2.3: pointer-positioned figure cards and compact lobby */
#figure-hover-tooltip{position:fixed;z-index:850;pointer-events:none;width:270px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:hidden;padding:8px;background:#101726f5;border:1px solid var(--gold);border-radius:12px;box-shadow:0 8px 30px #000a}#figure-hover-tooltip .hero-stat-card{margin:0;width:100%}#figure-hover-tooltip p{margin:7px 0;font-size:13px}#zone-info-popup{z-index:850;max-width:min(300px,calc(100vw - 16px));max-height:calc(100dvh - 16px)}
body.lobby-page{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}.lobby-page .lobby{flex:1;min-height:0!important;height:auto;width:100%;padding:14px 20px!important;gap:8px;overflow:hidden;justify-content:flex-start!important}.lobby-page .lobby-title{font-size:clamp(24px,3.4vw,44px);line-height:1.15;margin:0}.lobby-page .lobby-subtitle{margin:0;font-size:14px}.lobby-page .lobby-ornament{display:none}.lobby-page .rules-btn{margin:0;padding:6px 14px;font-size:13px}.lobby-page .lobby-workspace{flex:1;min-height:0;align-items:stretch;gap:16px;grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr)}.lobby-page .active-rooms{min-height:0;overflow:auto;padding:16px}.lobby-page .active-rooms h2{font-size:21px}.lobby-page .active-rooms>.btn{padding:8px;margin:0 0 10px}.lobby-page .lobby-entry{display:flex;min-height:0;flex-direction:column}.lobby-page .lobby-card{padding:18px;max-height:100%;min-height:0}.lobby-page .lobby-tabs{margin-bottom:14px}.lobby-page .lobby-tab{padding:10px;font-size:14px}.lobby-page .input-group{margin-bottom:12px}.lobby-page .input-group input{padding:10px;font-size:15px}.lobby-page .btn{padding:11px;font-size:14px}.lobby-page #step-lobby{overflow:auto}.lobby-page .hero-select-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;gap:8px}.lobby-page .hero-portrait{height:70px}.lobby-page .hero-card-name{font-size:12px;padding:5px}.lobby-page .hero-card-hp{font-size:11px;padding-bottom:5px}.lobby-page #rejoin-banner{padding:8px!important;margin:0!important}.lobby-page #rooms-panel{padding:6px 12px!important;font-size:12px}
@media(max-width:700px){.lobby-page .lobby{padding:8px!important;gap:6px}.lobby-page .lobby-subtitle{display:none}.lobby-page .lobby-workspace{grid-template-columns:1fr;grid-template-rows:minmax(100px,.65fr) minmax(230px,1fr);gap:8px}.lobby-page .lobby-card{padding:12px}.lobby-page .active-rooms{padding:10px}.lobby-page .active-rooms h2{font-size:18px;margin-bottom:5px}.lobby-page #rooms-panel{gap:5px}.lobby-page .rules-btn{padding:4px 10px}.lobby-page .hero-portrait{height:52px}}@media(max-height:650px) and (min-width:701px){.lobby-page .lobby-subtitle{display:none}.lobby-page .lobby-title{font-size:28px}.lobby-page .lobby{gap:6px;padding:8px 16px!important}.lobby-page .lobby-card{padding:12px}.lobby-page .lobby-tabs{margin-bottom:8px}}
.mobile-game-nav,.mobile-map-tools{display:none}.lobby-page .lobby-entry{overflow:auto}
@media(max-width:950px){
 body:has(.game-layout) .game-layout{grid-template-rows:auto minmax(0,1fr) auto}.game-body{display:block;min-height:0}.game-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:6px 8px}.game-header h2{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-header>div:last-child{grid-column:1/-1;justify-content:space-between;gap:6px!important}.game-header .turn-badge{font-size:11px;padding:5px 8px}.game-header button{min-height:34px}.mobile-game-nav{display:flex;gap:3px;padding:5px 4px max(5px,env(safe-area-inset-bottom));border-top:1px solid var(--gold-dark);background:#131b2c}.mobile-game-nav button{flex:1;min-width:0;min-height:44px;border:1px solid var(--border);border-radius:8px;background:#1c273a;color:var(--text);font-size:12px;cursor:pointer}.mobile-game-nav button[aria-pressed=true]{border-color:var(--gold);color:var(--gold);background:#322a18}
 .game-body>.hero-panel,.game-body>.board-area,.game-body>.right-panel{display:none!important;height:100%;min-height:0;max-height:none;width:100%}body[data-mobile-panel=board] .game-body>.board-area{display:flex!important}body[data-mobile-panel=heroes] .game-body>.hero-panel{display:flex!important;flex-direction:column;overflow:auto;padding:10px}body:is([data-mobile-panel=hand],[data-mobile-panel=log],[data-mobile-panel=chat]) .game-body>.right-panel{display:flex!important;border-left:0}.right-panel>.panel-tabs{display:none}.right-panel .panel-content{min-height:0;overflow:auto}.board-area{position:relative;overflow:hidden}.mobile-map-tools{display:flex;position:absolute;top:6px;right:6px;z-index:20;gap:4px}.mobile-map-tools button{min-height:36px;min-width:38px;background:#172236e8;border:1px solid var(--gold-dark);color:var(--gold);border-radius:7px;padding:4px 8px}#game-board{touch-action:none;min-height:80px}.actor-selector{flex-wrap:nowrap!important;overflow-x:auto;flex-shrink:0;padding:5px;gap:5px}.actor-btn{white-space:nowrap;min-height:38px}.action-bar{flex-shrink:0;display:flex;flex-wrap:wrap;padding:6px;gap:5px}.action-bar>.action-btn{flex:1;min-width:90px;min-height:44px;padding:6px;font-size:12px}.feedback-wrap{order:1;flex-basis:auto;min-width:0}.feedback-wrap #quick-feedback-category,.feedback-wrap #feedback-input,.feedback-wrap #feedback-btn{display:none!important}.feedback-wrap>.action-btn{min-height:36px;padding:5px 9px}.actions-left{font-size:12px;margin-left:auto}.hand-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card-in-hand{min-width:0;width:auto}.combat-box{width:calc(100vw - 16px);max-height:calc(100dvh - 24px);overflow:auto;padding:16px}.combat-hand-cards{flex-wrap:wrap}.combat-players{gap:8px}.combat-player{min-width:0}.combat-player-name{font-size:14px}#start-card-overlay .start-card-box{max-width:calc(100vw - 16px);max-height:calc(100dvh - 24px);overflow:auto}#effect-modal>div{max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto}#discard-picker,#target-picker{inset:8px!important;overflow:auto}#feedback-dialog{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}.chat-input{font-size:16px}.chat-send{min-height:44px;min-width:44px}dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto}#rooms-panel{padding:5px 8px!important;font-size:11px;gap:5px}#rooms-panel button{padding:6px;font-size:11px;min-height:34px}
}
@media(max-width:700px) and (max-height:620px){.lobby-page .lobby-workspace{grid-template-rows:minmax(65px,.4fr) minmax(0,1fr)}.lobby-page .lobby-title{font-size:22px}.lobby-page .lobby-entry{overflow:auto}.lobby-page .lobby-card{max-height:none}.lobby-page .rules-btn{padding:3px 9px}.lobby-page .input-group{margin-bottom:7px}}
@media(max-width:480px){body:has(#guest-panel) main{margin:12px auto!important;width:calc(100% - 20px);padding:18px!important}body:has(#guest-panel) main h1{font-size:23px;margin-bottom:15px}body:has(#guest-panel) main input,body:has(#guest-panel) main button{font-size:16px;min-height:44px}}
.account-menu{position:relative;margin-left:auto;flex-shrink:0}.account-menu summary{cursor:pointer;padding:8px 12px;color:var(--gold);border:1px solid var(--border);border-radius:7px;min-height:34px}.account-menu>div{position:absolute;top:calc(100% + 5px);right:0;display:flex;flex-direction:column;gap:7px;min-width:190px;padding:12px;background:#172135;border:1px solid var(--gold-dark);border-radius:10px;box-shadow:0 7px 25px #0009}#rooms-panel a{color:var(--gold);padding:7px}#rooms-panel button{background:#1b283e;color:var(--text);border:1px solid var(--border);border-radius:6px}.lobby-page #rejoin-banner>div{margin-bottom:4px!important;font-size:12px!important}.lobby-page #rejoin-banner .btn{width:auto;flex:1;white-space:nowrap;padding:7px!important;font-size:12px!important;margin:0!important}.lobby-page #rejoin-banner{flex-shrink:0}.lobby-page #rejoin-banner>div:last-child{flex-wrap:nowrap!important;gap:6px!important}
@media(max-width:950px){.action-bar>.action-btn{flex:1 1 calc((100% - 10px)/3);min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center}.action-bar .actions-left{order:2;flex:1;text-align:right}.account-menu summary{font-size:12px;padding:6px 8px}}
@media(max-width:700px) and (max-height:650px){.lobby-page .lobby-title{font-size:18px}.lobby-page #rejoin-banner>div:not(:last-child){display:none}.lobby-page #rejoin-banner{padding:6px!important}.lobby-page .lobby-workspace{grid-template-rows:minmax(100px,.5fr) minmax(0,1fr)}.lobby-page .lobby-card{padding:8px}.lobby-page .input-group input{padding:8px;font-size:16px}.lobby-page .input-group label{font-size:11px}.lobby-page .lobby-tabs{margin-bottom:8px}.lobby-page .btn{padding:9px}.lobby-page .input-group{margin-bottom:7px}}
@media(max-width:700px){.lobby-page #room-code-input{font-size:16px!important}}
@media(min-width:701px) and (max-height:480px){.lobby-page .lobby{gap:5px;padding:6px 12px!important}.lobby-page .lobby-title{font-size:20px;padding-right:80px}.lobby-page .rules-btn{position:absolute;right:12px;top:6px}.lobby-page #rejoin-banner>div:not(:last-child){display:none}.lobby-page #rejoin-banner{padding:4px!important}.lobby-page .lobby-card{padding:10px}.lobby-page .lobby-tabs{margin-bottom:7px}.lobby-page .input-group{margin-bottom:6px}.lobby-page .input-group label{font-size:11px}.lobby-page .input-group input{padding:7px;font-size:14px}.lobby-page .btn{padding:8px}.lobby-page .lobby-tab{padding:8px}}