/* ==========================================================================
   LAST ASYLUM COMPENDIUM: MASTER STYLESHEET
   ========================================================================== */

/* Global Reset & Disable unintentional zoom */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   1. VARIABLES & THEMES
   ========================================================================== */

/* Core Variables & Default Theme (Plague) */
:root,
html[data-theme="default"] {
  /* Base UI Colors */
  --bg-color: #1a1512;
  --card-bg: rgba(42, 34, 30, 0.85);
  --nav-bg: #110d0b;
  --text-main: #d9cbb8;
  --text-muted: #a8a19b;
  --accent-color: #b8975a;
  --border-color: #3d3128;

  /* T10 calc */
  --node-bg: #2a2726;
  --line-color: #4a6c82;
  --node-border: #6495ed;

  /* Typography */
  --font-headers: "Georgia", serif;
  --font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Default Theme: Plague (Green) */
  --active-theme: 35, 120, 45;
  --active-theme-bright: 55, 150, 65;
  --active-theme-vivid: 85, 190, 95;
  --active-theme-hex: 55, 150, 65;
  --lantern-filter: contrast(1.3) brightness(1) saturate(1.2);
}

/* Theme 2: Sanctuary (Orange) */
html[data-theme="sanctuary"] {
  --active-theme: 230, 160, 80;
  --active-theme-bright: 250, 190, 100;
  --active-theme-vivid: 255, 220, 140;
  --active-theme-hex: 239, 191, 4;
  --lantern-filter: contrast(1.2) brightness(1) saturate(1.2) hue-rotate(270deg);
}

/* Theme 3: Miasma (Purple) */
html[data-theme="miasma"] {
  --active-theme: 140, 50, 180;
  --active-theme-bright: 175, 90, 220;
  --active-theme-vivid: 210, 160, 250;
  --active-theme-hex: 175, 90, 220;
  --lantern-filter: contrast(1.3) brightness(1.1) saturate(1.2)
    hue-rotate(160deg);
}

/* ==========================================================================
   2. GLOBAL & APP SHELL
   ========================================================================== */

html {
  /* Using 100dvh to natively adapt to mobile browsers */
  height: 100dvh;
  max-width: 100%;
  font-size: 100%;
  background-color: var(--nav-bg);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  /* Prevents double-tap to zoom */
  touch-action: manipulation;
}

body {
  margin: 0;
  padding: 0;
  /* Using 100dvh to natively adapt to mobile browsers */
  height: 100dvh;
  font-family: var(--font-body);
  color: var(--text-main);
  overscroll-behavior: none;
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed; /* Glues the background to the screen */
  top: calc(90px + env(safe-area-inset-top));
  left: 0;
  width: 100%;
  height: calc(100% - env(safe-area-inset-top) - 150px);
  z-index: -10; /* Keeps it behind all content */
  background-color: #050403;
  background-image: url("/images/background.webp"), url("/images/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none; /* Allows clicks to pass through to buttons below */
}

/* Turn the App Shell into a dead-zone for native iOS touch features */
body, .lantern-header, footer {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Prevents dragging/rubber-banding on these elements */
  touch-action: none;
}

#mobile-container {
  width: 100%;
  height: 100dvh; /* Lock the container to the dynamic glass */
  display: flex;
  flex-direction: column;
}

/* Turbo Frame Flexbox Fix */
turbo-frame#main-content {
  display: contents; /* Allows <main> to act as a direct child for layout purposes */
}

/* Old content and sub-nav fading OUT completely when a link is clicked */
turbo-frame[busy] main,
turbo-frame[busy] .anchor-nav {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  /* Pause the fade-in animation while transitioning layout trees */
  animation: none; 
}

/* ==========================================================================
   3. TYPOGRAPHY & MARKDOWN (MAIN CONTENT)
   ========================================================================== */

main {
  -webkit-user-select: text;
  user-select: text;
  overscroll-behavior-y: contain; 
  overscroll-behavior-x: none;    
  /* Allows vertical scroll, but blocks zoom/horizontal drag */
  touch-action: pan-x, pan-y;

  flex: 1; /* Automatically absorbs whatever space is left */
  height: auto; 
  min-height: 0; /* CRITICAL: Prevents flex children from overflowing */
  
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
  padding-top: calc(90px + env(safe-area-inset-top));
  padding-bottom: calc(60px + env(safe-area-inset-bottom)); 
  padding-left: max(20px, calc((100% - 1000px) / 2));
  padding-right: max(20px, calc((100% - 1000px) / 2));
}

main h1,
main h2,
main h3,
main h4 {
  font-family: var(--font-headers);
  color: var(--accent-color);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

main h1 {
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 5px;
}
main h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}
main p,
main ul,
main ol {
  margin-bottom: 1.2em;
}

main a {
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-color);
}
main a:hover {
  filter: brightness(1.2);
}

blockquote {
  background: rgba(184, 151, 90, 0.1);
  border-left: 4px solid var(--accent-color);
  padding: 15px 20px !important;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
}
blockquote h4 {
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-size: 0.9rem;
}
blockquote p:last-child,
blockquote ul:last-child {
  margin-bottom: 0;
}
pre,
code {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--text-main);
}
pre {
  background: rgba(0, 0, 0, 0.4);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  overflow-x: auto;
  margin: 20px 0;
}
code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 4px;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.85rem;
}
th,
td {
  padding: 10px;
  border: 1px solid #3d3734;
  text-align: left;
}
th {
  background: #2a2726;
  color: var(--accent-color);
  font-family: var(--font-headers);
}
tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

main img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin: 0;
}

.warning {
  color: #ff6b6b;
}

/* ==========================================================================
   4. HEADER, FOOTER & NAVIGATION
   ========================================================================== */

/* Main Header */
.lantern-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(90px + env(safe-area-inset-top)) !important;
  min-height: calc(90px + env(safe-area-inset-top)) !important;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--nav-bg);
  z-index: 200;
  background-image: radial-gradient(
    circle 500px at center 10%,
    #2b231e 0%,
    var(--nav-bg) 100%
  );
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-stack {
  height: 90px;
  min-height: 90px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Header Text */
.debossed-title {
  position: relative;
  right: 5%;
  z-index: 1;
  margin-top: 0.6rem;
  font-size: 1.4rem;
  margin-bottom: 0;
  font-family: var(--font-headers);
  font-weight: bold;
  letter-spacing: 0.13rem;
  text-transform: uppercase;
  color: var(--text-main);
  border: none;
  text-shadow: 0 0 8px rgba(10, 8, 5, 1);
  text-align: center;
}

.subtitle {
  position:relative;
  right: 5%;
  width: 13.5rem;
  z-index: 1;
  font-family: var(--font-headers);
  color: var(--accent-color);
  letter-spacing: 0.11rem;
  font-size: 1rem;
  margin-top: 0.2rem;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}

/* Sticky Anchor Nav */
.anchor-nav {
  position: sticky;
  top: calc(90px + env(safe-area-inset-top));
  z-index: 100;
  height: 35px;
  background-color: #1a1512;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.5);
  
  /* Synchronized native app-like entry animation */
  animation: nativeAppFadeIn 0.5s cubic-bezier(0.3, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
.nav-wrapper::-webkit-scrollbar {
  display: none;
}

.nav-wrapper {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  overflow-x: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
}
.nav-wrapper::before {
  content: "";
  flex: 0 0 8px;
}
.nav-wrapper::after {
  content: "";
  flex: 0 0 20px;
}

.anchor-link {
  padding: 0.2rem 1rem;
  height: 100%;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-main);
  font-weight: bold;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
  margin: 0;
}
.anchor-link.active {
  background-color: var(--accent-color) !important;
  color: #110d0b !important;
}
.anchor-link:target {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

/* Bottom Footer */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  width: 100%;
  z-index: 100;
  border-top: 1px solid var(--border-color);
  background-color: var(--nav-bg);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-decoration: none;
  gap: 3px;
}
.nav-item.active {
  color: var(--accent-color);
}
.nav-icon-svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent-color);
  transition: all 0.3s ease;
}

/* Language Switcher */
.language-switcher {
  position: absolute;
  top: 30px;
  right: 15px;
  font-size: 0.8rem;
  z-index: 300;
}
.lang-link {
  text-decoration: none;
  color: var(--accent-color);
  opacity: 0.7;
}
.lang-active {
  font-weight: bold;
  color: #fff;
  pointer-events: none;
}

.lang-trigger {
  background: rgba(17, 13, 11, 0.85);
  border: 1px solid;
  border-image: linear-gradient(
      to top right,
      rgba(var(--active-theme-bright), 0.9) 0%,
      var(--border-color) 60%
    )
    1;
  box-shadow: -3px 3px 8px rgba(var(--active-theme), 0.25);
  color: var(--text-main);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.lang-dropdown {
  position: relative;
  z-index: 9999 !important;
  background-color: #1e1b1a;
  border: 1px solid #3d3734;
}
.dropdown-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  width: 100%;
  background-color: #1e1b1a;
  z-index: 9999 !important;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid;
  border-image: linear-gradient(
      to bottom right,
      rgba(var(--active-theme-bright), 0.6) 0%,
      var(--border-color) 40%
    )
    1;
}
.dropdown-content::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 15px;
  background: transparent;
}
.dropdown-content li a {
  color: var(--text-main);
  padding: 8px 0;
  text-decoration: none;
  display: block;
  text-align: center;
}
.dropdown-content li a.lang-active {
  color: var(--accent-color);
  font-weight: bold;
  pointer-events: none;
  background-color: rgba(184, 151, 90, 0.05);
}
.dropdown-content li a:hover {
  background-color: #3d3734;
}
.lang-dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0s;
}

/* Misc Header Buttons */
.header-side-btn {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-side-btn a {
  text-decoration: none;
  color: inherit;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

/* ==========================================================================
   5. ATMOSPHERICS & EFFECTS
   ========================================================================== */

/* Main Lantern Icon */
.lantern-container {
  position: relative;
  height: 100%;
  mix-blend-mode: screen;
  position: relative;
  isolation: isolate;
}

.lantern-img {
  filter: var(--lantern-filter);
  height: 90px;
}
.lantern-img:active {
  transform: scale(0.95);
}

/* Ambient Glows */
.lantern-flicker-layer {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle 400px at center 40%,
    rgba(var(--active-theme), 0.4) 0%,
    rgba(var(--active-theme), 0.15) 50%,
    transparent 100%
  );
  animation:
    lantern-pulse 8s infinite ease-in-out,
    lantern-flicker-smooth 4s infinite ease-in-out;
  will-change: opacity, transform, filter;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: all 0.5s ease;
}

.lantern-glow-bleed {
  position: fixed;
  top: calc(90px + env(safe-area-inset-top));
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(var(--active-theme-bright), 0.15),
    transparent
  );
  pointer-events: none;
  z-index: 50;
}

.lantern-edge-highlight {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--active-theme-bright), 0.8) 0%,
    transparent 60%
  );
  box-shadow: 0 1px 4px rgba(var(--active-theme), 0.6);
  pointer-events: none;
  z-index: 150;
}

/* Overlays & Dust */
.noise-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASuVbXAAAACHRSTlMA78f3L993v98w4V0AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAzSURBVDjLY2AYBaNgEAFiA0MDAyYxMTAwMGAwMDDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMAAADa8A0qN+i4pAAAAAElFTkSuQmCC");
  opacity: 0.05;
}

.dust-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(
    circle 400px at center 40%,
    black 0%,
    transparent 80%
  );
  mask-image: radial-gradient(
    circle 400px at center 40%,
    black 0%,
    transparent 80%
  );
  animation: lantern-pulse 5s infinite ease-in-out;
}

.mote {
  position: absolute;
  background: var(--accent-color);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 6px 2px rgba(184, 151, 90, 0.6);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
  animation: drift 12s infinite linear;
  z-index: 999 !important;
  top: var(--mote-y, 0%);
  left: var(--mote-x, 0%);
  transform: translate(-50%, -50%);
}
.mote:nth-child(3n) {
  animation-duration: 8s;
  width: 2px;
  height: 2px;
  opacity: 0.4;
}
.mote:nth-child(5n) {
  animation-duration: 15s;
  width: 6px;
  height: 6px;
  opacity: 0.6;
}
.mote:nth-child(7n) {
  animation-duration: 12s;
}
.mote:nth-child(n + 21) {
  display: none;
}

/* ==========================================================================
   6. UI COMPONENTS, CARDS & LAYOUTS
   ========================================================================== */

/* Search */
.search {
  text-align: center;
  margin-bottom: 1.2rem;
}
.search-bar {
  width: 100%;
  max-width: 1000px;
  margin-top: 1.2rem;
  padding: 15px 20px;
  background-color: rgba(10, 8, 7, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 1rem;
  animation: nativeAppFadeIn 0.5s cubic-bezier(0.3, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
.search-bar:focus {
  background-color: rgba(20, 16, 14, 0.9);
  border-color: var(--accent-color);
  outline: none;
  box-shadow: 0 0 10px rgba(184, 151, 90, 0.2);
}

/* Modals & Images */
.blueprint-img {
  display: block;
  max-width: 100%;
  max-height: 500px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.blueprint-img:hover {
  transform: scale(1.02);
  border-color: var(--accent-color);
}

/* vercel test begin */

.highlight-alliance {
    background-color: rgba(230, 160, 80, 0.2); /* Soft sanctuary gold tint */
    border-left: 4px solid var(--accent-color);
    font-weight: bold;
}

/* 1. The Core Lock Filter */
.content-locked {
  /* The visual blur - 12px is usually the sweet spot so you can't read headers */
  filter: blur(12px); 
  
  /* CRITICAL: Stops users from clicking hidden links or buttons underneath */
  pointer-events: none; 
  
  /* CRITICAL: Stops users from hitting Ctrl+A and copying the text anyway */
  user-select: none;    
  
  /* Dims the background slightly to make your login button pop */
  opacity: 0.3;         
}

/* 2. The Smooth Reveal Transition */
/* When main.js removes the .content-locked class, this makes it fade in beautifully */
#gated-content {
  transition: filter 0.6s ease-out, opacity 0.6s ease-out;
}

/* 3. The Login Button Styling (Optional, but matches your test layout) */
.profile-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 40px 0;
}

.login-button {
  background-color: #5865F2; /* Official Discord Blurple */
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.3);
}

.user-avatar {
  display: grid;
  grid-template-rows: 60fr 40fr;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}

.private-grid {
  display: grid;
  grid-template-columns: 20fr 80fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "left-top    right-side"
    "left-bottom right-side";
  gap: 0.5rem;
}

.api-right {
  grid-column: 2;
  grid-row: span 2;
  grid-area: right-side;
  text-align: center;
}
/*vercel test end*/

.img-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 0.5rem;
  align-items: center;
}



dialog::backdrop {
  background: rgba(10, 8, 7, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: backdropFadeIn 0.5s ease-out forwards;
  will-change: transform, opacity;
}
dialog.is-closing::backdrop {
  animation: backdropFadeOut 0.5s ease-out forwards;
  will-change: transform, opacity;
}
dialog {
  background-color: #1a1512;
  border: 1px solid var(--accent-color);
  border-radius: 12px;
  padding: 20px;
  color: var(--text-main);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
  margin: auto;
  max-width: 95vw;
  max-height: 90vh;
}
dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  animation: dialogFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
dialog.is-closing {
  animation: dialogFadeOut 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
dialog img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}
dialog .dialog-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
  margin-top: 5px;
}
dialog button,
dialog a.dialog-btn {
  background-color: rgba(20, 16, 14, 0.8);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
dialog button:hover,
dialog a.dialog-btn:hover {
  background-color: var(--accent-color);
  color: #1a1512;
  border-color: var(--accent-color);
  box-shadow: 0 0 15px rgba(184, 151, 90, 0.4);
  transform: translateY(-2px);
}

/* Grids & Cards */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
}
.guide-card {
  padding: 0.5rem 0;
  background-color: var(--card-bg);
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--border-color) !important;
  text-decoration: none;
  color: inherit;
  display: block;
}
.guide-card .icon {
  font-size: 2rem;
  display: block;
}

/* Event Phases */
.phase-tech {
  background-color: rgba(153, 102, 204, 0.35) !important;
}
.phase-raven {
  background-color: rgba(70, 140, 200, 0.35) !important;
}
.phase-heroes {
  background-color: rgba(200, 80, 80, 0.35) !important;
}
.phase-build {
  background-color: rgba(80, 180, 100, 0.35) !important;
}
.phase-train {
  background-color: rgba(210, 160, 60, 0.35) !important;
}

/* Pinned Lists */
.pinned-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 30px auto;
}
.pinned-section {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-left: 20px;
  scroll-padding-left: 20px; /* Padding for the snapping offset */
  touch-action: pan-x;
}
.pinned-section::-webkit-scrollbar {
  display: none;
}
.pinned-card {
  scroll-snap-align: start; /* Snap target lock */
  min-width: 140px;
  background-color: var(--card-bg);
  padding: 15px;
  border-radius: 8px;
  border-top: 3px solid var(--accent-color);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: bold;
  border-bottom: none !important;
}
.pinned-card .nav-icon-svg {
  margin: 0;
}

/* Directories */
.directories {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dir-card {
  background-color: var(--card-bg);
  padding: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border-color) !important;
  animation: lantern-flicker 6s infinite ease-in-out;
  margin-bottom: 5px;
}
.dir-content {
  display: flex;
  flex-direction: column;
}
.dir-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dir-title .nav-icon-svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent-color);
}
.dir-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 26px;
}
.dir-arrow {
  color: var(--accent-color);
  font-weight: bold;
  font-size: 1.2rem;
}

/* Content Panes */
.content-pane {
  background-color: rgba(20, 16, 14, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.6rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  scroll-margin-top: calc(90px + env(safe-area-inset-top));
  overflow: hidden;
  animation: nativeAppFadeIn 0.5s cubic-bezier(0.3, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}
 /*first pane*/
.content-pane:first-child {
  margin-top: 1.2rem;
}
 /*last pane*/
.content-pane:last-child {
  margin-bottom: 1.2rem;
}
.content-pane > *:first-child {
  margin-top: 0;
}
.content-pane > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.content-pane h2,
.content-pane h3 {
  border-bottom: none !important;
}
.content-pane h2:first-child {
  font-size: 1.2rem;
  color: var(--accent-color);
  border-bottom: 2px solid var(--border-color) !important;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.divider-wrapper {
  display: contents;
}
.pane-divider {
  flex: 0 0 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px 0;
  position: relative;
  display: block;
}
.pane-divider::after {
  content: "◈";
  color: var(--accent-color);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}

/* Utilities & Scroll Buttons */
.unavailable {
  background-color: #4a0404 !important;
  color: #8b8b8b !important;
  border: 1px solid #7a0000 !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
  text-decoration: line-through;
}
.list-table {
  width: 100%;
  border-collapse: collapse;
}
.sub-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}
.rank-num {
  width: 30px;
  color: var(--accent-color);
  font-weight: bold;
  text-align: center;
}

.scroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 8, 7, 0.85);
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  font-size: 1.2rem;
  box-shadow: 0 0 10px rgba(184, 151, 90, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  padding-bottom: 5px;
  padding-left: 2px;
}
.scroll-btn:hover {
  background: var(--accent-color);
  color: #1a1512;
  box-shadow: 0 0 20px rgba(184, 151, 90, 0.6);
  transform: translateY(-50%) scale(1.1);
}
.scroll-btn.left {
  left: -35px;
}
.scroll-btn.right {
  right: -35px;
}

/* PWA Update Toast */
#pwa-update-toast {
  position: fixed;
  /* Shifted up slightly to clear the fixed footer naturally */
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: rgba(20, 16, 14, 0.95);
  border: 1px solid var(--accent-color);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(184, 151, 90, 0.3);
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  opacity: 0;
  animation: slideUpToast 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  backdrop-filter: blur(5px);
}

#pwa-update-toast span {
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

#pwa-update-toast button {
  background-color: var(--accent-color);
  color: #1a1512;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-weight: bold;
  font-size: 0.8rem;
  cursor: pointer;
  text-transform: uppercase;
}

#pwa-update-toast.updating button {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes slideUpToast {
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* ==========================================================================
   7. FEATURE: DUEL SCHEDULE
   ========================================================================== */

.duel-schedule-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
}
.duel-day {
  flex: 1 1 350px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.day-header {
  border-bottom: 2px solid var(--accent-color);
  margin-bottom: 15px;
  padding-bottom: 5px;
}
.day-header h3 {
  margin: 0;
  color: var(--accent-color);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.day-title {
  font-size: 1.2rem;
  color: var(--text-main);
  font-weight: bold;
}
.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.task-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
}
.task-list .warning {
  color: #ff6b6b;
  font-weight: bold;
  border-left: 3px solid #ff6b6b;
  padding-left: 10px;
  margin: 10px 0;
}

.schedule-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0px 0;
  touch-action: pan-x pan-y;
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: #1e1b1a;
  color: #e0d8cc;
  font-size: 0.85rem;
}
.schedule-table th,
.schedule-table td {
  height: 2rem;
  border: 1px solid #3d3734;
  text-align: center;
}
.schedule-table th {
  background: #2a2726;
  color: var(--accent-color);
}

table.schedule-table tr.active-row td.active-col {
  filter: brightness(1.6) contrast(1.1) !important;
  color: #ffffff !important;
  font-weight: bold !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  border: 2px solid var(--accent-color) !important;
  box-shadow:
    inset 0 0 15px rgba(184, 151, 90, 0.6),
    0 0 10px rgba(184, 151, 90, 0.4) !important;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   8. FEATURE: ELITE TROOP (T10) CALCULATOR
   ========================================================================== */

.tree-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 10px 150px 10px;
  position: relative;
  z-index: 1;
}
.node-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 140px;
  flex-shrink: 0;
}
.line-vertical {
  width: 4px;
  height: 20px;
  background-color: var(--line-color);
}
.branch-container {
  display: flex;
  justify-content: center;
  position: relative;
  width: 185px;
}
.branch-top {
  width: 100%;
  height: 15px;
  border-top: 4px solid var(--line-color);
  border-left: 4px solid var(--line-color);
  border-right: 4px solid var(--line-color);
  border-radius: 8px 8px 0 0;
}
.branch-bottom {
  width: 100%;
  height: 15px;
  border-bottom: 4px solid var(--line-color);
  border-left: 4px solid var(--line-color);
  border-right: 4px solid var(--line-color);
  border-radius: 0 0 8px 8px;
}

.hex-node {
  width: 70px;
  height: 80px;
  background-color: #7a0000;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 15px rgba(100, 149, 237, 0.3);
  transition: all 0.3s ease;
}
.hex-node::before {
  content: "";
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background-color: var(--node-bg);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
  transition: background-color 0.3s ease;
}
.hex-node.maxed {
  background-color: rgba(var(--active-theme-hex), 1);
}
.hex-node.locked {
  background-color: #7a0000;
  box-shadow: 0 0 20px rgba(184, 151, 90, 0.4);
}

.icon-placeholder {
  width: 50px;
  height: 50px;
  position: relative;
  z-index: 1;
}
.icon-placeholder svg {
  width: 100%;
  height: 100%;
  fill: var(--text-main);
  opacity: 0.8;
}

.node-controls {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(10, 8, 7, 0.8);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  z-index: 2;
  width: max-content;
  min-width: 100%;
}
.node-controls:first-of-type {
  margin-bottom: -40px;
}
.node-title {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.level-btn {
  background: var(--card-bg);
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
  padding: 0;
  line-height: 1;
}
.level-btn:hover {
  background: var(--accent-color);
  color: var(--bg-color);
}
.level-display {
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  width: 35px;
  text-align: center;
}
.level-display.max-text {
  color: rgba(var(--active-theme-vivid), 1);
}

.t10-toggle {
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-main);
  font-weight: bold;
  font-size: 0.8rem;
  transition: all 0.3s;
}
.t10-toggle.active {
  border: 1px solid rgba(var(--active-theme-bright), 1);
  background: rgba(var(--active-theme-bright), 1);
  color: var(--bg-color);
}

.totals-banner {
  position: fixed;
  /* Locks strictly above the fixed footer */
  bottom: calc(60px + env(safe-area-inset-bottom));
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(20, 16, 14, 0.95);
  border-top: 2px solid var(--accent-color);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
  padding: 15px 0;
  z-index: 99;
  backdrop-filter: blur(5px);
}
.totals-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.total-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.total-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.total-value {
  font-family: var(--font-headers);
  font-size: 1.1rem;
  color: var(--accent-color);
  font-weight: bold;
}
.total-value.zero {
  color: var(--text-muted);
  opacity: 0.5;
}
svg.resource-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* ==========================================================================
   9. ANIMATIONS & ACCESSIBILITY
   ========================================================================== */

@keyframes nativeAppFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px); /* Subtle shift prevents dizzying motion */
  }
  to {
    opacity: 1;
    transform: translateY(0);
    will-change: auto; /* Temporarily trigger raster layer, torn down immediately after execution */
  }
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dialogFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

@keyframes backdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes backdropFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes lantern-flicker {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 5px rgba(var(--active-theme), 0.2));
  }
  20% {
    filter: brightness(0.9) drop-shadow(0 0 8px rgba(var(--active-theme), 0.3));
  }
  35% {
    filter: brightness(1.05)
      drop-shadow(0 0 15px rgba(var(--active-theme), 0.5));
  }
  50% {
    filter: brightness(0.7) drop-shadow(0 0 2px rgba(var(--active-theme), 0.1));
  }
  70% {
    filter: brightness(0.95)
      drop-shadow(0 0 6px rgba(var(--active-theme), 0.25));
  }
  85% {
    filter: brightness(0.8) drop-shadow(0 0 4px rgba(var(--active-theme), 0.2));
  }
}

@keyframes lantern-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
    filter: brightness(1) blur(2px);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.005);
    filter: brightness(1.05) blur(3px);
  }
}

@keyframes lantern-flicker-smooth {
  0%,
  100% {
    opacity: 0.8;
    filter: brightness(1) blur(2px);
  }
  33% {
    opacity: 0.85;
    filter: brightness(1.05) blur(2.5px);
  }
  66% {
    opacity: 0.75;
    filter: brightness(0.95) blur(2px);
  }
}

@keyframes drift {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-50px) translateX(20px);
    opacity: 0;
  }
}

/* Reduced Motion Configs */
@media (prefers-reduced-motion: reduce) {
  /* Global Interactive Reset */
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  /* Static Atmospheric Fallbacks */
  .lantern-flicker-layer {
    animation: none !important;
    opacity: 0.8 !important;
    filter: brightness(1) blur(2px) !important;
  }
  .dir-container,
  .dir-card {
    animation: none !important;
    box-shadow: none !important;
    filter: brightness(1) !important;
  }

  /* Eliminate Floaters */
  .dust-container,
  .mote {
    display: none !important;
    animation: none !important;
  }

  /* Interactive Scaling Neutralization */
  .lantern-img:active,
  .blueprint-img:hover,
  .scroll-btn:hover {
    transform: none !important;
  }
 /*wider image grid for desktop */
  .img-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 0.5rem;
  align-items: center;
}


  /* Disable layout fade structures safely across layout changes */
  main, .anchor-nav {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  turbo-frame[busy] main,
  turbo-frame[busy] .anchor-nav {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   10. MEDIA QUERIES (DESKTOP & PWA)
   ========================================================================== */

/* 1. Tablet & Desktop UI Overrides */
@media (min-width: 768px) {
  /* bigger header for desktop/tablet */
  .lantern-header {
    height: calc(130px + env(safe-area-inset-top)) !important;
    min-height: calc(130px + env(safe-area-inset-top)) !important;
    background-image: radial-gradient(
      circle 800px at center 10%,
      #2b231e 0%,
      var(--nav-bg) 100%
    );
  }

  .lantern-container {
  position:relative;
  right: 1.33rem;
  }

  .lantern-glow-bleed {
  top: calc(130px + env(safe-area-inset-top));
  }

  /* Update the main routing to account for the taller 130px header */
  main {
  padding-top: calc(130px + env(safe-area-inset-top));
  }

  body::before {
      top: calc(130px + env(safe-area-inset-top));
      height: calc(100% - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 180px);
      
  }

  .lantern-img {
    height: 125px;
    margin-right: -1rem;
  }

  .header-stack {
    height: 130px !important;
    min-height: 130px !important;
    gap: 3rem;  
  }
  .debossed-title {
    position: relative;
    right: 1.33rem;
    font-size: 2rem;
  }
  .subtitle {
    position: relative;
    right: 1.33rem;
    font-size: 1.3rem;
    width: 20rem;
  }
  .nav-wrapper {
    justify-content: center;
  }
  .duel-schedule-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
  }
  .content-pane {
    scroll-margin-top: calc(130px + 1.2rem + env(safe-area-inset-top));
    padding: 30px 40px;
    
  }

  footer {
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .anchor-nav {
    top: calc(130px + env(safe-area-inset-top));
  }

  .nav-wrapper {
    justify-content:center;
  }

  .scroll-btn {
    display: block; 
  }

  /* Desktop overrides for the T10 Calculator */
  .tree-container {
    padding: 0px 20px 90px 20px;
  }
  .line-vertical {
    height: 25px;
  }
  .branch-top,
  .branch-bottom {
    height: 18px;
  }
  .hex-node {
    width: 80px;
    height: 92px;
  }
  .node-controls {
    margin-top: 5px;
    padding: 5px 10px;
  }
  .node-controls:first-of-type {
    margin-bottom: -35px;
  }
  .node-title {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }
  .level-display {
    font-size: 0.9rem;
    width: 45px;
  }
  .level-btn {
    width: 24px;
    height: 24px;
    font-size: 1rem;
  }
  .total-value {
    font-size: 1.3rem;
  }
  .total-label {
    font-size: 0.75rem;
  }

  /* Desktop Atmospheric Tweaks */
  @keyframes drift {
    0% {
      transform: translateY(0) translateX(0);
      opacity: 0;
    }
    50% {
      opacity: 0.6;
    }
    100% {
      transform: translateY(-70px) translateX(100px);
      opacity: 0;
    }
  }
  .dust-container {
    -webkit-mask-image: radial-gradient(
      circle 700px at center 40%,
      black 0%,
      transparent 80%
    );
    mask-image: radial-gradient(
      circle 700px at center 40%,
      black 0%,
      transparent 80%
    );
  }
  .mote:nth-child(n + 21) {
    display: block;
  }
}

/* ==========================================================================
   iOS-SPECIFIC UI ADJUSTMENTS
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
  .lantern-header {
    /* Keep the shield, but shave 15px off of it to pull content up natively */
    padding-top: calc(env(safe-area-inset-top) - 8px) !important;
  }

  /* Move the language switcher up alongside the rest of the content */
  .language-switcher {
    top: calc(env(safe-area-inset-top) + 12px);
  }

  .scroll-btn {
    display: none !important; 
  }
  @media (display-mode: standalone) {
    @media (max-width: 767px) {
      main {
        padding-bottom: 60px;
      }
    }
  }
}

@media (display-mode: standalone) {
    html,
    body,
    #mobile-container {
      height: 100%;
    }
    @supports (-webkit-touch-callout: none) {
      html,
      body,
      #mobile-container {
        height: 100vh !important;
      }
    }
  }