:root {
    --bg: #060507;
    --ink: #f3efe6;
    --muted: rgba(243,239,230,0.55);
    --faint: rgba(243,239,230,0.32);
    --gold: #f7c948;
    --gold-bright: #ffd86b;
    --gold-soft: rgba(247,201,72,0.16);
    --accent: #7A4DFF;
    --line: rgba(247,201,72,0.22);
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --sans: "Hanken Grotesk", system-ui, sans-serif;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  /* Body always shows the hero photo as background — safety net for any frame where React's
     phase swap (teaser → enter) might leave the underlying body briefly exposed. */
  body {
    background-color: var(--bg);
    background-image: url('../assets/hero-exterior.png');
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
    font-family: var(--sans);
    color: var(--ink);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  #root, .world { position: fixed; inset: 0; }
  .world { overflow: hidden; background: #000; }
  a { color: inherit; text-decoration: none; }

  /* ── HERO BACKGROUND ─────────────────────────────────────────── */
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-bg__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center 42%; background-repeat: no-repeat;
    animation: heroIn 1.6s cubic-bezier(.16,1,.3,1) both;
  }
  /* Kenburns disabled — the constant oscillation made the moment of click unpredictable
     (the hero scale could be anywhere between 1.04 and 1.07 depending on timing),
     creating a visible jump as the vstage took over. Static hero = deterministic handoff. */
  .world--motion-cinematic .hero-bg__img { animation: heroIn 1.6s cubic-bezier(.16,1,.3,1) both; }
  @keyframes heroIn { from { opacity: 0; transform: scale(1.10); filter: blur(14px) brightness(.4); } to { opacity: 1; transform: scale(1.04); filter: blur(0) brightness(1); } }
  .hero-bg__grade {
    position: absolute; inset: 0;
    background:
      radial-gradient(120% 95% at 58% 28%, rgba(0,0,0,0) 42%, rgba(3,2,4,.42) 100%),
      linear-gradient(90deg, rgba(3,2,4,.7) 0%, rgba(3,2,4,.2) 42%, rgba(3,2,4,0) 70%),
      linear-gradient(180deg, rgba(3,2,4,.42) 0%, rgba(3,2,4,0) 30%, rgba(3,2,4,.1) 55%, rgba(3,2,4,.72) 100%);
  }

  /* ── FX LAYER ────────────────────────────────────────────────── */
  .fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .fx-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; mix-blend-mode: screen; }
  .fx-leak { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; opacity: .5; }
  .fx-leak--1 { width: 46vw; height: 46vw; left: -8vw; top: -10vw;
    background: radial-gradient(circle, var(--leak,#7A4DFF) 0%, transparent 68%);
    animation: leakDrift1 26s ease-in-out infinite alternate; }
  .fx-leak--2 { width: 38vw; height: 38vw; right: -6vw; bottom: -8vw;
    background: radial-gradient(circle, var(--gold) 0%, transparent 68%); opacity: .22;
    animation: leakDrift2 32s ease-in-out infinite alternate; }
  @keyframes leakDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw,6vh) scale(1.18); } }
  @keyframes leakDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vw,-5vh) scale(1.12); } }
  .fx-grain {
    position: absolute; inset: -50%; opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 1.1s steps(3) infinite;
  }
  .world--motion-off .fx-grain { animation: none; }
  @keyframes grainShift { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-2%)} 100%{transform:translate(0,0)} }
  .fx-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 16vw 0 rgba(0,0,0,.5); }

  /* ── FRAME / CONTENT ─────────────────────────────────────────── */
  .frame { position: absolute; inset: 0; z-index: 3; display: flex; }
  .layout { flex: 1; display: flex; padding: clamp(28px, 5vw, 76px); }

  /* entrance reveal — base state is visible (so motion=off / print show content) */
  .reveal { animation: none; }
  .world--motion-cinematic .reveal,
  .world--motion-subtle .reveal {
    animation: reveal 1s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes reveal { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
  @media (prefers-reduced-motion: reduce) { .reveal { animation: none !important; } }

  /* ── KICKER ──────────────────────────────────────────────────── */
  .kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .26em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
  }
  .kicker span { white-space: nowrap; }
  .kicker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 10px 1px var(--gold); animation: pulse 2.6s ease-in-out infinite; }
  .world--motion-off .kicker__dot { animation: none; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
  .kicker__sep { color: var(--faint); }

  /* ── WORDMARK ────────────────────────────────────────────────── */
  .wordmark { display: flex; flex-direction: column; gap: 2px; }
  .wordmark__en {
    margin: 0; font-family: var(--mono); font-weight: 800;
    font-size: clamp(2.6rem, 8.4vw, 6.4rem); line-height: .92;
    letter-spacing: -.02em; color: var(--gold-bright);
    text-shadow: 0 0 1px rgba(255,255,255,.5), 0 0 18px rgba(247,201,72,.55),
                 0 0 48px rgba(247,201,72,.35), 0 0 90px rgba(247,201,72,.18);
  }
  .world--motion-cinematic .wordmark__en { animation: flicker 7s steps(1) infinite; }
  @keyframes flicker { 0%,96%,100%{opacity:1} 96.5%{opacity:.72} 97%{opacity:1} 97.4%{opacity:.55} 97.7%{opacity:1} }
  .wordmark__kr {
    font-family: var(--mono); font-weight: 700; color: var(--gold);
    font-size: clamp(1.1rem, 2.6vw, 1.7rem); letter-spacing: .04em;
    text-shadow: 0 0 14px rgba(247,201,72,.5), 0 0 36px rgba(247,201,72,.28);
  }
  .wordmark--sm .wordmark__en { font-size: clamp(2rem, 4.4vw, 3rem); }
  .wordmark--sm .wordmark__kr { font-size: clamp(.9rem, 1.6vw, 1.1rem); }

  /* ── TEXT ────────────────────────────────────────────────────── */
  .tagline {
    margin: 0; font-family: var(--mono); font-weight: 400;
    font-size: clamp(.95rem, 1.7vw, 1.18rem); letter-spacing: .02em;
    color: var(--ink); text-wrap: balance;
  }
  .body {
    margin: 0; max-width: 46ch; color: var(--muted);
    font-size: clamp(.9rem, 1.2vw, 1rem); line-height: 1.62; text-wrap: pretty;
  }

  /* ── FORM ────────────────────────────────────────────────────── */
  .wl-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 480px; }
  .wl-field { display: flex; gap: 8px; align-items: stretch;
    background: rgba(10,9,12,.55); border: 1px solid var(--line);
    border-radius: 4px; padding: 6px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 50px -20px rgba(0,0,0,.8);
    transition: border-color .25s, box-shadow .25s; }
  .wl-field:focus-within { border-color: rgba(247,201,72,.6);
    box-shadow: 0 0 0 1px rgba(247,201,72,.25), 0 0 40px -6px rgba(247,201,72,.3); }
  .wl-form--stacked .wl-field { flex-direction: column; gap: 6px; padding: 8px; }
  .wl-field input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
    color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 12px 12px;
    caret-color: var(--gold); letter-spacing: .01em;
  }
  .wl-field input::placeholder { color: var(--faint); }
  .wl-field input.is-error { color: #ff8a8a; }
  .wl-field button {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .04em;
    text-transform: uppercase; color: #0a0805; cursor: pointer;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    border: 0; border-radius: 3px; padding: 0 18px; white-space: nowrap;
    box-shadow: 0 0 22px -2px rgba(247,201,72,.55); transition: transform .15s, box-shadow .25s, filter .2s;
  }
  .wl-form--stacked .wl-field button { padding: 13px; }
  .wl-field button:hover { filter: brightness(1.08); box-shadow: 0 0 34px 0 rgba(247,201,72,.7); }
  .wl-field button:active { transform: translateY(1px); }
  .wl-field button:disabled { opacity: .6; cursor: default; }
  .wl-msg { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint); padding-left: 4px; }
  .wl-msg.is-error { color: #ff9a9a; }

  .wl-done { display: inline-flex; align-items: center; gap: 12px; width: 100%; max-width: 480px;
    background: rgba(10,9,12,.55); border: 1px solid rgba(247,201,72,.45); border-radius: 4px;
    padding: 18px 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 40px -10px rgba(247,201,72,.4); animation: reveal .6s cubic-bezier(.16,1,.3,1) both; }
  .wl-done__tick { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    color: #0a0805; background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    box-shadow: 0 0 18px -1px rgba(247,201,72,.7); }
  .wl-done__txt { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .02em; color: var(--gold-bright); }

  /* ── LAYOUT: CENTERED ────────────────────────────────────────── */
  .layout--centered { align-items: center; justify-content: center; text-align: center; }
  .layout--centered::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 56% 56% at 50% 50%, rgba(3,2,4,.82) 0%, rgba(3,2,4,.5) 46%, rgba(3,2,4,0) 78%); }
  .layout--centered .stack { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 620px; position: relative; }
  .layout--centered .kicker { --d: .1s; }
  .layout--centered .wordmark { --d: .2s; align-items: center; }
  .layout--centered .tagline { --d: .35s; }
  .layout--centered .body { --d: .45s; text-align: center; }
  .layout--centered .wl-form { --d: .55s; align-items: center; }
  .layout--centered .wl-msg, .layout--centered .wl-done__txt { text-align: center; }

  /* ── LAYOUT: LOWER THIRD ─────────────────────────────────────── */
  .layout--lower { align-items: flex-end; }
  .lower-content { display: flex; flex-direction: column; gap: 20px; max-width: 600px; }
  .lower-content .kicker { --d: .1s; }
  .lower-content .wordmark { --d: .2s; }
  .lower-content .tagline { --d: .35s; }
  .lower-content .body { --d: .45s; }
  .lower-content .wl-form { --d: .55s; }
  .rail { position: absolute; top: clamp(28px,5vw,76px); right: clamp(28px,5vw,76px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
    font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .3em;
    color: var(--muted); --d: .7s; }
  .world--motion-cinematic .rail, .world--motion-subtle .rail { animation: reveal 1s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d); }
  .rail__bolt { color: var(--gold); margin-top: 4px; filter: drop-shadow(0 0 10px rgba(247,201,72,.6)); }

  /* ── LAYOUT: VITRINE ─────────────────────────────────────────── */
  .layout--vitrine { align-items: center; justify-content: center; }
  .vitrine { position: relative; display: flex; flex-direction: column; gap: 18px;
    width: min(92vw, 480px); padding: clamp(28px,4vw,40px); border-radius: 6px;
    background: linear-gradient(180deg, rgba(14,12,18,.66), rgba(8,7,11,.72));
    border: 1px solid var(--line); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
    box-shadow: 0 40px 110px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
    --d: .3s; }
  .world--motion-cinematic .vitrine, .world--motion-subtle .vitrine { animation: reveal 1.1s cubic-bezier(.16,1,.3,1) both; animation-delay: .25s; }
  .vitrine::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 6px 6px 0 0;
    box-shadow: 0 0 18px rgba(247,201,72,.6); }
  .vitrine__top { display: flex; align-items: center; justify-content: space-between; }
  .vitrine__bolt { color: var(--gold); filter: drop-shadow(0 0 10px rgba(247,201,72,.6)); }
  .layout--vitrine .reveal { animation: none; }

  /* ── FOOTER ──────────────────────────────────────────────────── */
  .footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px clamp(28px,5vw,76px); pointer-events: none; }
  .footer > * { pointer-events: auto; }
  .footer__mark { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .26em; color: var(--faint); }
  .socials { display: flex; gap: 14px; }
  .socials a { color: var(--muted); display: grid; place-items: center; transition: color .2s, transform .2s; }
  .socials a:hover { color: var(--gold); transform: translateY(-1px); }
  .footer__admin { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); transition: color .2s; white-space: nowrap; }
  .footer__admin:hover { color: var(--gold); }

  /* ── RESPONSIVE ──────────────────────────────────────────────── */
  @media (max-width: 600px) {
    .layout { padding: 22px; }
    .layout--lower { align-items: flex-end; padding-bottom: 84px; }
    .rail { display: none; }
    .wl-field { flex-direction: column; gap: 6px; }
    .wl-field button { padding: 13px; }
    .footer { flex-wrap: wrap; justify-content: center; gap: 12px; }
    .footer__mark { display: none; }
  }

  /* ══ ENTER (dev) CTA ═══════════════════════════════════════════ */
  .enter-cta { display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
    font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-bright); background: rgba(10,9,12,.5); border: 1px solid rgba(247,201,72,.45);
    border-radius: 4px; padding: 13px 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 30px -8px rgba(247,201,72,.45), inset 0 1px 0 rgba(255,255,255,.05);
    transition: all .25s; align-self: flex-start; white-space: nowrap; }
  .layout--centered .enter-cta { align-self: center; }
  .enter-cta:hover { border-color: var(--gold); color: #0a0805; background: linear-gradient(180deg,var(--gold-bright),var(--gold));
    box-shadow: 0 0 40px -2px rgba(247,201,72,.7); }
  .enter-cta__dev { font-size: 9px; letter-spacing: .18em; color: var(--accent); border: 1px solid rgba(122,77,255,.5);
    border-radius: 3px; padding: 2px 6px; background: rgba(122,77,255,.12); }
  .enter-cta:hover .enter-cta__dev { color: #0a0805; border-color: rgba(10,8,5,.3); background: rgba(10,8,5,.12); }
  .enter-cta__bolt { width: 14px; height: 14px; }

  /* ══ TRANSITION VIDEO ══════════════════════════════════════════ */
  /* vstage shows the SAME hero photo as the teaser, hardcoded URL so it never depends
     on React's inline poster prop (which can be undefined for a frame). */
  .vstage { position: fixed; inset: 0; z-index: 90; background-color: #000;
    background-image: url('../assets/hero-exterior.png') !important;
    background-position: center 42% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
  @keyframes vIn { from { opacity: 0; } to { opacity: 1; } }
  .vstage.is-out { animation: vOut .9s ease both; }
  @keyframes vOut { to { opacity: 0; } }
  /* The "magic trick" — the video is paused on its first frame underneath the static hero photo.
     At reveal moment, the video starts playing AND fades in at 0.5s. This gives the perception
     that the photo itself is coming alive: motion begins exactly when opacity transitions, so
     the eye experiences a single continuous gesture rather than a cut. */
  .vstage video { width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    opacity: 0; transition: opacity 0.5s ease;
    background: transparent; }
  .vstage video.is-on { opacity: 1; }
  .vstage__skip { position: absolute; bottom: 26px; right: 28px; z-index: 2;
    font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.45); background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.15);
    border-radius: 4px; padding: 9px 14px; cursor: pointer; transition: all .2s; backdrop-filter: blur(6px); }
  .vstage__skip:hover { color: #fff; border-color: rgba(255,255,255,.4); }
  .vstage__load { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
    display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px;
    letter-spacing: .26em; text-transform: uppercase; color: rgba(247,201,72,.8); }
  .vstage__load-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 12px 1px var(--gold); animation: pulse 1.2s ease-in-out infinite; }

  /* ══ INTERIOR GALLERY ══════════════════════════════════════════ */
  /* Hardcoded URL — no longer depending on React's inline --room-full variable injection
     (which was somehow not propagating reliably). Direct CSS URL is bulletproof.
     vIn animation removed — even though it's behind the vstage, removing it eliminates any
     possible visual contribution if vstage has a render gap for a single frame. */
  .interior { position: fixed; inset: 0; z-index: 80; overflow: hidden;
    background-color: #050409;
    background-image: url('../assets/room_full.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    --gx-accent: #8b5cff; }
  .gx-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: max(100vw, 177.78vh); height: max(56.25vw, 100vh); }
  .gx-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .gx-bg--empty { display: none; }
  .gx-bg--full { display: none; }
  /* Disabled — the photograph already has its own lighting (yellow neon + purple LEDs).
     Adding a CSS spotlight on top would create an artificial hot spot. */
  .gx-spot { display: none; }

  /* Cut-out item overlays are disabled in favour of the pristine final photo.
     We keep the rules in the codebase but hide them, so future iterations
     (with proper transparent-PNG product renders) can re-enable simply. */
  .gx-item { display: none !important; }
  .gx-item__img, .gx-item__halo, .gx-item__tag { display: none !important; }
  .gx-item__halo { position: absolute; left: 50%; top: 54%; width: 120%; height: 60%; transform: translate(-50%,-50%);
    background: radial-gradient(ellipse at center, var(--gx-accent), transparent 70%); opacity: 0; z-index: -1;
    filter: blur(30px); transition: opacity .6s ease; mix-blend-mode: screen; }
  .gx-item.is-center .gx-item__halo { opacity: .4; }
  .gx-item__tag { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap;
    font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,239,230,.6);
    opacity: 0; transition: opacity .3s; pointer-events: none; }
  .gx-item.is-side:hover .gx-item__tag { opacity: 1; }

  .gx-caption { position: absolute; left: 51%; top: 70%; transform: translateX(-50%); text-align: center;
    z-index: 35; pointer-events: none; width: min(80vw, 560px); }
  .gx-caption__k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .3em;
    text-transform: uppercase; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 10px; }
  .gx-caption__k::before, .gx-caption__k::after { content: ""; width: 26px; height: 1px; background: rgba(247,201,72,.4); }
  .gx-caption__t { margin: 12px 0 0; font-family: var(--mono); font-weight: 800; letter-spacing: -.01em;
    font-size: clamp(1.3rem, 2.6vw, 2.2rem); color: var(--ink);
    text-shadow: 0 2px 30px rgba(0,0,0,.8); }
  .gx-cap-anim { animation: capIn .6s cubic-bezier(.16,1,.3,1) both; }
  @keyframes capIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); filter: blur(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); } }

  /* Vignette softened — the reference photo already has natural corner darkening,
     keep only a very light gradient at the very bottom so the hint/caption float over a slight darker band. */
  .gx-vig { position: absolute; inset: 0; z-index: 44; pointer-events: none;
    background: linear-gradient(180deg, transparent 70%, rgba(4,3,8,.45) 100%); }

  /* interior chrome (viewport-fixed) */
  .gx-chrome { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
  .gx-chrome > * { pointer-events: auto; }
  .gx-top { position: absolute; top: 22px; left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; }
  .gx-mark { font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: .2em; color: var(--gold-bright);
    text-shadow: 0 0 16px rgba(247,201,72,.5); }
  .gx-mark span { color: rgba(243,239,230,.5); font-weight: 500; margin-left: 8px; letter-spacing:.18em; }
  .gx-exit { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(243,239,230,.55); background: rgba(10,9,12,.45); border: 1px solid rgba(243,239,230,.14);
    border-radius: 4px; padding: 9px 14px; cursor: pointer; transition: all .2s; backdrop-filter: blur(8px); display:inline-flex; align-items:center; gap:8px; }
  .gx-exit:hover { color: var(--gold-bright); border-color: rgba(247,201,72,.4); }
  .gx-exit__dev { font-size: 8px; color: var(--accent); border: 1px solid rgba(122,77,255,.5); border-radius: 3px; padding: 1px 5px; }
  /* Hint disabled — no interactive item swap anymore, so the prompt is misleading. */
  .gx-hint { display: none !important; }

  /* ══ BUY ROW (under caption) ══════════════════════════════════ */
  .gx-buyrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 6px 6px 6px 18px;
    background: rgba(10,8,5,.5);
    border: 1px solid rgba(247,201,72,.18);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    pointer-events: auto;
  }
  .gx-price {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(247,201,72,.4);
  }
  .gx-buy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--gold);
    color: #0a0805;
    border: 0;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .22em;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
    box-shadow: 0 0 20px -2px rgba(247,201,72,.45);
  }
  .gx-buy:hover { background: var(--gold-bright); transform: translateY(-1px); box-shadow: 0 0 28px -2px rgba(247,201,72,.7); }
  .gx-buy:active { transform: translateY(0); }
  .gx-buy svg { color: #0a0805; }

  /* ══ BUY MODAL ══════════════════════════════════════════════ */
  .buy-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    animation: bmFadeIn .25s ease both;
    font-family: var(--sans);
  }
  @keyframes bmFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .buy-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(4,3,8,.78);
    backdrop-filter: blur(14px);
  }
  .buy-modal__card {
    position: relative;
    width: min(640px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #14110b 0%, #0c0a08 100%);
    border: 1px solid rgba(247,201,72,.22);
    border-radius: 14px;
    padding: 36px 38px 30px;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,.9), 0 0 0 1px rgba(247,201,72,.06) inset, 0 0 60px -10px rgba(122,77,255,.18);
    animation: bmCardIn .35s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes bmCardIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
  .buy-modal__hero {
    margin: -36px -38px 22px;
    background:
      radial-gradient(60% 80% at 50% 40%, rgba(247,201,72,.06), transparent 70%),
      linear-gradient(180deg, #f5f3ee 0%, #e8e3d5 100%);
    border-bottom: 1px solid rgba(247,201,72,.18);
    padding: 28px 24px 20px;
    border-radius: 14px 14px 0 0;
    position: relative;
    overflow: hidden;
  }
  .buy-modal__hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    filter: drop-shadow(0 18px 20px rgba(0,0,0,.18));
    user-select: none;
  }
  @media (max-width: 520px) {
    .buy-modal__hero { margin: -28px -22px 18px; padding: 22px 16px 16px; border-radius: 10px 10px 0 0; }
    .buy-modal__hero img { max-height: 200px; }
  }

  .buy-modal__close {
    position: absolute; top: 14px; right: 16px;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid rgba(243,239,230,.15);
    border-radius: 50%;
    color: rgba(243,239,230,.6);
    font-size: 22px; line-height: 1;
    cursor: pointer;
    transition: all .15s ease;
  }
  .buy-modal__close:hover { color: var(--gold); border-color: rgba(247,201,72,.4); }

  .buy-modal__head { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(243,239,230,.08); }
  .buy-modal__kicker {
    font-family: var(--mono); font-size: 10px; font-weight: 500;
    letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 10px;
  }
  .buy-modal__title {
    font-family: var(--mono); font-weight: 800;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    letter-spacing: -.01em;
    color: var(--ink); margin: 0 0 12px;
    line-height: 1.15;
  }
  .buy-modal__price {
    display: inline-block;
    font-family: var(--mono); font-size: 18px; font-weight: 700;
    color: var(--gold-bright);
    background: rgba(247,201,72,.08);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(247,201,72,.22);
    margin-bottom: 12px;
  }
  .buy-modal__desc {
    font-family: var(--sans);
    color: rgba(243,239,230,.65);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
  }

  .buy-section {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: .3em; font-weight: 600;
    color: rgba(243,239,230,.4);
    text-transform: uppercase;
    margin: 22px 0 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(243,239,230,.06);
  }
  .buy-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 14px; }

  .buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 520px) { .buy-row { grid-template-columns: 1fr; } }
  .buy-field { display: flex; flex-direction: column; margin-bottom: 12px; }
  .buy-label {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(243,239,230,.55);
    margin-bottom: 6px;
  }
  .buy-req { color: var(--gold); margin-left: 2px; }
  .buy-field input, .buy-field select, .buy-field textarea {
    background: rgba(243,239,230,.04);
    border: 1px solid rgba(243,239,230,.12);
    color: var(--ink);
    padding: 10px 12px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 14px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    outline: none;
    width: 100%;
  }
  .buy-field input:focus, .buy-field select:focus, .buy-field textarea:focus {
    border-color: var(--gold);
    background: rgba(247,201,72,.04);
    box-shadow: 0 0 0 3px rgba(247,201,72,.12);
  }
  .buy-field textarea { resize: vertical; min-height: 56px; font-family: var(--sans); }

  .size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
  }
  .size-chip {
    background: rgba(243,239,230,.04);
    border: 1px solid rgba(243,239,230,.14);
    color: rgba(243,239,230,.7);
    padding: 9px 8px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
    text-align: center;
  }
  .size-chip:hover { border-color: rgba(247,201,72,.4); color: var(--ink); }
  .size-chip.is-on {
    background: var(--gold);
    color: #0a0805;
    border-color: var(--gold);
    box-shadow: 0 0 14px -3px rgba(247,201,72,.5);
  }

  .buy-error {
    background: rgba(255,80,80,.08);
    border: 1px solid rgba(255,80,80,.3);
    color: #ff9090;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 14px;
    font-family: var(--sans);
  }

  .buy-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(243,239,230,.08);
    flex-wrap: wrap;
  }
  .buy-total { display: flex; flex-direction: column; gap: 2px; }
  .buy-total__lbl {
    font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
    color: rgba(243,239,230,.45); text-transform: uppercase;
  }
  .buy-total__val {
    font-family: var(--mono); font-size: 22px; font-weight: 800;
    color: var(--gold-bright);
    text-shadow: 0 0 16px rgba(247,201,72,.4);
  }
  .buy-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gold);
    color: #0a0805;
    border: 0;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 12px; font-weight: 800; letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 0 24px -4px rgba(247,201,72,.55);
  }
  .buy-cta:hover { background: var(--gold-bright); box-shadow: 0 0 32px -2px rgba(247,201,72,.75); transform: translateY(-1px); }
  .buy-secondary {
    background: transparent;
    color: rgba(243,239,230,.6);
    border: 1px solid rgba(243,239,230,.16);
    padding: 11px 18px;
    border-radius: 999px;
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .18em;
    cursor: pointer;
    transition: all .15s ease;
  }
  .buy-secondary:hover { color: var(--ink); border-color: rgba(243,239,230,.32); }

  .buy-note {
    margin-top: 16px;
    font-family: var(--sans); font-size: 11.5px;
    color: rgba(243,239,230,.4);
    text-align: center;
    line-height: 1.5;
    font-style: italic;
  }

  .buy-review {
    display: flex; flex-direction: column; gap: 10px;
    background: rgba(243,239,230,.03);
    border: 1px solid rgba(243,239,230,.08);
    border-radius: 8px;
    padding: 18px;
  }
  .buy-review > div {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 14px;
    font-family: var(--sans); font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
  }
  .buy-review__k {
    font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(243,239,230,.45);
    padding-top: 2px;
  }

  .buy-done { text-align: center; padding: 12px 0 4px; }
  .buy-done__tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 78px; height: 78px;
    border-radius: 50%;
    background: rgba(45,212,191,.12);
    color: #2dd4bf;
    border: 1px solid rgba(45,212,191,.4);
    margin-bottom: 18px;
    box-shadow: 0 0 28px -5px rgba(45,212,191,.4);
  }
  .buy-done__txt {
    font-family: var(--sans); color: rgba(243,239,230,.7);
    font-size: 14px; line-height: 1.6;
    margin: 12px auto 22px;
    max-width: 420px;
  }
  .buy-done strong { color: var(--gold-bright); font-weight: 600; }

  @media (max-width: 520px) {
    .buy-modal__card { padding: 28px 22px 24px; max-height: 96vh; border-radius: 10px; }
    .buy-modal__title { font-size: 1.2rem; }
    .buy-foot { flex-direction: column; align-items: stretch; }
    .buy-cta, .buy-secondary { width: 100%; justify-content: center; }
  }
  .gx-hint-original { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,239,230,.4);
    display: flex; align-items: center; gap: 10px; opacity: 0; animation: hintIn .8s ease 1.4s forwards; }
  .gx-hint__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
  @keyframes hintIn { to { opacity: 1; } }