:root{color-scheme:dark;--pop-ink:#f0ffe8;--pop-muted:#9dbca7;--pop-lime:#c5ff69;--pop-green:#62ed94;--pop-pink:#ff829f}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(to bottom,#5c94fc 0 66.667%,#83d84b 66.667% 68%,#58b83b 68% 100%) fixed;color:var(--pop-ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100dvh;padding:12px 14px max(16px,env(safe-area-inset-bottom));}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit}
button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #fff29b;outline-offset:4px}
[hidden]{display:none!important}
.pop-wrap{max-width:510px;margin:auto}
.pop-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:750}
.pop-nav a,.pop-nav button,.pop-footer button{border:1px solid #53735b;background:#10261f;border-radius:10px;color:var(--pop-ink);text-decoration:none;padding:10px 12px;min-height:42px}
.pop-cabinet{font-size:10px;letter-spacing:.18em;color:var(--pop-muted)}
.pop-heading{text-align:center;margin:19px 0 14px}
.pop-eyebrow{font-size:9px;font-weight:850;letter-spacing:.17em;color:var(--pop-muted)}
.pop-heading h1{font-size:clamp(42px,12vw,66px);font-weight:1000;font-style:italic;line-height:1;margin:7px 0;letter-spacing:-.065em;color:var(--pop-lime);text-shadow:0 4px 0 #245734,0 7px 0 #06170e}
.pop-heading h1 span{color:#fff1b5}
.pop-heading h1{font-size:clamp(36px,10vw,55px)}
.pop-heading .skarades-profile-bar{margin:13px auto 0;padding:4px 9px;min-height:0;width:fit-content;max-width:100%}
.pop-heading .skarades-profile-copy small{display:none}.pop-heading .skarades-profile-copy strong{font-size:12px}.pop-heading .skarades-profile-icon-button{width:30px;height:30px;min-height:0}.pop-heading .skarades-avatar.sm{width:26px;height:26px}
.pop-hud{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #365a40;background:#0b201b;border-radius:14px;padding:11px 0;box-shadow:0 5px 0 #04100d}
.pop-hud>div{text-align:center}.pop-hud>div+div{border-left:1px solid #31503d}.pop-hud span{display:block;font-size:9px;letter-spacing:.12em;color:var(--pop-muted);font-weight:800}.pop-hud strong{display:block;font-size:29px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--pop-lime)}.pop-hud .pop-clock strong{color:#fff1b5}
.pop-meter{height:5px;background:#17372a;border-radius:8px;overflow:hidden;margin-top:10px}.pop-meter div{height:100%;background:var(--pop-lime);transform-origin:left}
.pop-streak{display:flex;justify-content:space-between;align-items:center;margin:11px 4px;font-size:12px;color:var(--pop-muted);font-weight:700}.pop-streak strong{color:#091912;background:var(--pop-lime);border-radius:6px;padding:3px 10px;font-size:17px}
.pop-field{position:relative;isolation:isolate;border:1px solid #426548;border-radius:22px;overflow:hidden;background:linear-gradient(to bottom,#5c94fc 0 66.667%,#83d84b 66.667% 69%,#58b83b 69% 100%);box-shadow:0 9px 0 #245c25,0 10px 40px #0003}
.pop-field:after{content:"";position:absolute;bottom:0;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,#476638 0 15px,#2d4c2c 15px 30px);z-index:-1}
.pop-scenery{position:absolute;inset:0;pointer-events:none;opacity:.3;background-image:radial-gradient(#c5ff6944 1px,transparent 1px);background-size:23px 23px}.pop-scenery span{position:absolute;color:#d4ef99;left:8%;top:5%}.pop-scenery span:nth-child(2){left:87%;top:39%}.pop-scenery span:nth-child(3){left:45%;top:76%}
.pop-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 7px;padding:14px 12px 22px;position:relative}
.pop-hole{position:relative;aspect-ratio:1/1.06;min-width:0;overflow:hidden;border:0;background:none;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:-3px!important}
.pop-hole:before{content:"";position:absolute;inset:auto 4% 2%;height:16%;border-radius:50%;background:#020d0b99;filter:blur(2px)}
.pop-window{position:absolute;inset:0 0 9%;overflow:hidden;pointer-events:none;z-index:2}
.pop-pet{position:absolute;width:74%;aspect-ratio:1;left:13%;bottom:21%;background-image:url('assets/icons/collectibles-pack-5.png');background-size:400% 200%;background-repeat:no-repeat;image-rendering:pixelated;transform:translateY(112%);transition:transform 110ms ease-out;pointer-events:none;filter:drop-shadow(0 3px 0 #07170c)}
.pop-hole.up .pop-pet{transform:translateY(0)}
.pop-hole.hit .pop-pet{transform:translateY(25%) scale(.87);filter:brightness(1.6)}
.pop-pipe{position:absolute;z-index:3;left:12%;right:12%;bottom:7%;height:32%;border:3px solid #071f0c;border-top:0;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#248d36 0 8%,#83f56b 8% 18%,#48ce4d 18% 66%,#25a538 66% 83%,#13622c 83%);box-shadow:inset 0 -5px #104d26,0 3px #031b10}
.pop-pipe:before{content:"";position:absolute;left:-12%;right:-12%;height:36%;top:-14%;background:linear-gradient(90deg,#2da43e 0 9%,#b5ff87 9% 17%,#62e65a 17% 70%,#258936 70% 88%,#145427 88%);border:3px solid #07200e;border-radius:4px;box-shadow:inset 0 3px #c8ff95,inset 0 -3px #16712b,0 3px #071f0b77}
.pop-pipe:after{content:"";position:absolute;top:36%;left:24%;width:3px;height:3px;background:#e3ffb080;box-shadow:4px 0 #e3ffb080}
.pop-key{position:absolute;bottom:10%;left:0;right:0;z-index:4;color:#d5ffd699;font-size:9px;font-weight:800;pointer-events:none}
.pop-hole.decoy .pop-pet{background-image:none;background:#ef5775;clip-path:polygon(50% 0,61% 19%,79% 6%,80% 29%,100% 32%,86% 50%,100% 69%,78% 73%,78% 96%,58% 84%,46% 100%,37% 82%,15% 95%,19% 72%,0 64%,15% 47%,1% 27%,24% 27%,27% 5%,42% 20%);display:grid;place-items:center;color:#420e25;font-size:40px;font-weight:1000;image-rendering:auto}
.pop-hole.decoy .pop-pet:after{content:"×"}
.pop-burst{position:absolute;z-index:5;top:5%;left:0;right:0;text-align:center;font-size:22px;font-weight:950;color:#fff4aa;text-shadow:0 2px #102416,1px 0 #102416;opacity:0;pointer-events:none}
.pop-hole.hit .pop-burst,.pop-hole.wrong .pop-burst{animation:pop-score .45s ease-out both}.pop-hole.wrong .pop-burst{color:#ff99b3}
@keyframes pop-score{0%{opacity:1;transform:scale(.8) translateY(8px)}35%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:translateY(-14px)}}
.pop-cover{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:15px;background:#051911a8;backdrop-filter:blur(3px)}
.pop-card{width:100%;max-width:338px;background:#0d251ff5;border:1px solid #85b773;border-radius:18px;padding:24px 20px;text-align:center;box-shadow:0 12px 40px #0006}
.pop-card h2{margin:8px 0;color:#f2ffd7;font-size:29px;letter-spacing:-.04em}
body.skarades-ui .pop-card p{font-size:14px!important;line-height:1.5;margin:12px 0;color:#bdd0be}.pop-card small{display:block;font-size:10px;color:var(--pop-muted);margin-top:13px}
.pop-primary{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid #ebffbc;border-radius:10px;background:var(--pop-lime);color:#173515;font-weight:950;padding:15px 17px;box-shadow:0 4px #52862a;letter-spacing:.03em}.pop-primary:active{transform:translateY(2px);box-shadow:0 2px #52862a}.pop-primary span{font-size:22px;line-height:1}
.pop-final{color:var(--pop-lime);font-size:52px;font-weight:950;line-height:1.1}
.pop-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:19px 0 10px;color:var(--pop-muted);font-size:11px;min-height:42px}.pop-footer button{font-size:12px}.pop-help{color:var(--pop-muted);font-size:12px;border-top:1px solid #2f4939;padding-top:13px}.pop-help summary{cursor:pointer;width:fit-content;padding:4px 0}body.skarades-ui .pop-help p{font-size:14px!important;line-height:1.6}
@media(pointer:coarse){.pop-key{display:none}}
@media(max-width:360px){body{padding-left:10px;padding-right:10px}.pop-cabinet{font-size:8px}.pop-card{padding:16px}.pop-card h2{font-size:25px}.pop-board{padding:9px 8px 15px;gap:2px 4px}}
@media(max-height:760px){.pop-heading{margin:10px 0}.pop-heading h1{font-size:42px}.pop-heading .skarades-profile-bar{margin-top:8px}.pop-hud{padding:7px 0}.pop-hud strong{font-size:24px}.pop-board{max-width:clamp(220px,calc(100dvh - 390px),355px);margin:auto}.pop-streak{margin:8px 3px}.pop-card{padding:17px}.pop-footer{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.pop-pet{transition:none}.pop-hole.hit .pop-burst,.pop-hole.wrong .pop-burst{animation:none;opacity:1}.pop-scenery{display:none}}
@media(max-height:660px){.pop-heading{margin:7px 0}.pop-heading h1{font-size:34px}.pop-heading>.pop-eyebrow,.pop-heading .skarades-profile-bar{display:none}.pop-board{max-width:clamp(220px,calc(100dvh - 300px),355px)}.pop-card{padding:12px}.pop-card h2{font-size:23px}.pop-card .pop-eyebrow{font-size:8px}.pop-card small{margin-top:8px}.pop-primary{padding:11px 15px}.pop-final{font-size:38px}.pop-footer{margin:12px 0 7px}}
.pop-audio{width:min(90vw,390px);max-height:90dvh;overflow:auto;border:1px solid #85b773;border-radius:18px;padding:22px;color:var(--pop-ink);background:#0d251f;box-shadow:0 20px 80px #0009}
.pop-audio::backdrop{background:#020c0bc9;backdrop-filter:blur(4px)}
.pop-audio-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.pop-audio h2{font-size:23px;margin:0;color:var(--pop-lime)}
.pop-audio-close,.pop-audio-test{border:1px solid #53735b;background:#18392d;color:var(--pop-ink);border-radius:9px;min-height:44px;padding:8px 13px}.pop-audio-close{font-size:24px}
body.skarades-ui .pop-audio p{font-size:13px!important;line-height:1.5;color:var(--pop-muted)}
.pop-audio-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:23px;font-weight:750}.pop-audio-switch small{display:block;color:var(--pop-muted);font-size:11px;font-weight:400;margin-top:4px}
.pop-audio input[type=checkbox]{width:26px;height:26px;accent-color:var(--pop-lime);flex-shrink:0}.pop-audio input[type=range]{width:100%;height:35px;accent-color:var(--pop-lime);cursor:pointer}
.pop-audio-volume{display:flex;justify-content:space-between;margin-top:14px;font-size:12px!important;color:var(--pop-muted)}.pop-audio-volume output{color:var(--pop-lime)}.pop-audio-test{margin-top:12px;width:100%;font-size:13px}

/* Larger supporting text, including compact-phone and audio-menu labels. */
.pop-nav,.pop-streak,.pop-help,.pop-footer button{font-size:18px}
.pop-cabinet{font-size:15px;letter-spacing:.1em;text-align:center}
.pop-eyebrow,.pop-hud span,.pop-key{font-size:13.5px}
.pop-hud span{letter-spacing:.06em;min-height:2.4em;display:flex;align-items:center;justify-content:center;padding:0 4px}
.pop-heading .skarades-profile-copy strong{font-size:18px}
.pop-card small{font-size:15px}
.pop-footer,.pop-audio-switch small{font-size:16.5px}
.pop-footer button{flex-shrink:0}
body.skarades-ui .pop-card p,body.skarades-ui .pop-help p{font-size:21px!important}
body.skarades-ui .pop-audio p,.pop-audio-test{font-size:19.5px!important}
body.skarades-ui .pop-audio-volume{font-size:18px!important}
.pop-cover{overflow-y:auto;align-items:safe center}
.pop-card{flex-shrink:0}
@media(max-width:360px){.pop-cabinet{font-size:12px}.pop-nav{gap:5px}.pop-nav a,.pop-nav button{padding:10px 8px}}
@media(max-height:660px){.pop-card .pop-eyebrow{font-size:12px}}
.pop-wave{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 3px 0;font-size:16px;color:var(--pop-lime);min-height:28px}
#lives{color:#ff829f;letter-spacing:.1em;font-size:24px;white-space:nowrap}#powerStatus{font-size:13.5px;color:#ffdf77;text-align:center}
.pop-hole.power .pop-pet{background-image:none;display:grid;place-items:center;width:64%;left:18%;aspect-ratio:1;border:3px solid #ffe8ab;border-radius:25%;background:#6d4911;color:#fff1af;font-size:clamp(23px,7vw,38px);font-weight:950;box-shadow:inset 0 0 14px #ffb02f66;image-rendering:auto}
.pop-hole.heart .pop-pet{background:#6b2444;color:#ffa4cc;border-color:#ffb2cd;font-size:clamp(32px,9vw,48px)}
.pop-bank{margin-top:14px;width:100%;padding:12px;border:1px solid #85b773;border-radius:10px;color:var(--pop-ink);background:#16382b;font:inherit;font-weight:750}
.pop-field{display:grid}.pop-board,.pop-cover{grid-area:1/1;min-width:0}.pop-board{width:100%}.pop-cover{position:relative;inset:auto;overflow:visible}
@media(max-height:760px){.pop-board{max-width:clamp(220px,calc(100dvh - 445px),355px)}}
@media(max-height:660px){.pop-board{max-width:clamp(220px,calc(100dvh - 355px),355px)}}

/* Daylight platform-game backdrop; keep supporting text legible over sky/grass. */
body.skarades-ui .skarades-ambient,.pop-scenery{display:none}
.pop-cabinet,.pop-heading>.pop-eyebrow,.pop-streak,.pop-wave,.pop-footer,.pop-help{color:#102b25}
.pop-help{border-color:#245c25}
#powerStatus{color:#19320d}#lives{color:#8d1641}