:root{
 --blue:#128EEA;--blue2:#075AA8;--green:#59C532;--green2:#2F8E19;--ink:#17364f;
 --gold:#f6bd2c;--purple:#6d5bd0;--teal:#20a7a0;--orange:#e97725;--cream:#fff7dc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,-apple-system,sans-serif;
 color:var(--ink);
 background:linear-gradient(180deg,#9ee8ff 0%,#eaf8ff 48%,#fff3cf 100%);
 min-height:100vh;
}
button,input{font:inherit}
button{cursor:pointer}
.app{max-width:500px;margin:auto;min-height:100vh;padding:18px 16px calc(36px + env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.brand{font-weight:950;font-size:28px;color:var(--blue2)}
.pill{font-size:12px;font-weight:900;background:#ffffffdd;padding:8px 11px;border-radius:999px;white-space:nowrap}
.screen{min-height:calc(100vh - 82px);display:none;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding-bottom:18px;position:relative}
.screen.active{display:flex}
.hero{width:min(95vw,420px);height:320px;object-fit:contain;filter:drop-shadow(0 16px 16px #075a8f2f)}
.mini{width:160px;height:165px;object-fit:contain}
.avatar{width:86px;height:86px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 8px 18px #0002}
h1{font-size:40px;line-height:.95;margin:-5px 0 10px;color:var(--blue2);letter-spacing:-.035em}
h1 span{color:var(--green2)}
h2{font-size:29px;line-height:1.05;margin:7px 0 10px;color:var(--blue2)}
h3{font-size:20px;margin:20px 0 10px}
.sub{max-width:390px;font-weight:760;font-size:17px;line-height:1.38;margin:0 auto 18px}
.card{width:100%;background:#ffffffdf;border:2px solid #fff;border-radius:26px;padding:18px;box-shadow:0 18px 44px #075a8f22}
.btn{display:block;width:100%;border:0;border-radius:18px;padding:16px 15px;margin:9px 0;font-weight:950;font-size:18px;box-shadow:0 8px 0 #00000018}
.blue{background:linear-gradient(#2ba6ff,#0c7fd6);color:white}
.green{background:linear-gradient(#79de43,#4ab42a);color:white}
.orange{background:linear-gradient(#ff9d4a,#e96e24);color:white}
.gold{background:linear-gradient(#ffd75a,#f4b722);color:#473600}
.purple{background:linear-gradient(#8c7af1,#6d5bd0);color:white}
.white{background:#fff;color:var(--ink);border:2px solid #17364f16;box-shadow:none}
.back{align-self:flex-start;border:0;background:#ffffffdd;color:var(--blue2);font-weight:900;padding:10px 14px;border-radius:999px;margin:10px 0 8px}
.text-button{border:0;background:transparent;color:var(--blue2);font-weight:900;margin-top:10px;text-decoration:underline}
.tag{display:inline-block;background:#fff5bf;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;margin-bottom:10px}
.progress{width:100%;display:flex;gap:7px;margin:4px 0 12px}
.dot{height:9px;flex:1;background:#ffffff99;border-radius:99px}
.dot.on{background:var(--green)}
.instruction{width:100%;background:#fff;border:4px solid var(--purple);border-radius:22px;padding:16px 16px 14px;margin:8px 0 16px;box-shadow:0 10px 24px #6d5bd022}
.instruction .eyebrow{font-size:13px;font-weight:950;color:var(--purple);letter-spacing:.04em}
.instruction .main{font-size:24px;line-height:1.05;font-weight:950;margin-top:5px;color:#2b235f}
.clue{font-size:15px;font-weight:800;line-height:1.35;background:#fff7c8;padding:12px 14px;border-radius:16px;margin-bottom:14px;width:100%}
.tip{font-size:14px;font-weight:800;line-height:1.35;background:#fff6c9;padding:13px 14px;border-radius:16px;margin:12px 0;width:100%}
.tip.hidden{display:none}
.choice{display:flex;align-items:center;gap:14px;width:100%;border:2px solid #17364f13;border-radius:20px;padding:14px;margin:10px 0;text-align:left;box-shadow:0 6px 0 #0000000d;background:white;color:inherit}
.choice .pic{width:82px;height:72px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:40px;flex:0 0 auto;background:linear-gradient(180deg,#dff5ff,#fff0c9)}
.choice strong{display:block;font-size:17px;line-height:1.15}
.choice span{display:block;font-size:14px;font-weight:700;color:#5b7181;margin-top:3px}
.feedback{font-size:52px;margin:2px 0 4px}
.starline{font-size:24px;letter-spacing:3px}
.badge{width:170px;height:170px;border-radius:50%;margin:8px auto 14px;background:radial-gradient(circle at 35% 30%,#fff3a9 0 12%,#ffd44f 13% 58%,#f0ae16 59% 100%);border:8px solid white;box-shadow:0 14px 24px #7d5a001f;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#513b00}
.badge .emoji{font-size:53px}
.badge b{font-size:16px;line-height:1.05;margin-top:7px}
.namepop{display:inline-block;background:#fff4a8;border:3px solid #f2cc42;border-radius:14px;padding:6px 10px;color:#075aa8;font-weight:950}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%}
.menu button{color:inherit;background:#fff;border-radius:20px;padding:16px 10px;border:2px solid #ffffff;box-shadow:0 8px 18px #075a8f15}
.menu button.complete{background:#eefbe6;border-color:#9ad87d}
.menu .ico{font-size:38px}
.menu b{display:block;font-size:15px;margin-top:7px}
.menu small{font-size:12px;font-weight:750;color:#647b8b}
.passport{background:#fff;border-radius:30px;padding:20px;box-shadow:0 20px 48px #075a8f22;border:3px solid #ffffff;width:100%}
.passhero{display:flex;align-items:center;gap:14px;text-align:left}
.passport-title{margin:0}
.passname{margin-top:8px;display:inline-flex;align-items:center;gap:7px;background:#fff4a8;border:3px solid #f2cc42;border-radius:16px;padding:9px 13px;font-size:15px;font-weight:900;color:#5a4700;box-shadow:0 5px 0 #e8bc2d}
.passname strong{font-size:23px;line-height:1;color:#075aa8}
.progress-head{display:flex;justify-content:space-between;font-weight:900;font-size:14px;margin-top:18px}
.bar{height:14px;background:#e8edf0;border-radius:99px;overflow:hidden;margin-top:8px}
.fill{height:100%;width:0;background:linear-gradient(90deg,#79de43,#4ab42a);transition:width .25s ease}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.badgecard{background:#fff8dc;border-radius:18px;padding:13px;text-align:center;border:2px solid #f3df91}
.badgecard.locked{background:#f2f4f5;border-color:#e0e5e8;opacity:.65}
.badgecard .icon{font-size:34px}
.badgecard b{display:block;font-size:13px;margin-top:6px}
.badgecard small{display:block;font-size:11px;color:#667b89;margin-top:3px;font-weight:800}
.hidden-summary{background:#eef8ff;border-radius:18px;padding:14px}
.hiddenrow{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.pico-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #cfe7f6;font-size:18px}
.pico-dot.found{background:#fff2a9;border-color:#f2cd49}
.hidden-pico{position:absolute;border:0;background:#fff2a9;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 6px 12px #0002;z-index:3}
.hidden-pico.found{opacity:.35}
.hidden-pos-one{right:5px;top:17%}
.hidden-pos-two{right:8px;bottom:18%}
.hidden-pos-three{right:8px;top:20%}
.hidden-pos-four{left:5px;bottom:15%}
.in-game{right:8px;top:25%;display:none}
.input-label{display:block;text-align:left;font-weight:950;margin-bottom:8px}
.name-input{width:100%;font-size:18px;padding:16px;border:3px solid #17364f18;border-radius:16px;background:white;outline:none}
.name-input:focus{border-color:var(--blue)}
.tiny{font-size:12px;color:#627887;font-weight:750;line-height:1.35}
.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.select-card{position:relative;display:block}
.select-card input{position:absolute;opacity:0;pointer-events:none}
.select-card span{display:flex;align-items:center;justify-content:center;min-height:76px;padding:14px 10px;background:#fff;border:3px solid #17364f10;border-radius:18px;font-weight:900;font-size:17px;line-height:1.15;box-shadow:0 6px 0 #0000000d;transition:.12s ease}
.select-card input:checked + span{background:#e9fbdc;border-color:#59C532;color:#245d18;box-shadow:0 6px 0 #3b971e}
.select-card input:checked + span::after{content:" ✓";font-size:20px;margin-left:6px;color:#2f8e19}
.top-gap{margin-top:15px}
.cert{width:100%;background:linear-gradient(180deg,#fffdf2,#fff2b3);border:7px double #f0bc28;border-radius:24px;padding:22px 18px;box-shadow:0 18px 40px #7d5a001d}
.cert .big{font-size:28px;font-weight:950;color:var(--blue2);line-height:1.05}
.cert-name{font-size:34px;font-weight:950;color:#6d5bd0;margin:12px 0}
.cert .small{font-size:15px;font-weight:800;line-height:1.4}
.cert-stars{margin-top:14px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#17364f;color:white;padding:11px 16px;border-radius:999px;font-weight:900;opacity:0;pointer-events:none;transition:.2s ease;z-index:20;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:380px){
 .brand{font-size:24px}.pill{font-size:11px}.hero{height:285px}
 .instruction .main{font-size:21px}.select-card span{font-size:15px}
}


.game-visual{width:100%;background:#dff4ff;border:2px solid #fff;border-radius:22px;padding:12px;margin:0 0 14px;box-shadow:0 8px 18px #075a8f12}
.game-visual.hidden{display:none}
.game-visual svg{display:block;width:100%;height:auto}

.parent-tip{
  width:100%;max-width:390px;background:#fff9d9;border:2px solid #f1d86a;
  border-radius:18px;padding:12px 14px;margin:0 auto 16px;text-align:left;
  font-size:13px;line-height:1.35;font-weight:760;color:#425d70
}
.parent-tip-title{font-size:14px;font-weight:950;color:#795d00;margin-bottom:4px}
.menu button{position:relative;min-height:132px}
.menu .status-chip{
  display:inline-block;margin-top:8px;padding:5px 8px;border-radius:999px;
  font-size:11px;font-weight:950;background:#edf4f8;color:#587080
}
.menu button.complete .status-chip{background:#dff7d2;color:#2d721f}
.menu button.next-game{
  border-color:#f0bf2a;box-shadow:0 0 0 4px #fff3b5,0 8px 18px #075a8f15
}
.menu button.next-game::before{
  content:"NEXT ADVENTURE";position:absolute;top:-10px;left:50%;
  transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:999px;
  background:#ffd75a;color:#5d4700;font-size:10px;font-weight:950
}
.hunt-card{
  width:100%;margin-top:14px;display:flex;align-items:center;gap:12px;padding:13px 14px;
  background:#eef8ff;border:2px solid #d5edff;border-radius:20px;text-align:left
}
.hunt-icon{font-size:30px}
.hunt-copy{display:flex;flex-direction:column;gap:2px;flex:1}
.hunt-copy b{font-size:14px;color:var(--blue2)}
.hunt-copy span{font-size:12px;font-weight:850;color:#607b8e}
.mini-passport-btn{
  border:0;border-radius:14px;padding:10px 11px;background:#fff;color:var(--blue2);
  font-size:12px;font-weight:950;box-shadow:0 4px 0 #0000000d
}
.next-mission{
  width:100%;margin:12px 0 6px;border-radius:18px;padding:14px;
  background:linear-gradient(180deg,#f2edff,#ffffff);border:2px solid #ded4ff;
  font-weight:850;line-height:1.35
}
.next-mission b{display:block;color:#5b48bb;font-size:15px;margin-bottom:4px}
.next-mission button{
  width:100%;margin-top:10px;border:0;border-radius:14px;padding:11px;
  background:linear-gradient(#8c7af1,#6d5bd0);color:#fff;font-weight:950
}
.passport-celebrate{background:linear-gradient(180deg,#fff7c9,#fff);border-color:#f0d15e}