/* ===== Commander Miti — responsive kid-game styles (laptop + phone, portrait + landscape) ===== */
@font-face{
  font-family:'Fredoka';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/Fredoka.woff2') format('woff2');
}
:root{
  --navy:#0b1026; --indigo:#1c2656; --indigo2:#2a3a86;
  --accent:#ffd23f; --accent2:#ff8c42; --go:#3ddc6b; --go2:#27b85a;
  --pink:#ff6fb5; --blue:#4db8ff; --white:#fff; --ink:#10142a;
  --font:"Fredoka","Baloo 2","Segoe UI Rounded",system-ui,"Comic Sans MS",sans-serif;
  --pad: clamp(10px, 2.5vmin, 28px);
  --btn: clamp(64px, 9vmin, 96px);
  --r: clamp(16px, 3vmin, 28px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:var(--navy);
  font-family:var(--font); color:var(--white); touch-action:manipulation; user-select:none;}
#app{position:fixed; inset:0; overflow:hidden;}

.stage{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:var(--pad);
  text-align:center; gap:var(--pad);
  background:#000;}

/* ===== Big friendly buttons ===== */
.big-btn{
  font-family:var(--font); font-weight:800;
  font-size:clamp(20px,4.5vmin,40px); color:var(--ink);
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border:none; border-radius:var(--r); padding:clamp(14px,2.5vmin,26px) clamp(24px,5vmin,52px);
  box-shadow:0 8px 0 rgba(0,0,0,.25), 0 12px 24px rgba(0,0,0,.35);
  cursor:pointer; min-height:var(--btn); line-height:1.1;
  transition:transform .08s ease, box-shadow .08s ease;}
.big-btn:active{transform:translateY(5px); box-shadow:0 3px 0 rgba(0,0,0,.25);}
.big-btn.go{background:linear-gradient(180deg,var(--go),var(--go2)); color:#06381c;}
.big-btn.pulse{animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

.title{font-size:clamp(26px,7vmin,68px); font-weight:800; margin:0;
  text-shadow:0 3px 0 rgba(0,0,0,.3), 0 0 24px rgba(120,160,255,.5);
  background:linear-gradient(180deg,#9fd0ff,#4f7fff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.subtitle{font-size:clamp(16px,3.5vmin,30px); opacity:.95; margin:0;}
.hint{font-size:clamp(14px,2.6vmin,22px); opacity:.8;}

/* ===== Cards / grids (planets, samples, landing spots) ===== */
.grid{display:grid; gap:clamp(8px,2vmin,20px); width:100%; max-width:1100px;
  grid-template-columns:repeat(auto-fit,minmax(clamp(110px,26vw,190px),1fr));
  overflow-y:auto; max-height:78vh; padding:6px;}

/* Fixed-width cards that wrap & center — so 1 card looks the same as 5 (no stretch, no scrollbar) */
.cardrow{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  gap:clamp(8px,2vmin,20px); width:100%; max-width:1100px; max-height:78vh;
  overflow-y:auto; overflow-x:hidden; padding:6px;}
.cardrow .card{width:clamp(150px,30vw,230px); flex:0 0 auto;}
.card{background:rgba(255,255,255,.08); border:3px solid rgba(255,255,255,.18);
  border-radius:var(--r); padding:clamp(8px,1.6vmin,16px); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;}
.card:active{transform:scale(.96);}
.card.selected{border-color:var(--accent); background:rgba(255,210,63,.18); transform:scale(1.03);}
.card .emoji{font-size:clamp(34px,8vmin,64px); line-height:1;}
.card img{width:clamp(60px,16vw,120px); height:clamp(60px,16vw,120px); object-fit:cover; border-radius:50%;}
.card .name{font-weight:800; font-size:clamp(14px,2.6vmin,24px);}
.card .meta{font-size:clamp(11px,2vmin,17px); opacity:.85;}
.card .blurb{font-size:clamp(11px,2vmin,16px); opacity:.92; line-height:1.2; margin-top:2px; color:#cfe0ff;}
.card .samp{font-size:clamp(16px,3.4vmin,26px); letter-spacing:2px;}
.card.float{animation:float 3s ease-in-out infinite;}
.card.float:nth-child(2n){animation-delay:.4s;} .card.float:nth-child(3n){animation-delay:.8s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.card.flipped{background:rgba(61,220,107,.18); border-color:var(--go);}

.row{display:flex; flex-wrap:wrap; gap:clamp(8px,2vmin,18px); align-items:center; justify-content:center;}
.tracker{display:flex; gap:10px; align-items:center; font-size:clamp(16px,3vmin,26px); font-weight:800;}
.dot{width:clamp(16px,3vmin,26px); height:clamp(16px,3vmin,26px); border-radius:50%;
  background:rgba(255,255,255,.25); border:2px solid rgba(255,255,255,.4);}
.dot.on{background:var(--go); border-color:#fff;}

/* ===== Name input ===== */
.name-input{font-family:var(--font); font-size:clamp(22px,5vmin,40px); font-weight:800;
  text-align:center; padding:clamp(10px,2vmin,18px); border-radius:var(--r);
  border:4px solid var(--accent); background:#fff; color:var(--ink); width:min(90vw,520px);}

/* ===== Background image stages (surface / launch / etc.) ===== */
.bg-cover{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-1;}
.bg-dim::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:-1;}

/* ===== HUD (ascent / asteroids) ===== */
.hud{position:absolute; top:calc(var(--pad) + env(safe-area-inset-top)); left:var(--pad);
  display:flex; flex-direction:column; gap:8px; z-index:5;}
.gauge{background:rgba(0,0,0,.4); border-radius:14px; padding:6px 12px; font-size:clamp(14px,2.6vmin,22px); font-weight:800;}
.bar{height:12px; width:clamp(120px,30vw,240px); background:rgba(255,255,255,.2); border-radius:8px; overflow:hidden;}
.bar > i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--go),var(--accent));}

/* ===== Floating game objects (samples, asteroids) ===== */
.floater{position:absolute; font-size:clamp(40px,9vmin,80px); cursor:pointer; z-index:4;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); display:flex; flex-direction:column; align-items:center;}
.asteroid{will-change:transform;}
@keyframes astfall{from{transform:translateY(0) rotate(0);}to{transform:translateY(118vh) rotate(180deg);}}
.floater .lbl{font-size:clamp(11px,2vmin,16px); background:rgba(0,0,0,.5); padding:2px 8px; border-radius:10px; margin-top:-4px;}
.floater:active{transform:scale(1.2);}

/* ===== Static pulsing samples on the surface (bottom third) ===== */
.surf-sample{position:absolute; display:flex; flex-direction:column; align-items:center; cursor:pointer;
  font-size:clamp(44px,9vmin,84px); filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
  animation:samplepulse 1.3s ease-in-out infinite; transform-origin:center;}
.surf-sample .lbl{font-size:clamp(12px,2.2vmin,18px); background:rgba(0,0,0,.6); padding:2px 10px;
  border-radius:12px; margin-top:2px; white-space:nowrap;}
@keyframes samplepulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}

/* ===== Lander / sprites on surface ===== */
.surface-sprite{position:absolute; z-index:3; pointer-events:none;}
.lander{bottom:6%; right:6%; width:clamp(120px,28vw,300px);}
.walker{bottom:4%; left:4%; width:clamp(90px,20vw,200px); animation:bobwalk 1.2s ease-in-out infinite;}
@keyframes bobwalk{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-6px) rotate(2deg);}}

/* ===== Video ===== */
.video-wrap{position:absolute; inset:0; background:#000; z-index:20; display:flex; align-items:center; justify-content:center;}
.video-wrap video{width:100%; height:100%; object-fit:contain; background:#000;}
.skip-btn{position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); right:16px; z-index:21;
  font-size:clamp(16px,3vmin,24px); padding:10px 20px;}

/* ===== Countdown ===== */
.countdown{font-size:clamp(80px,30vmin,260px); font-weight:900; color:var(--accent);
  text-shadow:0 0 40px rgba(255,210,63,.8); cursor:pointer; line-height:1;}

/* ===== Overlay HUD buttons + Miti ===== */
.overlay{position:absolute; inset:0; pointer-events:none; z-index:10;}
.hud-btn{position:absolute; pointer-events:auto; width:clamp(48px,8vmin,68px); height:clamp(48px,8vmin,68px);
  border-radius:50%; border:3px solid rgba(255,255,255,.5); background:rgba(20,30,70,.7);
  font-size:clamp(20px,4vmin,32px); cursor:pointer; color:#fff;}
.hud-btn:active{transform:scale(.92);}
.hearagain{top:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right));}
.stickers{top:calc(10px + env(safe-area-inset-top)); right:calc(72px + env(safe-area-inset-right));}
.settings{top:calc(10px + env(safe-area-inset-top)); right:calc(134px + env(safe-area-inset-right));}
.home{top:calc(10px + env(safe-area-inset-top)); right:calc(196px + env(safe-area-inset-right));}
.miti{position:absolute; pointer-events:auto; bottom:0; left:calc(6px + env(safe-area-inset-left));
  height:clamp(110px,22vmin,220px); cursor:pointer; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));
  transition:transform .15s ease; transform-origin:bottom center;}
.miti.talking{animation:talk .5s ease-in-out infinite;}
.miti.cheer{animation:cheer .5s ease;}
@keyframes talk{0%,100%{transform:scale(1);}50%{transform:scale(1.04,0.98);}}
@keyframes cheer{0%{transform:translateY(0) rotate(0);}30%{transform:translateY(-18px) rotate(-6deg);}60%{transform:translateY(-18px) rotate(6deg);}100%{transform:translateY(0);}}
.miti.hidden{display:none;}

/* ===== Curtain transition ===== */
.curtain{position:absolute; inset:0; background:var(--navy); z-index:30; opacity:0; pointer-events:none;
  transition:opacity .35s ease;}
.curtain.on{opacity:1; pointer-events:all;}

/* ===== Rotate hint ===== */
.rotate-hint{position:absolute; inset:0; background:var(--navy); z-index:40; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; text-align:center;}
.rotate-hint.show{display:flex;}
.rotate-emoji{font-size:84px; animation:spin 2s ease-in-out infinite;}
@keyframes spin{0%,100%{transform:rotate(0);}50%{transform:rotate(90deg);}}

/* ===== Certificate ===== */
.cert{background:#fffef5; color:#3a2d10; border:10px solid var(--accent2); border-radius:18px;
  padding:clamp(16px,3vmin,34px); width:min(94vw,720px); max-height:80vh; overflow:auto;
  box-shadow:0 14px 40px rgba(0,0,0,.5); text-align:center;}
.cert h2{font-size:clamp(22px,4.5vmin,38px); margin:.2em 0; color:#b5651d;}
.cert .who{font-size:clamp(26px,6vmin,52px); font-weight:900; color:#1a3a8a; margin:.1em 0;}
.cert .samples{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:.6em 0;}
.cert .samples span{background:#fff3d6; border:2px solid var(--accent2); border-radius:12px; padding:6px 10px; font-weight:700;}

/* confetti */
.confetti{position:absolute; top:-30px; font-size:24px; z-index:25; pointer-events:none; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg); opacity:.9;}}

/* settings / modal */
.modal{position:absolute; inset:0; z-index:35; background:rgba(5,8,20,.85); display:flex;
  align-items:center; justify-content:center; padding:20px;}
.modal .panel{background:var(--indigo); border:4px solid var(--accent); border-radius:var(--r);
  padding:24px; width:min(92vw,460px); display:flex; flex-direction:column; gap:14px;}
.toggle{display:flex; justify-content:space-between; align-items:center; font-size:clamp(16px,3vmin,24px); font-weight:700;}
.switch{width:64px; height:34px; border-radius:18px; background:#555; position:relative; cursor:pointer;}
.switch.on{background:var(--go);}
.switch i{position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:#fff; transition:left .15s;}
.switch.on i{left:33px;}
.gate-num{font-size:clamp(40px,10vmin,90px); font-weight:900;}

/* calm mode: softer + calmer */
body.calm .stage{filter:brightness(.82) saturate(.9);}
body.calm .card.float,body.calm .big-btn.pulse{animation:none;}

/* print: only the Mission Log, flowing fully (no fixed height / scroll clipping) */
@media print{
  html,body{height:auto !important; overflow:visible !important; background:#fff;}
  body * {visibility:hidden;}
  .cert, .cert *{visibility:visible;}
  .cert{position:static !important; margin:0 auto !important; width:100% !important; max-width:100% !important;
    max-height:none !important; height:auto !important; overflow:visible !important;
    border:none !important; box-shadow:none !important;}
  .cert img{max-width:55% !important;}
  .overlay,.curtain,.hud-btn,.miti,.big-btn,.modal{display:none !important;}
  @page{margin:12mm;}
}

/* makes a JPG's solid-black background vanish on the black stage (no visible box/glow) */
.blend{mix-blend-mode:screen;}

/* utility */
.hidden{display:none !important;}
.fade-in{animation:fadein .4s ease;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}