/* Card-roster page styles from the approved prototype. */
  :root {
    --gold-1: #f1c97a;
    --gold-2: #d4a548;
    --gold-3: #8a6320;
    --gold-deep: #5a3f0f;
    --stone-1: #1a1410;
    --stone-2: #2a221c;
    --stone-3: #3a2e22;
    --parchment-1: #e9d8af;
    --parchment-2: #c6ad7a;
    --leather: #5b2a18;
    --ember: #f7b76a;
  }
  html, body, #root { height: 100%; margin: 0; }
  body {
    font-family: 'IM Fell English', 'Cormorant Garamond', serif;
    color: #f4e6c4;
    background: #0a0806;
    overflow: hidden;
  }
  .font-title { font-family: 'Cinzel', serif; letter-spacing: 0.08em; }
  .font-medieval { font-family: 'MedievalSharp', cursive; }
  .font-fell { font-family: 'IM Fell English', serif; }

  /* ==========================
     CASTLE ROOM BACKGROUND
     ========================== */
  /* Force the stage-bg behind everything else with an explicit z-index 0.
     The carousel has z-index 10. Without an explicit z-index on stage-bg,
     the will-change:opacity inside scene-layer can promote scene layers to
     a stacking context that competes with the carousel. */
  .stage-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
  .stage-bg svg { width: 100%; height: 100%; display: block; }
  /* Two-layer cross-fading scene backdrop. The stack holds the current and
     previous scene as absolutely positioned <img>s; opacity is animated for
     a smooth ~600ms cross-fade when the user changes class or mode.
     Layers are stacked by DOM order — `previous` first, `current` second so
     `current` paints on top. No will-change here (cheaper, and avoids the
     stacking-context surprise that was hiding the carousel). */
  .scene-stack { position: absolute; inset: 0; }
  .scene-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 600ms ease;
    pointer-events: none;
  }

  /* Torch glows on top of bg */
  .torch {
    position: absolute;
    width: 140px; height: 140px;
    border-radius: 999px;
    filter: blur(28px);
    background: radial-gradient(circle, rgba(255,170,80,0.75), rgba(255,90,20,0.30) 50%, transparent 70%);
    animation: flicker 2.4s ease-in-out infinite alternate;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .torch.small { width: 80px; height: 80px; filter: blur(18px); }
  @keyframes flicker {
    0% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0.7; transform: scale(0.95); }
  }
  .fireplace-glow {
    position: absolute; right: 0; top: 28%; bottom: 0; width: 36%;
    background:
      radial-gradient(40% 70% at 70% 80%, rgba(255,140,50,0.45), transparent 70%),
      radial-gradient(20% 40% at 65% 90%, rgba(255,210,120,0.55), transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
    animation: fireFlicker 3s ease-in-out infinite alternate;
  }
  @keyframes fireFlicker {
    0% { opacity: 0.85; } 50% { opacity: 1; } 100% { opacity: 0.78; }
  }

  /* ==========================
     TITLE PLATE
     ========================== */
  .title-plate {
    background:
      linear-gradient(180deg, #2c2118 0%, #1a130c 100%);
    border: 3px solid #6e5118;
    border-radius: 4px;
    box-shadow:
      inset 0 0 0 1px #2a1f10,
      inset 0 2px 0 rgba(255,210,140,0.15),
      0 14px 36px rgba(0,0,0,0.75);
    position: relative;
  }
  .title-plate::before {
    /* small upper notch */
    content: "";
    position: absolute; left: 50%; transform: translateX(-50%); top: -10px;
    width: 30px; height: 16px;
    background: linear-gradient(180deg, #d4a548, #6e4d18);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .plate-cap {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 56px; height: 70px;
    background:
      linear-gradient(180deg, #d4a548 0%, #8a6320 60%, #4f3712 100%);
    clip-path: polygon(0 50%, 30% 0, 80% 0, 100% 25%, 100% 75%, 80% 100%, 30% 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,0.5);
  }
  .plate-cap.left  { left: -50px; }
  .plate-cap.right { right: -50px; transform: translateY(-50%) scaleX(-1); }
  .plate-cap::before {
    content: ""; position: absolute; inset: 6px;
    border: 1px solid rgba(0,0,0,0.4);
    clip-path: inherit;
  }
  .gold-text {
    background: linear-gradient(180deg, #fbe49a 0%, #e8b85d 45%, #a17518 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  }

  /* ==========================
     PARCHMENT SCROLL
     ========================== */
  .scroll {
    position: relative;
    background:
      radial-gradient(120% 80% at 50% 0%, #f0dfb5 0%, #dec793 45%, #b89d68 100%);
    color: #3a2814;
    border-top: 2px solid #8a6a3a;
    border-bottom: 2px solid #8a6a3a;
    box-shadow: 0 18px 30px rgba(0,0,0,0.55), inset 0 0 60px rgba(120,80,30,0.28);
  }
  .scroll::before, .scroll::after {
    content: "";
    position: absolute; top: -10px; bottom: -10px; width: 30px;
    background:
      radial-gradient(circle at 50% 50%, #c69a52 0%, #7a4f1d 60%, #432a10 100%);
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  }
  .scroll::before { left: -24px; }
  .scroll::after  { right: -24px; }

  /* sub-title banner — matched to the bottom toggle's dark wood palette for
     visual consistency between header and footer chrome. */
  .sub-banner {
    background: linear-gradient(180deg, #2b2018 0%, #1a130c 100%);
    border: 2px solid #6e5118;
    box-shadow: inset 0 2px 0 rgba(255,210,140,0.18), inset 0 0 0 1px #2a1f10, 0 6px 14px rgba(0,0,0,0.5);
    clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
  }

  /* ==========================
     CLASS ICON RAIL
     ========================== */
  .class-ring {
    background:
      radial-gradient(circle at 50% 40%, #36281a 0%, #1a130c 60%, #0c0a08 100%);
    border: 3px solid #6e5118;
    box-shadow:
      inset 0 0 0 2px #2a1f10,
      inset 0 0 18px rgba(0,0,0,0.6),
      0 6px 14px rgba(0,0,0,0.6);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .class-ring:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: #c2933b;
  }
  .class-ring.active {
    border-color: #f1c97a;
    box-shadow:
      inset 0 0 0 2px #4a3614,
      0 0 28px 6px rgba(255,180,80,0.65),
      0 0 60px rgba(255,140,40,0.45);
    animation: pulseGlow 2s ease-in-out infinite alternate;
  }
  .class-frame-wood {
    /* used for peasant — wooden rectangular frame */
    background:
      linear-gradient(180deg, #6a4a26 0%, #3a240e 100%);
    border: 3px solid #2a1607;
    box-shadow:
      inset 0 0 0 2px #1c0e04,
      inset 0 2px 0 rgba(255,200,130,0.10),
      0 6px 14px rgba(0,0,0,0.6);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .class-frame-wood:hover { transform: translateY(-2px) scale(1.03); }
  .class-frame-wood.active {
    border-color: #c08a40;
    box-shadow:
      inset 0 0 0 2px #1c0e04,
      0 0 24px 4px rgba(255,180,80,0.55),
      0 0 50px rgba(255,140,40,0.35);
    animation: pulseGlow 2s ease-in-out infinite alternate;
  }
  @keyframes pulseGlow {
    from { filter: brightness(1); }
    to   { filter: brightness(1.15); }
  }
  .rail-link {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 3px; background: linear-gradient(180deg, #6e5118 0%, #2a1f10 50%, #6e5118 100%);
    z-index: 0;
  }

  /* ==========================
     CARDS — image-based fan layout
     Each card is a full PNG/WebP. The card slot does positioning,
     hover/select states, and entry animation. Card visual design
     lives entirely inside the image asset.
     ========================== */
  .card-slot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 308px;
    margin-left: -110px;
    margin-top: -154px;
    cursor: pointer;
    z-index: var(--z, 1);
    opacity: 0;
    animation: cardSlotIn 0.45s ease forwards;
    animation-delay: var(--delay, 0s);
  }
  .card-slot:hover           { z-index: 50; }
  .card-slot.selected        { z-index: 100; }

  .card-inner {
    width: 100%;
    height: 100%;
    transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(var(--sc));
    transform-origin: center bottom;
    transition: transform 0.4s cubic-bezier(.4,.2,.2,1), filter 0.3s ease;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,0.7));
  }
  .card-slot:hover:not(.selected) .card-inner {
    transform: translate(var(--x), calc(var(--y) - 24px)) rotate(var(--rot)) scale(calc(var(--sc) * 1.06));
    filter: drop-shadow(0 24px 36px rgba(255,170,70,0.4));
  }
  .card-slot.selected .card-inner {
    transform: translate(var(--x), calc(var(--y) - 36px)) rotate(0deg) scale(1.26);
    filter: drop-shadow(0 30px 44px rgba(255,200,100,0.65));
  }

  .card-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 14px;
    user-select: none;
    -webkit-user-drag: none;
  }
  .card-img-placeholder {
    width: 100%;
    height: 100%;
    display: block;
  }

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

  /* ==========================
     BOTTOM TOGGLE
     ========================== */
  .toggle-frame {
    background: linear-gradient(180deg, #2b2018 0%, #1a130c 100%);
    border: 2px solid #6e5118;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #2a1f10, 0 8px 16px rgba(0,0,0,0.55);
    clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
    position: relative;
  }
  .toggle-btn {
    position: relative;
    transition: color .2s ease;
    color: #c9b289;
    z-index: 2;
  }
  .toggle-btn.active { color: #1a130c; }
  .toggle-pill {
    position: absolute; top: 4px; bottom: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f1c97a 0%, #b8862a 60%, #6e4d18 100%);
    box-shadow: 0 0 18px rgba(255,180,80,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: left .35s cubic-bezier(.6,.2,.2,1), width .35s cubic-bezier(.6,.2,.2,1);
    z-index: 1;
  }
  /* Central shield ornament between toggle halves */
  .toggle-shield {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 48px;
    background: linear-gradient(180deg, #4a3614 0%, #1a130c 100%);
    border: 2px solid #6e5118;
    clip-path: polygon(50% 0, 100% 20%, 100% 70%, 50% 100%, 0 70%, 0 20%);
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
  }
  .toggle-shield::after {
    content: ""; position: absolute; inset: 4px;
    border: 1px solid rgba(241,201,122,0.55);
    clip-path: inherit;
  }

  /* ==========================
     DETAIL PANEL
     ========================== */
  .detail-panel {
    background:
      linear-gradient(180deg, #2b2018 0%, #1a130c 100%);
    border: 2px solid #6e5118;
    border-radius: 8px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.7), inset 0 0 0 1px #2a1f10;
    position: relative;
  }
  .detail-panel::before {
    content: ""; position: absolute; inset: 4px;
    border: 1px solid rgba(241,201,122,0.30);
    border-radius: 5px; pointer-events: none;
  }

  /* ==========================
     ANIMATIONS / UTILS
     ========================== */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .anim-fadeup { animation: fadeUp .35s ease both; }

  @keyframes cardIn {
    from { opacity: 0; transform: translateY(60px) rotate(var(--rot, 0deg)) scale(0.8); }
    to   { opacity: 1; transform: translateY(var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); }
  }

  .card-slot {
    transition: transform .35s cubic-bezier(.4,.2,.2,1), filter .35s ease;
    transform-origin: bottom center;
    cursor: pointer;
    will-change: transform;
  }
  .card-slot:hover {
    transform: translateY(calc(var(--ty, 0px) - 22px)) rotate(var(--rot, 0deg)) scale(calc(var(--sc, 1) * 1.07)) !important;
    filter: drop-shadow(0 18px 24px rgba(255,170,70,0.30));
    z-index: 30 !important;
  }
  .card-slot.selected {
    transform: translateY(calc(var(--ty, 0px) - 34px)) rotate(0deg) scale(1.14) !important;
    filter: drop-shadow(0 24px 30px rgba(255,200,100,0.55));
    z-index: 40 !important;
  }

  .rivet {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 30%, #fbe49a, #8a6320 70%, #2a1607 100%);
    box-shadow: 0 1px 1px rgba(0,0,0,0.7);
  }

  ::-webkit-scrollbar { display: none; }

  /* ==========================
     LOADING VEIL
     Shown on first paint while Babel compiles the inline JSX and React
     mounts. Fades out as soon as the App's useEffect fires (so the user
     sees a smooth handoff instead of a blank dark screen for a few seconds).
     ========================== */
  .nw-loading-veil {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, #1a130c 0%, #0a0806 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease;
  }
  .nw-loading-veil.fade-out {
    opacity: 0;
    pointer-events: none;
  }
  .nw-loading-veil__title {
    font-family: 'Cinzel', serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.55em;
    padding-left: 0.55em; /* compensate trailing letter-spacing for visual center */
    background: linear-gradient(180deg, #fbe49a 0%, #e8b85d 50%, #8a6320 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    animation: nwLoadingPulse 2.2s ease-in-out infinite alternate;
  }
  .nw-loading-veil__subtitle {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    color: #caa56a;
    letter-spacing: 0.45em;
    padding-left: 0.45em;
    margin-top: 14px;
    opacity: 0.75;
    text-align: center;
  }
  @keyframes nwLoadingPulse {
    from { opacity: 0.65; }
    to   { opacity: 1; }
  }

  /* Rail label — used under both Warriors class icons and Equip class icons.
     Brighter base color and a strong text-shadow so they stay legible against
     the busy castle background. The .active variant uses the gradient text. */
  .rail-label {
    color: #ead095;
    text-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.6);
    font-size: 12px;
  }
  .rail-label.active {
    /* gold-text class supplies the gold gradient; text-shadow still applies */
  }

  /* Fade-in for the card stage when Warriors <-> Equip is toggled.
     Used via key={mode} on a position:absolute wrapper so React remounts
     and the animation runs every time the mode changes. Opacity-only —
     a transform here would create a new positioning context and break
     the absolute children's percentage top/left values. */
  .mode-fade {
    position: absolute;
    inset: 0;
    animation: modeFadeIn 0.45s ease both;
    pointer-events: none;
  }
  .mode-fade > * { pointer-events: auto; }
  @keyframes modeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ==========================
     EQUIP CAROUSEL (3D wheel)
     ========================== */
  .equip-stage {
    position: absolute;
    left: 0; right: 0;
    top: 64%;
    transform: translateY(-50%);
    z-index: 10;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }
  .equip-perspective {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    cursor: grab;
  }
  .equip-perspective.dragging { cursor: grabbing; }
  .equip-rotor {
    position: relative;
    width: 150px;
    height: 210px;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.4,.2,.2,1);
    will-change: transform;
  }
  .equip-rotor.no-transition { transition: none; }
  .equip-card3d {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    cursor: pointer;
    /* will-change hints the compositor to give this card its own layer so
       the rotor's spin re-composites instead of re-rasterizing every frame.
       NOTE: do NOT add `contain: paint` here — paint containment flattens
       3D rendering of children, which hides the rotated back face. */
    will-change: transform;
  }
  .equip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
    background: #0c0e16;
    border: 3px solid #2a2436;
    box-shadow: 0 12px 28px rgba(0,0,0,0.65);
  }
  .equip-face.front img,
  .equip-face.front svg.equip-ph,
  .equip-face.back img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
  }
  /* Front uses contain so the painted card-art fits without cropping. */
  .equip-face.front img,
  .equip-face.front svg.equip-ph {
    object-fit: contain;
  }
  .equip-face.back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #1d1a30 0%, #08080f 100%);
    border-color: #4a3614;
  }
  /* Selected (active) card — strong gold treatment + a slow 2.4s "breathing"
     pulse on the glow so it feels alive and reinforces "this is the focus".
     Animates `filter: drop-shadow` (GPU-composited) instead of `box-shadow`
     (CPU repaint per frame). Keeps the visual but cuts the rotor's per-frame
     cost dramatically, which is most of the "slow & buggy" carousel feel. */
  .equip-card3d.active .equip-face.front {
    border-color: #fbe49a;
    box-shadow:
      inset 0 0 0 1px rgba(58,40,16,0.85),
      0 0 0 2px rgba(241,201,122,0.70),
      0 14px 32px rgba(0,0,0,0.7);
  }
  .equip-card3d.active {
    animation: equipActivePulse 2.4s ease-in-out infinite;
  }
  @keyframes equipActivePulse {
    0%, 100% {
      filter: drop-shadow(0 0 14px rgba(255,200,100,0.55));
    }
    50% {
      filter: drop-shadow(0 0 26px rgba(255,210,110,0.95));
    }
  }

  .equip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px; height: 54px;
    background: radial-gradient(circle at 35% 30%, #3a2e1a, #1a130c);
    border: 2px solid #6e5118;
    border-radius: 50%;
    color: #f1c97a;
    font-size: 32px;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,210,140,0.2);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    padding: 0 0 4px 0;
  }
  .equip-arrow:hover {
    border-color: #f1c97a;
    box-shadow: 0 0 22px rgba(255,180,80,0.6), 0 6px 16px rgba(0,0,0,0.7);
    transform: translateY(-50%) scale(1.06);
  }
  .equip-arrow:active { transform: translateY(-50%) scale(0.95); }
  /* Left arrow sits past the equip class rail (which occupies ~3-10% of the
     stage) so they don't overlap. Right arrow stays at the edge — no rail
     on the right side. */
  .equip-arrow.left  { left: 12%; }
  .equip-arrow.right { right: 3%; }

  /* Hover on non-active cards — subtle, just signals "you can click me".
     Active state below is much stronger so the difference is obvious. */
  .equip-card3d:hover:not(.active) .equip-face.front {
    border-color: #b8862a;
    box-shadow: 0 0 14px rgba(255,180,80,0.28), 0 12px 28px rgba(0,0,0,0.6);
    transition: border-color .18s ease, box-shadow .18s ease;
  }

  .equip-active-name {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.3em;
    color: #f1c97a;
    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
    z-index: 50;
    pointer-events: none;
  }
  .equip-counter {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: #caa56a;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    z-index: 50;
    pointer-events: none;
  }

  /* ==========================
     BUY NOW CTA
     Plain HTML, sits outside #root so it survives independent of the
     precompiled React bundle. Fixed to the viewport, echoes the toggle
     pill's gold gradient and the panel/frame border color.
     ========================== */
  .nw-buy-now {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: #2a1a08;
    background: linear-gradient(180deg, #f1c97a 0%, #d4a548 55%, #8a6320 100%);
    border: 2px solid #6e5118;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.55), 0 0 18px rgba(255,180,80,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  }
  .nw-buy-now:hover {
    background: linear-gradient(180deg, #fbe49a 0%, #e0992f 55%, #a1750f 100%);
    box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 0 26px rgba(255,180,80,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
    transform: translateY(-2px);
  }
  .nw-buy-now:active { transform: translateY(0); }

/* Static Tailwind utility output used by the precompiled roster markup. */
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.-right-1{right:-0.25rem}.bottom-4{bottom:1rem}.bottom-\[18\%\]{bottom:18%}.bottom-\[5\%\]{bottom:5%}.left-1\/2{left:50%}.left-4{left:1rem}.left-\[3\%\]{left:3%}.right-4{right:1rem}.top-1\/2{top:50%}.top-4{top:1rem}.top-\[20\%\]{top:20%}.top-\[4\%\]{top:4%}.z-10{z-index:10}.z-20{z-index:20}.mx-16{margin-left:4rem;margin-right:4rem}.my-\[6px\]{margin-top:6px;margin-bottom:6px}.mt-2{margin-top:0.5rem}.mt-\[2px\]{margin-top:2px}.mt-\[6px\]{margin-top:6px}.flex{display:flex}.h-12{height:3rem}.h-2{height:0.5rem}.h-5{height:1.25rem}.h-\[58px\]{height:58px}.h-\[60px\]{height:60px}.h-\[80px\]{height:80px}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.w-12{width:3rem}.w-2{width:0.5rem}.w-5{width:1.25rem}.w-\[120px\]{width:120px}.w-\[400px\]{width:400px}.w-\[44\%\]{width:44%}.w-\[60px\]{width:60px}.w-\[80px\]{width:80px}.w-full{width:100%}.w-screen{width:100vw}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:0.75rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-r-2{border-right-width:2px}.border-t-2{border-top-width:2px}.border-\[\#6e5118\]{--tw-border-opacity:1;border-color:rgb(110 81 24 / var(--tw-border-opacity, 1))}.bg-\[\#1a130c\]{--tw-bg-opacity:1;background-color:rgb(26 19 12 / var(--tw-bg-opacity, 1))}.bg-\[\#f1c97a\]{--tw-bg-opacity:1;background-color:rgb(241 201 122 / var(--tw-bg-opacity, 1))}.object-cover{object-fit:cover}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-14{padding-left:3.5rem;padding-right:3.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-\[10px\]{padding-top:10px;padding-bottom:10px}.text-center{text-align:center}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[9px\]{font-size:9px}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.32em\]{letter-spacing:0.32em}.tracking-\[0\.38em\]{letter-spacing:0.38em}.tracking-\[0\.42em\]{letter-spacing:0.42em}.tracking-\[0\.4em\]{letter-spacing:0.4em}.text-\[\#3a2814\]{--tw-text-opacity:1;color:rgb(58 40 20 / var(--tw-text-opacity, 1))}.text-\[\#7a4f1d\]{--tw-text-opacity:1;color:rgb(122 79 29 / var(--tw-text-opacity, 1))}.opacity-60{opacity:0.6}.shadow-\[0_0_10px_\#f1c97a\]{--tw-shadow:0 0 10px #f1c97a;--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}