:root {
  --font-geist-sans: Arial;
  --font-geist-mono: "Courier New";
  --ink: #050106;
  --wine: #210318;
  --pink: #ff2da9;
  --hot-pink: #ff77c8;
  --violet: #7b31ff;
  --cyan: #80f8ff;
  --paper: #fff3fb;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ink); }

body {
  color: var(--paper);
  font-family: var(--font-geist-sans), "Arial Narrow", Arial, sans-serif;
  overflow: hidden;
}

button { color: inherit; font: inherit; }

.bar-world {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(206, 20, 132, .28), transparent 38%),
    radial-gradient(circle at 50% -10%, rgba(255, 51, 172, .23), transparent 42%),
    linear-gradient(180deg, #080107 0%, #16020f 55%, #040104 100%);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: .12;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

.ceiling-glow {
  position: absolute;
  z-index: 1;
  top: -22vh;
  left: 50%;
  width: 72vw;
  height: 48vh;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 56, 174, .25);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(255, 31, 160, .25), inset 0 -22px 80px rgba(255, 31, 160, .24);
}

.backbar { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.bottles { filter: drop-shadow(0 0 6px rgba(255, 40, 163, .5)); }

.lounge-funding {
  position: absolute;
  z-index: 42;
  top: clamp(12px, 2.2vh, 24px);
  left: clamp(12px, 1.8vw, 28px);
  display: grid;
  grid-template-columns: 45px 1fr;
  width: 226px;
  min-height: 72px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px 9px 7px;
  border: 1px solid rgba(255, 102, 198, .52);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background:
    linear-gradient(135deg, rgba(255, 42, 168, .12), transparent 40%),
    linear-gradient(180deg, rgba(34, 3, 26, .94), rgba(8, 1, 8, .96));
  box-shadow:
    0 13px 30px rgba(0, 0, 0, .48),
    0 0 22px rgba(255, 37, 164, .19),
    inset 0 0 0 1px rgba(255, 221, 244, .045);
  backdrop-filter: blur(8px) saturate(1.2);
}

.lounge-funding::before,
.lounge-funding::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.lounge-funding::before {
  inset: 4px;
  border: 1px solid rgba(255, 111, 203, .09);
  clip-path: inherit;
}

.lounge-funding::after {
  left: 9px;
  bottom: 6px;
  width: 39px;
  height: 8px;
  border-radius: 50%;
  background: #ff2da9;
  opacity: .3;
  filter: blur(7px);
}

.lounge-funding__sigil {
  display: block;
  width: 45px;
  height: 55px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 44, 170, .74));
}

.tip-orbit {
  stroke: #ff42b3;
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
  animation: tipOrbit 7s linear infinite;
  transform-origin: 27px 33px;
}

.tip-orbit--tilted {
  stroke: #8848ff;
  stroke-dasharray: 2 4;
  animation-direction: reverse;
  animation-duration: 5.4s;
}

.tip-p {
  stroke: #ffd9f1;
  stroke-width: 3.2;
  filter: drop-shadow(0 0 4px #ff2da9);
}

.tip-core {
  fill: #fff1fa;
  stroke: #ff2da9;
  stroke-width: 1;
  filter: drop-shadow(0 0 5px #ff2da9);
  animation: tipCore 1.7s ease-in-out infinite;
}

.lounge-funding__console { min-width: 0; }

.lounge-funding__console > p {
  margin: 0 0 6px;
  color: #ffcce9;
  font: 700 7px/1 var(--font-geist-mono), monospace;
  letter-spacing: .18em;
  white-space: nowrap;
}

.lounge-funding__console > p span { color: rgba(255, 170, 219, .48); }

.lounge-funding__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.lounge-funding__buttons a {
  position: relative;
  display: grid;
  min-height: 38px;
  place-content: center;
  padding: 5px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 123, 205, .42);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  color: #fff2fa;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(126, 14, 88, .85), rgba(38, 3, 29, .96));
  box-shadow: inset 0 1px 0 rgba(255, 227, 245, .1), 0 0 10px rgba(255, 35, 163, .12);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.lounge-funding__buttons a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .17) 48%, transparent 68%);
  transform: translateX(-145%);
  transition: transform .38s ease;
}

.lounge-funding__buttons small {
  color: #ff9bd5;
  font: 700 5px/1 var(--font-geist-mono), monospace;
  letter-spacing: .13em;
}

.lounge-funding__buttons strong {
  margin-top: 3px;
  font: 700 11px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .04em;
  text-shadow: 0 0 8px rgba(255, 83, 181, .78);
}

.lounge-funding__buttons a:hover,
.lounge-funding__buttons a:focus-visible {
  z-index: 1;
  border-color: #ffb7df;
  outline: none;
  background: linear-gradient(180deg, rgba(200, 24, 132, .92), rgba(61, 4, 43, .98));
  box-shadow: 0 0 19px rgba(255, 47, 168, .44), inset 0 1px 0 rgba(255, 238, 249, .19);
  transform: translateY(-1px);
}

.lounge-funding__buttons a:hover::after,
.lounge-funding__buttons a:focus-visible::after { transform: translateX(145%); }

.lounge-funding__buttons a:focus-visible { box-shadow: 0 0 0 2px #fff0fa, 0 0 22px rgba(255, 47, 168, .62); }
.lounge-funding ~ .topline .brand-mark { margin-left: 240px; }

@keyframes tipOrbit { to { transform: rotate(360deg); } }
@keyframes tipCore { 50% { opacity: .5; transform: scale(.72); transform-origin: 27px 33px; } }

.topline {
  position: absolute;
  z-index: 30;
  top: clamp(18px, 3.3vh, 40px);
  left: clamp(18px, 3vw, 48px);
  right: clamp(18px, 3vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  pointer-events: none;
}

.title-block { text-align: center; text-transform: uppercase; }
.title-block p { margin: 0 0 5px; color: rgba(255, 214, 242, .56); font: 500 9px/1 var(--font-geist-mono), monospace; letter-spacing: .48em; }
.title-block h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 2.3vw, 35px); font-weight: 400; letter-spacing: .24em; text-shadow: 0 0 9px #ff2da9, 0 0 28px rgba(255, 45, 169, .7); }

.brand-mark { display: flex; gap: 5px; align-items: center; }
.brand-mark i { display: block; width: 25px; height: 1px; background: var(--pink); box-shadow: 0 0 9px var(--pink); transform: rotate(60deg); }
.brand-mark i:nth-child(2) { width: 36px; }

.room-status { justify-self: end; color: rgba(255, 224, 244, .7); font: 600 9px/1 var(--font-geist-mono), monospace; letter-spacing: .2em; text-transform: uppercase; }
.room-status span { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #7affcb; box-shadow: 0 0 11px #7affcb; animation: statusPulse 2.2s ease-in-out infinite; }

.character-stage {
  position: absolute;
  z-index: 5;
  inset: clamp(88px, 12vh, 126px) 0 clamp(126px, 16vh, 175px);
  perspective: 1200px;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.character-stage:active { cursor: grabbing; }

.orbital-line {
  position: absolute;
  left: 50%;
  top: 51%;
  width: min(1040px, 82vw);
  height: min(310px, 30vh);
  transform: translate(-50%, -50%) rotateX(67deg);
  border: 1px solid rgba(255, 57, 174, .34);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 36, 161, .17), inset 0 0 16px rgba(255, 36, 161, .14);
}

.halo { position: absolute; left: 50%; top: 48%; border-radius: 50%; border: 1px solid rgba(255, 47, 170, .16); transform: translate(-50%, -50%); pointer-events: none; }
.halo-one { width: min(530px, 44vw); aspect-ratio: 1; animation: haloSpin 18s linear infinite; border-style: dashed; }
.halo-two { width: min(600px, 50vw); aspect-ratio: 1; opacity: .45; animation: haloSpin 30s linear infinite reverse; }

.character-card {
  --x: 0px;
  --z: 0px;
  --rotate: 0deg;
  --scale: 1;
  --opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: block;
  width: clamp(220px, 26vw, 390px);
  height: min(58vh, 590px);
  padding: 0;
  border: 0;
  background: transparent;
  opacity: var(--opacity);
  transform: translate(-50%, -50%) translateX(var(--x)) translateZ(var(--z)) rotateY(var(--rotate)) scale(var(--scale));
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.2,.78,.18,1), opacity .55s ease, filter .55s ease;
  filter: saturate(.74) brightness(.52);
  cursor: pointer;
  outline: none;
}

.character-card[data-position="-1"] { --x: clamp(-430px, -29vw, -290px); --z: -250px; --rotate: 21deg; --scale: .82; z-index: 2; }
.character-card[data-position="1"]  { --x: clamp(290px, 29vw, 430px); --z: -250px; --rotate: -21deg; --scale: .82; z-index: 2; }
.character-card[data-position="-2"] { --x: clamp(-680px, -45vw, -440px); --z: -490px; --rotate: 31deg; --scale: .64; --opacity: .56; z-index: 1; }
.character-card[data-position="2"]  { --x: clamp(440px, 45vw, 680px); --z: -490px; --rotate: -31deg; --scale: .64; --opacity: .56; z-index: 1; }
.character-card[data-position="-3"], .character-card[data-position="3"] { --x: 0px; --z: -760px; --scale: .46; --opacity: 0; pointer-events: none; z-index: 0; }
.character-card.is-active { --z: 80px; --scale: 1; z-index: 6; filter: saturate(1.12) brightness(1.03); }
.character-card.is-locked {
  filter: grayscale(.78) saturate(.34) brightness(.24);
  cursor: not-allowed;
}
.character-card.is-locked .portrait-shell {
  border-color: rgba(118, 62, 103, .34);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .88);
}
.character-card.is-locked .portrait-shell::after {
  content: "◇";
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(255, 65, 176, .4);
  background: rgba(8, 0, 7, .82);
  color: rgba(255, 103, 192, .5);
  font: 700 19px/1 var(--font-geist-mono), monospace;
  text-shadow: 0 0 10px #ff2da9;
}
.character-card.is-lock-denied { animation: lockDenied .48s steps(4, end); }
.character-card.is-locked .card-label { border-color: rgba(103, 57, 89, .32); }
.character-card.is-locked .card-label em { color: rgba(255, 83, 183, .5); }
.character-card:focus-visible .portrait-shell { box-shadow: 0 0 0 2px var(--cyan), 0 0 42px rgba(128, 248, 255, .5); }

.portrait-shell {
  position: relative;
  display: block;
  width: 100%;
  height: calc(100% - 55px);
  overflow: hidden;
  border: 1px solid rgba(255, 106, 194, .48);
  border-radius: 50% 50% 8px 8px / 12% 12% 8px 8px;
  clip-path: polygon(7% 0, 93% 0, 100% 6%, 100% 94%, 93% 100%, 7% 100%, 0 94%, 0 6%);
  background: #16010f;
  box-shadow: 0 0 20px rgba(255, 33, 159, .22), inset 0 0 24px #14010e;
  transition: box-shadow .55s ease, border-color .55s ease;
}
.is-active .portrait-shell { border-color: rgba(255, 151, 216, .92); box-shadow: 0 0 15px rgba(255, 45, 169, .75), 0 0 55px rgba(255, 33, 157, .36), inset 0 0 22px rgba(255, 19, 146, .18); }
.portrait-shell img,
.portrait-shell .holo-asset { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--portrait-position); border: 0; pointer-events: none; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease, opacity .46s ease; }
.is-active .portrait-shell img,
.is-active .portrait-shell .holo-asset { transform: scale(1.025); }
.character-card:hover .portrait-shell img,
.character-card:hover .portrait-shell .holo-asset { transform: scale(1.05); }

.brikney-original-portrait { z-index: 1; opacity: 1; }
.brikney-guardian-portrait {
  z-index: 2;
  opacity: 0;
  object-position: 50% 50% !important;
  filter: saturate(.76) brightness(.38) contrast(1.22);
}
.brikney-fight-portrait {
  z-index: 3;
  opacity: 0;
  object-position: 50% 50% !important;
  filter: saturate(.9) brightness(.5) contrast(1.2);
}
.character-card.is-brikney-guardian .brikney-original-portrait { opacity: 0; }
.character-card.is-brikney-guardian .brikney-guardian-portrait {
  opacity: 1;
  filter: saturate(1.18) brightness(.92) contrast(1.13) drop-shadow(0 0 8px rgba(130, 78, 255, .42));
  animation: guardianReveal .62s steps(5, end) both;
}
.character-card.is-brikney-guardian .portrait-shell {
  border-color: rgba(179, 111, 255, .92);
  box-shadow: 0 0 18px rgba(255, 43, 170, .72), 0 0 58px rgba(113, 71, 255, .42), inset 0 0 24px rgba(86, 45, 201, .22);
}
.character-card.is-brikney-fight .brikney-guardian-portrait {
  opacity: 0;
  animation: none;
}
.character-card.is-brikney-fight .brikney-fight-portrait {
  opacity: 1;
  filter: saturate(1.18) brightness(.94) contrast(1.11) drop-shadow(0 0 10px rgba(255, 78, 193, .5));
  animation: fightReveal .68s steps(6, end) both;
}

.character-card.is-speaking .portrait-shell {
  animation: speakingPulse .48s ease-in-out infinite alternate;
}

.hologram-card .portrait-shell {
  --projector-cut: 20%;
  background: #070414;
  border-color: rgba(111, 244, 255, .45);
}
.hologram-card .holo-figure {
  z-index: 1;
  clip-path: inset(0 0 var(--projector-cut));
  opacity: 1;
  background: transparent;
}
.holo-projector-base {
  z-index: 3;
  clip-path: inset(calc(100% - var(--projector-cut)) 0 0);
  opacity: 1;
  mix-blend-mode: normal;
  filter: saturate(1.04) contrast(1.04) brightness(.94);
}
.hologram-card.is-hologram-loading .holo-figure { visibility: hidden; }
.hologram-card.is-materializing .holo-figure { animation: none; }
.hologram-card.is-materializing .holo-projector-base {
  clip-path: inset(calc(100% - var(--projector-cut)) 0 0);
  opacity: 1;
  filter: saturate(1.04) contrast(1.04) brightness(.94);
  animation: none;
}
.portrait-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 61%, rgba(10, 0, 8, .86) 100%), linear-gradient(90deg, rgba(10,0,9,.28), transparent 18%, transparent 82%, rgba(10,0,9,.28)); pointer-events: none; }
.portrait-scan { position: absolute; inset: 0; opacity: .26; pointer-events: none; mix-blend-mode: screen; background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(255, 125, 209, .16) 5px, transparent 6px); animation: scanShift 8s linear infinite; }
.hologram-card .portrait-scan { z-index: 4; bottom: var(--projector-cut); }
.hologram-card .corner { z-index: 6; }

.corner { position: absolute; z-index: 3; width: 19px; height: 19px; border-color: var(--hot-pink); border-style: solid; filter: drop-shadow(0 0 4px var(--pink)); }
.corner-tl { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.corner-tr { top: 10px; right: 10px; border-width: 1px 1px 0 0; }
.corner-bl { bottom: 10px; left: 10px; border-width: 0 0 1px 1px; }
.corner-br { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; }

.card-label {
  position: absolute;
  left: 50%;
  bottom: 2px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 12px;
  align-items: center;
  min-width: 82%;
  padding: 8px 15px 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 59, 174, .34);
  background: rgba(7, 1, 6, .88);
  box-shadow: 0 0 18px rgba(255, 36, 161, .18);
  text-align: left;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.card-label small { grid-row: 1 / 3; color: var(--pink); font: 600 8px/1 var(--font-geist-mono), monospace; letter-spacing: .14em; }
.card-label strong { text-transform: uppercase; font: 500 clamp(13px, 1.25vw, 18px)/1 Georgia, serif; letter-spacing: .17em; }
.card-label em { color: rgba(255, 205, 238, .44); font: normal 600 7px/1 var(--font-geist-mono), monospace; letter-spacing: .28em; }
.is-active .card-label { border-color: rgba(255, 105, 195, .8); }
.is-active .card-label em { color: var(--cyan); text-shadow: 0 0 6px rgba(128, 248, 255, .8); }

.voice-caption {
  position: absolute;
  z-index: 12;
  top: 8px;
  left: 50%;
  display: grid;
  min-width: min(350px, 74vw);
  padding: 9px 24px 10px;
  transform: translate(-50%, -8px);
  border-top: 1px solid rgba(255, 95, 192, .56);
  border-bottom: 1px solid rgba(255, 95, 192, .25);
  background: linear-gradient(90deg, transparent, rgba(16, 1, 14, .88) 15%, rgba(16, 1, 14, .88) 85%, transparent);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity .25s ease, transform .25s ease;
}
.voice-caption.is-visible { opacity: 1; transform: translate(-50%, 0); }
.voice-caption small { color: var(--pink); font: 600 7px/1 var(--font-geist-mono), monospace; letter-spacing: .27em; }
.voice-caption strong { margin-top: 5px; color: white; font: 400 clamp(12px, 1.2vw, 16px)/1.2 Georgia, serif; letter-spacing: .12em; text-shadow: 0 0 9px rgba(255, 75, 184, .7); }
.voice-caption.is-waiting { border-color: rgba(121, 246, 255, .58); }
.voice-caption.is-waiting small, .voice-caption.is-waiting strong { color: #b8fcff; text-shadow: 0 0 9px #59efff; }

.brikney-gameplay {
  position: absolute;
  z-index: 42;
  left: 50%;
  bottom: clamp(2px, 1.5vh, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 76px;
  transform: translate(-50%, 14px) scale(.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.9,.2,1.2);
}
.brikney-gameplay.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.brikney-pastille {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 96px;
  height: 48px;
  padding: 0 17px;
  border: 1px solid rgba(255, 185, 226, .88);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #ff9bd4, #f32191 44%, #7d064a 100%);
  color: white;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.28), inset 0 -8px 14px rgba(65,0,39,.38), 0 0 18px rgba(255,45,169,.58);
  cursor: pointer;
  text-transform: uppercase;
  font: 800 11px/1 var(--font-geist-mono), monospace;
  letter-spacing: .12em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.brikney-pastille::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: inherit;
  pointer-events: none;
}
.brikney-pastille:hover,
.brikney-pastille:focus-visible {
  transform: translateY(-2px) scale(1.04);
  outline: none;
  filter: brightness(1.14);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.35), 0 0 25px rgba(255,62,180,.9);
}
.brikney-confirm {
  min-width: 62px;
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  font: 800 27px/1 Arial, sans-serif;
  animation: validationPulse 1.15s ease-in-out infinite;
}
.brikney-fight {
  background: radial-gradient(circle at 35% 25%, #ffadc8, #fa205e 46%, #700524 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.28), inset 0 -8px 14px rgba(65,0,24,.4), 0 0 20px rgba(255,37,104,.62);
}
.brikney-run {
  border-color: rgba(164, 255, 244, .84);
  background: radial-gradient(circle at 35% 25%, #ffa1d8, #d8178e 48%, #340a44 100%);
  color: #ddfffb;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.24), inset 0 -8px 14px rgba(25,0,43,.42), 0 0 20px rgba(107,247,235,.36);
}

.germain-gameplay {
  position: absolute;
  z-index: 43;
  left: 50%;
  bottom: clamp(2px, 1.5vh, 18px);
  display: grid;
  min-height: 76px;
  place-items: center;
  transform: translate(-50%, 14px) scale(.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.9,.2,1.2);
}

.germain-gameplay.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.germain-deal {
  position: relative;
  min-width: 112px;
  height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(155, 247, 255, .9);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: #eaffff;
  background: linear-gradient(145deg, rgba(54, 29, 137, .98), rgba(147, 10, 112, .94) 56%, rgba(31, 4, 46, .99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 13px rgba(109, 238, 255, .45), 0 0 29px rgba(255, 41, 169, .4);
  cursor: pointer;
  font: 800 11px/1 var(--font-geist-mono), monospace;
  letter-spacing: .2em;
  text-indent: .2em;
  text-shadow: 0 0 8px #7df7ff;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  animation: dealSignal 1.2s steps(2, end) infinite;
}

.germain-deal::before,
.germain-deal::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.germain-deal::before { inset: 5px; border: 1px solid rgba(255, 190, 231, .18); clip-path: inherit; }
.germain-deal::after { left: 15px; right: 15px; bottom: 7px; height: 1px; background: linear-gradient(90deg, transparent, #7df7ff, transparent); }
.germain-deal:hover,
.germain-deal:focus-visible { outline: none; filter: brightness(1.2); transform: translateY(-2px) scale(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 21px rgba(109, 238, 255, .72), 0 0 36px rgba(255, 41, 169, .58); }

@keyframes dealSignal { 50% { text-shadow: 0 0 4px #7df7ff, 0 0 16px #ff2da9; } }

.counter { position: absolute; z-index: 8; left: 0; right: 0; bottom: -2px; height: clamp(120px, 17vh, 180px); pointer-events: none; filter: drop-shadow(0 -8px 32px rgba(255, 24, 151, .23)); }
.counter svg { display: block; width: 100%; height: 100%; }

.jukebox {
  position: absolute;
  z-index: 36;
  left: clamp(16px, 2.2vw, 34px);
  bottom: clamp(18px, 2.8vh, 30px);
  width: 286px;
  color: #fff4fb;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .58)) drop-shadow(0 0 18px rgba(255, 30, 158, .24));
  user-select: none;
}

.juke-lid {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 39px;
  padding: 0 13px;
  border: 1px solid rgba(255, 164, 218, .72);
  border-bottom-color: rgba(107, 0, 66, .8);
  border-radius: 20px 20px 7px 7px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.45), transparent 11% 74%, rgba(255,255,255,.2)),
    linear-gradient(180deg, #ff7ac7 0%, #ea168c 45%, #7c064c 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.38), inset 0 -6px 13px rgba(73,0,44,.48), 0 0 0 3px rgba(255, 34, 160, .09);
}
.juke-lid::after { content: ""; position: absolute; inset: 5px 9px auto; height: 1px; background: rgba(255,255,255,.42); }
.juke-lid div { display: grid; line-height: 1; }
.juke-lid small { font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .34em; }
.juke-lid strong { margin-top: 3px; font: 700 9px/1 var(--font-geist-mono), monospace; letter-spacing: .13em; }
.juke-serial { margin-left: auto; color: rgba(67, 0, 39, .62); font: 700 7px/1 var(--font-geist-mono), monospace; }
.juke-signal { width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; background: #6d073f; box-shadow: inset 0 0 5px #250016; }
.jukebox.is-playing .juke-signal { background: #9dffef; box-shadow: 0 0 8px #78ffe9, inset 0 0 3px white; }

.juke-body {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  min-height: 137px;
  padding: 11px 12px 12px;
  border: 1px solid rgba(255, 99, 190, .65);
  border-top: 0;
  border-radius: 6px 6px 21px 21px;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(125deg, #ee218e, #8b0751 52%, #390222);
  box-shadow: inset 0 0 0 4px rgba(52,0,31,.22), inset 0 -13px 18px rgba(28,0,17,.46);
}

.disc-bay { position: relative; min-height: 112px; border: 1px solid rgba(74,0,44,.72); border-radius: 45px 45px 15px 15px; background: radial-gradient(circle at 50% 38%, #5d0739 0 31%, #270016 32% 48%, #9f0d60 49% 53%, #390022 54%); box-shadow: inset 0 0 15px #1e0013, 0 1px 0 rgba(255,255,255,.22); overflow: hidden; }
.juke-disc { position: absolute; z-index: 2; top: 11px; left: 50%; width: 68px; height: 68px; transform: translateX(-50%); border: 1px solid rgba(255, 119, 200, .76); border-radius: 50%; background: repeating-radial-gradient(circle, #10000b 0 3px, #3d092b 4px 5px, #080007 6px 8px); box-shadow: 0 0 12px rgba(255, 42, 164, .42); }
.juke-disc::before { content: ""; position: absolute; inset: 27%; border-radius: 50%; background: radial-gradient(circle, #12000b 0 15%, #ff5eb9 17% 60%, #5a0735 63%); box-shadow: 0 0 7px #ff3ca9; }
.juke-disc i, .juke-disc span { position: absolute; inset: 6px; border-radius: 50%; border-top: 1px solid rgba(255,255,255,.16); }
.juke-disc span { inset: 14px; border-color: rgba(255, 62, 172, .38); }
.disc-mouth { position: absolute; z-index: 3; left: 8px; right: 8px; top: 65px; height: 14px; border-radius: 50%; background: #100008; box-shadow: inset 0 3px 4px #000, 0 -1px 0 rgba(255,120,201,.38); }
.alien-eye { position: absolute; z-index: 4; left: 50%; bottom: 8px; width: 32px; height: 17px; transform: translateX(-50%); border: 1px solid rgba(255, 139, 210, .6); border-radius: 50% 50% 42% 42%; background: #31001d; box-shadow: inset 0 0 7px #080005; }
.alien-eye i { position: absolute; top: 4px; left: 12px; width: 6px; height: 6px; border-radius: 50%; background: #fca8db; box-shadow: 0 0 6px #ff5ebc; }
.jukebox.is-playing .juke-disc { animation: discSpin 2.4s linear infinite; }
.jukebox.is-playing .disc-mouth { animation: mouthPulse 1.2s ease-in-out infinite alternate; }
.jukebox.is-playing .alien-eye i { background: #7dffed; box-shadow: 0 0 8px #74ffe9; }

.juke-console { min-width: 0; display: grid; gap: 7px; align-content: start; }
.juke-display { position: relative; display: grid; min-height: 42px; padding: 7px 8px 6px; border: 1px solid rgba(255, 111, 197, .45); border-radius: 4px; background: linear-gradient(180deg, #14000d, #29001b); box-shadow: inset 0 0 10px #060004; overflow: hidden; }
.juke-display::after { content: ""; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(180deg, transparent 0 2px, #ff61bd 3px, transparent 4px); pointer-events: none; }
.juke-display span { color: #ff69bc; font: 700 5px/1 var(--font-geist-mono), monospace; letter-spacing: .22em; }
.juke-display strong { margin-top: 3px; overflow: hidden; color: #fff; font: 700 10px/1 var(--font-geist-mono), monospace; letter-spacing: .17em; text-overflow: ellipsis; }
.juke-display small { position: absolute; right: 6px; top: 6px; color: rgba(255, 183, 224, .55); font: 500 5px/1 var(--font-geist-mono), monospace; }
.jukebox.is-playing .juke-display strong { color: #b9fff7; text-shadow: 0 0 6px rgba(119,255,238,.7); }

.juke-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.juke-tracks button { height: 23px; padding: 0 5px; border: 1px solid rgba(255, 132, 204, .32); border-radius: 3px; background: linear-gradient(180deg, rgba(78,0,45,.82), rgba(27,0,17,.88)); color: rgba(255, 217, 239, .7); cursor: pointer; text-align: left; font: 700 6px/1 var(--font-geist-mono), monospace; letter-spacing: .09em; transition: .18s ease; }
.juke-tracks button span { margin-right: 5px; color: #ff47a9; }
.juke-tracks button:hover, .juke-tracks button:focus-visible { border-color: #ff79c5; color: white; outline: none; box-shadow: 0 0 8px rgba(255,45,169,.34); }
.juke-tracks button.is-active { border-color: #9affef; color: #d9fffa; background: linear-gradient(180deg, rgba(27,93,87,.52), rgba(15,21,27,.88)); box-shadow: inset 0 0 7px rgba(108,255,236,.16), 0 0 6px rgba(108,255,236,.2); }

.juke-transport { display: flex; align-items: center; gap: 7px; }
.juke-transport button { flex: 0 0 24px; width: 24px; height: 22px; padding: 0; border: 1px solid rgba(255, 143, 210, .5); border-radius: 50%; background: #3a0224; color: white; cursor: pointer; font: 700 9px/1 Arial, sans-serif; box-shadow: inset 0 0 6px #12000b; }
.juke-transport button:hover, .juke-transport button:focus-visible { border-color: #a5fff1; outline: none; box-shadow: 0 0 8px rgba(135,255,238,.38); }
.juke-progress { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(22,0,14,.82); box-shadow: inset 0 0 3px #000; }
.juke-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff33a4, #a7fff2); box-shadow: 0 0 5px #ff49ad; transition: width .2s linear; }

.navigation-panel {
  position: absolute;
  z-index: 32;
  left: 50%;
  bottom: clamp(21px, 3.5vh, 38px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  transform: translateX(-50%);
  white-space: nowrap;
}

.nav-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 76, 183, .42);
  background: rgba(12, 1, 10, .78);
  color: var(--hot-pink);
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.nav-arrow:hover, .nav-arrow:focus-visible { background: rgba(255, 37, 161, .2); color: white; box-shadow: 0 0 16px rgba(255, 37, 161, .42); outline: none; }

.active-info { display: flex; align-items: center; gap: 13px; min-width: 220px; }
.active-info > span { color: var(--pink); font: 600 9px/1 var(--font-geist-mono), monospace; letter-spacing: .15em; }
.active-info div { display: grid; gap: 3px; }
.active-info strong { font: 400 14px/1 Georgia, serif; text-transform: uppercase; letter-spacing: .16em; }
.active-info small { color: rgba(255, 214, 240, .48); font: 500 7px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .13em; }

.character-dots { display: flex; gap: 7px; }
.character-dots button { width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255, 74, 182, .22); background: rgba(7, 1, 6, .82); color: rgba(255, 219, 241, .48); transform: rotate(45deg); cursor: pointer; transition: .25s ease; }
.character-dots button span { display: block; transform: rotate(-45deg); font: 600 8px/1 var(--font-geist-mono), monospace; }
.character-dots button:hover, .character-dots button:focus-visible { border-color: var(--hot-pink); color: white; outline: none; }
.character-dots button.is-active { background: var(--pink); color: white; box-shadow: 0 0 15px rgba(255, 42, 165, .8); }
.character-dots button:disabled { border-color: rgba(89, 45, 74, .3); color: rgba(255, 192, 225, .16); cursor: not-allowed; filter: grayscale(1); }

.instructions { position: absolute; z-index: 32; right: clamp(18px, 3vw, 48px); bottom: clamp(27px, 4.2vh, 46px); margin: 0; color: rgba(255, 213, 239, .34); font: 500 8px/1 var(--font-geist-mono), monospace; letter-spacing: .17em; text-transform: uppercase; }

@keyframes haloSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes scanShift { to { background-position-y: 80px; } }
@keyframes statusPulse { 50% { opacity: .32; } }
@keyframes speakingPulse { from { box-shadow: 0 0 15px rgba(255,45,169,.55), inset 0 0 22px rgba(255,19,146,.12); } to { box-shadow: 0 0 24px rgba(255,120,205,.95), 0 0 58px rgba(255,33,157,.44), inset 0 0 32px rgba(255,68,177,.24); } }
@keyframes validationPulse { 50% { transform: scale(1.08); box-shadow: inset 0 2px 2px rgba(255,255,255,.35), 0 0 30px rgba(255,45,169,.92); } }
@keyframes guardianReveal { 0% { opacity: 0; filter: brightness(2.4) saturate(1.8) hue-rotate(28deg); } 34% { opacity: .28; } 52% { opacity: .9; } 68% { opacity: .4; } 100% { opacity: 1; filter: saturate(1.18) brightness(.92) contrast(1.13) drop-shadow(0 0 8px rgba(130, 78, 255, .42)); } }
@keyframes fightReveal { 0% { opacity: 0; filter: brightness(3) saturate(2.2) hue-rotate(-28deg); } 24% { opacity: .92; } 38% { opacity: .2; } 52% { opacity: 1; } 66% { opacity: .46; } 100% { opacity: 1; filter: saturate(1.18) brightness(.94) contrast(1.11) drop-shadow(0 0 10px rgba(255, 78, 193, .5)); } }
@keyframes lockDenied { 0%, 100% { translate: 0; } 25% { translate: -8px; filter: brightness(.55) saturate(.9); } 50% { translate: 7px; } 75% { translate: -4px; } }
@keyframes discSpin { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes mouthPulse { to { box-shadow: inset 0 5px 8px #000, 0 -1px 0 rgba(255,159,219,.68), 0 0 8px rgba(255,42,165,.3); } }

@media (max-width: 760px) {
  .lounge-funding {
    top: 7px;
    left: 7px;
    grid-template-columns: 24px 1fr;
    width: 94px;
    min-height: 53px;
    gap: 3px;
    padding: 4px 4px 5px 3px;
  }
  .lounge-funding__sigil { width: 24px; height: 36px; }
  .lounge-funding__console > p { margin-bottom: 3px; font-size: 0; }
  .lounge-funding__console > p::before { content: "TIP"; font-size: 6px; letter-spacing: .14em; }
  .lounge-funding__console > p span { display: none; }
  .lounge-funding__buttons { gap: 3px; }
  .lounge-funding__buttons a { min-height: 29px; padding: 3px 2px; }
  .lounge-funding__buttons small { display: none; }
  .lounge-funding__buttons strong { margin: 0; font: 700 7px/1 var(--font-geist-mono), monospace; letter-spacing: -.03em; }
  .lounge-funding ~ .topline .brand-mark { display: none; }
  .topline { left: 108px; right: 9px; grid-template-columns: 1fr 24px; }
  .room-status { font-size: 0; }
  .room-status span { margin: 0; }
  .title-block p { font-size: 7px; letter-spacing: .25em; }
  .title-block h1 { font-size: 18px; letter-spacing: .16em; }
  .character-stage { top: 80px; bottom: 135px; }
  .character-card { width: min(72vw, 330px); height: min(58vh, 520px); }
  .character-card[data-position="-1"] { --x: -64vw; --z: -320px; --rotate: 24deg; --scale: .7; --opacity: .48; }
  .character-card[data-position="1"] { --x: 64vw; --z: -320px; --rotate: -24deg; --scale: .7; --opacity: .48; }
  .character-card[data-position="-2"], .character-card[data-position="2"] { --opacity: 0; pointer-events: none; }
  .halo-one { width: 94vw; }
  .halo-two { width: 108vw; }
  .active-info { min-width: 0; }
  .active-info > span, .active-info small, .instructions { display: none; }
  .active-info strong { font-size: 12px; }
  .character-dots { display: none; }
  .navigation-panel { width: calc(100% - 36px); justify-content: space-between; }
  .voice-caption { top: 0; min-width: min(310px, 80vw); padding-inline: 16px; }
  .brikney-gameplay { bottom: 0; gap: 10px; min-height: 66px; }
  .brikney-pastille { min-width: 82px; height: 42px; padding-inline: 13px; font-size: 9px; }
  .brikney-confirm { min-width: 54px; width: 54px; height: 54px; font-size: 23px; }
  .germain-gameplay { bottom: 0; min-height: 66px; }
  .germain-deal { min-width: 94px; height: 44px; padding-inline: 15px; font-size: 9px; }
  .jukebox { top: 74px; bottom: auto; left: 7px; width: 150px; filter: drop-shadow(0 7px 14px rgba(0,0,0,.55)); }
  .juke-lid { height: 28px; padding-inline: 8px; border-radius: 14px 14px 5px 5px; }
  .juke-lid small, .juke-serial, .juke-signal { display: none; }
  .juke-lid strong { margin: 0; font-size: 7px; }
  .juke-body { display: block; min-height: 0; padding: 6px; border-radius: 4px 4px 13px 13px; }
  .disc-bay { display: none; }
  .juke-display { min-height: 31px; padding: 5px 6px; }
  .juke-display strong { font-size: 8px; }
  .juke-tracks { gap: 3px; margin-top: 4px; }
  .juke-tracks button { height: 18px; font-size: 5px; }
  .juke-transport { margin-top: 4px; }
  .juke-transport button { width: 20px; height: 19px; flex-basis: 20px; }
}

@media (max-height: 680px) and (min-width: 761px) {
  .character-stage { top: 78px; bottom: 108px; }
  .character-card { height: 500px; width: 310px; }
  .navigation-panel { bottom: 16px; }
  .instructions { bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .character-card { transition-duration: .01ms; }
}