/* Loynova Trivia — player web portal styles (mirrors the design canvas) */
:root{
  --bg:#F2F8FD; --blue:#1747E6; --navy:#0B1A6B; --ink2:#3A4A86; --muted:#7D8BB8;
  --line:#DCE9FB; --soft:#F7FAFF; --soft2:#EEF4FE; --chip:#E3ECFD;
  --coral:#FF5A3C; --coral-soft:#FFF1EC; --coral-line:#FFD6CB;
  --green:#1F9D5B; --green-soft:#E6F6ED; --green-line:#8FD3AE;
  --red:#D63B3B; --red-soft:#FDECEC;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);-webkit-text-size-adjust:100%}
body{font-family:Figtree,system-ui,-apple-system,sans-serif;color:var(--navy);-webkit-tap-highlight-color:transparent}
button,input{font-family:inherit}
a{color:var(--blue)}
img{display:block}
#app{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}
.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--bg)}
.pad{padding:22px 20px 0;flex:none;display:flex;flex-direction:column}
.topbar{width:100%;height:52px;display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.logo{width:190px;height:36px}
.iconbtn{position:absolute;top:2px;width:48px;height:48px;border-radius:999px;border:0;background:#fff;box-shadow:0 6px 18px rgba(23,71,230,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;text-decoration:none}
.iconbtn.left{left:0}.iconbtn.right{right:0}
.lamp{position:absolute;left:0;top:2px}
.panel{box-sizing:border-box;border-radius:28px;background:#fff;border:2px solid var(--line);box-shadow:0 18px 40px rgba(23,71,230,.14)}
.cta{width:100%;height:64px;border:0;border-radius:999px;background:var(--coral);color:#fff;text-decoration:none;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 10px 24px rgba(255,90,60,.32),inset 0 -4px 0 rgba(0,0,0,.08);cursor:pointer;transition:transform .1s, background .2s}
.cta:active{transform:scale(.98)}
.cta[disabled],.cta.disabled{background:#FFB3A5;box-shadow:none;cursor:not-allowed}
.cta.ghost{background:#fff;border:2px solid var(--line);color:var(--blue);box-shadow:none;height:50px;font-size:16px}
.foot{flex:none;margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:8px 16px 0 20px;position:relative;z-index:1}
.masc{width:150px;height:111px;flex:none}
.spacer{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.doodles{display:flex;align-items:center}
.dd{display:block;flex:none}
.bubble{position:relative;box-sizing:border-box;padding:12px 14px;border-radius:18px;display:flex;flex-direction:column;gap:2px}
.bubble .tail{position:absolute;right:-9px;bottom:22px;width:14px;height:14px;transform:rotate(45deg)}
.bubble b{font-size:18px;font-weight:900}
.bubble span.t{font-size:13px;font-weight:600;line-height:1.35}
.b-green{background:var(--green-soft);border:2px solid var(--green-line)} .b-green b{color:#0D6A3A} .b-green .t{color:#1F5C3B} .b-green .tail{background:var(--green-soft);border-top:2px solid var(--green-line);border-right:2px solid var(--green-line)}
.b-blue{background:#EAF1FE;border:2px solid #A9C6F2} .b-blue b{color:var(--blue)} .b-blue .t{color:#24366E} .b-blue .tail{background:#EAF1FE;border-top:2px solid #A9C6F2;border-right:2px solid #A9C6F2}
.b-coral{background:var(--coral-soft);border:2px solid #FFC2B5;flex-direction:row;align-items:flex-start;gap:8px;padding:10px 12px} .b-coral .tail{bottom:16px;background:var(--coral-soft);border-top:2px solid #FFC2B5;border-right:2px solid #FFC2B5}
.b-coral span.t{font-size:14px;font-weight:700;color:#7A2E1C;line-height:1.35}
.field{display:flex;flex-direction:column;gap:4px}
.field label,.lbl{font-size:14px;font-weight:800;color:var(--navy)}
.input{height:46px;border-radius:14px;border:2px solid var(--line);background:var(--soft);padding:0 16px;font-size:16px;font-weight:600;color:var(--navy);width:100%;outline:none}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,71,230,.14)}
.input.err{border-color:var(--red)}
.err-msg{font-size:12px;font-weight:700;color:var(--red);min-height:0}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;background:var(--chip);color:var(--blue);font-size:14px;font-weight:800}
.demo-banner{position:fixed;left:8px;bottom:8px;z-index:99;background:#0B1A6B;color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.04em;opacity:.85;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.spinner{width:22px;height:22px;border-radius:999px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 16px;border-radius:14px;font-weight:700;font-size:14px;z-index:100;max-width:90%;text-align:center;animation:fadein .2s ease-out}

/* ---------- animations (same as the designs) ---------- */
@keyframes midle{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@keyframes mcheer{0%,55%,100%{rotate:0deg}8%{rotate:-7deg}16%{rotate:7deg}24%{rotate:-7deg}32%{rotate:7deg}40%{rotate:-3deg}48%{rotate:0deg}}
@keyframes mpep{0%,50%,100%{rotate:0deg}8%{rotate:-6deg}16%{rotate:-1deg}24%{rotate:-6deg}32%{rotate:-1deg}40%{rotate:-3deg}}
@keyframes dfloat{0%,100%{translate:0 0;rotate:0deg}25%{rotate:-5deg}50%{translate:0 -9px;rotate:0deg}75%{rotate:5deg}}
@keyframes dpop{0%{opacity:0;scale:.4}70%{opacity:1;scale:1.12}100%{opacity:1;scale:1}}
@keyframes rayglow{0%,100%{opacity:.15;scale:.55}50%{opacity:1;scale:1}}
@keyframes opop{0%{scale:1}35%{scale:1.045}100%{scale:1}}
@keyframes oshake{0%,100%{translate:0 0}15%{translate:-8px 0}30%{translate:7px 0}45%{translate:-5px 0}60%{translate:4px 0}75%{translate:-2px 0}}
@keyframes bubin{0%{opacity:0;translate:0 10px;scale:.92}100%{opacity:1;translate:0 0;scale:1}}
@keyframes bpop{0%{opacity:0;scale:0;rotate:-8deg}60%{opacity:1;scale:1.12;rotate:3deg}80%{scale:.96;rotate:-1deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes bnudge{0%,70%,100%{rotate:0deg;scale:1}76%{rotate:-3deg;scale:1.04}82%{rotate:3deg;scale:1.04}88%{rotate:-2deg;scale:1.02}94%{rotate:0deg;scale:1}}
@keyframes gwiggle{0%,100%{rotate:0deg}25%{rotate:-14deg}75%{rotate:14deg}}
@keyframes advfill{from{width:0%}to{width:100%}}
@keyframes cfall{0%{opacity:1;translate:0 0;rotate:0deg}85%{opacity:1}100%{opacity:0;translate:0 460px;rotate:540deg}}
@keyframes cardin{0%{opacity:0;translate:0 24px;scale:.96}100%{opacity:1;translate:0 0;scale:1}}
@keyframes scorepop{0%{scale:.3;opacity:0}70%{scale:1.15;opacity:1}100%{scale:1}}
@keyframes gshake{0%,100%{rotate:0deg;translate:0 0}10%{rotate:-7deg}20%{rotate:7deg}30%{rotate:-7deg;translate:0 -4px}40%{rotate:7deg}50%{rotate:-5deg}60%{rotate:4deg;translate:0 0}70%{rotate:-2deg}80%{rotate:0deg}}
@keyframes lidopen{0%{translate:0 0;rotate:0deg}60%{translate:84px -96px;rotate:-32deg}100%{translate:80px -84px;rotate:-26deg}}
@keyframes mrise{0%{translate:0 78px}70%{translate:0 -12px}100%{translate:0 0}}
@keyframes burstin{0%{opacity:0;scale:.2}100%{opacity:1;scale:1}}
@keyframes spin{to{rotate:360deg}}
@keyframes sparkpop{0%{opacity:0;scale:0}60%{opacity:1;scale:1.3}100%{opacity:1;scale:1}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fadeout{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes fadein{0%{opacity:0;translate:0 10px}100%{opacity:1;translate:0 0}}
@keyframes dotb{0%,100%{translate:0 0;opacity:.4}50%{translate:0 -8px;opacity:1}}
@keyframes barfill{from{width:0%}to{width:100%}}
@keyframes sheetup{from{translate:0 100%}to{translate:0 0}}
@keyframes scrimin{from{opacity:0}to{opacity:1}}

.a-idle{animation:midle 4s ease-in-out infinite;transform-origin:50% 100%}
.a-cheer{animation:mcheer 2.6s ease-in-out infinite;transform-origin:50% 100%}
.a-pep{animation:mpep 2.2s ease-in-out infinite;transform-origin:50% 100%}
.dd{animation:dpop .5s ease-out both,dfloat 3.6s ease-in-out .5s infinite}
.dd:nth-child(2n){animation-duration:.5s,4.4s;animation-delay:.12s,.62s}
.dd:nth-child(3n){animation-duration:.5s,3.1s;animation-delay:.24s,.74s}
.rays path{animation:rayglow 1.8s ease-in-out infinite;transform-box:view-box;transform-origin:12px 9px}
.rays path:nth-child(2),.rays path:nth-child(3){animation-delay:.2s}
.rays path:nth-child(4),.rays path:nth-child(5){animation-delay:.4s}
.pop{animation:opop .5s ease-out 1}
.shake{animation:oshake .5s ease-in-out 1}
.bub{animation:bubin .35s ease-out .2s both;transform-origin:100% 100%}
.bub-pop{animation:bpop .65s cubic-bezier(.3,1.4,.5,1) .6s both,bnudge 3.2s ease-in-out 1.4s infinite;transform-origin:100% 80%}
.bub-pop .gift-ic{animation:gwiggle .5s ease-in-out 1.2s 2;transform-box:fill-box;transform-origin:50% 60%}
.adv{animation:advfill 2s linear 1 both}
.cardin{animation:cardin .55s cubic-bezier(.2,.8,.3,1) .15s both}
.scorepop{animation:scorepop .5s ease-out .5s both}
.sheet{animation:sheetup .3s cubic-bezier(.2,.8,.3,1) both}
.scrim{animation:scrimin .25s ease-out both}
/* reveal */
.gift{animation:gshake 1.5s ease-in-out .3s 1 both;transform-box:view-box;transform-origin:150px 246px}
.lid{animation:lidopen .6s cubic-bezier(.3,1.4,.5,1) 1.85s 1 both;transform-box:fill-box;transform-origin:100% 100%}
.masc-rise{translate:0 78px;animation:mrise .6s cubic-bezier(.3,1.5,.5,1) 1.85s 1 forwards,mcheer 2.6s ease-in-out 2.6s infinite;transform-origin:50% 100%}
.burst{animation:burstin .5s ease-out 1.95s both,spin 10s linear 2.4s infinite;transform-box:view-box;transform-origin:150px 150px}
.spk{animation:sparkpop .45s ease-out both,twinkle 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.s1{animation-delay:2.05s,2.5s}.s2{animation-delay:2.15s,2.7s}.s3{animation-delay:2.25s,2.9s}.s4{animation-delay:2.35s,3.1s}
.msg1{animation:fadeout 2.1s linear both}
.msg2{animation:fadein .4s ease-out 2.1s both}
.dot{animation:dotb .9s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
.dots{animation:fadeout 2.1s linear both}
.bar{animation:barfill 2s cubic-bezier(.4,.1,.3,1) .1s both}
.reveal-cta{animation:fadein .4s ease-out 2.6s both}
@media (prefers-reduced-motion: reduce){
  .a-idle,.a-cheer,.a-pep,.dd,.rays path,.pop,.shake,.bub,.bub-pop,.bub-pop .gift-ic,.cardin,.scorepop,.gift,.dot,.spk,.burst,.sheet,.scrim,.conf span{animation:none!important}
  .lid{animation:none;translate:80px -84px;rotate:-26deg}.masc-rise{animation:none;translate:0 0}
  .msg1,.dots{display:none}.msg2,.reveal-cta{animation:none}.bar,.adv{animation:none;width:100%}
}
[hidden]{display:none!important}

/* short phones (e.g. iPhone SE): tighten so the main button stays on screen */
@media (max-height:760px){
  .dd-row{height:14px!important;overflow:hidden}
  .dd-row .dd{display:none}
  .title-img{width:200px!important;height:65px!important}
  .pad{padding-top:12px}
  .panel{padding-top:16px!important;padding-bottom:14px!important}
  .opt{min-height:54px!important}
}