/* 07-theme.css: Warhams RPG theme, loaded after base styles.
   Wine panels, green stone frames, copper cards, and cream information areas.
   Arcana is reserved for titles; Pixeloid Sans uses 18 px for crisp text and controls.
   Master layout settings in public/assets/data/ui-theme.json override these defaults via --z-* and --t-*.
   Stage, queue-mode, and game-screen editor settings retain their own overrides. */

/* ===================================================================
   1. PALETTE
   =================================================================== */
:root {
  --z-copper-dark: #79515b;
  --z-copper: #a87564;
  --z-stone-light: #afbbb0;
  --z-stone-green: #7d9087;
  --z-wine-dark: #392b35;
  --z-wine: #533b46;
  --z-outline: #263336;          /* Shared outline. */
  --z-shadow: #182327;           /* Pixel shadow. */
  --z-wood-dark: #392b35;
  --z-wood: #79515b;
  --z-wood-light: #a87564;
  --z-gold-dark: #a77952;
  --z-gold: #e3b77a;
  --z-gold-light: #ffe0a0;
  --z-parchment-dark: #cbaa8f;
  --z-parchment: #f2dfbf;
  --z-parchment-light: #fff0d6;
  --z-ink: #35272c;              /* Parchment text. */
  --z-ink-soft: #72574e;         /* Secondary text. */
  --z-green-dark: #38483f;
  --z-green: #557b48;
  --z-green-light: #93af6d;
  --z-red-dark: #6f3541;
  --z-red: #a3504c;
  --z-red-light: #df9181;
  --z-night: #302831;            /* HUD over the world. */
  --z-night-2: #3d343c;
  --z-light-text: #f2dfbf;       /* Text over wood and HUD. */
  --t-panel-muted: color-mix(in srgb, var(--t-panel-text) 78%, var(--t-panel-bg));
  --t-card-muted: color-mix(in srgb, var(--t-card-text) 80%, var(--t-card-bg));
  --z-font-title: var(--ui-title-font);
  --z-font-text: var(--ui-game-font);
  /* Default frame: green stone with a light inset and pixel shadow. */
  --z-frame: inset 0 0 0 3px var(--z-stone-green), inset 0 0 0 5px var(--z-stone-light);
  --z-drop: 5px 5px 0 var(--z-shadow);
  /* Raised buttons: highlight above, shadow below. */
  --z-bevel: inset 0 2px 0 #ffffff33, inset 0 -3px 0 #00000059;
  /* Master layout defaults match public/js/ui-theme.js. Buttons: neutral, confirm, danger, and highlight. */
  --t-btn-neutral-bg: var(--z-copper-dark);
  --t-btn-neutral-color: var(--z-light-text);
  --t-btn-neutral-border: 2px solid var(--z-outline);
  --t-btn-neutral-shadow: var(--z-bevel), 0 3px 0 var(--z-shadow);
  --t-btn-neutral-text-shadow: 1px 1px 0 #00000080;
  --t-btn-neutral-padding: 9px 14px;
  --t-btn-neutral-size: 18px;
  --t-btn-confirm-bg: var(--z-green);
  --t-btn-confirm-color: var(--z-light-text);
  --t-btn-confirm-border: var(--t-btn-neutral-border);
  --t-btn-confirm-shadow: var(--t-btn-neutral-shadow);
  --t-btn-confirm-text-shadow: var(--t-btn-neutral-text-shadow);
  --t-btn-confirm-padding: var(--t-btn-neutral-padding);
  --t-btn-confirm-size: var(--t-btn-neutral-size);
  --t-btn-danger-bg: var(--z-red);
  --t-btn-danger-color: var(--z-light-text);
  --t-btn-danger-border: var(--t-btn-neutral-border);
  --t-btn-danger-shadow: var(--t-btn-neutral-shadow);
  --t-btn-danger-text-shadow: var(--t-btn-neutral-text-shadow);
  --t-btn-danger-padding: var(--t-btn-neutral-padding);
  --t-btn-danger-size: var(--t-btn-neutral-size);
  --t-btn-highlight-bg: var(--z-gold);
  --t-btn-highlight-color: var(--z-ink);
  --t-btn-highlight-border: var(--t-btn-neutral-border);
  --t-btn-highlight-shadow: var(--t-btn-neutral-shadow);
  --t-btn-highlight-text-shadow: none;
  --t-btn-highlight-padding: 6px 10px;
  --t-btn-highlight-size: 18px;
  /* Panels, windows, cards, tabs, fields, and world overlays. */
  --t-panel-bg: var(--z-wine);
  --t-panel-text: var(--z-light-text);
  --t-panel-border: 4px solid var(--z-outline);
  --t-panel-header-bg: var(--z-wine-dark);
  --t-panel-header-color: var(--z-light-text);
  --t-panel-header-line: var(--z-stone-green);
  --t-card-bg: var(--z-copper-dark);
  --t-card-text: var(--z-light-text);
  --t-card-border: var(--z-outline);
  --t-card-shadow: var(--z-wine-dark);
  --t-card-hover-border: var(--z-copper);
  --t-card-selected-border: var(--z-stone-light);
  --t-card-selected-shadow: var(--z-green-dark);
  --t-tabs-bar: var(--z-wine-dark);
  --t-tab-bg: var(--z-copper-dark);
  --t-tab-color: var(--z-light-text);
  --t-tab-active-bg: var(--z-green-dark);
  --t-tab-active-color: var(--z-light-text);
  --t-field-bg: var(--z-parchment-light);
  --t-field-color: var(--z-ink);
  --t-field-border: 2px solid var(--z-outline);
  --t-hud-bg: color-mix(in srgb, var(--z-wine-dark) 92%, transparent);
  --t-hud-color: var(--z-light-text);
  --t-hud-line: var(--z-stone-green);

  /* Existing variables inherit the shared palette. */
  --ink: var(--z-ink);
  --paper: var(--z-parchment);
  --orange: var(--z-gold);
  --mint: var(--z-green-light);
  --line: var(--z-outline);
  --muted: var(--t-panel-muted);
  --ui-page-background: #141d16;
  --ui-page-grid-color: #1d2a1f;
  --ui-error-color: var(--z-red-light);
  --ui-panel-background: var(--t-panel-bg);
  --ui-panel-shadow: var(--z-drop);
  --ui-field-background: var(--t-field-bg);
  --ui-field-border: var(--t-field-border);
  --ui-button-border: var(--t-btn-neutral-border);
  --ui-primary-background: var(--t-btn-confirm-bg);
  --ui-primary-shadow: 0 3px 0 var(--z-shadow);
  --ui-secondary-background: var(--t-btn-neutral-bg);
  --ui-leave-color: var(--t-btn-danger-bg);
  --ui-small-background: var(--t-btn-highlight-bg);
  --ui-wallet-background: var(--z-night-2);
  --ui-shop-tabs-background: var(--t-tabs-bar);
  --ui-shop-active-tab-background: var(--t-tab-active-bg);
  --ui-shop-card-background: var(--t-card-bg);
  --ui-type-card-background: var(--t-card-bg);
  --ui-card-background: var(--t-card-bg);
  --ui-card-border-color: var(--t-card-border);
  --ui-notice-background: var(--t-card-bg);
  --ui-edge-color: var(--z-outline);
  --ui-list-divider: var(--z-stone-green);
  --ui-room-browser-divider: var(--z-stone-green);
  --ui-menu-background: var(--t-panel-bg);
  --ui-menu-border: var(--t-panel-border);
  --ui-menu-shadow: var(--z-drop);
  --ui-menu-tabs-background: var(--t-panel-header-bg);
  --ui-panel-help-color: var(--t-panel-muted);
  --ui-dock-background: var(--t-hud-bg);
  --ui-dock-button-background: var(--z-wood-dark);
  --ui-dock-button-hover: var(--z-wood);
  --ui-dock-button-color: var(--z-light-text);
  --ui-dock-active-background: var(--t-tab-active-bg);
  --ui-dialog-backdrop: color-mix(in srgb, var(--z-shadow) 75%, transparent);
  --ui-dialog-message-color: var(--t-panel-text);
  --ui-dialog-confirm-background: var(--t-btn-confirm-bg);
  --ui-dialog-danger-background: var(--t-btn-danger-bg);
  --ui-dialog-cancel-background: var(--t-btn-neutral-bg);
  --ui-chat-background: var(--t-hud-bg);
  --ui-chat-border: 2px solid var(--z-outline);
  --ui-chat-message-size: 18px;
  --ui-chat-notice-size: 18px;
  --ui-chat-text-color: var(--z-light-text);
  --ui-chat-title-color: var(--t-hud-color);
  --ui-chat-name-color: var(--z-gold-light);
  --ui-chat-own-name-color: var(--z-green-light);
  --ui-chat-system-color: color-mix(in srgb, var(--t-hud-color) 80%, var(--z-wine-dark));
  --ui-chat-kill-color: var(--z-red-light);
  --ui-ping-background: var(--t-hud-bg);
  --ui-ping-color: var(--t-hud-color);
  --ui-ping-border: 2px solid var(--z-outline);
  --ui-elimination-background: var(--t-hud-bg);
  --ui-elimination-color: var(--t-hud-color);
  --ui-lobby-background: var(--t-panel-bg);
  --ui-lobby-border: 3px solid var(--z-outline);
  --ui-lobby-shadow: 4px 4px 0 var(--z-shadow);
  --ui-sidebar-card-background: var(--t-panel-bg);
  --ui-sidebar-card-border: 3px solid var(--z-outline);
  --ui-ability-slot-background: var(--z-copper-dark);
  --ui-ability-slot-color: var(--z-light-text);
  --ui-ability-slot-border: 3px solid var(--z-outline);
  --ui-ability-selected-background: var(--z-green-dark);
  --ui-ability-selected-border: var(--z-stone-light);
  --ui-winner-background: color-mix(in srgb, var(--z-night) 90%, transparent);
  --ui-winner-color: var(--z-light-text);
  --ui-podium-card-background: var(--t-hud-bg);
  --ui-podium-card-border: 2px solid var(--z-wood-light);
  --ui-podium-first-border: var(--z-gold);
  --ui-mobile-controls-background: var(--z-night-2);
  --ui-mobile-chat-background: var(--t-panel-bg);
  --ui-mobile-chat-color: var(--t-panel-text);
  --ui-mobile-chat-system-color: var(--t-panel-muted);
  --ui-mobile-chat-name-color: var(--z-gold-light);
  --ui-mobile-chat-own-name-color: var(--z-green-light);
  --ui-mobile-chat-kill-color: var(--z-red-light);
  --ui-joystick-background: var(--t-hud-bg);
  --ui-aim-joystick-background: color-mix(in srgb, var(--z-red-dark) 80%, transparent);
  --ui-mobile-joystick-knob-background: var(--z-parchment);
  --ui-mobile-aim-knob-background: var(--z-gold);
  --ui-admin-bar-background: var(--z-parchment-light);
  --player-speech-color: var(--z-ink);
  --player-speech-border-color: var(--z-outline);
}

/* ===================================================================
   2. TYPOGRAPHY: ARCANA TITLES, PIXELOID BODY TEXT
   =================================================================== */
/* Use the actual Pixeloid Sans Bold face. Disable synthetic bold on Arcana to avoid blurred pixels. */
* { font-synthesis: none; }
body { color: var(--t-panel-text); font-family: var(--z-font-text); }
button, label, th { font-weight: normal; }
b, strong { font-weight: bold; }
h1, h2, h3, h4, h5, .brand, legend,
.float-panel-header h2, .confirm-dialog-header h2, .section-title b, .ready-check-card h2 {
  font-family: var(--z-font-title);
  font-weight: normal;
  letter-spacing: .02em;
}
.brand { color: var(--z-gold-light); text-shadow: 3px 3px 0 var(--z-shadow); }
.brand span { font-family: var(--z-font-text); color: var(--z-green-light); text-shadow: none; }
h1 { color: var(--t-panel-text); text-shadow: 2px 2px 0 var(--z-shadow); }
/* Eyebrow text, such as WARHAMS ACCOUNT, uses small gold lettering. */
.eyebrow { font-family: var(--z-font-text); color: var(--z-gold-light); font-size: 18px; letter-spacing: .12em; }
.muted, .panel-help, .menu-content :is(.panel-help, .muted, .shop-section-help, .shop-item p) {
  color: var(--t-panel-muted);
  font-family: var(--z-font-text);
}
a { color: var(--z-gold-light); }

/* ===================================================================
   3. SHARED BUTTON STYLE
   =================================================================== */
button {
  font-family: var(--z-font-text);
  letter-spacing: .02em;
  border-color: var(--z-outline);
  box-shadow: 0 3px 0 var(--z-shadow);
}
/* Action buttons: copper (neutral), green (confirm), red (danger), and gold (highlight). */
:is(button:not([class]), button.primary, button.secondary, button.leave, button.danger, button.small, .tournament-signup button, .fixed-team-form > button, .social-row button),
.menu-content :is(button:not([class]), button.primary, button.secondary, button.leave, button.danger, button.small) {
  padding: var(--t-btn-neutral-padding);
  border: var(--t-btn-neutral-border);
  background: var(--t-btn-neutral-bg);
  color: var(--t-btn-neutral-color);
  box-shadow: var(--t-btn-neutral-shadow);
  text-shadow: var(--t-btn-neutral-text-shadow);
  font-size: var(--t-btn-neutral-size);
}
/* Inside panels the neutral rule weighs (0,2,1) (button:not([class])): the variants match it with a type selector and come after it. */
:is(button.primary, .menu-content button.primary) {
  padding: var(--t-btn-confirm-padding); border: var(--t-btn-confirm-border); background: var(--t-btn-confirm-bg); color: var(--t-btn-confirm-color);
  box-shadow: var(--t-btn-confirm-shadow); text-shadow: var(--t-btn-confirm-text-shadow); font-size: var(--t-btn-confirm-size);
}
:is(button.leave, button.danger, .menu-content button:is(.leave, .danger)) {
  padding: var(--t-btn-danger-padding); border: var(--t-btn-danger-border); background: var(--t-btn-danger-bg); color: var(--t-btn-danger-color);
  box-shadow: var(--t-btn-danger-shadow); text-shadow: var(--t-btn-danger-text-shadow); font-size: var(--t-btn-danger-size);
}
:is(button.small, .menu-content button.small) {
  padding: var(--t-btn-highlight-padding); border: var(--t-btn-highlight-border); background: var(--t-btn-highlight-bg); color: var(--t-btn-highlight-color);
  box-shadow: var(--t-btn-highlight-shadow); text-shadow: var(--t-btn-highlight-text-shadow); font-size: var(--t-btn-highlight-size);
}
button:not(:disabled):hover, .menu-content button:not(:disabled):hover { filter: brightness(1.12); translate: 0 -1px; }
button:not(:disabled):active, .menu-content button:not(:disabled):active { translate: 0 2px; box-shadow: inset 0 2px 0 #00000040, 0 1px 0 var(--z-shadow); }
button:disabled { opacity: .55; filter: saturate(.5); box-shadow: none; }
:is(button, input, select, textarea, [tabindex]):focus-visible,
.menu-content button:focus-visible { outline: 2px solid var(--z-gold-light); outline-offset: 2px; box-shadow: 0 0 0 4px var(--z-outline); }
/* Ordinary links and third-party branded buttons retain their appearance. */
.link-button, .player-list-name.player-social-trigger { box-shadow: none; text-shadow: none; }
.link-button { color: var(--z-gold-light); }

/* ===================================================================
   4. FIELDS
   =================================================================== */
input, select, textarea,
.menu-content :is(input, select) {
  border: var(--t-field-border);
  background: var(--t-field-bg);
  color: var(--t-field-color);
  font-family: var(--z-font-text);
  font-size: 18px;
  box-shadow: inset 0 2px 0 var(--z-parchment-dark);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--t-field-color) 70%, var(--t-field-bg)); opacity: 1; }
input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]) { box-shadow: none; accent-color: var(--z-green); }
select option { background: var(--t-field-bg); color: var(--t-field-color); }

/* ===================================================================
   5. PANELS AND WINDOWS
   =================================================================== */
body {
  background-color: var(--ui-page-background);
  background-image: linear-gradient(#22322580 1px, transparent 1px), linear-gradient(90deg, #22322580 1px, transparent 1px);
}
body::before { background: radial-gradient(ellipse at top, #2c4a2a66, transparent 60%); }
/* Gameplay margins use the existing world colour, without the page's decorative grid. */
body:has(#gameScreen:not([hidden])) { background-color: var(--ui-world-background); background-image: none; }
body:has(#gameScreen:not([hidden]))::before { background: none; }
header {
  border: 3px solid var(--z-outline);
  background: var(--t-panel-header-bg);
  box-shadow: var(--z-frame), var(--z-drop);
}
.panel, .menu-content .panel { color: var(--t-panel-text); }
.panel {
  border: var(--t-panel-border);
  background: var(--t-panel-bg);
  box-shadow: var(--z-frame), var(--z-drop);
}
.panel::before { inset: 8px; border-color: var(--z-stone-green); }
.menu-content .panel { box-shadow: none; }
.menu-overlay {
  border: var(--t-panel-border);
  background: var(--t-panel-bg);
  color: var(--t-panel-text);
  box-shadow: var(--z-frame), var(--z-drop);
}
.float-panel-header, .confirm-dialog-header {
  border-bottom: 3px solid var(--t-panel-header-line);
  background: var(--t-panel-header-bg);
  color: var(--t-panel-header-color);
  box-shadow: inset 0 2px 0 var(--z-wood-light), inset 0 -2px 0 var(--z-wood-dark);
}
.float-panel-header h2, .confirm-dialog-header h2 { font-size: 20px; color: var(--t-panel-header-color); text-shadow: 2px 2px 0 var(--z-shadow); }
.float-panel-close {
  width: 30px;
  height: 30px;
  border: 2px solid var(--z-outline);
  background: var(--z-stone-green);
  color: var(--z-outline);
  box-shadow: var(--z-bevel);
  font-size: 18px;
}
.float-panel-close:hover { background: var(--z-red); }
.menu-content { scrollbar-color: var(--z-copper) var(--t-panel-header-bg); }
/* Sign out is a danger action: red with light text. */
.menu-content #settingsActions #signOut { background: var(--z-red); color: #fff; }
.menu-content #settingsActions .account-badge { border: 2px solid var(--z-outline); background: var(--z-night-2); color: var(--z-green-light); }
:is(.confirm-dialog-card, .ready-check-card, .party-invite-dialog, .player-social-menu, .private-message-toast) {
  border: var(--t-panel-border);
  background: var(--t-panel-bg);
  color: var(--t-panel-text);
  box-shadow: var(--z-frame), var(--z-drop);
}
.party-invite-dialog, .player-social-menu, .private-message-toast { padding: 14px; }
.party-invite-dialog::backdrop { background: var(--ui-dialog-backdrop); }

/* ===================================================================
   6. CARDS INSIDE PANELS
   =================================================================== */
:is(.menu-content .menu-section, .sidebar-card, .shop-item, .type-card, .loadout-slot, .loadout-skin-card,
  .social-row, .private-conversation, .private-messages, .skin-loadout, .shop-filters, .shop-empty) {
  border: 2px solid var(--t-card-border);
  background: var(--t-card-bg);
  color: var(--t-card-text);
  box-shadow: 3px 3px 0 var(--t-card-shadow);
}
.private-chat { border: 2px solid var(--t-card-border); background: var(--t-panel-bg); color: var(--t-panel-text); }
:is(.shop-item, .type-card, .loadout-slot, .loadout-skin-card, .private-conversation):hover { border-color: var(--t-card-hover-border); background: color-mix(in srgb, var(--t-card-bg) 85%, var(--t-card-text)); }
:is(.type-card.selected, .loadout-slot.selected) { border-color: var(--t-card-selected-border); background: var(--t-card-bg); box-shadow: 3px 3px 0 var(--t-card-selected-shadow), inset 0 0 0 2px var(--t-card-selected-border); }
.loadout-skin-card.equipped, .private-conversation.unread { border-color: var(--t-card-selected-border); background: var(--t-card-bg); color: var(--t-card-text); box-shadow: 3px 3px 0 var(--t-card-selected-shadow); }
.private-message { border: 2px solid var(--t-card-border); background: var(--t-card-bg); color: var(--t-card-text); }
.private-message.own { border-color: var(--t-card-selected-border); background: var(--t-tab-active-bg); color: var(--t-tab-active-color); }
:is(.shop-item h2, .type-card > b) { color: var(--t-card-text); }
.shop-item .price { border: 2px solid var(--z-gold-dark); background: var(--t-field-bg); color: var(--t-field-color); }
.shop-item > .skill-shop-preview, .shop-item > .skin-preview { border: 3px solid var(--z-outline); }
/* Dark balance and wallet bars use wood backgrounds with gold text, matching the HUD. */
:is(.wallet, .shop-balance) {
  border: 3px solid var(--z-outline);
  background: var(--z-night-2);
  color: var(--z-light-text);
  box-shadow: inset 0 0 0 2px var(--z-stone-green), 3px 3px 0 var(--z-shadow);
}
:is(.wallet, .shop-balance) b { color: var(--z-gold-light); }
.class-stat-bar { border-color: var(--z-outline); background: var(--z-parchment-dark); }
.class-stat-bar::-webkit-progress-bar { background: var(--z-parchment-dark); }
.class-stats { border-top-color: var(--z-parchment-dark); }
.class-equipped { border-color: var(--z-green-dark); background: var(--z-green-light); color: var(--z-ink); }

/* ===================================================================
   7. TABS
   =================================================================== */
:is(.shop-categories, .tournament-tabs) {
  padding: 4px;
  border: 2px solid var(--z-outline);
  background: var(--t-tabs-bar);
  box-shadow: inset 0 0 0 1px var(--z-stone-green);
}
:is(.shop-categories, .tournament-tabs) button {
  border: 2px solid var(--z-outline);
  background: var(--t-tab-bg);
  color: var(--t-tab-color);
  box-shadow: var(--z-bevel);
  text-shadow: 1px 1px 0 #00000080;
  font-family: var(--z-font-text);
  font-size: 18px;
}
:is(.shop-categories button.active, .tournament-tabs button[aria-selected="true"]) {
  background: var(--t-tab-active-bg);
  color: var(--t-tab-active-color);
  text-shadow: none;
  box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #00000040;
}

/* At 18 px, tabs fit their labels and wrap when space runs out. */
.shop-categories { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-categories button { flex: 1 1 auto; padding: 8px 12px; white-space: nowrap; }

/* ===================================================================
   8. FLOATING DOCK: INVENTORY-STYLE SLOTS
   =================================================================== */
.game-dock {
  border: 3px solid var(--z-outline);
  background: var(--ui-dock-background);
  box-shadow: inset 0 0 0 2px var(--z-stone-green), 0 4px 0 var(--z-shadow);
}
.dock-button {
  border: 2px solid var(--z-stone-green);
  background: var(--z-copper-dark);
  color: var(--z-light-text);
  box-shadow: var(--z-bevel);
}
.dock-button:hover { background: var(--z-copper); }
.dock-button.active {
  border-color: var(--z-stone-light);
  background: var(--t-tab-active-bg);
  color: var(--t-tab-active-color);
  box-shadow: inset 0 0 0 2px var(--z-stone-green), inset 0 -3px 0 #00000066;
}
.dock-label { font-weight: normal; font-family: var(--z-font-text); font-size: 18px; letter-spacing: .02em; text-shadow: 1px 1px 0 var(--z-shadow); }
.friends-badge { border-color: var(--z-outline); background: var(--z-red); color: #fff; font-family: var(--z-font-text); }

/* ===================================================================
   9. WORLD HUD: WINE PANELS WITH STONE BORDERS
   =================================================================== */
:is(.ping-indicator, .elimination-status, .match-clock, .queue-notice, .global-tournament-notice, .tournament-status-badge) {
  border: 2px solid var(--z-outline);
  background: var(--t-hud-bg);
  color: var(--t-hud-color);
  box-shadow: inset 0 0 0 1px var(--t-hud-line), 3px 3px 0 #0d0905aa;
  font-family: var(--z-font-text);
}
.ping-indicator[data-quality="good"] { color: var(--z-green-light); }
.ping-indicator[data-quality="fair"] { color: var(--z-gold-light); }
.ping-indicator[data-quality="poor"] { color: var(--z-red-light); }
.tournament-status-badge[data-state="registration"] { border-color: var(--z-green); }
.tournament-status-badge[data-state="running"] { border-color: var(--z-gold); }
.tournament-status-copy b { font-family: var(--z-font-title); color: var(--z-gold-light); }
.lobby-hud { color: var(--t-panel-text); box-shadow: var(--z-frame), var(--ui-lobby-shadow); }

/* The mobile SPECIAL button between joysticks grows with its label. */
.mobile-ability { max-width: none; min-width: 68px; padding: 8px 10px; font-weight: normal; }

/* Dialog and result layouts accommodate 18 px text without breaking buttons or names. */
.ready-check-card { width: min(100%, 440px); }
.ready-check-actions button { white-space: nowrap; }
.kill-rank-list li { grid-template-columns: auto minmax(6em, 1fr) auto auto; }
.kill-rank-position { white-space: nowrap; }

/* ===================================================================
   10. CHAT
   =================================================================== */
.chat-card {
  border: 2px solid var(--z-outline);
  box-shadow: inset 0 0 0 2px var(--z-stone-green);
}
.chat-card .section-title b { color: var(--ui-chat-title-color); font-size: 18px; text-shadow: 1px 1px 0 var(--z-shadow); }
/* Chat retains its own text size instead of the universal 14 px rule from 01-base.css. */
.chat-card #messages, .chat-card #messages * { font-family: var(--z-font-text); font-size: var(--ui-chat-message-size); }
.chat-card #messages .message.system, .chat-card #messages .message.system * { font-size: var(--ui-chat-notice-size); }
.chat-card #messages { scrollbar-color: var(--z-gold-dark) transparent; }
.chat-card input { font-size: 18px; }
.chat-card button { background: var(--z-gold); color: var(--z-ink); box-shadow: var(--z-bevel); text-shadow: none; }

/* ===================================================================
   11. TOURNAMENTS: COPPER CARDS IN WINE PANELS
   =================================================================== */
.tournament-card-info h4, .tournament-card h4 { font-family: var(--z-font-title); color: var(--z-gold-light); }
.bracket-round h5 { font-family: var(--z-font-title); font-size: 18px; }
.bracket-toolbar { color: var(--t-panel-text); }
.bracket-hint { color: var(--t-panel-muted); }
.bracket-jumps button, .bracket-steps button {
  border: 2px solid var(--z-outline);
  background: var(--z-wood);
  color: var(--z-light-text);
  box-shadow: var(--z-bevel);
  font-family: var(--z-font-text);
}
.bracket-jumps button.is-visible { background: var(--z-gold); color: var(--z-ink); box-shadow: inset 0 2px 0 var(--z-gold-light), inset 0 -3px 0 var(--z-gold-dark); }
.bracket-steps button { font-size: 18px; }
.bracket-vs { color: var(--z-gold); }

/* ===================================================================
   12. SCROLLING
   =================================================================== */
html { scrollbar-color: var(--z-wood-light) var(--z-night-2); }

/* Shared RPG surfaces; editor geometry, sprite art and slot overrides remain authoritative. */
.error { color: var(--ui-error-color); }
.menu-content .menu-section :is(.muted, .panel-help), .social-row small,
.private-conversation small { color: var(--t-card-muted); }
.menu-content #settingsActions .header-actions { color: var(--t-panel-text); }
.menu-content .sidebar > section { color: var(--t-card-text); border-color: var(--t-card-border); }
.menu-content .kill-rank-list li { color: var(--t-card-text); }
.menu-content .kill-rank-list .my-kill-rank { color: var(--z-gold-light); }
:is(.party-panel, .training-coach, .tutorial-intro-card, .spectator-follow-menu) {
  border: var(--t-panel-border); background: var(--t-panel-bg); color: var(--t-panel-text);
  box-shadow: var(--z-frame), var(--z-drop);
}
:is(.party-member, .tutorial-intro-class) {
  border-color: var(--t-card-border); background: var(--t-card-bg); color: var(--t-card-text);
  box-shadow: 3px 3px 0 var(--t-card-shadow);
}
.party-hud .party-member { border: 0; background: transparent; color: var(--t-hud-color); box-shadow: none; }
.party-hud .party-member-name b, .party-hud .party-member > small { color: var(--t-hud-color); }
.tutorial-intro { background: var(--ui-dialog-backdrop); }
.tutorial-intro-class canvas { background: var(--z-copper); }
.tutorial-intro-class.selected { outline-color: var(--t-card-selected-border); background: var(--t-card-bg); box-shadow: 3px 3px 0 var(--t-card-selected-shadow); }
.tutorial-intro-stats { padding: 6px; background: var(--t-field-bg); color: var(--t-field-color); }
.training-coach-head small, .training-coach-skill { color: var(--t-panel-muted); }
.training-coach-dots i { border-color: var(--z-outline); background: var(--t-card-bg); }
.training-coach-dots i.done { background: var(--z-green-light); }
.training-coach-dots i.current { background: var(--z-gold); }
:is(.hud-toggle, .training-coach-leave, .practice-controls button, .spectator-follow > button) {
  border: var(--t-btn-neutral-border); background: var(--t-btn-neutral-bg); color: var(--t-btn-neutral-color); box-shadow: var(--t-btn-neutral-shadow);
}
.practice-controls #botDifficultyButton[data-difficulty="easy"] { background: var(--z-green-dark); color: var(--z-light-text); }
.practice-controls #botDifficultyButton[data-difficulty="super-easy"] { background: var(--z-stone-green); color: var(--z-outline); }
.spectator-follow-menu button { color: var(--t-panel-text); }
.spectator-follow-menu button[aria-checked="true"] { background: var(--t-tab-active-bg); color: var(--t-tab-active-color); }
:is(.battle-stats summary, .battle-stats-content, .skill-info-popup, .kill-notice, .admin-watch-controls, .skill-lab-meter) {
  border-color: var(--z-outline); background: var(--t-hud-bg); color: var(--t-hud-color);
}
.battle-stats summary { box-shadow: inset 0 2px 0 var(--t-hud-line); }
.battle-stats-content > div { border-bottom-color: var(--t-hud-line); }
.battle-stats-content b { color: var(--t-hud-color); }
.battle-stats summary b { color: var(--z-green-light); }
.kill-notice { box-shadow: inset 0 0 0 2px var(--t-hud-line), 4px 4px 0 var(--z-shadow); }
.social-row .friend-photo { border-color: var(--z-stone-green); background: var(--z-copper); }
.friend-row .friend-name:hover, .friend-row .friend-name:focus-visible { color: var(--z-gold-light); }
.social-presence { border-color: var(--z-outline); background: var(--z-stone-green); }
.social-presence.online { background: var(--z-green-light); }
.confirm-dialog-actions button.confirm-dialog-cancel { border: var(--t-btn-neutral-border); background: var(--t-btn-neutral-bg); color: var(--t-btn-neutral-color); box-shadow: var(--t-btn-neutral-shadow); }
.confirm-dialog-actions button.confirm-dialog-confirm { border: var(--t-btn-confirm-border); background: var(--t-btn-confirm-bg); color: var(--t-btn-confirm-color); box-shadow: var(--t-btn-confirm-shadow); }
.confirm-dialog.danger .confirm-dialog-confirm { border: var(--t-btn-danger-border); background: var(--t-btn-danger-bg); color: var(--t-btn-danger-color); box-shadow: var(--t-btn-danger-shadow); }
#readyCheckAccept { background: var(--t-btn-confirm-bg); color: var(--t-btn-confirm-color); }
.ready-check-timer, .ready-check-slots span { border-color: var(--z-outline); background: var(--z-wine-dark); }
.ready-check-slots span.on { background: var(--z-green-light); }
.menu-content .queue-searching { border-color: var(--t-card-border); background: var(--t-card-bg); color: var(--t-card-text); }
.menu-content .queue-searching small { color: var(--t-card-muted); }
#gameScreen .world-wrap:has(#menuOverlay:not([hidden])) > .event-notice-sidebar { visibility: hidden; pointer-events: none; }
.training-mode { border-color: var(--t-card-border); background: var(--t-card-bg); color: var(--t-card-text); box-shadow: 3px 3px 0 var(--t-card-shadow); }
.training-mode:hover { border-color: var(--t-card-hover-border); background: color-mix(in srgb, var(--t-card-bg) 90%, var(--t-card-text)); }
.frozen-banner, .admin-play-bar { border-color: var(--z-outline); background: var(--t-hud-bg); color: var(--t-hud-color); }
/* On phones the window's close control owns the header; restore navigation when it closes. */
@media (max-width: 720px) {
  #gameScreen .world-wrap:has(#menuOverlay:not([hidden])) #gameDock { visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  button, .menu-overlay, .ready-check-card, .confirm-dialog-card { animation-duration: .01ms; transition-duration: .01ms; }
}

/* Navigation names remain accessible; the floating label is shared by mouse,
   keyboard and touch. Author-defined button dimensions remain unchanged. */
#gameDock .dock-label {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.dock-tooltip {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  max-width: min(280px, calc(100vw - 16px));
  padding: 7px 10px;
  border: 2px solid var(--z-stone-green);
  background: var(--z-wood-dark);
  color: var(--z-light-text);
  box-shadow: 2px 2px 0 var(--z-shadow);
  font-family: var(--z-font-text);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
}

/* The navigation container is transparent; only its buttons have a surface. */
#gameDock { background: transparent; border: 0; box-shadow: none; padding: 0; }
#menuOverlay.dock-side-panel {
  left: var(--dock-panel-left) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--dock-panel-bottom) !important;
  width: var(--dock-panel-width) !important;
  max-width: var(--dock-panel-width) !important;
  max-height: var(--dock-panel-height) !important;
  min-width: 0;
  box-sizing: border-box;
  animation: none;
}
#gameScreen .world-wrap:has(#menuOverlay.dock-side-panel:not([hidden])) #gameDock {
  visibility: visible !important; pointer-events: auto !important;
}

/* Side panels respond to their own available width, not the desktop viewport. */
#menuOverlay.configured-menu-window .menu-content { container-type: inline-size; }
#menuOverlay.configured-menu-window #classCards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Full game-area menus by default; editor dimensions can opt into a smaller window. */
#menuOverlay.configured-menu-window, #watchBattleDialog.configured-menu-window {
  position: fixed !important; inset: auto !important;
  left: var(--menu-window-left) !important; top: var(--menu-window-top) !important;
  width: var(--menu-window-width) !important; height: var(--menu-window-height) !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; zoom: 1 !important; transform: none !important; box-sizing: border-box !important;
  z-index: 150 !important;
}
#menuOverlay.configured-menu-window #menuContent { min-height: 0; overflow: auto; }
#gameScreen .world-wrap:has(#menuOverlay.configured-menu-window:not([hidden])) #gameDock { visibility: hidden !important; pointer-events: none !important; }

/* Floating notices stay above full-screen menus; explicit game visibility still applies. */
#queueNotice, #queuePill, #privateMessageToast, #frozenBanner, #killNotices,
#gameScreen .world-wrap > #eventNoticeSidebar { z-index: 20000; }
body.portal-open #eventNoticeSidebar,
#gameScreen .world-wrap:has(#menuOverlay:not([hidden])) > #eventNoticeSidebar { visibility: visible; pointer-events: auto; }
.notice-on-top[popover] {
  position: fixed !important; inset: auto !important; margin: 0 !important;
  left: var(--notice-left) !important; top: var(--notice-top) !important;
  width: var(--notice-width) !important; height: var(--notice-height) !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  transform: none !important; box-sizing: border-box !important; overflow: auto;
  background-color: var(--notice-background-color) !important; border: var(--notice-border) !important;
  padding: var(--notice-padding) !important; color: var(--notice-color) !important;
}
#eventNoticeSidebar.notice-on-top { padding: 0; border: 0; background: transparent; color: inherit; }
#confirmDialog { z-index: 30000; }
#confirmDialog[popover] { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; }

/* Kill announcements: transparent text at the top center of the game. */
#killNotices {
  top: 25%; left: 50%; transform: translateX(-50%); padding: 0;
  background: transparent; border: 0; box-shadow: none;
}
#killNotices .kill-notice {
  background: transparent; border: 0; box-shadow: none; text-shadow: none;
  color: inherit; font-family: inherit; font-size: inherit;
}
#killNotices { color: var(--t-hud-color); font: 18px/1.25 var(--ui-game-font); }
#killNotices .kill-notice-skill { background: transparent; border: 0; box-shadow: none; }
/* Participant confirmation replaces the simulated waiting map. */
.state-lobby-panel #world { opacity: 0; }
.state-lobby-panel #mobileControls, .state-lobby-panel #hudMinimapEditorProxy { display: none; }
.state-lobby-panel #lobbyControls {
  position: absolute; z-index: 60; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px;
  width: min(480px, 90%); max-height: 85%; overflow: auto;
  left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%);
  padding: 20px; background: var(--panel-bg, #282b27); border: 3px solid var(--border-color, #a28d68);
}
.lobby-participants { list-style: none; padding: 0; margin: 0; max-height: 35vh; overflow: auto; }
.lobby-participants li { display: flex; justify-content: space-between; gap: 12px; padding: 8px; overflow-wrap: anywhere; }
.state-private-home #chatCard, .state-private-home #chatToggle, .state-private-home #pingIndicator { display: none; }
@media (max-height: 450px) { .state-lobby-panel #lobbyControls { gap: 5px; padding: 10px; } .lobby-participants { max-height: 22vh; } }
.state-lobby-panel #gameScreen :is(#mobileControls, #playerHud) { display: none !important; }
.state-private-home #gameScreen .joystick-group:has(#aimJoystick) { display: none !important; }