/**
 * Layout CSS - L-Shaped Game Interface
 * Defines the core layout structure for the game view
 */

/* ============================================
   Global Theme & Weather Overlays (Phase 15.1)
   ============================================ */

/* Global theme overlay - applies to ENTIRE interface */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--room-theme-color, transparent);
  opacity: var(--room-overlay-opacity, 0.25);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 999999;
  transition: all 2s ease-in-out;
}

/* Weather overlay - secondary layer */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--weather-overlay-color, transparent);
  opacity: var(--weather-overlay-opacity, 0);
  pointer-events: none;
  z-index: 999998;
  transition: all 2s ease-in-out;
}

/* ============================================
   Game View Container (CSS Grid Layout)
   ============================================ */
#game-view {
  display: none;
  height: 100vh;
  overflow: hidden;
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);

  /* CSS Grid: 2 columns, left flexible, right fixed */
  grid-template-columns: 1fr 300px;
  /* Left column: room-context (auto) + message-area (fills rest) */
  /* Right column: right-sidebar spans full height */
  /* Left column: room-context, message-area, hotkey-bar, command-area */
  grid-template-rows: auto 1fr auto auto auto;
  grid-template-areas:
    "room-context right-sidebar"
    "message-area right-sidebar"
    "reaction-bar right-sidebar"
    "hotkey-bar right-sidebar"
    "command-area right-sidebar";
}

#game-view.active {
  display: grid;
}

/* Room Context (top-left, auto height) */
#room-context {
  grid-area: room-context;
  padding: var(--theme-spacing-xs);
  background: var(--theme-bg-secondary);
  border-bottom: 2px solid var(--theme-border-primary);
  border-right: 2px solid var(--theme-border-primary);
  display: flex;
  flex-direction: column;
  position: relative; /* For time dial absolute positioning */
}

.room-header {
  margin-bottom: var(--theme-spacing-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--theme-spacing-md);
}

.room-header-left {
  display: flex;
  align-items: baseline;
  gap: var(--theme-spacing-sm);
}

.room-name {
  font-size: var(--theme-font-size-xlarge);
  font-weight: bold;
  color: var(--theme-room-name);
}

.room-region {
  font-size: var(--theme-font-size-base);
  color: var(--theme-room-region);
}

.description-toggle {
  color: var(--theme-text-muted);
  cursor: pointer;
  font-size: 11px;
  margin-left: 20px;
  padding: 2px 6px;
  background: none;
  border: 1px solid var(--theme-border-secondary);
  border-radius: 3px;
  transition: all var(--theme-transition-speed);
}

.description-toggle:hover {
  color: var(--theme-room-name);
  border-color: var(--theme-room-name);
}

.room-description {
  color: var(--theme-text-secondary);
  font-size: 13px;
  margin: var(--theme-spacing-sm) 0;
  padding: var(--theme-spacing-sm);
  background: var(--theme-bg-primary);
  border-left: 2px solid var(--theme-border-primary);
  max-height: 100px;
  overflow-y: auto;
}

/* Room Sections Container */
.room-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.room-section {
  display: flex;
  align-items: center;
  gap: var(--theme-spacing-md);
  min-height: 22px;
}

.section-label {
  color: var(--theme-text-muted);
  font-size: var(--theme-font-size-small);
  min-width: 65px;
  text-align: right;
}

/* ============================================
   Time Dial (Phase 15.1)
   ============================================ */

#time-dial {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 46px;
  height: 46px;
}

.dial-container {
  position: relative;
  width: 38px;
  height: 38px;
  margin: 4px; /* Center the 38px dial in the 46px parent */
}

.dial-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  /* Conic gradient aligned to 24-hour clock with midnight at top (0°) */
  /* 0:00=0°, 6:00=90°, 12:00=180°, 18:00=270° */
  background: conic-gradient(
    from 0deg,
    #4a69bd 0deg 75deg,       /* night 0:00-5:00 (5h, deep blue) */
    #ff9a56 75deg 105deg,     /* dawn 5:00-7:00 (2h, orange-red) */
    #ffd93d 105deg 270deg,    /* day 7:00-18:00 (11h, bright yellow) */
    #ff6b9d 270deg 300deg,    /* dusk 18:00-20:00 (2h, pink-red) */
    #4a69bd 300deg 360deg     /* night 20:00-0:00 (4h, deep blue) */
  );
}

/* 4 segments for dawn/day/dusk/night - now used only for active state overlay */
.dial-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.dial-segment.active {
  opacity: 0.3;
}

.dial-segment.dawn {
  background: conic-gradient(from 75deg, #ff6b6b 0deg 30deg, transparent 30deg);
}

.dial-segment.day {
  background: conic-gradient(from 105deg, #ffaa3d 0deg 165deg, transparent 165deg);
}

.dial-segment.dusk {
  background: conic-gradient(from 270deg, #c44569 0deg 30deg, transparent 30deg);
}

.dial-segment.night {
  /* Night spans two sections: 0-75° and 300-360° */
  background: conic-gradient(from 0deg, #1e3799 0deg 75deg, transparent 75deg 300deg, #1e3799 300deg 360deg);
}

/* Sun/Moon icon in center */
.dial-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  transition: transform 2s ease-in-out;
  cursor: help;
  z-index: 2;
}

/* SVG time icon (same size as emoji was) */
.dial-icon .time-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Progress indicator - ring around edge */
.dial-progress {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.dial-progress svg {
  transform: rotate(-90deg);
}

.dial-progress .progress-ring-bg {
  fill: none;
  stroke: black;
  stroke-width: 2.25;
  stroke-linecap: round;
}

.dial-progress .progress-ring {
  fill: none;
  stroke: #4ade80;
  stroke-width: 2.25;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s linear, stroke 2s ease-in-out;
  opacity: 0.9;
}

/* Weather ring - outer ring showing current weather (Phase 15.1) */
.weather-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
}

.weather-ring svg {
  transform: rotate(-90deg);
}

.weather-ring circle {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  transition: stroke 0.5s ease, opacity 0.5s ease;
  opacity: 0.7;
}

/* Storm weather gets pulsing animation */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

.weather-ring.storm circle {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Player Info Section (inside right-sidebar) */
#player-info {
  background: var(--theme-bg-secondary);
  padding: var(--theme-spacing-xs);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-bottom: 2px solid var(--theme-border-primary);
  margin-bottom: var(--theme-spacing-xs);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--theme-spacing-md);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--theme-border-primary);
}

.player-name {
  font-size: var(--theme-font-size-large);
  font-weight: bold;
  color: var(--theme-room-name);
  cursor: pointer;
  transition: color var(--theme-transition-speed);
}

.player-name:hover {
  color: var(--theme-accent-green);
  text-decoration: underline;
}

.player-level {
  font-size: 13px;
  color: var(--theme-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Class icon in player level display */
.class-icon-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: help;
  position: relative;
}

.class-icon {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  vertical-align: middle;
}

/* Tooltip for class icon (uses data-tooltip attribute) */
.class-icon-wrapper[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  right: 0;
  padding: 4px 8px;
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
  font-size: 12px;
  white-space: nowrap;
  border-radius: 3px;
  border: 1px solid var(--theme-border-primary);
  z-index: 1000;
  margin-top: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Player Stats */
.player-stats {
  display: flex;
  flex-direction: column;
  gap: var(--theme-spacing-sm);
}

/* Player Details Grid */
.player-details {
  margin-top: var(--theme-spacing-md);
  padding-top: var(--theme-spacing-md);
  border-top: 1px solid var(--theme-border-secondary);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--theme-spacing-md);
  font-size: var(--theme-font-size-small);
}

.detail-item {
  display: flex;
  justify-content: space-between;
}

.detail-label {
  color: var(--theme-text-muted);
}

.detail-value {
  color: var(--theme-exit-color);
}

/* Player Position Display - styled like sidebar section */
.player-position {
  margin-top: 12px;
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-secondary);
  border-radius: 3px;
  padding: var(--theme-spacing-sm);
}

/* Buff Icons Container */
.buff-icons-container {
  display: flex;
  gap: 4px;
  margin-top: var(--theme-spacing-sm);
  flex-wrap: wrap;
  min-height: 24px;
}

/* Buff Icon Wrapper - Smooth appearance animation */
.buff-icon-wrapper {
  animation: buff-fade-in 0.3s ease-out;
}

@keyframes buff-fade-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   Message Area (fills remaining left column)
   ============================================ */
#message-area {
  grid-area: message-area;
  overflow-y: auto;
  padding: var(--theme-spacing-md) var(--theme-spacing-lg);
  scroll-behavior: smooth;
  min-height: 0;  /* Allow proper scrolling */
  background: var(--theme-bg-primary);
  position: relative;  /* For absolute positioning of casting overlay */
}

/* ===== Base Message Styles ===== */
[class^="message"],
[class*=" message"] {
  margin: 4px 0;
  line-height: var(--theme-line-height);
  font-size: var(--theme-font-size-base);
}

/* ===== LEGACY: Type-based message classes (backwards compatible) ===== */
.message-combat {
  color: var(--theme-combat-damage);
}

.message-info {
  color: var(--theme-info);
}

.message-chat {
  color: var(--theme-chat-say);
}

.message-system {
  color: var(--theme-text-muted);
  font-style: italic;
}

.message-error {
  color: var(--theme-error);
}

.message-success {
  color: var(--theme-success);
}

.message-spell {
  color: #AB47BC;  /* Purple for generic spells */
}

.message-social {
  color: var(--theme-text-secondary);
}

/* ===== NEW: Category-based message styling ===== */

/* Healing - Soothing blue/cyan */
.message-healing {
  color: #4FC3F7;
}

/* Spell Damage - Red/orange (aggressive) */
.message-damage {
  color: #FF6B6B;
}

/* Melee - Combat red (physical melee attacks) */
.message-melee {
  color: var(--theme-combat-damage);  /* #FF6B6B */
}

/* Ranged - Orange (physical ranged attacks) */
.message-ranged {
  color: #FF8A65;
}

/* Buff - Green (positive effects) */
.message-buff {
  color: #66BB6A;
}

/* Debuff - Orange/purple (negative effects) */
.message-debuff {
  color: #FFA726;
}

/* Critical - Gold/yellow (special events) */
.message-critical {
  color: #FFD700;
  font-weight: bold;
}

/* Movement - Blue (informational) */
.message-movement {
  color: #42A5F5;
}

/* Emote - Light grey (social actions) */
.message-emote {
  color: #A0A0A0;
}

/* Utility - Cyan (non-combat spells) */
.message-utility {
  color: #4DD0E1;
}

/* Announcement - Prominent server announcements */
.message-announcement {
  color: #FFD700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
  border-left: 3px solid #FFD700;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-weight: 500;
  animation: announcement-glow 2s ease-in-out;
}

.message-announcement::before {
  content: "📢 ";
}

@keyframes announcement-glow {
  0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
  100% { box-shadow: none; }
}

/* Tutorial Hints - Helpful tips for new players */
.message-hint {
  color: #81D4FA;
  background: linear-gradient(135deg, rgba(129, 212, 250, 0.12) 0%, rgba(79, 195, 247, 0.08) 100%);
  border-left: 3px solid #4FC3F7;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 4px;
  font-size: 0.95em;
}

/* Deep Links - Clickable links in messages (quest, item, npc references) */
.deep-link {
  color: #64B5F6;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.deep-link:hover {
  color: #90CAF9;
  text-decoration-style: solid;
}

.deep-link-quest {
  color: #FFD700;
}

.deep-link-quest:hover {
  color: #FFEB3B;
}

/* Quest System Messages - Prominent animated styling for quest events */

/* Quest animations */
@keyframes quest-glow-green {
  0% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
  50% { box-shadow: 0 0 15px rgba(76, 175, 80, 0.8), 0 0 25px rgba(76, 175, 80, 0.4); }
  100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
}

@keyframes quest-slide-in {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes quest-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes quest-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Quest Complete - Green with glow animation */
.message-quest-complete {
  color: #4CAF50;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(255, 215, 0, 0.15) 100%);
  border-left: 3px solid #4CAF50;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-weight: 500;
  animation: quest-slide-in 0.3s ease-out, quest-glow-green 2s ease-in-out;
}

.message-quest-complete::before {
  content: "✓ ";
  display: inline-block;
  animation: quest-icon-bounce 0.5s ease-in-out 0.3s;
}

/* Quest Accept - Blue with slide-in and pulse */
.message-quest-accept {
  color: #64B5F6;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.15) 0%, rgba(138, 43, 226, 0.1) 100%);
  border-left: 3px solid #64B5F6;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-weight: 500;
  animation: quest-slide-in 0.3s ease-out, quest-pulse 0.5s ease-in-out 0.3s;
}

.message-quest-accept::before {
  content: "📜 ";
  display: inline-block;
  animation: quest-icon-bounce 0.5s ease-in-out 0.3s;
}

/* Quest Progress - Yellow with slide-in */
.message-quest-progress {
  color: #FFC107;
  background: rgba(255, 193, 7, 0.1);
  border-left: 2px solid #FFC107;
  padding: 4px 8px;
  margin: 4px 0;
  font-size: 0.95em;
  animation: quest-slide-in 0.2s ease-out;
}

/* Quest Abandon - Red with slide-in */
.message-quest-abandon {
  color: #EF5350;
  background: rgba(239, 83, 80, 0.15);
  border-left: 3px solid #EF5350;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
  font-weight: 500;
  animation: quest-slide-in 0.3s ease-out;
}

.message-quest-abandon::before {
  content: "✗ ";
}

/* Right Sidebar (spans full height of right column) */
#right-sidebar {
  grid-area: right-sidebar;
  background: var(--theme-bg-secondary);
  border-left: 2px solid var(--theme-border-primary);
  padding: var(--theme-spacing-xs);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-section {
  margin-bottom: var(--theme-spacing-xl);
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-secondary);
  border-radius: 3px;
  padding: var(--theme-spacing-md);
  position: relative; /* For absolute positioned attack indicator */
}

.sidebar-section h3 {
  color: var(--theme-room-name);
  font-size: 13px;
  margin-bottom: var(--theme-spacing-sm);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--theme-border-secondary);
  text-transform: uppercase;
}

/* ============================================
   Reaction Bar (pinned reactive ability prompts)
   ============================================ */
#reaction-bar {
  grid-area: reaction-bar;
  display: flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  max-height: 0;
  padding: 0 8px;
  transition: max-height 0.2s ease, padding 0.2s ease;
  background: var(--theme-bg-secondary);
  border-bottom: 1px solid var(--theme-border-secondary);
}

#reaction-bar:not(.reaction-bar-empty) {
  max-height: 48px;
  padding: 4px 8px;
}

/* ============================================
   Command Input Area
   ============================================ */
#command-area {
  grid-area: command-area;
  background: var(--theme-bg-secondary);
  border-top: 2px solid var(--theme-border-primary);
  padding: 0;
  display: flex;
  gap: 0;
  height: var(--layout-command-height);
}

.command-input {
  flex: 1;
  background: var(--theme-bg-primary);
  border: none;
  border-right: 1px solid var(--theme-border-secondary);
  color: var(--theme-text-primary);
  padding: 0 10px;
  margin: 0;
  font-family: inherit;
  font-size: var(--theme-font-size-base);
  border-radius: 0;
  line-height: var(--layout-command-height);
  height: var(--layout-command-height);
}

.command-input:focus {
  outline: none;
  border-right-color: var(--theme-room-name);
  box-shadow: inset 4px 0 0 var(--theme-room-name);
  animation: focus-pulse 1.5s ease-in-out infinite;
}

@keyframes focus-pulse {
  0%, 100% {
    box-shadow: inset 4px 0 0 var(--theme-room-name);
  }
  50% {
    box-shadow: inset 4px 0 0 var(--theme-room-name), 0 0 12px rgba(76, 175, 80, 0.6);
  }
}

.send-button {
  padding: 0 20px;
  margin: 0;
  background: var(--theme-room-name);
  color: white;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--theme-font-size-base);
  transition: background var(--theme-transition-speed);
  line-height: var(--layout-command-height);
  height: var(--layout-command-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-button:hover {
  background: var(--theme-accent-green-hover);
}

/* ============================================
   Target Section
   ============================================ */
.target-header {
  font-size: 13px;
  color: var(--theme-error);
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.target-clear-btn {
  background: none;
  border: 1px solid var(--theme-border-secondary);
  color: var(--theme-text-muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.target-clear-btn:hover {
  background: var(--theme-bg-tertiary);
  color: var(--theme-error);
  border-color: var(--theme-error);
}

.target-info {
  margin-top: var(--theme-spacing-sm);
}

.target-name-level {
  color: var(--theme-faction-hostile);
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.target-level {
  color: var(--theme-text-muted);
  font-weight: normal;
}

.target-of-target {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--theme-border-secondary);
  color: var(--theme-text-muted);
  font-size: 0.9em;
}

.target-of-target-label {
  color: var(--theme-text-secondary);
  margin-right: 4px;
}

.target-of-target-name {
  color: var(--theme-text-primary);
}

/* ============================================
   Group Section
   ============================================ */
.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--theme-spacing-sm);
}

.group-title {
  font-size: var(--theme-font-size-small);
  color: var(--theme-text-muted);
}

.group-btn {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--theme-error);
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.group-btn:hover {
  opacity: 0.8;
}

.group-members {
  display: flex;
  flex-direction: column;
  gap: var(--theme-spacing-md);
  overflow-y: auto;
  max-height: 300px; /* Limit height and allow scroll when needed */
}

.group-member {
  font-size: 11px;
  padding: var(--theme-spacing-sm);
  background: var(--theme-bg-secondary);
  border-radius: 3px;
}

.member-name {
  color: var(--theme-exit-color);
  font-weight: bold;
  margin-bottom: 4px;
}

.member-level {
  color: var(--theme-text-muted);
  font-size: 10px;
  margin-left: 4px;
}

.member-fkey {
  color: var(--theme-text-muted);
  font-size: 10px;
  margin-left: 4px;
}

.member-class-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.member-class {
  color: var(--theme-text-secondary);
  font-size: 10px;
}

/* Threat indicator for group members */
.threat-indicator {
  display: inline-block;
  background: #ff4444;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  cursor: help;
  animation: pulse-threat 1.5s infinite;
  margin-left: auto; /* Push to the right */
}

@keyframes pulse-threat {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
  }
}

.member-name {
  position: relative;
}

/* ============================================
   Quick Stats Section
   ============================================ */
.quick-stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--theme-spacing-xs);
}

.quick-stat {
  display: flex;
  justify-content: space-between;
  font-size: var(--theme-font-size-small);
}

.quick-stat .stat-label {
  color: var(--theme-text-muted);
}

.quick-stat .stat-value {
  color: var(--theme-text-primary);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
  #game-view {
    grid-template-columns: 1fr 220px;
  }

  .sidebar-section {
    padding: var(--theme-spacing-sm);
  }
}

@media (max-width: 768px) {
  .player-details {
    display: none;
  }

  #game-view {
    grid-template-columns: 1fr;
    grid-template-areas:
      "room-context"
      "message-area"
      "reaction-bar"
      "hotkey-bar"
      "command-area";
  }

  #right-sidebar {
    display: none; /* Hide sidebar on mobile, could be toggle-able */
  }

  #room-context {
    border-right: none;
  }

  .room-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-label {
    text-align: left;
    margin-bottom: 4px;
  }
}

/* ==================== HOTKEY BAR STYLES ==================== */

#hotkey-bar {
  grid-area: hotkey-bar;
  background: var(--theme-bg-secondary);
  border-top: 1px solid var(--theme-border-primary);
  padding: 4px 10px;
  display: flex;
  align-items: center;
  height: 42px;
}

/* Profile selector */
.profile-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-left: 1px solid var(--theme-border-primary);
  margin-left: 8px;
  flex-shrink: 0;
  position: relative;
}

/* Tooltip for profile selector */
.profile-selector[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-primary);
  font-size: 12px;
  white-space: nowrap;
  border-radius: 3px;
  border: 1px solid var(--theme-border-primary);
  z-index: 1000;
  margin-bottom: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-icon {
  font-size: 14px;
  cursor: pointer;
}

.profile-number {
  font-size: 11px;
  color: var(--theme-success);
  font-weight: bold;
  min-width: 10px;
  text-align: center;
  cursor: pointer;
}

.profile-number:hover {
  color: var(--theme-text);
}


/* Profile dropdown */
.profile-dropdown {
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.profile-option {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--theme-text);
}

.profile-option:hover {
  background: var(--theme-bg-hover);
}

.profile-option.active {
  background: var(--theme-bg-active);
  color: var(--theme-success);
}

.profile-option .option-number {
  font-weight: bold;
  margin-right: 8px;
  color: var(--theme-text-secondary);
}

.profile-option.active .option-number {
  color: var(--theme-success);
}

/* Hotkey container */
.hotkey-container {
  display: flex;
  gap: 4px;
  flex: 1;
  align-items: center;
  justify-content: flex-start;
}

/* Visual separators between hotkey groups (1-3 | 4-6 | 7-9 | 0) */
.hotkey-container .hotkey-slot:nth-child(3),
.hotkey-container .hotkey-slot:nth-child(6),
.hotkey-container .hotkey-slot:nth-child(9) {
  margin-right: 12px; /* Extra space after groups */
  position: relative;
}

.hotkey-container .hotkey-slot:nth-child(3)::after,
.hotkey-container .hotkey-slot:nth-child(6)::after,
.hotkey-container .hotkey-slot:nth-child(9)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--theme-border-secondary);
  opacity: 0.4;
}

/* Individual hotkey slots */
.hotkey-slot {
  width: 40px;
  height: 42px;
  background: none;
  border: 0;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s, transform 0.15s ease-out;
  padding: 0;
}

/* Base hover effect - "hop" animation */
.hotkey-slot:hover {
  position: relative;
  top: -2px;
  border: 1px solid var(--theme-room-name);
}

.hotkey-slot:hover .hotkey-name {
  opacity: 1;
  color: #fff;
}

.hotkey-slot.cooldown {
  opacity: 0.5;
  cursor: not-allowed;
}

.hotkey-slot.no-mana {
  opacity: 0.6;
}

.hotkey-slot.activated {
  animation: hotkey-activated 0.3s ease-out;
}

@keyframes hotkey-activated {
  0% {
    background: transparent;
    transform: scale(1);
  }
  50% {
    background: var(--theme-room-name);
    transform: scale(1.1);
    box-shadow: 0 0 8px var(--theme-room-name);
  }
  100% {
    background: transparent;
    transform: scale(1);
  }
}

.hotkey-number {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 9px;
  color: var(--theme-text-secondary);
  font-weight: bold;
}

.hotkey-icon {
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG icons in hotkey bar */
.hotkey-icon .svg-icon {
  height: 38px;
  border-radius: 3px;
}

.hotkey-name {
  font-size: 9px;
  color: var(--theme-room-name);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 100;
  pointer-events: none;
}

.hotkey-cooldown {
  position: absolute;
  bottom: 0px;
  right: 2px;
  font-size: 9px;
  color: var(--theme-warning);
  font-weight: bold;
  background: rgba(0,0,0,0.7);
  padding: 0 2px;
  border-radius: 2px;
}

/* Focus state indicator */
.focus-state {
  padding: 0 8px;
  border-left: 1px solid var(--theme-border-primary);
  flex-shrink: 0;
  font-size: 10px;
  color: var(--theme-text-secondary);
}

.focus-state.active {
  color: var(--theme-success);
}

/* Profile toast notification */
.profile-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid var(--theme-success);
  display: none;
  font-size: 12px;
  align-items: center;
  gap: 6px;
  z-index: 10000;
}

.profile-toast.show {
  display: flex;
  animation: fadeInOut 0.8s;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Right-click context menu */
.hotkey-context-menu {
  position: fixed;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 3px;
  padding: 4px 0;
  z-index: 10000;
  min-width: 150px;
  font-size: 12px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  max-height: 70vh;
  overflow-y: auto;
}

.menu-category {
  padding: 4px 12px;
  color: var(--theme-text-secondary);
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
}

.menu-item {
  padding: 4px 12px;
  cursor: pointer;
  color: var(--theme-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-item:hover {
  background: var(--theme-bg-tertiary);
  color: var(--theme-success);
}

.menu-icon {
  width: 20px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-icon .svg-icon {
  width: 18px;
  height: 18px;
  border-radius: 2px;
}

.menu-separator {
  height: 1px;
  background: var(--theme-border-primary);
  margin: 4px 0;
}

/* Cooldown visual indicators */
.cooldown-sweep {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  pointer-events: none;
  transition: opacity 0.1s linear;
}

.hotkey-cooldown {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 10px;
  color: var(--theme-warning);
  font-weight: bold;
  background: rgba(0, 0, 0, 0.8);
  padding: 1px 3px;
  border-radius: 2px;
  pointer-events: none;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

.hotkey-slot.cooldown {
  opacity: 0.6;
  border-color: var(--theme-border-secondary);
}

.hotkey-slot.cooldown .hotkey-icon {
  opacity: 0.5;
}

.hotkey-slot.cooldown:hover {
  cursor: not-allowed;
  background: var(--theme-bg-primary);
  border-color: var(--theme-border-secondary);
  transform: none; /* Don't hop when on cooldown */
}

/* Ability ready animation */
@keyframes ability-ready-flash {
  0% {
    border-color: var(--theme-success);
    box-shadow: none;
  }
  25% {
    border-color: #6FCF70;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
  }
  50% {
    border-color: #8FDF90;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
  }
  75% {
    border-color: #6FCF70;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
  }
  100% {
    border-color: var(--theme-success);
    box-shadow: none;
  }
}

.hotkey-slot.just-ready {
  animation: ability-ready-flash 0.6s ease-out;
}

/* Container for panel buttons (Inventory, Character, Knowledge) */
.panel-buttons-container {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  padding-left: 8px;
}

/* Panel buttons (Inventory, Character, Knowledge) */
.hotkey-slot.panel-btn {
  flex-shrink: 0;
}

/* ==================== INVENTORY & EQUIPMENT WINDOW ==================== */

/* Main inventory window popup */
.inventory-window {
  position: fixed;
  top: 100px;  /* Default position - will be overridden by WindowManager */
  left: 100px;
  background: var(--theme-bg-secondary);
  border: 2px solid var(--theme-border-primary);
  border-radius: 3px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  width: 900px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 9999;  /* Will be managed dynamically by WindowManager */
  display: none;
}

/* Dragging state - disable transitions and text selection */
.inventory-window.window-dragging {
  transition: none !important;
  user-select: none;
}

/* Window header drag handle styling */
.inventory-window .window-header {
  cursor: move;
  user-select: none;
}

.inventory-window .window-header:active {
  cursor: grabbing;
}

.inventory-window[style*="display: block"] {
  display: block;
}

/* Window header */
.window-header {
  background: var(--theme-bg-secondary);
  border-bottom: 1px solid var(--theme-border-secondary);
  border-radius: 3px 3px 0 0;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}

.window-title {
  color: var(--theme-room-name);
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.window-controls {
  display: flex;
  gap: 8px;
}

.window-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--theme-border-primary);
  background: var(--theme-bg-primary);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 14px;
  color: var(--theme-text-primary);
}

.window-btn:hover {
  background: var(--theme-bg-tertiary);
  border-color: var(--theme-exit-color);
}

/* Window content - flex row layout */
.window-content {
  padding: 20px;
  display: flex;
  gap: 20px;
}

/* ==================== EQUIPMENT PANEL (Left Side) ==================== */

.equipment-panel {
  flex: 0 0 320px;
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-secondary);
  border-radius: 3px;
  padding: 15px;
}

.equipment-title {
  color: var(--theme-exit-color);
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Equipment grid - 4 columns */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 15px;
}

/* Individual equipment slots */
.equipment-slot {
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 3px;
  padding: 6px 4px;
  min-height: 50px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  font-size: 11px;
  text-align: center;
}

.equipment-slot:hover {
  background: var(--theme-bg-tertiary);
  border-color: var(--theme-exit-color);
  transform: translateY(-1px);
}

/* Slot label (top-left corner) */
.slot-label {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 8px;
  color: var(--theme-text-muted);
  text-transform: uppercase;
  opacity: 0.6;
}

/* Ring number (top-left corner for ring slots) */
.ring-number {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 8px;
  color: var(--theme-text-muted);
}

/* Slot item name */
.slot-item-name {
  color: var(--theme-text-primary);
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

/* Empty slot styling */
.equipment-slot.empty .slot-item-name {
  color: var(--theme-text-muted);
  font-style: italic;
  font-weight: normal;
}

/* Filled/equipped slot styling */
.equipment-slot.filled {
  background: rgba(255, 215, 0, 0.05);
  border-color: var(--theme-exit-color);
}

.equipment-slot.filled:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--theme-success);
}

/* Blocked slot (for 2H weapons) */
.equipment-slot.blocked {
  background: #222222;
  border-color: var(--theme-border-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.equipment-slot.blocked:hover {
  background: #222222;
  border-color: var(--theme-border-secondary);
  transform: none;
}

.equipment-slot.blocked .slot-item-name {
  color: #888888;
  font-size: 10px;
  font-style: italic;
}

/* Drag and drop states */
.inventory-slot.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.equipment-slot.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.equipment-slot.drag-over {
  background: rgba(76, 175, 80, 0.2);
  border-color: var(--theme-success);
  border-width: 2px;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
}

.equipment-slot.drag-invalid {
  background: rgba(255, 107, 107, 0.2);
  border-color: var(--theme-error);
  border-width: 2px;
  cursor: not-allowed;
}

.inventory-slot.drag-over {
  background: rgba(76, 175, 80, 0.2);
  border-color: var(--theme-success);
  border-width: 2px;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
}

/* Highlighting compatible slots during drag */
.equipment-slot.drag-compatible {
  background: rgba(76, 175, 80, 0.1);
  border-color: var(--theme-success);
  border-width: 2px;
  animation: compatible-pulse 1.5s ease-in-out infinite;
}

@keyframes compatible-pulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.6);
  }
}

/* Custom drag preview - matches equipment slot size */
.drag-preview {
  background: var(--theme-bg-primary);
  border: 2px solid var(--theme-exit-color);
  border-radius: 3px;
  padding: 6px 4px;
  width: 70px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: var(--theme-text-primary);
  text-align: center;
  word-wrap: break-word;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  opacity: 0.9;
}

/* ==================== RINGS SECTION ==================== */

.rings-section {
  margin-top: 15px;
  border-top: 1px solid var(--theme-border-secondary);
  padding-top: 15px;
}

.rings-title {
  color: var(--theme-exit-color);
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.rings-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* ==================== INVENTORY PANEL (Right Side) ==================== */

.inventory-panel {
  flex: 1;
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-secondary);
  border-radius: 3px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.inventory-title {
  color: var(--theme-exit-color);
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Inventory grid - 2 columns x 4 rows = 8 slots */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

/* Individual inventory slots */
.inventory-slot {
  background: var(--theme-bg-primary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 3px;
  padding: 15px;
  min-height: 80px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inventory-slot .slot-number {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 10px;
  color: var(--theme-text-muted);
  font-weight: bold;
}

.inventory-slot:hover {
  background: var(--theme-bg-tertiary);
  border-color: var(--theme-exit-color);
}

.inventory-slot.filled {
  background: rgba(255, 215, 0, 0.05);
  border-color: var(--theme-exit-color);
}

.inventory-slot.filled:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: var(--theme-success);
}

.inventory-slot .slot-item-name {
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  color: var(--theme-text-primary);
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}

.inventory-slot.empty .slot-item-name {
  color: var(--theme-text-muted);
  font-style: italic;
  font-weight: normal;
}

/* ==================== ITEM RARITY COLORS ==================== */

.rarity-common {
  color: #aaaaaa !important;
}

.rarity-common.filled {
  border-color: #aaaaaa;
}

.rarity-uncommon {
  color: #1eff00 !important;
}

.rarity-uncommon.filled {
  border-color: #1eff00;
}

.rarity-rare {
  color: #0080ff !important;
}

.rarity-rare.filled {
  border-color: #0080ff;
}

.rarity-epic {
  color: #a335ee !important;
}

.rarity-epic.filled {
  border-color: #a335ee;
}

.rarity-legendary {
  color: #ff8000 !important;
}

.rarity-legendary.filled {
  border-color: #ff8000;
}

.rarity-artifact {
  color: #e6cc80 !important;
}

.rarity-artifact.filled {
  border-color: #e6cc80;
}

/* ==================== INVENTORY FOOTER (Weight) ==================== */

.inventory-footer {
  border-top: 1px solid var(--theme-border-secondary);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.weight-display {
  font-size: 13px;
}

.weight-label {
  color: var(--theme-text-secondary);
}

.weight-value {
  color: var(--theme-success);
  font-weight: bold;
}

.weight-value.medium {
  color: var(--theme-warning);
}

.weight-value.heavy {
  color: var(--theme-error);
}

/* Encumbrance level badge */
.encumbrance-level {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid var(--theme-success);
  color: var(--theme-success);
  text-transform: capitalize;
}

.encumbrance-level.encumbrance-medium {
  background: rgba(255, 193, 7, 0.1);
  border-color: var(--theme-warning);
  color: var(--theme-warning);
}

.encumbrance-level.encumbrance-heavy,
.encumbrance-level.encumbrance-encumbered {
  background: rgba(255, 107, 107, 0.1);
  border-color: var(--theme-error);
  color: var(--theme-error);
}

.encumbrance-level.encumbrance-overweight {
  background: rgba(255, 0, 0, 0.2);
  border-color: #ff0000;
  color: #ff0000;
  font-weight: bold;
}

/* ==================== INVENTORY CONTEXT MENU ==================== */

.inventory-context-menu {
  position: fixed;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 3px;
  padding: 4px 0;
  z-index: 10000;
  min-width: 150px;
  font-size: 12px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.inventory-context-menu .menu-category {
  padding: 4px 12px;
  color: var(--theme-text-secondary);
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
}

.inventory-context-menu .menu-item {
  padding: 6px 12px;
  cursor: pointer;
  color: var(--theme-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.inventory-context-menu .menu-item:hover {
  background: var(--theme-bg-tertiary);
  color: var(--theme-success);
}

.inventory-context-menu .menu-item.disabled {
  color: var(--theme-text-muted);
  cursor: not-allowed;
  font-style: italic;
}

.inventory-context-menu .menu-icon {
  width: 16px;
  text-align: center;
}

.inventory-context-menu .menu-separator {
  height: 1px;
  background: var(--theme-border-primary);
  margin: 4px 0;
}

/* ==================== ITEM TOOLTIP ==================== */

.item-tooltip {
  position: fixed;
  background: var(--theme-bg-primary);
  border: 2px solid var(--theme-border-primary);
  border-radius: 3px;
  padding: 12px;
  min-width: 250px;
  max-width: 350px;
  z-index: 10001;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
  display: none;
}

.tooltip-header {
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--theme-border-secondary);
  font-size: 13px;
}

.tooltip-section {
  margin: 6px 0;
  font-size: 11px;
  line-height: 1.4;
}

.tooltip-label {
  color: var(--theme-text-secondary);
  display: inline-block;
  min-width: 80px;
}

.tooltip-value {
  color: var(--theme-text-primary);
}

.tooltip-stat {
  color: var(--theme-success);
}

.tooltip-description {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--theme-border-secondary);
  color: var(--theme-text-secondary);
  font-style: italic;
}

/* Applied Effects Tooltip Styles */
.tooltip-applied-effects-header {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--theme-border-secondary);
}

.tooltip-applied-effect {
  margin: 8px 0;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  border-left: 3px solid var(--theme-border-primary);
}

.tooltip-effect-details {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--theme-text-secondary);
}

.tooltip-effect-charges {
  color: var(--theme-text-primary);
  font-weight: 500;
}

.tooltip-effect-time {
  color: var(--theme-warning);
  font-style: italic;
}

.tooltip-effect-description {
  color: var(--theme-text-secondary);
  margin-top: 2px;
}

/* Effect Type Color Coding */
.tooltip-effect-instant {
  color: #ef4444;
  font-weight: bold;
}

.tooltip-effect-dot {
  color: #a855f7;
  font-weight: bold;
}

.tooltip-effect-debuff {
  color: #f97316;
  font-weight: bold;
}

.tooltip-effect-control {
  color: #eab308;
  font-weight: bold;
}