@font-face{font-family:Lalezar;src:url(/fonts/lalezar.woff2) format("woff2");font-display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0e9488;overscroll-behavior:none}
body{font-family:Lalezar,"Arial Rounded MT Bold",sans-serif;color:#fff;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
img{-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
:root{--top:max(10px,env(safe-area-inset-top));--bot:max(10px,env(safe-area-inset-bottom));--band:76px}

/* the video's background: radial colour pair + soft rays, one pair per screen/round */
#bg{position:fixed;inset:0;overflow:hidden;--in:#6ff0dc;--out:#0e9488;
  background:radial-gradient(circle at 50% 55%,var(--in) 0%,var(--out) 78%);transition:background .5s}
#rays{position:absolute;left:50%;top:55%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;
  background:repeating-conic-gradient(rgba(255,255,255,.09) 0 15deg,transparent 15deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 4vmax,#000 40vmax);mask:radial-gradient(circle,transparent 4vmax,#000 40vmax);
  animation:spin 120s linear infinite;will-change:transform}
@keyframes spin{to{transform:rotate(360deg)}}

/* every screen is exactly the visible screen; screens with a top bar keep a band for the buttons and the title */
.screen{position:fixed;left:0;right:0;top:0;height:100%;height:100dvh;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--top) 12px var(--bot);gap:12px;overflow:hidden}
.screen.on{display:flex;animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.screen.bar-top{padding-top:calc(var(--top) + var(--band));justify-content:flex-start}

/* yellow title with a dark outline, like the video */
.ttl{margin:0;font-weight:400;color:#FFE03A;font-size:clamp(30px,8.5vmin,74px);line-height:1.15;text-align:center;
  -webkit-text-stroke:.16em #4a2300;paint-order:stroke fill;text-shadow:0 .07em 0 #4a2300,0 .14em .12em rgba(0,0,0,.25)}
.ttl.big{font-size:clamp(50px,13vmin,120px)}
/* the title sits IN the top band, between the two corner buttons, never under them */
.bar-top>.ttl{position:absolute;top:var(--top);left:84px;right:84px;height:64px;display:flex;align-items:center;justify-content:center;
  font-size:clamp(28px,8.6vmin,58px);white-space:nowrap;overflow:hidden}

.corner{position:absolute;top:var(--top);right:12px;z-index:5}
.home-btn{width:62px;height:62px;border-radius:50%;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18);display:grid;place-items:center}
.home-btn svg{width:58%;height:58%;fill:none;stroke:#4a2300;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
button:active{transform:translateY(3px) scale(.97)}

/* HOME */
.lumi-home{height:min(34dvh,330px);animation:bob 2.4s ease-in-out infinite;filter:drop-shadow(0 10px 10px rgba(0,0,0,.2));cursor:pointer}
@keyframes bob{50%{transform:translateY(-10px) rotate(-2deg)}}
.two{display:flex;gap:14px;width:min(720px,100%);justify-content:center}
.big-btn{flex:1;min-width:0;max-width:340px;background:#fff;border-radius:28px;padding:14px 10px 12px;box-shadow:0 8px 0 rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:#4a2300}
.big-btn .lbl{font-size:clamp(19px,5.2vmin,38px);line-height:1.1;white-space:nowrap}
.big-btn .icon{width:min(24vmin,16dvh,130px);height:min(24vmin,16dvh,130px);border-radius:50%;background:#2e7dff;display:grid;place-items:center;box-shadow:inset 0 -8px 0 rgba(0,0,0,.15)}
.big-btn .icon svg{width:62%;height:62%;fill:#fff;stroke:#fff}
.fan{position:relative;width:min(30vmin,20dvh,160px);height:min(24vmin,16dvh,130px)}
.fan img{position:absolute;top:8%;width:62%;border-radius:14px;border:4px solid #fff;box-shadow:0 4px 8px rgba(0,0,0,.25)}
.fan img:nth-child(1){left:0;transform:rotate(-12deg)}
.fan img:nth-child(2){right:0;transform:rotate(12deg)}
.fan img:nth-child(3){left:19%;top:0;z-index:2}

/* CHALLENGES: tile size is measured to the free space (fitMenu), so all six always show */
.tiles{display:grid;grid-template-columns:repeat(var(--cols,2),var(--tw,150px));gap:var(--gap,12px);margin:auto 0}
.tile{position:relative;background:#fff;border-radius:22px;padding:7px 7px 2px;box-shadow:0 6px 0 rgba(0,0,0,.18);color:#4a2300;
  display:flex;flex-direction:column;align-items:center;width:var(--tw,150px)}
.tile>img,.mix{width:100%;aspect-ratio:1;border-radius:16px;object-fit:cover;display:block}
.tile .lbl{font-size:calc(var(--tw,150px)*.16);line-height:1.35;white-space:nowrap}
.mix{display:grid;grid-template-columns:1fr 1fr;gap:3px;overflow:hidden}
.mix img{width:100%;height:100%;object-fit:cover}
.tile.rnd{background:#FFE03A}
.shuf{position:absolute;top:calc(7px + (var(--tw,150px) - 14px)/2);left:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1;border-radius:50%;
  background:#ff3b7f;display:grid;place-items:center;border:4px solid #fff}
.shuf svg{width:70%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* PLAY: cards measured to the free space (fitCards) */
#play{gap:6px}
.buddy{position:absolute;top:var(--top);left:12px;width:62px;height:62px;border-radius:50%;background:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.18);overflow:hidden;z-index:6}
.buddy img{width:100%;height:100%;object-fit:cover}
.buddy.cheer{animation:jump .6s cubic-bezier(.3,1.6,.5,1)}
.stars{display:flex;gap:6px;direction:ltr;min-height:16px;flex:none}
.stars i{width:16px;height:16px;background:rgba(255,255,255,.45);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.on{background:#FFE03A}.stars i.new{animation:starpop .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes starpop{from{transform:scale(2.6) rotate(-90deg)}}
.cards{direction:ltr;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:var(--cg,14px);--s:150px}
.cards.col{flex-direction:column}
.cards.tri{flex-wrap:wrap;align-content:center;width:var(--trw);max-width:100%}
.card{position:relative;flex:none;width:var(--s);height:var(--s);background:#fff;border-radius:7%;padding:3.2%;
  box-shadow:0 10px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(30px) scale(.85);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .25s,box-shadow .3s}
.card.in{opacity:1;transform:none}
.card img.pic{width:100%;height:100%;object-fit:cover;border-radius:5%;display:block;pointer-events:none}
.badge{position:absolute;left:-8px;top:-8px;width:max(30px,18%);aspect-ratio:1;border-radius:50%;border:3px solid #fff;
  display:grid;place-items:center;font-family:Lalezar,sans-serif;font-size:max(16px,calc(var(--s)*.1));line-height:1;color:#fff}
.card:nth-child(1) .badge{background:#2e7dff}.card:nth-child(2) .badge{background:#ff9f0a}.card:nth-child(3) .badge{background:#ff3b7f}
.card.in.wait{animation:breathe 1.8s ease-in-out infinite}
.card.in.wait:nth-child(2){animation-delay:.3s}.card.in.wait:nth-child(3){animation-delay:.6s}
@keyframes breathe{50%{transform:scale(1.03) rotate(.5deg)}}
.card.mine{z-index:2;box-shadow:0 0 0 6px #FFE03A,0 0 24px 10px rgba(255,226,60,.9);animation:jump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{30%{transform:translateY(-16px) scale(1.08)}}
.card.win{box-shadow:0 0 0 6px #FFE03A,0 0 24px 10px rgba(255,226,60,.9);animation:wiggle .5s ease-in-out 2}
@keyframes wiggle{25%{transform:rotate(-3deg) scale(1.04)}75%{transform:rotate(3deg) scale(1.04)}}
/* Lumi's pick: his face sits INSIDE the card's corner so it never leaves the screen */
.lumi-face{position:absolute;right:4%;top:4%;width:30%;border-radius:50%;background:#fff;border:3px solid #fff;
  box-shadow:0 4px 8px rgba(0,0,0,.3);animation:drop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{transform:translateY(-40px) scale(.4);opacity:0}}
.wow{position:absolute;left:50%;bottom:4%;transform:translateX(-50%) rotate(-6deg);font-family:Lalezar,sans-serif;font-size:calc(var(--s)*.17);
  color:#FFE03A;-webkit-text-stroke:.14em #4a2300;paint-order:stroke fill;white-space:nowrap;direction:rtl;unicode-bidi:isolate;animation:wowin .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes wowin{from{transform:translateX(-50%) scale(0) rotate(-30deg)}}
.bar{flex:none;width:min(900px,92%);height:14px;border-radius:8px;background:rgba(255,255,255,.85);overflow:hidden}
#prog{height:100%;width:0;background:#FFC21A;border-radius:8px}

/* TALK: no buttons except home; Lumi fills the free space */
#talk{justify-content:flex-end}
.stage{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center}
.lumi-talk{position:relative;z-index:1;height:100%;max-width:88vw;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.25));cursor:pointer}
.ring{position:absolute;bottom:-6px;left:50%;width:min(64vw,36dvh);height:6dvh;margin-left:calc(min(64vw,36dvh)/-2);border-radius:50%;
  background:rgba(255,255,255,.35);transition:transform .08s}
.hint{flex:none;margin:6px 0 0;font-size:clamp(20px,5.4vmin,34px);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25);text-align:center;min-height:1.35em}
.poked{animation:wiggle .5s ease-in-out}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}