:root{--navy:#063d69;--blue:#0877b8;--sky:#d8f4ff;--gold:#ffc928;--cream:#fff7dc;--ink:#17354b;--green:#168b56;--red:#c94545;--shadow:0 10px 24px rgba(8,45,64,.22)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow-x:hidden;background:linear-gradient(#a7e5f5 0,#e4f8ed 48%,#b8e290 100%);color:var(--ink);font-family:"Trebuchet MS","Avenir Next",Arial,sans-serif}
button,select,input{font:inherit}
button{touch-action:manipulation}
.game-header{height:106px;padding:10px clamp(12px,2vw,24px);display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,#07578d,#063d69);border-bottom:4px solid #f3bf32;box-shadow:0 3px 12px #07355066;position:relative;z-index:5}
.brand-banner{height:82px;width:auto;max-width:min(70vw,640px);object-fit:contain;display:block}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.team-control{color:#fff;font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;display:grid;gap:3px}
.team-control select,.wide-select{min-height:44px;border:2px solid #e3b734;border-radius:12px;padding:0 32px 0 12px;background:#fff;color:var(--ink);font-weight:800}
.header-button{min-height:48px;padding:0 14px;border:2px solid #ffffffaa;border-radius:14px;background:#0c6fa6;color:white;font-weight:900;box-shadow:0 4px 0 #034064;white-space:nowrap}
.game-shell{min-height:calc(100vh - 106px);max-width:1500px;margin:auto;padding:14px;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);gap:14px}
.map-panel,.mission-panel{min-width:0;min-height:0;border-radius:24px;box-shadow:var(--shadow)}
.map-panel{padding:13px;background:linear-gradient(145deg,#0a6790,#06476c);border:3px solid #7bd5e7;display:flex;flex-direction:column}
.map-heading{height:48px;display:flex;align-items:center;justify-content:space-between;color:white;padding:0 6px 10px}
.map-heading h1{margin:0;font-size:clamp(1.25rem,2.3vw,1.8rem);line-height:1}
.eyebrow,.captain-label,.modal-kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#fed24c}
.saved-status{background:#d9ffe9;color:#126442;border-radius:20px;padding:7px 10px;font-size:.76rem;font-weight:900;white-space:nowrap}
.saved-status.flash{animation:savedPop .7s ease}
.map-stage{position:relative;flex:none;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:17px;border:4px solid #f3d37b;background:#d0b36e}
.map-image{width:100%;height:100%;display:block;object-fit:cover}
.route,.mission-nodes{position:absolute;inset:0;width:100%;height:100%}
.route{display:none}
.route polyline{fill:none;stroke:#fff7c8;stroke-width:1.2;stroke-dasharray:2.3 2.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mission-node{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;border:3px solid white;display:grid;place-items:center;color:white;font-weight:900;box-shadow:0 3px 8px #162b31aa;z-index:2}
.mission-node span{font-size:1rem}
.mission-node small{display:none}
.mission-node.done{background:var(--green)}
.mission-node.current,.mission-node.locked{visibility:hidden}
.wooby{position:absolute;width:clamp(48px,8.5vw,88px);height:auto;max-height:26%;transform:translate(-50%,-88%);object-fit:contain;filter:drop-shadow(0 5px 4px #1d342d99);z-index:3;transition:left .7s cubic-bezier(.35,.9,.42,1),top .7s cubic-bezier(.35,.9,.42,1);pointer-events:none}
.wooby.walking{animation:walkBounce .35s ease-in-out 2}
.map-legend{height:30px;display:flex;align-items:end;justify-content:center;gap:22px;color:white;font-size:.73rem;font-weight:800}
.dot{width:10px;height:10px;border:2px solid white;border-radius:50%;display:inline-block;margin-right:5px}.done-dot{background:var(--green)}.current-dot{background:#ffbd16}.locked-dot{background:#64747b}
.mission-panel{position:relative;background:var(--cream);border:3px solid #d5a13b;overflow:hidden}
.mission-panel:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background:radial-gradient(circle at 10% 20%,#c78b3b 0 1px,transparent 2px),linear-gradient(100deg,transparent 49%,#e0c78c 50%,transparent 51%);background-size:45px 45px,100% 100%}
.ribbon{height:46px;margin:13px -6px 0;position:relative;z-index:1;padding:0 24px;display:flex;align-items:center;background:linear-gradient(#dd4a3e,#a62831);color:white;font-weight:900;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 4px 0 #741a22}
.mission-scroll{height:calc(100% - 59px);overflow-y:auto;padding:17px clamp(16px,2vw,26px) 18px;position:relative;z-index:1}
.captain-label{color:#b27118;margin:0 0 3px}
.mission-panel h2{font-family:Georgia,serif;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.1;color:#713c1c;margin:0 0 9px}
.story{padding:11px 14px;background:#fffdf4;border:2px dashed #d5af5c;border-radius:13px;font-size:clamp(.88rem,1.35vw,1rem);line-height:1.3}
.story p{margin:0 0 8px}.story strong{display:block;color:#51331d;font-size:clamp(1.12rem,1.8vw,1.35rem);line-height:1.3}
.instruction{margin:11px 0 6px;font-weight:900}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.choices.typed-answer{grid-template-columns:minmax(0,1fr) auto}
.answer-input{min-width:0;height:48px;padding:0 14px;border:2px solid #8cb9c9;border-radius:12px;background:#fff;color:#173c51;font-size:1.2rem;font-weight:900;text-transform:uppercase;letter-spacing:.16em;box-shadow:inset 0 2px 3px #0001}
.answer-input:focus{outline:3px solid #ffd84e;outline-offset:1px;border-color:#187ca3}
.answer-input.correct{background:#d7f8df;border-color:#2b9b54}.answer-input.wrong{background:#ffe5e1;border-color:#d75a4e}
.check-answer{padding-inline:18px}
.choice{min-height:45px;padding:7px 9px;border:2px solid #8cb9c9;border-radius:12px;background:#f7fdff;color:#173c51;font-weight:800;line-height:1.1;box-shadow:0 3px 0 #b9d2da}
.choice:hover,.choice:focus-visible{background:#e7f8ff;border-color:#187ca3}.choice.selected{background:#dff5ff;border-color:#1681ad}.choice.correct{background:#d7f8df;border-color:#2b9b54}.choice.wrong{background:#ffe5e1;border-color:#d75a4e}
.feedback{min-height:24px;padding:4px 2px;font-size:.86rem;font-weight:900}.feedback.success{color:#147743}.feedback.error{color:#b83030}.feedback.hint{color:#865e00}
.key-section{min-height:70px;padding:8px 10px;margin-top:2px;border-radius:14px;background:#f2ddaa;border:2px solid #d1a24b;display:flex;align-items:center;justify-content:space-between;gap:8px}
.key-section h3{margin:0;color:#6a431b;text-transform:uppercase;font-size:.95rem}.key-section p{margin:2px 0 0;font-size:.73rem}
.key-inputs{display:flex;gap:5px}.key-digit{width:43px;height:48px;border:3px solid #8a5a24;border-radius:10px;background:#fff;text-align:center;font-size:1.55rem;font-weight:900;color:#333;box-shadow:inset 0 2px 2px #0002}.key-digit:disabled{opacity:.42}
.final-key{justify-content:center;text-align:center;background:#fff0a2}
.mission-actions{display:grid;grid-template-columns:.72fr 1.28fr;gap:9px;margin-top:9px}
.button{min-height:48px;border:0;border-radius:13px;padding:8px 12px;font-weight:900;box-shadow:0 4px 0 #0003;color:#17354b}
.button:active{transform:translateY(2px);box-shadow:0 2px 0 #0003}.button:disabled{filter:grayscale(.6);opacity:.55}
.hint-button{background:#ffd84e}.unlock-button{background:linear-gradient(#34b56c,#16834f);color:white}.secondary-button{background:#dff4ff;color:#105577}.danger-button{background:#d95050;color:white}.ghost-button{background:#eee8da}
.teacher-button{position:fixed;left:14px;bottom:12px;z-index:6;min-height:44px;border:2px solid #fff7;border-radius:22px;padding:0 15px;background:#123f5bdb;color:white;font-size:.78rem;font-weight:900}
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#041d30cc;opacity:0;transition:opacity .18s}.modal.show{opacity:1}
.modal-card{position:relative;width:min(94vw,540px);max-height:94vh;overflow:auto;padding:28px;border-radius:24px;background:#fff8e3;border:4px solid #e2b14f;box-shadow:0 24px 60px #0008;transform:scale(.92);transition:transform .18s}.modal.show .modal-card{transform:scale(1)}
.modal-close{position:absolute;right:12px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:#eadfc8;font-size:1.7rem}.modal-card h2{margin:2px 0 16px;color:#73421f;font:900 1.8rem Georgia,serif}.field-label{display:block;margin:9px 0 5px;font-weight:900}.pin-input,.wide-select{width:100%;height:48px;border:2px solid #b6995c;border-radius:12px;padding:0 12px;background:#fff}.pin-input{font-size:1.5rem;letter-spacing:.3em;text-align:center}
.teacher-current{padding:12px;border-radius:12px;background:#eef8df;font-weight:900}.teacher-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.treasure-card{text-align:center;width:min(94vw,650px);overflow:hidden;background:radial-gradient(circle at 50% 20%,#fffde4,#ffe49a 70%,#f7bb3f);border-color:#ffe56d}
.treasure-card h2{font-size:clamp(2.2rem,7vw,4.2rem);color:#8f2c25;text-shadow:0 3px white;margin:0}.celebration-art{height:190px;display:flex;justify-content:center;align-items:end;gap:16px}.celebration-art>img{height:180px;width:auto;object-fit:contain;animation:celebrate .65s infinite alternate;filter:drop-shadow(0 7px 4px #0004)}
.chest{width:185px;filter:drop-shadow(0 8px 4px #0004);animation:chestBounce 1.1s infinite}.chest-lid{height:62px;border:8px solid #64351a;border-radius:80px 80px 5px 5px;background:repeating-linear-gradient(90deg,#8f4a20 0 30px,#da8d28 30px 38px);transform-origin:bottom;animation:openChest 1.1s ease-in-out infinite alternate}.chest-box{height:85px;border:8px solid #64351a;border-radius:4px 4px 14px 14px;background:repeating-linear-gradient(90deg,#8f4a20 0 30px,#da8d28 30px 38px);color:#ffe872;font-size:3rem;display:grid;place-items:center}.winning-team{font-size:1.2rem;font-weight:900}.prize-message{font-size:1.1rem;font-weight:900;background:#fff9d9;border-radius:12px;padding:12px}
.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;left:var(--x);top:-15px;width:9px;height:16px;background:var(--color);transform:rotate(var(--turn));animation:fall 2.2s var(--delay) linear infinite}
.shake{animation:shake .35s}
@keyframes glow{50%{box-shadow:0 0 0 9px #fff6a044,0 0 30px 10px #ffe34e,0 3px 8px #162b31aa}}
@keyframes walkBounce{50%{transform:translate(-50%,-95%) rotate(2deg)}}
@keyframes savedPop{50%{transform:scale(1.08);background:#fff2a8}}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes celebrate{to{transform:translateY(-10px) rotate(3deg)}}
@keyframes chestBounce{50%{transform:translateY(-4px)}}
@keyframes openChest{to{transform:rotateX(-42deg) translateY(-8px)}}
@keyframes fall{to{top:105%;transform:rotate(540deg)}}
@media(max-width:1100px){
  .game-shell{grid-template-columns:minmax(0,1.08fr) minmax(375px,.92fr);padding:10px;gap:10px}
  .brand-banner{height:76px;max-width:62vw}.game-header{height:100px}.game-shell{min-height:calc(100vh - 100px)}
  .map-panel{padding:9px}.mission-scroll{padding:13px 14px}.mission-panel h2{font-size:1.3rem}.story{padding:8px 10px}.ribbon{margin-top:9px}.mission-scroll{height:calc(100% - 55px)}
}
@media(max-width:840px),(orientation:portrait){
  body{overflow:auto}.game-header{height:auto;min-height:96px;flex-wrap:wrap}.brand-banner{max-width:100%;height:auto;max-height:80px}.header-actions{width:100%}
  .game-shell{min-height:0;grid-template-columns:1fr}.map-stage{height:auto}.mission-panel{min-height:610px}.teacher-button{position:fixed}
}
@media(max-height:720px) and (orientation:landscape){
  .game-header{height:92px;padding-block:6px}.brand-banner{height:72px}.game-shell{padding:8px;gap:8px;min-height:calc(100vh - 92px)}
  .map-heading{height:39px}.map-legend{height:24px}.ribbon{height:40px;margin-top:8px}.mission-scroll{height:calc(100% - 48px);padding-top:10px}
  .story{font-size:.84rem}.choice{min-height:42px}.key-section{min-height:62px}.key-digit{height:44px}.mission-actions{margin-top:6px}.button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}