:root {
      --sky-top: #1a0a2e;
      --sky-mid: #4a1942;
      --sky-horizon: #ff6b35;
      --bg: #f4e4c1;
      --bg-alt: #e8d5a8;
      --fg: #2b2d42;
      --fg-light: #f8f0dd;
      --accent: #06d6a0;
      --accent-hover: #05c493;
      --accent-red: #8b1a1a;
      --firefly: #ffd166;
      --card-bg: #f4e4c1;
      --card-border: #c9a96e;
      --shadow: rgba(27, 27, 45, 0.4);
      --cobble: #9e8c6c;
      --cobble-light: #b8a88a;
      --light-ambient: rgba(255, 153, 102, 0.06);
      --light-directional: rgba(255, 228, 181, 0.1);
      --lamp-color: #ffcc55;

      --font-display: 'Cinzel', serif;
      --font-body: 'Nunito', sans-serif;

      --fs-xs: 0.75rem;
      --fs-sm: 0.875rem;
      --fs-base: 1rem;
      --fs-md: 1.25rem;
      --fs-lg: 1.75rem;
      --fs-xl: 2.5rem;
      --fs-2xl: 3.5rem;
      --fs-3xl: 5rem;

      --space-xs: 0.25rem;
      --space-sm: 0.5rem;
      --space-md: 1rem;
      --space-lg: 2rem;
      --space-xl: 4rem;
      --space-2xl: 8rem;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
      --radius-pill: 999px;

      --transition-fast: 0.2s ease;
      --transition-med: 0.4s ease;
      --transition-slow: 0.8s ease;
    }

    [data-theme="night"] {
      --sky-top: #030014;
      --sky-mid: #0d0825;
      --sky-horizon: #1a0a2e;
      --bg: #0d0825;
      --bg-alt: #150f35;
      --fg: #e0d6c8;
      --fg-light: #c9bfaf;
      --accent: #06d6a0;
      --accent-hover: #05c493;
      --shadow: rgba(0, 0, 0, 0.7);
      --cobble: #2a2240;
      --cobble-light: #3a3055;
      --card-bg: #1a1235;
      --card-border: #3a2d5c;
      --light-ambient: rgba(26, 10, 46, 0.1);
      --light-directional: rgba(136, 136, 204, 0.08);
    }

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--fg);
      overflow-x: hidden;
      transition: background var(--transition-med), color var(--transition-med);
    }

    .toggle-bar {
      position: fixed;
      top: var(--space-md);
      right: var(--space-md);
      z-index: 1000;
      display: flex;
      gap: var(--space-sm);
    }

    .toggle-btn {
      width: 48px;
      height: 48px;
      border: 2px solid var(--card-border);
      border-radius: var(--radius-pill);
      background: var(--card-bg);
      color: var(--fg);
      font-size: var(--fs-md);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
      box-shadow: 0 2px 8px var(--shadow);
    }

    .toggle-btn:hover {
      transform: scale(1.1);
      border-color: var(--accent);
    }

    .toggle-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }

    .toggle-btn:disabled:hover {
      border-color: var(--card-border);
    }

    #hero {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      background: linear-gradient(
        180deg,
        var(--sky-top) 0%,
        var(--sky-mid) 50%,
        var(--sky-horizon) 100%
      );
      transition: background 600ms ease;
    }

    .parallax-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      will-change: transform;
    }

    #sky-layer {
      z-index: 1;
      background: linear-gradient(
        180deg,
        var(--sky-top) 0%,
        var(--sky-mid) 50%,
        var(--sky-horizon) 100%
      );
      transition: background 600ms ease;
      display: none;
    }

    #clouds-layer {
      z-index: 2;
      display: none;
    }

    #ground-layer {
      z-index: 3;
      top: auto;
      bottom: 0;
      height: 120px;
      display: none;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(0,0,0,0.08) 38px,
          rgba(0,0,0,0.08) 40px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 28px,
          rgba(0,0,0,0.06) 28px,
          rgba(0,0,0,0.06) 30px
        ),
        repeating-radial-gradient(
          circle at 20px 15px,
          var(--cobble) 0px,
          var(--cobble) 12px,
          var(--cobble-light) 12px,
          var(--cobble-light) 14px
        );
      background-size: 40px 30px, 40px 30px, 40px 30px;
      border-top: 3px solid rgba(80, 60, 30, 0.4);
    }

    #ground-layer::before {
      content: '';
      position: absolute;
      top: -20px;
      left: 0;
      width: 100%;
      height: 20px;
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(80, 60, 30, 0.2) 100%
      );
    }

    .ground-grass {
      position: absolute;
      top: -8px;
      left: 0;
      width: 100%;
      height: 8px;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 3px,
        #4a7c3f 3px,
        #4a7c3f 5px,
        transparent 5px,
        transparent 8px
      );
      opacity: 0.6;
    }

    [data-theme="night"] #ground-layer::before {
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(10, 5, 20, 0.4) 100%
      );
    }

    [data-theme="night"] .ground-grass {
      opacity: 0.3;
    }

    .cloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      filter: blur(20px);
      animation: cloud-drift linear infinite;
    }

    [data-theme="night"] .cloud {
      background: rgba(60, 40, 80, 0.3);
    }

    .cloud--1 {
      width: 300px;
      height: 80px;
      top: 10%;
      left: -300px;
      animation-duration: 45s;
    }

    .cloud--2 {
      width: 400px;
      height: 100px;
      top: 18%;
      left: -400px;
      animation-duration: 60s;
      animation-delay: 10s;
    }

    .cloud--3 {
      width: 250px;
      height: 70px;
      top: 8%;
      left: -250px;
      animation-duration: 50s;
      animation-delay: 25s;
    }

    .cloud--4 {
      width: 350px;
      height: 90px;
      top: 25%;
      left: -350px;
      animation-duration: 55s;
      animation-delay: 35s;
    }

    .cloud--5 {
      width: 200px;
      height: 60px;
      top: 15%;
      left: -200px;
      animation-duration: 70s;
      animation-delay: 5s;
    }

    @keyframes cloud-drift {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(100vw + 400px));
      }
    }

    .firefly {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--firefly);
      box-shadow: 0 0 8px 3px var(--firefly), 0 0 20px 6px rgba(255, 209, 102, 0.3);
      animation: firefly-float ease-in-out infinite, firefly-fade ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes firefly-float {
      0%, 100% {
        transform: translate(0, 0);
      }
      25% {
        transform: translate(15px, -25px);
      }
      50% {
        transform: translate(-10px, -40px);
      }
      75% {
        transform: translate(20px, -15px);
      }
    }

    @keyframes firefly-fade {
      0%, 100% {
        opacity: 0;
      }
      15% {
        opacity: 1;
      }
      50% {
        opacity: 0.6;
      }
      85% {
        opacity: 1;
      }
    }

    .fireflies-container {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
    }

    .stars-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50vh;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 600ms ease;
    }

    [data-theme="night"] .stars-layer {
      opacity: 1;
    }

    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #f4e4c1;
      border-radius: 50%;
      animation: star-twinkle 3s ease-in-out infinite;
    }

    .star--bright {
      width: 3px;
      height: 3px;
      box-shadow: 0 0 4px #f4e4c1;
    }

    @keyframes star-twinkle {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    .hero-content {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: var(--space-xl) var(--space-md);
      text-align: center;
    }

    .torii-gate {
      position: relative;
      width: 320px;
      height: 280px;
      margin-bottom: var(--space-lg);
    }

    .torii-post {
      position: absolute;
      bottom: 0;
      width: 20px;
      height: 220px;
      background: var(--accent-red);
      border-radius: 4px 4px 0 0;
      box-shadow: inset -3px 0 6px rgba(0,0,0,0.3), inset 3px 0 6px rgba(0,0,0,0.1);
    }

    .torii-post--left {
      left: 40px;
    }

    .torii-post--right {
      right: 40px;
    }

    .torii-beam {
      position: absolute;
      left: 10px;
      right: 10px;
      background: var(--accent-red);
      border-radius: 6px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
    }

    .torii-beam--top {
      top: 0;
      height: 24px;
      left: -10px;
      right: -10px;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 -2px 4px rgba(0,0,0,0.2);
    }

    .torii-beam--mid {
      top: 40px;
      height: 16px;
    }

    .torii-name {
      position: absolute;
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-display);
      font-weight: 900;
      font-size: var(--fs-md);
      color: #f8f0dd;
      text-shadow:
        0 1px 0 #5a0e0e,
        0 2px 0 #4a0b0b,
        0 -1px 0 rgba(248, 240, 221, 0.3),
        1px 0 0 #5a0e0e,
        -1px 0 0 #5a0e0e,
        0 0 10px rgba(0,0,0,0.4);
      white-space: nowrap;
      letter-spacing: 0.15em;
    }

    .hero-subtitle {
      font-family: var(--font-body);
      font-size: var(--fs-md);
      color: #f8f0dd;
      margin-bottom: var(--space-lg);
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
      letter-spacing: 0.05em;
    }

    .hero-cta {
      display: inline-block;
      padding: var(--space-sm) var(--space-lg);
      background: var(--accent);
      color: #0a0a1a;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: var(--fs-base);
      border: none;
      border-radius: var(--radius-pill);
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(6, 214, 160, 0.4);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    }

    .hero-cta:hover {
      background: var(--accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(6, 214, 160, 0.6);
    }

    .hero-cta:active {
      transform: translateY(0);
    }

    .chibi-character {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      height: 80px;
    }

    .chibi-character svg {
      width: 100%;
      height: 100%;
    }

    .lantern-glow {
      animation: lantern-pulse 2s ease-in-out infinite;
    }

    @keyframes lantern-pulse {
      0%, 100% {
        opacity: 0.6;
      }
      50% {
        opacity: 1;
      }
    }

    #about {
      min-height: 100vh;
      position: relative;
      padding: var(--space-xl) var(--space-md);
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(0,0,0,0.06) 38px,
          rgba(0,0,0,0.06) 40px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 28px,
          rgba(0,0,0,0.04) 28px,
          rgba(0,0,0,0.04) 30px
        ),
        repeating-radial-gradient(
          circle at 20px 15px,
          var(--cobble) 0px,
          var(--cobble) 12px,
          var(--cobble-light) 12px,
          var(--cobble-light) 14px
        );
      background-size: 30px 30px, 40px 30px, 40px 30px;
    }

    .about-header {
      text-align: center;
      margin-bottom: var(--space-xl);
    }

    .about-header h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      color: var(--fg);
      margin-bottom: var(--space-sm);
    }

    .about-header p {
      font-family: var(--font-body);
      font-size: var(--fs-md);
      color: var(--fg-light);
    }

    .about-layout {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xl);
      justify-content: center;
      align-items: flex-start;
      max-width: 1100px;
      margin: 0 auto;
    }

    .stat-card {
      background: var(--card-bg);
      border: 3px solid var(--card-border);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      transform: rotate(-1deg);
      box-shadow:
        4px 4px 0 var(--card-border),
        8px 8px 20px var(--shadow);
      max-width: 420px;
      width: 100%;
      position: relative;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 16px;
      background: var(--card-border);
      border-radius: 0 0 4px 4px;
    }

    .stat-card-name {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 900;
      color: var(--fg);
      margin-bottom: var(--space-xs);
    }

    .stat-card-meta {
      display: flex;
      gap: var(--space-md);
      font-size: var(--fs-sm);
      color: var(--fg-light);
      margin-bottom: var(--space-lg);
    }

    .stat-card-meta span {
      background: rgba(6, 214, 160, 0.15);
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--radius-sm);
      border: 1px solid var(--accent);
      color: var(--accent);
    }

    .stat-row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
    }

    .stat-label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: 700;
      width: 80px;
      text-align: right;
      color: var(--fg);
      letter-spacing: 0.08em;
    }

    .stat-bar-track {
      flex: 1;
      height: 14px;
      background: rgba(0,0,0,0.15);
      border-radius: var(--radius-pill);
      overflow: hidden;
      position: relative;
    }

    .stat-bar-fill {
      height: 100%;
      background: var(--accent);
      border-radius: var(--radius-pill);
      width: 0;
      animation: stat-fill 1.2s ease-out forwards;
    }

    .stat-bar-fill--atk { --stat-width: 75%; animation-delay: 0.1s; }
    .stat-bar-fill--mag { --stat-width: 85%; animation-delay: 0.25s; }
    .stat-bar-fill--build { --stat-width: 90%; animation-delay: 0.4s; }
    .stat-bar-fill--deploy { --stat-width: 70%; animation-delay: 0.55s; }
    .stat-bar-fill--int { --stat-width: 80%; animation-delay: 0.7s; }

    @keyframes stat-fill {
      0% { width: 0; }
      100% { width: var(--stat-width); }
    }

    .stat-value {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      width: 36px;
      text-align: left;
      color: var(--fg);
    }

    .bulletin-board {
      position: relative;
      background: #5c3d2e;
      border: 4px solid #3e2518;
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      min-width: 300px;
      max-width: 480px;
      width: 100%;
      box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 4px 4px 12px var(--shadow);
      overflow: visible;
    }

    .bulletin-board::before {
      content: 'Guild Board';
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      background: var(--card-border);
      color: #3e2518;
      padding: var(--space-xs) var(--space-md);
      border-radius: var(--radius-sm);
      border: 1px solid #3e2518;
    }

    .wanted-card {
      background: #f4e4c1;
      border: 2px solid #c9a96e;
      padding: var(--space-md);
      margin-bottom: var(--space-md);
      border-radius: var(--radius-sm);
      box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
      position: relative;
    }

    .wanted-card::after {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%) rotate(2deg);
      width: 24px;
      height: 12px;
      background: #8b6914;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .wanted-card:nth-child(1) { transform: rotate(-2deg); }
    .wanted-card:nth-child(2) { transform: rotate(1.5deg); }
    .wanted-card:nth-child(3) { transform: rotate(-1deg); }
    .wanted-card:nth-child(4) { transform: rotate(2.5deg); }

    .wanted-card h4 {
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      color: #8b1a1a;
      margin-bottom: var(--space-xs);
    }

    .wanted-card ul {
      list-style: none;
      padding: 0;
    }

    .wanted-card li {
      font-size: var(--fs-xs);
      color: #2b2d42;
      padding: 2px 0;
    }

    .wanted-card li::before {
      content: '\2694\fe0e ';
    }

    .paper-scrap {
      position: absolute;
      width: 20px;
      height: 14px;
      background: #f4e4c1;
      border-radius: 1px;
      opacity: 0.7;
      animation: scrap-blow linear infinite;
      pointer-events: none;
      z-index: 10;
    }

    .paper-scrap--1 {
      top: 10%;
      left: -20px;
      animation-duration: 12s;
      animation-delay: 0s;
    }

    .paper-scrap--2 {
      top: 30%;
      left: -20px;
      animation-duration: 15s;
      animation-delay: 3s;
      width: 16px;
      height: 12px;
    }

    .paper-scrap--3 {
      top: 50%;
      left: -20px;
      animation-duration: 18s;
      animation-delay: 7s;
      width: 22px;
      height: 10px;
    }

    .paper-scrap--4 {
      top: 70%;
      left: -20px;
      animation-duration: 14s;
      animation-delay: 5s;
      width: 14px;
      height: 10px;
    }

    @keyframes scrap-blow {
      0% {
        transform: translateX(0) rotate(0deg);
        opacity: 0.7;
      }
      80% {
        opacity: 0.5;
      }
      100% {
        transform: translateX(calc(100vw + 40px)) rotate(720deg);
        opacity: 0;
      }
    }

    [data-theme="night"] .wanted-card {
      background: #1a1235;
      border-color: #3a2d5c;
    }

    [data-theme="night"] .wanted-card h4 {
      color: #ff6b6b;
    }

    [data-theme="night"] .wanted-card li {
      color: #e0d6c8;
    }

    [data-theme="night"] .paper-scrap {
      background: #1a1235;
    }

    #town {
      position: relative;
      overflow-x: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .town-sky-strip {
      width: 100%;
      height: 120px;
      background: linear-gradient(
        180deg,
        var(--sky-top) 0%,
        var(--sky-mid) 60%,
        var(--sky-horizon) 100%
      );
      flex-shrink: 0;
      position: relative;
      transition: background 600ms ease;
    }

    .town-sky-strip::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30px;
      background: linear-gradient(
        180deg,
        transparent 0%,
        var(--bg) 100%
      );
    }

    .town-header {
      text-align: center;
      padding: var(--space-lg) var(--space-md) var(--space-md);
    }

    .town-header h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      color: var(--fg);
      margin-bottom: var(--space-sm);
    }

    .town-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
    }

    .town-divider-line {
      width: 60px;
      height: 2px;
      background: var(--card-border);
    }

    .town-header p {
      font-family: var(--font-body);
      font-size: var(--fs-base);
      color: var(--fg-light);
      opacity: 0.8;
    }

    .street-ground {
      width: 100%;
      height: 60px;
      flex-shrink: 0;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(0,0,0,0.08) 38px,
          rgba(0,0,0,0.08) 40px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 28px,
          rgba(0,0,0,0.06) 28px,
          rgba(0,0,0,0.06) 30px
        ),
        repeating-radial-gradient(
          circle at 20px 15px,
          var(--cobble) 0px,
          var(--cobble) 12px,
          var(--cobble-light) 12px,
          var(--cobble-light) 14px
        );
      background-size: 40px 30px, 40px 30px, 40px 30px;
      border-top: 3px solid rgba(80, 60, 30, 0.4);
      position: relative;
      z-index: 1;
    }

    .street-ground::before {
      content: '';
      position: absolute;
      top: -16px;
      left: 0;
      width: 100%;
      height: 16px;
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(80, 60, 30, 0.15) 100%
      );
    }

    [data-theme="night"] .street-ground::before {
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(10, 5, 20, 0.3) 100%
      );
    }

    [data-theme="night"] .town-sky-strip::after {
      background: linear-gradient(
        180deg,
        transparent 0%,
        var(--bg) 100%
      );
    }

    .building {
      position: relative;
      cursor: pointer;
      transition: transform 280ms ease, filter 280ms ease;
      flex-shrink: 0;
    }

    .building:hover {
      transform: translateY(-8px);
      filter: brightness(1.05);
    }

    .building:hover .building-sign {
      filter: brightness(1.2);
    }

    .building:active {
      transform: scale(1.05);
    }

    .building-top {
      position: relative;
      transition: background 600ms ease, box-shadow 600ms ease;
    }

    .building-body {
      position: relative;
      transition: background 600ms ease, box-shadow 600ms ease;
    }

    .building-label {
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      text-align: center;
      color: var(--fg-light);
      margin-top: var(--space-sm);
      letter-spacing: 0.05em;
      text-shadow: 0 1px 3px var(--shadow);
    }

    .building-sign {
      position: absolute;
      top: 10px;
      right: -30px;
      width: 60px;
      height: 28px;
      background: #5c3d2e;
      border: 2px solid #3e2518;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 0.55rem;
      color: #f4e4c1;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building-sign::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 8px;
      background: #3e2518;
    }

    .building-window {
      width: 28px;
      height: 32px;
      background: linear-gradient(180deg, #1a1235 40%, #ffd166 40%);
      border: 2px solid #3e2518;
      border-radius: 3px 3px 0 0;
      position: absolute;
      transition: background 600ms ease, box-shadow 600ms ease;
    }

    .building-window--lit {
      background: linear-gradient(180deg, #1a1235 30%, #ffd166 30%);
      box-shadow: 0 0 12px 3px rgba(255, 209, 102, 0.3);
      transition: background 600ms ease, box-shadow 600ms ease;
    }

    .building-door {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 44px;
      background: #3e2518;
      border: 2px solid #2a1a0e;
      border-bottom: none;
      border-radius: 15px 15px 0 0;
    }

    .building-door::after {
      content: '';
      position: absolute;
      right: 6px;
      top: 50%;
      width: 4px;
      height: 4px;
      background: #ffd166;
      border-radius: 50%;
    }

    .building-smoke {
      position: absolute;
      top: -40px;
      left: 50%;
      width: 8px;
      height: 8px;
      background: rgba(180, 180, 180, 0.4);
      border-radius: 50%;
      animation: smoke-rise 3s ease-out infinite;
    }

    .building-smoke span {
      position: absolute;
      display: block;
      width: 8px;
      height: 8px;
      background: rgba(180, 180, 180, 0.3);
      border-radius: 50%;
    }

    .building-smoke span:nth-child(1) { animation: smoke-puff 3s ease-out 0.5s infinite; }
    .building-smoke span:nth-child(2) { animation: smoke-puff 3s ease-out 1s infinite; }
    .building-smoke span:nth-child(3) { animation: smoke-puff 3s ease-out 1.5s infinite; }

    @keyframes smoke-puff {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
      }
      50% {
        transform: translate(calc(-8px * var(--drift, 1)), -30px) scale(1.8);
        opacity: 0.3;
      }
      100% {
        transform: translate(calc(-14px * var(--drift, 1)), -60px) scale(2.5);
        opacity: 0;
      }
    }

    @keyframes smoke-rise {
      0% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
      }
      100% {
        transform: translateY(-40px) scale(2);
        opacity: 0;
      }
    }

    [data-theme="night"] .building-window--lit {
      box-shadow: 0 0 20px 8px rgba(255, 209, 102, 0.73);
    }

    [data-theme="night"] .building-smoke span,
    [data-theme="night"] .building-smoke {
      background: rgba(100, 80, 120, 0.3);
    }

    [data-theme="night"] .building-body {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.53);
    }

    .forge-ember {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #ff6b35;
      box-shadow: 0 0 4px #ff6b35;
      animation: ember-rise 2s ease-out infinite;
      pointer-events: none;
      display: none;
    }

    [data-theme="night"] .forge-ember {
      display: block;
    }

    .forge-ember:nth-child(1) { left: 3px; animation-delay: 0s; }
    .forge-ember:nth-child(2) { left: 7px; animation-delay: 0.4s; }
    .forge-ember:nth-child(3) { left: 11px; animation-delay: 0.8s; }

    @keyframes ember-rise {
      0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
      }
      100% {
        transform: translateY(-30px) scale(0.3);
        opacity: 0;
      }
    }

    .building--forge .building-top {
      width: 160px;
      height: 55px;
      background: #3d2b1f;
      clip-path: polygon(0% 100%, 5% 0%, 95% 0%, 100% 100%);
    }

    .building--forge .building-body {
      width: 160px;
      height: 170px;
      background:
        repeating-linear-gradient(
          180deg,
          #6b4226 0px,
          #6b4226 11px,
          #4a2e18 11px,
          #4a2e18 12px
        );
      border: 2px solid #3e2518;
      border-top: none;
    }

    .building--forge .building-window {
      width: 26px;
      height: 26px;
      background: #ffd166;
      border: 2px solid #3e2518;
      border-radius: 2px;
      animation: pulse-glow 3s ease-in-out infinite;
    }

    .building--forge .building-window:nth-child(1) { top: 22px; left: 16px; animation-delay: 0s; }
    .building--forge .building-window:nth-child(2) { top: 22px; right: 16px; left: auto; animation-delay: 1.5s; }

    @keyframes pulse-glow {
      0%, 100% { opacity: 0.6; box-shadow: 0 0 8px #ffd16688; }
      50% { opacity: 1; box-shadow: 0 0 16px #ffd166cc; }
    }

    .building--forge .building-door {
      width: 34px;
      height: 50px;
      background: #3e2518;
      border: 2px solid #2a1a0e;
      border-bottom: none;
      border-radius: 50% 50% 0 0;
    }

    .building--forge .chimney {
      position: absolute;
      top: -28px;
      right: 24px;
      width: 18px;
      height: 32px;
      background: #3d2b1f;
      border-radius: 2px 2px 0 0;
      border: 1px solid #2a1a0e;
    }

    .building--forge .smoke {
      position: absolute;
      top: -68px;
      right: 24px;
      width: 18px;
      height: 40px;
    }

    .building--forge .puff {
      display: block;
      width: 10px;
      height: 10px;
      background: rgba(180, 180, 180, 0.5);
      border-radius: 50%;
      position: absolute;
      left: 4px;
      animation: smoke-rise 3s ease-out infinite;
    }

    .building--forge .puff:nth-child(1) { animation-delay: 0s; }
    .building--forge .puff:nth-child(2) { animation-delay: 0.6s; }
    .building--forge .puff:nth-child(3) { animation-delay: 1.2s; }

    .building--forge .workshop-sign {
      position: absolute;
      top: 80px;
      right: -44px;
      width: 80px;
      height: 32px;
      background: #5c3d2e;
      border: 2px solid #3e2518;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #f4e4c1;
      text-align: center;
      line-height: 1.1;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--forge .workshop-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #3e2518;
    }

    .building--forge .workshop-sign::after {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 4px;
      background: #3e2518;
      border-radius: 2px;
    }

    .building--forge .drone-prop {
      position: absolute;
      top: -12px;
      left: 12px;
      z-index: 5;
    }

    .building--forge .drone-prop svg {
      width: 28px;
      height: 28px;
    }

    .building--forge .prop-blade {
      animation: prop-spin 3s linear infinite;
      transform-origin: center;
    }

    @keyframes prop-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    [data-theme="night"] .building--forge .puff {
      background: rgba(100, 80, 120, 0.4);
    }

    @property --crystal-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    .building--ace {
      animation: breathe 4s ease-in-out infinite;
    }

    @keyframes breathe {
      0%, 100% { box-shadow: 0 0 20px #3b1f5e44; }
      50% { box-shadow: 0 0 40px #6b35bb44; }
    }

    .building--ace .building-top {
      width: 150px;
      height: 50px;
      background: #3b1f5e;
      border-radius: 50% 50% 0 0;
      border: 2px solid #2a1548;
      border-bottom: none;
    }

    .building--ace .building-body {
      width: 150px;
      height: 165px;
      background:
        linear-gradient(180deg, rgba(59, 31, 94, 0.13) 0%, transparent 60%),
        #2d1a4a;
      border: 2px solid #2a1548;
      border-top: none;
      overflow: visible;
    }

    .building--ace .building-window {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #5a3d8a;
      background: conic-gradient(
        from var(--crystal-angle),
        #06d6a0,
        #3b1f5e,
        #ffd166,
        #3b1f5e,
        #06d6a0
      );
      animation: crystal-spin 6s linear infinite;
      box-shadow: 0 0 8px rgba(6, 214, 160, 0.3);
    }

    @keyframes crystal-spin {
      to { --crystal-angle: 360deg; }
    }

    .building--ace .building-window:nth-child(1) { top: 20px; left: 18px; }
    .building--ace .building-window:nth-child(2) { top: 20px; right: 18px; left: auto; animation-direction: reverse; }

    .building--ace .building-door {
      width: 32px;
      height: 48px;
      background: #2a1548;
      border: 2px solid #1a0e30;
      border-bottom: none;
      border-radius: 50% 50% 0 0;
      box-shadow: 0 0 12px #06d6a0;
    }

    .building--ace .orb {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      pointer-events: none;
    }

    .building--ace .orb--1 {
      background: #06d6a0;
      box-shadow: 0 0 6px #06d6a0;
      top: 60px;
      left: -12px;
      animation: float-orb-1 3s ease-in-out infinite;
    }

    .building--ace .orb--2 {
      background: #ffd166;
      box-shadow: 0 0 6px #ffd166;
      top: 30px;
      right: -14px;
      animation: float-orb-2 4s ease-in-out infinite 0.5s;
    }

    .building--ace .orb--3 {
      background: #06d6a0;
      box-shadow: 0 0 6px #06d6a0;
      bottom: 20px;
      left: -10px;
      animation: float-orb-3 2.5s ease-in-out infinite 1s;
    }

    @keyframes float-orb-1 {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes float-orb-2 {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(8px); }
    }

    @keyframes float-orb-3 {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .building--ace .parlour-sign {
      position: absolute;
      top: 70px;
      right: -50px;
      width: 88px;
      height: 36px;
      background: #2d1a4a;
      border: 2px solid #06d6a066;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #06d6a0;
      text-align: center;
      line-height: 1.1;
      text-shadow: 0 0 8px #06d6a0aa;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--ace .parlour-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #06d6a088;
    }

    .building--ace .parlour-sign::after {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 4px;
      background: #06d6a066;
      border-radius: 2px;
    }

    [data-theme="night"] .building--ace .building-body {
      background:
        linear-gradient(180deg, rgba(59, 31, 94, 0.2) 0%, transparent 60%),
        #1a0e30;
    }

    [data-theme="night"] .building--ace .orb {
      box-shadow: 0 0 10px currentColor;
    }

    [data-theme="night"] .building--ace .parlour-sign {
      text-shadow: 0 0 12px #06d6a0;
      border-color: #06d6a0aa;
    }

    .building--tots .building-top {
      width: 150px;
      height: 55px;
      background: #c0392b;
      clip-path: polygon(0% 100%, 5% 0%, 95% 0%, 100% 100%);
    }

    .building--tots .bell-tower {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 30px;
      background: #c0392b;
      border-radius: 3px 3px 0 0;
      border: 1px solid #a93226;
    }

    .building--tots .bell-tower::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 10px;
      background: #c0392b;
      border-radius: 50% 50% 0 0;
      border: 1px solid #a93226;
      border-bottom: none;
    }

    .building--tots .flag {
      position: absolute;
      top: -42px;
      left: calc(50% + 10px);
      width: 16px;
      height: 10px;
      background: #ffd166;
      clip-path: polygon(0% 0%, 100% 20%, 80% 50%, 100% 80%, 0% 100%);
      animation: flag-wave 1.5s ease-in-out infinite;
      transform-origin: left center;
    }

    .building--tots .flag-pole {
      position: absolute;
      top: -48px;
      left: calc(50% + 9px);
      width: 2px;
      height: 18px;
      background: #3e2518;
    }

    @keyframes flag-wave {
      0%, 100% { transform: skewX(-5deg); }
      50% { transform: skewX(5deg); }
    }

    .building--tots .building-body {
      width: 150px;
      height: 165px;
      background:
        repeating-linear-gradient(
          180deg,
          #fdf6e3 0px,
          #fdf6e3 18px,
          #d4a574 18px,
          #d4a574 20px
        );
      border: 2px solid #c9a96e;
      border-top: none;
    }

    .building--tots .building-window {
      width: 24px;
      height: 24px;
      background: #87ceeb;
      border: 2px solid #d4a574;
      border-radius: 3px;
      position: relative;
    }

    .building--tots .building-window::before {
      content: '\2726';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 10px;
      color: #ffd166;
      line-height: 1;
    }

    .building--tots .building-window:nth-child(1) { top: 18px; left: 16px; }
    .building--tots .building-window:nth-child(2) { top: 18px; right: 16px; left: auto; }
    .building--tots .building-window:nth-child(3) { top: 58px; left: 16px; }
    .building--tots .building-window:nth-child(4) { top: 58px; right: 16px; left: auto; }

    .building--tots .building-door {
      width: 36px;
      height: 50px;
      background: #c0392b;
      border: 2px solid #a93226;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
    }

    .building--tots .building-door::before {
      content: '';
      position: absolute;
      bottom: -6px;
      left: -4px;
      right: -4px;
      height: 6px;
      background: #d4a574;
      border-radius: 2px;
    }

    .building--tots .chalkboard {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 36px;
      background: #1a3a2a;
      border: 3px solid #8b6914;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      font-size: 0.55rem;
      color: #f4e4c1;
      font-style: italic;
      letter-spacing: 0.05em;
    }

    .building--tots .academy-sign {
      position: absolute;
      top: 8px;
      right: -50px;
      width: 84px;
      height: 28px;
      background: #c0392b;
      border: 2px solid #a93226;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #fdf6e3;
      text-align: center;
      line-height: 1.1;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--tots .academy-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #8b6914;
    }

    .building--tots .academy-sign::after {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 4px;
      background: #8b6914;
      border-radius: 2px;
    }

    [data-theme="night"] .building--tots .building-body {
      background:
        repeating-linear-gradient(
          180deg,
          #2a2240 0px,
          #2a2240 18px,
          #3a3055 18px,
          #3a3055 20px
        );
    }

    [data-theme="night"] .building--tots .building-window {
      background: #1a1235;
    }

    .building--volley .building-top {
      width: 160px;
      height: 16px;
      background: #f0f4f0;
      border: 2px solid #b8c4b8;
      border-top: none;
      position: relative;
    }

    .building--volley .building-top::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -6px;
      right: -6px;
      height: 4px;
      background: #06d6a0;
    }

    .building--volley .building-body {
      width: 160px;
      height: 155px;
      background: #f0f4f0;
      border: 2px solid #b8c4b8;
      border-top: none;
      overflow: visible;
    }

    .building--volley .building-window {
      width: 40px;
      height: 50px;
      background: linear-gradient(135deg, #e0f7f4, #b2ebf2);
      border: 2px solid #06d6a0;
      border-radius: 4px;
    }

    .building--volley .building-window:nth-child(1) { top: 14px; left: 12px; }
    .building--volley .building-window:nth-child(2) { top: 14px; right: 12px; left: auto; }

    .building--volley .building-door {
      width: 36px;
      height: 48px;
      background: linear-gradient(135deg, #e0f7f4, #b2ebf2);
      border: 3px solid #06d6a0;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
    }

    .building--volley .net {
      position: absolute;
      bottom: 0;
      left: -20px;
      right: -20px;
      height: 40px;
      border-top: 2px dashed #fff;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 9px,
          rgba(255,255,255,0.4) 9px,
          rgba(255,255,255,0.4) 10px
        );
      animation: net-sway 2s ease-in-out infinite;
      transform-origin: top center;
      pointer-events: none;
    }

    @keyframes net-sway {
      0%, 100% { transform: skewX(2deg); }
      50% { transform: skewX(-2deg); }
    }

    .building--volley .volley-sign {
      position: absolute;
      top: 68px;
      right: -48px;
      width: 80px;
      height: 28px;
      background: #06d6a0;
      border: 2px solid #05c493;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #0a0a1a;
      font-weight: 700;
      text-align: center;
      line-height: 1.1;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--volley .volley-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #05c493;
    }

    [data-theme="night"] .building--volley .building-body {
      background: #1a1235;
      border-color: #3a2d5c;
    }

    [data-theme="night"] .building--volley .building-window {
      background: linear-gradient(135deg, #0d2f2a, #0a2540);
      border-color: #06d6a0;
    }

    [data-theme="night"] .building--volley .net {
      border-top-color: rgba(6, 214, 160, 0.3);
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 9px,
          rgba(6, 214, 160, 0.15) 9px,
          rgba(6, 214, 160, 0.15) 10px
        );
    }

    .building--ledger .building-top {
      width: 150px;
      height: 24px;
      background: #2c2c3e;
      position: relative;
    }

    .building--ledger .building-top::after {
      content: '';
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 16px;
      background: #2c2c3e;
      clip-path: polygon(0% 100%, 15% 0%, 85% 0%, 100% 100%);
    }

    .building--ledger .building-body {
      width: 150px;
      height: 170px;
      background:
        repeating-linear-gradient(
          180deg,
          #8b7355 0px,
          #8b7355 14px,
          #7a6248 14px,
          #7a6248 16px
        );
      border: 2px solid #5c4a38;
      border-top: none;
      overflow: visible;
    }

    .building--ledger .building-window {
      width: 18px;
      height: 36px;
      background: linear-gradient(180deg, #1a1235 50%, #ffd166 50%);
      border: 2px solid #d4a017;
      border-radius: 4px 4px 0 0;
      box-shadow: 0 0 6px rgba(255, 209, 102, 0.2);
    }

    .building--ledger .building-window:nth-child(1) { top: 16px; left: 16px; }
    .building--ledger .building-window:nth-child(2) { top: 16px; right: 16px; left: auto; }

    .building--ledger .building-door {
      width: 30px;
      height: 48px;
      background: #3e2518;
      border: 2px solid #2a1a0e;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
    }

    .building--ledger .building-door::before {
      content: '';
      position: absolute;
      top: 8px;
      left: -3px;
      width: 4px;
      height: 32px;
      background: #2a1a0e;
      border-radius: 1px;
    }

    .building--ledger .building-door::after {
      content: '';
      position: absolute;
      top: 8px;
      right: -3px;
      width: 4px;
      height: 32px;
      background: #2a1a0e;
      border-radius: 1px;
    }

    .building--ledger .abacus {
      position: absolute;
      top: 64px;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 30px;
      background: #5c3d2e;
      border: 2px solid #3e2518;
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 2px 4px;
    }

    .building--ledger .abacus-row {
      display: flex;
      gap: 3px;
    }

    .building--ledger .abacus-bead {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .building--ledger .abacus-bead--gold { background: #d4a017; }
    .building--ledger .abacus-bead--teal { background: #06d6a0; }
    .building--ledger .abacus-bead--red { background: #c0392b; }

    .building--ledger .scroll-deco {
      position: absolute;
      bottom: 8px;
      left: 6px;
      width: 10px;
      height: 28px;
      background: #f4e4c1;
      border-radius: 3px;
      border: 1px solid #c9a96e;
      transform: rotate(-4deg);
    }

    .building--ledger .scroll-deco--2 {
      left: auto;
      right: 6px;
      transform: rotate(3deg);
    }

    .building--ledger .scales-sign {
      position: absolute;
      top: 110px;
      right: -44px;
      width: 76px;
      height: 32px;
      background: #2c2c3e;
      border: 2px solid #d4a01766;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #d4a017;
      text-align: center;
      line-height: 1.1;
      text-shadow: 0 0 6px #d4a01788;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--ledger .scales-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #d4a01766;
    }

    .building--ledger .scales-sign::after {
      content: '\2696';
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: #d4a017;
    }

    [data-theme="night"] .building--ledger .building-body {
      background:
        repeating-linear-gradient(
          180deg,
          #3a3055 0px,
          #3a3055 14px,
          #2a2240 14px,
          #2a2240 16px
        );
    }

    .building--navtower .building-top {
      width: 90px;
      height: 30px;
      background: #1c2b3a;
      position: relative;
      clip-path: polygon(
        0% 100%, 0% 30%, 10% 30%, 10% 0%, 20% 0%, 20% 30%,
        30% 30%, 30% 0%, 40% 0%, 40% 30%, 50% 30%, 50% 0%,
        60% 0%, 60% 30%, 70% 30%, 70% 0%, 80% 0%, 80% 30%,
        90% 30%, 90% 0%, 100% 0%, 100% 30%, 100% 100%
      );
    }

    .building--navtower .building-body {
      width: 90px;
      height: 260px;
      background:
        repeating-linear-gradient(
          180deg,
          #1c2b3a 0px,
          #1c2b3a 18px,
          #152230 18px,
          #152230 20px
        );
      border: 2px solid #0f1a26;
      border-top: none;
    }

    .building--navtower .building-window {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #4fc3f7;
      border: 2px solid #0288d1;
      box-shadow: 0 0 8px #4fc3f788;
      animation: screen-pulse 4s ease-in-out infinite;
    }

    .building--navtower .building-window:nth-child(1) { top: 18px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
    .building--navtower .building-window:nth-child(2) { top: 58px; left: 50%; transform: translateX(-50%); animation-delay: 1.3s; }
    .building--navtower .building-window:nth-child(3) { top: 98px; left: 50%; transform: translateX(-50%); animation-delay: 2.6s; }

    @keyframes screen-pulse {
      0%, 100% { background: #4fc3f7; box-shadow: 0 0 8px #4fc3f788; }
      50% { background: #0288d1; box-shadow: 0 0 14px #0288d188; }
    }

    .building--navtower .building-door {
      width: 24px;
      height: 36px;
      background: #0f1a26;
      border: 2px solid #0a1018;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
    }

    .building--navtower .radar-arm {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 20px;
      background: #0f1a26;
      transform-origin: bottom center;
      animation: radar-spin 4s linear infinite;
      z-index: 6;
    }

    .building--navtower .radar {
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 12px;
      background: #4fc3f7;
      clip-path: ellipse(50% 100% at 50% 100%);
      box-shadow: 0 0 8px #4fc3f788;
    }

    @keyframes radar-spin {
      0% { transform: translateX(-50%) rotate(0deg); }
      100% { transform: translateX(-50%) rotate(360deg); }
    }

    .building--navtower .nav-sign {
      position: absolute;
      top: 130px;
      right: -46px;
      width: 80px;
      height: 28px;
      background: #1c2b3a;
      border: 2px solid #4fc3f766;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #4fc3f7;
      text-align: center;
      line-height: 1.1;
      text-shadow: 0 0 6px #4fc3f788;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--navtower .nav-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #4fc3f766;
    }

    [data-theme="night"] .building--navtower .building-body {
      background:
        repeating-linear-gradient(
          180deg,
          #0f1a26 0px,
          #0f1a26 18px,
          #0a1018 18px,
          #0a1018 20px
        );
    }

    .lamp-post {
      position: relative;
      align-self: flex-end;
      flex-shrink: 0;
      width: 6px;
      height: 120px;
    }

    .lamp-pole {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 100px;
      background: #5c3d1e;
      border-radius: 2px 2px 0 0;
    }

    .lamp-pole::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: -4px;
      width: 12px;
      height: 4px;
      background: #5c3d1e;
      border-radius: 2px;
    }

    .lamp-arm {
      position: absolute;
      top: 8px;
      left: 50%;
      width: 12px;
      height: 3px;
      background: #5c3d1e;
      border-radius: 1px;
      transform-origin: left center;
    }

    .lamp-head {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 16px;
      height: 14px;
      clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
      transition: box-shadow 600ms ease, background 600ms ease;
      background: var(--lamp-color);
      box-shadow: 0 0 8px rgba(255, 204, 85, 0.5);
    }

    .lamp-glow {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, rgba(255, 204, 85, 0.15) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      transition: background 600ms ease, opacity 600ms ease;
      opacity: 0.3;
    }

    .lamp-ground {
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 16px;
      background: radial-gradient(ellipse, rgba(255, 204, 85, 0.1) 0%, transparent 70%);
      pointer-events: none;
    }

    [data-theme="night"] .lamp-glow {
        background: radial-gradient(circle, rgba(255, 204, 85, 0.35) 0%, transparent 70%) !important;
      opacity: 1
    }

    [data-theme="night"] .lamp-ground {
      background: radial-gradient(ellipse, rgba(255, 204, 85, 0.22) 0%, transparent 70%);
    }

    [data-theme="night"] .lamp-head {
      box-shadow: 0 0 14px rgba(255, 204, 85, 0.9), 0 0 28px rgba(255, 204, 85, 0.4);
    }

    [data-theme="night"] .lamp-pole {
      background: #7a5a3e;
    }

    .district-transition {
      position: relative;
      padding: var(--space-xl) var(--space-md);
      background:
        linear-gradient(180deg, transparent 0%, rgba(74, 74, 90, 0.08) 100%),
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(0,0,0,0.06) 38px,
          rgba(0,0,0,0.06) 40px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 28px,
          rgba(0,0,0,0.04) 28px,
          rgba(0,0,0,0.04) 30px
        ),
        repeating-radial-gradient(
          circle at 20px 15px,
          var(--cobble) 0px,
          var(--cobble) 12px,
          var(--cobble-light) 12px,
          var(--cobble-light) 14px
        );
      background-size: 100% 100%, 40px 30px, 40px 30px, 40px 30px;
      border-top: 2px dashed rgba(255, 255, 255, 0.13);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xl);
      min-height: 180px;
    }

    .district-sign {
      position: relative;
      flex-shrink: 0;
    }

    .district-sign-post {
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 50px;
      background: #5c3d2e;
      border-radius: 2px;
    }

    .district-plank {
      background: #5c3d2e;
      border: 2px solid #3e2518;
      border-radius: 4px;
      padding: var(--space-sm) var(--space-md);
      font-family: var(--font-display);
      font-size: var(--fs-sm);
      color: #f4e4c1;
      text-align: center;
      margin-bottom: var(--space-xs);
      box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    }

    .district-plank--1 {
      transform: rotate(-2deg);
    }

    .district-plank--2 {
      transform: rotate(2deg);
    }

    .district-flavor {
      font-family: var(--font-body);
      font-size: var(--fs-base);
      color: var(--fg-light);
      opacity: 0.7;
      max-width: 340px;
      line-height: 1.6;
      font-style: italic;
    }

    [data-theme="night"] .district-transition {
      background:
        linear-gradient(180deg, transparent 0%, rgba(30, 20, 50, 0.2) 100%),
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(0,0,0,0.1) 38px,
          rgba(0,0,0,0.1) 40px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 28px,
          rgba(0,0,0,0.06) 28px,
          rgba(0,0,0,0.06) 30px
        ),
        repeating-radial-gradient(
          circle at 20px 15px,
          var(--cobble) 0px,
          var(--cobble) 12px,
          var(--cobble-light) 12px,
          var(--cobble-light) 14px
        );
      background-size: 100% 100%, 40px 30px, 40px 30px, 40px 30px;
      border-top-color: rgba(255, 255, 255, 0.06);
    }

    [data-theme="night"] .district-plank {
      background: #3e2518;
      border-color: #2a1a0e;
    }

    #research {
      position: relative;
      overflow-x: hidden;
      padding: var(--space-xl) 0;
    }

    .research-header {
      text-align: center;
      padding: var(--space-lg) var(--space-md) var(--space-md);
    }

    .research-header h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      color: var(--fg);
      margin-bottom: var(--space-sm);
    }

    .research-header p {
      font-family: var(--font-body);
      font-size: var(--fs-base);
      color: var(--fg-light);
      opacity: 0.7;
    }

    .research-street {
      display: flex;
      align-items: flex-end;
      gap: 6rem;
      padding: var(--space-lg) var(--space-2xl);
      min-height: 340px;
      position: relative;
      z-index: 2;
    }

    .building--colosseum .building-top {
      width: 140px;
      height: 50px;
      background: #3a3a4a;
      border-radius: 50% 50% 0 0;
      border: 2px solid #2a2a3a;
      border-bottom: none;
      position: relative;
    }

    .building--colosseum .goal-post {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 18px;
    }

    .building--colosseum .goal-post::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 18px;
      background: #f4e4c1;
    }

    .building--colosseum .goal-post::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 2px;
      height: 18px;
      background: #f4e4c1;
    }

    .building--colosseum .goal-bar {
      position: absolute;
      top: 0;
      left: -2px;
      right: -2px;
      height: 2px;
      background: #f4e4c1;
    }

    .building--colosseum .building-body {
      width: 140px;
      height: 145px;
      background:
        repeating-linear-gradient(
          180deg,
          #3a3a4a 0px,
          #3a3a4a 14px,
          #2e2e3e 14px,
          #2e2e3e 16px
        );
      border: 2px solid #2a2a3a;
      border-top: none;
      position: relative;
    }

    .building--colosseum .pitch-marks {
      position: absolute;
      top: 20px;
      left: 12px;
      right: 12px;
      bottom: 40px;
      border: 1px dashed rgba(255, 255, 255, 0.25);
      border-radius: 2px;
    }

    .building--colosseum .pitch-marks::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 0;
      border-top: 1px dashed rgba(255, 255, 255, 0.25);
    }

    .building--colosseum .pitch-marks::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 1px dashed rgba(255, 255, 255, 0.25);
      border-radius: 50%;
    }

    .building--colosseum .building-window {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background: radial-gradient(circle at 30% 70%, #e74c3c, #f1c40f 50%, #2ecc71 80%);
      border: 2px solid #2a2a3a;
      box-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
    }

    .building--colosseum .building-window:nth-child(1) { top: 70px; left: 14px; }

    .building--colosseum .building-door {
      width: 28px;
      height: 40px;
      background: #2a2a3a;
      border: 2px solid #1a1a2a;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
    }

    .building--colosseum .colosseum-sign {
      position: absolute;
      top: 75px;
      right: -50px;
      width: 88px;
      height: 32px;
      background: #2a2a3a;
      border: 2px solid #4a4a5a;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #f4e4c1;
      text-align: center;
      line-height: 1.1;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--colosseum .colosseum-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #4a4a5a;
    }

    [data-theme="night"] .building--colosseum .building-body {
      background:
        repeating-linear-gradient(
          180deg,
          #1a1a2a 0px,
          #1a1a2a 14px,
          #151525 14px,
          #151525 16px
        );
      border-color: #151525;
    }

    [data-theme="night"] .building--colosseum .building-top {
      background: #1a1a2a;
      border-color: #151525;
    }

    @property --vortex-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    .building--vortex .building-top {
      width: 120px;
      height: 60px;
      background: #2c3e50;
      border-radius: 50%;
      border: 2px solid #1a2a3a;
      position: relative;
    }

    .building--vortex .vortex-window {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: conic-gradient(
        from var(--vortex-angle),
        #06d6a0,
        #3b1f5e,
        #ffd166,
        #3b1f5e,
        #4fc3f7,
        #3b1f5e,
        #06d6a0
      );
      border: 2px solid #1a2a3a;
      animation: vortex-spin 8s linear infinite;
      box-shadow: 0 0 12px rgba(6, 214, 160, 0.3);
      transition: box-shadow 600ms ease;
    }

    [data-theme="night"] .building--vortex .vortex-window {
      animation-duration: 4s;
      box-shadow: 0 0 20px rgba(6, 214, 160, 0.6), 0 0 40px rgba(79, 195, 247, 0.3);
    }

    @keyframes vortex-spin {
      to { --vortex-angle: 360deg; }
    }

    .building--vortex .telescope {
      position: absolute;
      top: -10px;
      right: 10px;
      width: 4px;
      height: 24px;
      background: #5c3d2e;
      border-radius: 2px;
      transform: rotate(-30deg);
      transform-origin: bottom center;
    }

    .building--vortex .telescope::after {
      content: '';
      position: absolute;
      top: -4px;
      left: -3px;
      width: 10px;
      height: 6px;
      background: #5c3d2e;
      border-radius: 3px 3px 1px 1px;
    }

    .building--vortex .building-body {
      width: 120px;
      height: 150px;
      background:
        repeating-linear-gradient(
          135deg,
          #2c3e50 0px,
          #2c3e50 10px,
          #243343 10px,
          #243343 12px
        );
      border: 2px solid #1a2a3a;
      border-top: none;
    }

    .building--vortex .building-window {
      width: 22px;
      height: 26px;
      background: #1a2a3a;
      border: 2px solid #243343;
      border-radius: 3px;
    }

    .building--vortex .building-window:nth-child(1) { top: 18px; left: 16px; }
    .building--vortex .building-window:nth-child(2) { top: 18px; right: 16px; left: auto; }

    .building--vortex .building-door {
      width: 24px;
      height: 36px;
      background: #1a2a3a;
      border: 2px solid #0f1a26;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
    }

    .building--vortex .vortex-sign {
      position: absolute;
      top: 65px;
      right: -46px;
      width: 80px;
      height: 28px;
      background: #2c3e50;
      border: 2px solid #1a2a3a;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #4fc3f7;
      text-align: center;
      line-height: 1.1;
      text-shadow: 0 0 6px #4fc3f788;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--vortex .vortex-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #1a2a3a;
    }

    [data-theme="night"] .building--vortex .building-body {
      background:
        repeating-linear-gradient(
          135deg,
          #0f1a26 0px,
          #0f1a26 10px,
          #0a1420 10px,
          #0a1420 12px
        );
      border-color: #0a1420;
    }

    [data-theme="night"] .building--vortex .building-top {
      background: #0f1a26;
      border-color: #0a1420;
    }

    .building--citadel {
      margin-top: -20px;
    }

    .building--citadel .building-top {
      width: 130px;
      height: 40px;
      background: #d4c9b0;
      clip-path: polygon(0% 100%, 10% 20%, 90% 20%, 100% 100%);
      border: 2px solid #b8a88a;
      position: relative;
    }

    .building--citadel .building-body {
      width: 130px;
      height: 135px;
      background:
        repeating-linear-gradient(
          180deg,
          #d4c9b0 0px,
          #d4c9b0 14px,
          #c4b99f 14px,
          #c4b99f 16px
        );
      border: 2px solid #b8a88a;
      border-top: none;
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
      position: relative;
    }

    .building--citadel .rune-symbols {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      color: #8b7355;
      letter-spacing: 8px;
      opacity: 0.6;
    }

    .building--citadel .building-window {
      width: 20px;
      height: 24px;
      background: #1a2a3a;
      border: 2px solid #b8a88a;
      border-radius: 2px;
      overflow: hidden;
      position: relative;
    }

    .building--citadel .data-stream {
      position: absolute;
      top: 0;
      left: 3px;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, transparent 0%, #4fc3f7 50%, transparent 100%);
      background-size: 100% 200%;
      animation: data-stream 1.5s linear infinite;
    }

    .building--citadel .data-stream--2 {
      left: auto;
      right: 3px;
      animation-delay: 0.7s;
    }

    @keyframes data-stream {
      0% { background-position: 0 -100%; }
      100% { background-position: 0 100%; }
    }

    .building--citadel .building-window:nth-child(1) { top: 50px; left: 14px; }
    .building--citadel .building-window:nth-child(2) { top: 50px; right: 14px; left: auto; }

    .building--citadel .building-door {
      width: 26px;
      height: 38px;
      background: #8b7355;
      border: 2px solid #6a5a45;
      border-bottom: none;
      border-radius: 4px 4px 0 0;
    }

    .building--citadel .cloud-base {
      position: absolute;
      bottom: -14px;
      left: -16px;
      right: -16px;
      height: 24px;
      display: flex;
      justify-content: center;
      gap: 0;
    }

    .building--citadel .cloud-puff {
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      position: relative;
      flex-shrink: 0;
    }

    .building--citadel .cloud-puff--1 { width: 36px; height: 20px; bottom: 0; }
    .building--citadel .cloud-puff--2 { width: 44px; height: 24px; bottom: 4px; }
    .building--citadel .cloud-puff--3 { width: 32px; height: 18px; bottom: 1px; }

    .building--citadel .citadel-sign {
      position: absolute;
      top: 80px;
      right: -50px;
      width: 88px;
      height: 28px;
      background: #d4c9b0;
      border: 2px solid #b8a88a;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      color: #4a4a5a;
      text-align: center;
      line-height: 1.1;
      transform: rotate(6deg);
      z-index: 5;
      transition: filter 280ms ease;
    }

    .building--citadel .citadel-sign::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 6px;
      background: #b8a88a;
    }

    [data-theme="night"] .building--citadel .building-body {
      background:
        repeating-linear-gradient(
          180deg,
          #2a2240 0px,
          #2a2240 14px,
          #221a35 14px,
          #221a35 16px
        );
      border-color: #3a2d5c;
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
    }

    [data-theme="night"] .building--citadel .building-top {
      background: #2a2240;
      border-color: #3a2d5c;
    }

    [data-theme="night"] .building--citadel .cloud-puff {
      background: rgba(58, 45, 92, 0.5);
    }

    [data-theme="night"] .building--citadel .rune-symbols {
      color: #6b5c9a;
    }

    [data-theme="night"] .building--citadel .citadel-sign {
      background: #2a2240;
      border-color: #3a2d5c;
      color: #4fc3f7;
    }

    .research-ground {
      width: 100%;
      height: 50px;
      flex-shrink: 0;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(0,0,0,0.08) 38px,
          rgba(0,0,0,0.08) 40px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 28px,
          rgba(0,0,0,0.06) 28px,
          rgba(0,0,0,0.06) 30px
        ),
        repeating-radial-gradient(
          circle at 20px 15px,
          #7a7a8a 0px,
          #7a7a8a 12px,
          #8a8a9a 12px,
          #8a8a9a 14px
        );
      background-size: 40px 30px, 40px 30px, 40px 30px;
      border-top: 3px solid rgba(74, 74, 90, 0.4);
      position: relative;
      z-index: 1;
    }

    [data-theme="night"] .research-ground {
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0px,
          transparent 38px,
          rgba(0,0,0,0.1) 38px,
          rgba(0,0,0,0.1) 40px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0px,
          transparent 28px,
          rgba(0,0,0,0.08) 28px,
          rgba(0,0,0,0.08) 30px
        ),
        repeating-radial-gradient(
          circle at 20px 15px,
          #2a2a3a 0px,
          #2a2a3a 12px,
          #3a3a4a 12px,
          #3a3a4a 14px
        );
      background-size: 40px 30px, 40px 30px, 40px 30px;
    }


    #tavern {
      min-height: 100vh;
      position: relative;
    }

    /* Tavern Interior */
    .tavern-interior {
      max-width: 900px;
      margin: 0 auto;
      background: linear-gradient(180deg, #3e2518 0%, #2a1a0e 100%);
      border: 4px solid #5c3d2e;
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 8px 32px var(--shadow);
      position: relative;
    }

    .tavern-header {
      text-align: center;
      margin-bottom: var(--space-xl);
    }

    .tavern-header h2 {
      font-family: var(--font-display);
      font-size: var(--fs-2xl);
      color: #f4e4c1;
      margin-bottom: var(--space-sm);
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }

    .tavern-header p {
      font-family: var(--font-body);
      font-size: var(--fs-base);
      color: #c9bfaf;
      font-style: italic;
    }

    .fireplace {
      width: 140px;
      height: 160px;
      margin: 0 auto var(--space-xl);
      background: linear-gradient(180deg, #2a1a0e 0%, #1a0e0a 100%);
      border: 3px solid #5c3d2e;
      border-radius: 12px 12px 0 0;
      position: relative;
      overflow: hidden;
    }

    .fireplace-glow {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 60%;
      background: radial-gradient(ellipse at bottom, #ff6b35 0%, #ff8c42 30%, transparent 70%);
      animation: fire-flicker 2s ease-in-out infinite;
    }

    @keyframes fire-flicker {
      0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
      50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
    }

    .flame {
      position: absolute;
      bottom: 10px;
      width: 8px;
      height: 20px;
      background: linear-gradient(180deg, #ffd166 0%, #ff6b35 50%, transparent 100%);
      border-radius: 50% 50% 0 0;
      animation: flame-dance 1.5s ease-in-out infinite;
    }

    .flame:nth-child(1) { left: 30%; animation-delay: 0s; }
    .flame:nth-child(2) { left: 50%; animation-delay: 0.3s; height: 26px; }
    .flame:nth-child(3) { left: 70%; animation-delay: 0.6s; height: 18px; }

    @keyframes flame-dance {
      0%, 100% { transform: translateY(0) scaleY(1); }
      50% { transform: translateY(-6px) scaleY(1.2); }
    }

    .guestbook {
      background: #f4e4c1;
      border: 2px solid #8b6914;
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
    }

    .guestbook h3 {
      font-family: var(--font-display);
      font-size: var(--fs-lg);
      color: #2b2d42;
      margin-bottom: var(--space-md);
      text-align: center;
    }

    .contact-links {
      display: flex;
      gap: var(--space-md);
      justify-content: center;
      flex-wrap: wrap;
    }

    .contact-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-sm) var(--space-lg);
      background: #2b2d42;
      color: #f4e4c1;
      border-radius: var(--radius-pill);
      text-decoration: none;
      font-family: var(--font-body);
      font-weight: 600;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .contact-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(6, 214, 160, 0.4);
    }

    [data-theme="night"] .guestbook {
      background: #1a1235;
      border-color: #3a2d5c;
    }

    [data-theme="night"] .guestbook h3 {
      color: #e0d6c8;
    }

    [data-theme="night"] .contact-link {
      background: #3a3f5c;
    }

    /* Footer */
    #footer {
      padding: var(--space-xl) var(--space-md);
      text-align: center;
      position: relative;
      background: linear-gradient(180deg, var(--bg) 0%, var(--sky-top) 100%);
      min-height: 40vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: background 600ms ease;
    }

    .footer-stars {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 600ms ease;
    }

    [data-theme="night"] .footer-stars {
      opacity: 1;
    }

    .footer-content {
      position: relative;
      z-index: 2;
    }

    .lantern-links {
      display: flex;
      gap: var(--space-lg);
      justify-content: center;
      margin-bottom: var(--space-md);
    }

    .lantern-link {
      width: 48px;
      height: 48px;
      background: var(--firefly);
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(255, 209, 102, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 24px;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .lantern-link:hover {
      transform: translateY(-4px) scale(1.1);
      box-shadow: 0 8px 24px rgba(255, 209, 102, 0.6);
    }

    [data-theme="night"] .lantern-link {
      box-shadow: 0 4px 12px rgba(255, 209, 102, 0.6), 0 0 20px rgba(255, 209, 102, 0.3);
    }

    .footer-credit {
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      color: var(--fg-light);
      opacity: 0.7;
    }



    /* Mobile Responsive */
    @media (max-width: 768px) {
      .street, .research-street {
        flex-direction: column;
        align-items: center;
        gap: var(--space-xl);
      }
      
      .town-map {
        width: 140px;
        bottom: var(--space-sm);
        left: var(--space-sm);
      }
      
      .modal-card {
        width: 95%;
        padding: var(--space-md);
      }
      
      .toggle-bar {
        top: var(--space-sm);
        right: var(--space-sm);
      }
      
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(6px);
      opacity: 1;
      transition: opacity 300ms ease, backdrop-filter 300ms ease;
    }

    .modal-overlay.hidden {
      opacity: 0;
      backdrop-filter: blur(0);
      pointer-events: none;
    }

    .modal-card {
      background: #f4e4c1;
      border: 2px solid #8b6914;
      border-radius: var(--radius-lg);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(212, 160, 23, 0.13);
      max-width: 520px;
      width: 90%;
      padding: var(--space-lg);
      transform: translateY(0) scale(1);
      transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
      position: relative;
      max-height: 85vh;
      overflow-y: auto;
    }

    .modal-overlay.hidden .modal-card {
      transform: translateY(40px) scale(0.95);
    }

    [data-theme="night"] .modal-card {
      background: #1a1235;
      border-color: #3a2d5c;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), inset 0 0 40px rgba(58, 45, 92, 0.2);
    }

    .modal-close {
      position: absolute;
      top: var(--space-sm);
      right: var(--space-sm);
      background: none;
      border: 1px solid var(--card-border);
      border-radius: var(--radius-sm);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      cursor: pointer;
      padding: var(--space-xs) var(--space-sm);
      transition: background var(--transition-fast), border-color var(--transition-fast);
    }

    .modal-close:hover {
      background: var(--card-border);
      color: #f4e4c1;
    }

    .modal-header {
      margin-bottom: var(--space-md);
    }

    .modal-icon {
      display: inline-block;
      width: 28px;
      height: 28px;
      margin-right: var(--space-sm);
      vertical-align: middle;
    }

    .modal-title {
      font-family: var(--font-display);
      font-size: var(--fs-xl);
      color: var(--fg);
      display: inline;
      vertical-align: middle;
    }

    .modal-badges {
      display: flex;
      gap: var(--space-xs);
      margin-top: var(--space-sm);
      flex-wrap: wrap;
    }

    .modal-badge {
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      background: rgba(6, 214, 160, 0.15);
      color: var(--accent);
      border: 1px solid var(--accent);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
    }

    .modal-body {
      margin-bottom: var(--space-md);
    }

    .modal-why {
      font-family: var(--font-body);
      font-size: var(--fs-base);
      color: var(--fg);
      margin-bottom: var(--space-md);
      line-height: 1.6;
    }

    .modal-stack {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-bottom: var(--space-md);
    }

    .modal-chip {
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      background: rgba(139, 105, 20, 0.12);
      color: var(--fg);
      border: 1px solid var(--card-border);
      padding: 2px 10px;
      border-radius: var(--radius-pill);
    }

    .modal-stats {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      margin-bottom: var(--space-md);
    }

    .modal-stat-row {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .modal-stat-label {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      font-weight: 700;
      width: 100px;
      text-align: right;
      color: var(--fg);
      letter-spacing: 0.08em;
    }

    .modal-stat-bar-track {
      flex: 1;
      height: 12px;
      background: rgba(0, 0, 0, 0.12);
      border-radius: var(--radius-pill);
      overflow: hidden;
    }

    .modal-stat-bar-fill {
      height: 100%;
      background: var(--accent);
      border-radius: var(--radius-pill);
      width: 0;
      transition: width 0.8s ease-out;
    }

    .modal-stat-value {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      width: 28px;
      color: var(--fg);
    }

    .modal-footer {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }

    .btn-link {
      display: inline-flex;
      align-items: center;
      padding: var(--space-xs) var(--space-md);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: 600;
      border-radius: var(--radius-pill);
      text-decoration: none;
      cursor: pointer;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .btn-link:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px var(--shadow);
    }

    .btn-github {
      background: #2b2d42;
      color: #f4e4c1;
      border: 1px solid #2b2d42;
    }

    .btn-demo {
      background: var(--accent);
      color: #0a0a1a;
      border: 1px solid var(--accent);
    }

    .btn-readme {
      background: #8b6914;
      color: #f4e4c1;
      border: 1px solid #8b6914;
    }

    [data-theme="night"] .modal-badge {
      background: rgba(6, 214, 160, 0.2);
    }

    [data-theme="night"] .modal-chip {
      background: rgba(58, 45, 92, 0.3);
      border-color: #3a2d5c;
      color: #e0d6c8;
    }

    [data-theme="night"] .btn-github {
      background: #3a3f5c;
      border-color: #3a3f5c;
    }

    [data-theme="night"] .btn-readme {
      background: #5c4a0e;
      border-color: #5c4a0e;
    }

    /* ================================================================
       Step 25 — Chibi Cursor Follower
    ================================================================ */
    #chibi-cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 48px;
      height: 80px;
      pointer-events: none;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    #chibi-cursor svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
      transform: scaleX(1);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    #chibi-cursor.jumping svg {
      transform: scaleX(1) translateY(-14px) scale(1.08) !important;
      transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    #chibi-cursor.tilting svg {
      transform: scaleX(1) rotate(-10deg) !important;
    }
    #chibi-cursor.face-left svg { transform: scaleX(-1); }
    #chibi-cursor.face-left.jumping svg {
      transform: scaleX(-1) translateY(-14px) scale(1.08) !important;
    }
    #chibi-cursor.face-left.tilting svg {
      transform: scaleX(-1) rotate(10deg) !important;
    }
    @media (hover: none) { #chibi-cursor { display: none; } }

    /* ================================================================
       Step 26 — Town Map Mini-Map
    ================================================================ */
    #town-map {
      position: fixed;
      bottom: var(--space-md);
      right: var(--space-md);
      z-index: 900;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0;
    }

    /* Map toggle button (always visible) */
    #town-map-toggle {
        width: 48px;
        height: 48px;
        border: 2px solid var(--card-border);
        border-radius: var(--radius-pill);
        background: var(--card-bg);
        color: var(--fg);
        font-size: var(--fs-md);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px var(--shadow);
        transition: transform var(--transition-fast), border-color var(--transition-fast);
    }
    
    #town-map-toggle:hover {
        transform: scale(1.1);
        border-color: var(--accent);
    }

    /* Expandable panel */
    #town-map-panel {
        position: absolute;
        bottom: 56px;
        right: 0;    
        background: var(--card-bg);
        border: 2px solid var(--card-border);
        border-radius: var(--radius-md);
        padding: var(--space-sm);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        box-shadow: 0 4px 16px var(--shadow);
        min-width: 130px;
        transition: opacity var(--transition-fast), transform var(--transition-fast);
    }

    #town-map-panel[aria-hidden="true"] {
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
    }

    #town-map-panel[aria-hidden="false"] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Panel title */
    .map-title {
      font-family: var(--font-display);
      font-size: var(--fs-xs);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      padding-bottom: var(--space-sm);
      margin-bottom: var(--space-sm);
      border-bottom: 1px solid var(--card-border);
      white-space: nowrap;
    }

    /* Each section row */
    .map-entry {
        font-family: var(--font-display);
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-sm);
        color: var(--fg);
        text-decoration: none;
        font-size: var(--fs-xs);
        letter-spacing: 0.08em;
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    .map-entry:hover {
        background: var(--accent);
        color: #0a0a1a;
    }

    .map-entry.active {
        background: rgba(6, 214, 160, 0.15);
        color: var(--accent);
        border-left: 2px solid var(--accent);
    }

    /* The dot */
    .map-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--card-border);
      flex-shrink: 0;
      transition: background var(--transition-fast), box-shadow var(--transition-fast);
    }
    .map-entry.active .map-dot {
      background: var(--accent);
      box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.2), 0 0 8px rgba(6, 214, 160, 0.4);
      animation: map-dot-pulse 2s ease-in-out infinite;
    }

    @keyframes map-dot-pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.2), 0 0 8px rgba(6, 214, 160, 0.35); }
      50%       { box-shadow: 0 0 0 5px rgba(6, 214, 160, 0.12), 0 0 16px rgba(6, 214, 160, 0.55); }
    }

    /* Night mode overrides */
    [data-theme="night"] .map-entry.active .map-dot {
      background: var(--firefly);
      box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.2), 0 0 10px rgba(255, 209, 102, 0.4);
      animation: map-dot-pulse-night 2s ease-in-out infinite;
    }
    @keyframes map-dot-pulse-night {
      0%, 100% { box-shadow: 0 0 0 3px rgba(255,209,102, 0.2), 0 0 8px rgba(255,209,102, 0.35); }
      50%       { box-shadow: 0 0 0 5px rgba(255,209,102, 0.12), 0 0 18px rgba(255,209,102, 0.6); }
    }
    [data-theme="night"] .map-entry.active {
      color: var(--firefly);
    }

    /* Hide on mobile */
    @media (max-width: 640px) { #town-map { display: none; } }

    /* ================================================================
       Step 24 — Ambient Sound System
    ================================================================ */
    /* Sound toggle active glow */
    #sound-toggle.sound-on {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.18), 0 2px 8px var(--shadow);
    }
    [data-theme="night"] #sound-toggle.sound-on {
      border-color: var(--firefly);
      box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.18), 0 2px 8px var(--shadow);
    }

    /* ============================================================================
   MOBILE RESPONSIVENESS (Step 28)
   ============================================================================ */

/* Tablet: 768px */
@media (max-width: 768px) {
  .street, .research-street {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-xl);
    scroll-padding: var(--space-md);
  }
  
  .building {
    scroll-snap-align: center;
    min-width: 75vw;
    flex-shrink: 0;
  }
  
  .about-layout {
    flex-direction: column;
    align-items: center;
  }
  
  .stat-card, .bulletin-board {
    max-width: 100%;
  }
}

/* Mobile: 640px and below */
@media (max-width: 640px) {
  /* Modal: Full-screen on mobile */
  .modal-card {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: var(--space-md);
  }
  
  .modal-close {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 10;
  }
  
  .modal-badges, .modal-stack {
    flex-wrap: wrap;
  }
  
  /* Toggle bar: Smaller buttons */
  .toggle-btn {
    width: 40px;
    height: 40px;
    font-size: var(--fs-sm);
  }
  
  .toggle-bar {
    top: var(--space-sm);
    right: var(--space-sm);
    gap: var(--space-xs);
  }
}

/* Small Mobile: 390px */
@media (max-width: 390px) {
  /* Streets: Horizontal scroll with snap */
  .street, .research-street {
    padding: var(--space-md) var(--space-sm);
    gap: var(--space-lg);
  }
  
  .building {
    min-width: 85vw;
  }
  
  /* Hero: Scaled down torii */
  .torii-gate {
    width: 200px;
    height: 175px;
  }
  
  .torii-post {
    height: 140px;
  }
  
  .torii-name {
    font-size: var(--fs-sm);
  }
  
  .hero-subtitle {
    font-size: var(--fs-base);
  }
  
  /* Reduced font sizes */
  .about-header h2, .town-header h2, .research-header h2 {
    font-size: var(--fs-xl);
  }
  
  .modal-title {
    font-size: var(--fs-lg);
  }
}

/* Extra Small: 375px */
@media (max-width: 375px) {
  .torii-gate {
    width: 180px;
    height: 160px;
  }
  
  .building {
    min-width: 90vw;
  }
  
  .stat-card {
    padding: var(--space-md);
  }
  
  .modal-card {
    padding: var(--space-sm);
  }
}

/* Performance: Disable parallax and reduce fireflies on mobile */
@media (max-width: 768px) {
  .parallax-layer {
    transform: none !important;
  }
  
  /* Hide excess fireflies (keep only first 5) */
  .firefly:nth-child(n+6) {
    display: none;
  }
  
  /* Disable chibi cursor follow on touch devices */
  @media (hover: none) and (pointer: coarse) {
    .chibi-character {
      pointer-events: none;
    }
  }
}

/* Scroll hint arrow for streets */
@media (max-width: 768px) {
  .street::after, .research-street::after {
    content: '›';
    position: sticky;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.5;
    pointer-events: none;
    text-shadow: -2px 0 4px var(--bg);
    animation: scroll-hint-pulse 2s ease-in-out infinite;
  }
  
  @keyframes scroll-hint-pulse {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) translateX(0); }
    50% { opacity: 0.7; transform: translateY(-50%) translateX(-4px); }
  }
  
  /* Hide arrow when scrolled to end */
  .street::-webkit-scrollbar, .research-street::-webkit-scrollbar {
    display: none;
  }
}

/* Sticky progress bar (replaces mini-map on mobile) */
@media (max-width: 640px) {
  .town-map {
    display: none;
  }
  
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: var(--scroll-progress, 0%);
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--firefly) 100%);
    z-index: 1001;
    transition: width 0.1s ease;
    animation: progress-glow 2s ease-in-out infinite;
  }
  
  @keyframes progress-glow {
    0%, 100% { box-shadow: 0 0 4px var(--accent); }
    50% { box-shadow: 0 0 12px var(--accent); }
  }
}


      /* ========================================
     UI/UX FIXES - April 11, 2026
     Fixes 10 critical issues in light mode
     ======================================== */

  /* Issue #1: Building Names Readable in Light Mode */
  [data-theme="day"] .building-label,
  [data-theme="day"] .building span {
    color: #3a1f04 !important;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    font-weight: 600;
  }

  /* Issue #2: Horizontal Scroll for Buildings */
  .street {
    display: flex;
    align-items: flex-end;
    gap: 4rem; /* reduced from 8rem for better scroll UX */
    padding: var(--space-lg) var(--space-2xl);
    min-height: 420px;
    position: relative;
    z-index: 2;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
  }

  .street::-webkit-scrollbar {
    height: 10px;
  }

  .street::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 5px;
  }

  .street::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
  }

  .street::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
  }

  /* Issue #4: Remove ACE Concierge Border */
  .building {
    outline: none !important;
  }

  .building[data-project="ace-concierge"] {
    outline: none !important;
    border: none !important;
  }

  /* Issue #5: Drone Visibility on Workshop Roof */
  [data-theme="day"] .drone {
    filter: brightness(0.4) saturate(2);
    outline: 2px solid #333;
  }

  /* Issue #7: Research Quarter 'H' Visibility */
  .town-header h2,
  #research h2 {
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  [data-theme="day"] #research h2 {
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  }

  /* Issue #8: Subtitle Text Contrast in Light Mode */
  [data-theme="day"] .town-header p,
  [data-theme="day"] .section-subtitle,
  [data-theme="day"] .description-text {
    color: #4a4a4a !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    font-weight: 500;
  }

  /* Issue #9: Center Research Buildings */
  #research .street,
  #research .buildings-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
  }

    /* ================================================================
       Step 5 — Three-Point Lighting System
       ================================================================ */
    .lighting-overlay {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 4;
      background:
        radial-gradient(ellipse at 80% 5%, var(--light-directional) 0%, transparent 55%),
        var(--light-ambient);
      mix-blend-mode: soft-light;
      transition: background 600ms ease;
    }

    .building-window--lit {
      box-shadow: 0 0 12px 3px rgba(255, 204, 85, 0.3) !important;
    }

    .building-light-pool {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 40px;
        background: radial-gradient(ellipse, rgba(255, 204, 85, 0.15) 0%, transparent 70%);
        pointer-events: none;
        border-radius: 50%;
        transition: background 600ms ease;
    }

    [data-theme="night"] .building-light-pool {
        background: radial-gradient(ellipse, rgba(255, 204, 85, 0.35) 0%, transparent 70%);
    }

    #three-canvas {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        z-index: 3 !important;
    }

    .hud-btn {
        padding: var(--space-sm) var(--space-lg);
        background: var(--card-bg);
        border: 2px solid var(--card-border);
        border-radius: var(--radius-pill);
        font-family: var(--font-display);
        font-size: var(--fs-sm);
        color: var(--fg);
        cursor: pointer;
        transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
        box-shadow: 0 4px 16px var(--shadow);
        backdrop-filter: blur(8px);
    }

    .hud-btn:hover, .hud-btn.active {
        background: var(--accent);
        color: #0a0a1a;
        border-color: var(--accent);
        transform: translateY(-2px);
    }

    .building-label-3d {
        font-family: 'Cinzel', serif;
        font-size: 11px;
        font-weight: 700;
        color: #ffd166;
        background: rgba(10, 5, 30, 0.82);
        border: 1px solid rgba(255, 209, 102, 0.4);
        border-radius: 6px;
        padding: 4px 10px;
        pointer-events: none;
        white-space: nowrap;
        text-shadow: 0 0 8px rgba(255, 209, 102, 0.7);
        letter-spacing: 0.05em;
    }