:root{
  /* STYLE-GUIDE-UPDATE: Parchment-scroll theme color palette */
  --primary-bg: #fdfaf4; /* soft parchment base for ~60% of the UI */
  --secondary-bg: #ece5d6; /* light warm grey for ~30% sections */
  --accent-color: #5784ba; /* calming azure for ~10% accents */
  --bg: var(--primary-bg); /* primary background */
  --panel: var(--secondary-bg); /* secondary background for panels */
  --ink: #000; /* Black ink for text */
  --ink-light: #000;
  --ink-dark: #000;
  --ink-color: #000;
  --muted: #8b7f75; /* softened brown for secondary text */
  --accent: var(--accent-color); /* calming azure accents */
  --accent-2: #7b9ec6; /* soft accent variant */
  --gold: #c7a131; /* harmonised gold */
  --danger: #b32424; /* clearer alert red */
  --shadow: 0 10px 30px rgba(45, 37, 32, 0.25); /* Soft brown shadow */
  --radius: 16px;
  --gap: 20px;
  --pad: 16px;
    --header-h: 64px;
  --log-h: 0px;
  --tabs-h: 48px;
  --safe-bottom: env(safe-area-inset-bottom,0px);
  --float-pad: 0px;
  --card-pad: 12px;
  --card-gap: 8px;
  --dot-size: 8px;
  --row-h: 48px;
  --slotS: clamp(27px, 8.4vw, 34px);
  --slotM: clamp(38px, 11.2vw, 47px);
  --slotL-w: calc(var(--slotM) * 1.6);
  --slotL-h: calc(var(--slotM) * 2);
  --slot-pad: 8px;
  --slot-radius: 8px;
  --outline-stroke: 1.5px;
  
  /* STYLE-GUIDE-UPDATE: Stage-specific colors for cultivation */
  --mortal-primary: #a66c4c; /* lighter saddle brown */
  --mortal-secondary: #b6825e; /* warm tan */
  --foundation-primary: #399e34; /* mid jade green */
  --foundation-secondary: #54b84c; /* light jade */
  --core-primary: #6b80e5; /* softened royal blue */
  --core-secondary: #88a0f1; /* pale periwinkle */
  --nascent-primary: #b366d4; /* lighter violet */
  --nascent-secondary: #c88ae3;
  --spirit-primary: #ff7043; /* soft coral instead of harsh orange */
  --spirit-secondary: #ff906a;

  /* Scenic background controls */
  --bg-dim: .97;      /* lower = darker */
  --bg-contrast: .98; /* 1 = none */
}
html,body{height:100%;overflow:hidden}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.tab-bar{
  position:sticky;
  top:var(--header-h);
  z-index:900;
  background:var(--panel);
  margin-bottom:0;
}

/* Nested tab bars (like those inside cards) should sit at the top of
   their container rather than sticking to the page header. Reset the
   positioning so the subsequent content isn't overlapped. */
.card .tab-bar{
  position:static;
  top:auto;
  z-index:auto;
  margin-bottom:var(--card-gap);
}

.tab-content{
  padding-top:var(--gap);
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  height:calc(100dvh - var(--header-h) - var(--tabs-h));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--log-h) + env(safe-area-inset-bottom,0px));
}

.tab-content::after{
  content:"";
  display:block;
  height:var(--log-h);
}

.tab-content>.card{
  width:100%;
  max-width:100%;
}

.tab-content>.card:only-child{
  flex:1 0 auto;
}

/* --- Parchment-style custom scrollbar --- */
html {
  scrollbar-gutter: stable;
}

/* ---------- Firefox (standards) ---------- */
* {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: #b28c63 #f2ecd8; /* thumb | track */
}

/* ---------- WebKit (Chrome/Edge/Safari) ---------- */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #f2ecd8; /* aged parchment */
  border-radius: 999px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c8a97e, #a8875a);
  border-radius: 999px;
  border: 2px solid #f2ecd8; /* creates “pill” inset */
  background-clip: padding-box;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.3), 0 0 2px rgba(0,0,0,0.2);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #d5b48f, #b69363);
}
*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #b69363, #8f6d3f);
}

body{
  margin:0;
  font-family: 'IM Fell English', serif;
  color: #000;
  overflow:hidden;
  position: relative;
}

body, #root, #app {
  background:
    image-set(
      url("/assets/background/ink-mountains-style2.avif") type("image/avif"),
      url("/assets/background/ink-mountains-style2.webp") type("image/webp")
    ) center/cover no-repeat,
    linear-gradient(#f5f1eb, #e9dfd3); /* graceful fallback while loading */
  filter: brightness(var(--bg-dim)) contrast(var(--bg-contrast)) saturate(.95);
  background-attachment: fixed; /* remove if scroll feels janky */
}

body::before{
  content:"";
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(0,0,0,.10) 0%,
              rgba(0,0,0,0) 22% 78%,
              rgba(0,0,0,.12) 100%);
  z-index: 0;
}

/* SCENIC-UPDATE: drifting edge fog */
.mist-layer{pointer-events:none; position:fixed; inset:-10vh -5vw; z-index:0}
.mist-a,.mist-b{position:absolute; inset:0; opacity:.10; background-repeat:no-repeat; background-size:120% 120%}
.mist-a{background-image:radial-gradient(ellipse at 70% 80%, #fff 0%, transparent 55%);animation:driftA 28s linear infinite alternate}
.mist-b{background-image:radial-gradient(ellipse at 30% 20%, #fff 0%, transparent 55%);animation:driftB 36s linear infinite alternate}
@keyframes driftA{from{transform:translateX(-2%) translateY(0)} to{transform:translateX(2%) translateY(-2%)}}
@keyframes driftB{from{transform:translateX(2%) translateY(0)} to{transform:translateX(-2%) translateY(2%)}}
html.reduce-motion .mist-a,html.reduce-motion .mist-b{animation:none}

.content {
  background: transparent;
}

h1, h2, h3 {
    color: #000;
    border-bottom: 1px solid var(--muted);
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

h1, .ability-name {
    font-family: 'Uncial Antiqua', cursive;
}

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

.card {
  background-color: var(--panel);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(45, 37, 32, 0.2), 0 4px 8px rgba(45, 37, 32, 0.15);
  border: 1px solid rgba(45, 37, 32, 0.35);
  padding: 16px;
}

/* --- Standardized Progress Bar --- */
.progress-bar-container {
  margin-bottom: 12px;
}

.progress-label {
  font-family: 'Trajan Pro', 'Palatino Linotype', serif;
  font-size: 0.9rem;
  color: var(--ink-dark);
  text-shadow: 1px 1px 2px var(--parchment-light);
  margin-bottom: 4px;
  margin-left: 2px;
}

.progress-bar {
  width: 100%;
  height: 22px;
  background-color: var(--parchment-light);
  border: 1px solid var(--ink-light);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.progress-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--ink-dark);
  text-shadow: 0 0 5px white;
  z-index: 2;
  white-space: nowrap;
}

.progress-fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-glow-light), var(--accent-glow-dark));
  border-radius: 5px;
  transition: width 0.3s ease-in-out;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.5);
  z-index: 1;
}

/* MYSTIC-REALM-UPDATE: Ambient Qi particles and glimmering motes */
.qi-particles{position:fixed; inset:0; pointer-events:none; z-index:1;}
.qi-particle{position:absolute; width:3px; height:3px; background:radial-gradient(circle, rgba(34, 139, 34, 0.6) 0%, rgba(74, 222, 128, 0.4) 50%, transparent 100%); border-radius:50%; opacity:0; animation:qiSpiral 15s ease-in-out infinite;}
.qi-particle:nth-child(1){top:80%; left:10%; animation-delay:0s;}
.qi-particle:nth-child(2){top:70%; left:90%; animation-delay:-2s;}
.qi-particle:nth-child(3){top:60%; left:5%; animation-delay:-4s;}
.qi-particle:nth-child(4){top:90%; left:85%; animation-delay:-6s;}
.qi-particle:nth-child(5){top:75%; left:15%; animation-delay:-8s;}
.qi-particle:nth-child(6){top:85%; left:80%; animation-delay:-10s;}

.glimmering-motes{position:fixed; inset:0; pointer-events:none; z-index:1;}
.glimmer-mote{position:absolute; width:2px; height:2px; background:radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(184, 134, 11, 0.4) 50%, transparent 100%); border-radius:50%; opacity:0; animation:gentleFloat 8s ease-in-out infinite;}
.glimmer-mote:nth-child(1){top:20%; left:25%; animation-delay:0s;}
.glimmer-mote:nth-child(2){top:40%; left:75%; animation-delay:-1s;}
.glimmer-mote:nth-child(3){top:60%; left:20%; animation-delay:-2s;}
.glimmer-mote:nth-child(4){top:30%; left:80%; animation-delay:-3s;}
.glimmer-mote:nth-child(5){top:70%; left:60%; animation-delay:-4s;}
.glimmer-mote:nth-child(6){top:15%; left:50%; animation-delay:-5s;}
.glimmer-mote:nth-child(7){top:80%; left:30%; animation-delay:-6s;}
.glimmer-mote:nth-child(8){top:50%; left:10%; animation-delay:-7s;}

/* MYSTIC-REALM-UPDATE: Subtle elemental overlays */
.elemental-overlays{position:fixed; inset:0; pointer-events:none; z-index:1;}
.elemental-leaf{position:absolute; width:8px; height:12px; background:linear-gradient(45deg, rgba(34, 139, 34, 0.4) 0%, rgba(107, 142, 35, 0.3) 100%); border-radius:50% 0; opacity:0; animation:leafFloat 12s ease-in-out infinite; transform-origin:center;}
.elemental-spark{position:absolute; width:2px; height:6px; background:linear-gradient(to bottom, rgba(255, 140, 0, 0.6) 0%, rgba(255, 69, 0, 0.4) 100%); opacity:0; animation:sparkFlicker 3s ease-in-out infinite;}
.elemental-ice{position:absolute; width:4px; height:8px; background:linear-gradient(45deg, rgba(173, 216, 230, 0.5) 0%, rgba(135, 206, 250, 0.3) 100%); clip-path:polygon(50% 0%, 0% 100%, 100% 100%); opacity:0; animation:iceShimmer 8s ease-in-out infinite;}

.elemental-leaf:nth-child(1){top:25%; left:15%; animation-delay:0s;}
.elemental-leaf:nth-child(2){top:60%; left:85%; animation-delay:-3s;}
.elemental-leaf:nth-child(3){top:40%; left:5%; animation-delay:-6s;}
.elemental-spark:nth-child(4){top:30%; left:70%; animation-delay:-1s;}
.elemental-spark:nth-child(5){top:80%; left:25%; animation-delay:-4s;}
.elemental-ice:nth-child(6){top:15%; left:60%; animation-delay:-2s;}
.elemental-ice:nth-child(7){top:75%; left:40%; animation-delay:-5s;}
/* MYSTIC-REALM-UPDATE: Animation keyframes for ambient effects */
@keyframes qiSpiral {
  0% { opacity: 0; transform: translateX(0) translateY(0) rotate(0deg) scale(0.5); }
  20% { opacity: 0.8; }
  50% { opacity: 1; transform: translateX(-30vw) translateY(-40vh) rotate(180deg) scale(1); }
  80% { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(-50vw) translateY(-60vh) rotate(360deg) scale(0.3); }
}


@keyframes leafFloat {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  25% { opacity: 0.6; transform: translateY(-20px) rotate(90deg); }
  50% { opacity: 0.8; transform: translateY(-10px) rotate(180deg); }
  75% { opacity: 0.4; transform: translateY(-30px) rotate(270deg); }
  100% { opacity: 0; transform: translateY(-50px) rotate(360deg); }
}

@keyframes sparkFlicker {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 0.8; transform: scale(1.2); }
  40% { opacity: 0.3; transform: scale(0.8); }
  60% { opacity: 0.9; transform: scale(1.1); }
  80% { opacity: 0.2; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(0.3); }
}

@keyframes iceShimmer {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  30% { opacity: 0.5; transform: translateY(-15px) scale(1); }
  60% { opacity: 0.7; transform: translateY(-25px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

@keyframes gentleFloat {
  0%, 100% { opacity: 0; transform: translateY(0px) scale(0.8); }
  25% { opacity: 0.6; transform: translateY(-8px) scale(1); }
  50% { opacity: 1; transform: translateY(-15px) scale(1.2); }
  75% { opacity: 0.4; transform: translateY(-10px) scale(0.9); }
}

@keyframes breathingAura {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.1); }
}


@keyframes drift{from{transform:translateY(0)} to{transform:translateY(-200px)}}

/* Cultivation Layout Styles */
.cultivation-header {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.cultivation-header .realm-node {
  max-width: 500px;
  width: 100%;
}

.cultivation-layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start; /* Align items to the top */
}

/* Cultivation Visualization */
.cultivation-visualization-container {
  flex: 1;
  height: 500px; /* Explicit height */
  min-height: 400px;
  position: relative;
}

.cultivation-visualization {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  /* STYLE-GUIDE-UPDATE: Soft parchment shadow */
  box-shadow: inset 0 0 20px rgba(139, 117, 95, 0.2);
}


/* Misty fog layers behind silhouette */
.misty-fog {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.fog-layer-1 {
  position: absolute;
  width: 300px;
  height: 200px;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(139, 117, 95, 0.08) 0%, rgba(160, 140, 115, 0.04) 40%, transparent 70%);
  border-radius: 50%;
  animation: fogDrift 40s ease-in-out infinite;
}

.fog-layer-2 {
  position: absolute;
  width: 250px;
  height: 150px;
  top: 40%;
  left: 30%;
  background: radial-gradient(ellipse, rgba(120, 100, 80, 0.06) 0%, rgba(139, 117, 95, 0.03) 50%, transparent 80%);
  border-radius: 50%;
  animation: fogDrift 35s ease-in-out infinite reverse;
  animation-delay: -15s;
}

.fog-layer-3 {
  position: absolute;
  width: 280px;
  height: 180px;
  top: 35%;
  right: 25%;
  background: radial-gradient(ellipse, rgba(160, 140, 115, 0.05) 0%, rgba(120, 100, 80, 0.02) 60%, transparent 85%);
  border-radius: 50%;
  animation: fogDrift 45s ease-in-out infinite;
  animation-delay: -25s;
}
@keyframes fogDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.6;
  }
  33% {
    transform: translate(8px, -3px) scale(1.05) rotate(1deg);
    opacity: 0.8;
  }
  66% {
    transform: translate(-5px, 6px) scale(0.95) rotate(-0.5deg);
    opacity: 0.7;
  }
}
/* Lotus bloom effect behind silhouette */
.lotus-bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  z-index: 4;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.bloom-petal {
  position: absolute;
  width: 60px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(74, 222, 128, 0.3) 0%, rgba(34, 197, 94, 0.2) 50%, transparent 80%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: center bottom;
  opacity: 0;
  transition: all 1.5s ease-in-out;
}

.petal-1 { 
  top: 20%; 
  left: 50%; 
  transform: translateX(-50%) rotate(0deg) scale(0.5);
}
.petal-2 { 
  top: 25%; 
  left: 65%; 
  transform: translateX(-50%) rotate(45deg) scale(0.5);
}
.petal-3 { 
  top: 40%; 
  left: 75%; 
  transform: translateX(-50%) rotate(90deg) scale(0.5);
}
.petal-4 { 
  top: 60%; 
  left: 65%; 
  transform: translateX(-50%) rotate(135deg) scale(0.5);
}
.petal-5 { 
  top: 70%; 
  left: 50%; 
  transform: translateX(-50%) rotate(180deg) scale(0.5);
}
.petal-6 { 
  top: 60%; 
  left: 35%; 
  transform: translateX(-50%) rotate(225deg) scale(0.5);
}
.petal-7 { 
  top: 40%; 
  left: 25%; 
  transform: translateX(-50%) rotate(270deg) scale(0.5);
}
.petal-8 {
  top: 25%;
  left: 35%;
  transform: translateX(-50%) rotate(315deg) scale(0.5);
}

/* Orbital rune ring around the silhouette */
.rune-ring {
  position:absolute;
  left:50%;
  top:50%;
  width:min(52vmin,420px);
  height:auto;
  transform:translate(-50%,-50%);
  color:var(--accent,#d8a316);
  opacity:.85;
  z-index:2;
}

.rune-ring .orbit {
  animation:orbit 32s linear infinite;
}

@keyframes orbit {
  to {
    transform:rotate(360deg);
  }
}

html.reduce-motion .rune-ring .orbit {
  animation:none;
}

/* Intensify rune ring during active breakthrough */
.breakthrough .rune-ring {
  opacity: 1;
  color: var(--accent-strong, #ffd34d);
  /* Stronger multi-layer glow */
  filter:
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.35)) /* dark underglow for contrast */
    drop-shadow(0 0 3px rgba(255, 211, 77, 0.95))
    drop-shadow(0 0 8px rgba(255, 211, 77, 0.9))
    drop-shadow(0 0 18px rgba(255, 238, 170, 0.85))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
}
.breakthrough .rune-ring .orbit {
  /* 3x faster than default 32s */
  animation-duration: 10.6667s;
}
/* Boost rune strokes and contrast for legibility */
.breakthrough .rune-ring .runes {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) /* subtle dark outline */
    drop-shadow(0 0 2px rgba(255, 240, 200, 0.95))
    drop-shadow(0 0 10px rgba(255, 240, 200, 0.8));
  opacity: 1;
}
.breakthrough .rune-ring use {
  /* Override presentation attributes in <symbol> */
  stroke-width: 3.2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Breakthrough focus vignette */
.breakthrough {
  overflow: visible;
}

.breakthrough::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%),
    rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 2000;
}

.breakthrough .lotus-silhouette {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2001;
}

.breakthrough-progress {
  display: none;
  position: fixed;
  top: calc(50% + 120px);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  overflow: hidden;
  z-index: 2002;
}

.breakthrough-progress .fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--accent-2), var(--accent));
}

.breakthrough .breakthrough-progress {
  display: block;
}

/* MYSTIC-REALM-UPDATE: Lotus silhouette with breathing animation */
.lotus-silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  z-index: 5;
  animation: breathingAura 6s ease-in-out infinite;
}

.lotus-silhouette::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Inner silhouette base fill */
  background: linear-gradient(180deg, rgba(55, 65, 81, 0.95), rgba(31, 41, 55, 0.95));
  /* Clip to the exact SVG silhouette */
  clip-path: url(#silhouetteClip);
  -webkit-clip-path: url(#silhouetteClip);
  z-index: 0; /* Below foundation-fill (1) */
}

.lotus-silhouette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  filter: none;
  opacity: 0;
}

/* Particle halo around head/upper body */
.particle-halo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  pointer-events: none;
  z-index: 3;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 215, 0, 0.7) 50%, transparent 100%);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 4s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}

.particle-1 { 
  top: 15%; 
  left: 45%; 
  animation-delay: 0s;
}
.particle-2 { 
  top: 20%; 
  left: 55%; 
  animation-delay: -0.5s;
}
.particle-3 { 
  top: 25%; 
  left: 40%; 
  animation-delay: -1s;
}
.particle-4 { 
  top: 30%; 
  left: 60%; 
  animation-delay: -1.5s;
}
.particle-5 { 
  top: 35%; 
  left: 35%; 
  animation-delay: -2s;
}
.particle-6 { 
  top: 40%; 
  left: 65%; 
  animation-delay: -2.5s;
}
.particle-7 { 
  top: 45%; 
  left: 30%; 
  animation-delay: -3s;
}
.particle-8 { 
  top: 50%; 
  left: 70%; 
  animation-delay: -3.5s;
}
.particle-9 { 
  top: 18%; 
  left: 50%; 
  animation-delay: -0.8s;
}
.particle-10 { 
  top: 42%; 
  left: 48%; 
  animation-delay: -2.2s;
}

@keyframes particleFloat {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(0px) scale(0.8);
  }
  20% { 
    opacity: 0.6; 
    transform: translateY(-3px) scale(1);
  }
  50% { 
    opacity: 1; 
    transform: translateY(-8px) scale(1.2);
  }
  80% { 
    opacity: 0.4; 
    transform: translateY(-5px) scale(0.9);
  }
}

/* Foundation filling animation */
.foundation-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    /* Aurora borealis base layers */
    radial-gradient(ellipse 300px 200px at 30% 50%, rgba(74, 222, 128, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 250px 150px at 70% 30%, rgba(34, 197, 94, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 200px 100px at 50% 70%, rgba(16, 185, 129, 0.35) 0%, transparent 50%),
    /* Main liquid gradient */
    radial-gradient(ellipse at 50% 100%, rgba(74, 222, 128, 0.9) 0%, rgba(34, 197, 94, 0.8) 40%, rgba(16, 185, 129, 0.7) 80%),
    linear-gradient(0deg,
      rgba(74, 222, 128, 1.0) 0%,
      rgba(34, 197, 94, 0.9) 25%,
      rgba(16, 185, 129, 0.8) 50%,
      rgba(5, 150, 105, 0.7) 75%,
      rgba(6, 120, 85, 0.6) 100%
    );
  /* Clip to exact silhouette shape via SVG path */
  clip-path: url(#silhouetteClip);
  -webkit-clip-path: url(#silhouetteClip);
  /* Liquid fill with wave effects */
  mask: 
    linear-gradient(0deg, 
      black 0%, 
      black calc(var(--fill-height, 0%) - 2%), 
      black var(--fill-height, 0%), 
      transparent calc(var(--fill-height, 0%) + 1%)
    );
  -webkit-mask: 
    linear-gradient(0deg, 
      black 0%, 
      black calc(var(--fill-height, 0%) - 2%), 
      black var(--fill-height, 0%), 
      transparent calc(var(--fill-height, 0%) + 1%)
    );
  animation: auroraShimmer 6s ease-in-out infinite;
  animation-play-state: paused;
}

.foundation-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    /* Liquid surface waves */
    radial-gradient(ellipse 180px 12px at 30% var(--fill-height, 0%), 
      rgba(74, 222, 128, 0.6) 0%, 
      rgba(34, 197, 94, 0.4) 50%,
      transparent 80%
    ),
    radial-gradient(ellipse 160px 10px at 70% calc(var(--fill-height, 0%) - 1%), 
      rgba(34, 197, 94, 0.5) 0%, 
      rgba(16, 185, 129, 0.3) 50%,
      transparent 80%
    ),
    radial-gradient(ellipse 140px 8px at 50% calc(var(--fill-height, 0%) + 0.5%), 
      rgba(16, 185, 129, 0.4) 0%, 
      transparent 70%
    );
  clip-path: inherit;
  mask: 
    linear-gradient(0deg, 
      black 0%, 
      black calc(var(--fill-height, 0%) - 3%), 
      black calc(var(--fill-height, 0%) + 2%), 
      transparent calc(var(--fill-height, 0%) + 4%)
    );
  -webkit-mask: 
    linear-gradient(0deg, 
      black 0%, 
      black calc(var(--fill-height, 0%) - 3%), 
      black calc(var(--fill-height, 0%) + 2%), 
      transparent calc(var(--fill-height, 0%) + 4%)
    );
  animation: liquidShimmer 3s ease-in-out infinite;
  animation-play-state: paused;
}

.foundation-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    /* Liquid depth and movement */
    radial-gradient(ellipse 200px 15px at 40% calc(var(--fill-height, 0%) - 0.5%), 
      rgba(74, 222, 128, 0.3) 0%, 
      transparent 60%
    ),
    radial-gradient(ellipse 160px 12px at 60% calc(var(--fill-height, 0%) + 0.5%), 
      rgba(34, 197, 94, 0.25) 0%, 
      transparent 60%
    );
  clip-path: inherit;
  mask: 
    linear-gradient(0deg, 
      black 0%, 
      black calc(var(--fill-height, 0%) - 1%), 
      transparent calc(var(--fill-height, 0%) + 2%)
    );
  -webkit-mask: 
    linear-gradient(0deg, 
      black 0%, 
      black calc(var(--fill-height, 0%) - 1%), 
      transparent calc(var(--fill-height, 0%) + 2%)
    );
  animation: liquidFlow 4s ease-in-out infinite reverse;
  animation-play-state: paused;
}

.foundation-fill.filling,
.foundation-fill.filling::before,
.foundation-fill.filling::after {
  animation-play-state: running;
}

 

/* Visible silhouette SVG styled as an outline */
.lotus-silhouette .silhouette-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.lotus-silhouette .silhouette-svg path {
  --sil-stroke: #0f766e; /* teal-700 outline */
  --sil-glow: #5eead4;   /* mint glow */
  fill: none;
  stroke: var(--sil-stroke);
  stroke-width: 3.2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Soft mint inner glow */
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--sil-glow) 55%, transparent));
}

@keyframes liquidShimmer {
  0%, 100% { 
    opacity: 0.6;
    transform: translateY(0px) translateX(0px);
  }
  33% { 
    opacity: 0.8;
    transform: translateY(-1px) translateX(1px);
  }
  66% { 
    opacity: 1;
    transform: translateY(-2px) translateX(-0.5px);
  }
}

@keyframes liquidFlow {
  0%, 100% { 
    opacity: 0.4;
    transform: translateY(0px) translateX(0px) scale(1);
  }
  25% { 
    opacity: 0.6;
    transform: translateY(0.5px) translateX(-1px) scale(1.02);
  }
  50% { 
    opacity: 0.8;
    transform: translateY(-0.5px) translateX(1px) scale(0.98);
  }
  75% { 
    opacity: 0.5;
    transform: translateY(1px) translateX(0.5px) scale(1.01);
  }
}

@keyframes auroraShimmer {
  0%, 100% { 
    background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%, 0% 0%;
    filter: brightness(1) hue-rotate(0deg);
  }
  20% { 
    background-position: 20% 10%, 80% 90%, 30% 70%, 10% 10%, 0% 0%;
    filter: brightness(1.1) hue-rotate(5deg);
  }
  40% { 
    background-position: 40% 20%, 60% 80%, 70% 30%, 20% 20%, 0% 0%;
    filter: brightness(1.2) hue-rotate(-3deg);
  }
  60% { 
    background-position: 60% 30%, 40% 70%, 20% 80%, 30% 30%, 0% 0%;
    filter: brightness(1.15) hue-rotate(8deg);
  }
  80% { 
    background-position: 80% 40%, 20% 60%, 80% 20%, 40% 40%, 0% 0%;
    filter: brightness(1.05) hue-rotate(-2deg);
  }
}

/* Foundation seal above silhouette head */
.foundation-display {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 15;
}

.foundation-seal {
  position: relative;
  width: 60px;
  height: 40px;
  background: 
    radial-gradient(ellipse at center, 
      rgba(218, 165, 32, 0.95) 0%,
      rgba(184, 134, 11, 0.9) 30%,
      rgba(146, 107, 9, 0.85) 70%,
      rgba(120, 88, 7, 0.8) 100%
    );
  border-radius: 20px;
  border: 2px solid rgba(255, 215, 0, 0.6);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  animation: foundationAura 3s ease-in-out infinite;
}

.foundation-seal::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: 
    radial-gradient(ellipse at 30% 30%, 
      rgba(255, 255, 255, 0.4) 0%, 
      transparent 50%
    );
  border-radius: 17px;
  pointer-events: none;
}

.foundation-seal::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: 
    radial-gradient(ellipse at center, 
      rgba(255, 215, 0, 0.15) 0%, 
      rgba(255, 215, 0, 0.08) 40%,
      transparent 70%
    );
  border-radius: 24px;
  animation: sealGlow 4s ease-in-out infinite;
  z-index: -1;
}

.foundation-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif;
  color: rgba(139, 69, 19, 1);
  text-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 8px rgba(255, 215, 0, 0.3);
  letter-spacing: 0.3px;
  line-height: 1.1;
}

.foundation-label {
  font-size: 7px;
  font-weight: 500;
  display: block;
  margin-bottom: 1px;
  opacity: 0.9;
}

.foundation-numbers {
  font-size: 9px;
  font-weight: 700;
  display: block;
  transition: all 0.3s ease;
}

.foundation-numbers.flash {
  color: rgba(255, 255, 255, 1);
  text-shadow: 
    0 0 8px rgba(255, 215, 0, 0.8),
    0 0 16px rgba(255, 255, 255, 0.6);
  animation: foundationFlash 0.6s ease-out;
}

.foundation-numbers.pulse-max {
  animation: foundationPulse 2s ease-in-out infinite;
}

@keyframes foundationAura {
  0%, 100% { 
    box-shadow: 
      inset 0 1px 2px rgba(255, 255, 255, 0.3),
      inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  }
  50% { 
    box-shadow: 
      inset 0 1px 2px rgba(255, 255, 255, 0.4),
      inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  }
}

@keyframes sealGlow {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes foundationFlash {
  0% { 
    color: rgba(139, 69, 19, 1);
    text-shadow: 
      0 1px 0 rgba(255, 255, 255, 0.5),
      0 -1px 0 rgba(0, 0, 0, 0.3),
      0 0 8px rgba(255, 215, 0, 0.3);
  }
  50% { 
    color: rgba(255, 255, 255, 1);
    text-shadow: 
      0 0 12px rgba(255, 215, 0, 1),
      0 0 24px rgba(255, 255, 255, 0.8),
      0 0 36px rgba(255, 215, 0, 0.6);
    transform: scale(1.1);
  }
  100% { 
    color: rgba(139, 69, 19, 1);
    text-shadow: 
      0 1px 0 rgba(255, 255, 255, 0.5),
      0 -1px 0 rgba(0, 0, 0, 0.3),
      0 0 8px rgba(255, 215, 0, 0.3);
  }
}

@keyframes foundationPulse {
  0%, 100% { 
    color: rgba(139, 69, 19, 1);
    text-shadow: 
      0 1px 0 rgba(255, 255, 255, 0.5),
      0 -1px 0 rgba(0, 0, 0, 0.3),
      0 0 8px rgba(255, 215, 0, 0.3);
  }
  50% { 
    color: rgba(255, 215, 0, 1);
    text-shadow: 
      0 0 8px rgba(255, 215, 0, 0.8),
      0 0 16px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
  }
}

/* Qi display below foundation */
.qi-display {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  width: 50%;
}

.qi-display span {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(30, 144, 255, 0.9);
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 6px rgba(30, 144, 255, 0.4);
  letter-spacing: 0.3px;
  display: inline;
  margin-bottom: 2px;
}

/* Foundation inline numbers above Qi bar */
.qi-display .foundation-inline {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-shadow: none;
  margin-bottom: 4px;
}

/* Preserve visual feedback for foundation changes */
.qi-display .foundation-inline.flash {
  animation: foundationFlash 0.6s ease-out;
}
.qi-display .foundation-inline.pulse-max {
  animation: foundationPulse 2s ease-in-out infinite;
}

/* Remove old medallion and backdrop */
.foundation-display { display: none !important; }
.qi-bar-silhouette {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(30, 144, 255, 0.3);
}

.qi-fill-silhouette {
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(135, 206, 250, 0.9) 0%,
    rgba(30, 144, 255, 0.9) 50%,
    rgba(0, 191, 255, 0.9) 100%
  );
  width: 0%;
  transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(30, 144, 255, 0.4);
}

/* Cultivation controls card */
.cultivation-controls-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cultivation-controls-card h4 {
  color: rgba(139, 69, 19, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  font-family: 'Cinzel', serif;
  margin-bottom: 12px;
}

.cultivation-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 12px;
}

.cultivation-btn {
  width: 100%;
  padding: 8px 12px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid;
  background: 
    linear-gradient(135deg, rgba(245, 245, 220, 0.9) 0%, rgba(240, 235, 210, 0.8) 100%);
  color: rgba(139, 69, 19, 0.9);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(139, 117, 95, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.cultivation-btn:hover {
  transform: translateY(-1px);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(139, 117, 95, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.15);
}

.cultivation-btn:active {
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(220, 210, 190, 0.7), rgba(245, 238, 218, 0.7));
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.cultivation-btn.primary {
  border-color: rgba(34, 197, 94, 0.6);
}

.cultivation-btn.warn {
  border-color: rgba(239, 68, 68, 0.6);
}

.cultivation-btn.secondary {
  border-color: rgba(139, 117, 95, 0.6);
}

.cultivation-rate {
  font-size: 12px;
  color: rgba(139, 69, 19, 0.7);
  text-align: center;
  font-family: 'Cinzel', serif;
  background: rgba(245, 245, 220, 0.3);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(139, 117, 95, 0.2);
}

/* Qi streams */
.qi-stream {
  position: absolute;
  width: 3px;
  height: 100%;
  background: linear-gradient(0deg, 
    rgba(74, 222, 128, 0.9) 0%,
    rgba(34, 197, 94, 0.7) 30%,
    rgba(16, 185, 129, 0.5) 60%,
    rgba(5, 150, 105, 0.3) 80%,
    transparent 100%
  );
  border-radius: 2px;
  opacity: 0.6;
  animation: qiFlow 2s ease-in-out infinite;
  filter: blur(0.5px);
}

.stream-1 {
  left: 35%;
  animation-delay: 0s;
  transform: rotate(-2deg);
}

.stream-2 {
  left: 50%;
  animation-delay: -1.3s;
  transform: rotate(1deg);
}

.stream-3 {
  left: 65%;
  animation-delay: -2.7s;
  transform: rotate(-1deg);
}

@keyframes qiFlow {
  0%, 100% { 
    opacity: 0.4; 
    transform: translateY(15px) scaleY(0.8); 
    filter: blur(1px);
  }
  50% { 
    opacity: 0.9; 
    transform: translateY(-8px) scaleY(1.1); 
    filter: blur(0.3px);
  }
}

/* Qi mist */
.qi-mist {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 80%, rgba(74, 222, 128, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(34, 197, 94, 0.08) 0%, transparent 50%);
  animation: mistFlow 4s ease-in-out infinite;
}

@keyframes mistFlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Chest area and Yin-Yang */
.chest-area {
  position: absolute;
  top: 65.8%;
  left: 50.2%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  z-index: 10;
}

.yin-yang-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.yin-yang {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, #1f2937 50%, #f0f0f0 50%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  animation: yinYangPulse 3s ease-in-out infinite;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.yang {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #f0f0f0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
}

.yin {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9px;
  height: 9px;
  background: #1f2937;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
}

.yang-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 2px;
  height: 2px;
  background: #1f2937;
  border-radius: 50%;
}

.yin-dot {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 2px;
  height: 2px;
  background: #f0f0f0;
  border-radius: 50%;
}

.inner-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
  animation: innerGlowPulse 3s ease-in-out infinite;
  transition: background 1s ease;
}

@keyframes yinYangPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes innerGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Ornamental outline */
.ornamental-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ornamental-outline::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(139, 117, 95, 0.2);
  border-radius: 50%;
  background: transparent;
  animation: ornamentalRotate 120s linear infinite;
}

.ornamental-outline::after {
  content: '';
  position: absolute;
  inset: -15px;
  border: 1px solid rgba(160, 140, 115, 0.15);
  border-radius: 50%;
  background: transparent;
  animation: ornamentalRotate 180s linear infinite reverse;
}

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

/* Progressive bloom and particle effects based on foundation progress */
.foundation-progress-25 .lotus-bloom {
  opacity: 0.3;
}
.foundation-progress-25 .bloom-petal {
  opacity: 0.4;
  transform: translateX(-50%) rotate(var(--petal-rotation)) scale(0.7);
}
.foundation-progress-25 .particle {
  opacity: 0.3;
}

.foundation-progress-50 .lotus-bloom {
  opacity: 0.5;
}
.foundation-progress-50 .bloom-petal {
  opacity: 0.6;
  transform: translateX(-50%) rotate(var(--petal-rotation)) scale(0.85);
}
.foundation-progress-50 .particle {
  opacity: 0.5;
}

.foundation-progress-75 .lotus-bloom {
  opacity: 0.7;
}
.foundation-progress-75 .bloom-petal {
  opacity: 0.8;
  transform: translateX(-50%) rotate(var(--petal-rotation)) scale(1);
}
.foundation-progress-75 .particle {
  opacity: 0.7;
}

.foundation-progress-90 .lotus-bloom {
  opacity: 0.9;
}
.foundation-progress-90 .bloom-petal {
  opacity: 1;
  transform: translateX(-50%) rotate(var(--petal-rotation)) scale(1.1);
  animation: petalGlow 2s ease-in-out infinite;
}
.foundation-progress-90 .particle {
  opacity: 0.9;
  animation: particleFloatIntense 2s ease-in-out infinite;
}

/* Near breakthrough effects */
.near-breakthrough .lotus-bloom {
  opacity: 1;
  animation: bloomPulse 1.5s ease-in-out infinite;
}
.near-breakthrough .bloom-petal {
  opacity: 1;
  transform: translateX(-50%) rotate(var(--petal-rotation)) scale(1.2);
  animation: petalGlowIntense 1s ease-in-out infinite;
}
.near-breakthrough .particle {
  opacity: 1;
  animation: particleFloatRapid 1s ease-in-out infinite;
}

@keyframes petalGlow {
  0%, 100% { 
    filter: brightness(1) drop-shadow(0 0 5px rgba(74, 222, 128, 0.3));
  }
  50% { 
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(74, 222, 128, 0.6));
  }
}

@keyframes petalGlowIntense {
  0%, 100% { 
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(74, 222, 128, 0.5));
  }
  50% { 
    filter: brightness(1.5) drop-shadow(0 0 15px rgba(74, 222, 128, 0.8));
  }
}

@keyframes bloomPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes particleFloatIntense {
  0%, 100% { 
    opacity: 0.7; 
    transform: translateY(0px) scale(1);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  }
  50% { 
    opacity: 1; 
    transform: translateY(-10px) scale(1.3);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
  }
}

@keyframes particleFloatRapid {
  0%, 100% { 
    opacity: 0.9; 
    transform: translateY(0px) scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  }
  50% { 
    opacity: 1; 
    transform: translateY(-12px) scale(1.4);
    box-shadow: 0 0 15px rgba(255, 215, 0, 1);
  }
}

/* CSS custom properties for petal rotations */
.petal-1 { --petal-rotation: 0deg; }
.petal-2 { --petal-rotation: 45deg; }
.petal-3 { --petal-rotation: 90deg; }
.petal-4 { --petal-rotation: 135deg; }
.petal-5 { --petal-rotation: 180deg; }
.petal-6 { --petal-rotation: 225deg; }
.petal-7 { --petal-rotation: 270deg; }
.petal-8 { --petal-rotation: 315deg; }

/* STYLE-GUIDE-UPDATE: Soft realm-based inner glows for parchment theme */
.realm-mortal .inner-glow { background: radial-gradient(circle, rgba(139, 69, 19, 0.2) 0%, transparent 70%); }
.realm-qi-refining .inner-glow { background: radial-gradient(circle, rgba(34, 139, 34, 0.2) 0%, transparent 70%); }
.realm-foundation .inner-glow { background: radial-gradient(circle, rgba(65, 105, 225, 0.2) 0%, transparent 70%); }
.realm-core-formation .inner-glow { background: radial-gradient(circle, rgba(153, 50, 204, 0.2) 0%, transparent 70%); }
.realm-nascent-soul .inner-glow { background: radial-gradient(circle, rgba(255, 69, 0, 0.2) 0%, transparent 70%); }
.realm-spirit-transformation .inner-glow { background: radial-gradient(circle, rgba(184, 134, 11, 0.2) 0%, transparent 70%); }

/* Breakthrough proximity effects */
.near-breakthrough .yin-yang {
  animation: yinYangPulseRapid 1.5s ease-in-out infinite;
}

.near-breakthrough .inner-glow {
  animation: innerGlowPulseRapid 1.5s ease-in-out infinite;
}

@keyframes yinYangPulseRapid {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes innerGlowPulseRapid {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.cultivation-status-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cultivation-progress-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

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

.card-header h4 {
  margin: 0;
}

/* STYLE-GUIDE-UPDATE: Parchment header */
header{
  display:flex; align-items:center; justify-content:space-between; padding:18px 22px; gap:20px;
  background: linear-gradient(100deg, var(--panel) 0%, #ebe0c8 60%, #e6d5b8 100%);
  border-bottom:1px solid var(--accent);
  box-shadow: var(--shadow);
  position:relative; z-index:2;
}
.primary-row{display:flex; align-items:center; gap:20px;}
  .brand{display:flex; gap:14px; align-items:center}
.qi-orb{
  background:linear-gradient(135deg, var(--foundation-primary), var(--foundation-secondary)); 
  width:84px; 
  height:84px; 
  border-radius:50%; 
  position:relative;
  /* Fine-tuning controls for Yin-Yang fit */
  --yy-scale: 1.90;   /* +15% more from previous size */
  --yy-tx: -0.2px;    /* horizontal nudge (right positive) */
  --yy-ty: -0.2px;    /* vertical nudge (down positive) */
  /* Reduce outer glow radius and strength by ~10% */
  box-shadow:0 0 20px 7.2px rgba(34, 139, 34, 0.45), inset 0 0 9px 3.6px rgba(34, 139, 34, 0.22); 
  animation:pulse 3.4s ease-in-out infinite;
  transition: all 0.5s ease;
}
/* Ensure the Yin-Yang SVG sits above any orb glow layers */
.qi-orb > svg {
  position: absolute;
  /* Shrink white circular layer to 90% and center it */
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  z-index: 2;
  pointer-events: none;
  background: #ffffff;          /* white exactly under the symbol */
  border-radius: 50%;
  overflow: hidden;             /* hard-clip to circle bounds */
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

/* Make the Yin-Yang drawing fill the white circle exactly */
.qi-orb .yin-yang-svg {
  display: block;
}
.qi-orb .yin-yang-svg path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: translate(var(--yy-tx), var(--yy-ty)) scale(var(--yy-scale)); /* precise fit using tunable vars */
  shape-rendering: geometricPrecision;
  stroke: none; /* prevent thin outline from appearing at the edge */
}

/* Remove extra white ring: no pseudo-element needed */

/* STYLE-GUIDE-UPDATE: Soft foundation max glow */
.qi-orb.foundation-max {
  /* Reduce foundation-max glow sizes by ~10% as well */
  box-shadow:0 0 18px 5.4px rgba(34, 139, 34, 0.4), 0 0 27px 8.1px rgba(34, 139, 34, 0.2), inset 0 0 10.8px 3.6px rgba(34, 139, 34, 0.3);
  animation:foundation-shine 2s ease-in-out infinite;
}

.yin-yang {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background: linear-gradient(90deg, #1a1a1a 50%, #f0f0f0 50%);
  overflow: hidden;
}

.yang {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background: #f0f0f0;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  transform-origin: left center;
}

.yin {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #1a1a1a;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  transform-origin: right center;
}

.yang-dot {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 25%;
  height: 25%;
  background: #1a1a1a;
  border-radius: 50%;
  transform: translateX(-50%);
}

.yin-dot {
  position: absolute;
  bottom: 25%;
  left: 50%;
  width: 25%;
  height: 25%;
  background: #f0f0f0;
  border-radius: 50%;
  transform: translateX(-50%);
}

.yin-yang::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(187, 247, 208, 0.3) 0%, rgba(34, 197, 94, 0.2) 30%, rgba(14, 165, 233, 0.1) 100%);
  pointer-events: none;
}
@keyframes pulse{0%,100%{transform:scale(1); filter:brightness(1)} 50%{transform:scale(1.1); filter:brightness(1.2)}}
/* STYLE-GUIDE-UPDATE: Soft breathing foundation shine animation */
@keyframes foundation-shine{
  0%,100%{
    transform:scale(1); 
    filter:brightness(1.1) saturate(1.1);
    box-shadow:0 0 20px 6px rgba(34, 139, 34, 0.4), 0 0 30px 9px rgba(34, 139, 34, 0.2), inset 0 0 12px 4px rgba(34, 139, 34, 0.3);
  } 
  50%{
    transform:scale(1.08); 
    filter:brightness(1.2) saturate(1.2);
    box-shadow:0 0 25px 8px rgba(34, 139, 34, 0.5), 0 0 35px 12px rgba(34, 139, 34, 0.25), inset 0 0 15px 5px rgba(34, 139, 34, 0.4);
  }
}
h1{font-size:20px; margin:0; letter-spacing:.5px}
.sub{color:var(--muted); font-size:12px; margin-top:2px}

.topbar{display:flex; gap:14px; flex-wrap:wrap}
/* STYLE-GUIDE-UPDATE: Parchment chip style */
.chip{background:var(--panel); border:1px solid var(--accent); padding:8px 12px; border-radius:999px; font-size:12px; box-shadow: inset 0 1px 3px rgba(139, 117, 95, 0.2);}
.status-card{position:relative;background:var(--panel);border:1px solid rgba(45,37,32,0.25);padding:12px;border-radius:8px;margin-bottom:var(--gap);}
.status-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(rgba(0,0,0,0.03),rgba(0,0,0,0.03)),radial-gradient(circle at 30% 20%,rgba(45,37,32,0.04)0%,transparent 60%),radial-gradient(circle at 80% 70%,rgba(45,37,32,0.03)0%,transparent 55%);}
.status-card h4{margin:0 0 8px 0;font-size:13px;}
.status-metric{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:6px;margin-bottom:4px;}
.status-metric:last-child{margin-bottom:0;}
.status-label{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;white-space:nowrap;}
.status-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:500;text-align:right;width:60px;}
.status-bar{position:relative;width:100%;height:8px;background:rgba(0,0,0,0.1);border-radius:4px;min-width:0;overflow:hidden;}
.hp-bar,.qi-bar{height:8px;}
.hp-bar{background:rgba(239,68,68,0.3);}
.hp-bar .fill{height:100%;background:linear-gradient(90deg,#ef4444,#f87171);border-radius:4px;transition:width 0.3s ease;width:0%;}
.qi-bar{background:rgba(37,99,235,0.3);}
.qi-bar .qi-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:4px;transition:width 0.3s ease;width:0%;}
.status-metric .sr-only{grid-column:1/-1;}
.shield-overlay{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; transition:width 0.2s linear;}
.shield-fill{fill:rgba(0,255,255,0.6); height:100%; transition:width 0.2s linear;}
.shield-shimmer{height:100%; transition:width 0.2s linear; animation:shield-shimmer 1.5s linear infinite; opacity:0.6;}
@keyframes shield-shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
html.reduce-motion .shield-overlay,html.reduce-motion .shield-fill,html.reduce-motion .shield-shimmer{transition:none;}
html.reduce-motion .shield-shimmer{animation:none;}

  main{display:grid; grid-template-columns:280px 1fr; height:calc(100% - var(--header-h))}
  .sidebar-footer{margin-top:auto;}

/* STYLE-GUIDE-UPDATE: Left stats panel with parchment texture */
.left{
  border-right:1px solid var(--accent); 
  background: linear-gradient(180deg, var(--panel), #ebe0c8);
  padding:16px; overflow:auto;
  box-shadow: inset 2px 0 8px rgba(139, 117, 95, 0.1);
}

/* STYLE-GUIDE-UPDATE: Food Slots with parchment texture */
.food-slots-container {
  margin-top: 20px;
  padding: 15px;
  background: linear-gradient(135deg, var(--panel) 0%, #ebe0c8 100%);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(139, 117, 95, 0.15);
}

/* STYLE-GUIDE-UPDATE: Food container header */
.food-slots-container h4 {
  margin: 0 0 10px 0;
  color: var(--gold);
  text-align: center;
  font-weight: bold;
}

.food-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

/* STYLE-GUIDE-UPDATE: Food slot with parchment style */
.food-slot {
  display: flex;
  align-items: center;
  padding: 8px;
  background: rgba(240, 234, 216, 0.5);
  border: 1px solid var(--muted);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* STYLE-GUIDE-UPDATE: Food slot hover */
.food-slot:hover {
  border-color: var(--accent);
  background: rgba(139, 69, 19, 0.15);
}

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

.food-slot.empty {
  opacity: 0.6;
}

.food-icon {
  font-size: 16px;
  margin-right: 8px;
}

/* STYLE-GUIDE-UPDATE: Food name text */
.food-name {
  flex: 1;
  font-size: 12px;
  color: var(--ink);
}

.food-cooldown {
  font-size: 10px;
  color: #FF6B6B;
  font-weight: bold;
}

.food-actions {
  text-align: center;
}

.btn.small {
  padding: 4px 8px;
  font-size: 11px;
}

/* Cooking System */
.cooking-recipe {
  padding: 15px;
}

.recipe-input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  gap: 20px;
}

.ingredient {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  border-radius: 6px;
  min-width: 120px;
}

.ingredient-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.ingredient-info {
  text-align: center;
}

.ingredient-name {
  font-weight: bold;
  color: #D4AF37;
  margin-bottom: 4px;
}

.ingredient-count {
  font-size: 12px;
  color: #ccc;
}

.recipe-arrow {
  font-size: 24px;
  color: #4A90E2;
  font-weight: bold;
}

.recipe-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.cook-input {
  width: 60px;
  padding: 4px 8px;
  background: #333;
  border: 1px solid #666;
  border-radius: 4px;
  color: white;
  text-align: center;
}

.recipe-info {
  text-align: center;
}

.recipe-info .muted {
  margin: 4px 0;
}

/* Equipment Section */
.equipment-section {
  margin-bottom: 20px;
}

.equipment-section h4 {
  margin: 0 0 10px 0;
  color: #D4AF37;
  font-weight: bold;
}

.equipment-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid #444;
}

.equipment-item:last-child {
  border-bottom: none;
}

.equipment-details {
  flex: 1;
  margin-right: 8px;
}

/* Food Inventory */
.food-inventory {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.food-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.food-item:hover {
  border-color: #8B4513;
  background: rgba(139, 69, 19, 0.1);
}

.food-item-icon {
  font-size: 20px;
  margin-right: 12px;
}

.food-item-info {
  flex: 1;
}

.food-item-name {
  font-weight: bold;
  color: #D4AF37;
  margin-bottom: 2px;
}

.food-item-count {
  font-size: 14px;
  color: #4A90E2;
  font-weight: bold;
  margin-bottom: 2px;
}

.food-item-desc {
  font-size: 11px;
  color: #ccc;
}

/* Adventure Tabs Card */

.adventure-tab-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--accent);
}

.adventure-tab-btn {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  font-family: 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.adventure-tab-btn:hover {
  background: rgba(139, 69, 19, 0.05);
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.adventure-tab-btn.active {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-weight: 600;
  box-shadow: none;
}

.adventure-tab-content {
  display: none;
}

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

/* Cultivation Sub Tabs */
.cultivation-tabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--accent);
  width: fit-content;
  background: transparent;
}

.cultivation-tab-btn {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  font-family: 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.cultivation-tab-btn:hover {
  background: rgba(139, 69, 19, 0.05);
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.cultivation-tab-btn.active {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-weight: 600;
  box-shadow: none;
}

/* Mind Activity Tabs */
.mind-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  border-bottom: 1px solid #3b82f6;
}

.mind-tab-btn {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid #3b82f6;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  font-family: 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.mind-tab-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--ink);
  border-bottom-color: #2563eb;
}

.mind-tab-btn.active {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid #2563eb;
  font-weight: 600;
  box-shadow: none;
}

.mind-tab-content {
  display: none;
}

.card.maxed {
  opacity: 0.5;
}

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

.cultivation-tab-content {
  display: none;
}

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

/* Gear Sub Tabs */
.gear-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--accent);
}

.gear-tab-btn {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  font-family: 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.gear-tab-btn:hover {
  background: rgba(139, 69, 19, 0.05);
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.gear-tab-btn.active {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-weight: 600;
  box-shadow: none;
}

.gear-tab-content {
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--log-h) + env(safe-area-inset-bottom,0px));
}

.gear-tab-content::after {
  content: "";
  display: block;
  height: var(--log-h);
}

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

/* Settings Tabs */
.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--accent);
}

.settings-tab-btn {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  font-family: 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.settings-tab-btn:hover {
  background: rgba(139, 69, 19, 0.05);
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.settings-tab-btn.active {
  background: transparent;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-weight: 600;
  box-shadow: none;
}

.settings-tab-content {
  display: none;
}

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

/* Gear Slots */
.equip-slots {
  display: grid;
  gap: 8px;
  grid-template-columns: auto auto auto;
  grid-template-areas:
    ". head rings"
    "weapon body rings"
    ". foot talismans";
  justify-content: center;
}

.gear-slot-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.food-slot-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-start;
}

.gear-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--ink);
  border-radius: var(--slot-radius);
  padding: var(--slot-pad);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  min-width: 31px;
  min-height: 31px;
  cursor: pointer;
  color: var(--ink);
}

.gear-slot.empty {
  border-style: dashed;
  color: var(--muted);
}

.gear-slot.size-s { width: var(--slotS); height: var(--slotS); }
.gear-slot.size-m { width: var(--slotM); height: var(--slotM); }
.gear-slot.size-l { width: var(--slotL-w); height: var(--slotL-h); }

.gear-slot .slot-icon {
  width: 72%;
  height: 72%;
  stroke-width: var(--outline-stroke);
  pointer-events: none;
}

.gear-slot.size-s .slot-icon { width: 70%; height: 70%; }
.gear-slot.size-l .slot-icon { width: 75%; height: 75%; }

.gear-slot .slot-icon.placeholder {
  opacity: 0.4;
}

#slot-mainhand { grid-area: weapon; }
#slot-head { grid-area: head; }
#slot-body { grid-area: body; }
#slot-foot { grid-area: foot; }
#ring-slots { grid-area: rings; }
#talisman-slots { grid-area: talismans; }

#slot-head, #slot-foot {
  width: var(--slotL-w);
}

.gear-slot .slot-empty-label {
  font-size: 10px;
  margin-top: 4px;
}

.gear-slot .unequip-chip {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper, var(--panel));
  cursor: pointer;
}

.gear-slot .slot-info {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 12px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.gear-slot .rarity-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 4px;
  left: 4px;
}

.gear-slot .count-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--ink);
  color: var(--paper, var(--panel));
  font-size: 10px;
  border-radius: 8px;
  padding: 0 3px;
}

.gear-slot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ability-slot,
.available-ability {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}

/* Bestiary Styles */
.bestiary-list {
  max-height: 300px;
  overflow-y: auto;
}

.bestiary-entry {
  border: 1px solid #444;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.bestiary-entry:hover {
  border-color: #9C27B0;
  background: rgba(156, 39, 176, 0.1);
}

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

.bestiary-name {
  font-weight: bold;
  color: #D4AF37;
  font-size: 14px;
}

.bestiary-kills {
  font-size: 12px;
  color: #9C27B0;
  font-weight: bold;
}

.bestiary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}

.bestiary-stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.bestiary-info {
  font-size: 11px;
  color: #ccc;
  display: flex;
  justify-content: space-between;
}

.bestiary-zone {
  color: #4A90E2;
}

.bestiary-loot {
  color: #FFD700;
}

.bestiary-locked {
  opacity: 0.5;
  font-style: italic;
  color: #666;
  text-align: center;
  padding: 20px;
}

/* Activity Selectors */
.activity-selector {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.activity-selector:hover {
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.activity-selector.active {
  border-color: #22c55e;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
}

.activity-selector.running {
  border-color: #3b82f6;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.activity-name {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 6px;
}

.activity-bar {
  height: 6px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.activity-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  width: 0%;
  transition: width 0.4s ease;
  border-radius: 3px;
}

.activity-info {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}

/* Training Dummy */
.training-dummy {
  text-align: center;
  margin: 16px 0;
}

.dummy-body {
  font-size: 48px;
  cursor: pointer;
  transition: transform 0.1s ease;
  user-select: none;
}

.dummy-body:hover {
  transform: scale(1.1);
}

.dummy-body:active {
  transform: scale(0.95);
}

/* Activity Content Panels */
.activity-content {
  padding: 20px;
  background: transparent;
}

.activity-content h2 {
  margin-bottom: 20px;
  color: #c7d2fe;
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
  padding-bottom: 10px;
}

/* Mining Resource Selection */
.mining-resources {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.resource-option {
  position: relative;
}

.resource-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.resource-option label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.resource-option label:hover {
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.resource-option input[type="radio"]:checked + label {
  border-color: #22c55e;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.resource-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.resource-name {
  flex: 1;
  font-weight: 600;
  color: var(--ink);
}

.resource-rate {
  font-size: 12px;
  color: #22c55e;
  font-weight: 500;
}

/* Timing-Based Training Interface */
.training-interface {
  margin: 16px 0;
}

.timing-bar-container {
  margin: 16px 0;
  padding: 20px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
  border-radius: 12px;
  border: 2px solid rgba(59, 130, 246, 0.3);
}

.timing-bar {
  position: relative;
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #dc2626, #f59e0b, #22c55e, #f59e0b, #dc2626);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.perfect-zone {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.8), rgba(16, 185, 129, 0.9));
  border: 2px solid #22c55e;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.6);
  animation: perfectZonePulse 2s ease-in-out infinite;
}

.timing-cursor {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transform: translateX(-50%);
}

/* Session-Based Training Interface */
.session-controls {
  text-align: center;
  padding: 20px;
}

.training-game {
  padding: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
  border-radius: 12px;
  border: 2px solid rgba(34, 197, 94, 0.3);
  margin-top: 16px;
}

.game-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.btn.large {
  font-size: 18px;
  padding: 16px 32px;
  min-width: 150px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  transition: all 0.2s ease;
}

.btn.large:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn.large:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.session-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}

/* STYLE-GUIDE-UPDATE: Session info with parchment style */
.session-info .stat {
  background: rgba(240, 234, 216, 0.9);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  text-align: center;
  font-size: 12px;
  color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(139, 117, 95, 0.1);
}

/* STYLE-GUIDE-UPDATE: Parchment panel with silk texture */
.panel{
  background:linear-gradient(180deg, var(--panel), #ebe0c8);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:14px;
  box-shadow:var(--shadow), inset 0 1px 3px rgba(45, 37, 32, 0.1);
  position: relative;
}
.panel::before{content:''; position:absolute; inset:0; background: radial-gradient(circle at 20% 30%, rgba(139, 117, 95, 0.05) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(160, 140, 115, 0.03) 0%, transparent 50%); border-radius:var(--radius); pointer-events:none;}
.panel h3{margin:0 0 10px; font-size:14px; color:var(--ink); letter-spacing:.3px; position:relative; z-index:1;}

/* STYLE-GUIDE-UPDATE: Parchment progress bar */
.bar{
  height:14px; 
  background:#dcd0b4;
  border-radius:999px; 
  position:relative; 
  overflow:hidden; 
  border:1px solid rgba(139, 117, 95, 0.2);
  box-shadow: inset 0 2px 4px rgba(45, 37, 32, 0.15);
}
.fill{
  height:100%;
  background:linear-gradient(90deg, var(--foundation-secondary), var(--foundation-primary));
  width:0%;
  transition:width .4s ease;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Physique training bars */
#physiqueFillActivity,
#staminaFill{
  background:linear-gradient(90deg, #ef4444, #dc2626);
  box-shadow:0 0 8px rgba(239, 68, 68, 0.4);
}

/* STYLE-GUIDE-UPDATE: Parchment stat text */
.stat{display:flex; justify-content:space-between; font-size:13px; margin:8px 0; color:var(--ink); position:relative; z-index:1;}
.row{display:flex; gap:10px; flex-wrap:wrap}
/* STYLE-GUIDE-UPDATE: Parchment button styles */
.btn{
  background: linear-gradient(180deg, rgba(245, 238, 218, 0.7), rgba(220, 210, 190, 0.7));
  color: var(--ink-color);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .2s ease;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.5);
  letter-spacing:.5px;
  text-shadow: 0 1px 0 rgba(255,255,240,0.6);
}
.btn:hover{
  background: linear-gradient(180deg, rgba(250, 245, 225, 0.8), rgba(225, 215, 195, 0.8));
  transform:translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.6);
}
.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.btn.primary{background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-color:transparent; color: #f8f5f0;}
.btn.warn{background:#ebe0c8; border-color:var(--danger); color:var(--danger);}
.btn.ghost{background:transparent; box-shadow: none;}
.btn.small{padding:4px 8px; font-size:12px}
.grid{display:grid; gap:12px}

/* STYLE-GUIDE-UPDATE: Content area with parchment background */
.content{position:relative; overflow:auto; padding:16px 16px 100px 16px; background: transparent; z-index: 10}
.content > section{display:none}

/* STYLE-GUIDE-UPDATE: Cards with parchment texture */
.cards{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:14px}
.card{background: var(--panel); border:1px solid rgba(45, 37, 32, 0.35); border-radius:var(--radius); padding:14px; box-shadow: 0 10px 25px rgba(45, 37, 32, 0.2), 0 4px 8px rgba(45, 37, 32, 0.15); position: relative;}
.card::before{content:''; position:absolute; inset:0; background: radial-gradient(circle at 25% 25%, rgba(139, 117, 95, 0.04) 0%, transparent 60%), radial-gradient(circle at 75% 75%, rgba(160, 140, 115, 0.03) 0%, transparent 50%); border-radius:var(--radius); pointer-events:none;}
.card h4{margin:0 0 8px; font-size:15px}
.muted{color:var(--muted); font-size:12px}

/* Adventure Layout - MAP-UI-UPDATE */
.adventure-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* use min-height so content like the proficiency card isn't clipped on mobile */
  min-height: calc(100dvh - 120px);
}

.adventure-progress-container {
  background: linear-gradient(180deg, #0f172a, #0b1222);
  border: 1px solid #1f2937;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.adventure-progress-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding: 4px;
  min-height: 40px;
}

.progress-segment {
  min-width: 60px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  position: relative;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.progress-segment.unlocked {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  border-color: var(--accent);
  color: #0b0f17;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
}

.progress-segment.locked {
  background: linear-gradient(135deg, #374151, #1f2937);
  border-color: #4b5563;
  color: var(--muted);
}

.progress-segment.current {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
  animation: currentGlow 2s ease-in-out infinite alternate;
}

@keyframes currentGlow {
  from { box-shadow: 0 0 12px rgba(251, 191, 36, 0.5); }
  to { box-shadow: 0 0 20px rgba(251, 191, 36, 0.8); }
}

.progress-segment .lock-icon {
  font-size: 14px;
  opacity: 0.7;
}

.player-icon {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, var(--gold), #f59e0b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  z-index: 10;
  transition: left 0.5s ease-in-out;
}

.adventure-progress-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-kills {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}

.adventure-cards {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  min-height: 0;
}

.expanded-battle {
  display: flex;
  flex-direction: column;
  min-height: 500px;
}

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

.battle-header h4 {
  margin: 0;
}

.map-button {
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  border-radius: 20px;
  transition: all 0.2s ease;
}

.map-button:hover {
  background: rgba(96, 165, 250, 0.1);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
  transform: translateY(-1px);
}

/* Generic Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Ensure overlays sit above the fixed sidebar (z-index: 1001) */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-backdrop {
  position: fixed; /* Changed from absolute to fixed */
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* Slightly less opaque */
  backdrop-filter: blur(5px); /* A bit more blur */
  z-index: -1; /* Ensure it's behind the modal content */
}

.modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Map Overlay Modal - MAP-UI-UPDATE */
.map-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.map-panel {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: linear-gradient(180deg, #0f172a, #0b1222);
  border: 2px solid var(--accent-2);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(96, 165, 250, 0.3);
  overflow: hidden;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #1f2937;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.1), rgba(74, 222, 128, 0.1));
}

.map-header h3 {
  margin: 0;
  color: var(--accent-2);
  font-size: 18px;
}

.close-button {
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  background: rgba(251, 113, 133, 0.2);
  border-color: var(--danger);
  color: var(--danger);
}

.map-content {
  padding: 16px 20px;
  max-height: calc(80vh - 80px);
  overflow-y: auto;
}

.zone-accordion {
  margin-bottom: 12px;
  border: 1px solid #374151;
  border-radius: 8px;
  overflow: hidden;
}

.zone-accordion.locked {
  opacity: 0.5;
  pointer-events: none;
}

.zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1f2937, #374151);
  cursor: pointer;
  transition: all 0.2s ease;
}

.zone-header:hover {
  background: linear-gradient(135deg, #374151, #4b5563);
}

.zone-header.expanded {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #0b0f17;
}

.zone-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zone-element-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.zone-details h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
}

.zone-description {
  margin: 0;
  font-size: 11px;
  opacity: 0.8;
}

.zone-expand-icon {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.zone-header.expanded .zone-expand-icon {
  transform: rotate(90deg);
}

.zone-areas {
  display: none;
  padding: 8px 0;
  background: rgba(15, 23, 42, 0.5);
}

.zone-areas.expanded {
  display: block;
}

.area-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  margin: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.area-item:hover {
  background: rgba(96, 165, 250, 0.1);
}

.area-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.area-item.locked:hover {
  background: transparent;
}

.area-item.current {
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid var(--gold);
}

.area-info h5 {
  margin: 0 0 2px 0;
  font-size: 13px;
  color: var(--ink);
}

.area-info .area-enemy {
  font-size: 11px;
  color: var(--muted);
}

.area-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.area-progress {
  color: var(--accent);
}

.area-completed {
  color: var(--accent);
}

.area-locked {
  color: var(--muted);
}

/* Tooltip Styles - MAP-UI-UPDATE */
.tooltip {
  position: absolute;
  background: linear-gradient(180deg, #0f172a, #0b1222);
  border: 1px solid var(--accent-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  max-width: 200px;
}

.tooltip.visible {
  opacity: 1;
}

.tooltip h6 {
  margin: 0 0 4px 0;
  color: var(--accent-2);
  font-size: 13px;
}

.tooltip .tooltip-kills {
  color: var(--accent);
  margin: 2px 0;
}

.tooltip .tooltip-loot {
  color: var(--gold);
  margin: 2px 0;
  font-size: 11px;
}

/* Responsive Design - MAP-UI-UPDATE */
@media (max-width: 768px) {
  .adventure-cards {
    grid-template-columns: 1fr;
  }
  
  .adventure-progress-bar {
    overflow-x: scroll;
  }
  
  .progress-segment {
    min-width: 50px;
    font-size: 10px;
  }
  
  .map-panel {
    width: 95%;
    max-height: 90vh;
  }
  
  .map-content {
    max-height: calc(90vh - 80px);
  }
}
.hint {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Laws System Styling */
.law-card {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.law-card.selected {
  border-color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
}

.law-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.law-bonuses .bonus {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.skill-node {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.activity-item.active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

.activity-item {
  cursor: pointer;
}

.skill-node.available {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  cursor: pointer;
}

.skill-node.learned {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.skill-node:hover.available {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.skill-name {
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.skill-desc {
  font-size: 0.9em;
  color: #a1a1aa;
  margin-bottom: 8px;
  line-height: 1.4;
}

.skill-cost {
  font-size: 0.8em;
  color: #fbbf24;
  margin-bottom: 10px;
}

.learned-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #22c55e;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.progression-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.realm-node {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid transparent;
  position: relative; /* allow metallic overlay */
  transition: all 0.2s ease;
}

.realm-node.completed {
  background: rgba(34, 197, 94, 0.1);
  border-left-color: #22c55e;
}

.realm-node.current {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.24), rgba(212, 175, 55, 0.10));
  border-left-color: #d4af37; /* richer gold */
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35), inset 0 0 0 1px rgba(212, 175, 55, 0.25);
}

/* metallic sheen overlay */
.realm-node.current::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.12) 30%,
      rgba(0, 0, 0, 0.10) 100%
    );
  mix-blend-mode: overlay;
  opacity: 0.7;
}

.realm-node.locked {
  background: rgba(107, 114, 128, 0.05);
  border-left-color: #6b7280;
  opacity: 0.6;
}

.realm-icon {
  font-size: 1.5em;
  margin-right: 12px;
  min-width: 32px;
  text-align: center;
}

.realm-info {
  flex: 1;
}

.realm-name {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 4px;
}

.realm-stages {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(107, 114, 128, 0.3);
  transition: all 0.2s ease;
}

.stage-dot.completed {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.stage-dot.current {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0 45%, transparent 46%),
    #d4af37; /* richer gold */
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  border: 1px solid rgba(139, 107, 16, 0.6);
  animation: realmPulse 2s infinite;
}

@keyframes realmPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.realm-description {
  font-size: 0.9em;
  color: #9ca3af;
  margin-top: 4px;
}

/* Adventure Combat System */
.combat-display {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 16px 0;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.combatant {
  flex: 1;
  text-align: center;
}

.combatant-name {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 1.1em;
}

.enemy-affixes {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.affix-tile {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75em;
  color: #fff;
  position: relative;
  cursor: default;
}

.affix-tile:hover::after {
  content: attr(data-desc);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}

.health-bar {
  position: relative;
  width: 100%;
  height: 24px;
  background: rgba(220, 38, 38, 0.3);
  border-radius: 12px;
  margin: 8px 0;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #ef4444);
  border-radius: 12px;
  transition: width 0.3s ease;
  width: 100%;
}

.health-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.stun-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15%;
  pointer-events: none;
  overflow: hidden;
  display: none;
  z-index: 2;
}

.stun-fill {
  height: 100%;
  width: 0%;
  background: hsl(39, 100%, 50%);
  transition: width 0.2s ease, background-color 0.2s ease;
}

@keyframes stunFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes stunShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.stun-bar.stun-flash .stun-fill {
  animation: stunFlash 0.5s infinite;
}

.stun-bar.stun-shake {
  animation: stunShake 0.3s infinite;
}

.qi-bar {
  position: relative;
  width: 100%;
  height: 16px;
  background: rgba(37, 99, 235, 0.3);
  border-radius: 8px;
  margin: 4px 0;
  overflow: hidden;
}

.qi-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 8px;
  transition: width 0.3s ease;
  width: 0;
}

.qi-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 0.75em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.combat-stats {
  display: flex;
  justify-content: space-around;
  font-size: 0.9em;
  color: #9ca3af;
  margin-top: 8px;
}

.ability-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.ability-bar {
  display: flex;
  gap: 8px;
}

.ability-slot {
  background: rgba(31, 41, 55, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
}

.ability-slot .slot-index {
  font-weight: bold;
  color: #9ca3af;
}

.combat-vs {
  font-size: 1.5em;
  font-weight: bold;
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.combat-log {
  max-height: 120px;
  overflow-y: auto;
  background: var(--panel);
  border-radius: 6px;
  padding: 12px;
  margin: 80px 0 0;
  font-family: monospace;
  font-size: 0.9em;
}

.log-entry {
  margin: 2px 0;
  padding: 2px 0;
}

.log-entry.damage {
  color: #ef4444;
}

.log-entry.heal {
  color: #22c55e;
}

.log-entry.death {
  color: #f59e0b;
  font-weight: bold;
}

.combat-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.adventure-zones {
  margin-top: 12px;
}

.zone-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin: 4px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.zone-item.unlocked {
  border-left-color: #22c55e;
  cursor: pointer;
}

.zone-item.current {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.zone-item.locked {
  border-left-color: #6b7280;
  opacity: 0.6;
}

.zone-item:hover.unlocked {
  background: rgba(255, 255, 255, 0.1);
}

.zone-name {
  font-weight: bold;
}

.zone-progress {
  font-size: 0.9em;
  color: #9ca3af;
}

/* Building System Styling */
.building-category {
  margin-bottom: 25px;
}

.building-category h1, h2, h3 {
  color: var(--ink);
  border-bottom: 1px solid var(--muted);
  padding-bottom: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.buildings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.building-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.building-card.unlocked {
  border-color: rgba(59, 130, 246, 0.3);
}

.building-card.affordable {
  border-color: #22c55e;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.building-card.locked {
  opacity: 0.6;
  border-color: rgba(239, 68, 68, 0.3);
}

.building-card:hover.unlocked {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.building-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.building-icon {
  font-size: 24px;
  margin-right: 12px;
  width: 32px;
  text-align: center;
}

.building-info {
  flex: 1;
}

.building-name {
  font-weight: 600;
  color: #fff;
  font-size: 16px;
  margin-bottom: 4px;
}

.building-level {
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 500;
}

.building-desc {
  color: #d1d5db;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 12px;
}

.unlock-req {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  text-align: center;
}

.current-effect {
  color: #22c55e;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 6px;
}

.next-effect {
  color: #3b82f6;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 6px;
}

.building-cost {
  color: #fbbf24;
  font-size: 12px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;
}

.max-level {
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
  color: white;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.building-card .btn {
  width: 100%;
  margin-top: 8px;
}

.building-card .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; font-size:12px; border:1px solid #23304c; background:#0b1222}

/* Tables */
table{width:100%; border-collapse:collapse; border-spacing:0;}
th{
  font-size:13px; 
  color:var(--muted); 
  text-align:left; 
  padding:8px;
  font-family: 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  border-bottom: 1px solid var(--accent);
  font-weight: 600;
}
td{
  padding:8px; 
  font-size:13px; 
  background:transparent; 
  border-bottom: 1px solid rgba(139, 117, 95, 0.2);
}
tr:last-child td {
  border-bottom: none;
}

/* Log */
.log{
  position:fixed; 
  left:280px; 
  right:0; 
  bottom:0; 
  height:80px;
  border-top:1px solid var(--accent);
  background: var(--panel);
  overflow:auto;
  padding:8px 12px;
  font-size:12px;
  z-index:10;
  box-shadow: 0 -2px 10px rgba(58, 45, 28, 0.1);
}
.log p{margin:4px 0; color:var(--muted)}
.log .good{color:var(--foundation-primary); font-weight: 600;}
.log .bad{color:#a52a2a; font-weight: 600;}

/* Enhanced Left Panel Activity Groups */
.activity-group {
  margin-bottom: 20px;
}

.group-title {
  font-family: 'Trajan Pro', 'Palatino Linotype', serif;
  font-size: 1.1em;
  font-weight: 600;
  text-align: center;
  color: var(--ink-dark);
  margin: 20px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink-light);
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px var(--parchment-light);
}

.activity-separator {
  display: flex;
  align-items: center;
  margin: 20px 0;
  opacity: 0.7;
}

.separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #374151, transparent);
}

.separator-text {
  margin: 0 12px;
  font-size: 16px;
  color: #9ca3af;
}

/* Enhanced Activity Items */
.leveling-tab, .management-tab {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.leveling-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.management-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.activity-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border-image: linear-gradient(to right, transparent, var(--ink-light), transparent) 1;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.activity-item:hover {
  background: var(--parchment-light);
  border-color: var(--ink-light);
  box-shadow: inset 0 0 10px rgba(58, 45, 28, 0.1);
}

.activity-item.active {
  background: var(--parchment-dark);
  border-color: var(--ink-dark);
  box-shadow: inset 0 1px 4px rgba(58, 45, 28, 0.4);
  color: var(--ink-dark);
}

.activity-header {
  display: contents; /* Allow flex properties to pass to children */
}

.activity-icon {
  font-size: 1.5em;
  margin-right: 12px;
  color: var(--ink-dark);
  opacity: 0.8;
  transition: color 0.3s;
}

.activity-item:hover .activity-icon {
  color: var(--accent);
}

.activity-item.active .activity-icon {
  color: var(--accent);
}

/* Cultivation lotus icon — force green color (normal, hover, active) */
.activity-item[data-activity="cultivation"] .activity-icon,
.activity-item[data-activity="cultivation"]:hover .activity-icon,
.activity-item[data-activity="cultivation"].active .activity-icon {
  color: #16a34a !important; /* Tailwind green-600 */
}

/* Target the Iconify custom element directly to ensure color applies */
.activity-item[data-activity="cultivation"] .activity-icon iconify-icon,
.activity-item[data-activity="cultivation"]:hover .activity-icon iconify-icon,
.activity-item[data-activity="cultivation"].active .activity-icon iconify-icon {
  color: #16a34a !important;
}

.activity-item[data-activity="cultivation"].breakthrough-ready {
  border-color: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
  animation: cultivation-gold-sheen 1.5s ease-in-out infinite alternate;
}

.pill-timer {
  margin-left:4px;
  font-size:0.9em;
  color:var(--muted);
}

.pill-timer.pulse {
  animation:pulse 1s ease-in-out infinite;
}

@keyframes cultivation-gold-sheen {
  from {
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
  }
  to {
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.9);
  }
}

.activity-info {
  flex-grow: 1;
}

.activity-name {
  font-family: 'Georgia', serif;
  font-size: 1em;
  font-weight: normal;
  color: var(--ink-dark);
}

.activity-level {
  font-size: 0.8em;
  color: var(--muted);
}

.activity-item.active .activity-name,
.activity-item.active .activity-level {
  color: var(--ink-dark);
  font-weight: 600;
}

/* Enhanced Progress Bars */
.activity-progress-bar {
  position: relative;
  grid-column: 2;
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  height: 16px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Keep bar size stable on hover/active */
.activity-item:hover .activity-progress-bar,
.activity-item.active .activity-progress-bar {
  width: 100%;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 8px;
  transition: width 0.5s ease;
  position: relative;
}

/* Color-coded Progress Bars for Each Activity */
#cultivationProgressFill {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed) !important; /* Purple for cultivation */
}

#physiqueProgressFill {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important; /* Red for physique */
}

#miningProgressFill {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important; /* Orange for mining */
  width: 0%;
}

#gatheringProgressFill {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important; /* Green for gathering */
  width: 0%;
}

#cookingProgressFillSidebar {
  background: linear-gradient(90deg, #fbbf24, #f59e0b) !important; /* Golden for cooking */
}

#adventureProgressFill {
  background: linear-gradient(90deg, #3b82f6, #2563eb) !important; /* Blue for adventure */
}

/* Sidebar Activity Progress Colors */
#physiqueSelectorFill {
  background: linear-gradient(90deg, #ef4444, #b91c1c) !important;
}

#agilitySelectorFill {
  background: linear-gradient(90deg, #15803d, #166534) !important;
}

#mindSelectorFill {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
}

#miningSelectorFill {
  background: linear-gradient(90deg, #f59e0b, #b45309) !important;
  width: 0%;
}

#gatheringSelectorFill {
  background: linear-gradient(90deg, #4ade80, #16a34a) !important;
  width: 0%;
}

#forgingProgressFillSidebar {
  background: linear-gradient(90deg, #f97316, #c2410c) !important;
  width: 0%;
}

#catchingProgressFill {
  background: linear-gradient(90deg, #ec4899, #db2777) !important;
  width: 0%;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 600;
  font-size: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* Activity Status for Management Tabs */
.activity-status {
  margin-top: 8px;
}

.status-indicator {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 12px;
  text-align: center;
  font-weight: 500;
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.status-indicator.active {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .activity-item {
    padding: 10px;
  }
  
  .activity-icon {
    font-size: 18px;
    width: 24px;
  }
  
  .activity-name {
    font-size: 13px;
  }
  
  .yin-dot-breathing {
    bottom: 9px;
    left: 22px;
  }
}

/* Lotus Cultivation Silhouette */
.lotus-cultivation-container {
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(16, 185, 129, 0.08));
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.lotus-silhouette-cultivation {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  border: 2px solid rgba(34, 197, 94, 0.3);
}

.lotus-fill-background {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, rgba(34, 197, 94, 0.4), rgba(16, 185, 129, 0.5));
  transition: height 0.3s ease;
  height: 0%;
  z-index: 1;
}

.lotus-pose-outline {
  z-index: 2;
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lotus-figure {
  position: relative;
  width: 120px;
  height: 120px;
  opacity: 0.8;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

.lotus-head {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.lotus-body {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 45px;
  background: linear-gradient(180deg, var(--primary), rgba(34, 197, 94, 0.9));
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.lotus-body::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 12px;
  background: var(--primary);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

.lotus-arms {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 6px;
  background: var(--primary);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

.lotus-arms::before,
.lotus-arms::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--primary);
  border-radius: 50%;
  top: -4px;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

.lotus-arms::before {
  left: -7px;
}

.lotus-arms::after {
  right: -7px;
}

.lotus-legs {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 35px;
  border: 5px solid var(--primary);
  border-top: none;
  border-radius: 0 0 40px 40px;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.lotus-legs::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: var(--primary);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

.lotus-legs::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 15px;
  width: 50px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  transform: rotate(-15deg);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.3);
}

.foundation-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.foundation-text {
  font-size: 14px;
  color: var(--text);
}

.foundation-percent {
  font-size: 14px;
  font-weight: bold;
  color: var(--primary);
}

/* Responsive adjustments for lotus cultivation */
@media (max-width: 768px) {
  .lotus-silhouette-cultivation {
    width: 100px;
    height: 100px;
  }
  
  .lotus-pose-outline {
    font-size: 50px;
  }
  
  .foundation-display {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}

/* Badges */
.badge{display:inline-block; padding:3px 8px; font-size:11px; border-radius:999px; border:1px solid #2a3758; color:#bfdbfe; background:#0a1224}

.right-actions{display:flex; gap:8px; align-items:center}
.progress-wrap{display:flex; align-items:center; gap:10px}

/* Equipment Panel */
.equipment-item {
    background: rgba(243, 236, 221, 0.5); /* Semi-transparent parchment */
    border: 1px solid var(--ink-light);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.equipment-item:hover {
    background: var(--parchment-light);
    box-shadow: 0 2px 8px rgba(58, 45, 28, 0.15);
}

.equipment-details div {
    margin-bottom: 4px;
    font-family: 'Georgia', serif;
    color: var(--ink-dark);
}

.equipment-details strong {
    font-family: 'Trajan Pro', serif;
    color: var(--ink-dark);
    font-weight: 600;
}

/* Tooltip */
.hint{border-bottom:1px dotted #475569; cursor:help}

/* Combat FX Layer */
.battle-area{position:relative;overflow:visible;display:flex;flex-direction:column;gap:8px}
.combat-hud{display:flex;justify-content:center;align-items:flex-start;padding:4px 8px;gap:24px}
.combat-hud .hud{display:flex;flex-direction:column;gap:4px;width:160px;align-items:center;text-align:center}
.combat-hud .bar-group{display:flex;flex-direction:column;gap:2px;width:100%}
.combat-hud .health-bar{height:12px;margin:0}
.combat-hud .qi-bar{height:8px;margin:0}
.combat-hud .health-text,.combat-hud .qi-text{font-size:.65rem}
.combat-hud .enemy-name{font-size:.75rem;font-weight:600}
.combat-hud .enemy-power{font-size:.7rem}
.combat-hud .player-name{font-size:.75rem;font-weight:600}
.combo-display{background:rgba(17,17,26,.75);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 10px;color:#f8f9ff;font-size:.75rem;display:flex;flex-direction:column;gap:4px;align-self:center;min-width:120px;transition:transform .15s ease,opacity .15s ease}
.combo-display.active{opacity:1;box-shadow:0 0 12px rgba(255,215,0,.3)}
.combo-display.inactive{opacity:.6}
.combo-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.combo-count{font-size:1rem}
.combo-bar{position:relative;width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
.combo-fill{height:100%;width:0;background:linear-gradient(90deg,#ffe066 0,#ff922b 100%);transition:width .1s ease}
.combo-timer-text{font-size:.7rem;text-align:right;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.status-ailments{display:flex;gap:4px;margin-top:2px}
.status-ailments .ailment{position:relative;width:20px;height:20px;font-size:16px;line-height:20px}
.status-ailments .ailment .stack{position:absolute;bottom:-2px;right:-2px;font-size:10px;color:#fff;text-shadow:0 0 2px #000}
.status-ailments .ailment .duration{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-size:9px;color:#fff;text-shadow:0 0 2px #000}
.active-pills{display:flex;gap:4px;justify-content:center}
.pill-icon{position:relative;width:16px;height:16px;border-radius:50%;background:saddlebrown;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pill-icon .timer-mask{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.6) calc(var(--progress,0)*360deg),transparent 0);z-index:1}
#cultivationPillIcons{position:absolute;top:8px;left:8px}
.sprite-stage{position:relative;flex:0 0 auto;min-height:120px;display:flex;align-items:flex-start;justify-content:center;gap:24px;padding:8px}
.sprite-stage .combatant{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center;position:relative}
.sprite-stage .sprite{position:relative;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9)0%,rgba(255,255,255,.6)60%,rgba(255,255,255,0)70%),hsl(0,0%,80%);box-shadow:0 0 8px rgba(255,255,255,.6);animation:sprite-bob 2s ease-in-out infinite alternate}
.sprite-stage .sprite::after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%,-40%);width:60%;height:8px;background:rgba(0,0,0,.25);border-radius:50%;filter:blur(2px)}
.sprite-stage .player-sprite{background-color:hsl(200,50%,60%)}
.sprite-stage .enemy-sprite{background-color:hsl(0,50%,60%)}
.sprite-stage .cast-bar{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:72px;height:6px;background:rgba(255,255,255,.3);border-radius:3px;overflow:hidden;display:none;margin-top:4px}
.sprite-stage .cast-bar .fill{height:100%;width:0%;background:linear-gradient(90deg,#f59e0b,#d97706)}
@keyframes sprite-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.sprite-stage .sprite{animation:none}}
html.reduce-motion .sprite-stage .sprite{animation:none}
.fx-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;--fx-a:#fff;--fx-b:#fff}
.fx-stroke,.fx-thrust,.fx-beam{fill:none;stroke:url(#fx-gradient);filter:url(#soft-glow);stroke-linecap:round}
.fx-stroke{stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;animation:fx-draw .35s linear forwards}
.fx-thrust{stroke-width:2;stroke-dasharray:60;stroke-dashoffset:60;animation:fx-draw .25s linear forwards}
.fx-beam{stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;animation:fx-draw .4s linear forwards}
.fx-ring{fill:none;stroke:url(#fx-gradient);filter:url(#soft-glow);stroke-width:4;animation:fx-ring .5s ease-out forwards}
.fx-shield{fill:rgba(255,255,255,.15);stroke:url(#fx-gradient);filter:url(#soft-glow);stroke-width:2;animation:fx-shield .6s ease-out forwards}
.fx-rotate{animation:fx-rotate .6s linear}
.fx-fireball{fill:url(#elem-fire);filter:url(#soft-glow)}
.fx-palm-hit{position:absolute;pointer-events:none;color:var(--fx-b);filter:url(#soft-glow);animation:fx-palm-hit .4s ease-out forwards}

@keyframes fx-draw{to{stroke-dashoffset:0;opacity:0}}
@keyframes fx-ring{to{r:var(--fx-radius);opacity:0}}
@keyframes fx-shield{from{r:0;opacity:.6}to{r:var(--fx-radius);opacity:0}}
@keyframes fx-rotate{to{transform:rotate(360deg)}}
@keyframes fx-palm-hit{to{transform:scale(1.5);opacity:0}}
/* Debug console */
.debug-console {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 8px;
  border: 1px solid #555;
  z-index: 1000;
  font-family: monospace;
}
.debug-console input {
  width: 100%;
  margin-bottom: 4px;
  background: #222;
  color: #fff;
  border: 1px solid #555;
}
.debug-console button {
  margin-right: 4px;
}
.rays-overlay, .bg-rays, .ray, .sunray,
.floating-island, .bg-blob, .bg-poop,
.parchment, .paper-grain {
  display: none !important;
  background: none !important;
}

.ui-icon {
  width: 20px;
  height: 20px;
  color: currentColor; /* inherit from parent so hover/active states work */
  vertical-align: -2px;
}
.activity-item:hover .ui-icon {
  transform: translateY(-1px);
  transition: transform .18s ease;
}

.weapon-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* Ensure black text for the breakthrough button */
#breakthroughBtnActivity {
  color: #000 !important;
  text-shadow: none;
}

#breakthroughBtnActivity:hover,
#breakthroughBtnActivity:active {
  color: #000 !important;
}

#breakthroughBtnActivity.disabled,
#breakthroughBtnActivity:disabled {
  color: #000 !important;
}

/* Ability bar */
.ability-bar { display:flex; gap:4px; }
.ability-card { width:48px; height:72px; background:var(--panel); border:1px solid var(--ink-light); border-radius:3.2px; position:relative; padding:1.6px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.ability-card .ability-name { font-size:8px; text-align:center; }
.ability-card .ability-title { display:flex; flex-direction:column; align-items:center; }
.ability-card .ability-damage { font-size:8px; }
.ability-card .ability-cast-time { font-size:8px; }
.ability-card .ability-icon { font-size:19.2px; }
.ability-card .qi-badge { position:absolute; bottom:9.6px; right:1.6px; font-size:8px; background:var(--panel); padding:0.8px 2.4px; border-radius:2.4px; }
.ability-card .keybind { font-size:8px; }
.ability-card.cooling { opacity:0.6; }
.cooldown-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.6); color:#fff; display:flex; align-items:center; justify-content:center; }
.ability-card.insufficient { filter:grayscale(1); }
.ability-card.flash { box-shadow:0 0 4px 2px var(--accent); }
.ability-card.shake { animation:ability-shake 0.3s; }
@keyframes ability-shake { 0%{transform:translateX(0);}25%{transform:translateX(-2px);}50%{transform:translateX(2px);}75%{transform:translateX(-2px);}100%{transform:translateX(0);} }
.heal-float { position:fixed; color:#0f0; font-weight:bold; pointer-events:none; animation:heal-float 1s forwards; }
@keyframes heal-float { from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-20px);} }

/* --- Subtle death red-tint + break effect for combatants --- */
.combatant.death-break {
  animation: deathBreak 600ms ease-out both;
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}

@keyframes deathBreak {
  0% {
    filter: none;
    transform: translate3d(0, 0, 0) scale(1) skew(0deg, 0deg);
    opacity: 1;
  }
  20% {
    filter: sepia(0.2) saturate(1.3) hue-rotate(-10deg) contrast(1.05)
            drop-shadow(0 0 0.2rem rgba(179, 36, 36, 0.35));
    transform: translate3d(-1px, 0, 0) rotate(-0.2deg);
  }
  40% {
    filter: sepia(0.3) saturate(1.5) hue-rotate(-10deg) contrast(1.08)
            drop-shadow(0 0 0.35rem rgba(179, 36, 36, 0.45));
    transform: translate3d(1px, -1px, 0) rotate(0.3deg) skew(-0.2deg, 0.2deg);
  }
  60% {
    filter: sepia(0.35) saturate(1.6) hue-rotate(-8deg) contrast(1.1)
            drop-shadow(0 0 0.4rem rgba(179, 36, 36, 0.5));
    transform: translate3d(-1px, 1px, 0) rotate(-0.3deg) skew(0.2deg, -0.2deg);
  }
  80% {
    filter: sepia(0.35) saturate(1.5) hue-rotate(-8deg) contrast(1.05)
            drop-shadow(0 0 0.3rem rgba(179, 36, 36, 0.4));
    transform: translate3d(0, 0, 0) scale(0.995);
    opacity: 0.9;
  }
  100% {
    filter: sepia(0.25) saturate(1.2) hue-rotate(-6deg) contrast(1.03)
            drop-shadow(0 0 0.25rem rgba(179, 36, 36, 0.35));
    transform: translate3d(0, 1px, 0) scale(0.99);
    opacity: 0.85;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .combatant.death-break {
    animation: none;
    filter: sepia(0.25) saturate(1.2) hue-rotate(-6deg) contrast(1.03)
            drop-shadow(0 0 0.25rem rgba(179, 36, 36, 0.35));
  }
}

.hamburger{display:none;background:none;border:none;font-size:1.5rem;line-height:1;padding:4px;cursor:pointer;}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,0.4);opacity:0;pointer-events:none;transition:opacity .3s;z-index:1000;}
.drawer-scrim.active{opacity:1;pointer-events:auto;}
.layout-debug *{outline:1px dashed red;}
.log-toggle{display:none;}

@media (max-width:768px){
  :root{--gap:12px;--pad:12px;--header-h:64px;--tabs-h:48px;--safe-bottom:env(safe-area-inset-bottom,0px);--float-pad:0px;--log-h:0px;}
  html,body{overflow:hidden;}
  .mist-layer{inset:-10vh 0;}
  header{position:sticky;top:0;z-index:1000;flex-direction:column;align-items:stretch;gap:var(--gap);padding:var(--pad);min-height:var(--header-h);}
  .primary-row{display:flex;align-items:center;gap:var(--gap);}
  .brand{flex:1;display:flex;align-items:center;gap:var(--gap);}
  .title-wrap{flex:1;min-width:0;}
  .title-wrap h1{font-size:clamp(1.2rem,5vw,1.5rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .title-wrap .sub{display:none;}
  .qi-orb{width:40px;height:40px;}
  .hamburger{display:block;}
    main{display:block;height:auto;}
  #sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;max-width:80%;transform:translateX(-100%);transition:transform .3s;background:linear-gradient(180deg,var(--panel),#ebe0c8);z-index:1001;padding:var(--pad);display:flex;flex-direction:column;}
  #sidebar.open{transform:translateX(0);}
  body.drawer-open{overflow:hidden;}
  .content{padding:var(--pad);padding-bottom:calc(var(--pad) + var(--log-h) + env(safe-area-inset-bottom,0px));}
  .activity-content{padding:var(--pad);height:calc(100dvh - var(--header-h) - var(--tabs-h));overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--log-h) + env(safe-area-inset-bottom,0px));}
  .activity-content::after{content:"";display:block;height:var(--log-h);}
  img,canvas{max-width:100%;height:auto;}
  .chip{padding:calc(var(--pad)/2) var(--pad);min-height:44px;}

  .log-toggle{display:flex;align-items:center;justify-content:center;width:100%;height:48px;background:none;border:none;font-family:inherit;font-size:1rem;}
  .log-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--panel);box-shadow:0 -2px 10px rgba(58,45,28,0.1);display:flex;flex-direction:column;transform:translateY(calc(100% - 48px));max-height:60dvh;transition:transform .3s;padding-bottom:env(safe-area-inset-bottom,0px);z-index:1000;}
  .log-sheet[data-open="true"]{transform:translateY(0);}
  .log-sheet[data-open="false"] .log{display:none;}
  .log{position:relative;left:auto;right:auto;bottom:auto;height:auto;flex:1;overflow-y:auto;}

  /* Ensure cards and contents fit small screens */
  .cards{grid-template-columns:1fr;}
  .cards .card{width:100%;box-sizing:border-box;}
  .cards .card h4{font-size:1rem;}
  .cards .btn{font-size:0.9rem;}
  /* Prevent cards and their contents from overflowing the viewport */
  .card{width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto;}
  .card table{width:100%;font-size:0.9rem;}
  .cultivation-layout{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .cultivation-visualization-container{
    flex: none;
    width: 100%;
    height:300px;
    min-height:200px;
  }
  .cultivation-controls-card{font-size:0.85rem;}
  .cultivation-buttons{gap:6px;}
  .cultivation-btn{font-size:0.85rem;padding:6px 8px;}
  .adventure-cards{grid-template-columns:1fr;}
  .combat-display{gap:10px;}
  .combat-controls{gap:8px;}
  .combat-controls .btn{flex:1;font-size:0.85rem;padding:6px 8px;min-width:0;}
}

/* Queue bar and manual cards */
.queue-bar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:var(--card-gap);
  padding:var(--card-pad);
  background:var(--panel);
  overflow-x:auto;
}
.queue-bar .queue-chips{display:flex;gap:var(--card-gap);flex:1;}
.queue-chip{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border:none;
  border-radius:999px;
  background:var(--accent-2);
  color:#000;
  white-space:nowrap;
  cursor:pointer;
}
.queue-chip iconify-icon{font-size:1rem;}
.manuals-list{display:flex;flex-wrap:wrap;gap:var(--card-gap);}
.manual-card{background:var(--panel);border:1px solid rgba(45,37,32,0.35);border-left:4px solid var(--cat-color,rgba(45,37,32,0.35));border-radius:12px;overflow:hidden;flex:0 0 calc(25% - var(--card-gap));max-width:calc(25% - var(--card-gap));display:flex;flex-direction:column;justify-content:space-between;height:120px;font-size:.5rem;padding:0;cursor:pointer;}
.manual-card iconify-icon{font-size:1rem;color:var(--cat-color,inherit);}
.manual-card-header{
  display:flex;align-items:center;width:100%;
  padding:var(--card-pad);gap:var(--card-gap);
  background:none;border:none;text-align:left;
}
.manual-card-header .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.manual-card-level{padding:var(--card-pad);display:flex;flex-direction:column;gap:2px;}
.level-dots{display:flex;gap:2px;}
.level-dots .dot{width:var(--dot-size);height:var(--dot-size);border-radius:50%;background:var(--muted);}
.level-dots .dot.filled{background:var(--accent);}
.progress-pill{width:48px;height:4px;background:rgba(0,0,0,0.2);border-radius:2px;overflow:hidden;}
.progress-pill>div{height:100%;background:var(--accent);}
 .manual-card-body{padding:var(--card-pad);border-top:1px solid rgba(45,37,32,0.2);display:flex;flex-direction:column;gap:8px;}
 .manual-card-body .manual-actions{display:flex;gap:8px;margin-top:4px;}
@media (prefers-reduced-motion:reduce){
  #sidebar{transition:none;}
  .drawer-scrim{transition:none;}
  .log-sheet{transition:none;}
}
html.reduce-motion #sidebar{transition:none;}
html.reduce-motion .drawer-scrim{transition:none;}
html.reduce-motion .log-sheet{transition:none;}

/* Floating combat text */
.fct{
  position:absolute;
  pointer-events:none;
  color:#fff;
  text-shadow:0 0 2px #000;
  font-weight:400;
  user-select:none;
  z-index:9999;
  will-change:transform,opacity;
}
.fct-crit{
  font-weight:700;
}
.fct-miss{
  color:#9ab;
  font-style:italic;
}
.fct-phys{color:#fff;}
.fct-fire{color:#f44336;}
.fct-water{color:#2196f3;}
.fct-wood{color:#4caf50;}
.fct-earth{color:#795548;}
.fct-metal{color:#c0c0c0;}
.fct-cold{color:#80d8ff;}
.fct-lightning{color:#ffeb3b;}

/* Astral Skill Tree overlay */
.astral-skill-tree{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:#000;
  background-image:radial-gradient(#111, #000);
  overflow:hidden;
  display:none;
  z-index:1000;
}

.astral-skill-tree::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  z-index:2;
}

.astral-skill-tree::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEAAACAAAAAgCAAAAABWESUoAAAEK0lEQVR4nAEgBN/7AfqVqcvIGx3uX7GCDkir6nSQF8RN3xtKMA2DOYYyJVrMAqZfUckawPmIKX9SFoL6hXhW3lQauPq5oO5twWLeU/vQAY9jUCsJYZpWAAdVntRQ9hwrsqweA0sns8+LTQFLtN3XBNajTkafNTT0rU4CTfvOIxG9FNqgGWONkJG5nUHZ75jqAOAIPp/XTB1daM/b29BQFisSaNe+/uga45ohu2Et1HhsAgJVFXXk5heGF7Rt58B1aPNr8HHhuk7tYf3gZADtjgAfBD/5lwsyVFv0Y64fBDZVeCY5he44m7zIU16hCSFA4r0nAEDciK9YByVkwufS5bGS81eqFHCOB5ERH1Ao8cUy+BywAY0zPaQ0w+F3IE2MvRXdYQGYELiG84LnBR5BFcuDYeurBCahsQAxJwdNKp7P6TEsn47g2DQ4jHVm4AxC07j36tHZBM3Vu/fm4F0vJhaR3SzViUY1OZ624cD4d1iABjSslo4OBOLk36jCiVtIOr2265TfRihJytaTieMJuSkqBnC3sqb+AjYkOeUHkjcU5o1aPWPk4KWU0BEOPN3uKB3d4Th5FrFMAFOw0PKn+mb5EhCW/dJM384/9VrmYtgorCoXm2+ge06lBId1KSZPrHuPvYi5BegCF8HHyaoUqCy+NHBraxayOIDEBL/hXhf9qqsrQvv0qwRl4+0xxI4upEM4jGvDIZQZ0vNNAOGlCDymJqRVeSxsUR2J4Qzq3TUFNNGPQ8hKK3m/Q88wAee4F/5R1lGjqUrw1D2Yz90/i403GtwJdZo3B2DFSqrNAsxwUe191f+EmwLZ8qTUUNYlL9AsEAIEYki675xjlc7lATLXwzdOxkY15sk32BLSr6sqWOch0OdiVUf67TLNmgG6BFb7mbJw/kwpDnO3Krvuio9r6SXp9f8Gyhuw6eMadA6bALbkzXFg0NDkLKsuiePXSCXannYbUWzxNDquL0XrY2OiAAgr7rdcPPEKVVBduoxPtQL58SjYaVzZ995o3Rj2HnerBFvxBoPbV2jwGrUR3bDfYKjS5QgWVg+M53o8/WHypNpKAgXHyxWGUu64ad+aV67tRinKh+zRVlsjC7ANETNYwr/jAkp+/vt8FgKrN3n+1pITzcgvi1IBzqD/kmUJResb42MzAHp9Geg58yxnYb/8lEp8+9SBL37oQPbif70woTMCa/3xASIr7hlMjCnNrCQit3WMCc5m7f+C+uXb1zdgJRa9ESL2AAGcKyk4eq2oHlYD1uCQIWEJlEv0+QxWtIwbvsqYG9PLATvRUcYOFART4gTBKIMnDw//vv1xYKOoiawXrCp7vqklAtj7Is1K/za5quUfHJSBokedCVPc6v54NOeuT3YqOLXAajWx9OBUknI7iqIwcRL4v1tyPnu/fIW7+QaFWrziRJbg6ULCHzLnk8AAAAASUVORK5CYII=');
  background-size:256px 256px;
  mix-blend-mode:overlay;
  opacity:0.05;
  z-index:3;
}

.astral-skill-tree .starfield{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}

.astral-skill-tree .starfield span{
  position:absolute;
  width:1px;
  height:1px;
  background:#fff;
  border-radius:50%;
}

.astral-insight{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    color:#fff;
    font-size:20px;
    z-index:10;
}

.astral-insight-mini{
    position:absolute;
    top:50px;
    right:10px;
    color:#fff;
    font-size:16px;
    z-index:5;
}

.astral-tree-close{
  position:absolute;
  top:20px;
  right:20px;
  z-index:10;
}

.astral-zoom-controls{
  position:absolute;
  top:20px;
  left:20px;
  display:flex;
  flex-direction:column;
  gap:5px;
  z-index:10;
}

.astral-zoom-btn{
  width:32px;
  height:32px;
  background:#222;
  color:#fff;
  border:1px solid #555;
  cursor:pointer;
}

.astral-tree-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  width:48px;
  height:48px;
  -webkit-mask:url(assets/icons/astral-tree.svg) no-repeat center/contain;
  mask:url(assets/icons/astral-tree.svg) no-repeat center/contain;
  background:#ffeb3b;
  border:none;
  padding:0;
  cursor:pointer;
  filter:drop-shadow(0 0 2px rgba(255,235,59,0.7));
  animation:astral-tree-pulse 3s ease-in-out infinite;
}

.astral-tree-btn.can-purchase{
  animation:astral-tree-shine 1.5s ease-in-out infinite;
}

@keyframes astral-tree-pulse{
  0%,100%{background:#ffeb3b;filter:drop-shadow(0 0 2px rgba(255,235,59,0.7));}
  50%{background:#fff176;filter:drop-shadow(0 0 6px rgba(255,241,118,0.9));}
}

@keyframes astral-tree-shine{
  0%,100%{background:#fff176;filter:drop-shadow(0 0 6px rgba(255,241,118,0.9));}
  50%{background:#ffff8d;filter:drop-shadow(0 0 12px rgba(255,255,141,1));}
}

.astral-skill-tree svg{
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none;
}
.astral-skill-tree svg.dragging{cursor:grabbing;}
.connector{
  stroke:#fff;
  /* double base connector width */
  stroke-width:3.8;
  fill:none;
  opacity:0.9;
  color:#fff;
  filter:drop-shadow(0 0 6px #fff);
}
.node{
  fill:#000;
  stroke-width:2;
  filter:drop-shadow(0 0 6px currentColor);
}
.node.start{stroke-width:2;}

.node.hub{stroke:#7dd3fc;color:#7dd3fc;}
.node.wood{stroke:#4caf50;color:#4caf50;}
.node.fire{stroke:#f44336;color:#f44336;}
.node.earth{stroke:#795548;color:#795548;}
.node.metal{stroke:#c0c0c0;color:#c0c0c0;}
.node.water{stroke:#2196f3;color:#2196f3;}
.node.taken{
  fill:currentColor;
  filter:drop-shadow(0 0 8px currentColor);
}
/* Highlight purchasable nodes with a stronger yellow pulse */
.node.allocatable{
  cursor:pointer;
  animation:nodePulse 2.5s ease-in-out infinite;
}
.connector.active{
  /* double width for active connectors */
  stroke-width:6.2;
  opacity:1;
  filter:drop-shadow(0 0 8px #fff);
}
.connector.link{stroke:#fff;}

.connector.travel{
  stroke:#fff;
  /* double width for travel animation line */
  stroke-width:7.6;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px #fff);
  pointer-events:none;
}

@keyframes nodePulse{
  0%,100%{
    stroke-width:3;
    filter:drop-shadow(0 0 6px #ffd54f);
  }
  50%{
    stroke-width:6;
    filter:drop-shadow(0 0 14px #ffd54f);
  }
}

.astral-tooltip{
  position:absolute;
  background:#111;
  color:#fff;
  border:1px solid #fff;
  padding:4px 8px;
  border-radius:4px;
  pointer-events:auto;
  white-space:nowrap;
  z-index:20;
  font-size:12px;
}

.astral-tooltip .tooltip-close {
  position:absolute;
  top:2px;
  right:4px;
  background:transparent;
  border:none;
  color:#fff;
  cursor:pointer;
}

.item-tooltip{
  position:absolute;
  background:rgba(31,25,20,0.92);
  color:#f5f5f5;
  width:340px;
  padding:14px;
  border-radius:8px;
  pointer-events:auto;
  z-index:20;
  line-height:1.35;
  font-size:14px;
  box-shadow:0 2px 6px rgba(0,0,0,0.6),0 0 8px rgba(255,255,255,0.1);
}

.item-tooltip .tooltip-close{
  position:absolute;
  top:4px;
  right:6px;
  background:transparent;
  border:none;
  color:#fff;
  cursor:pointer;
}

.item-tooltip .tooltip-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:18px;
  font-weight:bold;
  margin-bottom:8px;
}

.item-tooltip .tooltip-core{
  margin-bottom:4px;
}

.item-tooltip .dps-row{
  display:flex;
  justify-content:space-between;
  font-size:18px;
  font-weight:bold;
}

.item-tooltip .stat-row{
  display:flex;
  justify-content:space-between;
}

.item-tooltip .tooltip-imbue{
  margin:4px 0;
  display:flex;
  align-items:center;
  gap:4px;
}

.item-tooltip .tooltip-implicit{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:4px;
  margin-top:4px;
}

.item-tooltip .tooltip-mods{
  border-top:1px solid rgba(59,130,246,0.3);
  padding-top:4px;
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.item-tooltip .mod-chip{
  background:rgba(59,130,246,0.1);
  border:1px solid rgba(59,130,246,0.3);
  border-radius:4px;
  padding:2px 4px;
  font-size:12px;
}

.item-tooltip .tooltip-footer{
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:6px;
  padding-top:6px;
  font-size:12px;
  color:#ccc;
}

.item-tooltip .tooltip-footer .tags{
  margin-top:2px;
}

/* Sequence memory puzzle */
.sequence-memory-card .memory-runes{
  display:flex;
  gap:1rem;
  justify-content:center;
  margin:1rem 0;
}

.sequence-memory-card .rune-btn{
  width:60px;
  height:60px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:var(--clr,#ccc);
  color:#fff;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .1s,filter .1s;
}

.sequence-memory-card .rune-btn.active{
  transform:scale(1.2);
  filter:brightness(1.3);
}

/* Forging UI */
.forge-inventory{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.forge-item-card{
  border:1px solid #ccc;
  padding:4px 8px;
  border-radius:4px;
  cursor:pointer;
}

.forge-item-card.selected{
  border-color:#3b82f6;
}

.forge-slot{
  border:1px dashed #666;
  padding:8px;
  margin:8px 0;
  min-height:40px;
}

.forge-reqs{
  margin-bottom:8px;
  font-size:14px;
  color:#888;
}

.forge-options button{
  margin-right:4px;
}

.catching-tabs{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.catching-subtab{padding:4px 8px;background:#e5e7eb;border:none;cursor:pointer;border-radius:4px}
.catching-subtab.active{background:#3b82f6;color:#fff}
.alchemy-tabs{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.alchemy-subtab{padding:4px 8px;background:#e5e7eb;border:none;cursor:pointer;border-radius:4px}
.alchemy-subtab.active{background:#3b82f6;color:#fff}
.recipe-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.recipe-table th,.recipe-table td{padding:4px;white-space:nowrap;font-size:0.8rem}
.creature-entry{border:1px solid #d1d5db;padding:4px;margin-bottom:6px}
.creature-header{display:flex;align-items:center;gap:4px}
.creature-actions{margin-top:4px;display:flex;gap:4px}
.creature-list .bar{height:6px;margin:4px 0}
#buildingsContainer{display:flex;flex-wrap:wrap;gap:1rem}
.building-card{border:1px solid #374151;background:var(--secondary-bg);padding:12px;border-radius:6px;width:100%;box-sizing:border-box}
@media(min-width:768px){.building-card{width:40%}}
.building-card .materials{margin:8px 0;color:#6b7280;font-size:.9rem}

.tutorial-highlight {
  animation: tutorialPulse 1s infinite alternate;
  box-shadow: 0 0 8px 2px gold;
}

@keyframes tutorialPulse {
  from { box-shadow: 0 0 8px 2px gold; }
  to { box-shadow: 0 0 2px 1px gold; }
}

#tutorialOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

#tutorialOverlay .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

#tutorialOverlay .tutorial-card,
#abilityTutorialOverlay .tutorial-card {
  background: #f2ecd8;
  border: 2px solid #b38b5d;
  padding: 20px;
  max-width: 400px;
  text-align: center;
  z-index: 1;
}

#tutorialOverlay .objective,
#tutorialOverlay .reward {
  color: #ff8c00;
  font-style: italic;
}

.notification-header {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 10px 0 0;
}

.notification-tray {
  margin: 10px 0;
}

.notification {
  margin: 0 0 4px;
  padding: 4px 8px 4px 18px;
  background: linear-gradient(90deg,
    rgba(216, 165, 82, 0.6) 0px,
    rgba(216, 165, 82, 0.1) 12px,
    var(--parchment-light) 12px,
    var(--parchment-light) 100%);
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
}

.notification .dismiss {
  position: absolute;
  top: 2px;
  right: 4px;
  cursor: pointer;
}

.rarity-magic { color: #3b82f6; }
.rarity-rare { color: #fbbf24; }
.rarity-epic { color: #a855f7; }
.rarity-legendary { color: #f87171; }

#weaponSelectOverlay .weapon-select-card {
  background: #fff;
  border: 2px solid #b38b5d;
  padding: 20px;
  text-align: center;
}

#weaponSelectOverlay .weapon-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

#weaponSelectOverlay .weapon-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--ink-light);
  cursor: pointer;
}

#weaponSelectOverlay .weapon-option:hover {
  border-color: var(--accent);
}

#weaponSelectOverlay .weapon-icon {
  width: 32px;
  height: 32px;
  margin: 0 0 4px;
}

/* Journal entries styling */
#journalEntries {
  list-style: none;
  padding-left: 0;
}

#journalEntries li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
  cursor: pointer;
}

#journalEntries li .checkmark {
  font-weight: bold;
}

#journalEntries li.completed .checkmark {
  color: var(--foundation-primary);
}

#journalEntries li.current .checkmark {
  color: var(--core-primary);
}

.pp-slot-summary {
  margin-top: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}

#ppAvgDisplay {
  display: block;
}