/* Reference-inspired title only. The existing live 3D scene is unchanged. */
.title-screen{display:block;padding:0;background:none;isolation:isolate}
.title-lockup{position:absolute;left:4.5%;top:3%;width:min(57vw,950px);pointer-events:none}
.title-brand{display:block;margin:0 0 -1% 15%;font-size:clamp(9px,1.05vw,18px);font-weight:800;letter-spacing:.34em;transform:rotate(-4deg);text-shadow:0 2px 6px #000}
.title-screen h1{margin:0;font-size:inherit;line-height:1;text-shadow:none}
.title-logo{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 2px #0004)}
.logo-brush{fill:#0b111cdf}
.logo-type{font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Arial Black',sans-serif;font-weight:900;stroke:#060a0e;stroke-width:17;stroke-linejoin:round;paint-order:stroke fill;letter-spacing:-.035em}
.logo-white{fill:#fff}.logo-yellow-back{fill:#060a0e;stroke-width:23}.logo-yellow{fill:#ffe017;stroke:#ffe017;stroke-width:5}.logo-runner{fill:white;stroke:#080d16;stroke-width:14;stroke-linejoin:round;paint-order:stroke fill}



.title-menu{position:absolute;left:5.7%;top:48%;width:25%;min-width:290px;max-width:440px;display:grid;gap:1.25vh;pointer-events:auto}
.title-action{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);height:8vh;min-height:46px;max-height:82px;width:100%;padding:0 12%;border-radius:999px;border:2px solid #b9c9df70;background:linear-gradient(130deg,#263040ec,#111925e8);box-shadow:inset 0 2px 1px #fff3,0 4px 6px #0003;color:#fff;font-size:clamp(16px,1.9vw,32px);font-weight:900;white-space:nowrap;text-align:left;transition:transform .15s,background .15s,box-shadow .15s}
.title-action svg{width:1.15em;height:1.15em;flex:none;fill:currentColor;filter:drop-shadow(0 2px 1px #0002)}
.title-action:hover{background:linear-gradient(130deg,#3d4d65f5,#222f42f2);transform:translateX(7px)}
.title-action:active{transform:translateX(7px) scale(.985)}
.title-action.title-start{height:9vh;max-height:92px;background:linear-gradient(110deg,#ffe43b,#ffd30a);color:#101311;border-color:#fff39c;box-shadow:inset 0 2px 0 #fff8,0 4px 0 #ba8e0c,0 8px 12px #0004;font-size:clamp(17px,2.05vw,35px)}
.title-action.title-start:hover{background:linear-gradient(110deg,#fff076,#ffe233)}
.title-action:focus-visible,.title-action.pad-focus{outline:3px solid white!important;outline-offset:5px!important;box-shadow:0 0 0 7px #e2af00a8,0 7px 18px #0006}
.title-footer{position:absolute;left:5.4%;bottom:6.6%;display:flex;gap:18px;align-items:center}
.title-pad-hint{display:flex;gap:14px;margin:0;font-size:clamp(12px,1.25vw,20px);font-weight:850}
.title-pad-hint span{display:flex;align-items:center;gap:6px;border-radius:999px;background:#172132a3;padding:3px 9px 3px 3px}
.title-pad-hint b{display:inline-grid;place-items:center;border-radius:50%;width:1.55em;height:1.55em;background:white;color:#18202a;font-size:1.1em}
.title-key-hint{font-size:clamp(9px,.8vw,13px);color:#e2e6ed;text-shadow:0 1px 4px #000}
.title-hazard{position:absolute;left:0;bottom:0;width:61%;height:2.8%;min-height:12px;background:repeating-linear-gradient(133deg,#ffcf10 0 27px,transparent 28px 58px);mask-image:linear-gradient(90deg,#000 45%,transparent)}
.title-screen .credits-link{bottom:2%;right:2%;background:#0c142675;color:#ecf0f9;z-index:1}
#game:has(.title-screen:not([hidden]))>#sound-controls{display:none}
.title-settings-modal{z-index:40;background:#080d19b8;backdrop-filter:blur(8px)}
.title-settings-panel{position:relative;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:linear-gradient(135deg,#263344,#131c28);border:1px solid #b4c8dc75;border-radius:24px;padding:28px;box-shadow:0 24px 90px #0008}
.title-settings-panel h2{font-size:32px;margin:5px 0 20px}
.title-settings-panel #sound-controls{position:static;display:flex;width:100%;flex-direction:column;align-items:stretch;gap:12px;font-size:14px}
.title-settings-panel #sound-controls>button{font-size:15px;font-weight:800;padding:12px;border-radius:999px}
.title-settings-panel #sound-settings summary{display:none}
.title-settings-panel .sound-panel{position:static;width:100%;padding:15px;background:#0a12236b;border:0;box-shadow:none;max-height:none;border-radius:12px}
.title-settings-panel .sound-panel label{font-size:14px}
.title-settings-panel .sound-panel input{min-height:28px;margin-bottom:12px}
.title-settings-panel #audio-status{text-align:left;font-size:11px;flex-basis:auto;line-height:1.5}
#title-settings-close{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:20px;border-radius:999px;background:#ffda1b;color:#141c24;font-weight:800;padding:12px 18px}
#title-settings-close span{font-size:11px;opacity:.7}
@media(max-width:1000px) and (min-width:700px){.title-lockup{width:61%;left:3%;top:4%}.title-menu{left:5%;width:32%;min-width:250px}.title-action{font-size:clamp(16px,2.2vw,25px)}.title-action.title-start{font-size:clamp(17px,2.3vw,27px)}.title-footer{gap:12px}.title-key-hint{font-size:9px}}
@media(max-width:699px) and (orientation:portrait){.title-lockup{left:2%;top:3%;width:94%}.title-brand{font-size:8px;letter-spacing:.28em;margin-left:16%}.title-menu{top:auto;bottom:15%;left:6%;width:75%;min-width:0;max-width:360px;gap:10px}.title-action{height:7vh;min-height:48px;max-height:65px;font-size:19px;padding:0 12%;gap:20px}.title-action.title-start{height:7.7vh;max-height:70px;min-height:52px;font-size:20px}.title-footer{left:6%;bottom:5.5%;display:block}.title-pad-hint{font-size:12px;gap:12px}.title-key-hint{font-size:9px;margin:6px 0 0}.title-hazard{width:90%;height:2%}.title-screen .credits-link{bottom:3.5%;font-size:9px}}
@media(max-height:570px) and (orientation:landscape){.title-lockup{top:1%;left:4%;width:min(50vw,94vh)}.title-brand{font-size:8px}.title-menu{top:45%;width:31%;left:5%;min-width:220px;max-width:320px;gap:7px}.title-action{height:8.7vh;min-height:30px;font-size:15px;padding:0 12%;gap:16px}.title-action.title-start{height:9.5vh;min-height:34px;font-size:16px}.title-footer{bottom:4.5%;gap:12px}.title-pad-hint{font-size:10px;gap:9px}.title-key-hint{font-size:8px}.title-hazard{min-height:7px}.title-screen .credits-link{font-size:8px}.title-settings-panel{padding:18px}.title-settings-panel h2{font-size:24px;margin-bottom:8px}.title-settings-panel #sound-controls{gap:8px}.title-settings-panel .sound-panel{padding:10px}.title-settings-panel .sound-panel input{margin:0 0 5px}.title-settings-panel .sound-panel p{margin:4px 0}#title-settings-close{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.title-action{transition:none}}
/* Keep every settings control reachable by the pointer on short screens. */
@media(max-height:570px) and (orientation:landscape){.title-settings-panel{width:min(620px,calc(100vw - 32px));padding:14px 18px}.title-settings-panel>.eyebrow{display:none}.title-settings-panel h2{font-size:24px;margin:0 0 10px}.title-settings-panel #sound-controls{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;align-items:start}.title-settings-panel #sound-settings{grid-column:2;grid-row:1 / span 2}.title-settings-panel #sound-controls>button{padding:10px 12px;font-size:14px}.title-settings-panel #audio-status{grid-column:1;align-self:start;line-height:1.5}.title-settings-panel .sound-panel p{display:none}.title-settings-panel .sound-panel label{margin:0}.title-settings-panel .sound-panel input{min-height:25px;margin:0 0 8px}#title-settings-close{margin-top:12px;padding:9px 16px}}

.title-feedback-link{position:absolute;right:2%;bottom:9%;z-index:2;color:#fff;background:#0c1426e8;border:1px solid #899aaa;border-radius:30px;padding:10px 15px;font-size:12px;text-underline-offset:3px}.result-panel .result-feedback-link{display:inline-block;margin-top:12px;color:#ecf0f9;font-size:12px;padding:7px 3px;text-underline-offset:3px}.title-feedback-link:focus-visible,.result-feedback-link:focus-visible{outline:3px solid #ffe061;outline-offset:3px}@media(max-height:570px) and (orientation:landscape){.title-feedback-link{bottom:12%;font-size:11px;padding:8px 12px}}

/* Short landscape results: keep the optional link outside the scrolling result card. */
@media(max-height:570px) and (orientation:landscape){
 .result-panel .result-feedback-link{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));top:auto;margin:0;padding:9px 13px;border:1px solid #899aaa;border-radius:30px;background:#0c1426ed;font-size:11px;line-height:1.5;white-space:nowrap;z-index:3;pointer-events:auto}
}
/* Phone landscape is a short desktop-like result, not a portrait bottom sheet. */
@media(max-width:699px) and (max-height:570px) and (orientation:landscape){
 .result-screen{align-items:center;padding:12px;background:linear-gradient(90deg,#0a1728a6,transparent 80%)}
 .result-screen .result-panel{width:min(380px,60vw);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px 10px;align-items:center}
 .result-panel #result-heading{grid-column:1;grid-row:1;margin:0;font-size:21px;line-height:1.25}
 .result-panel #result-trait{grid-column:2;grid-row:1 / span 2;margin:0;padding:5px 7px;font-size:11px;line-height:1.35}
 .result-panel .result-label{grid-column:1;grid-row:2;margin:0;font-size:10px}
 .result-panel .result-number{grid-column:1;grid-row:3;font-size:29px;line-height:1.2}
 .result-panel #result-details{grid-column:2;grid-row:3;font-size:11px;line-height:1.4;margin:0}
 .result-panel .best-inline{grid-column:1 / -1;grid-row:4;margin:2px 0;padding:6px 0;font-size:10px}
 .result-panel #result-save{grid-column:1 / -1;grid-row:5;margin:0;font-size:9px!important;line-height:1.3}
 .result-panel .menu-buttons{grid-column:1 / -1;grid-row:6;grid-template-columns:1fr 1fr;gap:6px;margin-top:3px}
 .result-panel .menu-buttons button{min-height:32px;padding:7px 6px;font-size:11px;line-height:1.4}
 .result-panel .menu-buttons .primary{grid-column:1 / -1}
}

/* Five explicit actions, including the two-gamepad local match. */
.title-menu{top:49%;gap:1vh}.title-action{height:6.5vh;min-height:40px;font-size:clamp(16px,1.7vw,29px)}.title-action.title-start{height:7.3vh;min-height:44px;font-size:clamp(17px,1.85vw,31px)}.title-versus{border-color:#87dddc;background:linear-gradient(130deg,#27525c,#18313e)}
@media(max-width:699px) and (orientation:portrait){.title-menu{top:auto;bottom:16%;gap:8px}.title-action{height:6.4vh;min-height:43px;font-size:18px}.title-action.title-start{height:6.8vh;min-height:46px;font-size:19px}}
@media(max-height:570px) and (orientation:landscape){.title-menu{top:43%;gap:4px}.title-action{height:8vh;min-height:25px;font-size:14px}.title-action.title-start{height:8.5vh;min-height:28px;font-size:15px}.title-footer{bottom:3.5%}}