/* ==================================================================
   BILO — ulazna brava. Isti brend tokeni kao igra.
   ================================================================== */
:root{
  --cream:#F5F0EB; --ink:#2C2C2C; --ink-60:rgba(44,44,44,.60);
  --ink-40:rgba(44,44,44,.40); --ink-13:rgba(44,44,44,.13);
  --red:#EE2938; --black:#101010;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(1.25rem,5vw,2rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--serif); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; -webkit-tap-highlight-color:transparent;
}
img{ display:block; max-width:100%; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.lock{
  position:relative; z-index:1;
  width:100%; max-width:30rem; margin-inline:auto;
  min-height:100dvh;
  padding:calc(2rem + var(--safe-t)) var(--pad) calc(8rem + var(--safe-b));
  display:flex; flex-direction:column; justify-content:center;
  animation:rise .5s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } }

/* .lock je flex column — bez align-self slika se rastegne po širini
   i logo izgubi omjer. */
.lock__logo{ height:88px; width:auto; align-self:flex-start; margin:0 0 1.9rem; }

.eyebrow{
  font-family:var(--sans); font-size:.62rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-40); margin:0 0 1rem;
}
.display{
  font-weight:700; font-size:clamp(2.2rem,10vw,3rem); line-height:1.04;
  letter-spacing:-.02em; margin:0 0 1rem;
}
.body-copy{
  font-family:var(--sans); font-size:.9rem; line-height:1.7;
  color:var(--ink-60); margin:0 0 2rem; max-width:30ch;
}

/* ---- polje za ključ ---- */
.key{ display:grid; gap:.55rem; }
.key__input{
  width:100%; background:#fff; border:1px solid var(--ink-13); border-radius:14px;
  padding:1.15rem 1.2rem;
  font-family:var(--sans); font-size:1.15rem; font-weight:600;
  letter-spacing:.22em; text-align:center; text-transform:uppercase;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.key__input::placeholder{ color:var(--ink-13); letter-spacing:.22em; font-weight:500; }
.key__input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(44,44,44,.06); }
.key__input.is-bad{ border-color:var(--red); animation:shake .4s var(--ease); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); } 80%{ transform:translateX(2px); }
}
.key__err{
  font-family:var(--sans); font-size:.8rem; color:var(--red);
  margin:.1rem 0 0; text-align:center;
}

.btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:3.5rem; padding:1rem 1.75rem;
  font-family:var(--sans); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px; transition:background .22s var(--ease), transform .16s var(--ease);
}
.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:#1A1A1A; }
.btn:active{ transform:scale(.978); }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.lock__buy{
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  color:var(--ink-40); text-decoration:none; margin-top:1.6rem;
  border-bottom:1px solid transparent; align-self:flex-start; padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lock__buy:hover{ color:var(--red); border-color:var(--red); }

/* ---- špil na dnu ---- */
.fan{
  position:fixed; left:0; right:0; bottom:0; z-index:0;
  height:6.6rem; pointer-events:none;
}
.fan__card{
  position:absolute; left:50%; bottom:-5.5rem;
  width:7.2rem; margin-left:-3.6rem; aspect-ratio:5/7;
  background:var(--black); border-radius:12px;
  display:grid; justify-items:center; align-content:start; padding-top:.85rem;
  box-shadow:0 -12px 30px -20px rgba(44,44,44,.5);
  animation:fanIn .75s var(--ease) both;
}
.fan__card img{ width:26%; filter:invert(1); opacity:.9; }
.fan__card--l{ transform:translate(-4.15rem,.75rem) rotate(-15deg); animation-delay:.1s; }
.fan__card--r{ transform:translate( 4.15rem,.8rem)  rotate( 14deg); animation-delay:.17s; }
.fan__card--c{ transform:translate(0,-.1rem)        rotate(-1.5deg); animation-delay:.24s; }
@keyframes fanIn{ from{ opacity:0; transform:translate(0,4rem) rotate(0deg); } }

/* otključano — špil se razlijeće dok se igra učitava */
body.is-open .fan__card--l{ transform:translate(-13rem,3rem) rotate(-42deg); opacity:0; transition:all .55s var(--ease); }
body.is-open .fan__card--r{ transform:translate( 13rem,3rem) rotate( 40deg); opacity:0; transition:all .55s var(--ease); }
body.is-open .fan__card--c{ transform:translate(0,5rem) rotate(4deg);        opacity:0; transition:all .55s var(--ease) .06s; }
body.is-open .lock{ opacity:0; transform:translateY(-8px); transition:all .4s var(--ease); }

@media (max-height:700px){
  .lock__logo{ height:66px; margin-bottom:1.3rem; }
  .lock{ padding-bottom:6.5rem; }
  .fan{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}