/* Compact, unobstructed HUD. */
#app{max-width:620px}.hud{padding: max(10px,env(safe-area-inset-top)) 14px 5px;background:linear-gradient(#082b43f5,#123d50b0,transparent)}.topline{height:27px}.brand{font-size:16px}.hudacademy{font-size:10px!important}.stats{margin-top:7px}.stats small{font-size:10px;letter-spacing:1px}.stats strong{font-size:23px}.health{margin-top:0}.health span{font-size:18px;letter-spacing:1px}.health small{font-size:11px}.runmeta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#fff1bd;min-height:20px}#effects{padding:0;min-height:0;font-size:11px}#question{top:max(128px,calc(env(safe-area-inset-top) + 118px));left:10px;right:10px;padding:8px 10px;border-radius:12px;background:#fffbeefc;box-shadow:0 3px 9px #17344030;pointer-events:none}#question small{font-size:10px}#question h2{font-size:20px;margin:4px 0 5px;line-height:1.2}#answers{gap:6px}#answers span{padding:5px 2px;font-size:14px;border-radius:6px}.timer{margin-top:6px;height:3px}#toast{top:max(133px,calc(env(safe-area-inset-top) + 122px));left:12px;right:12px;padding:9px 12px;font-size:14px;background:#113b50f5;border:1px solid #b1f3ea44;border-radius:10px}body:has(#question:not([hidden])) #toast{display:none}#practicePanel{top:135px;padding:13px}#practicePanel h2{font-size:19px;margin:8px 0}#practicePanel p{font-size:12px;margin:7px 0}#controls{bottom:max(12px,env(safe-area-inset-bottom));gap:8px;left:14px;right:14px}#controls button{height:52px;background:#123d50e8}#controls small{font-size:11px}.overlay{backdrop-filter:none}.overlay:not(#home){background:#082a43c9}#home{background:linear-gradient(#0c3549e8,#0c3549a0);padding:22px 22px 16px;align-items:flex-start}.intro{max-width:430px;margin:auto}.intro h1{font-size:24px;letter-spacing:-.7px;margin:12px 0}.academy{margin-bottom:12px}.academy b{font-size:22px}.academy span{font-size:12px}.characters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:17px}.characters button{background:#174b5e;color:#e6f2f0;border:2px solid #ffffff25;border-radius:12px;padding:9px 3px;font-size:13px}.characters span{display:block;font-size:33px;line-height:1.2;margin-bottom:5px}.characters button[aria-pressed=true]{border-color:#ffcf77;background:#406663;box-shadow:0 0 0 2px #ffd78325}.intro label{font-size:13px;margin-bottom:5px}.intro select{font-size:14px;height:42px;margin-bottom:12px}.audiooptions{display:flex;gap:8px}.audiooptions button{flex:1;color:#e3f5ef;background:#164b5b;border:1px solid #fff4;border-radius:10px;padding:10px 3px;font-size:12px}.intro .bestscore{font-size:12px;margin:12px 0}.intro .how{margin-top:14px}.how small{font-size:12px}.intro .hint{font-size:11px}.homeactions .textbtn{font-size:12px}.secondary{margin:12px 0 0}.card .primary{margin-top:12px}#saveForm{border-top:1px solid #fff3;padding-top:15px;margin-top:16px}#saveForm label{display:block;font-size:14px;margin-bottom:8px}#playerName{width:100%;font:inherit;font-size:16px;padding:12px;color:#14394b;border:2px solid #a6cbc3;border-radius:10px;background:#fff9e9}#saveForm small{display:block;margin-top:7px;font-size:12px;color:#d1dfd6}#saveStatus{font-size:13px;line-height:1.5}button:disabled{opacity:.55;cursor:default}.rankpage{max-width:1100px;width:100%;margin:auto;padding:18px;color:#fff}.rankhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.rankhead small{font-size:11px;color:#ffc971;letter-spacing:1px}.rankhead h2{font-size:23px;margin:10px 0}.rankhead button{background:#ffffff15;color:#fff;border:1px solid #fff5;border-radius:9px;width:42px;height:42px;font-size:26px;flex-shrink:0}#rankings{padding:0;align-items:flex-start;background:#0e3049;z-index:15}#rankStatus{font-size:12px;line-height:1.5;color:#c1d5dc;min-height:36px;margin:4px 0}#refreshRanks{width:auto;padding:8px 0 15px}#rankGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ranklevel{min-width:0}.ranklevel h3{font-size:14px;color:#ffd089;min-height:36px;margin:4px 0}.ranklevel article{background:#184354;border:1px solid #ffffff1c;border-radius:9px;padding:9px;margin-bottom:9px;min-height:113px}.ranklevel h4{font-size:12px;margin:0 0 9px;color:#91e0d9}.ranklevel article p{font-size:12px;color:#9ab8c3}.rankrow{display:flex;justify-content:space-between;gap:6px;font-size:12px;line-height:1.8}.rankrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rankrow b{color:#ffe4a4;flex-shrink:0}body:has(#rankings:not([hidden])) #app{max-width:1100px}.resultcard h2{margin:12px 0}.resultcard .academy{margin-bottom:16px}@media(min-width:850px){#rankGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-height:690px){#home{padding:14px 18px}.intro .academy{margin-bottom:8px}.intro h1{font-size:20px}.characters{margin-bottom:11px}.characters span{font-size:27px}.intro select{height:38px;margin-bottom:8px}.intro .how{display:none}.intro .hint{margin:10px 0 0}.intro .bestscore{margin:9px 0}.primary{min-height:46px}.academy b{font-size:19px}.academy span{font-size:11px}.rankpage{padding:12px}#question h2{font-size:18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
body:has(#home:not([hidden])) .hud{visibility:hidden}body:has(#home:not([hidden])) #toast{display:none}#home{background:linear-gradient(#0c3549f2,#0c3549b0)}
#question.pictureQuestion{display:grid;grid-template-columns:76px minmax(0,1fr);gap:4px 8px;align-items:center;padding:7px 10px}#question.pictureQuestion>small{grid-column:1/-1;text-align:left}#question.pictureQuestion #prompt{grid-row:2/4;grid-column:1;font-size:60px!important;line-height:1.1;margin:0}#question.pictureQuestion #answers{grid-row:2;grid-column:2;align-self:end}#question.pictureQuestion .timer{grid-row:3;grid-column:2;align-self:start;margin-top:2px}#question.pictureQuestion #answers span{font-size:13px;padding:8px 1px;overflow-wrap:anywhere}#replayAnswer{position:absolute;z-index:5;right:14px;bottom:max(76px,calc(env(safe-area-inset-bottom) + 64px));background:#143e50e8;border:1px solid #fff8;border-radius:9px;color:#fff;padding:8px 12px;font-size:13px}#testAudio{width:auto;padding:8px 0 2px;font-size:12px}#audioStatus{display:block;font-size:11px;color:#bde4df;min-height:0}.teacherCard{max-width:440px}.teacherCard label{display:block;font-size:14px;margin:12px 0 7px}.teacherCard input{width:100%;font:inherit;font-size:16px;background:#fff9e9;color:#183e44;border:1px solid #9ed1c6;border-radius:10px;padding:12px}.teacherCard small{display:block;font-size:12px;line-height:1.6;color:#bdcfce;margin-top:15px}#teacherStatus{min-height:24px}#teacherPanel{z-index:16}.teacherCard .rankhead h2{font-size:22px;margin:0 0 12px}#resetConfirmation{margin-top:16px;padding:12px;background:#632f394a;border:1px solid #f7af9b;border-radius:12px}.danger{width:100%;margin-top:13px;padding:13px;background:#e67258;color:#fff;border:0;border-radius:10px;font-weight:700}.homeactions .textbtn{flex:1!important}.homeactions{gap:8px}@media(max-width:350px){#question.pictureQuestion{grid-template-columns:70px minmax(0,1fr);gap:4px}#question.pictureQuestion #answers span{font-size:12px}}
/* Twenty visible energy segments, without covering the road. */
.health{display:flex;align-items:center;gap:6px;margin-top:5px;min-height:20px}.health #energyFood{font-size:17px;letter-spacing:0}#hearts{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:2px;flex:1;height:12px;min-width:0}#hearts i{display:block;background:#ffffff26;border-radius:2px;border:1px solid #fff2}#hearts i.filled{background:#7ae4a5;border-color:#c3ffcd}#hearts.low i.filled{background:#ff956f;border-color:#ffc8a6}#energyCount{font-size:11px;white-space:nowrap;color:#f8f7d5}.health #clock{margin-left:4px}#routeAlert{position:absolute;top:max(133px,calc(env(safe-area-inset-top) + 122px));left:12px;right:12px;z-index:4;padding:10px 12px;background:#553711f5;border:2px solid #ffc66e;border-radius:10px;font-size:14px;font-weight:800;text-align:center;color:#fff4c9;pointer-events:none}body:has(#routeAlert:not([hidden])) #toast{display:none}.foodhint{font-size:12px;line-height:1.5;color:#ffe4a1;margin:0 0 9px}.health span{letter-spacing:0}#resultStats{grid-template-columns:repeat(2,minmax(0,1fr))}
#eventPanel{position:absolute;z-index:5;top:max(132px,calc(env(safe-area-inset-top) + 122px));left:10px;right:10px;padding:10px 12px;border:1px solid #fce3a7;border-radius:12px;background:#123b4df5;color:#fff5d2;text-align:center;pointer-events:none}#eventTitle{display:block;font-size:15px;line-height:1.25}#eventDetail{display:block;font-size:11px;margin-top:5px;color:#d8e9dc;line-height:1.35}#routeChoices{display:flex;gap:8px;margin-top:9px;pointer-events:auto}#routeChoices button{flex:1;border:2px solid #ffffff44;border-radius:9px;background:#245848;color:#f2ffe8;padding:8px 3px;font-size:14px;font-weight:700}#routeChoices button:last-child{background:#78501c;color:#fff1c7}#routeChoices button[aria-pressed=true]{border-color:#ffda70;box-shadow:0 0 0 1px #ffe3a9}#routeChoices small{display:block;font-size:10px;font-weight:400;margin-top:4px}.eventTrack{height:4px;background:#ffffff26;border-radius:5px;margin-top:8px;overflow:hidden}#eventProgress{display:block;height:100%;background:#ffcf6d;width:100%}body:has(#eventPanel:not([hidden])) #toast,body:has(#eventPanel:not([hidden])) #routeAlert{display:none}.runmeta #effects{max-width:58%;text-align:right;line-height:1.2}

/* Edge-to-edge play; touch and keyboard replace the on-screen arrow pad. */
#app,body:has(#rankings:not([hidden])) #app{max-width:none;width:100vw;height:100dvh;min-height:0}#app:fullscreen{width:100%;height:100%;background:#12364b}#controls{display:none!important}.card{max-width:620px}.hud{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}#question,#eventPanel,#toast,#routeAlert{max-width:640px;margin-inline:auto}#replayAnswer{bottom:max(14px,env(safe-area-inset-bottom))}.characters canvas{position:static;display:block;width:100%;height:78px;pointer-events:none}.characters span{display:none}.characters button{overflow:hidden}.how{display:none!important}#home{background:linear-gradient(100deg,#082d46e8,#133c51be)}@media(min-width:850px){.hud{max-width:780px;left:50%;transform:translateX(-50%)}#question,#eventPanel,#toast,#routeAlert{left:calc(50% - 320px);right:calc(50% - 320px)}}@media(orientation:landscape) and (max-height:550px){.hud{max-width:none}.stats{margin-top:0}.stats strong{font-size:18px}#question,#eventPanel,#toast,#routeAlert{top:110px;max-width:440px;left:calc(50% - 220px);right:calc(50% - 220px)}.health{max-width:440px}.runmeta{max-width:440px}#question h2{font-size:18px}}

.resultcard .copyright{margin:20px 0 0;padding-top:14px;border-top:1px solid #ffffff25;color:#c9d8d8;font-size:11px;text-align:center;line-height:1.7}