﻿@font-face{font-family:MostWazted;src:url('./most-wazted.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--gold:#d0a32b;--white:#eeeedd;--muted:#afaf9a;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body.menu-page{margin:0;min-height:100svh;background:#060706;color:var(--white);overflow-x:hidden}
.garage{position:fixed;inset:0;background:#080906 url('./garage.png') center center/cover no-repeat;z-index:-2}
.garage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 53%,rgba(3,4,3,.15) 60%,rgba(3,4,3,.94) 82%,#030403 100%)}
.front-end{position:relative;min-height:100svh;max-width:1800px;margin:auto}
.edition-strip{position:absolute;left:16.8%;bottom:17%;min-width:270px;padding:17px 24px;color:#dddfb1;font-size:20px;font-weight:800;transform:rotate(-1deg);background:repeating-linear-gradient(135deg,#26271e 0 8px,#070806 8px 16px) top/100% 9px no-repeat,#080906;box-shadow:0 0 18px 16px #050605;clip-path:polygon(2% 5%,92% 0,100% 15%,96% 90%,4% 100%,0 55%)}
.edition-dot{display:inline-block;width:7px;height:7px;background:var(--gold);margin-right:12px;vertical-align:middle}
.menu{position:absolute;right:12%;bottom:7.5%;width:min(410px,40vw);isolation:isolate;padding:10px 4px}
.menu:before{content:"";position:absolute;inset:-25px -50px -28px;z-index:-1;background:#050605;opacity:.96;clip-path:polygon(8% 2%,30% 7%,35% 0,57% 8%,93% 2%,89% 10%,100% 22%,94% 34%,100% 61%,92% 94%,65% 98%,42% 93%,9% 100%,5% 83%,0 65%,7% 44%,0 29%)}
.menu-topline{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;color:#999d81;font-weight:700;margin-bottom:7px}.edition-tag{color:var(--gold)}
h1{font-family:MostWazted,Impact,sans-serif;font-size:clamp(36px,4.2vw,58px);font-weight:400;margin:0 0 14px;line-height:1.08;text-align:center;text-shadow:2px 3px #000}
.menu-actions{display:grid;gap:8px}.menu-action{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:11px 20px;border:0;color:#bcbfb1;background:transparent;font:800 20px Arial,sans-serif;cursor:pointer;text-align:left;transition:color .12s,background .12s}
.menu-action svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.3}.menu-action.selected,.menu-action:hover,.menu-action:focus-visible{color:#fffde5;outline:0;background:linear-gradient(90deg,#66541c77,transparent)}
.menu-action.selected:before,.menu-action:focus-visible:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--gold),var(--gold)) left top/18px 3px no-repeat,linear-gradient(var(--gold),var(--gold)) left top/3px 14px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/18px 3px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/3px 14px no-repeat}
.menu-action:disabled{opacity:.45;cursor:wait}.chevrons{color:var(--gold);font-size:22px;letter-spacing:-7px;width:20px;transform:translateX(-5px)}.action-index{margin-left:auto;font-size:12px;color:#8a8e77;font-weight:400}
.download-status{margin:14px 6px 0;min-height:62px}#status{font-size:13px;line-height:1.45;margin:0;color:#d8dac4;overflow-wrap:anywhere}.storage-note{font-size:11px;color:#898e7a;margin:6px 0 0;line-height:1.4}progress{width:100%;height:7px;margin:10px 0 1px;accent-color:var(--gold)}
.control-strip{position:absolute;bottom:6%;left:18%;display:flex;gap:24px;align-items:center;padding:9px 14px;background:repeating-linear-gradient(135deg,#262822aa 0 7px,#050605ee 7px 14px);font-size:18px;font-weight:700;box-shadow:0 0 20px #000}
kbd{font:700 14px Arial,sans-serif;border:2px solid #dedfc0;border-radius:50%;display:inline-grid;place-items:center;min-width:28px;height:28px;margin-right:7px;color:#dddfb1}.maker{font-family:MostWazted,Impact,sans-serif;font-size:22px;color:#a5a889;font-weight:400}.no-script{position:fixed;top:0;left:0;right:0;padding:16px;background:#080906}
[hidden]{display:none!important}
.access-menu{bottom:10%}.access-form label{display:block;margin:15px 0 8px;font-size:13px;color:#c7c9b3}.access-form input{width:100%;padding:13px 14px;border:1px solid #797448;border-bottom:3px solid var(--gold);background:#12140f;color:#fff;font:18px Arial;outline-offset:4px}.access-form .menu-action{margin-top:16px}.access-error{color:#edb568;font-size:13px;min-height:20px;line-height:1.4}.access-menu .menu-topline{margin-bottom:16px}
@media(min-aspect-ratio:2/1){.garage{background-position:center 38%}.menu{bottom:6%;right:10%;width:380px}.edition-strip{left:12%}.control-strip{left:12%;bottom:6%}}
@media(max-width:850px){.menu{right:6%;width:43vw;bottom:8%}.edition-strip{left:7%;min-width:200px;font-size:16px}.control-strip{left:7%;bottom:5%;gap:12px;font-size:14px}.maker{display:none}.menu-action{font-size:17px}}
@media(max-width:600px){.garage{background-size:auto 66vh;background-position:center top;background-repeat:no-repeat}.garage:after{background:linear-gradient(transparent 25%,#050605 56%)}.front-end{min-height:100svh;padding:37vh 22px 95px}.menu{position:relative;right:auto;bottom:auto;width:100%;max-width:430px;margin:0 auto;padding:20px 6px 10px}.menu:before{inset:0 -12px}.edition-strip{position:relative;left:auto;bottom:auto;margin:0 0 12px;display:inline-block;min-width:0;font-size:13px;padding:12px 18px;box-shadow:none}.control-strip{left:22px;bottom:25px;font-size:13px;gap:18px}h1{font-size:43px}.menu-action{font-size:19px}.access-menu{bottom:auto}.menu-topline{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Compact icon carousel echoes the original main-menu arrangement. */
.menu-actions{display:flex;justify-content:center;gap:12px}
.menu-action{flex:1;max-width:160px;min-height:94px;flex-direction:column;justify-content:center;gap:9px;padding:12px 5px;font-size:16px;text-align:center}
.menu-action svg{width:34px;height:34px}.menu-action .action-index{display:none}.menu-action .chevrons{position:absolute;left:-7px;top:33px;font-size:19px;opacity:0}.menu-action.selected .chevrons{opacity:1}
.access-form .menu-action{max-width:none;min-height:48px;flex-direction:row;font-size:20px}.access-form .chevrons{position:static;opacity:1}
@media(max-width:600px){.menu-action{font-size:14px;min-height:90px}.menu-actions{gap:9px}.menu{padding-top:22px}}
@media(max-width:600px){.garage:after{background:linear-gradient(transparent 23%,#050605 43%)}}

.performance-controls{margin:12px 8px 0;font-size:12px;color:var(--muted)}
.performance-controls label{display:block;margin-bottom:5px;color:var(--white);font-weight:bold}
.performance-controls select{width:100%;padding:8px;border:1px solid #79652c;background:#13160e;color:var(--white);font:inherit;font-size:14px;cursor:pointer}
.performance-controls select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.performance-controls p{margin:6px 0;line-height:1.35}

/* Touch layouts also cover short landscape screens, not only narrow windows. */
@media (pointer:coarse) and (max-height:600px), (max-width:600px) {
  body.menu-page {overflow-y:auto;}
  .front-end {min-height:100svh;padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));}
  .edition-strip {position:relative;left:auto;bottom:auto;margin:0 0 12px;min-width:0;display:inline-block;box-shadow:none;font-size:13px;padding:10px 16px;}
  .menu {position:relative;right:auto;bottom:auto;width:100%;max-width:440px;margin:0 auto;padding:16px 6px;}
  .menu:before {inset:0 -10px;}
  .control-strip {position:relative;left:auto;bottom:auto;justify-content:center;margin:18px auto 0;max-width:440px;font-size:13px;box-shadow:none;}
  .performance-controls select,.access-form input {min-height:46px;font-size:16px;}
  .menu-action {min-height:80px;font-size:15px;touch-action:manipulation;}
  .download-status {min-height:0;} h1 {font-size:38px;margin-bottom:10px;}
}
@media (max-width:600px) and (orientation:portrait) {
  .front-end {padding-top:28svh;}
  .garage {background-size:auto 46svh;}
  .garage:after {background:linear-gradient(transparent 13%,#050605 43%);}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .front-end {padding-left:48%;}
  .garage {background-size:cover;background-position:32% center;}
  .garage:after {background:linear-gradient(90deg,transparent,#050605 58%);}
  .edition-strip {margin:0;font-size:11px;padding:6px 12px;}
  .menu {padding-top:8px;} .menu-topline {display:none;}
  .menu-action {min-height:64px;padding:6px;font-size:14px;gap:4px;}
  .menu-action svg {width:25px;height:25px;}
  .performance-controls {margin-top:6px;} .control-strip {margin-top:4px;}
  h1 {font-size:30px;margin-bottom:6px;}
}

#import-detail {overflow-wrap:anywhere;max-height:3em;overflow:hidden;}
#import-hint {color:#d8dac4;}
#cancel-import {min-height:44px;margin-top:8px;padding:8px 18px;border:1px solid var(--gold);background:#181a16;color:#e8e9d6;font:inherit;cursor:pointer;}
#cancel-import:disabled {opacity:.6;}
progress:indeterminate {opacity:.8;}
