:root{
  --sky1:#80d3ff;
  --sky2:#d6f4ff;
  --grass1:#6bc04b;
  --grass2:#4d9c35;
  --dirt:#8d5b2f;
  --wood:#a86d37;
  --wood-dark:#734318;
  --stone:#73839a;
  --panel:#fff8de;
  --ink:#203247;
  --gold:#ffc928;
  --blue:#2c87ff;
  --green:#56b63f;
  --purple:#9860ff;
  --red:#f05a4a;
  --shadow:0 14px 0 rgba(0,0,0,.18),0 22px 34px rgba(17,42,61,.22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:Verdana,"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);touch-action:manipulation}
body{
  background:
    linear-gradient(var(--sky2) 0 10%, transparent 10% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 16px, rgba(0,0,0,.02) 16px 32px),
    linear-gradient(180deg, var(--sky1) 0 44%, #8bddff 44% 57%, var(--grass1) 57% 69%, var(--grass2) 69% 100%);
  overflow-x:hidden;
}
button{font:inherit;cursor:pointer}
.hidden{display:none!important}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  min-height:106px;
  color:#fff;
  background:
    linear-gradient(#315a1e 0 14px, #4d7a2f 14px 18px, #263e1b 18px 100%),
    linear-gradient(180deg,#365e23,#24411a);
  border-bottom:6px solid #1a2a11;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.icon-btn{
  width:62px;height:62px;border:4px solid rgba(255,255,255,.7);
  border-radius:16px;background:linear-gradient(#5ca5ff,#2162c5);color:#fff;
  font-size:30px;font-weight:900;box-shadow:0 6px 0 #173e77,inset 0 2px 0 rgba(255,255,255,.25);
}
.stat-card,.question-card,.stat-stack{
  background:rgba(9,23,20,.42);border:3px solid rgba(255,255,255,.16);border-radius:18px;
  min-height:64px;padding:10px 18px;display:flex;align-items:center;gap:10px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.22);
}
.stat-card{min-width:120px;font-size:24px}.stat-card strong{font-size:28px}
.stat-stack{flex-direction:column;gap:0;align-items:flex-start;padding-inline:16px}
.stat-stack small,.question-card small{font-size:12px;font-weight:900;letter-spacing:.12em}
.stat-stack div{font-size:22px}
.logo{margin:auto;text-align:center;line-height:.92;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.logo span{display:block;font-size:42px;font-weight:1000;color:#ffd944;-webkit-text-stroke:2px #6c3500;letter-spacing:.03em}
.logo b{display:inline-block;margin-top:8px;padding:8px 14px;border-radius:14px;background:linear-gradient(#44b7ff,#1565d8);border:3px solid white;font-size:21px;letter-spacing:.08em}
.question-card{flex-direction:column;gap:0;min-width:110px}.question-card strong{font-size:18px}

.screen{max-width:1300px;margin:0 auto;padding:30px 22px 56px}
.menu-screen{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center}
.eyebrow{margin:0;color:#134a75;font-weight:1000;letter-spacing:.14em}
.menu-copy h1{margin:8px 0 16px;font-size:clamp(42px,6.4vw,82px);line-height:.9;color:#142d45;text-shadow:0 4px #fff}
.menu-copy p:not(.eyebrow){font-size:20px;max-width:720px}
.daily-card{display:inline-flex;gap:18px;padding:14px 20px;border-radius:16px;background:#fff;border:4px solid #d4e3ef;box-shadow:var(--shadow);font-weight:800}
.hero-avatar{position:relative;text-align:center;height:420px}
.hero-avatar img{height:420px;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 18px rgba(0,0,0,.24))}
.speech,.coach-bubble{position:absolute;background:#fff;border:4px solid #314655;border-radius:18px;padding:14px 18px;font-weight:900;box-shadow:var(--shadow)}
.speech{top:12px;left:0}.speech:after,.coach-bubble:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-right:4px solid #314655;border-bottom:4px solid #314655;transform:rotate(45deg);bottom:-12px;right:36px}
.mission-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mission-card{border:0;border-radius:20px;padding:22px;text-align:left;color:#fff;min-height:236px;box-shadow:var(--shadow);transition:transform .14s;position:relative;overflow:hidden}
.mission-card:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 18px, rgba(0,0,0,.05) 18px 36px);pointer-events:none}
.mission-card:active{transform:scale(.98)}
.mission-card.grass{background:linear-gradient(180deg,#70c34d 0 22%,#4d9f31 22% 72%,#8d5b2f 72% 100%)}
.mission-card.sky{background:linear-gradient(180deg,#77d4ff 0 34%,#4ab1ff 34% 70%,#4a8b2f 70% 100%)}
.mission-card.stone{background:linear-gradient(180deg,#a6b2c4 0 24%,#73839a 24% 72%,#8d5b2f 72% 100%)}
.mission-icon{float:right;font-size:52px}.mission-card small{display:block;font-weight:900;opacity:.92}.mission-card strong{display:block;font-size:28px;margin:12px 0 6px}.mission-card p{min-height:54px}.mission-card b{display:inline-block;background:#fff;color:#203247;padding:10px 16px;border-radius:12px;font-weight:1000}

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
.play-panel{
  background:linear-gradient(#fffdf1,#fef0ca);
  border:7px solid #8d5b2f;border-radius:22px;padding:24px;
  box-shadow:inset 0 0 0 5px #e2b173,var(--shadow);
  min-height:680px;text-align:center;
}
.wood-tag{display:inline-block;padding:10px 54px;border-radius:12px;background:linear-gradient(#d99b5a,#a56a32);border:4px solid var(--wood-dark);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 6px 0 #6b3e17}
.wood-tag span{font-size:30px;font-weight:1000;color:#532a04}
.equation{margin:20px 0 4px;font-size:clamp(46px,7vw,78px);font-weight:1000;color:#1f7cff}.equation span{color:#2f3540}
.instruction{display:inline-block;margin-bottom:18px;padding:10px 16px;background:#fff3a2;border:3px dashed #d09a1d;border-radius:14px;font-size:20px;font-weight:900}
.activity-area{min-height:310px}
.coach-panel{position:relative;text-align:center;padding-top:84px}
.coach-panel img{width:100%;max-height:450px;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(0,0,0,.22))}
.coach-bubble{top:0;left:0;right:0;font-size:19px}
.reward-card{margin-top:8px;padding:14px;background:linear-gradient(#157fff,#0e4faa);border:4px solid #8fd6ff;border-radius:16px;color:#fff;box-shadow:var(--shadow)}
.reward-card small{font-weight:900}.reward-card strong{display:block;font-size:28px}
.hint-button{margin-top:14px;width:100%;padding:14px;border:0;border-radius:16px;background:linear-gradient(#ffe67a,#f9c02c);font-weight:1000;box-shadow:0 6px 0 #c08c12}
.answer-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:18px}
.answer-button{min-width:132px;padding:18px;border:4px solid rgba(255,255,255,.8);border-radius:18px;color:#fff;font-size:34px;font-weight:1000;box-shadow:0 8px 0 rgba(0,0,0,.16)}
.answer-button:nth-child(4n+1){background:#2497ff}.answer-button:nth-child(4n+2){background:#5bb63f}.answer-button:nth-child(4n+3){background:#ffbb22}.answer-button:nth-child(4n+4){background:#9d68ff}
.answer-button.correct{outline:6px solid #fff;transform:translateY(2px)}.answer-button.wrong{animation:shake .2s linear 2}
.feedback{min-height:34px;margin-top:16px;font-weight:1000;font-size:20px}.feedback.good{color:#2d9b38}.feedback.try{color:#b45d17}

.bridge-grid{display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));gap:8px;max-width:760px;margin:0 auto 18px;padding:16px;border-radius:18px;background:linear-gradient(#d9f3ff,#c2e6ff);border:4px solid #89b6d4}
.bridge-cell{aspect-ratio:1;border-radius:10px;background:linear-gradient(#f7fdff,#d4e6f1);border:3px dashed #aec7d5;display:flex;align-items:center;justify-content:center;position:relative}
.bridge-cell.filled{background:linear-gradient(#90df6c,#5bb53c);border-style:solid;border-color:#468f2f}
.bridge-cell.removed{opacity:.38}
.voxel-block,.existing-block,.tray-block,.array-block{position:relative;border:0}
.voxel-block,.existing-block{width:100%;height:100%;border-radius:7px;background:linear-gradient(135deg,#77d04f 0 20%, #5fb83d 20% 78%, #3d7d24 78% 100%);box-shadow:inset 0 10px 0 rgba(255,255,255,.18), inset -10px -10px 0 rgba(0,0,0,.14)}
.existing-block.stone{background:linear-gradient(135deg,#c5cedb 0 20%, #93a0b3 20% 78%, #697485 78% 100%)}
.hotbar{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(#89613a,#684620);border:4px solid #5b3819;max-width:760px;margin:0 auto}
.tray-block{width:72px;height:72px;border-radius:10px;background:linear-gradient(135deg,#ffd54e 0 20%, #f3b41f 20% 78%, #b9800a 78% 100%);box-shadow:inset 0 8px 0 rgba(255,255,255,.2), inset -8px -8px 0 rgba(0,0,0,.15),0 5px 0 rgba(0,0,0,.18)}
.tray-block.used{visibility:hidden}
.bridge-tip{font-weight:900;color:#365470;margin:10px 0 14px}

.obby-wrap{background:linear-gradient(#dff6ff,#bee8ff);border:4px solid #8cb4d4;border-radius:18px;padding:16px;max-width:760px;margin:0 auto}
.platform-line{position:relative;display:grid;grid-template-columns:repeat(21,1fr);gap:4px;align-items:end;min-height:150px;padding:40px 8px 34px}
.platform{height:28px;border-radius:8px 8px 4px 4px;background:linear-gradient(#7acd55 0 35%,#5ba83b 35% 100%);border-bottom:12px solid var(--dirt);position:relative}
.platform span{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);font-size:14px;font-weight:900;color:#35506b}
.runner{position:absolute;top:0;width:44px;height:60px;border-radius:10px;background:linear-gradient(#4ab7ff,#1f6bd8);border:3px solid #fff;color:#fff;font-weight:1000;display:flex;align-items:center;justify-content:center;transition:left .2s ease, transform .15s ease;box-shadow:0 10px 0 rgba(0,0,0,.12)}
.runner:after{content:"";position:absolute;inset:auto 6px 6px 6px;height:10px;background:rgba(255,255,255,.18);border-radius:6px}
.jump-controls{display:flex;justify-content:center;gap:16px;margin-top:18px}.jump-button{padding:14px 18px;min-width:130px;border-radius:16px;border:0;color:#fff;font-size:24px;font-weight:1000;box-shadow:0 7px 0 rgba(0,0,0,.18)}.jump-button[data-jump="-1"]{background:#e05647}.jump-button[data-jump="1"]{background:#1d8ef2}.run-meter{margin-top:14px;font-weight:900;color:#31506a}

.array-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 20px;align-items:center;margin-bottom:18px;font-weight:1000}.stepper{display:flex;align-items:center;gap:12px;background:#fff;border:4px solid #d4e3ef;border-radius:16px;padding:10px 14px;box-shadow:0 7px 0 rgba(0,0,0,.08)}.stepper button{width:48px;height:48px;border:0;border-radius:12px;background:#188ce8;color:#fff;font-size:28px;font-weight:1000;box-shadow:0 4px 0 rgba(0,0,0,.16)}.stepper strong{min-width:28px;font-size:30px}
.array-board{display:grid;gap:8px;justify-content:center;padding:16px;border-radius:18px;max-width:760px;min-height:230px;margin:0 auto;background:linear-gradient(#f0f7ff,#d9e5f0);border:4px solid #b9c9d7}
.array-block{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,#ad8fff 0 20%, #8e63ff 20% 78%, #6f43d9 78% 100%);box-shadow:inset 0 8px 0 rgba(255,255,255,.2), inset -8px -8px 0 rgba(0,0,0,.15)}
.array-target{margin-top:8px;font-weight:900;color:#415365}

.modal{position:fixed;inset:0;background:rgba(8,17,24,.6);display:grid;place-items:center;padding:20px;z-index:40}.modal-card{max-width:480px;width:100%;padding:28px;border-radius:24px;text-align:center;background:#fffdf3;border:7px solid #8d5b2f;box-shadow:var(--shadow)}.trophy{font-size:64px}.modal-card h2{margin:10px 0 6px;font-size:36px}.badge{display:inline-block;margin:12px 0 18px;padding:10px 16px;border-radius:14px;background:#f2f7ff;border:3px solid #d4e3ef;font-weight:1000}.modal-card button{padding:14px 18px;border:0;border-radius:16px;background:#2497ff;color:#fff;font-weight:1000;font-size:18px;box-shadow:0 6px 0 #155ba8}
.confetti{position:fixed;top:-10vh;font-size:30px;animation:fall 3.2s linear forwards;z-index:50;pointer-events:none}

@keyframes fall{to{transform:translateY(120vh) rotate(360deg);opacity:.9}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

@media (max-width:1024px){
  .menu-screen,.game-layout{grid-template-columns:1fr}
  .hero-avatar{height:360px}.hero-avatar img{height:360px}
  .coach-panel{max-width:360px;margin:0 auto;padding-top:70px}
}
@media (max-width:760px){
  .topbar{gap:8px;padding:10px;min-height:96px}.logo span{font-size:28px}.logo b{font-size:16px;padding:7px 10px}.icon-btn{width:54px;height:54px;font-size:26px}.stat-card,.question-card,.stat-stack{padding:8px 12px;min-height:58px}.stat-card{min-width:86px;font-size:18px}.stat-card strong{font-size:22px}.question-card{min-width:90px}
  .screen{padding:18px 12px 40px}.menu-copy h1{font-size:44px}.menu-copy p:not(.eyebrow){font-size:18px}.mission-grid{grid-template-columns:1fr}.play-panel{padding:16px}.wood-tag span{font-size:24px}.instruction,.feedback{font-size:17px}.bridge-grid{grid-template-columns:repeat(5,minmax(44px,1fr))}.tray-block{width:62px;height:62px}.answer-button{min-width:102px;font-size:28px;padding:14px}.jump-button{font-size:21px;min-width:116px}.array-block{width:42px;height:42px}
}