:root{
  --bg:#eef7fb;
  --panel:#ffffff;
  --panel-soft:#f7fbfd;
  --ink:#16324f;
  --muted:#6e8298;
  --blue:#2f80ed;
  --cyan:#39c8d6;
  --mint:#76d7c4;
  --yellow:#ffd166;
  --orange:#ff9f6e;
  --purple:#8e7dff;
  --pink:#ff8fb7;
  --green:#64c98d;
  --line:#dbeaf2;
  --shadow:0 12px 30px rgba(43,85,113,.12);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 0%,#dff7ff 0,transparent 28%),
    radial-gradient(circle at 90% 8%,#f3ecff 0,transparent 22%),
    linear-gradient(180deg,#f8fcfe,#edf7fb 70%,#e8f4f8);
  min-height:100vh
}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:4px solid #ffd166;outline-offset:3px}
#app{max-width:1500px;margin:auto;padding:14px 18px 34px}

.topbar{
  position:sticky;top:8px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:20px;
  padding:9px 14px;box-shadow:0 8px 24px rgba(42,82,110,.08)
}
.brand{display:grid;grid-template-columns:auto auto;gap:0 8px;align-items:center}
.brand>span{grid-row:1/3;font-size:29px}
.brand b{font-size:1.2rem;color:#234d70}
.brand small{color:#7e92a5}
.topnav{display:flex;gap:6px}
.topnav button{
  border:0;background:#f0f7fb;color:#34556e;
  border-radius:12px;padding:10px 12px;font-weight:800
}
#soundBtn{background:#eaf3ff}

.screen{display:none}
.screen.active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}

.hero{
  position:relative;overflow:hidden;border-radius:30px;
  min-height:540px;border:1px solid #d7e8ef;box-shadow:var(--shadow);
  background:#dff3fa
}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  filter:saturate(.82) brightness(1.08)
}
.heroShade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.93),rgba(255,255,255,.72) 48%,rgba(255,255,255,.15))
}
.heroCopy{
  position:relative;z-index:2;min-height:540px;
  width:min(650px,88%);display:flex;flex-direction:column;
  justify-content:center;padding:40px clamp(22px,5vw,72px)
}
.pill{
  align-self:flex-start;background:#e7f4fb;border:1px solid #cfe7f2;
  color:#3b6c8f;border-radius:999px;padding:8px 12px;font-weight:900
}
.hero h1{
  font-size:clamp(3.8rem,9vw,7.3rem);line-height:.9;
  margin:18px 0 8px;letter-spacing:-.06em;color:#224b72;
  text-shadow:none
}
.hero h1 span{color:#2f80ed}
.hero h2{color:#38aebc;font-size:2rem;margin:0}
.hero p{color:#536f86;font-size:1.12rem;line-height:1.65;max-width:560px}
.heroActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}

.btn{
  border:0;border-radius:16px;min-height:54px;padding:0 22px;
  font-weight:1000;box-shadow:0 4px 0 rgba(73,112,132,.16);
  transition:.12s
}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(73,112,132,.16)}
.yellow{
  background:linear-gradient(180deg,#ffe599,#ffd166);
  color:#2a4b65;border:1px solid #f5cb5d
}
.purple{
  background:linear-gradient(180deg,#9d91ff,#8270ee);
  color:#fff;border:1px solid #7764e6
}
.cyan{
  background:linear-gradient(180deg,#7de2eb,#42c4d1);
  color:#194a60;border:1px solid #36b6c3
}
.light{background:#fff;color:#37576f;border:1px solid #d7e5ed}
.mini{min-height:46px}

.introCards{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;margin:18px 0
}
.introCards article{
  background:#fff;color:#23465f;border-radius:18px;padding:17px;
  text-align:center;border:1px solid var(--line);box-shadow:0 8px 20px rgba(53,94,119,.07)
}
.introCards b,.introCards span{display:block}
.introCards span{color:#70879a;margin-top:5px}

.titleRow{
  display:flex;justify-content:space-between;align-items:end;
  margin:30px 4px 12px
}
.titleRow small,.heading small,.hubHead small{
  color:#54bfc9;font-weight:1000;letter-spacing:.15em
}
.titleRow h2{font-size:2rem;margin:4px 0;color:#234a69}
.previewGrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px
}
.previewGrid div{
  background:#fff;color:#244966;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 8px 22px rgba(53,94,119,.07)
}
.previewGrid img{
  display:block;width:100%;height:150px;object-fit:cover;
  filter:saturate(.86) brightness(1.05)
}
.previewGrid span{display:block;padding:11px;font-weight:900;text-align:center}

.panel{
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:28px;
  min-height:700px;padding:38px;
  box-shadow:var(--shadow)
}
.heading{text-align:center;margin-bottom:28px}
.heading h2{
  font-size:clamp(2.5rem,5vw,3.8rem);margin:6px 0;color:#234a69
}
.heading p{color:#73899b}

.gradeGrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:15px;max-width:1100px;margin:auto
}
.gradeGrid button,.timeGrid button,.skillGrid button{
  border:1px solid #d8e9ef;
  background:linear-gradient(145deg,#ffffff,#f5fbfd);
  color:#244a68;border-radius:22px;
  box-shadow:0 8px 20px rgba(56,96,119,.08);
  padding:17px;min-height:170px
}
.gradeGrid button:hover,.timeGrid button:hover,.skillGrid button:hover{
  transform:translateY(-2px);box-shadow:0 12px 24px rgba(56,96,119,.12)
}
.gradeGrid b{display:block;font-size:3.8rem;color:#2f80ed}
.gradeGrid span{font-weight:900}
.gradeGrid i{display:block;font-style:normal;font-size:34px;margin-top:9px}

.timeGrid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:15px;max-width:1100px;margin:auto
}
.timeGrid button{min-height:190px}
.timeGrid i{display:block;font-style:normal;font-size:50px}
.timeGrid b{font-size:2.8rem;color:#38aebc}
.timeGrid span{font-weight:900;color:#5f7890}

.skillGrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:15px;max-width:1100px;margin:auto
}
.skillGrid button{font-size:44px}
.skillGrid b{display:block;font-size:1rem;margin-top:10px}

.hubHead{
  display:flex;justify-content:space-between;align-items:end;
  gap:15px;margin-bottom:22px
}
.hubHead h2{font-size:2.1rem;margin:5px 0;color:#234a69}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{
  padding:8px 10px;border-radius:999px;background:#eef7fb;
  border:1px solid #d6e9f1;color:#52728a;font-weight:900
}

.gameGrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px
}
.gameCard{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:0 8px 22px rgba(53,94,119,.08)
}
.gameCard img{
  width:100%;height:155px;object-fit:cover;display:block;
  filter:saturate(.86) brightness(1.05)
}
.gameCard .body{padding:14px}
.gameCard h3{margin:0 0 5px;color:#244966}
.gameCard p{color:#71889a;min-height:38px;margin:0;font-size:.9rem}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}
.tags span{
  background:#f1f8fb;color:#547289;border-radius:999px;
  padding:4px 7px;font-size:.72rem;border:1px solid #e1eef3
}
.playBtn{
  width:100%;min-height:44px;border:0;border-radius:13px;
  background:linear-gradient(#ffe8a8,#ffd166);
  color:#31516a;font-weight:1000;box-shadow:0 4px 0 #e5be52
}

.playShell{
  min-height:740px;
  background:linear-gradient(180deg,#f8fdff,#edf7fb);
  border:1px solid #d7e9f0;border-radius:28px;padding:18px;
  box-shadow:var(--shadow);color:#234966
}
.playTop{
  display:flex;justify-content:space-between;align-items:center;gap:10px
}
.backBtn{
  border:1px solid #d6e7ee;background:#fff;color:#45657b;
  border-radius:999px;padding:9px 13px;font-weight:900
}
.playTop>div:nth-child(2){text-align:center}
.playTop small{display:block;color:#7d92a3}
.score{
  background:#fff;border:1px solid #dcebf1;border-radius:999px;
  padding:9px 14px;color:#31516a
}
.stage{max-width:1100px;margin:18px auto 0;text-align:center}
.prompt{
  background:#fff;color:#214963;border:1px solid #cfe7ef;
  border-radius:21px;padding:20px;
  font-size:clamp(1.45rem,3vw,2.15rem);
  font-weight:1000;box-shadow:0 8px 22px rgba(53,94,119,.08);
  margin-bottom:18px
}
#gameArea{min-height:390px;display:grid;place-items:center}
.playBottom{
  display:flex;justify-content:center;align-items:center;
  gap:18px;flex-wrap:wrap;margin-top:14px
}
.timer{
  width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;border:8px solid #ffd166;
  background:#fff;color:#4a6680;font-size:1.55rem;font-weight:1000;
  box-shadow:0 8px 22px rgba(53,94,119,.08)
}
.controls{display:flex;gap:8px}

.wheelWrap,.guessScene,.mazeWrap,.diceWrap,.pictureWord{
  width:100%;gap:22px;align-items:center
}
.wheelWrap{display:grid;grid-template-columns:360px 1fr}
.wheel{
  width:320px;height:320px;border-radius:50%;margin:auto;
  background:conic-gradient(#ff9ebf 0 45deg,#ffe28a 45deg 90deg,#8ddfe8 90deg 135deg,#9ce1c6 135deg 180deg,#a89cff 180deg 225deg,#ffb78e 225deg 270deg,#8bd6f1 270deg 315deg,#ffc0cb 315deg 360deg);
  border:10px solid #fff;box-shadow:0 0 0 6px #dceaf0,0 16px 30px rgba(47,86,108,.15);
  position:relative;transition:transform 2.2s cubic-bezier(.2,.9,.2,1)
}
.wheel:after{
  content:'★';position:absolute;inset:50% auto auto 50%;
  transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#f4b942;font-size:40px;
  box-shadow:0 0 0 6px #dceaf0
}
.pointer{font-size:40px;transform:rotate(90deg);margin:auto;color:#f2b643}
.wheelCard,.clueCard,.mazeInfo,.diceTask{
  background:#fff;color:#244966;border-radius:20px;padding:24px;
  border:1px solid var(--line);box-shadow:0 8px 22px rgba(53,94,119,.08)
}

.guessScene{display:grid;grid-template-columns:1fr 1fr}
.mysteryBox{
  min-height:320px;border-radius:22px;
  background:linear-gradient(145deg,#dff6fb,#eae7ff);
  display:grid;place-items:center;font-size:160px;border:1px solid #d8eaf0
}
.clueCard{text-align:left}.clueCard li{margin:12px 0;font-size:1.07rem}

.optionGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;width:100%}
.option{
  min-height:84px;border-radius:17px;border:1px solid #d4e6ee;
  background:#fff;color:#264a67;font-size:1.1rem;font-weight:1000;
  box-shadow:0 5px 0 #d9e7ed
}
.option.correct{background:#dff6e7;border-color:#8bd3a5}
.option.wrong{background:#ffe4e7;border-color:#e8a3aa}

.oddGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.oddCard{
  min-height:135px;border:1px solid #d9e8ef;border-radius:18px;
  background:#fff;font-size:68px;box-shadow:0 6px 18px rgba(53,94,119,.08)
}
.oddCard.correct{outline:5px solid #76cfa0}

.matchGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.matchCard{
  background:#fff;color:#264a66;border-radius:18px;padding:16px;
  min-height:140px;display:grid;place-items:center;border:1px solid #dbeaf1
}
.matchCard .pic{font-size:62px}.matchCard b{font-size:1.05rem}

.memoryGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.memoryCard{
  height:126px;border-radius:16px;border:1px solid #cfe5ec;
  background:linear-gradient(145deg,#8e7dff,#68c8df);color:#fff;
  font-size:52px;display:grid;place-items:center;
  box-shadow:0 5px 15px rgba(53,94,119,.11)
}
.memoryCard.flipped,.memoryCard.matched{background:#fff;color:#244966}

.mazeWrap{display:grid;grid-template-columns:1fr 280px}
.maze{
  display:grid;grid-template-columns:repeat(6,1fr);gap:4px;
  background:#dfeff4;padding:7px;border-radius:18px;border:1px solid #d2e5ec
}
.cell{
  aspect-ratio:1;border-radius:8px;background:#bfe1ea;
  display:grid;place-items:center;font-size:28px;color:#2b5673
}
.cell.wall{background:#7e99aa}.cell.player{background:#ffe39a}.cell.goal{background:#a9e2bf}
.dirBtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dirBtns button{
  min-height:54px;border:0;border-radius:12px;background:#7ebed3;
  color:#fff;font-size:22px
}
.dirBtns .up{grid-column:2}.dirBtns .left{grid-column:1}.dirBtns .down{grid-column:2}.dirBtns .right{grid-column:3}

.diceWrap{display:grid;grid-template-columns:250px 1fr}
.dice{
  width:210px;height:210px;border-radius:28px;background:#fff;color:#43637b;
  font-size:105px;display:grid;place-items:center;border:1px solid #d9e8ef;
  box-shadow:0 10px 24px rgba(53,94,119,.09)
}

.pictureWord{display:grid;grid-template-columns:1fr 1fr}
.bigPic{
  min-height:310px;border-radius:22px;background:linear-gradient(145deg,#dff7fb,#eeeaff);
  display:grid;place-items:center;font-size:160px;border:1px solid #d9e9ef
}
.letters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.letter{
  min-width:58px;height:58px;border:1px solid #d7e7ee;border-radius:13px;
  background:#fff;color:#274b67;font-size:1.3rem;font-weight:1000;
  box-shadow:0 4px 0 #d8e7ed
}
.answerZone{
  min-height:76px;border:2px dashed #8fd2db;border-radius:15px;
  margin:14px 0;display:grid;place-items:center;font-size:1.5rem;color:#355872
}

.patternRow{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.patternItem{
  width:105px;height:105px;border-radius:17px;background:#fff;color:#294d69;
  display:grid;place-items:center;font-size:55px;border:1px solid #d9e8ef;
  box-shadow:0 5px 14px rgba(53,94,119,.08)
}
.patternItem.q{background:#b2a8ff;color:#fff}

.hiddenScene{
  position:relative;width:100%;min-height:390px;border-radius:22px;
  background:linear-gradient(#c8f0f4 0 45%,#ffe7b9 45%);overflow:hidden;
  border:1px solid #d5e7ec
}
.hiddenObj{position:absolute;border:0;background:transparent;font-size:48px}
.hiddenObj.found{opacity:.2;filter:grayscale(1)}
.hiddenList{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.hiddenList span{
  background:#fff;color:#31526b;border-radius:999px;padding:7px 10px;
  font-weight:900;border:1px solid #dceaf0
}

.sortWrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.bin{
  background:#fff;color:#274a66;border-radius:19px;padding:18px;
  min-height:230px;border:1px solid #dceaf0
}
.sortItems{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;grid-column:1/-1}
.sortItem{
  border:1px solid #d8e7ed;border-radius:13px;background:#fff;color:#294e69;
  padding:12px 16px;font-weight:1000;box-shadow:0 4px 0 #d8e7ed
}

.treasureMap{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;max-width:760px
}
.spot{
  aspect-ratio:1;border-radius:18px;border:1px solid #cfe3eb;
  background:linear-gradient(#eaf6fa,#dceef3);color:#385c75;font-size:38px
}
.spot.opened{background:#fff}.spot.treasure{background:#ffe9a5}

.resultCard{
  max-width:850px;margin:55px auto;background:#fff;
  border:1px solid var(--line);border-radius:30px;padding:42px;text-align:center;
  box-shadow:var(--shadow);color:#254a67
}
.cup{font-size:105px}
.resultCard h2{font-size:3.6rem;color:#2f80ed;margin:8px}
.resultStats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}
.resultStats div{
  background:#f5fafc;color:#284c68;border-radius:18px;padding:16px;border:1px solid #e0edf2
}
.resultStats b{display:block;font-size:2.3rem}
.resultStats span{display:block;color:#72899b}

.toast{
  position:fixed;left:50%;top:90px;transform:translate(-50%,-12px);
  opacity:0;z-index:100;background:#294e69;color:#fff;
  border-radius:999px;padding:10px 16px;transition:.2s;
  box-shadow:0 8px 24px rgba(53,94,119,.15)
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1100px){
  .gameGrid{grid-template-columns:repeat(3,1fr)}
  .previewGrid{grid-template-columns:repeat(2,1fr)}
  .wheelWrap,.guessScene,.mazeWrap,.diceWrap,.pictureWord{grid-template-columns:1fr}
  .gradeGrid,.skillGrid{grid-template-columns:repeat(2,1fr)}
  .timeGrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:650px){
  #app{padding:7px}
  .topnav button:not(#soundBtn){display:none}
  .brand small{display:none}
  .hero{min-height:520px}
  .heroCopy{min-height:520px;padding:24px 18px}
  .hero h1{font-size:4rem}
  .introCards{grid-template-columns:1fr 1fr}
  .gameGrid{grid-template-columns:1fr 1fr}
  .previewGrid{grid-template-columns:1fr 1fr}
  .gradeGrid,.skillGrid{grid-template-columns:1fr 1fr}
  .timeGrid{grid-template-columns:1fr 1fr}
  .panel{padding:20px 12px}
  .wheel{width:270px;height:270px}
  .oddGrid,.memoryGrid{grid-template-columns:repeat(3,1fr)}
  .matchGrid{grid-template-columns:1fr 1fr}
  .resultStats{grid-template-columns:1fr 1fr}
  .resultStats div:last-child{grid-column:1/-1}
  .gameCard img{height:115px}
  .gameCard p{display:none}
}

.connectionGrid{max-width:850px;margin:auto}
.connectionCard{min-height:135px;font-size:clamp(1.1rem,3vw,2.3rem);padding:10px;word-break:break-word}
.connectionCard.matched{background:#e2f7ea!important;border-color:#8bd3a5!important}
.pairExplain{margin:16px auto 0;max-width:760px;background:#fff;color:#31526b;border:1px solid #dceaf0;border-radius:16px;padding:12px 16px;font-weight:800}

.harderOdd{grid-template-columns:repeat(4,1fr)}
.harderOdd .oddCard{font-size:58px;min-height:112px}
.dice.rolling{animation:diceRoll .22s linear infinite}
@keyframes diceRoll{
0%{transform:rotate(0) scale(1)}
25%{transform:rotate(90deg) scale(1.08)}
50%{transform:rotate(180deg) scale(.96)}
75%{transform:rotate(270deg) scale(1.08)}
100%{transform:rotate(360deg) scale(1)}
}
#treasureChallenge{margin-top:16px}
@media(max-width:650px){
 .harderOdd{grid-template-columns:repeat(3,1fr)}
 .harderOdd .oddCard{font-size:48px;min-height:95px}
}