/* Supplied 864 x 1536 art is shown intact, including the painted button artwork. */
#menu{padding:0;overflow:hidden;justify-content:center;align-items:center;gap:0;background:#17182f;touch-action:none;isolation:isolate}
#menu:before{content:'';position:absolute;inset:-32px;z-index:-1;background:url('assets/ui/start-screen.png') center/cover no-repeat;filter:blur(22px) brightness(.48);pointer-events:none}
#splashStage{position:relative;flex:none;width:min(100vw,56.25dvh);height:min(177.77778vw,100dvh);max-width:100%;max-height:100%;margin:auto;overflow:hidden}
#splashArt{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none}
.splashHit{position:absolute;display:block;padding:0;border:0;min-height:0;background:transparent;border-radius:16px;box-shadow:none;touch-action:manipulation;color:transparent;cursor:pointer;z-index:2}
.splashHit:active{background:#ffe3a815;box-shadow:inset 0 0 15px #ffe6ae66}
.splashHit:focus-visible{outline:3px solid #ffeba9;outline-offset:-4px}
.splashHit:disabled{cursor:wait;filter:none}
.splashStart{left:18%;top:78.5%;width:64%;height:9.3%}
.splashRank{left:18.5%;top:89%;width:29.5%;height:6.5%}
.splashCharacter{left:50%;top:89%;width:31%;height:6.5%}
.splashSettings{left:87.5%;top:92.3%;width:11%;height:6.5%}
#splashStage #assetStatus{position:absolute;z-index:3;top:75.2%;left:9%;width:82%;min-height:0;margin:0;color:#fff2ca;font-size:11px;text-align:center;text-shadow:0 1px 3px #000}
#splashStage #assetStatus:empty{display:none}
#shell[data-screen="menu"] #soundBtn,#shell[data-screen="menu"] #grain{display:none}
#shell[data-screen="menu"] #game{visibility:hidden}
#characters{background:#101d32e8;touch-action:pan-y}
.characterPanel{width:min(100%,390px);max-height:90dvh;overflow:auto;gap:12px}
.selectedPortrait{width:88px;height:88px;object-fit:contain;justify-self:center;filter:drop-shadow(0 4px 5px #0004)}
.characterPanel .characterPick{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.characterPanel .characterCard{min-height:83px}
.characterPanel .characterCard.secret{min-height:49px}
@media(max-height:650px){.characterPanel{padding:15px;gap:7px}.selectedPortrait{width:64px;height:64px}.characterPanel .characterCard{min-height:65px}.characterPanel .characterCard.secret{min-height:39px}}
/* Score/result UI follows the red lacquer, carved gold and parchment splash. */
#over{background:linear-gradient(#17112666,#201528a6);padding:20px 18px}
#over .panel{position:relative;width:min(100%,370px);max-width:370px;padding:23px 19px 20px;gap:11px;border:3px solid #f3cc81;border-radius:24px;background:linear-gradient(135deg,#fff0cc,#ecd09c 58%,#f8e5ba);box-shadow:0 0 0 3px #79442f,0 0 0 6px #251b2c,0 18px 50px #100b2699,inset 0 0 0 3px #fff4d370;color:#503125;overflow:auto}
#over .eyebrow{font-size:10px;letter-spacing:.14em;color:#8b522b;font-weight:900}
#over h2{font-size:25px;letter-spacing:-.045em;margin:2px -5px 0;padding:12px 9px 14px;border:2px solid #efc271;border-radius:13px;background:linear-gradient(#da5a3b,#9d3031);box-shadow:0 3px #713c30,inset 0 1px #ffdfad;color:#ffedba;text-shadow:0 2px #713326}
#over .resultHero{height:77px;display:grid;place-items:center;margin:0;color:#bd6c2d;font-size:46px;text-shadow:none}
#over .resultHero img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 3px 3px #77472355)}
#over .results{gap:7px}
#over .results>div{padding:11px 3px;border:2px solid #ba8244;border-radius:12px;background:linear-gradient(#fff7de,#f2d39a);box-shadow:inset 0 1px #fff9e9,0 2px #a7743c44;gap:4px}
#over .results small{color:#78502f;font-size:10px;font-weight:800}
#over .results strong{color:#a7372c;font-size:23px;font-weight:1000;text-shadow:0 1px #fff4d8}
#over .record{color:#95512b;font-size:11px;line-height:1.5;min-height:17px;overflow-wrap:anywhere}
#over .personalRecord{font-size:10px;color:#684427;border:1px solid #bf9459;background:#ead0a0;border-radius:10px;padding:8px;line-height:1.5}
#over .goldBtn{border:2px solid #f8da95;background:linear-gradient(#e66b42,#b63b34);color:#fff0c8;box-shadow:0 3px #83402b,0 0 0 1px #a96c38;border-radius:14px;min-height:47px;font-size:17px}
#over .glassBtn{border:2px solid #9b673c;background:linear-gradient(#fff0c7,#e1b77b);color:#5c3826;box-shadow:0 2px #70452d;border-radius:12px;min-height:43px;font-size:13px}
#hud{background:linear-gradient(#3e223cef,#232039cc 67%,transparent);color:#ffe9b4}
#hud .mini{color:#efd095}#hud .big{color:#fff1c8;text-shadow:0 2px #4f2c30}
#hud .circleBtn{background:linear-gradient(#bb5140,#773443);border:2px solid #e6bf7d;color:#ffedbe;border-radius:10px}
#hud .timeRail{border-color:#e8c482;background:#34213b;box-shadow:0 1px #5c382c}
#hud .timeRail>div{background:linear-gradient(90deg,#b43836,#ed9552,#ffe6aa)}
@media(max-height:700px){#over .panel{padding:17px 14px;gap:8px}#over h2{font-size:22px;padding:10px 6px}#over .resultHero{height:58px}#over .resultHero img{width:69px;height:69px}#over .results>div{padding:8px 2px}#over .results strong{font-size:21px}#over .goldBtn{min-height:43px}#over .glassBtn{min-height:40px}}