/* ==========================================================================
   V5 – Hádanková stezka: velké živé karty (docs/STYLE_GUIDE.md → Hádanky)
   Loaded last. Card size (--side) and columns (--c) come from lgFit() in index.html.
   ========================================================================== */

/* ---------- pictures: sharp SVG from img/ at any size, the emoji only until it loads ---------- */
#logic .lg-em{position:relative}
#logic .lg-em>img{position:absolute;left:0;top:0;width:1em;height:1em;opacity:0;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
#logic .lg-em.im>img{position:static;display:block;opacity:1}
#logic .lg-em.im>.lg-fb{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#logic .lg-slot .lg-em{font-size:1em}

/* ---------- layout: the cards fill the free space ---------- */
#logic .lg-field{gap:14px;padding:4px 14px 14px}
#logic .lg-field.in{animation:none}
#logic .lg-choices{
  width:auto;max-width:none;
  grid-template-columns:repeat(var(--c,2),var(--side,120px));
  grid-auto-rows:var(--sideh,var(--side,120px));
  gap:12px;justify-content:center;
}
@media (min-width:600px) and (min-height:600px){#logic .lg-choices{gap:18px}}
/* 3 cards as 2 + 1: the last one sits in the middle */
#logic .lg-choices.odd-last .lg-card:last-child{grid-column:1/-1;justify-self:center}

/* ---------- the card: soft pastel tile, white rim, light from the top left ---------- */
#logic .lg-card{
  --t1:#FFF3FA;--t2:#FFD3EA;--tg:rgba(255,143,196,.42);
  --pic:calc(var(--side,120px) * .6);
  position:relative;isolation:isolate;
  width:var(--side,120px);height:var(--sideh,var(--side,120px));min-height:0;padding:0;
  display:grid;place-items:center;overflow:visible;
  border-radius:clamp(20px,calc(var(--side,120px) * .17),40px);
  border:3px solid rgba(255,255,255,.96);
  background:
    radial-gradient(110% 80% at 28% 8%,rgba(255,255,255,.95) 0 16%,rgba(255,255,255,0) 52%),
    linear-gradient(160deg,var(--t1) 0%,var(--t2) 100%);
  box-shadow:0 14px 26px -8px var(--tg),0 3px 8px rgba(76,62,104,.07),inset 0 -5px 0 rgba(255,255,255,.4);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1),opacity .3s ease,filter .3s ease,box-shadow .3s ease;
  animation:lgIn .46s cubic-bezier(.3,1.45,.55,1) backwards;
  animation-delay:calc(80ms + var(--i,0) * 70ms);
}
#logic .lg-card:nth-child(4n+2){--t1:#F1F8FF;--t2:#C9E5FF;--tg:rgba(105,165,235,.42)}
#logic .lg-card:nth-child(4n+3){--t1:#EEFCF8;--t2:#BCEEE5;--tg:rgba(64,182,160,.38)}
#logic .lg-card:nth-child(4n+4){--t1:#FFFCEC;--t2:#FFE9A3;--tg:rgba(232,180,48,.40)}
/* colour task: neutral cards, so the background never answers "what is red?" */
#logic .lg-choices.plain .lg-card{--t1:#FFFFFF;--t2:#F1ECFF;--tg:rgba(110,90,160,.24)}

/* ---------- the picture: big, slowly floating, with a soft shadow on the "floor" ---------- */
#logic .lg-pic{
  position:relative;display:grid;place-items:center;width:100%;height:100%;
  animation:lgFloat 5.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.7s);
}
#logic .lg-card .lg-em{
  font-size:calc(var(--pic) * var(--k,1));line-height:1;
  filter:drop-shadow(0 calc(var(--side,120px) * .03) calc(var(--side,120px) * .025) rgba(74,52,110,.2));
}
#logic .lg-card::before{
  content:"";position:absolute;z-index:-1;left:50%;top:calc(50% + var(--pic) * .46);
  width:calc(var(--pic) * .74);height:calc(var(--pic) * .13);border-radius:50%;
  background:radial-gradient(closest-side,rgba(74,52,110,.2),rgba(74,52,110,0));
  transform:translate(-50%,-50%);
  animation:lgShadow 5.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.7s);
}
#logic .lg-choices.tall .lg-card::before{display:none}
/* big & small: the pictures stand on the same floor line, so the sizes are easy to compare */
#logic .t-big .lg-pic{align-items:end;padding-bottom:16%;box-sizing:border-box}
/* where is more: groups of pictures, the same size in both cards (smaller only when a group is big) */
#logic .lg-card .lg-group{--gs:.27;max-width:calc(var(--side,120px) * .8);gap:calc(var(--side,120px) * .03)}
#logic .lg-choices:has(.lg-em:nth-child(4)) .lg-group{--gs:.23;max-width:calc(var(--side,120px) * .6)}
#logic .lg-choices:has(.lg-em:nth-child(5)) .lg-group{--gs:.2;max-width:calc(var(--side,120px) * .8)}
#logic .lg-card .lg-group .lg-em{font-size:calc(var(--side,120px) * var(--gs))}

/* ---------- question picture ---------- */
#logic .lg-q{animation:lgIn .42s cubic-bezier(.3,1.45,.55,1) backwards}
#logic .lg-q .lg-em.big{font-size:min(30vw,130px,19vh)}

/* ---------- correct: the card glows green, the picture jumps for joy, the others step back ---------- */
#logic .lg-card.hint{
  box-shadow:0 0 0 calc(var(--side,120px) * .035) rgba(255,216,107,.95),0 0 26px 6px rgba(255,216,107,.5),0 14px 26px -8px var(--tg);
  animation:lgHint 1s ease-in-out 2;
}
#logic .lg-card.hint .lg-pic{animation:lgNudge 1s ease-in-out 2}
#logic .lg-card.ok{
  --t1:#F0FFF5;--t2:#A6E8BF;--tg:rgba(52,170,110,.45);
  background:
    radial-gradient(110% 80% at 28% 8%,rgba(255,255,255,.95) 0 16%,rgba(255,255,255,0) 52%),
    linear-gradient(160deg,var(--t1) 0%,var(--t2) 100%);
  border-color:#fff;
  box-shadow:0 0 0 calc(var(--side,120px) * .03) rgba(127,214,163,.55),0 16px 30px -8px var(--tg);
  animation:lgOk .55s cubic-bezier(.3,1.5,.55,1);
}
#logic .lg-card.ok .lg-pic{animation:lgJoy .95s cubic-bezier(.3,1.25,.5,1)}
#logic .lg-card.ok::before{animation:none;opacity:.5}
#logic .lg-choices.solved .lg-card:not(.ok){opacity:.42;transform:scale(.93);filter:saturate(.5)}
#logic .lg-choices.solved .lg-card:not(.ok) .lg-pic{animation:none}

/* ---------- wrong: a gentle "no-no" wobble, then the card fades a little (no punishment) ---------- */
#logic .lg-card.bad{opacity:.5;transform:scale(.94);filter:saturate(.45)}
#logic .lg-card.bad .lg-pic{animation:lgNope .5s ease}
#logic .lg-card.bad::before{animation:none}

@keyframes lgIn{0%{opacity:0;transform:translateY(16px) scale(.86)}55%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes lgFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3.5%) rotate(1.5deg)}}
@keyframes lgShadow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(.84);opacity:.65}}
@keyframes lgOk{0%{transform:scale(1)}35%{transform:scale(1.07)}65%{transform:scale(.98)}100%{transform:scale(1)}}
@keyframes lgJoy{0%{transform:none}22%{transform:translateY(-16%) scale(1.14) rotate(-9deg)}44%{transform:translateY(0) scale(1.06,.94)}62%{transform:translateY(-7%) scale(1.04) rotate(7deg)}80%{transform:translateY(0) scale(.98,1.02) rotate(-2deg)}100%{transform:none}}
@keyframes lgNope{0%,100%{transform:none}18%{transform:translateX(-4%) rotate(-11deg)}36%{transform:translateX(4%) rotate(10deg)}54%{transform:translateX(-2.5%) rotate(-6deg)}72%{transform:translateX(1.5%) rotate(3deg)}}
@keyframes lgHint{50%{transform:scale(1.05)}}
@keyframes lgNudge{0%,100%{transform:none}30%{transform:translateY(-10%) rotate(-5deg)}60%{transform:translateY(0) rotate(4deg)}}

/* ---------- phone on its side: question picture on the left, cards on the right (a row of pictures stays on top) ---------- */
@media (orientation:landscape) and (max-height:520px){
  #logic .lg-field.has-q:not(.q-row){flex-direction:row;gap:18px}
}

@media (prefers-reduced-motion:reduce){
  #logic .lg-card,#logic .lg-q,#logic .lg-pic,#logic .lg-card::before,#logic .lg-card.ok,#logic .lg-card.hint,
  #logic .lg-card.ok .lg-pic,#logic .lg-card.bad .lg-pic,#logic .lg-card.hint .lg-pic{animation:none!important}
  #logic .lg-card{transition:opacity .2s ease,filter .2s ease}
}