@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,900;1,900&family=Inter:wght@600;800&display=swap');
:root{--ink:#17253b;--cream:#f4edda;--yellow:#ffd447;--red:#e84d3d;--blue:#59b7d1}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#111b2c;color:var(--ink);font-family:Inter,sans-serif;touch-action:manipulation;user-select:none}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#324967,#111b2c 60%)}
.game-shell{width:min(100%,520px);min-height:100vh;background:var(--cream);overflow:hidden;position:relative;box-shadow:0 0 70px #0008}
header{height:86px;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:white;border-bottom:6px solid var(--yellow)}
.eyebrow{font:700 10px Inter;letter-spacing:1.7px;margin:0 0 2px;color:var(--yellow)}h1{font:900 40px/1 'Barlow Condensed';margin:0;letter-spacing:-1px}h1 i{color:var(--yellow)}
.icon-btn{width:42px;height:42px;border:2px solid #ffffff55;border-radius:50%;background:none;color:white;font-size:23px}
.hud{height:61px;display:grid;grid-template-columns:repeat(4,1fr);background:white;border-bottom:1px solid #c8c1ad}.hud div{display:flex;flex-direction:column;justify-content:center;align-items:center;border-right:1px solid #ddd5c1}.hud div:last-child{border:0}.hud small{font-size:8px;letter-spacing:1.4px;color:#718096}.hud strong{font:900 20px 'Barlow Condensed'}#legs{font-size:14px;color:var(--red)}#wattBox{position:relative}#wattBox i{position:absolute;bottom:3px;width:64%;height:3px;background:#ddd;overflow:hidden}#wattBox i b{display:block;height:100%;width:0;background:var(--red);transition:width .1s}#wattBox.danger{background:#ffdfd8;animation:power-alert .28s infinite alternate}#wattBox.danger strong{color:var(--red)}@keyframes power-alert{to{background:#ffaaa0}}
.mountain{height:49vh;min-height:340px;max-height:510px;position:relative;overflow:hidden;background:linear-gradient(#66c8df 0 44%,#d5e4d0 44%)}
.sun{position:absolute;width:64px;height:64px;border-radius:50%;background:var(--yellow);right:35px;top:28px;box-shadow:0 0 0 10px #ffd44733}.cloud{position:absolute;color:white;font-size:52px;opacity:.8}.c1{top:28px;left:35px}.c2{top:80px;right:95px;font-size:35px}
.peak{position:absolute;bottom:0;clip-path:polygon(50% 0,100% 100%,0 100%)}.peak-back{width:410px;height:280px;left:-110px;background:linear-gradient(135deg,#ecf2ed 0 20%,#829aa1 21% 100%)}.peak-front{width:520px;height:330px;right:-250px;background:linear-gradient(225deg,#fafafa 0 15%,#677c79 16% 100%)}
.road{position:absolute;inset:0;background:#3e4c4d;clip-path:polygon(88% 0,100% 0,77% 25%,95% 40%,47% 61%,72% 76%,10% 100%,0 100%,55% 75%,28% 59%,77% 39%,62% 25%)}
.road:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 44px,#f7e59c 45px 51px,transparent 52px 90px);opacity:.6;clip-path:inherit}
.summit{position:absolute;top:8px;right:67px;z-index:3;display:flex;flex-direction:column;align-items:center;font:900 11px 'Barlow Condensed';transform:rotate(2deg)}.summit b{background:var(--red);padding:4px 7px;color:white;box-shadow:3px 3px var(--ink)}
.rider{position:absolute;z-index:5;left:5%;bottom:3%;width:72px;height:82px;transition:left .18s linear,bottom .18s linear;filter:drop-shadow(3px 5px 2px #0005)}.bike{font-size:55px;position:absolute;bottom:0;transform:scaleX(-1)}
.lost-leg{display:none;position:absolute;z-index:8;font-size:25px;left:23px;top:42px}.legs-off .lost-leg{display:block}.legs-off .leg-one{animation:leg-fly-one 1.2s ease-out forwards}.legs-off .leg-two{animation:leg-fly-two 1.2s ease-out forwards}@keyframes leg-fly-one{to{transform:translate(-90px,90px) rotate(-320deg);opacity:0}}@keyframes leg-fly-two{to{transform:translate(100px,70px) rotate(390deg);opacity:0}}.legs-off .bike{animation:bike-wobble .15s infinite alternate}@keyframes bike-wobble{to{transform:scaleX(-1) rotate(12deg)}}
.stu-photo{position:absolute;z-index:2;width:36px;height:36px;border-radius:50%;left:23px;top:0;background:var(--yellow);border:3px solid white;display:grid;place-items:center;overflow:hidden}.stu-photo span{font:900 11px 'Barlow Condensed'}.stu-photo.has-photo{background-size:cover;background-position:center 25%}.stu-photo.has-photo span{display:none}
.hazard{position:absolute;z-index:4;font-size:42px;animation:wobble .7s infinite alternate}.hazard label{display:block;background:#fff;color:var(--ink);font:900 9px Inter;padding:3px 5px;box-shadow:2px 2px var(--ink);white-space:nowrap;text-align:center}
@keyframes wobble{to{transform:rotate(8deg) scale(1.06)}}.toast{position:absolute;z-index:10;left:50%;top:45%;transform:translate(-50%,-50%) scale(.7);opacity:0;background:var(--red);color:#fff;padding:9px 14px;font:900 18px 'Barlow Condensed';text-align:center;box-shadow:5px 5px var(--ink);transition:.2s}.toast.pop{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}
.progress{height:11px;background:#c9c0aa}.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--yellow));transition:width .15s}
.pedal{display:block;width:calc(100% - 32px);margin:16px;height:76px;border:0;border-radius:10px;background:var(--yellow);color:var(--ink);box-shadow:0 7px 0 #d59f22;font-family:Inter;cursor:pointer}.pedal:active{transform:translateY(5px);box-shadow:0 2px 0 #d59f22}.pedal span{display:block;font:900 27px 'Barlow Condensed';letter-spacing:.5px}.pedal small{font-weight:800}.hint{text-align:center;font-size:9px;color:#777;margin:0 12px 12px}
.overlay{position:fixed;z-index:50;inset:0;display:none;place-items:center;background:#101b2be8;padding:18px}.overlay.show{display:grid}.card{width:min(100%,440px);background:var(--cream);padding:28px 25px;text-align:center;border:5px solid white;box-shadow:10px 10px 0 var(--yellow);transform:rotate(-.5deg)}.card h2{font:900 44px/.88 'Barlow Condensed';margin:9px 0 15px}.card>p:not(.eyebrow){font-size:13px;line-height:1.5}.danger-list{display:flex;justify-content:center;gap:7px;margin:17px 0}.danger-list span{background:white;border:1px solid #d8cfb9;padding:6px;font:800 9px Inter}.card button{width:100%;border:0;background:var(--red);color:white;padding:15px;font:900 22px 'Barlow Condensed';box-shadow:0 6px 0 #9f2d28;margin:5px 0 19px}.card>small{display:block;color:#697386}
@media(max-height:720px){.mountain{height:43vh;min-height:300px}.pedal{height:64px;margin-top:12px;margin-bottom:10px}.card{padding:19px}.card h2{font-size:37px}}