@font-face{font-family:KIMM;src:url('./assets/fonts/kimm-light.ttf') format('truetype');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:KIMM;src:url('./assets/fonts/kimm-bold.ttf') format('truetype');font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:PyeongChang;src:url('./assets/fonts/pyeongchang-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PyeongChang;src:url('./assets/fonts/pyeongchang-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#111519;--text:#eef3f3;--muted:#94acb0;--cyan:#64e1f5;--aqua:#68d2d8;--lime:#b9ff75;--pink:#efa2ea;--font:KIMM,"Malgun Gothic",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%}
body{display:grid;place-items:center;min-height:100vh;min-height:100dvh;overflow:hidden;background:#090c10;color:var(--text);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .18s,background .18s,filter .18s,border-color .18s}
button:disabled{cursor:default;opacity:.32}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
button svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button img{display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
img{max-width:100%}
[hidden]{display:none!important}
.symbol-library{position:absolute;width:0;height:0;overflow:hidden}

/* The portrait stage uses the original 1080 by 1920 composition. */
.game-shell{position:relative;width:min(100%,56.25vh);width:min(100%,56.25dvh);height:100vh;height:100dvh;overflow:hidden;isolation:isolate;container-type:inline-size;background:linear-gradient(180deg,#171c20 0%,#191d23 44%,#202d30 100%);box-shadow:0 0 90px #0007}
.space-background{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.starfield{position:absolute;inset:-8%;background-repeat:repeat;background-position:center;background-size:95% auto;opacity:var(--opacity,.15)}
.starfield:nth-child(2){transform:rotate(110deg) scale(1.15)}
.starfield:nth-child(3){transform:rotate(230deg) scale(.95)}
.space-particle{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--size,1cqw);height:auto;opacity:var(--opacity,.4);transform:translate3d(0,5cqw,0) rotate(var(--angle,0deg));animation:particle-drift var(--duration,35s) linear var(--delay,0s) infinite;user-select:none}
.space-particle.bolt{animation-name:bolt-drift;transform-origin:center}
.space-particle.glow{aspect-ratio:1;border-radius:50%;background:var(--color,#b7e8df);box-shadow:0 0 1.2cqw .35cqw var(--color,#b7e8df)}
.danger-vignette{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;box-shadow:inset 0 0 18cqw 2cqw #bc344965;transition:opacity .5s}
.game-shell.critical .danger-vignette{opacity:1;animation:danger-breathe 1.1s ease-in-out infinite}

.game-header{position:absolute;inset:0 0 auto;height:10%;z-index:4;pointer-events:none}
.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:7px;border-radius:8px;color:#dce5e5;background:transparent}
.icon-button:hover{color:white;background:#85e2e815}
.menu-button{position:absolute;left:1.5%;top:max(2.3dvh,env(safe-area-inset-top));width:11cqw;height:11cqw;padding:0;pointer-events:auto}
.menu-button svg{width:9.4cqw;height:9.4cqw;stroke-width:2.45}
.level-heading{position:absolute;top:4.2dvh;right:5%;max-width:72%;text-align:right;color:#9aafb1;opacity:.62}
#sector-label{display:block;font-size:1.65cqw;letter-spacing:.12em}
#level-title{margin:.3cqw 0 0;font-size:2.5cqw;font-weight:400;line-height:1.5;text-wrap:balance}

.space-viewport{position:absolute;top:11.8%;left:0;width:100%;height:28%;display:flex;align-items:center;justify-content:center;overflow:visible;touch-action:none}
#board-camera{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;transform-origin:center}
.game-shell[data-phase="escaping"] .space-viewport{z-index:6}
#board{display:block;overflow:visible;max-width:none;max-height:none;flex-shrink:0;user-select:none;-webkit-user-select:none}
.board-wall{stroke:#c3c5c5;stroke-width:6.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.exit-arrow{stroke:var(--cyan);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;fill:none}
.shutter-open{fill:none;stroke:url(#shutter-stripes);stroke-width:7;stroke-linecap:round;transition:opacity .08s}
.shutter-closed{fill:none;stroke:#c3c5c5;stroke-width:6.8;stroke-linecap:round;opacity:0;transition:opacity .08s}
.shutter.closed .shutter-open{opacity:0}
.shutter.closed .shutter-closed{opacity:1}
.fire-frame{opacity:0;animation:fire-frame .416666667s step-end infinite}
.fire-frame-0{animation-delay:0s}
.fire-frame-1{animation-delay:.083333333s}
.fire-frame-2{animation-delay:.166666667s}
.fire-frame-3{animation-delay:.25s}
.fire-frame-4{animation-delay:.333333333s}
.collapse-message{position:absolute;inset:0;display:grid;place-items:center;z-index:5;color:#f2b0bc;font-size:7cqw;font-weight:700;text-shadow:0 2px 12px #000,0 0 4cqw #d6335177;pointer-events:none}

.timer-display{--timer-color:#7ba49d;position:absolute;left:4.5%;top:13.7%;width:5.7%;height:24%;z-index:3;color:var(--timer-color);text-align:center}
#timer-number{display:block;font-size:3.55cqw;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.timer-track{position:absolute;top:11%;bottom:0;left:38.5%;width:23%;overflow:hidden;border-radius:.6cqw;background:#72948f12}
#timer-fill{position:absolute;inset:0;height:100%;width:100%;border-radius:inherit;background:var(--timer-color);transform-origin:center bottom;transition:background .25s}
.timer-display.urgent{--timer-color:#e2be7b}
.timer-display.critical{--timer-color:#f28d9e}
.timer-display.critical #timer-number{animation:timer-pulse .8s ease-in-out infinite}

.coach{position:absolute;z-index:3;left:14.5%;top:40.6%;width:71%;height:9.25%;display:flex;align-items:center;justify-content:center;padding:.5cqw 2.5cqw;border:.16cqw solid #61d8df;background:#131b20e0;color:var(--aqua)}
.coach::before,.coach::after{content:"";position:absolute;top:-.16cqw;bottom:-.16cqw;width:2.2%;background:#67f0f7}
.coach::before{right:calc(100% + .25cqw);border-radius:0 100% 100% 0 / 0 18% 18% 0}
.coach::after{left:calc(100% + .25cqw);border-radius:100% 0 0 100% / 18% 0 0 18%}
.coach p{width:100%;margin:0;text-align:center;white-space:pre-line;text-wrap:balance;font-family:PyeongChang,var(--font);font-size:3.55cqw;line-height:1.5;letter-spacing:0}
.coach strong,.coach em,.coach .highlight{color:var(--pink);font-weight:400;font-style:normal}
.coach.hint{color:#cbf3a1;border-color:#a8df83}
.coach.hint::before,.coach.hint::after{background:#b9f590}
.coach.failure{color:#e6abb9;border-color:#cb869a}
.coach.failure::before,.coach.failure::after{background:#e8a0b5}
.reset-button{position:absolute;left:84.3%;top:53.8%;width:11%;min-width:44px;aspect-ratio:1;display:grid;place-items:center;padding:0;border:.27cqw solid #c1c5cf;border-radius:2.4cqw;background:#19202a22;opacity:.32;z-index:4}
.reset-button img{width:66%;height:66%;object-fit:contain}
.reset-button:hover,.reset-button:focus-visible{opacity:.9}
.reset-button.needed{border-color:var(--cyan);opacity:.9;filter:drop-shadow(0 0 .9cqw #50d2e83b);animation:reset-pulse 1.7s ease-in-out infinite}

.gravity-pad{position:absolute;left:18%;top:55%;width:64%;height:28.5%;z-index:3;touch-action:none}
.gravity-cross{position:absolute;left:8%;top:10%;width:84%;height:80%;object-fit:fill;opacity:.63;pointer-events:none}
.direction-button{--direction-angle:0deg;position:absolute;width:26%;height:33%;padding:0;display:grid;place-items:center;border-radius:18%;background:transparent;transform:translate(-50%,-50%) rotate(var(--direction-angle))}
.direction-button>img{position:absolute;width:77%;height:77%;object-fit:contain;opacity:.82;transition:opacity .12s,filter .12s}
.direction-button>.direction-on{opacity:0;transform:rotate(90deg)}
.direction-up{left:50%;top:11.5%}
.direction-right{--direction-angle:90deg;left:91%;top:50.5%}
.direction-down{--direction-angle:180deg;left:50%;top:90%}
.direction-left{--direction-angle:-90deg;left:9%;top:50.5%}
.direction-button.active>img{opacity:1}
.direction-button.active>.direction-on{opacity:.88}
.direction-button.hinted{filter:drop-shadow(0 0 1.6cqw #76f4ffc0);animation:direction-hint .8s ease-in-out infinite}
.direction-button.hinted>.direction-on{opacity:.32}
.direction-button:active:not(:disabled)>.direction-on{opacity:.95}
@media(hover:hover){.direction-button:hover:not(:disabled)>img{opacity:1;filter:drop-shadow(0 0 .6cqw #b5efff44)}}

.flight-metrics{position:absolute;left:8%;bottom:10%;width:84%;display:flex;align-items:center;justify-content:space-between;gap:1cqw;color:#a4b9bb;opacity:.7;font-size:clamp(9px,1.7cqw,18px);line-height:1.6;white-space:nowrap}
.flight-metrics b{font-weight:600;color:#d5e1df}
#flight-status{max-width:50%;overflow:hidden;text-overflow:ellipsis;text-align:center}
.game-tools{position:absolute;left:9%;bottom:max(2%,env(safe-area-inset-bottom));width:82%;height:4.8%;min-height:44px;display:flex;align-items:stretch;justify-content:space-between;gap:1cqw;z-index:4}
.tool-button{display:flex;align-items:center;justify-content:center;gap:.7cqw;min-width:0;flex:1;padding:.8cqw .4cqw;border-radius:1cqw;background:transparent;color:#9db7ba;font-size:clamp(9px,1.75cqw,18px);white-space:nowrap}
.tool-button svg{width:clamp(15px,2.8cqw,29px);height:clamp(15px,2.8cqw,29px);flex-shrink:0}
.tool-button:hover:not(:disabled),.tool-button[aria-pressed="true"]{color:#9be6e9;background:#77d5e20b}

.result-overlay{position:absolute;inset:0;z-index:15;overflow:hidden;background:linear-gradient(180deg,#020608bd,#102a32bf);text-align:center;animation:overlay-in .3s ease-out both}
#result-title{position:absolute;top:13.3%;left:5%;width:90%;margin:0;font-family:PyeongChang,var(--font);font-size:9.7cqw;font-weight:700;line-height:1;color:#fff;-webkit-text-stroke:.32cqw #4c5060;paint-order:stroke fill;text-shadow:0 .35cqw 0 #4c5060}
.escaped-art{position:absolute;left:31%;top:27.2%;width:36%;height:21%;pointer-events:none}
.escaped-art>img{position:absolute;width:75%;max-width:none;height:auto;object-fit:contain}
.capsule-top{left:9%;top:-3%;z-index:2;animation:capsule-top-arrive .65s cubic-bezier(.16,.65,.25,1) both}
.capsule-bottom{left:17%;bottom:0;z-index:1;animation:capsule-bottom-arrive .65s cubic-bezier(.16,.65,.25,1) both}
.escaped-art>.escaped-cargo{left:32%;top:32%;width:40%;z-index:3}
.result-icon{position:relative}
.result-icon>span{position:absolute;left:-30%;bottom:calc(100% + 2cqw);width:160%;font-size:4cqw;color:#91e6f0;white-space:nowrap}
.escape-sparkles{position:absolute;inset:-15%;z-index:3;background:url('./assets/sprites/escaped-particle1.png') 14% 20%/9% auto no-repeat,url('./assets/sprites/escaped-particle2.png') 85% 34%/7% auto no-repeat,url('./assets/sprites/escaped-particle3.png') 79% 85%/8% auto no-repeat;animation:escape-twinkle 2s ease-in-out infinite alternate}
#result-description{position:absolute;left:15%;top:52.7%;width:70%;margin:0;color:#b9e6e7;font-size:2.8cqw;line-height:1.65;text-wrap:balance;white-space:pre-line}
.tutorial-progress{position:absolute;left:14.5%;top:61.5%;width:71%;display:flex;align-items:center;justify-content:space-between;gap:1cqw}
.tutorial-progress>*{position:relative;display:block;flex-shrink:0;width:4.5cqw;height:4.5cqw;border:.22cqw solid #609aa4;border-radius:50%;background:#13232c66}
.tutorial-progress>.done,.tutorial-progress>.complete,.tutorial-progress>.completed{border-color:var(--cyan);background:#4ebbd243}
.tutorial-progress>.current,.tutorial-progress>.active{border-color:#71ebff;background:#418c9d99;box-shadow:0 0 3cqw 1cqw #45ddff70}
.result-actions{position:absolute;left:11%;top:82%;width:80%;height:8%;display:flex;align-items:center;justify-content:space-between}
.result-icon{position:relative;width:27%;height:100%;display:grid;place-items:center;border:.22cqw solid #65d8ef;border-radius:2.2cqw;padding:1cqw 3cqw;background:#1b3e491c;color:#6cddf1}
.result-icon>img{width:70%;height:90%;object-fit:contain}
.result-icon.next{width:34%;border:0;padding:0}
.result-icon.next>img{width:100%;height:100%}
.result-icon:hover:not(:disabled){filter:brightness(1.2) drop-shadow(0 0 1.5cqw #73eafa40)}

.start-screen{position:absolute;inset:0;z-index:20;overflow:hidden;background:#0d061ceb url('./assets/sprites/background.png') center/cover no-repeat}
.start-screen::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#080d1a05 15%,#0a192532 52%,#0a1524c4 100%);pointer-events:none}
.title-logo{position:absolute;z-index:5;left:7%;top:12.8%;width:86%;max-width:none;height:auto;filter:drop-shadow(0 .5cqw 1.5cqw #3b005760)}
.title-tagline{position:absolute;left:8%;top:22%;z-index:5;width:84%;margin:0;text-align:center;color:#edaaeb;font-size:3.9cqw;letter-spacing:-.03em;text-shadow:0 0 2cqw #180525}
.title-planet{position:absolute;left:-17%;bottom:-12%;width:134%;max-width:none;height:auto;z-index:1}
.satellite{position:absolute;max-width:none;pointer-events:none;animation:satellite-float 24s ease-in-out infinite alternate}
.satellite-back{left:-12%;top:43%;width:120%;opacity:.5;z-index:0;filter:blur(.12cqw);animation-duration:32s}
.satellite-middle{left:-18%;top:32%;width:132%;opacity:.8;z-index:1;animation-delay:-9s}
.satellite-front{left:-4%;top:27%;width:112%;opacity:.88;z-index:2;animation-delay:-17s}
.start-button{position:absolute;z-index:5;left:37%;top:65%;width:26%;height:10%;display:grid;place-items:center;padding:0;background:transparent;filter:drop-shadow(0 0 2cqw #c4effd28)}
.start-button>img{width:100%;height:100%;object-fit:contain}
.start-button>span{position:absolute;top:calc(100% + 1.6cqw);left:-25%;width:150%;font-size:3.6cqw;color:#e7eef2;text-shadow:0 0 1.4cqw #000}
.start-button:hover{filter:brightness(1.2) drop-shadow(0 0 3cqw #c9ecff55)}
.text-button{min-height:40px;padding:6px 10px;background:transparent;color:#9ed0d6;font-size:14px}
.text-button:hover{color:#ecffff}
#title-levels{position:absolute;z-index:5;top:84%;left:30%;width:40%;font-size:2.9cqw}
.title-footnote{position:absolute;z-index:5;left:0;bottom:3%;width:100%;text-align:center;color:#b3b5cd;opacity:.6;font-size:1.6cqw;letter-spacing:.16em}

/* Dialogs remain native modals and their level catalog scrolls independently. */
.panel-dialog{display:none;position:fixed;inset:0;width:min(94vw,640px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);margin:auto;padding:clamp(18px,4vw,30px);border:1px solid #52828d;border-radius:12px;background:#18232af7;color:var(--text);box-shadow:0 24px 120px #000a;overflow:hidden}
.panel-dialog[open]{display:flex;flex-direction:column;gap:18px}
.panel-dialog::backdrop{background:#050a10c9;backdrop-filter:blur(6px)}
#sidebar{height:min(85dvh,850px)}
.dialog-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:12px}
.dialog-header h2{margin:5px 0 0;font-size:clamp(22px,4vw,28px);font-weight:400;line-height:1.3}
.eyebrow{color:#78b7c2;font-size:10px;letter-spacing:.19em}
.catalog-filters{display:grid;grid-template-columns:1fr 1.2fr;flex-shrink:0;gap:12px}
.catalog-filters label{display:block;color:#a4b9bf;font-size:12px}
.catalog-filters select,.catalog-filters input{display:block;width:100%;min-width:0;min-height:42px;margin-top:6px;padding:8px 10px;border:1px solid #42606b;border-radius:6px;background:#111d25;color:#e0edf0;font-size:13px}
.catalog-filters input::placeholder{color:#7c98a3}
.catalog-info{display:flex;justify-content:space-between;gap:10px;flex-shrink:0;color:#9fb4bd;font-size:12px}
.catalog-info b{color:#99dfdc;font-weight:600}
#level-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(70px,max-content);align-content:start;gap:9px;min-height:0;flex:1;padding:2px 5px 2px 2px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#477981 #152129}
.level-button{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 11px;border:1px solid #334b57;border-radius:7px;background:#1a2932;color:#bdcbd1;text-align:left}
.level-button:hover{border-color:#689da6;background:#223740}
.level-button.current{border-color:#76d5df;background:#24414a;box-shadow:inset 0 0 20px #7adcea0b;color:#f1ffff}
.level-button.complete::after{content:"";position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:#b9f58e}
.level-number{flex-shrink:0;min-width:27px;color:#8ebcc7;font-weight:700;font-size:17px;text-align:center;font-variant-numeric:tabular-nums}
.level-button.current .level-number{color:#87e7eb}
.level-copy{min-width:0;display:block}
.level-copy>strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:400;line-height:1.6}
.level-copy>small{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#96adb7}
.empty-list{grid-column:1/-1;margin:0;padding:30px 10px;color:#a4bdc6;text-align:center;font-size:14px}
.catalog-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;flex-wrap:wrap;gap:8px;border-top:1px solid #334a55;padding-top:10px}
.setting{display:flex;align-items:center;gap:7px;font-size:12px;color:#b1c5cc}
.setting input{width:16px;height:16px;accent-color:#7ed2d7}
.catalog-footer .text-button{font-size:12px}
.help-dialog{width:min(94vw,520px);overflow:auto}
.help-dialog p{margin:0;font-size:14px;color:#c0d2d9;line-height:1.85}
.help-dialog p strong{color:#7be4f1;font-weight:400}
.rules-list{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.rules-list li{display:flex;align-items:center;gap:14px;color:#b3c8d0;font-size:13px;line-height:1.8}
.rules-list img{width:33px;height:33px;flex-shrink:0;object-fit:contain}
.shutter-sample{display:inline-block;width:33px;height:7px;flex-shrink:0;border-radius:2px;background:repeating-linear-gradient(120deg,#080c09 0 7px,#b4fa70 7px 14px)}
.help-dialog .help-note{padding-top:16px;border-top:1px solid #344b58;color:#90aeb8;font-size:12px}
kbd{display:inline-grid;place-items:center;min-width:22px;height:24px;border:1px solid #57717e;border-radius:4px;background:#11212b;color:#cfdee3;font:12px var(--font)}
.primary-button{width:100%;min-height:45px;flex-shrink:0;border-radius:6px;background:#89d2d7;color:#132a30;font-weight:700}
.primary-button:hover{background:#a2e9ec}

@keyframes fire-frame{0%{opacity:1}20%,100%{opacity:0}}
@keyframes particle-drift{from{transform:translate3d(0,5cqw,0) rotate(var(--angle,0deg))}to{transform:translate3d(8cqw,-125dvh,0) rotate(var(--angle,0deg))}}
@keyframes bolt-drift{from{transform:translate3d(0,6cqw,0) rotate(var(--angle,0deg))}to{transform:translate3d(-13cqw,-125dvh,0) rotate(calc(var(--angle,0deg) + 360deg))}}
@keyframes danger-breathe{50%{opacity:.6}}
@keyframes timer-pulse{50%{opacity:.55}}
@keyframes reset-pulse{50%{opacity:.56}}
@keyframes direction-hint{50%{filter:drop-shadow(0 0 2.3cqw #76f4ff55)}}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
@keyframes capsule-top-arrive{from{opacity:0;transform:translate(5%,12%) rotate(12deg)}to{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes capsule-bottom-arrive{from{opacity:0;transform:translate(-4%,-10%)}to{opacity:1;transform:translate(0,0)}}
@keyframes escape-twinkle{from{opacity:.45;transform:scale(.96)}to{opacity:.9;transform:scale(1.04)}}
@keyframes satellite-float{from{transform:translate(-1%,0) rotate(-3deg)}to{transform:translate(1.5%,-2%) rotate(4deg)}}

@media(max-width:420px){
  .panel-dialog[open]{gap:14px}
  .catalog-filters{gap:8px}
  .level-button{gap:7px;padding:9px 8px}
  .level-number{min-width:22px;font-size:15px}
  .level-copy>strong{font-size:12px}
  .catalog-footer{gap:4px}
  .setting{font-size:11px}
  .game-tools{left:7%;width:86%}
}

/* Short landscape screens put the board and controls in separate columns. */
@media(orientation:landscape) and (max-height:600px){
  .game-shell{width:min(100%,220dvh);max-width:1200px}
  .menu-button{left:1%;top:2%;width:7cqw;height:7cqw}
  .menu-button svg{width:4.8cqw;height:4.8cqw}
  .level-heading{top:5dvh;right:6%;max-width:40%}
  #sector-label{font-size:1.1cqw}
  #level-title{font-size:1.8cqw}
  .space-viewport{left:2%;top:15%;width:52%;height:71%}
  .timer-display{left:2.8%;top:22%;width:3.6%;height:57%}
  #timer-number{font-size:2.4cqw}
  .coach{left:57%;top:19%;width:38%;height:20%;padding:1cqw 1.3cqw;border-width:1px}
  .coach p{font-size:1.85cqw;line-height:1.55}
  .reset-button{left:91%;top:43%;width:5.5%;border-radius:1.2cqw;border-width:.18cqw}
  .gravity-pad{left:58%;top:43%;width:34%;height:min(39%,calc(51.4dvh - 49px))}
  .gravity-cross{opacity:.5}
  .direction-button{width:26%;height:38%;min-width:44px;min-height:44px}
  .direction-up{top:12%}
  .direction-down{top:88%}
  .flight-metrics{left:5%;bottom:4%;width:46%;font-size:10px}
  .game-tools{left:56%;bottom:max(2%,env(safe-area-inset-bottom));width:40%;height:44px;min-height:44px}
  .tool-button{gap:.5cqw;font-size:10px}
  .tool-button svg{width:15px;height:15px}
  .collapse-message{font-size:4cqw}
  #result-title{left:4%;top:13%;width:45%;font-size:5.7cqw}
  .escaped-art{left:9%;top:32%;width:34%;height:56%}
  .escaped-art>img{width:66%}
  .capsule-top{left:13%}
  .capsule-bottom{left:20%}
  #result-description{left:55%;top:29%;width:39%;font-size:2cqw}
  .tutorial-progress{left:56%;top:54%;width:38%}
  .tutorial-progress>*{width:2.7cqw;height:2.7cqw;border-width:1.5px}
  .result-actions{left:57%;top:76%;width:35%;height:13%}
  .result-icon{border-width:1.5px;border-radius:1cqw;padding:.5cqw 1cqw}
  .result-icon>span{font-size:2cqw;bottom:calc(100% + 1cqw)}
  .title-logo{left:4%;top:15%;width:48%}
  .title-tagline{left:4%;top:34%;width:48%;font-size:2cqw}
  .title-planet{left:-12%;bottom:-70%;width:83%}
  .satellite-front{left:9%;top:20%;width:76%}
  .satellite-middle{top:10%;left:5%;width:94%}
  .satellite-back{left:7%;top:19%;width:95%}
  .start-button{left:67%;top:31%;width:16%;height:23%}
  .start-button>span{font-size:2cqw}
  #title-levels{left:61%;top:72%;width:28%;font-size:1.8cqw}
  .title-footnote{bottom:4%;left:55%;width:40%;font-size:1cqw}
  .panel-dialog{max-height:calc(100dvh - 20px);padding:16px 22px}
  .panel-dialog[open]{gap:10px}
  #sidebar{height:calc(100dvh - 20px)}
  .dialog-header h2{font-size:21px}
  .catalog-filters label{display:flex;align-items:center;gap:8px;white-space:nowrap}
  .catalog-filters input,.catalog-filters select{margin-top:0;min-height:35px;padding:5px 8px}
  .catalog-footer{padding-top:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .fire-frame{opacity:0}
  .fire-frame-0{opacity:1}
  .space-particle{top:var(--static-y,50%);transform:rotate(var(--angle,0deg))}
  .direction-button.hinted{filter:drop-shadow(0 0 1cqw #85f5ff99)}
  .reset-button.needed{opacity:.9}
  .game-shell.critical .danger-vignette{opacity:.7}
}