/* =========================
   THEME & VARIABLES
========================= */
:root{
  --char-color:#c94f4f;
  --ui-bg:#070a12;
  --ui-panel: var(--window-surface-soft, rgba(18, 22, 34, 0.92));
  --ui-panel-2: var(--window-body-bg, rgba(24, 30, 46, 0.96));
  --ui-border: var(--window-border, rgba(245, 158, 11, 0.35));
  --ui-border-dark: var(--window-border, rgba(245, 158, 11, 0.35));
  --ui-gold: var(--window-accent, #f59e0b);
  --ui-text: var(--window-text, #f8fafc);
  --ui-green:#10b981;
  --ui-red:#ef4444;
  --ui-blue:#38bdf8;

  --shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 18px rgba(0,0,0,0.5);

  --panel-gradient: var(--window-surface, linear-gradient(180deg, rgba(20, 24, 38, 0.96) 0%, rgba(11, 14, 23, 0.98) 100%));
  --radius:12px;

  --ui-gap: clamp(8px, 0.6vw, 16px);
  --panel-padding: clamp(8px, 1.2vw, 18px);
  --font-base: clamp(13px, 1.1vw, 16px);
}

/* Performance Mode Overrides for Low-End GPUs / Mobile Devices */
body.perf-no-blur *,
body.perf-no-blur .panel,
body.perf-no-blur .audio-controls-floating,
body.perf-no-blur .modal-content,
body.perf-no-blur .hud-panel,
body.perf-no-blur .chat-window,
body.perf-no-blur .party-panel,
body.perf-no-blur .overlay-window,
body.perf-no-blur #mapLoading {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.perf-low *,
body.perf-low .charSprite,
body.perf-low .monsterEntity,
body.perf-low .npcEntity,
body.perf-low .cosmetic-particle {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

@media (max-width: 960px) {
  body:not(.perf-high-blur) *,
  body:not(.perf-high-blur) .panel,
  body:not(.perf-high-blur) .audio-controls-floating,
  body:not(.perf-high-blur) .modal-content,
  body:not(.perf-high-blur) .hud-panel,
  body:not(.perf-high-blur) .chat-window,
  body:not(.perf-high-blur) .party-panel,
  body:not(.perf-high-blur) .overlay-window {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =========================
   RESET / GLOBAL
========================= */
*{box-sizing:border-box}
html,body,ion-app,ion-content{
  height:100%;
  margin:0;
  padding:0;
  font-family:'Inter', sans-serif;
  background: radial-gradient(ellipse at 50% 15%, #182032 0%, #0d121f 55%, #060810 100%) !important;
  --background: radial-gradient(ellipse at 50% 15%, #182032 0%, #0d121f 55%, #060810 100%) !important;
  color:var(--ui-text);
  font-size:var(--font-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
a{color:var(--ui-gold);text-decoration:none;transition:color 0.2s}
a:hover{color:#ffd700}
button{
  font-family:inherit;
  cursor:pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Generic panel */
.panel{
  background: var(--window-surface, linear-gradient(180deg, rgba(20, 24, 38, 0.96) 0%, rgba(11, 14, 23, 0.98) 100%));
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 32px 24px;
  width: 90%;
  max-width: 480px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.panel h2 {
  margin: 0 0 8px 0;
  text-align: center;
  font-size: 1.8rem;
  color: var(--ui-gold);
  text-shadow: 0 0 15px rgba(216, 180, 106, 0.35);
  font-weight: 800;
}

/* Premium Form Inputs */
.panel input[type="text"],
.panel input[type="password"],
.panel select,
.panel input:not([type="color"]) {
  width: 100%;
  background: rgba(10, 8, 6, 0.6);
  border: 1px solid rgba(216, 180, 106, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  color: #efe6d2;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.panel input:focus,
.panel select:focus {
  outline: none;
  border-color: #ffd700;
  background: rgba(15, 12, 9, 0.85);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Modern 2026 Theme-Reactive Buttons */
button:not(.mobileTabBtn):not(.combatTabBtn):not(.bagTabBtn):not(.statPlusBtn):not(.combatSpellButton):not(.unequipBtn):not(.combat-spell-slot):not(.spell-slot):not(.pass-turn-btn):not(.surrender-btn):not(.close-spell-desc-btn):not(.combatMonsterCard):not(.party-action-btn):not(.joinBtn):not(.deleteCharacterCross):not(.closeCardBtn):not(.enc-tab-btn):not(.sheet-tab-btn):not(.cat-tab):not(.audio-icon-btn):not(.audio-collapse-btn):not(.tracker-collapse-btn):not(.untrack-btn) {
  min-height: 38px;
  background: var(--window-accent-soft, rgba(245, 158, 11, 0.15)) !important;
  border: 1px solid var(--window-border, rgba(245, 158, 11, 0.35)) !important;
  border-radius: 10px !important;
  color: var(--window-text, #f8fafc) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(8px) !important;
}

button:not(.mobileTabBtn):not(.combatTabBtn):not(.bagTabBtn):not(.statPlusBtn):not(.combatSpellButton):not(.unequipBtn):not(.combat-spell-slot):not(.spell-slot):not(.pass-turn-btn):not(.surrender-btn):not(.close-spell-desc-btn):not(.combatMonsterCard):not(.party-action-btn):not(.joinBtn):not(.deleteCharacterCross):not(.closeCardBtn):not(.enc-tab-btn):not(.sheet-tab-btn):not(.cat-tab):not(.audio-icon-btn):not(.audio-collapse-btn):not(.tracker-collapse-btn):not(.untrack-btn):hover {
  transform: translateY(-2px) !important;
  background: var(--window-accent-soft, rgba(245, 158, 11, 0.28)) !important;
  border-color: var(--window-accent, #f59e0b) !important;
  color: var(--window-accent, #f59e0b) !important;
  box-shadow: 0 6px 18px var(--window-accent-soft, rgba(245, 158, 11, 0.35)) !important;
}

button:not(.mobileTabBtn):not(.combatTabBtn):not(.bagTabBtn):not(.statPlusBtn):not(.combatSpellButton):not(.unequipBtn):not(.combat-spell-slot):not(.spell-slot):not(.pass-turn-btn):not(.surrender-btn):not(.close-spell-desc-btn):not(.combatMonsterCard):not(.party-action-btn):not(.joinBtn):not(.deleteCharacterCross):not(.closeCardBtn):not(.enc-tab-btn):not(.sheet-tab-btn):not(.cat-tab):not(.audio-icon-btn):not(.audio-collapse-btn):not(.tracker-collapse-btn):not(.untrack-btn):active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

button.dangerBtn {
  background: linear-gradient(180deg, #c82333 0%, #8b131f 100%) !important;
  border-color: #f5c6cb !important;
  color: #fff !important;
}

button.dangerBtn:hover {
  background: linear-gradient(180deg, #e43547 0%, #b2212f 100%) !important;
  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.2), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

button.successBtn {
  background: linear-gradient(180deg, #61784c 0%, #465737 100%) !important;
  border-color: #8fa677 !important;
  color: #efe6d2 !important;
}

button.successBtn:hover {
  background: linear-gradient(180deg, #74905b 0%, #536741 100%) !important;
  box-shadow: 0 6px 16px rgba(97, 120, 76, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.panel button {
  width: 100%;
  min-height: 46px;
  font-size: 14px;
}

.panel p {
  text-align: center;
  font-size: 13px;
  color: #a7977c;
  margin: 4px 0 0 0;
}

/* Utility */
.min-width-zero{min-width:0}
.hidden{display:none!important}
.center{display:flex;align-items:center;justify-content:center}

/* Service Health Status Indicators */
.server-status-container {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(216, 180, 106, 0.1);
  align-self: center;
}

.server-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: rgba(239, 230, 210, 0.7);
}

.server-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.server-status-dot.online {
  background-color: #4cd964;
  box-shadow: 0 0 10px #4cd964;
}

.server-status-dot.offline {
  background-color: #ff3b30;
  box-shadow: 0 0 10px #ff3b30;
}