:root{--ink:#163f43;--teal:#005e66;--orange:#eb6b10;--cream:#fffdf3;--green:#4ab791;--shadow:0 12px 36px rgba(19,76,76,.14)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:ui-rounded,'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif}body{background:#bcdad2}button,select{font:inherit;cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #ea6911;outline-offset:2px}#app{position:relative;height:100svh;min-height:340px;width:100vw;overflow:hidden;background:linear-gradient(#8dccf5,#d2ead8)}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.glass{border:1px solid rgba(255,255,255,.86);background:rgba(255,253,241,.9);box-shadow:var(--shadow);backdrop-filter:blur(12px);border-radius:18px}.top-left{position:absolute;top:16px;left:16px;padding:16px 20px;max-width:340px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:900;color:#497b77}.top-left h1{margin:6px 0 3px;color:#0e555a;font-size:clamp(21px,2.1vw,30px);line-height:1.06;letter-spacing:-.04em}.top-left h1 span{color:var(--orange)}.top-left p{margin:7px 0;color:#537573;font-size:12px;font-weight:700}.starpill{display:inline-block;background:#ffecad;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:900;color:#795013}.top-right{position:absolute;top:16px;right:16px;width:clamp(270px,29vw,385px);padding:15px 16px;z-index:2}.top-right h2{margin:5px 0 5px;font-size:19px;color:#125a58}.top-right p{margin:0;font-size:13px;color:#466669;line-height:1.45}.mission-bar{height:5px;border-radius:99px;background:#dce9da;margin:10px 0;overflow:hidden}.mission-bar span{display:block;height:100%;width:0%;background:#f5aa32;transition:width .3s}.mission-buttons{display:flex;gap:7px}.mission-buttons button{flex:1;border:0;background:#f67620;color:white;font-weight:900;border-radius:11px;padding:9px 5px;font-size:12px}.mission-buttons button+button{background:#0e827b}.bottom-left{position:absolute;bottom:14px;left:16px;padding:11px 14px;line-height:1.9;max-width:420px;font-size:11px;color:#52716b;pointer-events:none}.bottom-left b{display:block;color:#235b59;font-size:12px;margin-bottom:3px}.bottom-left kbd{display:inline-block;padding:0 5px;border:1px solid #d7dfd8;background:#fff;border-radius:5px;color:#254947;font-weight:800}.bottom-action{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;background:rgba(255,253,240,.96);padding:6px 7px 6px 16px;border-radius:30px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);color:#174b4a;font-weight:900;z-index:4;font-size:14px;white-space:nowrap}.bottom-action button{border:0;border-radius:25px;background:#f47819;color:white;padding:12px 16px;font-size:13px;font-weight:900}.tools{position:absolute;right:15px;top:50%;transform:translateY(-25%);display:flex;flex-direction:column;gap:6px;padding:8px;z-index:3}.tools button{border:0;border-radius:10px;background:transparent;font-size:19px;width:42px;height:42px}.tools button:hover{background:#c9f0dd}.age-label{text-align:center;font-size:10px;font-weight:900;color:#638681}.tools select{border:1px solid #b8dacc;border-radius:8px;padding:5px 2px;width:46px;font-size:11px;background:white;color:#164e4f}.map-modal{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));padding:20px}.map-modal[hidden],.bottom-action[hidden]{display:none}.map-header{display:flex;align-items:center;justify-content:space-between;color:#135758}.map-header button{background:#f6ebe2;border:0;border-radius:10px;width:36px;height:36px}.map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.map-grid button{display:flex;flex-direction:column;gap:3px;align-items:start;text-align:left;border:1px solid #c9dfd7;background:white;padding:13px;border-radius:14px;font-size:20px}.map-grid button:hover{background:#ebfff1}.map-grid strong{font-size:14px;color:#175f5c}.map-grid small{font-size:12px;color:#66807d}.map-modal p{font-size:11px;color:#627877}.map-grid button:last-child{grid-column:1/-1}.touch-controls{display:none}#toast{position:absolute;z-index:5;left:50%;top:21%;transform:translateX(-50%) translateY(-8px);background:rgba(255,253,233,.98);color:#165957;border:2px solid #ffcb5d;padding:11px 18px;border-radius:22px;text-align:center;box-shadow:var(--shadow);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;font-size:16px;font-weight:900;max-width:min(520px,90vw)}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}.confetti{position:absolute;width:11px;height:11px;border-radius:2px;animation:fall 1.5s ease-in forwards}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(60vh) rotate(690deg);opacity:0}}#boot{position:absolute;inset:0;background:linear-gradient(#ace6ed,#d3efbf);z-index:12;display:flex;align-items:center;justify-content:center;color:#126363;font-size:22px;font-weight:900;transition:opacity .5s}#boot.hide{opacity:0;pointer-events:none}
@media(max-width:760px){.top-left{top:8px;left:8px;max-width:205px;padding:9px 11px}.top-left h1{font-size:18px}.top-left p{font-size:10px}.starpill{font-size:10px}.top-right{top:8px;right:8px;width:min(45vw,260px);padding:10px}.top-right h2{font-size:14px}.top-right p{font-size:10px}.top-right .eyebrow{font-size:8px}.mission-buttons button{font-size:10px;padding:7px 3px}.bottom-left{display:none}.tools{right:7px;top:43%;padding:3px;gap:2px;transform:translateY(-8%)}.tools button{width:36px;height:36px;font-size:17px}.touch-controls{position:absolute;bottom:15px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none;z-index:4}.touch-controls button{pointer-events:auto;border:1px solid rgba(255,255,255,.8);background:rgba(255,253,240,.77);color:#196464;font-weight:900;border-radius:14px;box-shadow:0 3px 12px #3453}.dpad{width:140px;height:140px;position:relative}.dpad button{position:absolute;width:44px;height:44px}.north{left:48px;top:0}.south{left:48px;bottom:0}.west{left:0;top:48px}.east{right:0;top:48px}.touch-actions{display:flex;align-items:end;gap:10px}.touch-actions button{width:65px;height:60px;background:rgba(246,115,20,.92);color:white}.bottom-action{bottom:166px;font-size:11px;padding:4px 5px 4px 10px}.bottom-action button{padding:8px;font-size:11px}#toast{top:26%;font-size:12px}.map-modal{max-height:80vh;overflow:auto}}
@media(max-width:470px){.top-right{top:122px;left:8px;right:auto;width:215px;padding:9px}.top-left{max-width:215px}.top-right .mission-buttons button{font-size:9px}.tools{top:30%;right:7px}.map-grid{grid-template-columns:1fr}.map-grid button:last-child{grid-column:auto}}

.tools button[hidden]{display:none}

#knowledge-hud{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:3;padding:10px 16px;text-align:center;min-width:270px;max-width:min(425px,90vw);color:#20575b}
#knowledge-hud[hidden]{display:none}#knowledge-hud b{font-size:15px;display:block;color:#0c666a}#knowledge-hud span{display:block;font-weight:900;color:#df701e;font-size:13px}#knowledge-hud small{font-weight:750;font-size:11px}
@media(max-width:760px){#knowledge-hud{bottom:247px;min-width:220px;padding:7px 10px}#knowledge-hud b{font-size:12px}#knowledge-hud span{font-size:11px}#knowledge-hud small{font-size:10px}}

/* V0.3.4: playful in-session accomplishment stickers, no personal data. */
.reward-badges{display:flex;flex-wrap:wrap;gap:4px;max-width:290px;margin-top:7px}
.reward-chip{display:inline-block;background:#fff2bd;border:1px solid #edc56f;border-radius:999px;color:#6f4813;padding:4px 8px;font-size:10px;font-weight:850;box-shadow:0 2px 3px #714f1510}
@media(max-width:760px){.reward-badges{max-width:190px}.reward-chip{font-size:9px;padding:2px 6px}}

/* V0.3.6 — Calm, optional Sunny guidance inside the existing mission card. */
.mission-buttons{flex-wrap:wrap}
.mission-buttons button[hidden],.guide-readout[hidden]{display:none!important}
#sunny-hint{flex:1 1 100%;background:#ffdc78;color:#135c63;border:1px solid #e8b34b}
.guide-readout{margin:9px 0 0!important;padding:8px 10px;border-radius:11px;background:#ecfff1;color:#0f6556!important;font-weight:850;font-size:12px!important}
@media(max-width:760px){.guide-readout{font-size:10px!important;padding:6px!important}#sunny-hint{padding:6px!important}}


/* Embedded Setastra entrance/exit: visible and usable on desktop and phones. */
.park-return{display:inline-block;padding:7px 10px;background:#075f63;color:#fff;border-radius:10px;text-decoration:none;font-size:12px;font-weight:850;margin:7px 0 2px;pointer-events:auto}
.park-return:focus-visible{outline:3px solid #e36b18;outline-offset:3px}
.park-return:hover{background:#087d75}
.solo-note{font-size:10px;color:#325f5b;margin-top:6px;font-weight:750;line-height:1.25}
@media(max-width:760px){.park-return{font-size:10px;padding:5px 8px;margin:4px 0 0}.solo-note{font-size:8px;max-width:170px}}