:root{color-scheme:dark;--gold:#e9d0a0;--cream:#fff1d2}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#060e18;color:var(--cream);font-family:'Yu Mincho','Hiragino Mincho ProN',Georgia,serif;overscroll-behavior:none}body{display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#162939,#080f19 70%)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #fff0c8;outline-offset:3px}#app{width:min(100%,500px);min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:5px 8px max(5px,env(safe-area-inset-bottom))}header{width:100%;height:26px;display:flex;justify-content:space-between;align-items:center;padding:0 4px;font-size:11px;letter-spacing:3px;color:#c6b99e}header button{border:1px solid #baa06b55;background:#0b1925;width:30px;height:26px;border-radius:6px;font-size:12px}#table{position:relative;width:min(100%,calc((100dvh - 98px) * .562799));aspect-ratio:941/1672;flex:none;overflow:hidden;background:#07111c;border-radius:5px;box-shadow:0 14px 55px #000b,0 0 0 1px #9e7c4444}canvas{display:block;width:100%;height:100%;touch-action:none}#overlay{position:absolute;inset:0}[hidden]{display:none!important}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px}.title{align-items:flex-end;background:linear-gradient(transparent 48%,#050e1877 66%,#050e18dd)}.titlecopy{margin-bottom:12%;width:100%}.title small,.panel small{font-family:Georgia,serif;font-size:8px;letter-spacing:1.7px;color:#bdc6c9}.title h1{font-size:clamp(23px,6.5vw,36px);font-weight:500;letter-spacing:4px;margin:12px 0}.screen p{font-size:11px;line-height:1.9;color:#d4d2c8}.primary{display:block;width:100%;padding:13px 8px;border:1px solid #c3a46c;border-radius:6px;background:linear-gradient(#544633,#302c27);box-shadow:inset 0 1px #f2d49e44,0 3px 12px #0005;color:#ffefcc;letter-spacing:1.5px;font-size:12px}.primary:active{background:#645039;transform:translateY(1px)}.title .primary{margin-top:20px}.title #bestTitle{display:block;margin-top:13px}.panel{overflow-y:auto;background:#07121be8;backdrop-filter:blur(6px);align-items:safe center}.panelinner{width:100%;max-width:310px}.panel h2{font-size:21px;font-weight:500;line-height:1.7;margin:15px 0 20px}.panel label{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #a58c5a33;font-size:12px}.panel input{accent-color:#c3a46c;max-width:115px}input[type=checkbox]{width:18px;height:18px}.panel p{font-size:10px;margin:18px 0}.secondary,.textbutton{display:block;width:100%;padding:11px;margin-top:10px;border:1px solid #b49a6933;background:#24303966;border-radius:6px;font-size:11px}.textbutton{border:0;background:none;color:#c4b89f}.panel #finalScore{font-size:43px;letter-spacing:4px;color:#f4dab0;margin:22px 0 8px}.panel #bestResult{display:block;margin-bottom:25px}#launchHint{position:absolute;left:15%;right:15%;top:62%;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}#launchHint span{font-size:9px;line-height:1.8;color:#e0d8c6;text-shadow:0 1px 6px #000}#launch{padding:12px 14px;border:1px solid #d3b374;border-radius:5px;background:linear-gradient(#675039,#2c2924);box-shadow:0 4px 15px #0009;color:#ffedc5;font-size:11px;letter-spacing:.6px}#toast{position:absolute;top:45%;left:12%;right:12%;padding:8px;font-size:10px;text-align:center;color:#ffebbf;text-shadow:0 2px 8px #000;pointer-events:none;background:#07131edb;border-top:1px solid #c5a56c55;border-bottom:1px solid #c5a56c55;opacity:0;transition:opacity .15s}#toast.show{opacity:1}.controls{display:flex;gap:8px;width:min(100%,400px);height:43px;flex:none;touch-action:none;user-select:none}.controls button{border:1px solid #ac905c50;border-radius:6px;background:linear-gradient(#263441,#101d29);font-size:13px;color:#e5d4b3;flex:1;box-shadow:inset 0 1px #e5d4b315}.controls button.pressed{background:#526271}.controls #nudge{flex:0 0 86px;font-size:14px}.controls small{font-size:8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-height:550px){#app{min-height:720px}#table{width:min(100%,350px)}.panel{align-items:flex-start}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#musicPicker,#sfxPicker{margin:14px 0 0;padding:10px;border:1px solid #b49a6955;border-radius:6px;background:#07131ee8;text-align:left}#musicPicker label,#sfxPicker label{display:block;font-size:10px;margin-bottom:7px;color:#decaa4}.musicrow{display:flex;gap:7px}.musicrow select{min-width:0;flex:1;background:#172633;color:#ffefcc;border:1px solid #ac905c77;border-radius:4px;padding:8px 5px;font:inherit;font-size:11px}.musicrow button{flex:none;border:1px solid #ac905c77;border-radius:4px;background:#3a352c;padding:8px;font-size:11px}#musicStatus,#sfxStatus{display:block;font-size:9px;line-height:1.6;color:#d2c7b1;margin-top:5px}.title{overflow-y:auto}.titlecopy{margin-bottom:5%}select:focus-visible{outline:2px solid #fff0c8;outline-offset:3px}

.musicheading{display:flex;align-items:center;justify-content:space-between}.musicheading label{display:flex!important;align-items:center;gap:5px}.musicheading input{accent-color:#c3a46c;width:15px;height:15px}
.title{align-items:safe flex-end}.musicrow select{max-width:100%}#musicStatus:empty,#sfxStatus:empty{display:none}

.title .primary{margin-top:12px}.title h1{margin:8px 0}.titlecopy{padding-top:12px}#sfxPicker{margin-top:7px}
