.bg-isle{background-image:url(img/bg.webp?v=1);background-position:50% 35%}
.no-webp .bg-isle{background-image:url(img/bg.jpg?v=1)}
.bg.soft::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.0) 40%,rgba(90,70,180,.18))}
#s-title{justify-content:space-between}
.t-aliens{position:relative;z-index:2;display:flex;gap:6vw;justify-content:center;align-items:flex-end;margin-top:auto;margin-bottom:2dvh}
.t-aliens img{height:min(24dvh,170px);filter:drop-shadow(0 10px 14px rgba(40,30,120,.35));animation:bob 2.6s ease-in-out infinite}
.t-aliens img:last-child{animation-delay:-1.3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
#t-start{margin-bottom:calc(var(--sab) + 6dvh)}
.h-row{display:flex;align-items:center;justify-content:center;gap:10px}
.h-row h2{margin:0;font-size:clamp(26px,7.4vw,34px);color:#5a35b8}
.say-btn{width:48px;height:48px;border-radius:50%;font-size:24px;background:linear-gradient(180deg,#fff,#e6f4ff);box-shadow:0 4px 10px rgba(40,90,180,.25)}
.setup-card{display:flex;flex-direction:column;gap:10px;text-align:center}
.setup-card .aliens{margin:4px 0}
.al-btn img{height:min(15dvh,120px)}
.al-btn.on{background:#fff6c9;box-shadow:0 0 0 4px #ffc928,0 6px 16px rgba(255,170,0,.35)}
.al-btn.b.on{background:#e3f3ff;box-shadow:0 0 0 4px #4fb3ff,0 6px 16px rgba(30,140,255,.35)}
.g-btn.on{background:#ffe1f1;box-shadow:0 0 0 4px #ff6fae}
#setup-go[disabled],#instr-go[disabled]{filter:grayscale(.7) brightness(1.05);opacity:.7}
.instr-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.instr-alien{height:min(16dvh,130px);filter:drop-shadow(0 8px 10px rgba(40,30,120,.25))}
.instr-card h2{margin:0;font-size:clamp(26px,7.6vw,34px);color:#5a35b8}
.instr-lines{font-size:clamp(19px,5.4vw,24px);font-weight:700;line-height:1.75;color:var(--ink)}
.instr-lines b.g{color:#14a04a}.instr-lines b.r{color:#e23b4e}
.instr-demo{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mini{font-size:18px;font-weight:800;padding:6px 12px;border-radius:14px;color:#fff}
.mini.yes{background:#22b85a}.mini.no{background:#ec4a5c}.mini.spk{background:#4fb3ff}
#instr-go .ready{display:none}#instr-go:not([disabled]) .ready{display:inline}#instr-go:not([disabled]) .wait{display:none}

/* game */
.screen.game2{justify-content:flex-start;gap:min(1.6dvh,14px);padding-top:calc(var(--sat) + 8px)}
.g-top{position:relative;z-index:3;width:min(96vw,620px);height:48px;display:flex;align-items:center;gap:8px}
.g-top .corner-btn{position:static;flex:none}
.lvl{flex:none;font-size:17px;font-weight:800;color:#fff;background:linear-gradient(180deg,#b98bff,#7a4fe0);padding:6px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(90,50,200,.35)}
.dots{flex:1;display:flex;gap:4px;justify-content:center;flex-wrap:nowrap}
.dots i{width:clamp(10px,2.6vw,16px);height:clamp(10px,2.6vw,16px);border-radius:50%;background:rgba(255,255,255,.7);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.dots i.ok{background:#22c55e}.dots i.bad{background:#ffb02e}.dots i.cur{background:#fff;box-shadow:0 0 0 3px #ff6fae}
.score{flex:none;font-size:20px;font-weight:800;color:#5a3a00;background:linear-gradient(180deg,#fff6c4,#ffd34d);padding:5px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(200,140,0,.35)}
.g-mid{position:relative;z-index:2;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.sign-card{position:relative;width:min(72vw,40dvh,360px);aspect-ratio:1;border-radius:34px;
  background:linear-gradient(160deg,#ffffff 0%,#f3f7ff 55%,#dfe9ff 100%);
  box-shadow:0 18px 40px rgba(40,40,140,.35),0 4px 0 rgba(255,255,255,.9) inset,0 -8px 18px rgba(90,110,200,.18) inset;
  display:flex;align-items:center;justify-content:center;animation:float 3.4s ease-in-out infinite}
.sign-card.pop{animation:popin .55s cubic-bezier(.2,1.6,.4,1) both, float 3.4s ease-in-out .6s infinite}
.sign-in{width:84%;height:84%;display:flex;align-items:center;justify-content:center}
.sign-in img{max-width:100%;max-height:100%;filter:drop-shadow(0 6px 8px rgba(30,30,80,.28))}
.gloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 34%,rgba(255,255,255,0) 50%)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes popin{0%{transform:scale(.3) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.sign-card.good{box-shadow:0 0 0 6px #22c55e,0 0 40px rgba(34,197,94,.7),0 18px 40px rgba(40,40,140,.35)}
.sign-card.bad{box-shadow:0 0 0 6px #ffb02e,0 18px 40px rgba(40,40,140,.35)}
.g-alien{position:absolute;bottom:0;left:calc(50% - min(72vw,40dvh,360px)/2 - min(12vw,60px));height:min(14dvh,110px);transform:translateX(-30%);filter:drop-shadow(0 6px 8px rgba(30,30,90,.3));transition:transform .3s}
.g-alien.jump{animation:jump .6s ease}
@keyframes jump{0%,100%{transform:translateX(-30%) translateY(0)}40%{transform:translateX(-30%) translateY(-22px)}}
.stmt{position:relative;z-index:3;width:min(94vw,560px);display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);border-radius:26px;padding:10px 12px;box-shadow:0 10px 26px rgba(50,40,140,.25);transition:background .3s}
.stmt.right{background:#eafff0;box-shadow:0 0 0 4px #22c55e,0 10px 26px rgba(50,40,140,.25)}
.stmt-tx{flex:1;text-align:center}
.s1{font-size:clamp(17px,4.8vw,22px);font-weight:700;color:#5a35b8;line-height:1.6}
.s2{font-size:clamp(25px,7.4vw,36px);font-weight:800;color:var(--ink);line-height:1.55}
.spk-btn{flex:none;width:clamp(58px,16vw,72px);height:clamp(58px,16vw,72px);border-radius:50%;font-size:clamp(28px,8vw,36px);
  background:linear-gradient(180deg,#bfe6ff,#4fb3ff 70%,#2f8fe0);box-shadow:0 6px 14px rgba(30,110,220,.4),inset 0 3px 0 rgba(255,255,255,.6)}
.spk-btn.playing{animation:pulse 1s ease-in-out infinite}
.answers{position:relative;z-index:3;width:min(96vw,560px);display:flex;gap:12px;margin-bottom:calc(var(--sab) + 10px)}
.ans-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:28px;padding:10px 6px 12px;color:#fff;min-height:clamp(84px,12.5dvh,118px);
  box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 4px 0 rgba(255,255,255,.45),inset 0 -6px 12px rgba(0,0,0,.18);transition:transform .12s}
.ans-btn:active{transform:scale(.96)}
.ans-btn .ai{font-size:clamp(36px,10vw,50px);line-height:1.1}
.ans-btn .at{font-size:clamp(25px,7.2vw,34px);font-weight:800;line-height:1.4}
.ans-btn.yes{background:linear-gradient(180deg,#6fe39a,#22b85a 60%,#14974a)}
.ans-btn.no{background:linear-gradient(180deg,#ff97a3,#ec4a5c 60%,#c9283c)}
.ans-btn.dimmed{opacity:.35}
.ans-btn.hit{box-shadow:0 0 0 6px #fff,0 0 30px rgba(255,255,255,.9)}
.answers.locked{pointer-events:none}
.banner{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(80,50,180,.35)}
.banner.on{display:flex}
.bn-in{background:linear-gradient(180deg,#fff,#fff4cc);border-radius:30px;padding:22px 34px;text-align:center;box-shadow:0 20px 50px rgba(60,30,150,.45);animation:popin .5s cubic-bezier(.2,1.6,.4,1) both}
.bn-t{font-size:clamp(36px,11vw,56px);font-weight:800;color:#7a4fe0}
.bn-s{font-size:clamp(28px,8vw,40px)}
.praise{position:absolute;z-index:25;top:30%;left:50%;transform:translate(-50%,-50%) scale(.5);opacity:0;font-size:clamp(34px,10vw,54px);font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ffd34d,#ff9a3c);padding:10px 24px;border-radius:999px;box-shadow:0 12px 30px rgba(230,120,0,.45);pointer-events:none;white-space:nowrap}
.praise.on{animation:praise 1.5s ease forwards}
@keyframes praise{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}
@media (min-width:900px) and (min-height:600px){ .sign-card{width:min(38dvh,340px)} }
@media (max-height:680px){ .s1{font-size:16px;line-height:1.4} .s2{font-size:24px;line-height:1.45} .ans-btn{min-height:80px;padding:6px} .ans-btn .ai{font-size:32px} .ans-btn .at{font-size:24px} .stmt{padding:6px 10px} .g-top{height:44px} }

@media (min-aspect-ratio:1/1){ .bg-isle{background-image:url(img/bg-wide.webp?v=1);background-position:50% 40%} .no-webp .bg-isle{background-image:url(img/bg-wide.jpg?v=1)} }

/* v4: speaker toggle, next button, save sheet */
.spk-toggle{flex:none;width:52px;height:52px;border-radius:50%;font-size:28px;line-height:1;background:linear-gradient(180deg,#ffffff,#e3f3ff);box-shadow:0 4px 12px rgba(40,40,120,.28),inset 0 -3px 0 rgba(30,90,180,.15);border:3px solid #4fb3ff;padding:0;display:flex;align-items:center;justify-content:center}
.spk-toggle.off{border-color:#b9bfd3;background:linear-gradient(180deg,#f3f4f8,#dfe2ec)}
.spk-toggle:active{transform:scale(.93)}
.next-btn{position:absolute;z-index:12;left:50%;top:90%;font-size:clamp(26px,7.5vw,32px);font-weight:800;color:#fff;padding:.35em .9em .42em;border-radius:999px;background:linear-gradient(180deg,#ffb4dc,#ff6fae 60%,#e9468f);box-shadow:0 8px 20px rgba(220,60,140,.4),inset 0 3px 0 rgba(255,255,255,.5);opacity:0;transform:translate(-50%,-50%) scale(.85);pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.next-btn.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.ans-btn.gone{opacity:.12!important;transition:opacity .25s}
.next-btn .arr{display:inline-block;animation:nextNudge 1.4s ease-in-out .5s infinite}
@keyframes nextNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.save-btn{font-size:clamp(24px,7vw,30px);padding:.38em 1.5em .45em;background:linear-gradient(180deg,#9df0a8,#34c759 60%,#1f9e43);box-shadow:0 8px 22px rgba(30,150,70,.4),inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 10px rgba(10,90,40,.3)}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(30,30,70,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet.on{opacity:1;pointer-events:auto}
.sheet-card{position:relative;width:min(100vw,480px);background:#fffdf7;border-radius:30px 30px 0 0;padding:18px 18px calc(var(--sab) + 22px);display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(40px);transition:transform .3s}
.sheet.on .sheet-card{transform:none}
.sheet-x{position:absolute;top:10px;left:12px;width:44px;height:44px;border-radius:50%;background:#eef0f7;font-size:20px}
.sheet-prev{height:min(34dvh,300px);border-radius:14px;box-shadow:0 6px 18px rgba(60,40,140,.25);opacity:0;transition:opacity .3s;background:#eaf6ff;min-width:120px}
.sheet-prev.on{opacity:1}
.sh-btn{width:100%;min-height:72px;border-radius:22px;font-size:26px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px}
.sh-btn .si{font-size:32px}
.sh-btn.save{background:linear-gradient(180deg,#9fe0ff,#47a8f0 60%,#2a7fd0);box-shadow:0 6px 16px rgba(30,100,200,.35)}
.sh-btn.wa{background:linear-gradient(180deg,#7ee89a,#25d366 60%,#128c4a);box-shadow:0 6px 16px rgba(20,140,70,.35)}
.sh-btn:active,.save-btn:active{transform:scale(.97)}
@media (max-height:700px){ .cert-logo{height:11dvh} .cert-alien{height:14dvh} .cert-title{font-size:clamp(26px,8vw,36px)} }

@media (max-width:480px){ .g-top{gap:5px} .g-top .lvl{font-size:15px;padding:5px 10px} .g-top .score{font-size:17px;padding:5px 10px} .dots{gap:3px;min-width:0;overflow:hidden} .dots i{width:9px;height:9px;flex:none} .spk-toggle{width:48px;height:48px;font-size:26px} }

/* home button (back to the islands world) */
body.nh-play .nh-fab{left:auto;right:calc(var(--sar) + 12px);top:calc(var(--sat) + 72px)}
.cert-screen .nh-big{font-size:21px}
#s-title .t-head{margin-top:max(3dvh,52px)}