/* =========================================================
   RHIAN GHOSTLING – LOBBY STYLES
   Edit the :root variables to retune the whole design.
   ========================================================= */
:root{
  /* Colors */
  --pink:#ff9fcb; --pink-deep:#d9609a; --pink-soft:#ffd6ec;
  --silver:#d8dbe6; --silver-deep:#9aa0b8;
  --lavender:#cdbdf0;
  --text:#fff6fb; --text-dim:#ead8e8; --ink:#4a3550;
  --panel-bg:rgba(52,30,66,.62);
  --panel-bg-2:rgba(92,52,102,.45);
  --border:rgba(216,219,230,.85);
  --border-pink:rgba(255,159,203,.7);
  --wood-a:#8d5a78; --wood-b:#b9829f; --wood-c:#6e4160;
  --glitter-opacity:.85;
  /* Stars: brightness 0-1.5, speed 1 = normal, 2 = twice as slow, 0.5 = twice as fast */
  --star-brightness:1;
  --star-speed:1;
  /* Title glitter: speed of the shimmer, and its colors */
  --title-shimmer-speed:7s;
  --title-glitter-1:#ffffff;
  --title-glitter-2:#ffd6ec;
  /* Panel background (image path is set in js/script.js -> lobbyAssets.panelBackground) */
  --panel-bg-image:none;
  --panel-bg-position:center center;
  --panel-bg-size:cover;
  --panel-overlay:rgba(45,22,60,.25);   /* dark veil over the image, keeps text readable */
  --panel-fallback-color:rgba(52,30,66,.62);
  /* Ghost illustration */
  --ghost-width:300px;
  --ghost-max-height:340px;
  --ghost-max-height-small:240px;
  --ghost-offset-x:0px;
  --ghost-offset-y:0px;
  /* Background placement: tweak these for your own image (e.g. "70% 30%") */
  --bg-position:center center;
  --bg-position-mobile:60% center;
  /* Spacing */
  --gap:clamp(16px,2.4vw,36px);
  --pad:clamp(18px,3vw,44px);
  --radius:22px;
  --font-display:"Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L",Georgia,serif;
  --font-body:Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;color:var(--text);font-family:var(--font-body);line-height:1.65;
  overflow-x:hidden;
  /* Your image sits on top; the gradient shows if the file is missing */
  background:
    url("../assets/background.png") var(--bg-position)/cover no-repeat,
    radial-gradient(ellipse at 20% 15%,rgba(255,159,203,.55),transparent 55%),
    radial-gradient(ellipse at 85% 80%,rgba(205,189,240,.55),transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(216,219,230,.25),transparent 50%),
    linear-gradient(160deg,#3a2150 0%,#6a3a7c 45%,#a55a97 100%);
  background-attachment:fixed;
}
#glitter{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:var(--glitter-opacity)}

.lobby{
  position:relative;z-index:1;min-height:100vh;display:grid;
  grid-template-columns:minmax(230px,300px) 1fr;gap:var(--gap);
  align-items:center;max-width:1280px;margin:0 auto;padding:var(--pad);
}

/* ---------- Left signboard ---------- */
.signboard{
  position:relative;padding:40px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel-bg-2),var(--panel-bg));
  border:2px solid var(--border);
  box-shadow:0 0 0 5px rgba(255,159,203,.18),0 0 0 6px var(--border-pink),0 18px 50px rgba(20,5,40,.5),inset 0 0 30px rgba(255,214,236,.12);
  backdrop-filter:blur(4px);
}
.signboard::before,.signboard::after{ /* hanging chains */
  content:"";position:absolute;top:-34px;width:3px;height:34px;
  background:repeating-linear-gradient(var(--silver) 0 5px,transparent 5px 8px);
}
.signboard::before{left:22%}.signboard::after{right:22%}
.signboard__crest{text-align:center;color:var(--pink-soft);font-size:1.6rem;text-shadow:0 0 12px var(--pink)}
.signboard__crest--low{margin-top:6px;color:var(--silver)}
.signboard__list{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:22px}

/* ---------- Wooden sign buttons ---------- */
.sign{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:68px;padding:14px 18px;overflow:hidden;
  color:var(--text);text-decoration:none;text-align:center;
  font-family:var(--font-display);font-weight:700;letter-spacing:.14em;font-size:1.02rem;
  border-radius:12px;border:2px solid var(--silver);
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(88deg,rgba(60,20,50,.12) 0 1px,transparent 1px 14px),
    linear-gradient(180deg,var(--wood-b),var(--wood-a) 55%,var(--wood-c));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(40,10,40,.4),0 6px 14px rgba(20,5,40,.45),0 0 0 3px rgba(255,159,203,.25);
  text-shadow:0 2px 3px rgba(40,10,40,.7);
  transition:box-shadow .35s ease,border-color .35s ease,filter .35s ease;
}
.sign::before,.sign::after{ /* silver studs */
  content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--silver-deep));box-shadow:0 0 6px var(--pink-soft);
}
.sign::before{left:10px}.sign::after{right:10px}
.sign__label{position:relative;z-index:2}
.sign__label::before{ /* sparkle sweep */
  content:"";position:absolute;inset:-40px -30px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle,#fff 0 1.5px,transparent 2px) 20% 30%/38px 38px,
    radial-gradient(circle,var(--pink-soft) 0 1px,transparent 1.6px) 60% 70%/27px 27px,
    linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);opacity:0;
}
.sign:hover,.sign:focus-visible{border-color:var(--pink-soft);filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(40,10,40,.4),0 6px 18px rgba(20,5,40,.45),0 0 0 3px rgba(255,159,203,.5),0 0 22px rgba(255,159,203,.55)}
.sign:hover .sign__label::before,.sign:focus-visible .sign__label::before{animation:sweep 1.1s ease-out 1}
.sign:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes sweep{0%{transform:translateX(-120%);opacity:0}20%{opacity:1}100%{transform:translateX(120%);opacity:0}}

/* ---------- Right panel ---------- */
.panel{
  position:relative;padding:var(--pad);border-radius:var(--radius);
  /* Layers (top to bottom): overlay, your panel image, soft glows, fallback color */
  background-color:var(--panel-fallback-color);
  background-image:
    linear-gradient(var(--panel-overlay),var(--panel-overlay)),
    var(--panel-bg-image),
    radial-gradient(circle at 85% 10%,rgba(255,159,203,.18),transparent 45%),
    radial-gradient(circle at 10% 95%,rgba(205,189,240,.18),transparent 45%);
  background-position:center,var(--panel-bg-position),center,center;
  background-size:auto,var(--panel-bg-size),auto,auto;
  background-repeat:no-repeat;
  border:2px solid var(--border);
  box-shadow:0 0 0 5px rgba(255,159,203,.18),0 0 0 6px var(--border-pink),0 24px 60px rgba(20,5,40,.55),inset 0 0 50px rgba(255,214,236,.1);
  backdrop-filter:blur(5px);
}
.panel::before{content:"";position:absolute;inset:12px;border:1px solid rgba(216,219,230,.4);border-radius:calc(var(--radius) - 8px);pointer-events:none}
.orn{position:absolute;width:44px;height:44px;pointer-events:none;border:3px solid var(--pink);filter:drop-shadow(0 0 5px var(--pink))}
.orn::after{content:"✦";position:absolute;font-size:16px;color:var(--silver);line-height:1}
.orn--tl{top:-4px;left:-4px;border-right:0;border-bottom:0;border-top-left-radius:var(--radius)}.orn--tl::after{top:-9px;left:-9px}
.orn--tr{top:-4px;right:-4px;border-left:0;border-bottom:0;border-top-right-radius:var(--radius)}.orn--tr::after{top:-9px;right:-9px}
.orn--bl{bottom:-4px;left:-4px;border-right:0;border-top:0;border-bottom-left-radius:var(--radius)}.orn--bl::after{bottom:-9px;left:-9px}
.orn--br{bottom:-4px;right:-4px;border-left:0;border-top:0;border-bottom-right-radius:var(--radius)}.orn--br::after{bottom:-9px;right:-9px}

.panel__head{text-align:center;position:relative}
.panel__title{
  margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:.12em;
  font-size:clamp(1.9rem,5vw,3.5rem);line-height:1.1;
  color:var(--pink-soft); /* fallback for browsers without text clipping */
  filter:drop-shadow(0 2px 10px rgba(255,159,203,.55));
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .panel__title{
    color:transparent;-webkit-background-clip:text;background-clip:text;
    /* layers: glitter dots, glitter dots, moving light band, pink-silver base */
    background-image:
      radial-gradient(circle,var(--title-glitter-1) 0 1px,transparent 1.6px),
      radial-gradient(circle,var(--title-glitter-2) 0 .9px,transparent 1.5px),
      linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%),
      linear-gradient(180deg,#fff 15%,var(--silver) 50%,var(--pink) 100%);
    background-size:14px 17px,19px 13px,250% 100%,100% 100%;
    background-repeat:repeat,repeat,no-repeat,no-repeat;
    background-position:0 0,0 0,0% 0,0 0;
    animation:title-shimmer var(--title-shimmer-speed) linear infinite;
  }
}
@keyframes title-shimmer{
  to{background-position:14px 17px,-19px 13px,100% 0,0 0}
}
.title-spark{position:absolute;color:#fff;text-shadow:0 0 8px var(--pink),0 0 14px #fff;pointer-events:none;animation:spark 4.5s ease-in-out infinite;opacity:0}
.title-spark--1{left:17%;top:6%;font-size:1.1rem}
.title-spark--2{left:52%;top:-4%;font-size:.8rem;animation-delay:1.6s}
.title-spark--3{right:16%;top:22%;font-size:1rem;animation-delay:3s}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:.95;transform:scale(1) rotate(45deg)}60%{opacity:0;transform:scale(.4) rotate(90deg)}}
.panel__subtitle{margin:.3em 0 0;font-style:italic;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--pink-soft)}
.divider{display:flex;align-items:center;gap:14px;margin:18px auto;max-width:420px;color:var(--silver)}
.divider i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--silver),transparent)}
.divider b{font-weight:400;color:var(--pink);text-shadow:0 0 10px var(--pink)}

.panel__body{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap);align-items:center}
.panel__text p{margin:0 0 1em;color:var(--text-dim);font-size:clamp(1rem,1.5vw,1.15rem);max-width:58ch}
.panel__text .greeting{color:var(--text);font-size:clamp(1.15rem,2vw,1.45rem);font-style:italic;font-family:var(--font-display)}
.character{margin:0;text-align:center}
.character img,.character svg{display:block;margin:0 auto;width:min(100%,var(--ghost-width));height:auto;max-height:var(--ghost-max-height);object-fit:contain;position:relative;left:var(--ghost-offset-x);top:var(--ghost-offset-y);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;cursor:grab;filter:drop-shadow(0 0 18px rgba(255,159,203,.6))}
.character img[hidden]{display:none}
.character{visibility:hidden}.character.is-ready{visibility:visible}
.character img.is-moving{z-index:60;cursor:grabbing}
.panel__body.no-ghost{grid-template-columns:1fr}
.character__cap{margin-top:8px;font-size:.88rem;font-style:italic;color:var(--silver)}
.panel__foot{text-align:center}
.panel__foot .divider{margin-top:10px}
.note{margin:0;font-style:italic;color:var(--pink-soft);font-size:1.05rem}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .lobby{grid-template-columns:minmax(200px,240px) 1fr;align-items:start}
  .panel__body{grid-template-columns:1fr}
  .character{order:-1}
  .character img,.character svg{max-height:var(--ghost-max-height-small)}
}
/* ---------- Mobile ---------- */
@media (max-width:700px){
  body{background-position:var(--bg-position-mobile),center,center,center,center;background-attachment:scroll}
  .lobby{grid-template-columns:1fr;padding-top:48px}
  .signboard{padding:26px 18px}
  .signboard__list{gap:16px}
  .sign{min-height:60px}
  .signboard__crest--low{display:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .panel__title{animation:none!important}
  .title-spark{animation:none!important;opacity:.6}
  .fall,.star--spark{display:none}
  .star{animation-duration:calc(var(--d)*var(--star-speed)*4s)!important} /* very slow, gentle twinkle */
  .sign,.sign *{transition:none!important;animation:none!important}
}

/* ---------- Animated stars (elements are created in js/script.js) ---------- */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{
  position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;
  opacity:calc(var(--o)*var(--star-brightness));
  box-shadow:0 0 calc(var(--s)*3) rgba(255,214,236,.8);
  animation:twinkle calc(var(--d)*var(--star-speed)*1s) ease-in-out calc(var(--delay)*1s) infinite;
}
.star--pink{background:var(--pink-soft)}
.star--lav{background:var(--lavender)}
.star--spark{ /* little four-point sparkle */
  width:calc(var(--s)*6);height:calc(var(--s)*6);border-radius:0;box-shadow:none;
  background:
    linear-gradient(#fff,#fff) center/1px 100% no-repeat,
    linear-gradient(#fff,#fff) center/100% 1px no-repeat;
  filter:drop-shadow(0 0 3px var(--pink));
}
@keyframes twinkle{
  0%,100%{opacity:calc(var(--o)*.2*var(--star-brightness));transform:scale(.75)}
  50%{opacity:calc(var(--o)*var(--star-brightness));transform:scale(1.15)}
}

/* sharper "sparkle" highlight for the cross-shaped stars */
.star--spark{animation-name:sparkle}
@keyframes sparkle{
  0%,100%{opacity:calc(var(--o)*.1*var(--star-brightness));transform:scale(.3) rotate(0)}
  50%{opacity:calc(var(--o)*var(--star-brightness));transform:scale(1.2) rotate(45deg)}
}

/* ---------- Falling stars (js/script.js re-launches each one after it fades out) ---------- */
.fall{
  position:absolute;left:var(--x);top:var(--y);width:var(--len);height:var(--sz);
  opacity:0;transform-origin:100% 50%;border-radius:var(--sz);
  background:linear-gradient(90deg,transparent,rgba(255,214,236,.85));
}
.fall::after{
  content:"";position:absolute;right:0;top:50%;width:calc(var(--sz)*2.4);height:calc(var(--sz)*2.4);
  margin-top:calc(var(--sz)*-1.2);border-radius:50%;background:#fff;
  box-shadow:0 0 8px 2px rgba(255,182,217,.8);
}
.fall.is-on{animation:fall var(--fd) cubic-bezier(.4,.1,.7,1) 1 forwards}
@keyframes fall{
  0%{opacity:0;transform:rotate(var(--a)) translateX(0)}
  12%,75%{opacity:calc(var(--o)*var(--star-brightness))}
  100%{opacity:0;transform:rotate(var(--a)) translateX(var(--dist))}
}