@layer valdoria {
  :root {
    --v-bg: #2a2420;
    --v-bg-raised: #332a22;
    --v-bg-accent: #4a2020;
    --v-bg-card: #2e2520;
    --v-bg-card-hover: #3a3028;
    --v-gold: #c4953a;
    --v-gold-dim: #9a7530;
    --v-gold-light: #dbb668;
    --v-gold-glow: rgba(196, 149, 58, 0.4);
    --v-gold-5: rgba(196, 149, 58, 0.05);
    --v-gold-10: rgba(196, 149, 58, 0.1);
    --v-gold-15: rgba(196, 149, 58, 0.15);
    --v-gold-20: rgba(196, 149, 58, 0.2);
    --v-gold-25: rgba(196, 149, 58, 0.25);
    --v-gold-30: rgba(196, 149, 58, 0.3);
    --v-gold-40: rgba(196, 149, 58, 0.4);
    --v-gold-02: rgba(196, 149, 58, 0.02);
    --v-gold-03: rgba(196, 149, 58, 0.03);
    --v-gold-04: rgba(196, 149, 58, 0.04);
    --v-gold-06: rgba(196, 149, 58, 0.06);
    --v-gold-07: rgba(196, 149, 58, 0.07);
    --v-gold-08: rgba(196, 149, 58, 0.08);
    --v-gold-12: rgba(196, 149, 58, 0.12);
    --v-gold-35: rgba(196, 149, 58, 0.35);
    --v-gold-50: rgba(196, 149, 58, 0.5);
    --v-gold-55: rgba(196, 149, 58, 0.55);
    --v-gold-60: rgba(196, 149, 58, 0.6);
    --v-gold-70: rgba(196, 149, 58, 0.7);
    --v-crimson: #7b2020;
    --v-crimson-light: #a03030;
    --v-crimson-glow: rgba(123, 32, 32, 0.35);
    --v-silver: #b0b8c0;
    --v-silver-dim: #707880;
    --v-text: #d4c8b0;
    --v-text-dim: #a09484;
    --v-text-bright: #e8dcc8;
    --v-success: #4caf50;
    --v-success-light: #66dd88;
    --v-danger: #e74c3c;
    --v-danger-light: #e08080;
    --v-danger-lighter: #f0a0a0;
    --v-info: #5b9bd5;
    --v-warning: #f39c12;
    --v-ch-high: #5cb88a;
    --v-ch-mid: #d4a840;
    --v-ch-low: #cc6666;
    --v-bg-deep-card: #241e18;
    --v-crit: #f5c842;
    --v-heal: #44cc66;
    --v-miss: #8a8a8a;
    --v-kill: #ff4444;
    --v-rarity-common: #b0b0b0;
    --v-rarity-uncommon: #4caf50;
    --v-rarity-rare: #2196f3;
    --v-rarity-very-rare: #9c27b0;
    --v-rarity-legendary: #ff9800;
    --v-z-base: 1;
    --v-z-sticky: 50;
    --v-z-header: 100;
    --v-z-dropdown: 200;
    --v-z-tooltip: 400;
    --v-z-overlay: 500;
    --v-z-loading: 1000;
    --v-z-error: 1100;
    --v-z-modal: 5000;
    --v-z-critical: 10000;
    --v-border: #4a3828;
    --v-border-gold: rgba(196, 149, 58, 0.25);
    --v-radius-xs: 4px;
    --v-radius-sm: 6px;
    --v-radius: 10px;
    --v-radius-lg: 14px;
    --v-radius-pill: 20px;
    --v-font: "MedievalSharp", "Cinzel", serif;
    --v-font-display: "Cinzel", serif;
    --v-font-mono: "Courier New", monospace;
    --v-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --v-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --v-shadow-gold: 0 0 12px rgba(196, 149, 58, 0.25);
    --v-shadow-glow: 0 0 20px rgba(196, 149, 58, 0.15);
    --v-transition: 0.2s ease;
    --v-transition-instant: 0.05s ease;
    --v-transition-fast: 0.15s ease;
    --v-transition-base: 0.3s ease;
    --v-transition-slow: 0.5s;
    --v-bg-overlay: rgba(74, 56, 40, 0.12);
    --v-border-dim: rgba(74, 56, 40, 0.15);
    --v-border-gold: rgba(196, 149, 58, 0.3);
    --v-bar-bg: rgba(0, 0, 0, 0.3) ease-out;
    --v-transition-enter: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --v-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --v-ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
    --v-ease-dramatic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --v-text-muted: #7a6a5a;
    --v-bg-sel: #3a2e1a;
    --v-hp-label: #7aaa7a;
    --v-mp-label: #6a8aaa;
    --v-xp-label: #9a7aaa;
    --v-exhaustion: #aa7a6a;
    --v-bar-track: #1e1810;
    --v-badge-warn-text: #cc8866;
    --v-badge-warn-bg: rgba(170, 90, 58, 0.1);
    --v-badge-warn-border: rgba(170, 90, 58, 0.2);
    --v-badge-ok-text: #7aaa7a;
    --v-badge-ok-bg: rgba(90, 154, 90, 0.1);
    --v-badge-ok-border: rgba(90, 154, 90, 0.2);
    --v-parchment: #f5f0e0;
    --v-space-xs: 2px;
    --v-space-sm: 4px;
    --v-space-md: 8px;
    --v-space-md-lg: 10px;
    --v-space-lg: 12px;
    --v-space-xl: 16px;
    --v-space-2xl: 24px;
    --v-font-xs: 10px;
    --v-font-sm: 11px;
    --v-font-md: 12px;
    --v-font-base: 13px;
    --v-font-body: 14px;
    --v-font-lg: 15px;
    --v-font-xl: 16px;
    --v-font-2xl: 18px;
    --v-font-icon: 28px;
    --v-font-icon-lg: 32px;
    --v-font-icon-xl: 48px;
    --v-bar-height: 8px;
    --v-bar-height-sm: 6px;
    --v-bar-height-mini: 4px;
    --v-font-micro: 10px;
    --v-font-label: 12px;
    --v-hp-high: linear-gradient(90deg, #2d8f2d, #4caf50);
    --v-hp-warn: linear-gradient(90deg, #c2410c, #f97316);
    --v-hp-crit: linear-gradient(90deg, #b91c1c, #ef4444);
    --v-hp-high-flat: #4caf50;
    --v-hp-warn-flat: #f97316;
    --v-hp-crit-flat: #ef4444;
    --v-mp: linear-gradient(90deg, #1565c0, #42a5f5);
    --v-mp-flat: #42a5f5;
    --v-xp: linear-gradient(90deg, #7b1fa2, #ab47bc);
    --v-xp-flat: #ab47bc;
    --v-hd: linear-gradient(90deg, #2e7d32, #66bb6a);
    --v-hd-flat: #66bb6a;
    --v-ki: linear-gradient(90deg, #e65100, #ffa726);
    --v-ki-flat: #ffa726;
    --v-fury: linear-gradient(90deg, #bf360c, #ff5722);
    --v-fury-flat: #ff5722;
    --v-vigor: linear-gradient(90deg, #546e7a, #90a4ae);
    --v-vigor-flat: #90a4ae;
    --v-inspiration: linear-gradient(90deg, #6a1b9a, #ab47bc);
    --v-inspiration-flat: #ab47bc;
    --v-pact: linear-gradient(90deg, #4a148c, #7b1fa2);
    --v-pact-flat: #7b1fa2;
    --v-energy: linear-gradient(90deg, #827717, #cddc39);
    --v-energy-flat: #cddc39;
    --v-particle-flame: #ff6a00;
    --v-particle-flame-hot: #ff4500;
    --v-particle-frost: #aaddff;
    --v-particle-lightning: #b0b0ff;
    --v-particle-arcane: #d4a0ff;
    --v-particle-arcane-deep: #9955dd;
    --v-status-hostile: #e05555;
    --v-status-cold: #d4935a;
    --v-status-warm: #7ab85a;
    --v-status-loyal: #5aa0d4;
    --v-biome-forest: #3a5028;
    --v-biome-forest-bright: #5a7840;
    --v-biome-plains: #8a7530;
    --v-biome-swamp: #4a5030;
    --v-biome-swamp-bright: #6a7848;
    --v-biome-cave: #4a3a28;
    --v-biome-cave-bright: #6a5840;
    --v-biome-desert: #a08030;
    --v-biome-desert-bright: #c4a040;
    --v-biome-mountain: #5a5040;
    --v-biome-mountain-bright: #7a7060;
    --v-biome-snow: #5a5048;
    --v-biome-snow-bright: #7a7068;
    --v-biome-volcanic: #a04020;
    --v-biome-volcanic-bright: #c86030;
    --v-biome-graveyard: #4a4030;
    --v-biome-graveyard-bright: #6a5848;
    --v-brown-05: rgba(112, 66, 20, 0.05);
    --v-brown-08: rgba(112, 66, 20, 0.08);
    --v-brown-12: rgba(112, 66, 20, 0.12);
    --v-brown-15: rgba(112, 66, 20, 0.15);
    --v-brown-18: rgba(112, 66, 20, 0.18);
    --v-brown-25: rgba(112, 66, 20, 0.25);
    --v-brown-30: rgba(112, 66, 20, 0.3);
    --v-brown-40: rgba(112, 66, 20, 0.4);
    --v-brown-50: rgba(112, 66, 20, 0.5);
    --v-bg-glass: rgba(42, 36, 32, 0.88);
    --v-bg-panel: rgba(42, 36, 32, 0.94);
    --v-bg-heavy: rgba(42, 36, 32, 0.96);
    --v-shadow-inset-warm: inset 0 1px 3px rgba(40, 30, 15, 0.3);
    --v-warning-dim: #cc9944;
    --v-danger-dim: #cc6666;
    --v-danger-warm: #aa5a3a;
    --v-text-muted: #a08050;
    --v-danger-pip-1: #6aaa3a;
    --v-danger-pip-2: #caaa3a;
    --v-danger-pip-3: #cc8a2a;
    --v-danger-pip-4: #cc4a2a;
    --v-danger-pip-5: #aa2a2a;
    --v-dungeon-bg: #2a2030;
    --v-dungeon-bg-dark: #15101a;
    --v-dungeon-node: #25202a;
    --v-dungeon-stroke: #3a3040;
    --v-dungeon-stroke-active: #6a5a70;
    --v-dungeon-stroke-visited: #4a3a50;
    --v-dungeon-stroke-path: #5a4a60;
    --v-dungeon-accent: #251a2a;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  button,
  input,
  select,
  textarea {
    font-family: inherit;
  }
  a,
  button,
  [onclick],
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  html {
    /* Viewport lock — widest phone: iPhone 15 Pro Max (430px), tallest: 932px */
    max-width: min(100vw, 430px);
    height: 100vh;
    height: min(100dvh, 932px);
    margin: 0 auto;
    overflow: hidden;
    background: #2a2420;
    /* Phone simulation frame on desktop/tablet */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    border-left: 1px solid rgba(74, 56, 40, 0.3);
    border-right: 1px solid rgba(74, 56, 40, 0.3);
    /* NOTE: Do NOT add transform here — it would make html a containing block
     * for position:fixed and break scroll behavior. Overlays are constrained
     * via max-width + margin:auto instead (see bottom of this file). */
  }
  body {
    font-family: var(--v-font);
    background: var(--v-bg);
    color: var(--v-text);
    height: 100%;
    max-height: min(100dvh, 932px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
    background: radial-gradient(ellipse at 50% 0%, #3a3028 0%, var(--v-bg) 70%);
    background-attachment: fixed;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }
  body.perf-lite::before {
    display: none;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
      ellipse at center,
      transparent 60%,
      rgba(0, 0, 0, 0.25) 100%
    );
  }
  .v-title-lg {
    font-size: 18px;
    font-weight: 700;
    color: var(--v-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(196, 149, 58, 0.3);
  }
  .v-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--v-gold);
    text-shadow: 0 0 8px rgba(196, 149, 58, 0.2);
  }
  .v-title-sm {
    font-size: 15px;
    font-weight: 600;
    color: var(--v-gold);
    margin-bottom: 4px;
    text-shadow: 0 0 6px rgba(196, 149, 58, 0.15);
  }
  .v-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--v-text);
  }
  .v-body {
    font-size: 14px;
    color: var(--v-text);
    line-height: 1.6;
  }
  .v-caption {
    font-size: 12px;
    color: var(--v-text-dim);
    margin-bottom: 12px;
  }
  .v-micro {
    font-size: 11px;
    color: var(--v-text-dim);
    line-height: 1.3;
  }
  .v-header {
    background: linear-gradient(180deg, #3a3028 0%, #201a14 100%);
    padding: 16px 16px 12px;
    text-align: center;
    border-bottom: 1px solid var(--v-border-gold);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.5),
      0 1px 0 var(--v-border-gold);
  }
  .v-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--v-crimson),
      var(--v-gold),
      var(--v-crimson),
      transparent
    );
  }
  .v-header h1 {
    font-size: 17px;
    color: var(--v-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow:
      0 0 15px rgba(196, 149, 58, 0.4),
      0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 800;
  }
  .v-progress-bar {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
  }
  .v-progress-dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: rgba(74, 56, 40, 0.8);
    transition:
      opacity 0.4s ease,
      transform 0.4s ease,
      background 0.4s ease;
  }
  .v-progress-dot.active {
    background: var(--v-gold);
    box-shadow: 0 0 8px rgba(196, 149, 58, 0.5);
  }
  .v-progress-dot.done {
    background: var(--v-success);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.3);
  }
  .v-progress-label {
    font-size: 12px;
    color: var(--v-text-dim);
    margin-top: 5px;
    letter-spacing: 0.5px;
  }
  .v-card {
    background: linear-gradient(165deg, var(--v-bg-card) 0%, #241e18 100%);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    padding: 12px;
    cursor: pointer;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      border-color 0.25s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .v-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(184, 196, 208, 0.12),
      transparent
    );
    border-radius: 1px;
  }
  .v-card:hover {
    border-color: var(--v-gold-dim);
    box-shadow:
      0 0 15px rgba(196, 149, 58, 0.15),
      0 4px 16px rgba(0, 0, 0, 0.4);
  }
  .v-card:active {
    transform: scale(0.97);
  }
  .v-card.selected {
    border-color: var(--v-gold);
    background: linear-gradient(165deg, #382a20 0%, #2a2018 100%);
    box-shadow:
      0 0 15px rgba(196, 149, 58, 0.2),
      0 0 4px rgba(196, 149, 58, 0.15),
      inset 0 1px 0 rgba(196, 149, 58, 0.1);
  }
  .v-card-icon {
    font-size: 24px;
    margin-bottom: 2px;
  }
  .v-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--v-text-bright);
    margin-top: 2px;
    letter-spacing: 0.3px;
  }
  .v-card-desc {
    font-size: 12px;
    color: var(--v-text-dim);
    margin-top: 2px;
    line-height: 1.4;
  }
  .v-card-bonus {
    font-size: 12px;
    color: var(--v-gold);
    margin-top: 3px;
    text-shadow: 0 0 8px rgba(196, 149, 58, 0.15);
  }
  .v-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .v-card-grid.single-col {
    grid-template-columns: 1fr;
  }
  .v-btn {
    border: none;
    cursor: pointer;
    font-family: var(--v-font);
    font-size: 13px;
    transition:
      opacity var(--v-transition),
      transform var(--v-transition),
      background var(--v-transition),
      border-color var(--v-transition);
    outline: none;
  }
  .v-btn:active {
    transform: scale(0.96);
  }
  .v-btn-primary {
    background: linear-gradient(135deg, var(--v-gold), var(--v-gold-dim));
    color: #2a2420;
    padding: 10px 18px;
    border-radius: var(--v-radius);
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow:
      0 3px 12px rgba(196, 149, 58, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .v-btn-primary:hover {
    box-shadow:
      0 4px 18px rgba(196, 149, 58, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .v-btn-primary:active {
    background: var(--v-gold-dim);
    box-shadow: 0 1px 6px rgba(196, 149, 58, 0.2);
  }
  .v-btn-secondary {
    background: var(--v-bg-card);
    border: 1px solid var(--v-border);
    color: var(--v-text-dim);
    padding: 8px 14px;
    border-radius: var(--v-radius);
  }
  .v-btn-pill {
    border-radius: var(--v-radius-pill);
  }
  .v-btn-danger {
    background: linear-gradient(135deg, var(--v-crimson), #5a1818);
    color: var(--v-text);
    padding: 10px 16px;
    border-radius: var(--v-radius);
    font-weight: 600;
    box-shadow: 0 3px 12px var(--v-crimson-glow);
  }
  .v-toggle-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .v-toggle-item {
    background: linear-gradient(165deg, var(--v-bg-card) 0%, #241e18 100%);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition:
      opacity var(--v-transition),
      background var(--v-transition);
    font-size: 13px;
    color: var(--v-text);
  }
  .v-toggle-item.selected {
    border-color: var(--v-gold);
    background: linear-gradient(165deg, #382a20 0%, #2a2018 100%);
    box-shadow: 0 0 10px rgba(196, 149, 58, 0.15);
  }
  .v-toggle-item.disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .v-toggle-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--v-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
      opacity var(--v-transition),
      transform var(--v-transition);
    font-size: 12px;
  }
  .v-toggle-item.selected .v-toggle-check {
    border-color: var(--v-gold);
    background: var(--v-gold);
    color: #000;
    box-shadow: 0 0 8px rgba(196, 149, 58, 0.4);
  }
  .v-toggle-label {
    flex: 1;
  }
  .v-toggle-count {
    text-align: center;
    font-size: 13px;
    color: var(--v-gold);
    margin-bottom: 10px;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(196, 149, 58, 0.2);
  }
  .v-input {
    width: 100%;
    padding: 12px;
    background: var(--v-bg-card);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    color: var(--v-text);
    font-size: 14px;
    font-family: var(--v-font);
    outline: none;
    transition:
      border-color var(--v-transition),
      box-shadow var(--v-transition);
  }
  .v-input:focus {
    border-color: var(--v-gold);
    box-shadow: 0 0 10px rgba(196, 149, 58, 0.15);
  }
  .v-input::placeholder {
    color: var(--v-text-dim);
  }
  .v-select {
    padding: 10px;
    background: var(--v-bg-card);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    color: var(--v-text);
    font-size: 13px;
    font-family: var(--v-font);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
  }
  .v-select:focus {
    border-color: var(--v-gold);
    box-shadow: 0 0 10px rgba(196, 149, 58, 0.15);
  }
  .v-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
  }
  .v-badge-hp {
    background: #3a1a1a;
    color: #ff6b6b;
  }
  .v-badge-mp {
    background: #1a2a3a;
    color: #6b9bff;
  }
  .v-badge-rec {
    background: #1a3a1a;
    color: #6bff9b;
  }
  .v-divider {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--v-gold-dim),
      transparent
    );
    margin: clamp(8px, 2vw, 16px) 0;
    border: none;
    position: relative;
  }
  .v-divider::after {
    content: "◆";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    color: var(--v-gold-dim);
    background: var(--v-bg);
    padding: 0 8px;
  }
  .v-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: var(--v-radius-pill);
    font-size: 13px;
    z-index: 200;
    animation: v-fadeSlideUp 0.25s ease;
    pointer-events: none;
  }
  .v-toast-error {
    background: var(--v-danger);
    color: #fff;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.4);
  }
  .v-toast-success {
    background: var(--v-success);
    color: #fff;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
  }
  .v-summary {
    background: linear-gradient(165deg, var(--v-bg-card) 0%, #241e18 100%);
    border: 1px solid var(--v-border-gold);
    border-radius: var(--v-radius);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  .v-summary-title {
    font-size: 14px;
    color: var(--v-gold);
    font-weight: 600;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(196, 149, 58, 0.2);
  }
  .v-summary-line {
    font-size: 13px;
    color: var(--v-text-dim);
    margin-bottom: 4px;
  }
  .v-summary-line b {
    color: var(--v-text-bright);
  }
  .v-stat-preview {
    background: linear-gradient(165deg, var(--v-bg-raised) 0%, #201a14 100%);
    border: 1px solid var(--v-border-gold);
    border-radius: var(--v-radius);
    padding: 12px;
    margin-top: 12px;
    box-shadow: inset 0 1px 0 rgba(196, 149, 58, 0.05);
  }
  .v-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 13px;
  }
  .v-stat-label {
    color: var(--v-text-dim);
  }
  .v-stat-val {
    color: var(--v-text-bright);
    font-weight: 600;
  }
  .v-stat-bonus {
    color: var(--v-gold);
    font-size: 12px;
    text-shadow: 0 0 6px rgba(196, 149, 58, 0.2);
  }
  .v-stat-mod {
    color: var(--v-success);
    font-size: 12px;
  }
  .v-error-msg {
    color: var(--v-danger);
    font-size: 13px;
    margin-top: 6px;
    display: none;
  }
  .v-rarity-common {
    color: var(--v-rarity-common);
  }
  .v-rarity-uncommon {
    color: var(--v-rarity-uncommon);
  }
  .v-rarity-rare {
    color: var(--v-rarity-rare);
  }
  .v-rarity-very_rare {
    color: var(--v-rarity-very-rare);
  }
  .v-rarity-legendary {
    color: var(--v-rarity-legendary);
  }
  .v-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--v-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: opacity 0.4s ease;
  }
  .v-loading-overlay.v-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .v-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--v-border);
    border-top-color: var(--v-gold);
    border-radius: 50%;
    animation: v-spin 0.8s linear infinite;
  }
  .v-loading-text {
    font-size: 13px;
    color: var(--v-text-dim);
    letter-spacing: 1px;
  }
  @keyframes v-fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes v-btnRelease {
    0% {
      transform: scale(0.95);
    }
    40% {
      transform: scale(1.04);
    }
    70% {
      transform: scale(0.99);
    }
    100% {
      transform: scale(1);
    }
  }
  .v-btn-released {
    animation: v-btnRelease 0.3s
      var(--v-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards !important;
  }
  .v-popup-btn:active,
  .btn-action:active,
  .btn-hero:active,
  .btn-choice:active,
  .action-btn:active,
  .feedback-btn-primary:active,
  .feedback-pix-btn:active,
  .feedback-dismiss-btn:active,
  .v-toggle-item:active,
  .v-exit-btn:active,
  [data-action]:active {
    transform: scale(0.96);
    transition: transform 50ms ease;
  }
  .v-popup-btn,
  .btn-action,
  .btn-hero,
  .btn-choice,
  .action-btn,
  .v-toggle-item,
  .v-exit-btn,
  [data-action] {
    transition: transform var(--v-transition-fast, 0.15s)
      var(--v-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  }
  @keyframes v-floatUp {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    70% {
      opacity: 1;
      transform: translateY(-30px) scale(1.1);
    }
    100% {
      opacity: 0;
      transform: translateY(-50px) scale(0.9);
    }
  }
  .v-float-popup {
    position: absolute;
    font-weight: 700;
    font-size: 15px;
    color: var(--v-gold-light);
    text-shadow:
      0 0 8px rgba(196, 149, 58, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.5);
    animation: v-floatUp 1.2s var(--v-ease-snap, cubic-bezier(0.16, 1, 0.3, 1))
      forwards;
    pointer-events: none;
    z-index: 20;
    white-space: nowrap;
  }
  @keyframes v-subtlePulse {
    0%,
    100% {
      box-shadow: 0 0 0 rgba(196, 149, 58, 0);
    }
    50% {
      box-shadow: 0 0 8px rgba(196, 149, 58, 0.15);
    }
  }
  .v-interactive-pulse {
    animation: v-subtlePulse 2.5s ease-in-out infinite;
  }
  .v-card-flip {
    perspective: 600px;
  }
  .v-card-flip-inner {
    transition: transform 0.6s
      var(--v-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    transform-style: preserve-3d;
    position: relative;
  }
  .v-card-flip.revealed .v-card-flip-inner {
    transform: rotateY(180deg);
  }
  .v-card-flip-front,
  .v-card-flip-back {
    backface-visibility: hidden;
  }
  .v-card-flip-back {
    transform: rotateY(180deg);
    position: absolute;
    inset: 0;
  }
  @keyframes v-fadeSlideUp {
    from {
      opacity: 0;
      transform: translate(-50%, 10px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
  @keyframes v-goldPulse {
    0%,
    100% {
      box-shadow: 0 0 12px rgba(196, 149, 58, 0.25);
    }
    50% {
      box-shadow:
        0 0 20px rgba(196, 149, 58, 0.45),
        0 0 40px rgba(196, 149, 58, 0.15);
    }
  }
  @keyframes v-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes v-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  *::-webkit-scrollbar {
    display: none;
  }
  .v-skip-btn {
    position: absolute;
    bottom: 40px;
    left: 20px;
    right: 20px;
    padding: 12px 20px;
    background: linear-gradient(
      180deg,
      rgba(196, 149, 58, 0.15),
      rgba(196, 149, 58, 0.05)
    );
    border: 1px solid rgba(196, 149, 58, 0.4);
    color: var(--v-gold, #c4953a);
    border-radius: var(--v-radius, 8px);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
    min-height: 48px;
    letter-spacing: 0.5px;
  }
  .v-skip-btn.visible {
    opacity: 1;
    pointer-events: all;
  }
  .v-skip-btn:active {
    transform: scale(0.96);
    background: linear-gradient(
      180deg,
      rgba(196, 149, 58, 0.25),
      rgba(196, 149, 58, 0.12)
    );
  }
  .v-action-pending {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s;
  }
  .v-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .v-accordion-section {
    background: linear-gradient(165deg, var(--v-bg-card) 0%, #241e18 100%);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    overflow: hidden;
    transition: border-color var(--v-transition);
  }
  .v-accordion-section.has-selection {
    border-color: rgba(196, 149, 58, 0.3);
  }
  .v-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background var(--v-transition);
  }
  .v-accordion-header:active {
    background: rgba(196, 149, 58, 0.06);
  }
  .v-accordion-icon {
    font-size: 16px;
    flex-shrink: 0;
  }
  .v-accordion-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--v-gold);
    flex: 1;
    text-shadow: 0 0 6px rgba(196, 149, 58, 0.15);
  }
  .v-accordion-badge {
    font-size: 12px;
    color: var(--v-text-dim);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--v-transition);
  }
  .v-accordion-section.has-selection .v-accordion-badge {
    color: var(--v-success);
  }
  .v-accordion-arrow {
    font-size: 10px;
    color: var(--v-text-dim);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .v-accordion-body {
    padding: 0 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .v-accordion-section.collapsed .v-accordion-arrow {
    transform: rotate(-90deg);
  }
  .v-accordion-section.collapsed .v-accordion-body {
    display: none;
  }
  .v-accordion-section.collapsed {
    padding-bottom: 0;
  }
  /* ── Error Reporter Overlay ── */
  .v-err-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(
      ellipse at 50% 40%,
      #1e120c 0%,
      #0a0805 100%
    );
    z-index: 500;
  }
  .v-err-content {
    text-align: center;
    padding: 0;
    max-width: min(360px, 88vw);
    width: calc(100% - 28px);
    background: var(--v-bg-card, #2e2520);
    border: 1px solid var(--v-gold-25);
    border-radius: var(--v-radius-lg, 14px);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 var(--v-gold-08);
    overflow: hidden;
    animation: v-errEntry 0.35s var(--v-ease-snap, cubic-bezier(0.16, 1, 0.3, 1)) both,
               v-errGlow 0.6s ease-out both;
  }
  @keyframes v-errEntry {
    0% {
      opacity: 0;
      transform: scale(0.88) translateY(20px);
    }
    60% {
      opacity: 1;
      transform: scale(1.01) translateY(-2px);
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @keyframes v-errGlow {
    0%   { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--v-gold-08); }
    40%  { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--v-gold-08), 0 0 15px var(--v-gold-15); }
    100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--v-gold-08); }
  }
  .v-err-header {
    padding: var(--v-space-lg, 12px) var(--v-space-xl, 16px) var(--v-space-md-lg, 10px);
    border-bottom: 1px solid var(--v-gold-15);
    background: linear-gradient(180deg, rgba(74, 56, 40, 0.4) 0%, transparent 100%);
  }
  .v-err-icon {
    color: var(--v-gold, #c4953a);
    margin-bottom: var(--v-space-sm, 4px);
    animation: v-errPulse 3s ease-in-out infinite;
  }
  .v-err-icon svg {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 46px;
    filter: drop-shadow(0 0 6px var(--v-gold-glow, rgba(196, 149, 58, 0.4)));
  }
  @keyframes v-errPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 0.9;
    }
    50% {
      transform: scale(1.05);
      opacity: 1;
    }
  }
  .v-err-title {
    font-family: var(--v-font-display, "Cinzel", serif);
    font-size: var(--v-font-xl, 16px);
    font-weight: 700;
    color: var(--v-gold-light, #dbb668);
    letter-spacing: 0.5px;
    margin-top: var(--v-space-xs, 2px);
  }
  .v-err-ornament {
    color: var(--v-gold-30);
    font-size: 8px;
    letter-spacing: 12px;
    margin-top: var(--v-space-xs, 2px);
    opacity: 0.5;
  }
  .v-err-network {
    display: inline-block;
    padding: var(--v-space-sm, 4px) var(--v-space-lg, 12px);
    border-radius: var(--v-radius-pill, 20px);
    font-size: var(--v-font-sm, 11px);
    font-family: var(--v-font, "MedievalSharp", serif);
    margin: var(--v-space-md-lg, 10px) auto 0;
    animation: v-fadeIn 0.3s ease;
  }
  .v-err-network.online {
    background: rgba(80, 180, 80, 0.15);
    color: var(--v-success-light, #66dd88);
    border: 1px solid rgba(80, 180, 80, 0.3);
  }
  .v-err-network.offline {
    background: rgba(200, 60, 60, 0.15);
    color: var(--v-danger-light, #e08080);
    border: 1px solid rgba(200, 60, 60, 0.3);
  }
  .v-err-body {
    padding: var(--v-space-lg, 12px) var(--v-space-xl, 16px);
  }
  .v-err-msg {
    color: var(--v-text, #d4c8b0);
    font-size: var(--v-font-body, 14px);
    margin-bottom: var(--v-space-sm, 4px);
    line-height: 1.5;
  }
  .v-err-hint {
    color: var(--v-text-dim, #a09484);
    font-size: var(--v-font-md, 12px);
    margin-bottom: 0;
    line-height: 1.4;
    font-style: italic;
  }
  .v-err-hint:empty {
    display: none;
  }
  .v-err-actions {
    padding: var(--v-space-md, 8px) var(--v-space-xl, 16px) var(--v-space-lg, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--v-space-sm, 4px);
    border-top: 1px solid var(--v-gold-12);
    background: rgba(30, 24, 18, 0.4);
  }
  .v-err-btn {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--v-space-md-lg, 10px) var(--v-space-lg, 12px);
    border: 1px solid var(--v-border, #4a3828);
    border-radius: var(--v-radius, 10px);
    background: var(--v-bg-raised, #332a22);
    color: var(--v-text, #d4c8b0);
    font-family: var(--v-font, "MedievalSharp", serif);
    font-size: var(--v-font-body, 14px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--v-transition-fast, 0.15s) ease;
  }
  .v-err-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
  }
  .v-err-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .v-err-btn-primary {
    background: linear-gradient(165deg, var(--v-bg-accent, #5a2a2a) 0%, #3a1515 100%);
    border-color: var(--v-gold-30);
    color: var(--v-gold-light, #dbb668);
    font-weight: 600;
  }
  .v-err-btn-secondary {
    background: transparent;
    border-color: var(--v-gold-15);
    color: var(--v-text-dim, #8a7a68);
    font-size: var(--v-font-base, 13px);
  }
  .v-err-retry-wrap {
    position: relative;
    width: 100%;
  }
  .v-err-retry-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--v-bar-height-mini, 4px);
    background: linear-gradient(
      90deg,
      var(--v-gold-dim, #8a6a2e),
      var(--v-gold, #c4953a)
    );
    border-radius: 0 0 var(--v-radius, 10px) var(--v-radius, 10px);
    transition: width 1s linear;
    box-shadow: 0 0 6px var(--v-gold-glow, rgba(196, 149, 58, 0.4));
  }
  .v-err-auto-report {
    padding: var(--v-space-md, 8px) var(--v-space-xl, 16px);
    font-size: var(--v-font-sm, 11px);
    color: var(--v-text-dim, #a09484);
    font-family: var(--v-font, "MedievalSharp", serif);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v-space-sm, 4px);
    border-top: 1px solid var(--v-gold-06, rgba(196, 149, 58, 0.06));
  }
  .v-err-auto-report-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v-success, #4caf50);
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
    animation: v-errDotPulse 2s ease-in-out infinite;
  }
  @keyframes v-errDotPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  body.perf-lite .v-err-content { animation: none !important; }
  body.perf-lite .v-err-icon { animation: none !important; }
  body.perf-lite .v-err-auto-report-dot { animation: none !important; }
  :focus-visible {
    outline: 2px solid var(--v-gold, #c4953a);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }
  .v-skip-btn,
  .toast,
  .v-toast,
  [class*="shake-"],
  [class*="fade-"],
  .loc-transition,
  .dice-overlay,
  .v-card,
  .btn-action,
  .btn-hero,
  .screen,
  .immersive-toggle,
  .immersive-restore,
  .loading-overlay {
    will-change: transform, opacity;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    body::after {
      display: none;
    }
  }
  /* -- Displacement / Session Overlay -- */
  .displaced-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--v-z-critical, 10000);
    background: radial-gradient(ellipse at center, rgba(30, 24, 18, 0.92) 0%, rgba(12, 8, 4, 0.97) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--v-transition-slow, 0.5s) ease;
    font-family: var(--v-font, "MedievalSharp", "Cinzel", serif);
  }
  .displaced-overlay.displaced-visible {
    opacity: 1;
  }
  /* Card container with medieval frame */
  .displaced-card {
    text-align: center;
    padding: var(--v-space-xl, 20px) var(--v-space-lg, 16px);
    max-width: 320px;
    background: var(--v-bg-card, #2e2520);
    border: 1px solid var(--v-border, #4a3828);
    border-radius: var(--v-radius-lg, 14px);
    box-shadow:
      0 0 24px rgba(196, 149, 58, 0.08),
      0 4px 32px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(196, 149, 58, 0.06);
    animation: displaced-entrance var(--v-transition-slow, 0.5s) ease both;
  }
  /* Backward compat: old class name */
  .displaced-content {
    text-align: center;
    padding: var(--v-space-xl, 20px) var(--v-space-lg, 16px);
    max-width: 320px;
  }
  @keyframes displaced-entrance {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  /* SVG seal/shield icon */
  .displaced-seal {
    margin-bottom: var(--v-space-lg, 16px);
    animation: displaced-glow 2.5s ease-in-out infinite;
  }
  .displaced-seal svg {
    filter: drop-shadow(0 0 8px rgba(196, 149, 58, 0.3));
  }
  @keyframes displaced-glow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(196, 149, 58, 0.15)); }
    50% { filter: drop-shadow(0 0 14px rgba(196, 149, 58, 0.35)); }
  }
  /* Emoji icon fallback (shutdown overlay) */
  .displaced-icon {
    font-size: clamp(36px, 12vw, 48px);
    margin-bottom: var(--v-space-lg, 16px);
  }
  .displaced-title {
    font-family: var(--v-font-display, "Cinzel", serif);
    font-size: var(--v-font-xl, 20px);
    font-weight: 700;
    color: var(--v-text, #d4c8b0);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
    margin-bottom: var(--v-space-sm, 6px);
  }
  /* Decorative divider with diamond */
  .displaced-divider {
    display: flex;
    align-items: center;
    gap: var(--v-space-sm, 6px);
    margin: var(--v-space-md, 8px) auto var(--v-space-lg, 16px);
    max-width: 200px;
    color: var(--v-gold, #c4953a);
    font-size: var(--v-font-xs, 10px);
    opacity: 0.6;
  }
  .displaced-divider::before,
  .displaced-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--v-gold, #c4953a), transparent);
  }
  .displaced-text {
    font-size: var(--v-font-body, 14px);
    line-height: 1.6;
    color: var(--v-text-dim, #a09484);
    margin-bottom: var(--v-space-md, 8px);
  }
  .displaced-sub {
    margin-top: var(--v-space-lg, 16px);
    font-size: var(--v-font-sm, 13px);
  }
  /* Device badge with icon + label */
  .displaced-device-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--v-space-sm, 6px);
    padding: var(--v-space-sm, 6px) var(--v-space-lg, 16px);
    margin: var(--v-space-md, 8px) 0;
    border: 1px solid rgba(196, 149, 58, 0.4);
    border-radius: var(--v-radius, 10px);
    background: linear-gradient(135deg, rgba(196, 149, 58, 0.08), rgba(196, 149, 58, 0.03));
    color: var(--v-gold, #c4953a);
    font-size: var(--v-font-body, 14px);
    font-weight: 600;
    font-family: var(--v-font-display, "Cinzel", serif);
  }
  .displaced-device-icon {
    font-size: var(--v-font-lg, 16px);
  }
  .displaced-device-label {
    letter-spacing: 0.3px;
  }
  .displaced-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v-space-md, 8px);
    margin-top: var(--v-space-xl, 20px);
  }
  .displaced-reopen-btn {
    display: inline-block;
    padding: var(--v-space-md, 8px) var(--v-space-2xl, 24px);
    background: linear-gradient(135deg, rgba(196, 149, 58, 0.3), rgba(196, 149, 58, 0.12));
    border: 1px solid var(--v-gold, #c4953a);
    border-radius: var(--v-radius, 10px);
    color: var(--v-gold, #c4953a);
    font-size: var(--v-font-body, 14px);
    font-weight: 600;
    font-family: var(--v-font-display, "Cinzel", serif);
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--v-transition, 0.2s) ease;
    box-shadow: 0 0 8px rgba(196, 149, 58, 0.1);
  }
  .displaced-reopen-btn:active {
    background: linear-gradient(135deg, rgba(196, 149, 58, 0.5), rgba(196, 149, 58, 0.25));
    box-shadow: 0 0 16px rgba(196, 149, 58, 0.2);
  }
  .displaced-reopen-btn:disabled {
    opacity: 0.5;
    cursor: default;
  }
  .displaced-close-btn {
    display: inline-block;
    padding: var(--v-space-sm, 6px) var(--v-space-2xl, 24px);
    background: transparent;
    border: 1px solid var(--v-border, #4a3828);
    border-radius: var(--v-radius, 10px);
    color: var(--v-text-dim, #a09484);
    font-size: var(--v-font-sm, 13px);
    font-family: var(--v-font, "MedievalSharp", "Cinzel", serif);
    cursor: pointer;
    transition: all var(--v-transition, 0.2s) ease;
  }
  .displaced-close-btn:active {
    background: var(--v-border, #4a3828);
    color: var(--v-text, #d4c8b0);
  }
  .displaced-error {
    color: var(--v-danger, #c44040);
    font-size: var(--v-font-sm, 13px);
    margin-top: var(--v-space-md, 8px);
  }
  /* Performance tiers: skip animations on lite devices */
  body.perf-lite .displaced-seal { animation: none; }
  body.perf-lite .displaced-card { animation: none; }
  @media (prefers-reduced-motion: reduce) {
    .displaced-seal { animation: none; }
    .displaced-card { animation: none; }
    .displaced-seal svg { filter: none; }
  }
  .v-audio-unlock {
    z-index: var(--v-z-critical, 10000);
    position: fixed;
  }
  .v-exit-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--v-z-critical, 10000);
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: v-exit-fadein 0.2s ease-out;
  }
  @keyframes v-exit-fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .v-exit-box {
    background: var(--v-bg-raised, #332a22);
    border: 2px solid var(--v-gold-dim, #9a7530);
    border-radius: 12px;
    padding: 24px 20px 20px;
    max-width: 300px;
    width: 85%;
    text-align: center;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(196, 149, 58, 0.1);
    animation: v-exit-scalein 0.2s ease-out;
  }
  @keyframes v-exit-scalein {
    from {
      transform: scale(0.9);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  .v-exit-icon {
    font-size: 36px;
    margin-bottom: 8px;
  }
  .v-exit-title {
    font-family: var(--v-font-display, "Cinzel", serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--v-gold, #c4953a);
    margin-bottom: 8px;
  }
  .v-exit-msg {
    font-family: var(--v-font, "MedievalSharp", serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--v-text, #d4c8b0);
    margin-bottom: 20px;
  }
  .v-exit-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .v-exit-btn {
    font-family: var(--v-font, "MedievalSharp", serif);
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition:
      transform 0.1s,
      box-shadow 0.1s;
    min-height: 44px;
  }
  .v-exit-btn:active {
    transform: scale(0.97);
  }
  .v-exit-btn-stay {
    background: linear-gradient(
      135deg,
      var(--v-gold, #c4953a),
      var(--v-gold-dim, #9a7530)
    );
    color: #1a1410;
    box-shadow: 0 2px 8px rgba(196, 149, 58, 0.3);
  }
  .v-exit-btn-leave {
    background: var(--v-bg-card, #2e2520);
    color: var(--v-text-dim, #a09484);
    border: 1px solid var(--v-border, #4a3828);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RULES — Outside @layer for maximum priority
   These apply to ALL WebApps unconditionally.
   ═══════════════════════════════════════════════════════════════════ */

/* Dark background outside the phone frame (visible on desktop/tablet) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #0f0c08;
  z-index: -1;
  pointer-events: none;
}

/* PROHIBITION: No italic text anywhere in the game (IMMUTABLE)
   Italic is illegible on small phone screens. Use --v-text-dim
   or border-left for visual differentiation instead. */
* {
  font-style: normal !important;
}

/* Ensure all fixed overlays respect the phone frame limits.
 * NEVER use left:50% + translateX(-50%) — it breaks when viewport > 430px
 * (web portal, desktop browser, DEV panel). Use left:0; right:0; margin:auto
 * which works at any viewport width. */
.v-popup-overlay,
.loading-overlay,
.processing-overlay,
#travel-overlay {
  max-width: min(100vw, 430px);
  max-height: min(100dvh, 932px);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}