:root {
  --ink: #1a0f2e;
  --purple: #3b1d6e;
  --purple-deep: #22103f;
  --yellow: #ffd23f;
  --pink: #ff4f9a;
  --cyan: #35e0ff;
  --cream: #fff6e5;
  --green: #5ed64b;
  --display: "Quicksand", "Impact", "Arial Black", sans-serif;
  --body: "Quicksand", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--body);
  color: var(--cream);
  background: var(--purple-deep);
  overflow: hidden;
  display: flex; flex-direction: column;
  user-select: none;
}
.hidden { display: none !important; }

/* #bg (Studio Lights) and the lighting tokens live in /shared/studio.css */

/* the marquee title treatment: chunky pink/ink slab + a warm bloom behind it */
.gate-title, .join-code {
  text-shadow: 0 .06em 0 var(--pink), 0 .12em 0 var(--ink), 0 .2em .25em rgba(10,4,24,.55), 0 0 .6em rgba(255,210,63,.35);
}

/* ---------- gate ---------- */
#gate { position: fixed; inset: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(59,29,110,.82), rgba(14,5,30,.96)); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 50; }
.gate-card { text-align: center; }
.gate-title { font-family: var(--display); font-size: 9vw; color: var(--yellow); margin-bottom: 30px; letter-spacing: .02em; text-shadow: 0 .08em 0 var(--pink), 0 .16em 0 var(--ink), 0 .26em .3em rgba(10,4,24,.6), 0 0 .7em rgba(255,210,63,.4); }
.gate-sub { margin-top: 18px; opacity: .7; font-weight: 700; }
.gate-kicker { font-family: var(--display); font-size: 2.6vw; letter-spacing: .14em; color: var(--cyan); text-shadow: 0 .08em 0 var(--ink); margin-bottom: -1vw; }
.gate-tag { font-weight: 900; font-size: 1.5vw; margin: -14px 0 34px; opacity: .9; }
.menu-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.menu-btn {
  font-family: var(--display); font-size: 1.25vw; letter-spacing: .06em; color: var(--cream);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 2px solid rgba(255,255,255,.22); border-radius: 999px; padding: 12px 26px; cursor: pointer;
  transition: transform .08s, background .2s, border-color .2s;
}
.menu-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.09)); border-color: rgba(255,255,255,.45); transform: translateY(-1px); }
.menu-btn:active { transform: translateY(2px); }
.gate-card.how { max-width: 52vw; text-align: left; background: rgba(14,5,30,.55); border: 2px solid rgba(255,255,255,.14); border-radius: 28px; padding: 34px 44px; }
.how-title { font-family: var(--display); font-size: 3.4vw; color: var(--yellow); text-shadow: 0 .08em 0 var(--pink), 0 .14em 0 var(--ink); margin-bottom: 14px; text-align: center; }
.how-list { font-size: 1.35vw; line-height: 1.5; padding-left: 1.4em; margin: 0 0 26px; }
.how-list li { margin-bottom: 8px; }
.how-list b { color: var(--cyan); }
.gate-card.how .menu-btn { display: block; margin: 0 auto; }
.big-btn {
  font-family: var(--display); font-size: 2.2vw; letter-spacing: .04em;
  background: var(--gloss), linear-gradient(180deg, var(--pink-top), var(--pink) 50%, var(--pink-low));
  color: #fff; text-shadow: 0 2px 0 rgba(120,10,60,.45); border: 0; border-radius: 999px;
  padding: 22px 48px; cursor: pointer;
  box-shadow: var(--rim), 0 8px 0 var(--pink-slab), var(--ambient), 0 10px 50px -8px rgba(255,79,154,.7);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.big-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.big-btn:active { transform: translateY(6px); box-shadow: var(--rim), 0 2px 0 var(--pink-slab), 0 6px 20px -6px rgba(255,79,154,.6); }

/* ---------- top bar ---------- */
#topbar { display: flex; gap: 14px; align-items: center; padding: 18px 28px; }
.spacer { flex: 1; }
/* the round pill and timer are styled in game.css */
.icon-btn {
  font-family: var(--display); font-size: 1vw; color: var(--cream); border-radius: 999px; padding: 10px 18px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px -6px rgba(10,4,24,.7);
  transition: background .2s, border-color .2s;
}
.icon-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.09)); border-color: rgba(255,255,255,.4); }

/* ---------- stage ---------- */
#stage { flex: 1; position: relative; min-height: 0; }
/* bottom 24vh is the host's lane (blob + bubble), content stays above it */
.screen { position: absolute; inset: 0 0 22vh 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 0 4vw 0 4vw; }
.screen.active { display: flex; animation: screenIn .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes screenIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* lobby */
.join-box { text-align: center; }
.join-label { font-family: var(--display); letter-spacing: .12em; font-size: 1.4vw; opacity: .75; }
.join-url { font-family: var(--display); font-size: 4.2vw; color: var(--cyan); margin: 4px 0 24px; text-shadow: 0 .06em 0 var(--ink), 0 0 .5em rgba(53,224,255,.45); }
.join-url, .join-code { user-select: text; cursor: copy; }
.copied-tip { display: block; font-family: var(--display); font-size: 1.2vw; letter-spacing: .1em; color: var(--green); text-shadow: none; height: 0; overflow: visible; opacity: 0; transition: opacity .2s; }
.copied-tip.show { opacity: 1; }
.join-code { font-family: var(--display); font-size: 9vw; letter-spacing: .18em; color: var(--yellow); line-height: 1; margin-top: 6px; }
.lobby-players { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; max-width: 70vw; }
.lobby-chip { font-family: var(--display); font-size: 1.8vw; background: linear-gradient(180deg, var(--cream-top), var(--cream-low)); color: var(--ink); padding: 12px 24px; border-radius: 18px; box-shadow: var(--rim), 0 6px 0 rgba(0,0,0,.35), var(--ambient); animation: chipIn .4s cubic-bezier(.2,.9,.3,1.4); position: relative; }
.lobby-chip.vip::after { content: "VIP"; position: absolute; top: -12px; right: -10px; background: var(--gloss), linear-gradient(180deg, var(--pink-top), var(--pink-low)); color: #fff; font-size: .55em; padding: 3px 8px; border-radius: 999px; transform: rotate(8deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 var(--pink-slab), 0 0 14px rgba(255,79,154,.6); }
@keyframes chipIn { from { transform: scale(0) rotate(-10deg); } to { transform: none; } }
.lobby-hint { margin-top: 26px; font-weight: 900; font-size: 1.4vw; opacity: .8; }

/* the game screens (title cards, showdown, scoreboard, final, player footer) live in game.css */

/* ---------- THE HOST ---------- */
#host { position: fixed; left: 2vw; bottom: 0; width: 15vw; z-index: 20; display: flex; flex-direction: column; align-items: center; transition: transform .45s cubic-bezier(.3,.9,.3,1.15); }
#host.offstage { transform: translateX(-140%); transition: transform .4s cubic-bezier(.6,-.2,.8,.6); }
/* walking on and off (host.js): the walk cycle below, at a stroll; he turns round to leave */
#host.walking { transition: transform .95s cubic-bezier(.35,.1,.3,1); }
#host.walking.offstage { transition: transform .8s cubic-bezier(.5,0,.8,.6); }
#host.leaving #blob-wrap { transform: scaleX(-1); }
#blob-wrap { width: 100%; position: relative; }
#blob { width: 100%; display: block; transform-origin: 50% 90%; animation: idle 2.6s ease-in-out infinite; }
#host.talking #blob { animation: talk .22s ease-in-out infinite alternate; }
#host.excited #blob { animation: hop .32s cubic-bezier(.3,.9,.4,1.2) infinite alternate; }
@keyframes idle { 0%,100% { transform: scale(1,1) translateY(0); } 50% { transform: scale(1.03,.97) translateY(2px); } }
@keyframes talk { from { transform: scale(1.04,.96) rotate(-2.5deg) translateY(1px); } to { transform: scale(.97,1.05) rotate(2.5deg) translateY(-5px); } }
@keyframes hop { from { transform: scale(1.08,.9) translateY(0); } to { transform: scale(.94,1.1) translateY(-26px); } }
/* Pib's colors. Flavor is picked with hostFlavor in config.json (host.js sets data-flavor).
   His hat isn't part of the flavor or his look: it belongs to the scene, so he's always dressed
   for the room he's in. A backdrop sets --scene-hat and --scene-band on body (the casino's is
   here; the Deep Sea dresses him in skins/sea.js). */
body { --scene-hat: #1b1a20; --scene-band: #ff4f9a; }
#host {
  /* the default, "tuxedo": blue icing on an ivory cake, gold outlines */
  --pib-icing: #6cc4ff; --pib-icing-line: #c9a24a;
  --pib-body: #ece4d4;  --pib-body-line: #c9a24a;
  --pib-iris: #ff5fb8;  --pib-iris-line: #b0225e;
}
#host[data-flavor="bubblegum"]          { --pib-icing: #6cc4ff; --pib-icing-line: #2f8fd6; --pib-body: #ff6fa3; --pib-body-line: #d14a80; --pib-iris: #ff5fb8; --pib-iris-line: #d14a80; }
#host[data-flavor="mint-chip"]         { --pib-icing: #8ff0c8; --pib-icing-line: #2f9e7c; --pib-body: #7a5340; --pib-body-line: #4a3022; --pib-iris: #2fbf9c; --pib-iris-line: #1f7f68; }
#host[data-flavor="lemon-berry"]        { --pib-icing: #fff07a; --pib-icing-line: #c9a800; --pib-body: #9a6cf5; --pib-body-line: #6340c4; --pib-iris: #9a6cf5; --pib-iris-line: #6340c4; }
#host[data-flavor="strawberry-vanilla"] { --pib-icing: #fff4e0; --pib-icing-line: #c9a46a; --pib-body: #ff8a8a; --pib-body-line: #d14f5c; --pib-iris: #ff4f6a; --pib-iris-line: #b8303f; }
#host[data-flavor="blueberry"]          { --pib-icing: #c9b6ff; --pib-icing-line: #6a4fc9; --pib-body: #4a7be0; --pib-body-line: #2c4fa3; --pib-iris: #ffb020; --pib-iris-line: #c9850a; }
#host[data-flavor="midnight"]           { --pib-icing: #ff4f9a; --pib-icing-line: #b8226a; --pib-body: #2e2656; --pib-body-line: #7a6cc0; --pib-iris: #35e0ff; --pib-iris-line: #0a87a3; }
#host[data-flavor="high-roller"]        { --pib-icing: #f0c445; --pib-icing-line: #8a6418; --pib-body: #26232e; --pib-body-line: #c9a24a; --pib-iris: #35e0ff; --pib-iris-line: #0a87a3; }
.g-limb, .g-body-edge { fill: var(--pib-body); stroke: var(--pib-body-line); stroke-width: 4; }
.g-body-edge { fill: none; stroke-width: 5; }
.g-body { fill: var(--pib-body); }
.g-icing { fill: var(--pib-icing); }
.g-icing-edge { fill: none; stroke: var(--pib-icing-line); stroke-width: 4; stroke-linejoin: round; }
.g-rim { stroke-width: 5; }
.g-iris { fill: var(--pib-iris); stroke: var(--pib-iris-line); stroke-width: 3.5; }
.eye-white { fill: #fff; stroke: var(--pib-icing-line); stroke-width: 4.5; }
.eye .lid { fill: var(--pib-icing); }
/* the bowler (the scene's colours, see above) and the cane: gold-edged in every flavour */
.g-hat { fill: var(--scene-hat); stroke: #c9a24a; stroke-width: 4; stroke-linejoin: round; }
.g-hatband { fill: var(--scene-band); }
.g-cane, .g-cane-edge, .g-handle, .g-handle-edge { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-cane-edge { stroke: #c9a24a; stroke-width: 12; }
.g-cane { stroke: #1b1a20; stroke-width: 7; }
.g-cane-tip { fill: #e2b11d; stroke: #8a6418; stroke-width: 2; }
.g-handle-edge { stroke: #6e4f12; stroke-width: 12; }
.g-handle { stroke: #f0c445; stroke-width: 7; }

.eye .pupil { transition: transform .25s; }
.eye .lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .08s; }
#host.blink .eye .lid { transform: scaleY(1); }
#host.squint .eye .lid { transform: scaleY(.45); }

/* no mouth, so the eye and arms do the emoting */
#arm-l { transform-origin: 70px 172px; transition: transform .2s; }
#arm-r { transform-origin: 230px 172px; transition: transform .2s; }
#host.talking #arm-r { animation: gestureR .44s ease-in-out infinite alternate; }
#host.excited #arm-l { animation: cheerL .32s ease-in-out infinite alternate; }
#host.excited #arm-r { animation: cheerR .32s ease-in-out infinite alternate; }
@keyframes gestureR { from { transform: rotate(0); } to { transform: rotate(-35deg); } }
@keyframes cheerL { from { transform: rotate(90deg); } to { transform: rotate(130deg); } }
@keyframes cheerR { from { transform: rotate(-90deg); } to { transform: rotate(-130deg); } }

/* walk cycle (faces right): add .walking to #host. Legs step out of phase, arms swing opposite. */
#host.walking #blob { animation: walkBob .25s ease-in-out infinite alternate; }
#host.walking #leg-l { animation: step .5s linear infinite; }
#host.walking #leg-r { animation: step .5s linear infinite -.25s; }
#host.walking #arm-l { animation: swing .5s ease-in-out infinite alternate; }
#host.walking #arm-r { animation: swing .5s ease-in-out infinite alternate-reverse; }
@keyframes walkBob { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes step { 0% { transform: translate(-7px,0); } 25% { transform: translate(0,-9px); } 50% { transform: translate(7px,0); } 100% { transform: translate(-7px,0); } }
@keyframes swing { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
/* reactions (host.js Host.react): he gasps at a landslide, slumps at a tie, tips his hat to the
   champion. They hold the limbs still, so they override the talking and walking gestures. */
#eyes { transform-origin: 150px 160px; transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
#hat { transform-origin: 150px 62px; transform: rotate(-8deg); transition: transform .55s cubic-bezier(.3,1.3,.5,1); }
#host.gasp #blob { animation: gasp-hop .7s cubic-bezier(.3,1.4,.5,1); }
#host.gasp #eyes { transform: scale(1.16); }
#host.gasp #arm-l { animation: none; transform: rotate(78deg); }
#host.gasp #arm-r { animation: none; transform: rotate(-78deg); }
#host.gasp #hat { transform: translateY(-14px) rotate(-14deg); }
@keyframes gasp-hop { 0% { transform: none; } 30% { transform: scale(.94,1.08) translateY(-18px); } 60% { transform: scale(1.05,.95); } 100% { transform: none; } }
#host.slump #blob { animation: slump 1s cubic-bezier(.3,.7,.3,1) forwards; }
#host.slump .eye .lid { transform: scaleY(.5); }
#host.slump #arm-l { animation: none; transform: rotate(-24deg); }
#host.slump #arm-r { animation: none; transform: rotate(24deg); }
#host.slump #hat { transform: translateY(6px) rotate(4deg); }
@keyframes slump { to { transform: scale(1.04,.93) translateY(7px); } }
#host.tiphat #arm-r { animation: none; transform: rotate(-150deg); transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
#host.tiphat #hat { transform: translate(34px,-26px) rotate(26deg); }
#host.tiphat #blob { animation: bow 1.6s ease-in-out; }
@keyframes bow { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-6deg) translateY(4px); } }

#thinking { position: absolute; top: -14px; right: 6%; display: flex; gap: 6px; }
#thinking span { width: 14px; height: 14px; border-radius: 50%; background: var(--cream); animation: dots 1s infinite; }
#thinking span:nth-child(2) { animation-delay: .2s; } #thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-10px); opacity: 1; } }

/* Pib's speech bubble: dark frosted glass with a small gold name tag, like the lobby's panels */
#bubble {
  position: absolute; bottom: 14%; left: 104%;
  width: 40vw; min-height: 4vw;
  color: #fff; padding: 1.2vw 1.6vw 1.3vw; isolation: isolate;
  font-family: "Quicksand", var(--body); font-weight: 600; font-size: 1.6vw; line-height: 1.42;
  animation: bubbleIn .28s cubic-bezier(.2,.9,.3,1.25);
  transform-origin: 0 100%;
}
/* the bubble's glass and hairline edge are one SVG path drawn behind the text (host.js):
   the rounded box with its tail, so the outline runs continuously into the tail */
.bubble-shape { position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 1vw 1.6vw rgba(0,0,0,.6)); }
.bubble-shape path { fill: rgba(22,14,24,.9); stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-linejoin: round; }
@keyframes bubbleIn { from { transform: scale(.85) translateY(.6vw); opacity: 0; } to { transform: none; opacity: 1; } }
.bubble-name { display: flex; align-items: center; gap: .5em; margin-bottom: .45em; font-size: .52em; font-weight: 700; letter-spacing: .3em; color: #ffd98a; }
.bubble-name::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #ff4f9a; box-shadow: 0 0 .7em #ff4f9a; }
.bubble-text { min-height: 1.42em; } /* letters and their animations come from /shared/textfx.css */
/* the text effects' colors, lightened for the dark glass */
#bubble .tfx-pink { color: #ff8cc4; } #bubble .tfx-orange { color: #ffb066; } #bubble .tfx-yellow { color: #ffd98a; } #bubble .tfx-green { color: #6fe08a; }
#bubble .tfx-blue { color: #7cc8ff; } #bubble .tfx-purple { color: #c4a6ff; } #bubble .tfx-red { color: #ff6b7a; }