:root{font-family:"Trebuchet MS",Arial,sans-serif;color:#304262;background:#111b29;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}button,input{font:inherit}button{border:3px solid #526382;border-radius:14px;background:#fff9de;color:#304262;font-weight:800;min-height:44px;padding:8px 16px;touch-action:none;cursor:pointer}button:active,.held{background:#efcb62!important;transform:translateY(1px)}button:focus-visible{outline:4px solid #58bbe8}button:disabled{opacity:.5;cursor:default}#game{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column}canvas{display:block;width:100%;min-height:0;flex:1;background:#8bd8ff;touch-action:none}#top{position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));display:flex;gap:6px}#touch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;background:#d8e8ef;padding:5px 16px;touch-action:none;user-select:none;-webkit-user-select:none}#touch>button{min-width:140px;min-height:54px}#jump{background:#f4d867}#directions{display:flex;gap:5px}#directions button{width:52px;padding:4px;min-height:52px}#overlay{position:absolute;inset:0 0 68px;display:flex;align-items:center;justify-content:center;padding:10px;pointer-events:none}#overlay .panel{pointer-events:auto;max-height:100%;overflow:auto;background:#fff9de;border:5px solid #526382;border-radius:25px;padding:16px 25px;text-align:center;max-width:760px;min-width:min(520px,90vw);box-shadow:0 8px 30px #14233340}.panel h1{font-family:"Comic Sans MS","Trebuchet MS",sans-serif;font-size:clamp(26px,4vw,48px);margin:0 0 8px}.panel h2{margin:6px}.panel p{margin:8px;line-height:1.3}.choices{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.panel label{display:block;margin:9px}.panel input[type=range]{width:180px;vertical-align:middle;accent-color:#55b9e0}.panel input[type=text]{font-size:26px;width:120px;text-transform:uppercase;letter-spacing:6px;text-align:center;border:2px solid #526382;border-radius:8px}.boards{display:flex;justify-content:center;gap:15px;font-family:monospace;font-size:14px}.boards ol{padding-left:28px;text-align:left;margin:4px}.small{font-size:12px;color:#526382}.status{font-size:12px;color:#47754d;margin:8px}#rotate{display:none;position:fixed;inset:0;background:#182638;color:#fff9de;text-align:center;align-items:center;justify-content:center;flex-direction:column;font-weight:bold;font-size:26px;z-index:10}#rotate small{font-size:18px;margin-top:16px}[hidden]{display:none!important}@media(orientation:portrait){#rotate{display:flex}}@media(max-height:450px){#touch{min-height:58px;padding:3px 12px}#overlay{bottom:58px}.panel h1{font-size:28px}.panel p{margin:5px}.panel{padding:8px 18px!important}#touch>button{min-height:48px;min-width:110px}#directions button{min-height:46px;width:44px}button{padding:5px 12px}}
#directions{display:flex;gap:5px}
#directions button{width:52px;min-height:52px;height:52px;padding:4px}
#touch{min-height:68px;justify-content:flex-end;gap:10px;padding:5px 16px}
#directions{margin-right:auto}
#touch>button{min-width:100px;min-height:54px}
#turbo{margin-left:auto;font-size:15px}
#jump{min-width:130px!important;min-height:54px!important}
.turbo-on{background:#efcb62;box-shadow:0 0 0 3px #d89c31 inset}
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game button,#game canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
#game input[type=text]{-webkit-user-select:text;user-select:text;touch-action:manipulation}
#overlay{z-index:8}#top{z-index:9}
#directions.overlay-dpad{position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(78px + env(safe-area-inset-bottom));z-index:6;display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);gap:0;padding:2px;border-radius:22px;background:#13283d30;touch-action:none}
#directions.overlay-dpad button{width:40px;height:40px;min-height:40px;padding:0;border-width:2px;border-radius:10px;background:#fff9ded9;font-size:23px;box-shadow:0 2px 4px #13283d40}
#directions.overlay-dpad [data-dir=up]{grid-column:2;grid-row:1}
#directions.overlay-dpad [data-dir=left]{grid-column:1;grid-row:2}
#directions.overlay-dpad [data-dir=right]{grid-column:3;grid-row:2}
#directions.overlay-dpad [data-dir=down]{grid-column:2;grid-row:3}
#touch.pinball-controls #flipLeft{order:0;margin-right:auto}
#touch.pinball-controls #jump{order:1;margin:0}
#touch.pinball-controls #flipRight{order:2;margin-left:auto}
@media(max-height:450px){#directions.overlay-dpad{bottom:calc(66px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}#directions.overlay-dpad button{width:40px;height:40px;min-height:40px}}
#overlay{bottom:68px}
@media(max-height:450px){#touch{min-height:58px;padding:3px 12px}#overlay{bottom:58px}#touch>button{min-width:90px;min-height:48px}#directions button{width:44px;height:46px;min-height:46px}#jump{min-width:110px!important;min-height:48px!important}}


#directions svg{display:block;width:24px;height:24px;margin:auto;fill:none;stroke:#304262;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#directions.menu-dpad{bottom:calc(8px + env(safe-area-inset-bottom))!important;z-index:10}
#wardrobePreview{display:block;flex:none;width:100%;height:auto;max-height:160px;background:#172548;border-radius:12px;margin:8px auto}
#overlay .panel{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:0}
.panel-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 25px;touch-action:pan-y}
.panel-footer{flex:none;padding:0 16px 12px;background:#fff9de;border-radius:0 0 20px 20px}
.panel-footer .choices{padding-top:6px}
.scroll-cue{display:none;font-size:11px;color:#526382}
@media(max-height:500px){
 #overlay{padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left))}
 #overlay .panel{width:min(760px,96vw);min-width:0;padding:0!important;border-width:3px;border-radius:16px}
 .panel-content{padding:8px 12px}
 .panel h1{font-size:24px;margin:0 0 4px}.panel h2{font-size:19px;margin:3px}
 .panel p{font-size:13px;margin:5px;line-height:1.2}
 .panel button{font-size:13px;min-height:44px;padding:5px 9px;border-width:2px;border-radius:10px}
 .panel .choices{gap:5px}.panel .boards{font-size:11px;gap:10px}
 .panel-footer{padding:4px 10px 5px;box-shadow:0 -3px 8px #30426218}
 .scroll-cue{display:block}
 #wardrobePreview{width:auto;max-width:100%;height:85px;max-height:85px;margin:4px auto}
 .tutorial-visual{max-height:120px;width:38%;object-fit:contain}
 .tutorial-body p{font-size:12px}
}
.tutorial-body{display:flex;align-items:center;gap:16px;text-align:left}.tutorial-visual{width:48%;height:auto;object-fit:contain;border-radius:14px}.tutorial-body p{flex:1;font-size:15px;line-height:1.45}@media(max-height:450px){.tutorial-body{gap:10px}.tutorial-body p{font-size:13px}.tutorial-visual{width:43%}}
.costume-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0}
.costume-card{padding:7px;border:2px solid #b4b6a7;border-radius:12px;background:#fffdf0;display:flex;flex-direction:column;gap:5px;min-width:0}
.costume-card.selected{border-color:#317bb0;background:#e5f5ff}
.costume-card strong{font-size:13px}.costume-card canvas{flex:none;width:100%;height:auto;background:#172548;border-radius:8px}
.costume-card button{padding:5px;font-size:12px}
#directions.overlay-dpad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:0;padding:0;border-radius:16px}
#directions.overlay-dpad button{width:40px;height:40px;min-height:40px;justify-self:center;align-self:center;border-radius:8px}
/* Every landscape screen uses floating controls, with no reserved bottom bar. */
@media all{
 #touch{position:absolute;inset:0;background:none;min-height:0;padding:0;display:block;pointer-events:none}
 #touch button,#touch #directions{pointer-events:auto}
 #touch>button{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));min-width:90px;min-height:48px;box-shadow:0 3px 8px #13283d50;background-color:#fff9dee8}
 #touch #jump{right:calc(12px + env(safe-area-inset-right));background:#f4d867e8}
 #touch #turbo{right:calc(130px + env(safe-area-inset-right));margin:0}
 #touch #flipLeft{left:calc(12px + env(safe-area-inset-left));margin:0}
 #touch #flipRight{right:calc(12px + env(safe-area-inset-right));margin:0}
 #touch.pinball-controls #jump{right:auto;left:var(--pinball-launch-left,76%);top:var(--pinball-launch-top,68%);bottom:auto;min-width:0!important;max-width:22%;font-size:clamp(12px,1.6vw,18px)}
 #touch #directions{position:absolute;left:calc(10px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom));margin:0}
 #directions.overlay-dpad,#directions.menu-dpad{bottom:calc(10px + env(safe-area-inset-bottom))!important}
 #overlay{bottom:0;padding-bottom:5px}
}
@media(max-height:500px){.costume-card{padding:4px;gap:3px}.costume-card canvas{height:70px;object-fit:contain}.costume-card strong{font-size:12px}}
#overlay.wardrobe-screen{inset:0;background:#101b43;padding:10px;pointer-events:auto}
#overlay.wardrobe-screen .panel{width:100%;max-width:1200px;max-height:100%;background:#fff9de}
.carousel-shell{position:relative;padding:0 48px}
.costume-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;touch-action:pan-x;padding:6px 2px 12px;overscroll-behavior-x:contain}
.costume-card{flex:0 0 210px;scroll-snap-align:start}
.costume-card canvas{touch-action:pan-x!important}
.carousel-arrow{position:absolute;top:40%;z-index:2;width:44px;padding:0;font-size:35px;box-shadow:0 3px 10px #13283d40}
.carousel-arrow.previous{left:0}.carousel-arrow.next{right:0}
.wardrobe-screen #wardrobePreview{display:none}
@media(max-height:500px){.wardrobe-screen .panel-content{padding:6px 10px}.costume-card{flex-basis:160px}.carousel-shell{padding:0 40px}.carousel-arrow{width:36px}.wardrobe-screen .costume-card canvas{height:85px}}
.creator-heading{display:flex;justify-content:center;align-items:center;gap:12px}
.creator-heading img{width:60px;height:60px;object-fit:contain;flex:none}
.creator-heading h1{margin:0}
@media(max-height:500px){.creator-heading img{width:38px;height:38px}.creator-heading{gap:8px}}
.creator-footer{display:flex;justify-content:flex-end;margin-top:4px;pointer-events:none}
.creator-footer img{width:150px;height:75px;object-fit:contain;flex:none}
@media(max-height:500px){.creator-footer img{width:110px;height:55px}.creator-footer{margin-top:2px}}
.creator-logo{position:relative;width:150px;height:75px;flex:none}
.creator-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.creator-walker{clip-path:inset(0 51% 0 0);transform-origin:25% 50%}
.creator-words{clip-path:inset(0 0 0 49%)}
.creator-enter .creator-walker{animation:creator-walk 3.8s linear both}
.creator-enter .creator-words{animation:creator-lettering 5s linear both}
@keyframes creator-walk{
 0%{transform:translateX(calc(-1 * min(55vw,600px))) rotate(8deg)}
 8%{transform:translate(calc(-.90 * min(55vw,600px)),-2px) rotate(12deg)}
 16%{transform:translate(calc(-.80 * min(55vw,600px)),2px) rotate(4deg)}
 24%{transform:translate(calc(-.70 * min(55vw,600px)),-2px) rotate(12deg)}
 32%{transform:translate(calc(-.60 * min(55vw,600px)),2px) rotate(4deg)}
 40%{transform:translate(calc(-.50 * min(55vw,600px)),-2px) rotate(12deg)}
 48%{transform:translate(calc(-.40 * min(55vw,600px)),2px) rotate(4deg)}
 56%{transform:translate(calc(-.30 * min(55vw,600px)),-2px) rotate(12deg)}
 64%{transform:translate(calc(-.20 * min(55vw,600px)),2px) rotate(4deg)}
 72%{transform:translate(calc(-.10 * min(55vw,600px)),-2px) rotate(12deg)}
 84%{transform:translate(0,0) rotate(8deg)}
 100%{transform:translate(0,0) rotate(0)}
}
@keyframes creator-lettering{0%,76%{opacity:0}100%{opacity:1}}
@media(max-height:500px){.creator-logo{width:110px;height:55px}}
@media(prefers-reduced-motion:reduce){.creator-enter .creator-walker,.creator-enter .creator-words{animation:none}}
#creatorIntro{position:absolute;inset:0;width:100%;height:100%;background:transparent;pointer-events:none}
.creator-settled{clip-path:inset(0 51% 0 0);opacity:0}
.creator-logo .creator-words{animation:none!important;opacity:var(--creator-word-opacity,0)}
.creator-finished #creatorIntro{visibility:hidden}
.creator-finished .creator-settled{opacity:1}
.creator-finished .creator-words{opacity:1}
.global-board-scroll{max-height:45vh;overflow:auto;margin:12px auto;width:min(640px,100%)}.global-board{border-collapse:collapse;width:100%;text-align:left;font-size:clamp(12px,1.6vw,18px)}.global-board th,.global-board td{padding:8px 10px;border-bottom:1px solid #52638230}.global-board th{position:sticky;top:0;background:#fff9de}.global-board th:first-child,.global-board td:first-child{width:48px;text-align:right}.global-board th:nth-child(3),.global-board td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}.super-tag,.cream-tag{display:inline-block;font-size:.75em;margin-left:5px;padding:2px 5px;border-radius:5px;background:#f4e7bf}.super-tag{background:#fbd8d6;color:#b6373d;font-weight:bold}