/* Cannon Quiz gateway — same palette, type and background as the Interactive hub. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020812;color:#fff4ca;font-family:Georgia,"Times New Roman",serif}
body{min-height:100dvh;background-image:linear-gradient(rgba(1,7,17,.34),rgba(1,7,17,.76)),url("assets/earth/space-background.png"),radial-gradient(circle at 50% 10%,#123b6a,#020812 70%);background-position:center;background-size:cover;background-attachment:fixed}

.gate{width:min(1180px,100%);margin:0 auto;padding:clamp(16px,3vw,40px) clamp(12px,2vw,26px) 34px}

.gate-head{text-align:center;margin-bottom:clamp(18px,3vw,32px)}
.gate-kicker{display:block;color:#f3cc69;font:800 12px Arial,sans-serif;letter-spacing:.28em}
.gate-head h1{margin:6px 0 0;font-size:clamp(38px,7vw,80px);line-height:.98;letter-spacing:.03em;color:#fff7de;text-shadow:0 0 26px rgba(243,204,105,.28)}
.gate-tag{margin:6px 0 0;color:#ffd875;font:italic 400 clamp(16px,2.2vw,24px) Georgia,serif}
.gate-lead{margin:14px auto 0;max-width:60ch;color:#dce7f4;font:clamp(14.5px,1.4vw,17px)/1.55 Arial,sans-serif}

.gate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}

.gate-card{display:flex;flex-direction:column;align-items:center;gap:11px;padding:clamp(16px,2vw,26px);border:1px solid rgba(240,198,99,.6);border-radius:24px;background:linear-gradient(180deg,rgba(18,50,91,.94),rgba(5,20,42,.96));color:#fff2c8;text-align:center;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.gate-card:hover,.gate-card:focus-visible{transform:translateY(-5px);border-color:#ffe08b;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 3px rgba(255,215,105,.16);outline:none}
.gate-card.labs{background:linear-gradient(180deg,rgba(20,70,76,.94),rgba(4,29,39,.96));border-color:rgba(92,190,142,.55)}
.gate-card.labs:hover,.gate-card.labs:focus-visible{border-color:#8fe0b6;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 3px rgba(143,224,182,.18)}

.gate-badge{color:#f3cc69;font:800 11.5px Arial,sans-serif;letter-spacing:.2em}
.gate-card.labs .gate-badge{color:#8fe0b6}
.gate-card h2{margin:2px 0 0;font-size:clamp(26px,3.4vw,40px);line-height:1.05}
.gate-card>p{margin:0;max-width:44ch;color:#dce7f4;font:15px/1.55 Arial,sans-serif}

.gate-points{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;width:100%;max-width:40ch}
.gate-points li{position:relative;padding-left:20px;text-align:left;color:#c9d9ea;font:13.5px/1.45 Arial,sans-serif}
.gate-points li::before{content:"";position:absolute;left:4px;top:7px;width:7px;height:7px;border-radius:50%;background:#e0a93a}
.gate-card.labs .gate-points li::before{background:#5cbe8e}

.gate-go{margin-top:auto;padding:12px 26px;border:1px solid #f0c663;border-radius:999px;background:linear-gradient(#9b3f23,#6f2818);color:#fff0c9;font:800 17px Georgia,serif}
.gate-card.labs .gate-go{border-color:#8fe0b6;background:linear-gradient(#1f6b4d,#12452f);color:#eafff5}
.gate-card:hover .gate-go{filter:brightness(1.15)}

/* Previews use the same artwork and model geometry as the experiences. */
.gate-preview{position:relative;isolation:isolate;width:100%;height:196px;flex-shrink:0;border-radius:15px;border:1px solid #ffffff30;overflow:hidden;box-shadow:0 8px 24px #0003,inset 0 0 30px #0003;text-align:left}
.preview-title{position:absolute;z-index:4;left:14px;top:15px;color:#fff5d5;font:900 clamp(16px,1.55vw,21px)/1 Arial,sans-serif;letter-spacing:-.035em;text-shadow:0 2px 12px #000a}
.preview-caption{position:absolute;z-index:4;inset:auto 0 0;padding:18px 7px 9px;background:linear-gradient(transparent,#03111aec 55%);font:600 9px/1.3 Arial,sans-serif;letter-spacing:.025em;text-align:center;color:#fff0c9}
.quiz-preview{background:linear-gradient(#04132555,#09234c22 55%,#05102288),url('assets/cannonquiz-bg-v7.png') center/cover}
.quiz-preview::before{content:"";position:absolute;inset:0;background:linear-gradient(#031023ad,transparent 40%),radial-gradient(ellipse at 50% 70%,#ffd26a4d,transparent 65%)}
.quiz-sample{position:absolute;z-index:2;left:22%;top:50px;width:56%;padding:9px 5px 10px;background:linear-gradient(135deg,#fff4d9,#dec899);border:1px solid #ffe9a8;border-radius:6px;box-shadow:0 8px 20px #0008;text-align:center;color:#152b46}
.sample-subject{display:block;font:800 7px Arial,sans-serif;letter-spacing:.1em;color:#715325;margin-bottom:5px}.quiz-sample strong{display:block;font:700 13px/1.18 Georgia,serif}.sample-answer{display:block;margin-top:7px;border:1px solid #6c9272;border-radius:4px;padding:5px 1px;background:#194c37;color:#fff7d9;font:700 9px Arial,sans-serif}
.preview-cannon{position:absolute;z-index:3;bottom:4px;width:48%;height:auto;filter:drop-shadow(0 5px 6px #0009);transition:transform .4s}.preview-cannon.left{left:-12%}.preview-cannon.right{right:-12%}
.lab-preview{background:radial-gradient(ellipse at 25% 60%,#1c608c88,transparent 65%),linear-gradient(#031a2b77,#021c28bb),url('assets/earth/space-background.png') center/cover}
.preview-earth{position:absolute;left:-20px;top:38px;width:176px;height:176px;filter:brightness(1.4) drop-shadow(0 0 15px #3293d34d);transition:transform .4s}
.molecule-specimen{position:absolute;right:8px;top:51px;width:48%;padding:8px 5px 7px;border:1px solid #a9e9da6b;border-radius:10px;background:linear-gradient(145deg,#183e49f2,#082532eb);box-shadow:0 8px 20px #0004;transform:rotate(3deg);text-align:center;color:#e8ffec}
.molecule-specimen>span{font:700 6.5px Arial,sans-serif;letter-spacing:.07em;display:block}.molecule-specimen svg{display:block;width:100%;height:68px;filter:drop-shadow(0 4px 4px #00182099)}.molecule-specimen>b{display:block;font:700 14px Arial,sans-serif}.molecule-specimen small{display:block;font:8px/1.3 Arial,sans-serif;margin-top:3px;color:#b9dcd9}
.gate-card:hover .preview-cannon.left,.gate-card:focus-visible .preview-cannon.left{transform:translate(2px,-3px)}.gate-card:hover .preview-cannon.right,.gate-card:focus-visible .preview-cannon.right{transform:translate(-2px,-3px)}.gate-card:hover .preview-earth,.gate-card:focus-visible .preview-earth{transform:translateY(-4px)}
.gate-foot{margin:26px auto 0;max-width:64ch;text-align:center;color:#a8bccf;font:13.5px/1.6 Arial,sans-serif}
.gate-foot a{color:#ffd875;margin-left:6px}

.gate-card.learning-games{background:linear-gradient(180deg,#264b2dec,#102b1eef);border-color:#c5df88a0}
.learning-games .gate-badge{color:#daee94}.learning-games .gate-go{background:#d8eb97;color:#193926;border-color:#edfac8}
.frog-preview{background:linear-gradient(#153c2e11,#08261899),url('assets/frog-run/creek.webp') center/cover}
.frog-preview span{position:absolute;left:15px;top:15px;font:800 24px Arial,sans-serif;color:#eff2cf;letter-spacing:-.04em}
.frog-preview i{position:absolute;right:13px;bottom:-6px;width:140px;height:140px;background:url('assets/frog-run/green.webp') 0 0/300% 200%;filter:drop-shadow(0 6px 7px #0009);clip-path:inset(0 0 12% 0)}
@media(max-width:960px){
  .gate-grid{grid-template-columns:1fr}
  .gate-preview{height:196px;max-width:380px}
  .gate-card{padding:16px}
  .gate-card h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.gate-card,.preview-earth,.preview-cannon{transition:none}.gate-card:hover,.gate-card:focus-visible{transform:none}}

.collection-preview{background:linear-gradient(90deg,#082c22c9,transparent 80%),url('assets/frog-run/creek.webp') center/cover}.collection-heading{position:absolute;top:16px;left:15px;z-index:3;color:#fff5cf;text-shadow:0 2px 10px #071d20}.collection-heading strong{display:block;font:900 31px/1 Arial,sans-serif;letter-spacing:-.04em}.collection-heading span{display:block;font:800 8px/1.4 Arial,sans-serif;letter-spacing:.12em;margin-top:6px}.collection-frog{position:absolute;right:1px;bottom:12px;width:145px;height:145px;background:url('assets/frog-run/green.webp') 0 0/300% 200%;filter:drop-shadow(0 7px 5px #06191188)}.collection-insets{position:absolute;left:15px;bottom:34px;display:flex;gap:7px}.collection-insets>i{display:block;width:58px;height:58px;border:1px solid #ffe8a999;border-radius:50%;box-shadow:0 3px 8px #0007;background-color:#233d2c;background-repeat:no-repeat}.collection-bobcat{background-image:url('assets/bobcat-division/bobcat.png');background-position:0 0;background-size:200% 200%}.collection-turkey{background-image:url('assets/wilderness/turkey-poses.webp');background-position:100% 100%;background-size:200% 200%}