/* Az ajándékdoboz: a játék végképernyője és a kezdőlapi próbajáték is ezt használja,
   ezért külön fájlban van. A színeket a befoglaló lap változói adják (--acc, --line...). */

/* a doboz teste és fedele külön elem, hogy a fedél tényleg felnyílhasson */
.dobozgomb{position:relative;display:block;width:150px;height:132px;margin:0 auto;padding:0;
  animation:dobozlebeg 2.6s ease-in-out infinite;transition:filter .2s}
.dobozgomb:hover{filter:brightness(1.12)}
.dobozgomb:active .dbfedel{transform:translateY(-4px)}
.dbtest{position:absolute;left:14px;right:14px;bottom:0;height:80px;border-radius:9px;
  background:linear-gradient(165deg,#f7a440,#c8761c 58%,#8a4d10);
  box-shadow:inset 0 -10px 20px #00000066,0 16px 34px -14px #000}
.dbszalag{position:absolute;left:50%;top:0;bottom:0;width:22px;margin-left:-11px;
  background:linear-gradient(180deg,#ffe9a8,#ffd166);box-shadow:0 0 12px -4px #ffd166}
.dbfedel{position:absolute;left:0;right:0;top:34px;height:34px;border-radius:8px;
  background:linear-gradient(165deg,#ffe1a0,#f7a440);
  box-shadow:0 8px 18px -8px #000, inset 0 2px 0 #fff6;
  transform-origin:14% 100%;transition:transform .55s cubic-bezier(.2,1.35,.4,1)}
.dbmasni{position:absolute;left:50%;top:-17px;width:38px;height:24px;margin-left:-19px;
  border-radius:52% 52% 38% 38%;background:radial-gradient(circle at 50% 35%,#ffe9a8,#f0982e);
  box-shadow:0 5px 12px -5px #000}
.dbfeny{position:absolute;left:50%;top:44px;width:8px;height:8px;margin-left:-4px;
  border-radius:50%;background:#fff;opacity:0}
.dbszam{position:absolute;top:24px;right:2px;min-width:26px;height:26px;border-radius:99px;
  background:var(--acc);color:#12151d;font-weight:800;font-size:13.5px;
  display:grid;place-items:center;padding:0 7px;box-shadow:0 6px 14px -6px #000;z-index:3}

.dobozgomb.nyitva .dbfedel{transform:translate(-11px,-27px) rotate(-23deg)}
.dobozgomb.nyitva .dbfeny{animation:dbfeny 1s ease-out}
.dobozgomb.razas{animation:dobozrazas .45s}
.dobozgomb.ures{animation:none;opacity:.4;cursor:default}
.dobozgomb.ures .dbszam{display:none}

@keyframes dobozlebeg{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dbfeny{
  0%{opacity:0;box-shadow:0 0 0 0 #ffd166}
  25%{opacity:1;box-shadow:0 0 70px 30px rgba(255,209,102,.85)}
  100%{opacity:0;box-shadow:0 0 110px 60px rgba(255,209,102,0)}
}
@keyframes dobozrazas{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-7deg)} 45%{transform:rotate(6deg)}
  70%{transform:rotate(-4deg)} 88%{transform:rotate(3deg)}
}

.dbszoveg{display:inline-block;font-size:12px;color:var(--dim);margin-top:14px;
  padding:5px 14px;border-radius:99px;
  background:rgba(9,11,16,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);box-shadow:0 12px 26px -14px #000}
.dbnyeremeny{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.dbsor{display:grid;grid-template-columns:26px 1fr;gap:4px 10px;text-align:left;
  padding:11px 14px;border-radius:12px;
  background:linear-gradient(180deg,#232838,#1a1e28);
  border:1px solid rgba(255,209,102,.4);
  box-shadow:0 18px 40px -18px #000,0 0 30px -18px var(--acc)}
.dbsor.be{animation:be .4s ease-out}
.dbsor .dbikon{font-size:19px;grid-row:span 2}
.dbsor .dbnev{font-weight:800;font-size:13.5px;color:var(--acc)}
.dbsor .dble{font-size:12px;color:var(--dim);line-height:1.35}

/* a doboz mögött az egész lap elhomályosodik, hogy a jutalomra essen a figyelem */
.jutalomhomaly{position:fixed;inset:0;z-index:155;pointer-events:none;
  background:rgba(6,8,12,.55);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:homalybe .45s ease-out}
@keyframes homalybe{from{opacity:0}}
.jutalomhomaly.eltunik{opacity:0;transition:opacity .3s ease-in}

.jutalompanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:160;
  width:min(400px,calc(100% - 32px));max-height:calc(100vh - 32px);
  text-align:center;pointer-events:none;
  animation:jutalombe .5s cubic-bezier(.2,1.2,.4,1)}
.jutalompanel > *{pointer-events:auto}
@keyframes jutalombe{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}
.jutalompanel.eltunik{opacity:0;transform:translate(-50%,-54%) scale(.96);transition:.3s ease-in}
.dbkesz{margin-top:14px;width:100%;padding:11px;border-radius:11px;font-weight:700;font-size:13px;
  background:linear-gradient(180deg,#232838,#1a1e28);border:1px solid var(--line2);color:var(--txt);
  box-shadow:0 16px 34px -16px #000;transition:.15s}
.dbkesz:hover{border-color:var(--acc);color:var(--acc)}
.jutalompanel .cim{display:inline-block;font-weight:800;font-size:16px;margin-bottom:30px;
  padding:8px 18px;border-radius:99px;color:var(--acc);
  background:rgba(9,11,16,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,209,102,.4);box-shadow:0 16px 34px -16px #000,0 0 26px -14px var(--acc)}

/* ---- Alacsony képernyő (mobil, főleg fekvő tájolásban) --------------------
   A doboz belső részei fix képpontos abszolút pozíciók, a gombon pedig lebegő
   transform-animáció fut - ezért a méretet nem elemenként állítjuk (az szétesne),
   hanem a `zoom` kicsinyíti arányosan az egészet, animációval együtt.
   A panel körüli térközök külön szorulnak, ott nyerhető a legtöbb hely. */
@media (max-height:700px){
  .dobozgomb{zoom:.78}
  .jutalompanel .cim{font-size:14px;margin-bottom:14px;padding:6px 14px}
  .dbszoveg{font-size:11.5px;margin-top:9px;padding:4px 12px}
  .dbnyeremeny{gap:5px;margin-top:7px}
  .dbsor{padding:8px 11px}
  .dbkesz{margin-top:9px;padding:9px;font-size:12.5px}
}
@media (max-height:520px){
  .dobozgomb{zoom:.6}
  .jutalompanel{width:min(340px,calc(100% - 24px))}
  .jutalompanel .cim{font-size:12.5px;margin-bottom:8px;padding:4px 12px}
  .dbszoveg{font-size:11px;margin-top:6px;padding:3px 10px}
  .dbnyeremeny{gap:4px;margin-top:5px}
  .dbsor{padding:6px 10px;grid-template-columns:22px 1fr;gap:2px 8px}
  .dbsor .dbikon{font-size:16px}
  .dbsor .dbnev{font-size:12.5px}
  .dbsor .dble{font-size:11px;line-height:1.3}
  .dbkesz{margin-top:7px;padding:8px;font-size:12px}
}