:root{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#854932;background:#ffe3dc}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#ffe3dc}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible{outline:5px solid #169773;outline-offset:5px}button:hover{filter:brightness(1.05)}button:active{transform:translateY(2px)}[hidden]{display:none!important}.stage{width:1672px;height:941px;position:relative;transform-origin:top left;background:url(assets/background-01.png) center/100% 100%;overflow:hidden}.stage.playing{background-image:url(assets/background-02.png)}.top-art{position:absolute;left:460px;top:43px;width:780px;height:552px;background:url(assets/top.png) -460px -43px/1672px 941px}.mascot{position:absolute;pointer-events:none}.top-mascot{left:704px;top:350px;width:258px}.play-mascot{left:283px;top:488px;width:210px}.sprite{position:absolute;border:0;background-image:url(assets/top.png);background-size:1672px 941px;border-radius:30px}.easy{left:283px;top:595px;width:364px;height:116px;background-position:-283px -595px}.normal{left:661px;top:595px;width:350px;height:116px;background-position:-661px -595px}.challenge{left:1023px;top:595px;width:381px;height:117px;background-position:-1023px -595px}.sprite[aria-pressed=true]{box-shadow:0 0 0 4px #29bc89,0 0 0 8px #fff}.start{left:561px;top:723px;width:549px;height:86px;background-position:-561px -723px;border-radius:50px}.how{left:593px;top:822px;width:229px;height:54px;background-position:-593px -822px}.ranking{left:847px;top:822px;width:232px;height:54px;background-position:-847px -822px}.control{position:absolute;border:2px solid #fff;border-radius:32px;background:#fffaf8;color:#98543d;height:55px;font-size:19px;font-weight:700;box-shadow:0 3px 8px #d3948050}.sound{left:1426px;top:17px;width:139px}.pause{left:1186px;top:87px;width:140px;border-color:#ff97ad}.home{left:1335px;top:87px;width:140px}.level{position:absolute;left:263px;top:102px;width:172px;height:51px;display:grid;place-items:center;background:#e3f9eb;border:3px solid white;border-radius:30px;color:#099b65;font-size:25px;font-weight:900}.number{position:absolute;top:201px;width:172px;text-align:center;font-size:59px;font-weight:900;background:#fff8f1;border-radius:16px;line-height:1.12}.time{left:416px;color:#ff6273}.score{left:788px;color:#efad43}.combo{left:1162px;color:#9964d6;background:#f8f0fc}.prompt{position:absolute;left:539px;top:356px;width:650px;text-align:center}.prompt h1{background:#fffcfa;border-radius:25px;color:#713820;font-size:47px;line-height:1.35;margin:0;min-height:67px;padding:4px 10px}.prompt p{margin:0}.prompt #reading{background:#fffcfa;color:#918680;font-size:23px;padding:7px}.prompt #romaji{background:#fffcfa;color:#918680;font:700 30px/1.5 ui-monospace,monospace;letter-spacing:2px;padding:5px 8px;min-height:56px;overflow-wrap:anywhere}.typed{color:#10a77b}.prompt input{margin-top:15px;width:100%;height:74px;border:3px solid #f75277;border-radius:20px;box-shadow:inset 0 0 0 6px #fff;background:#fff9f8;padding:12px 27px;font-size:25px;color:#854932}.prompt input:focus{outline:4px solid #ffb6c5}.prompt #feedback{font-size:17px;color:#d4486b;background:#fff9f5;border-radius:10px;min-height:23px;margin:4px 30px}.power-track{position:absolute;left:420px;top:733px;width:780px;height:31px;border-radius:30px;background:#ffe6dc;overflow:hidden}.power-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff658b,#ffd176);transition:width .15s}#percent{position:absolute;left:1234px;top:713px;width:94px;text-align:center;background:#ffe9e8;font-size:49px;font-weight:900;color:#fa5873}.power-note{position:absolute;left:452px;top:781px;margin:0;background:#ffebe3;font-size:17px;width:740px;text-align:center}dialog{position:absolute;inset:0;margin:auto;width:1040px;max-width:none;max-height:90%;border:4px solid white;border-radius:36px;padding:46px 45px;background:linear-gradient(140deg,#fff8f4,#ffe7ed);color:#854932;box-shadow:0 20px 70px #77433865}dialog::backdrop{background:#68443870;backdrop-filter:blur(4px)}.close{position:absolute;right:22px;top:18px;width:64px;height:64px;background:#fff4f5;border:2px solid #ffd3dc;border-radius:25px;color:#985647;font-size:43px}dialog h2{color:#f85775;text-align:center;font-size:43px;margin:15px 0 25px}dialog p{font-size:24px;line-height:1.8;text-align:center}.action{display:block;margin:22px auto 0;border:3px solid white;border-radius:40px;background:linear-gradient(#ff8da1,#fa5d7c);padding:16px 45px;font-size:25px;font-weight:800;color:white}.result-score{font-size:72px;color:#fa5873;text-align:center;font-weight:900}.rank-note{font-size:20px!important}.rank-row{display:grid;grid-template-columns:90px 155px 220px 1fr;gap:15px;align-items:center;margin:12px 0;padding:19px 22px;background:#fffaf7;border:2px solid white;border-radius:25px;font-size:24px}.rank-row:first-child{border:3px solid #ffc856;background:#fff7dd}.rank-row strong{color:#fa5576;font-size:39px}.rank-row time{font-size:19px;text-align:right;color:#a77c6b}.badge{border-radius:26px;padding:9px;text-align:center;background:#ddf9e6;color:#089864;font-size:21px;font-weight:800}.badge.normal{position:static;width:auto;height:auto;background:#fff2cc;color:#eea02b}.badge.challenge{position:static;width:auto;height:auto;background:#ffe1eb;color:#ec537d}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}@media(max-width:700px){body{display:block}.stage{transform:none!important;width:100%;height:auto;min-height:100svh;background-size:auto 100%;background-position:center}.top-art{left:0;top:85px;width:100%;height:360px;background-position:center;background-size:640px auto}.top-mascot{display:none}.sound{left:auto;right:12px;top:15px;width:110px;height:44px;font-size:16px}.choices{position:relative;padding:455px 20px 0;display:grid;gap:13px}.sprite{position:static;background:none!important;width:100%;height:auto;min-height:66px;border:3px solid white;font-size:20px;font-weight:900;color:#139965;background:#def9e6!important}.sprite:after{content:attr(aria-label);display:block;padding:15px 10px;font-size:17px}.normal{background:#fff1c8!important;color:#d58719}.challenge{background:#ffe0e9!important;color:#ec5478}.start{margin:22px 5%;width:90%;background:#ff718d!important;color:white}.how,.ranking{display:inline-block;width:42%;margin:0 3% 25px;background:#fff9f5!important;color:#98543d;min-height:50px}.level{position:relative;left:15px;top:85px;width:145px;font-size:20px}.pause,.home{top:145px;height:44px;font-size:16px}.pause{left:15px;width:140px}.home{left:auto;right:15px;width:140px}.number{top:218px;width:29%;font-size:40px;padding:25px 0 10px}.number:before{content:attr(aria-label);position:absolute;top:3px;left:0;width:100%;font-size:15px}.time{left:3%}.score{left:35%}.combo{left:67%}.prompt{position:relative;left:0;top:245px;width:94%;margin:0 3%;padding:22px 12px;background:#fffbf7;border:3px solid white;border-radius:30px}.prompt:before{content:'自分のペースで、楽しもう！';color:#fa5873;font-size:16px}.prompt h1{font-size:28px;margin-top:16px}.prompt #romaji{font-size:20px}.prompt #reading{font-size:18px}.prompt input{font-size:17px;height:62px}.play-mascot{display:none}.power-track{position:relative;top:270px;left:5%;width:75%;height:24px}.power-note{position:relative;top:288px;left:5%;width:90%;font-size:15px;padding:10px;border-radius:15px}#percent{position:relative;display:block;left:82%;top:240px;width:16%;font-size:25px}#play{min-height:850px}dialog{position:fixed;width:94%;max-height:85svh;padding:55px 17px 25px;border-radius:28px;overflow:auto}dialog h2{font-size:27px}dialog p{font-size:17px}.close{width:42px;height:42px;font-size:28px;top:10px;right:10px}.rank-row{grid-template-columns:35px 65px 1fr;gap:8px;padding:12px 8px;font-size:17px}.rank-row strong{font-size:25px}.rank-row time{grid-column:2/4;text-align:left;font-size:14px}.badge{font-size:14px}.action{font-size:19px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Final layout adjustments after visual verification. */
.top-mascot{display:none}.top-art{mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.prompt{top:355px}.prompt h1{height:72px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:44px;line-height:1.2}.prompt #reading{height:48px}.prompt #romaji{height:52px;padding:0 8px}.prompt input{margin-top:0}.prompt #feedback{font-size:16px}
@media(max-width:700px){.stage,.stage.playing{background:linear-gradient(160deg,#dff4ff 0%,#fff4e8 44%,#ffdae5 100%)}.top-art{top:80px;left:0;width:100%;height:330px;background-size:900px 506px;background-position:center -15px;mask-image:linear-gradient(#000 85%,transparent)}.choices{padding-top:405px}.prompt{top:245px}.prompt h1{height:auto;min-height:72px;font-size:28px;line-height:1.4}.prompt #reading,.prompt #romaji{height:auto;min-height:45px}.prompt input{margin-top:12px}}