/* 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:80px 1.5rem 2.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:transparent;border:none;border-radius:0;padding:.75rem 1rem .6rem;color:#DAA520;font-family:'Cormorant Garamond',serif;font-size:1.15rem;width:100%;outline:none;transition:color .2s;letter-spacing:2px;text-align:center;}
.nick-input:focus{color:#DAA520;letter-spacing:2px;}
.nick-input::placeholder{color:var(--muted);font-style:italic;letter-spacing:1px;}

/* Animated underline — grows with text length via JS */
.field-wrap{position:relative;width:100%;}
.nick-underline{
  display:block;
  width:15px;min-width:15px;
  height:2px;
  background:#d4af37;
  margin:0 auto;
  border-radius:2px;
  transition:width .15s ease-out,box-shadow .3s ease;
}
.field-wrap:focus-within .nick-underline{
  box-shadow:0 0 10px rgba(212,175,55,.8);
}

/* Custom error message */
.nick-error-msg{
  display:block;text-align:center;
  font-family:'Space Mono',monospace;font-size:0.8rem;
  letter-spacing:1px;
  color:#c95c55;
  opacity:0;
  margin-top:15px;
  transition:opacity .25s ease;
}
.nick-error-msg.visible{opacity:1;}
.nick-error-msg.shake{animation:err-shake .35s ease;}
@keyframes err-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.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;}

/* ── Auth bar ── */
.auth-bar{
  position:absolute;top:1rem;right:1.5rem;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:.75rem;
}
.auth-link{
  color:rgba(201,169,110,.5);text-decoration:none;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:2px;text-transform:uppercase;
  transition:color .15s;
}
.auth-link:hover{color:var(--gold);}

/* ── Setup form — centered column ── */
.setup-form{
  width:100%;max-width:380px;
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  margin-top:4vh;
}

/* ── Nick input — neon error state ── */
.nick-input.neon-error-flash{
  animation:neon-flash .35s ease;
}
@keyframes neon-flash{
  0%  {border-color:rgba(255,40,40,.9);box-shadow:0 0 8px rgba(255,40,40,.6);}
  33% {border-color:var(--border);box-shadow:none;}
  50% {border-color:rgba(255,40,40,.9);box-shadow:0 0 8px rgba(255,40,40,.6);}
  66% {border-color:var(--border);box-shadow:none;}
  83% {border-color:rgba(255,40,40,.9);box-shadow:0 0 6px rgba(255,40,40,.5);}
  100%{border-color:var(--border);box-shadow:none;}
}

/* Nick input — authed user (gold border, disabled look) */
.nick-input--authed{
  border-color:rgba(201,169,110,.55) !important;
  color:var(--gold);
  opacity:.85;
}

/* Nick error message — burnt bulb effect */
.nick-error{
  display:block;
  min-height:1.2em;
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.06em;
  color:rgba(180,30,30,.75);
  text-align:center;
  opacity:0;
  transition:opacity .6s ease;
}
.nick-error.visible{opacity:1;}
.nick-error.burnt-flash{
  animation:burnt-bulb .4s ease-out;
}
@keyframes burnt-bulb{
  0%  {color:rgba(255,60,60,1);text-shadow:0 0 6px rgba(255,40,40,.8);}
  50% {color:rgba(255,60,60,.9);text-shadow:0 0 4px rgba(255,40,40,.5);}
  100%{color:rgba(140,25,25,.75);text-shadow:none;}
}

/* ── ZAPAL PROJEKTOR — heavy metallic switch ── */
.start-btn.start-btn--metal{
  width:100%;
  background:linear-gradient(180deg,#3a3a3a 0%,#1a1a1a 40%,#0d0d0d 100%);
  color:var(--gold);
  border:1px solid rgba(201,169,110,.3);
  border-radius:6px;
  padding:1.25rem 2rem;
  font-family:'Space Mono',monospace;font-size:13px;font-weight:700;
  letter-spacing:.35em;text-transform:uppercase;
  cursor:pointer;
  position:relative;overflow:visible;
  animation:none;
  /* Deep metallic shadow — projector switch feel */
  box-shadow:
    0 4px 0 #000,
    0 8px 16px rgba(0,0,0,.7),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .08s ease,box-shadow .08s ease,background .12s;
}
.start-btn.start-btn--metal:hover{
  background:linear-gradient(180deg,#444 0%,#222 40%,#111 100%);
  border-color:rgba(201,169,110,.5);
  box-shadow:
    0 4px 0 #000,
    0 10px 20px rgba(0,0,0,.7),
    0 14px 36px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.start-btn.start-btn--metal:active{
  transform:scale(0.97) translateY(3px);
  box-shadow:
    0 1px 0 #000,
    0 2px 6px rgba(0,0,0,.6),
    inset 0 2px 4px rgba(0,0,0,.4);
  transition:transform .04s ease,box-shadow .04s ease;
}
.start-btn.start-btn--metal:disabled{
  opacity:.35;cursor:not-allowed;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  animation:none;
}
.start-btn.start-btn--metal.checking{
  opacity:.6;cursor:wait;
}

/* Click explosion: button emits blinding flash */
.start-btn.start-btn--metal.firing{
  animation:lamp-fire .65s ease-out forwards !important;
  pointer-events:none;
}

/* Legacy .start-btn kept for backwards compat */
.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;
}
@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 — discreet link ── */
.scores-link{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(201,169,110,.5);
  text-decoration:none;
  transition:color .15s;
}
.scores-link:hover{color:var(--gold);}

/* Legacy scores-btn (kept for compat) */
.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:380px;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{position:absolute;bottom:12px;left:0;width:100%;text-align:center;font-size:0.6rem;color:rgba(255,255,255,.2);letter-spacing:1px;z-index:100;margin:0;}
.scred a{color:rgba(255,255,255,.2);text-decoration:none;transition:color .15s;}
.scred a:hover{color:rgba(212,175,55,.6);}

/* ── 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;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;}
.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:10%;left:50%;transform:translateX(-50%);z-index:10;padding:2rem 2rem 1.8rem;background:radial-gradient(ellipse at center,rgba(8,10,8,.4) 0%,rgba(8,10,8,.2) 60%,transparent 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.04);border-radius:16px;max-height:70vh;overflow-x:hidden;overflow-y:auto;width:calc(100% - 2rem);max-width:560px;box-shadow:none;cursor:grab;transition:transform .1s ease;}
.qpanel.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;transition:none;}
.qinner{position:relative;max-width:520px;margin:0 auto;overflow:visible;}
.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);}
/* Winner button — title highlight only, no heart inside */
.opt-winner{position:relative;font-weight:bold;color:#E5C158;text-shadow:0 1px 4px rgba(201,169,110,.3);}
@media(min-width:768px){.opts{grid-template-columns:1fr 1fr;}}

.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);}

/* Floating result toast — hovers above grid, disappears on interaction */
.result-toast{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:30;
  background:rgba(6,8,6,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(100,180,120,.3);border-radius:10px;
  padding:.6rem 1.2rem;
  font-family:'Space Mono',monospace;font-size:11px;
  color:var(--ok-t);letter-spacing:.04em;
  white-space:nowrap;pointer-events:none;
  opacity:1;transition:opacity .4s ease;
}
.result-toast.toast-hidden{opacity:0;}

.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);}
.frev .frt-row{display:flex;align-items:center;flex-direction:row;}
.frt{font-family:'Cormorant Garamond',serif;font-size:1.2em;margin-bottom:2px;color:rgba(255,248,230,.95);text-shadow:0 1px 6px rgba(201,169,110,.25);}
.frm{font-size:10px;letter-spacing:.1em;color:var(--muted);}

/* ── Heart / Favorite button — top-right of qinner ────────────── */
.heart-btn{
  position:absolute;top:0;right:0;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  font-size:1.4rem;line-height:1;
  margin:0;padding:0;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:rgba(255,255,255,.18);
  cursor:default;
  pointer-events:none;
  z-index:10;
  transition:color .3s ease,filter .3s ease,transform .3s ease,background .3s ease,border-color .3s ease;
}
/* Active state — correct answer, can click */
.heart-btn.heart-active{
  background:rgba(255,255,255,.05);
  border-color:rgba(201,169,110,.25);
  color:rgba(201,169,110,.5);
  cursor:pointer;
  pointer-events:auto;
}
.heart-btn.heart-active:hover{
  background:rgba(255,255,255,.08);
  color:rgba(201,169,110,.8);
  transform:scale(1.08);
}
/* Lit state — hearted (subtle warm glow, not overpowering) */
.heart-btn.hearted{
  color:rgba(200,80,80,.85);
  background:rgba(200,80,80,.08);
  border-color:rgba(200,80,80,.3);
  filter:drop-shadow(0 0 4px rgba(200,80,80,.4));
  animation:heart-glow-pulse 2.5s ease-in-out infinite;
  pointer-events:auto;
  cursor:pointer;
}
/* Tooltip — slides left */
.heart-btn::after{
  content:'Polub kadr';
  position:absolute;
  right:calc(100% + 8px);top:50%;
  transform:translateY(-50%) translateX(8px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  background:rgba(6,8,6,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(201,169,110,.35);
  border-radius:8px;
  padding:5px 10px;
  font-family:'Space Mono',monospace;font-size:8px;
  letter-spacing:.03em;
  color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  transition:opacity .3s cubic-bezier(.34,1.56,.64,1),transform .3s cubic-bezier(.34,1.56,.64,1);
}
.heart-btn.heart-active:hover::after,
.heart-btn.hearted:hover::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.heart-btn.hearted::after{
  content:'Polubione';
}@keyframes heart-glow-pulse{
  0%,100%{
    filter:drop-shadow(0 0 4px rgba(200,80,80,.4));
  }
  50%{
    filter:drop-shadow(0 0 6px rgba(200,80,80,.5)) drop-shadow(0 0 12px rgba(200,80,80,.3));
  }
}
/* Activation burst — played once on toggle via JS adding .heart-activate */
.heart-btn.heart-activate{
  animation:heart-activate-burst .45s ease-out forwards;
}
@keyframes heart-activate-burst{
  0%  {transform:scale(1);}
  30% {transform:scale(1.4);}
  60% {transform:scale(.9);}
  100%{transform:scale(1);}
}

/* ── Metadata pills — film info after reveal ─────────────────── */
.meta-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:.75rem;
}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:.3rem .7rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(6,6,6,.55);
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.04em;
  color:var(--muted);
  white-space:nowrap;
}
.pill-dir{border-color:rgba(201,169,110,.3);color:rgba(201,169,110,.85);}
.pill-year{border-color:rgba(140,180,220,.25);color:rgba(160,200,240,.8);}
.pill-country{border-color:rgba(120,200,160,.25);color:rgba(140,220,180,.8);}
.pill-genre{border-color:rgba(220,180,100,.25);color:rgba(240,200,120,.8);}
.meta-pills-row2{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}

.nbtn{--timer-progress:0;margin-top:.75rem;width:100%;background:linear-gradient(90deg,rgba(201,169,110,.18) calc(var(--timer-progress)*100%),transparent calc(var(--timer-progress)*100%));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;}

/* ── Summary Grid — 3 rows × 4 columns of session frames ── */
.summary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  width:100%;max-width:800px;
  margin:1.5rem auto;
}
.sg-cell{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  opacity:0;
  animation:sg-reveal .4s ease forwards;
  aspect-ratio:16/9;
}
.sg-cell.sg-ok{border:2px solid rgba(201,169,110,.5);}
.sg-cell.sg-miss{border:2px solid rgba(80,60,60,.4);}
.sg-cell img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.7);
}
.sg-cell.sg-ok img{filter:brightness(.85);}
.sg-cell.sg-miss img{filter:brightness(.35) saturate(.2) grayscale(.5);}
.sg-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.sg-icon{
  font-size:1.4rem;
  text-shadow:0 0 6px rgba(0,0,0,.8);
}
.sg-cell.sg-ok .sg-icon{color:#d4af37;}
.sg-cell.sg-miss .sg-icon{color:rgba(200,100,100,.7);}
@keyframes sg-reveal{
  from{opacity:0;transform:scale(.85);}
  to{opacity:1;transform:scale(1);}
}

/* ── XP Progress Bar ─────────────────────────────────────────── */
.xp-container{
  width:100%;max-width:800px;margin:2rem auto 1.5rem;
  text-align:center;
}
.xp-label{
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;
}
.xp-bar{
  width:100%;height:8px;
  background:rgba(255,255,255,.06);
  border-radius:4px;overflow:hidden;
  border:1px solid rgba(201,169,110,.15);
}
.xp-bar-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,#b8860b,#d4af37,#f0d060);
  border-radius:4px;
  transition:width 1.5s ease-out;
}
.xp-level{
  font-family:'Space Mono',monospace;font-size:8px;
  letter-spacing:.1em;color:var(--muted);
  margin-top:.5rem;
}
.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;}

/* ── 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;}
}


/* ── KARTA WIDZA — Golden Ticket + Profile Panel ─────────────── */

/* Golden Ticket — small inline icon, subtle */
.golden-ticket{
  background:none;border:none;
  font-size:1rem;line-height:1;
  cursor:pointer;opacity:.5;
  transition:opacity .15s ease,transform .15s ease;
  padding:2px 4px;
}
.golden-ticket:hover{opacity:.9;transform:scale(1.1);}

/* Setup-screen variant */
.golden-ticket--setup{font-size:.85rem;}

/* HUD variant — sits next to nick */
.golden-ticket--hud{font-size:.9rem;margin-right:2px;}

/* Profile Backdrop */
.profile-backdrop{
  position:fixed;inset:0;z-index:950;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.profile-backdrop.open{opacity:1;pointer-events:auto;}

/* Profile Panel — hero animation from small ticket to center panel */
.profile-panel{
  position:fixed;z-index:960;
  /* Start: small, positioned top-right (near HUD ticket) */
  top:12px;right:80px;
  width:40px;height:24px;
  opacity:0;
  transform:scale(0.15);
  transform-origin:top right;
  /* End state applied via .open */
  background:linear-gradient(180deg,#141414 0%,#0a0a0a 100%);
  border:1px solid rgba(201,169,110,.25);
  border-radius:16px;
  padding:2rem 1.5rem 1.5rem;
  box-shadow:0 12px 40px rgba(0,0,0,.8),0 0 60px rgba(201,169,110,.08);
  overflow:hidden;
  pointer-events:none;
  transition:
    top .5s cubic-bezier(.22,1.2,.36,1),
    right .5s cubic-bezier(.22,1.2,.36,1),
    width .5s cubic-bezier(.22,1.2,.36,1),
    height .5s cubic-bezier(.22,1.2,.36,1),
    transform .5s cubic-bezier(.22,1.2,.36,1),
    opacity .3s ease;
}
.profile-panel.open{
  top:50%;right:auto;
  left:50%;
  width:90%;max-width:380px;
  height:auto;min-height:320px;
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  pointer-events:auto;
}
/* Inner content hidden until panel opens */
.profile-panel > *{
  opacity:0;
  transition:opacity .2s ease .3s;
}
.profile-panel.open > *{opacity:1;}

/* Close button */
.profile-close{
  position:absolute;top:12px;right:14px;
  background:none;border:none;
  color:var(--muted);font-size:18px;cursor:pointer;
  transition:color .15s;
}
.profile-close:hover{color:var(--gold);}

/* Title */
.profile-title{
  font-family:'Cinzel',serif;font-size:1.1rem;font-weight:600;
  letter-spacing:.15em;text-align:center;
  color:var(--gold);margin-bottom:1rem;
}

/* Nick display */
.profile-nick-display{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  color:var(--text);text-align:center;margin-bottom:1.25rem;
  font-style:italic;
}

/* Stats */
.profile-stats{
  display:flex;justify-content:center;gap:2rem;
  margin-bottom:1.5rem;
}
.profile-stat{display:flex;flex-direction:column;align-items:center;gap:.25rem;}
.stat-value{
  font-family:'Space Mono',monospace;font-size:1.6rem;font-weight:700;
  color:var(--gold);
  text-shadow:0 0 8px rgba(201,169,110,.4);
}
.stat-label{
  font-family:'Space Mono',monospace;font-size:8px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
}

/* Nick change form */
.profile-nick-section-title{
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.75rem;text-align:center;
}
.profile-nick-input{
  width:100%;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:var(--r);padding:.6rem .875rem;
  color:var(--text);font-family:'Cormorant Garamond',serif;font-size:1rem;
  outline:none;transition:border-color .15s;
  margin-bottom:.5rem;
}
.profile-nick-input:focus{border-color:rgba(201,169,110,.4);}
.profile-nick-input:disabled{opacity:.5;cursor:not-allowed;}

.profile-nick-btn{
  width:100%;
  background:rgba(201,169,110,.08);
  border:1px solid rgba(201,169,110,.35);
  border-radius:var(--r);padding:.65rem;
  color:var(--gold);
  font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:all .12s;
}
.profile-nick-btn:hover{background:rgba(201,169,110,.15);border-color:var(--gold);}
.profile-nick-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Cooldown tape — red warning stripe */
.profile-cooldown{
  margin-top:.75rem;padding:.5rem .75rem;
  background:repeating-linear-gradient(135deg,rgba(180,40,40,.12) 0px,rgba(180,40,40,.12) 10px,transparent 10px,transparent 20px);
  border:1px solid rgba(180,40,40,.3);border-radius:var(--r);
  font-family:'Space Mono',monospace;font-size:8px;
  letter-spacing:.1em;color:rgba(220,80,80,.8);
  text-align:center;display:none;
}
.profile-cooldown.visible{display:block;}

/* Nick error */
.profile-nick-error{
  margin-top:.5rem;
  font-family:'Space Mono',monospace;font-size:9px;
  color:rgba(220,80,80,.8);text-align:center;
  min-height:1em;
}

/* Locked shake animation */
@keyframes locked-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-4px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}
.profile-nick-btn.shake{animation:locked-shake .3s ease;}

/* ── MOBILE OPTIMIZATION (max-width: 768px) ──────────────────── */
@media(max-width:768px){
  /* Cinematic Blur — blurred duplicate bg + contain frame on top */
  .bgf{
    background:var(--blur-bg, #000) center/cover no-repeat;
    filter:none;
  }
  .bgf::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:inherit;
    filter:blur(25px) brightness(0.35);
    transform:scale(1.15);
  }
  .bgf img{
    position:relative;z-index:1;
    object-fit:contain;
    object-position:center 15%;
    margin-top:6vh;
  }
  .bgf::after{z-index:2;}
  .bgf .vig{z-index:3;}

  /* Mobile Diet — HUD */
  .hud{padding:.5rem .75rem;}
  .hbrand{font-size:12px;}
  .hstats span{font-size:9px;}
  .hstats b{font-size:10px;}

  /* Mobile Diet — Result Card / Island */
  .qpanel{
    padding:1rem .85rem .85rem;
    bottom:3%;
    width:calc(100% - .75rem);
    max-height:58vh;
    border-radius:12px;
  }

  /* Mobile Diet — Answer buttons */
  .opt{padding:.4rem .6rem;font-size:10px;line-height:1.3;}
  .opt-winner{font-size:10px;}

  /* Mobile Diet — Pills (15% smaller, tighter) */
  .pill{font-size:7.5px;padding:.2rem .45rem;gap:3px;}
  .meta-pills{gap:4px;margin-top:.4rem;}
  .meta-pills-row2{gap:4px;margin-top:3px;}

  /* Mobile Diet — Next button */
  .nbtn{padding:.5rem;font-size:8px;margin-top:.5rem;}

  /* Znikajacy interfejs (UI hide) */
  .qpanel,.hud{
    transition:opacity .3s ease;
  }
  .qpanel.ui-hidden,.hud.ui-hidden{
    opacity:0;
    pointer-events:none;
  }
}

/* ── LOGIN MODAL ─────────────────────────────────────────────── */
.login-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.login-overlay.is-open{opacity:1;pointer-events:auto;}

.login-modal{
  background:rgba(15,15,15,.92);
  border:1px solid rgba(201,169,110,.2);
  border-radius:16px;
  padding:2.5rem 2rem 2rem;
  width:90%;max-width:360px;
  position:relative;
  box-shadow:0 16px 60px rgba(0,0,0,.7),0 0 40px rgba(201,169,110,.04);
  transform:scale(0.92) translateY(20px);
  transition:transform .4s cubic-bezier(.22,1.2,.36,1);
}
.login-overlay.is-open .login-modal{transform:scale(1) translateY(0);}

.login-close{
  position:absolute;top:14px;right:16px;
  background:none;border:none;color:var(--muted);
  font-size:22px;cursor:pointer;transition:color .15s;
}
.login-close:hover{color:var(--gold);}

.login-title{
  font-family:'Cinzel',serif;font-size:1.2rem;font-weight:600;
  letter-spacing:.12em;text-align:center;
  color:var(--gold);margin-bottom:.25rem;
}
.login-subtitle{
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.05em;text-align:center;
  color:var(--muted);margin-bottom:1.5rem;
}

.login-socials{display:flex;flex-direction:column;gap:10px;}

.login-social-btn{
  display:flex;align-items:center;gap:12px;
  padding:.85rem 1.2rem;
  background:#1a1a1a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  color:#eaeaea;
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.04em;
  text-decoration:none;
  transition:all .2s ease;
}
.login-social-btn:hover{background:#222;border-color:rgba(255,255,255,.15);}
.login-social--google:hover{border-color:rgba(255,255,255,.3);background:#1e1e1e;}
.login-social--discord:hover{border-color:rgba(88,101,242,.5);background:rgba(88,101,242,.08);}
.login-social--github:hover{border-color:rgba(255,255,255,.25);background:#222;}
.login-social-icon{flex-shrink:0;}

.login-divider{
  border-top:1px solid rgba(212,175,55,.2);
  margin:1.25rem 0;
}
.login-separator{
  border-top:1px solid rgba(212,175,55,.2);
  margin:1.25rem 0;
}

.login-social--soon{
  opacity:.4;pointer-events:none;position:relative;
}
.login-soon-badge{
  font-size:7px;letter-spacing:.1em;
  color:rgba(201,169,110,.6);margin-left:auto;
}

.login-form{display:flex;flex-direction:column;gap:10px;}
.login-input{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.7rem .9rem;
  color:var(--text);
  font-family:'Space Mono',monospace;font-size:11px;
  outline:none;transition:border-color .15s;
}
.login-input:focus{border-color:rgba(201,169,110,.4);}
.login-input::placeholder{color:var(--muted);opacity:.6;}

.login-submit{
  background:rgba(201,169,110,.1);
  border:1px solid rgba(201,169,110,.35);
  border-radius:8px;
  padding:.75rem;
  color:var(--gold);
  font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;transition:all .15s;
}
.login-submit:hover{background:rgba(201,169,110,.18);border-color:var(--gold);}

/* ── Login CTA + Guest Divider (Setup screen) ────────────────── */
.login-cta{
  display:block;width:100%;max-width:320px;margin:0 auto .75rem;
  padding:.85rem 1.5rem;
  background:rgba(201,169,110,.06);
  border:1px solid rgba(201,169,110,.4);
  border-radius:10px;
  color:var(--gold);
  font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;transition:all .15s;
}
.login-cta:hover{background:rgba(201,169,110,.12);border-color:var(--gold);}

.guest-divider{
  display:flex;align-items:center;gap:10px;
  margin:.5rem auto .75rem;max-width:320px;
  color:var(--muted);font-family:'Space Mono',monospace;font-size:8px;
  letter-spacing:.08em;
}
.guest-divider::before,.guest-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ── Logout Modal Actions ────────────────────────────────────── */
.logout-actions{
  display:flex;gap:10px;margin-top:1.5rem;
}
.logout-btn{
  flex:1;padding:.75rem;
  border-radius:8px;
  font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:all .15s;border:1px solid transparent;
}
.logout-btn--stay{
  background:rgba(255,255,255,.05);border-color:var(--border);
  color:var(--muted);
}
.logout-btn--stay:hover{background:rgba(255,255,255,.08);color:var(--text);}
.logout-btn--leave{
  width:100%;
  background:rgba(180,60,60,.12);border-color:rgba(180,60,60,.4);
  color:rgba(220,80,80,.9);
}
.logout-btn--leave:hover{background:rgba(180,60,60,.2);border-color:rgba(220,80,80,.6);}

/* ── Auth link gold variant (top-right login) ────────────────── */
.auth-link--gold{
  color:var(--gold) !important;
  font-weight:700;letter-spacing:.08em;
}
.auth-link--gold:hover{text-shadow:0 0 8px rgba(201,169,110,.4);}

/* ── Projector Light Overlay (WOW effect) ────────────────────── */
.projector-light-overlay{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse 40% 90% at 50% -5%,rgba(255,240,180,.25) 0%,rgba(255,220,100,.08) 40%,transparent 75%);
  filter:blur(20px);
  transition:opacity .4s ease;
}
.projector-light-overlay.active{
  opacity:1;
  animation:projector-flicker 0.12s ease-in-out 4 alternate;
}
@keyframes projector-flicker{
  0%  {opacity:.7;}
  25% {opacity:1;}
  50% {opacity:.85;}
  75% {opacity:1;}
  100%{opacity:.9;}
}

/* Fade out UI for projector effect */
.fade-out-ui{
  opacity:0 !important;
  transition:opacity .5s ease !important;
}

/* ── Cinematic Frame Button — visible border around entire screen ── */
.cinematic-frame-button{
  position:fixed;
  top:80px;left:2vw;right:2vw;bottom:45px;
  border:1px solid rgba(212,175,55,.25);
  border-radius:12px;
  cursor:pointer;
  z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:5vh;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.cinematic-frame-button:hover{
  border-color:rgba(212,175,55,.7);
  box-shadow:
    inset 0 0 40px rgba(212,175,55,.06),
    0 0 30px rgba(212,175,55,.08);
}
.cinematic-frame-button:active{
  border-color:rgba(212,175,55,.9);
  box-shadow:
    inset 0 0 60px rgba(212,175,55,.1),
    0 0 50px rgba(212,175,55,.12);
}
.frame-btn-label{
  font-family:'Space Mono',monospace;
  font-size:9px;font-weight:700;
  letter-spacing:4px;
  color:rgba(212,175,55,.7);
  text-transform:uppercase;
  text-shadow:0 0 8px rgba(212,175,55,.2);
  padding:.8rem 2rem;
  border:none;
  box-shadow:0 0 20px rgba(212,175,55,.12),0 0 40px rgba(212,175,55,.06);
  border-radius:8px;
  transition:all .4s ease-out;
}
.cinematic-frame-button:hover .frame-btn-label{
  color:rgba(212,175,55,1);
  text-shadow:0 0 12px rgba(212,175,55,.5),0 0 24px rgba(212,175,55,.2);
  box-shadow:0 0 30px rgba(212,175,55,.2),0 0 60px rgba(212,175,55,.1);
  animation:btn-pulse 1.5s ease-in-out infinite;
}
@keyframes btn-pulse{
  0%,100%{box-shadow:0 0 20px rgba(212,175,55,.15),0 0 40px rgba(212,175,55,.08);}
  50%{box-shadow:0 0 35px rgba(212,175,55,.25),0 0 70px rgba(212,175,55,.12);}
}

/* Nick input sits above frame so it's typeable */
.nick-input{position:relative;z-index:100;}
.nick-error{position:relative;z-index:100;}
.scores-link{position:fixed;z-index:100;top:25px;left:40px;}
.auth-bar{position:fixed;top:25px;right:40px;z-index:100;}
.setup-form{position:relative;z-index:100;}

/* ── Implode UI Animation ────────────────────────────────────── */
.implode-ui{
  animation:implode .5s cubic-bezier(.55,.06,.68,.19) forwards;
}
@keyframes implode{
  0%  {opacity:1;transform:scale(1);}
  40% {opacity:.6;transform:scale(.8);}
  100%{opacity:0;transform:scale(.05);}
}

/* Projector beam expanding from center */
.projector-light-overlay.beam-expand{
  opacity:1;
  background:radial-gradient(circle at 50% 50%,rgba(255,220,100,.35) 0%,rgba(201,169,110,.15) 30%,transparent 70%);
  animation:beam-grow 1.5s ease-out forwards,projector-flicker 0.1s ease-in-out 8 alternate;
}
@keyframes beam-grow{
  0%  {transform:scale(0.05);opacity:1;}
  40% {transform:scale(0.6);opacity:1;}
  100%{transform:scale(3);opacity:0;}
}

/* ── Login Modal Tabs ────────────────────────────────────────── */
.login-tabs{
  display:flex;gap:0;margin-bottom:1.25rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.login-tab{
  flex:1;padding:.7rem 0;
  background:none;border:none;border-bottom:2px solid transparent;
  font-family:'Space Mono',monospace;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;
  transition:color .2s,border-color .2s;
}
.login-tab:hover{color:var(--text);}
.login-tab--active{
  color:var(--gold);
  border-bottom-color:rgba(212,175,55,.6);
}
/* Form visibility with smooth animation */
.login-form--hidden{
  display:none;
  opacity:0;
  max-height:0;
  overflow:hidden;
}
.login-form--visible{
  display:flex !important;
  opacity:1;
  max-height:400px;
  animation:form-reveal .3s ease-out;
}
@keyframes form-reveal{
  from{opacity:0;max-height:0;transform:translateY(-8px);}
  to{opacity:1;max-height:400px;transform:translateY(0);}
}

/* ── MOBILE: Setup Screen Fixes (max-width: 768px) ──────────── */
@media(max-width:768px){
  /* ZAPAL PROJEKTOR — prevent line break */
  .frame-btn-label{
    font-size:7px;letter-spacing:2px;
    padding:.6rem 1rem;
    background:none !important;
  }
  .cinematic-frame-button{
    top:60px;left:3vw;right:3vw;bottom:35px;
    padding-bottom:3vh;
  }

  /* Copyright — hide or minimize */
  .scred{font-size:0.5rem;bottom:5px;right:10px;opacity:.25;}

  /* Top navigation — safe area */
  .scores-link{top:20px;left:15px;font-size:7px;}
  .auth-bar{top:20px;right:15px;font-size:7px;}
  .auth-bar .auth-status{display:none;}

  /* Title — smaller for mobile */
  .brand{font-size:2.2rem !important;}
  .tagline{font-size:8px !important;max-width:90%;line-height:1.4;letter-spacing:.12em !important;}

  /* Input field */
  .nick-input{font-size:1rem;padding:.6rem .75rem .5rem;}

  /* Setup padding adjustment */
  #setup{padding:60px 1rem 2rem;}
}