/* Django equivalent: static/css/main.css — global stylesheet
   Served by GitHub Pages (static file server).
   In Django this would live in: app/static/app/css/main.css
   and be referenced via {% static 'app/css/main.css' %} */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --gold:#c9a96e;--gold-dim:rgba(201,169,122,.13);
  --text:#f0ebe2;--muted:rgba(240,235,226,.46);--border:rgba(255,255,255,.09);
  --glass:rgba(6,6,6,.8);--r:4px;
  --ok:rgba(100,180,120,.18);--ok-t:#a8dab5;
  --bad:rgba(180,90,90,.18);--bad-t:#dab5b5;
  --warn:rgba(200,160,60,.18);--warn-t:#d4b870;
}
body{font-family:'Space Mono',monospace;background:#080808;color:var(--text);min-height:100vh;overflow-x:hidden;}

/* ── INTRO — projector ignition effect ─────────────────────── */
#intro{
  position:fixed;inset:0;background:#000;z-index:100;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
}

/* White flash when projector "ignites" */
#projector-flash{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 40%,transparent 70%);
  opacity:0;pointer-events:none;z-index:5;
}

/* Main ambient projector beam — hidden, replaced by 3 word beams */
#projector-beam{
  position:absolute;
  top:-5%;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:120px solid transparent;
  border-right:120px solid transparent;
  border-top:65vh solid rgba(201,169,110,.03);
  opacity:0;z-index:1;
  filter:blur(12px);
  display:none;
}

/* ── Light cones — ALL from one projector point (center-top) ───────────────
   Each beam spans full viewport width so clip-path % = screen %.
   Shared apex at 50% 0% (horizontal center, top) = projector source.
   clip-path bases are tuned to the actual word positions in the centred logo.
   Sway animation uses skewX on shared transform-origin 50% 0% so all three
   beams pivot around the same projector point, like one lamp wobbling. */
.word-beam{
  position:absolute;
  top:0; left:0;
  width:100vw;
  height:52vh;
  /* clip-path set per-beam below */
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(240,235,226,.05) 15%,
    rgba(240,235,226,.20) 60%,
    rgba(240,235,226,.10) 85%,
    transparent 100%
  );
  opacity:0; z-index:1;
  filter:blur(26px) brightness(1);
  pointer-events:none;
  transform-origin:50% 0%;   /* pivot = projector point */
}
/* "the" — dimmer, narrower */
.word-beam.beam-sm{
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(240,235,226,.04) 15%,
    rgba(240,235,226,.14) 60%,
    rgba(240,235,226,.07) 85%,
    transparent 100%
  );
}
/* "Frame" — warm gold */
.word-beam.beam-gold{
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(201,169,110,.06) 15%,
    rgba(201,169,110,.24) 60%,
    rgba(201,169,110,.11) 85%,
    transparent 100%
  );
}

/* Clip-paths: apex at 50% 0% for all three.
   Base edges estimated for ~1440px desktop (Cinzel, logo centered):
     NAME  ≈ 33–46% of screen width
     THE   ≈ 46–54% (smaller word at 0.6em)
     FRAME ≈ 55–71%                                                       */
#beam-name {
  clip-path:polygon(50% 0%,50% 0%,30% 100%,47% 100%);
  animation:beam-sway 7s ease-in-out infinite, beam-flicker-a 3.7s ease-in-out infinite;
}
#beam-the {
  clip-path:polygon(50% 0%,50% 0%,44% 100%,56% 100%);
  animation:beam-sway 7s ease-in-out infinite, beam-flicker-b 4.1s ease-in-out infinite;
}
#beam-frame {
  clip-path:polygon(50% 0%,50% 0%,54% 100%,72% 100%);
  animation:beam-sway 7s ease-in-out infinite, beam-flicker-c 3.3s ease-in-out infinite;
}

/* Single unified sway — all beams pivot together around the projector point */
@keyframes beam-sway{
  0%,100%{transform:skewX(-.4deg);}
  50%    {transform:skewX(.4deg);}
}

/* Projector flicker — brief brightness dips like a 24fps film shutter.
   Uses brightness() so it is independent of the opacity set by JS. */
@keyframes beam-flicker-a{
  0%,100%{filter:blur(24px) brightness(1);}
  5%     {filter:blur(24px) brightness(.55);}
  6%     {filter:blur(24px) brightness(1);}
  38%    {filter:blur(24px) brightness(.78);}
  39%    {filter:blur(24px) brightness(1);}
  71%    {filter:blur(24px) brightness(.62);}
  72%    {filter:blur(24px) brightness(1);}
}
@keyframes beam-flicker-b{
  0%,100%{filter:blur(24px) brightness(1);}
  12%    {filter:blur(24px) brightness(.60);}
  13%    {filter:blur(24px) brightness(1);}
  47%    {filter:blur(24px) brightness(.82);}
  48%    {filter:blur(24px) brightness(1);}
  79%    {filter:blur(24px) brightness(.58);}
  80%    {filter:blur(24px) brightness(1);}
}
@keyframes beam-flicker-c{
  0%,100%{filter:blur(24px) brightness(1);}
  8%     {filter:blur(24px) brightness(.65);}
  9%     {filter:blur(24px) brightness(1);}
  52%    {filter:blur(24px) brightness(.72);}
  53%    {filter:blur(24px) brightness(1);}
  84%    {filter:blur(24px) brightness(.56);}
  85%    {filter:blur(24px) brightness(1);}
}

/* Dust particles floating in the beam */
#dust-particles{
  position:absolute;inset:0;
  pointer-events:none;z-index:3;
  opacity:0;
}
.dust-dot{
  position:absolute;
  background:var(--gold);
  border-radius:50%;
  animation:dust-float linear infinite;
}
@keyframes dust-float{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{transform:translateY(-40px) translateX(15px);opacity:0;}
}

/* Logo centered */
#intro-logo{
  position:relative;z-index:4;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.75rem;
  opacity:0;
}

.frame-logo{
  font-family:'Cinzel',serif;font-weight:400;
  font-size:clamp(1.6rem,5vw,3.4rem);letter-spacing:.12em;
  text-align:center;white-space:nowrap;
  color:var(--text);
  min-height:1.3em;
  line-height:1.3;
}

/* Typewriter cursor */
.logo-cursor{
  font-weight:100;color:var(--gold);
  animation:cursor-blink .7s steps(1) infinite;
  margin-left:1px;
}
@keyframes cursor-blink{0%,50%{opacity:1;}51%,100%{opacity:0;}}

/* "Name" — warm white neon glow */
.glow-name{
  color:#f0ebe2;
  display:inline-block;
  text-shadow:
    0 0 4px rgba(240,235,226,.6),
    0 0 11px rgba(240,235,226,.35),
    0 0 22px rgba(240,235,226,.2),
    0 0 44px rgba(220,210,190,.1);
  animation:flicker-white 4s ease-in-out infinite;
}

/* "the" — smaller white glow */
.glow-the{
  color:#f0ebe2;
  font-size:0.6em;
  display:inline-block;
  text-shadow:
    0 0 3px rgba(240,235,226,.5),
    0 0 8px rgba(240,235,226,.25),
    0 0 16px rgba(240,235,226,.12);
  animation:flicker-the 3.5s ease-in-out infinite;
}

/* "Frame" — golden neon glow */
.glow-frame{
  color:var(--gold);
  display:inline-block;
  text-shadow:
    0 0 4px rgba(201,169,110,.7),
    0 0 12px rgba(201,169,110,.4),
    0 0 28px rgba(201,169,110,.25),
    0 0 50px rgba(201,169,110,.12);
  animation:flicker-gold 5s ease-in-out infinite;
}

/* Flicker — irregular brightness like real neon tubes */
@keyframes flicker-white{
  0%,100%{opacity:1;}
  4%{opacity:0.92;}
  8%{opacity:1;}
  42%{opacity:0.97;}
  44%{opacity:0.9;}
  46%{opacity:1;}
  72%{opacity:0.95;}
  74%{opacity:1;}
}
@keyframes flicker-the{
  0%,100%{opacity:1;}
  12%{opacity:0.88;}
  14%{opacity:1;}
  55%{opacity:0.93;}
  57%{opacity:0.85;}
  59%{opacity:1;}
  82%{opacity:0.94;}
  84%{opacity:1;}
}
@keyframes flicker-gold{
  0%,100%{opacity:1;}
  6%{opacity:0.94;}
  8%{opacity:1;}
  35%{opacity:0.96;}
  37%{opacity:0.88;}
  39%{opacity:1;}
  65%{opacity:0.92;}
  67%{opacity:1;}
  88%{opacity:0.95;}
  90%{opacity:1;}
}

/* "click to enter" prompt */
.frame-enter{
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.35em;text-transform:uppercase;
  color:var(--muted);opacity:0;
  transition:opacity .6s ease;
}
.frame-enter.vis{opacity:1;}

/* Film frame counter — top-left */
#film-counter{
  position:absolute;top:1.25rem;left:1.5rem;
  font-family:'Space Mono',monospace;font-size:11px;
  color:var(--gold);letter-spacing:.08em;
  transition:opacity .3s;
  user-select:none;
  z-index:10;
}

@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── SETUP ─────────────────────────────────────────────────── */
#setup{min-height:100vh;display:none;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.5rem;opacity:0;transition:opacity .6s;}
#setup.vis{opacity:1;}
#setup::before{content:'';position:fixed;top:0;left:50%;transform:translateX(-50%);width:700px;height:300px;background:radial-gradient(ellipse,rgba(201,169,110,.06) 0%,transparent 70%);pointer-events:none;}
.brand{font-family:'Cinzel',serif;font-weight:400;font-size:clamp(2.4rem,6vw,4.5rem);letter-spacing:.14em;line-height:1;text-align:center;margin-bottom:.4rem;}
.brand em{font-style:normal;color:var(--gold);}
.tagline{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:2rem;max-width:520px;line-height:1.8;}

.form-row{width:100%;max-width:860px;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}
.field-wrap{display:flex;flex-direction:column;gap:.4rem;}
.field-label{font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);}
.field-sub{font-size:9px;color:var(--muted);letter-spacing:.04em;display:none;}
.field-wrap:hover .field-sub{display:block;}
.nick-input{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r);padding:.75rem 1rem;color:var(--text);font-family:'Cormorant Garamond',serif;font-size:1.15rem;width:100%;outline:none;transition:border-color .15s;letter-spacing:.04em;}
.nick-input:focus{border-color:rgba(201,169,110,.4);}
.nick-input::placeholder{color:var(--muted);font-style:italic;}
.genre-select{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r);padding:.75rem 1rem;color:var(--text);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;width:100%;outline:none;transition:border-color .15s;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a96e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;}
.genre-select:focus{border-color:rgba(201,169,110,.4);}
.genre-select option,.genre-select optgroup{background:#141414;color:var(--text);}

.levels-label{font-size:11px;letter-spacing:2em;padding-left:2em;text-transform:uppercase;color:var(--gold);margin-bottom:.875rem;width:100%;max-width:860px;text-align:center;margin-left:auto;margin-right:auto;font-family:'Cinzel',serif;}

/* ── Level carousel ─────────────────────────────────────────────────────────
   JS-driven circular carousel. carouselTo(idx) translates #levels-track
   and toggles .active. Circular: Kineza → right → Kasa, Kasa → left → Kineza. */

/* Outer wrapper: arrow-sides + carousel in a flex row */
.carousel-wrapper{
  width:100%;max-width:900px;
  display:flex;align-items:stretch;
  gap:.5rem;
  margin:0 auto 1.5rem;
}
.carousel-side{
  flex:0 0 80px;
  align-self:stretch;
  display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;
  padding:.75rem .25rem;
  background:transparent;border:none;
  cursor:pointer;border-radius:8px;
  color:rgba(201,169,110,.45);
  transition:color .2s,background .2s;
}
.carousel-side:hover{color:rgba(201,169,110,.75);background:rgba(201,169,110,.03);}
.carousel-arrow-icon{
  font-family:'Space Mono',monospace;
  font-size:13px;line-height:1;letter-spacing:-.15em;
  display:block;opacity:.7;
}
/* middle arrow group — label + icon */
.carousel-mid{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
.carousel-label{
  font-family:'Space Mono',monospace;
  font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(201,169,110,.5);
  text-align:center;line-height:1.5;
  max-width:72px;
  word-break:break-word;
}

.levels-carousel{
  flex:1;min-width:0;
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to right,transparent 0%,black 14%,black 86%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 14%,black 86%,transparent 100%);
}
.levels{
  display:flex;
  gap:1.25rem;
  padding:.5rem 0;
  transition:transform .52s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* Cards — blurred by default, sharp when .active */
.lvl-card{
  flex:0 0 clamp(200px,38vw,260px);
  min-height:400px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:24px;
  cursor:pointer;
  overflow:hidden;position:relative;display:flex;flex-direction:column;
  filter:blur(3px) brightness(.48);
  transition:filter .42s ease,border-color .22s,background .22s;
  user-select:none;
}
.lvl-card.active{filter:none;}
.lvl-card:not(.active):hover{filter:blur(1.5px) brightness(.68);}

/* Per-card accent colours (active state) */
.lvl-card--auth{border-style:dashed;border-color:rgba(255,255,255,.14);}
.lvl-card--auth.active{border-color:rgba(120,160,220,.55);background:rgba(60,100,180,.06);}
.lvl-card--popcorn.active{border-color:var(--gold);background:var(--gold-dim);}
.lvl-card--kinoman.active{border-color:rgba(200,70,70,.6);background:rgba(170,50,50,.07);}
.lvl-card--kineza.active{border-color:rgba(160,148,215,.55);background:rgba(80,60,140,.07);}

/* Auth buttons */
.lvl-auth-buttons{
  display:flex;flex-direction:column;gap:.55rem;
  padding:.5rem 1.25rem 1.5rem;
}
.lvl-auth-btn{
  width:100%;
  background:rgba(120,160,220,.04);
  border:1px solid rgba(120,160,220,.28);
  border-radius:var(--r);
  padding:.7rem 1rem;
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(140,180,240,.55);
  cursor:pointer;text-align:center;
  transition:border-color .18s,color .18s,background .18s;
  position:relative;
  overflow:visible;
  /* reset browser button defaults */
  -webkit-appearance:none;appearance:none;outline:none;
}
.lvl-auth-btn:hover{
  border-color:rgba(120,160,220,.55);
  color:rgba(160,200,255,.8);
  background:rgba(120,160,220,.09);
}
/* Tooltip on click — hidden by default, shown via JS class */
.lvl-auth-tooltip{
  display:none;
  position:absolute;
  bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:rgba(8,8,18,.95);
  border:1px solid rgba(120,160,220,.35);
  border-radius:4px;padding:.4rem .85rem;
  font-family:'Space Mono',monospace;
  font-size:8px;letter-spacing:.16em;
  color:rgba(140,180,240,.8);
  white-space:nowrap;pointer-events:none;
  z-index:20;
}
.lvl-auth-btn.tip-show .lvl-auth-tooltip{display:block;}

/* Director quote */
.lvl-quote{
  margin-top:.875rem;
  padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.07);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:12px;
  color:rgba(240,235,226,.52);
  line-height:1.7;
}
.lvl-quote-attr{
  display:block;margin-top:.45rem;
  font-style:normal;
  font-family:'Space Mono',monospace;
  font-size:9px;letter-spacing:.12em;
  color:rgba(201,169,110,.58);
}
.lvl-main{padding:1.25rem 1.25rem 1rem;flex:1;}

/* Corner emoji row — two emojis at far ends with dashed beam between */
.lvl-emoji-row{
  display:flex;align-items:center;width:100%;margin-bottom:.875rem;
}
.lvl-emoji{font-size:1.2rem;line-height:1;flex:0 0 auto;}
.lvl-emoji-beam{
  flex:1;height:1px;min-width:0;
  background:repeating-linear-gradient(90deg,rgba(201,169,110,.42) 0px,rgba(201,169,110,.42) 5px,transparent 5px,transparent 11px);
  margin:0 .75rem;
}

.lvl-name{
  font-family:'Cinzel',serif;font-size:.94rem;font-weight:600;
  letter-spacing:.1em;display:block;width:100%;margin-bottom:.6rem;
  text-align:center;
  background:linear-gradient(135deg,#8a6a20 0%,#c9a96e 30%,#f0d090 50%,#c9a96e 70%,#8a6a20 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
/* Per-card metallic tint */
.lvl-card--auth .lvl-name{background:linear-gradient(135deg,#507090 0%,#90b8d8 35%,#c8e4ff 50%,#90b8d8 65%,#507090 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lvl-card--kinoman .lvl-name{background:linear-gradient(135deg,#802020 0%,#c05050 30%,#f09898 50%,#c05050 70%,#802020 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lvl-card--kineza .lvl-name{background:linear-gradient(135deg,#3a2870 0%,#8070c8 30%,#c0b0f0 50%,#8070c8 70%,#3a2870 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lvl-name-divider{
  height:1px;background:rgba(255,255,255,.13);margin:.65rem 0 .8rem;
}
.lvl-desc{font-size:10px;color:var(--muted);line-height:1.7;letter-spacing:.02em;}

.lvl-spoiler-btn{
  width:100%;background:transparent;border:none;
  border-top:1px solid rgba(201,169,122,.14);
  padding:.6rem .75rem;
  font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.1em;
  color:rgba(201,169,122,.62);cursor:pointer;text-align:center;
  transition:all .18s;
}
.lvl-spoiler-btn:hover{color:rgba(201,169,122,.9);background:rgba(201,169,122,.05);}
.lvl-spoiler-btn.open{color:rgba(201,169,122,.82);border-top-color:rgba(201,169,122,.22);}
.lvl-spoiler-content{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;}
.lvl-spoiler-content.open{max-height:160px;padding:.75rem 1rem;border-top:1px solid rgba(201,169,122,.12);}
.spoiler-text{font-size:9.5px;line-height:1.65;color:rgba(201,169,122,.82);font-style:italic;letter-spacing:.02em;}

.start-row{width:100%;max-width:860px;display:flex;gap:.625rem;align-items:stretch;}

/* ── ZAPAL PROJEKTOR — pulsing projector lamp ── */
.start-btn{
  flex:1;
  background:var(--gold);color:#080808;border:none;border-radius:var(--r);
  padding:1rem 1.5rem;
  font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.35em;text-transform:uppercase;cursor:pointer;
  animation:lamp-pulse 3.8s ease-in-out infinite;
  transition:background .15s;
  position:relative;overflow:visible;
}
/* Irregular bulb-flicker: sudden dips then surges */
@keyframes lamp-pulse{
  0%,100%{box-shadow:0 0 20px rgba(201,169,110,.20),0 0 50px rgba(201,169,110,.10);}
  22%    {box-shadow:0 0 34px rgba(201,169,110,.34),0 0 75px rgba(201,169,110,.18);}
  25%    {box-shadow:0 0  8px rgba(201,169,110,.08),0 0 18px rgba(201,169,110,.04);}
  27%    {box-shadow:0 0 30px rgba(201,169,110,.28),0 0 68px rgba(201,169,110,.15);}
  58%    {box-shadow:0 0 42px rgba(201,169,110,.38),0 0 90px rgba(201,169,110,.20);}
  61%    {box-shadow:0 0 10px rgba(201,169,110,.09),0 0 22px rgba(201,169,110,.05);}
  62%    {box-shadow:0 0 38px rgba(201,169,110,.32),0 0 80px rgba(201,169,110,.17);}
}
.start-btn:hover{background:#d4b47a;}
.start-btn:disabled{opacity:.32;cursor:not-allowed;animation:none;box-shadow:none;}

/* Click explosion: button emits blinding flash */
.start-btn.firing{
  animation:lamp-fire .65s ease-out forwards !important;
  pointer-events:none;
}
@keyframes lamp-fire{
  0%  {box-shadow:0 0 30px rgba(255,240,200,.5),0 0 80px rgba(201,169,110,.4);transform:scale(1);}
  45% {box-shadow:0 0 120px rgba(255,250,230,.95),0 0 250px rgba(255,240,210,.7),0 0 500px rgba(201,169,110,.45);transform:scale(1.03);}
  100%{box-shadow:0 0 60px rgba(255,255,255,.0);transform:scale(1);opacity:.5;}
}

/* Full-screen flash overlay triggered on game start */
#screen-flash{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,248,220,1) 0%,rgba(201,169,110,.85) 40%,transparent 75%);
  opacity:0;pointer-events:none;z-index:500;
  transition:opacity .18s ease-in;
}
#screen-flash.bright{opacity:1;}
#screen-flash.dim{opacity:0;transition:opacity .55s ease-out;}

/* ── WYNIKI — visible secondary ── */
.scores-btn{
  flex:0 0 auto;
  background:rgba(201,169,110,.06);
  color:rgba(201,169,110,.85);
  border:1px solid rgba(201,169,110,.45);border-radius:var(--r);
  padding:1rem 1.5rem;
  font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
  white-space:nowrap;
}
.scores-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,169,110,.06);}

.scores-panel{width:100%;max-width:860px;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding:0 1rem;}
.scores-panel.open{max-height:600px;padding:1rem;border:1px solid var(--border);border-radius:var(--r);margin-top:8px;background:rgba(6,6,6,.6);backdrop-filter:blur(8px);}
.scores-panel .sp-title{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem;text-align:center;}
.scores-panel .sp-empty{font-size:10px;color:var(--muted);text-align:center;font-style:italic;}
.scores-panel .sp-row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--border);font-size:11px;}
.scores-panel .sp-row:last-child{border-bottom:none;}
.scores-panel .sp-pos{width:26px;text-align:center;font-size:11px;}
.scores-panel .sp-nick{flex:1;color:var(--text);font-family:'Cormorant Garamond',serif;font-size:13px;}
.scores-panel .sp-lvl{font-size:12px;}
.scores-panel .sp-score{font-family:'Space Mono',monospace;font-size:11px;color:var(--gold);font-weight:700;min-width:28px;text-align:right;}
.scores-panel .sp-date{font-size:9px;color:var(--muted);min-width:50px;text-align:right;}
.scred{margin-top:1.25rem;font-size:9px;letter-spacing:.1em;color:rgba(240,235,226,.13);text-align:center;}

/* ── GAME ──────────────────────────────────────────────────── */
#game{display:none;min-height:100vh;position:relative;flex-direction:column;}
.bgf{position:fixed;inset:0;z-index:0;}
.bgf img{width:100%;height:100%;object-fit:cover;display:block;}
.bgf::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);}
.bgf .vig{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,transparent 20%,transparent 45%,rgba(0,0,0,.65) 80%,rgba(0,0,0,.9) 100%);z-index:1;}
.hud{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:.875rem 1.5rem;background:rgba(0,0,0,.3);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);}
.hbrand{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:300;font-style:italic;color:var(--gold);}
.hright{display:flex;align-items:center;gap:1.25rem;}
.hnick{font-size:10px;color:var(--gold);letter-spacing:.1em;}
.hstats{display:flex;gap:1.25rem;font-size:10px;letter-spacing:.12em;color:var(--muted);}
.hstats b{color:var(--text);}
.hprog{position:fixed;top:44px;left:0;right:0;height:2px;background:rgba(255,255,255,.05);z-index:20;}
.hprogf{height:100%;background:var(--gold);transition:width .5s ease;}
.floader{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;z-index:5;transition:opacity .3s;}
.qpanel{position:fixed;bottom:0;left:0;right:0;z-index:10;padding:1.5rem 1.5rem 2rem;background:linear-gradient(to bottom,transparent,var(--glass) 28%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.06);max-height:75vh;overflow-y:auto;}
.qinner{max-width:520px;margin:0 auto;}
.qtxt{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,3vw,1.625rem);font-weight:300;line-height:1.3;margin-bottom:.875rem;}

/* Wisielec / okienka liter */
.hangman-wrap{margin-bottom:1rem;}
.hangman-label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
.hangman-boxes{display:flex;flex-wrap:wrap;gap:4px;}
.hbox{
  width:28px;height:34px;
  border-bottom:2px solid rgba(201,169,110,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;
  color:var(--gold);letter-spacing:0;
  transition:all .2s;
}
.hbox.revealed{
  background:rgba(201,169,110,.1);
  border:1px solid rgba(201,169,110,.4);
  border-radius:2px;
  color:var(--gold);
}
.hbox.space{border:none;width:10px;}

.opts{display:grid;gap:6px;}
.opt{background:rgba(6,6,6,.58);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:.75rem 1rem;text-align:left;cursor:pointer;color:var(--text);font-family:'Space Mono',monospace;font-size:12px;line-height:1.4;transition:all .12s;backdrop-filter:blur(4px);}
.opt:hover:not(:disabled){border-color:rgba(201,169,110,.4);background:rgba(201,169,110,.1);}
.opt.correct{background:var(--ok);border-color:rgba(100,180,120,.5);color:var(--ok-t);}
.opt.wrong{background:var(--bad);border-color:rgba(180,90,90,.5);color:var(--bad-t);}

.ti{background:rgba(6,6,6,.62);border:1px solid var(--border);border-radius:var(--r);padding:.75rem 1rem;color:var(--text);font-family:'Space Mono',monospace;font-size:12px;width:100%;outline:none;transition:border-color .12s;margin-bottom:6px;backdrop-filter:blur(4px);}
.ti:focus{border-color:rgba(201,169,110,.4);}

.dir-bonus-wrap{margin-top:8px;padding:.75rem 1rem;background:rgba(201,169,110,.05);border:1px solid rgba(201,169,110,.15);border-radius:var(--r);}
.dir-bonus-label{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(201,169,122,.6);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
.dir-bonus-pts{font-size:10px;color:var(--gold);}
.dir-input{background:rgba(6,6,6,.5);border:1px solid rgba(201,169,110,.2);border-radius:var(--r);padding:.6rem .875rem;color:var(--text);font-family:'Space Mono',monospace;font-size:11px;width:100%;outline:none;transition:border-color .12s;}
.dir-input:focus{border-color:rgba(201,169,110,.5);}
.dir-input::placeholder{color:rgba(240,235,226,.25);font-style:italic;}

.cb{width:100%;background:rgba(6,6,6,.6);border:1px solid rgba(201,169,110,.5);border-radius:var(--r);padding:.7rem;color:var(--gold);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:all .12s;margin-top:6px;}
.cb:hover{background:rgba(201,169,110,.13);}

.rbox{margin-top:.875rem;padding:.75rem 1rem;border-radius:var(--r);font-size:12px;line-height:1.7;display:none;backdrop-filter:blur(4px);}
.rbox.ok{background:var(--ok);border:1px solid rgba(100,180,120,.28);color:var(--ok-t);}
.rbox.bad{background:var(--bad);border:1px solid rgba(180,90,90,.28);color:var(--bad-t);}
.rbox.partial{background:var(--warn);border:1px solid rgba(200,160,60,.28);color:var(--warn-t);}

.frev{margin-top:.75rem;padding:.75rem 1rem;background:rgba(6,6,6,.55);border:1px solid var(--border);border-radius:var(--r);display:none;backdrop-filter:blur(4px);}
.frt{font-family:'Cormorant Garamond',serif;font-size:1rem;margin-bottom:2px;}
.frm{font-size:10px;letter-spacing:.1em;color:var(--muted);}
.nbtn{margin-top:.75rem;width:100%;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:.7rem;color:var(--muted);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:all .12s;display:none;}
.nbtn:hover{border-color:var(--gold);color:var(--gold);}

.report-btn{margin-top:.5rem;width:100%;background:transparent;border:none;padding:.4rem;color:rgba(240,235,226,.2);font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:color .12s;text-align:center;}
.report-btn:hover{color:rgba(180,90,90,.7);}

/* ── END ───────────────────────────────────────────────────── */
#end{display:none;min-height:100vh;align-items:center;justify-content:center;flex-direction:column;padding:2rem;text-align:center;background:#080808;position:relative;}
#end::before{content:'';position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(ellipse,rgba(201,169,110,.05) 0%,transparent 70%);pointer-events:none;}
.esc{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:min(22vw,9rem);color:var(--gold);line-height:1;margin-bottom:.25rem;}
.emx{font-size:10px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;margin-bottom:.5rem;}
.enick-line{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;color:rgba(201,169,110,.7);margin-bottom:.25rem;}
.evd{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;opacity:.65;margin-bottom:2.5rem;}
.erp{background:var(--gold);color:#080808;border:none;border-radius:var(--r);padding:.875rem 2.5rem;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:all .12s;}
.erp:hover{background:#d4b47a;}
.ecr{position:fixed;bottom:1.5rem;font-size:9px;letter-spacing:.1em;color:rgba(240,235,226,.12);max-width:360px;line-height:1.6;text-align:center;padding:0 1rem;}

/* Leaderboard */
.lb-wrap{margin-top:2rem;width:100%;max-width:360px;text-align:left;}
.lb-title{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.75rem;text-align:center;}
.lb-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-bottom:1px solid var(--border);font-size:11px;}
.lb-row:last-child{border-bottom:none;}
.lb-pos{width:24px;text-align:center;font-size:12px;}
.lb-nick{flex:1;color:var(--text);font-family:'Cormorant Garamond',serif;font-size:13px;}
.lb-lvl{font-size:12px;}
.lb-score{font-family:'Space Mono',monospace;font-size:11px;color:var(--gold);font-weight:700;min-width:28px;text-align:right;}
.lb-date{font-size:9px;color:var(--muted);min-width:44px;text-align:right;}

/* ── Global footer — visible on setup / game / end ─────────── */
#site-footer{
  position:fixed;bottom:1.5rem;right:1.75rem;
  font-family:'Cormorant Garamond',serif;font-size:11px;font-style:italic;
  color:var(--muted);letter-spacing:.08em;
  z-index:50;pointer-events:none;
  opacity:.45;
}

/* ── Setup gold dust ─────────────────────────────────────────── */
#setup-dust{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.setup-dust-dot{
  position:absolute;border-radius:50%;
  background:var(--gold);opacity:0;
  animation:setup-dust-drift linear infinite;
}
@keyframes setup-dust-drift{
  0%  {transform:translateY(0) translateX(0);opacity:0;}
  10% {opacity:.28;}
  80% {opacity:.16;}
  100%{transform:translateY(-60px) translateX(12px);opacity:0;}
}

/* ── Mobile carousel fix ─────────────────────────────────────── */
@media(max-width:600px){
  .carousel-wrapper{gap:0;position:relative;}
  .carousel-side{
    position:absolute;top:50%;transform:translateY(-50%);
    z-index:10;flex:none;width:44px;padding:.25rem;
    background:rgba(8,8,8,.55);backdrop-filter:blur(6px);
    border-radius:8px;
  }
  .carousel-side--left{left:2px;}
  .carousel-side--right{right:2px;}
  .carousel-label{display:none;}
  .levels-carousel{width:100%;flex:none;}
  .lvl-card{flex:0 0 78vw;}
}