:root{--bg:#0e1524;--bg-deep:#0a101c;--surface:#182136;--surface-2:#1f2a44;--border:#2b3a5c;--text:#e7ebf4;--text-dim:#9aa8c4;--text-faint:#6b7a99;--hire:#2ecc71;--hire-strong:#27ae60;--reject:#e74c3c;--reject-strong:#c0392b;--gold:#f1c40f;--blue:#5dade2;--red:#e74c3c;--font:system-ui, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;font:16px/1.6 var(--font);color:var(--text);background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}*{box-sizing:border-box}body{background:radial-gradient(1200px 700px at 50% -10%, #1a2740 0%, var(--bg) 55%), var(--bg);min-height:100svh;margin:0}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}h1,h2,h3,p{margin:0}#app{min-height:100svh}.screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100svh;padding:40px 20px;display:flex}.btn-primary,.btn-secondary{border-radius:10px;padding:14px 34px;font-size:17px;font-weight:700;transition:transform .12s,box-shadow .12s,background .15s}.btn-primary{background:linear-gradient(180deg, var(--hire), var(--hire-strong));color:#06230f;box-shadow:0 6px #14532d,0 12px 24px #2ecc7140}.btn-primary:hover{transform:translateY(-2px)}.btn-primary:active{transform:translateY(3px);box-shadow:0 2px #14532d}.btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text-dim)}.btn-secondary:hover{background:var(--surface-2);color:var(--text)}.title-screen{gap:44px}.game-sub{color:var(--text-dim);letter-spacing:.35em;text-transform:uppercase;font-size:13px}.game-title{letter-spacing:.04em;background:linear-gradient(#fff 20%,#b9c6e4 90%);color:#0000;text-shadow:0 0 60px #5dade240;-webkit-background-clip:text;background-clip:text;font-size:clamp(56px,12vw,104px);font-weight:900;line-height:1.1}.tagline{color:var(--text-dim);font-size:20px;font-weight:600}.howto{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:10px;max-width:560px;padding:22px 30px;display:flex;box-shadow:0 18px 40px #00000059}.howto h2{color:var(--text-dim);letter-spacing:.2em;margin-bottom:4px;font-size:15px}.howto p{color:var(--text);font-size:15px}.howto p em{color:var(--gold);font-style:normal;font-weight:700}.howto-keys{justify-content:center;align-items:center;gap:10px;margin:6px 0;display:flex}.key{background:var(--bg-deep);border:1px solid var(--border);min-width:42px;height:42px;color:var(--text);border-bottom-width:3px;border-radius:8px;justify-content:center;align-items:center;padding:0 10px;font-size:18px;font-weight:800;display:inline-flex}.howto-text{color:var(--text-dim);margin-right:14px}.howto-text:last-of-type{margin-right:0}.select-screen{justify-content:flex-start;padding-top:64px}.select-title{letter-spacing:.06em;font-size:40px;font-weight:900}.select-sub{color:var(--text-dim)}.stage-cards{grid-template-columns:repeat(2,minmax(260px,340px));gap:18px;width:100%;max-width:720px;margin:12px 0 8px;display:grid}.stage-card{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex}.stage-card:hover{border-color:#3d5283;transform:translateY(-4px);box-shadow:0 16px 32px #0006}.stage-diff{letter-spacing:.15em;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:800}.diff-easy{color:#7ddb9a;background:#2ecc711f}.diff-normal{color:#8fc0ee;background:#5dade21f}.diff-hard{color:#f09a8f;background:#e74c3c24}.stage-catch{color:var(--text-dim);font-size:14px}.stage-song{color:var(--text-faint);margin-top:6px;font-size:13px}.stage-meta{color:var(--gold);font-size:12px;font-weight:700}.play-scene{background:radial-gradient(900px 600px at 50% 0%, #1c2a48 0%, var(--bg-deep) 70%);-webkit-user-select:none;user-select:none;height:100svh;position:relative;overflow:hidden}.stage-header{z-index:15;background:linear-gradient(#0a101ce6,#0000);justify-content:space-between;align-items:center;padding:14px 22px;display:flex;position:absolute;top:0;left:0;right:0}.stage-info{flex-direction:column;gap:1px;display:flex}.stage-job{font-size:17px;font-weight:800}.stage-song{color:var(--text-dim);font-size:12px}.stage-progress{color:var(--text-dim);font-size:22px;font-weight:800}.stage-progress .judged-count{color:var(--text)}.hud{z-index:15;pointer-events:none;flex-direction:column;align-items:center;gap:2px;display:flex;position:absolute;top:72px;left:0;right:0}.hud-score{align-items:baseline;gap:6px;display:flex}.score-value{letter-spacing:.02em;text-shadow:0 0 24px #5dade259;font-size:44px;font-weight:900}.score-label{color:var(--text-dim);font-size:15px}.hud-combo{align-items:baseline;gap:8px;min-height:26px;display:flex}.combo-value{color:var(--gold);font-size:22px;font-weight:800}.combo-label{color:var(--text-dim);letter-spacing:.15em;font-size:13px}.judge-counts{color:var(--text-dim);gap:14px;font-size:13px;display:flex;position:absolute;top:0;right:22px}.judge-counts .count-perfect b{color:var(--gold)}.judge-counts .count-good b{color:var(--blue)}.judge-counts .count-miss b{color:var(--red)}.lane{z-index:10;border-top:3px solid #5dade28c;position:absolute;bottom:22%;left:0;right:0;box-shadow:0 0 24px #5dade240}.lane-label{letter-spacing:.25em;color:#93b4e2b3;font-size:12px;position:absolute;top:-26px;right:16px}.notes-layer{z-index:5;position:absolute;inset:0}.applicant-card{background:linear-gradient(180deg, var(--surface-2), var(--surface));will-change:transform;border:2px solid #31446e;border-radius:14px;flex-direction:column;align-items:center;gap:2px;width:min(300px,74vw);padding:14px 16px 12px;display:flex;position:absolute;top:0;box-shadow:0 14px 30px #00000080}.card-face{filter:drop-shadow(0 4px 8px #0006);font-size:46px;line-height:1.2}.card-name{letter-spacing:.05em;font-size:17px;font-weight:800}.card-line{color:var(--text-dim);text-align:center;font-size:12.5px;line-height:1.5}.applicant-card.judged{opacity:0;transition:opacity .85s .55s}.applicant-card.judged.correct{border-color:var(--hire);box-shadow:0 0 26px #2ecc718c}.applicant-card.judged.wrong{border-color:var(--reject);box-shadow:0 0 26px #e74c3c8c}.stamp{letter-spacing:.15em;opacity:0;pointer-events:none;background:#0a101c8c;border:6px solid;border-radius:10px;padding:4px 18px;font-size:34px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-14deg)scale(0)}.applicant-card.hire .stamp{color:var(--hire);border-color:var(--hire)}.applicant-card.reject .stamp{color:var(--reject);border-color:var(--reject)}.stamp.show{animation:.4s forwards stamp-in}@keyframes stamp-in{0%{opacity:0;transform:translate(-50%,-50%)rotate(-24deg)scale(1.6)}60%{opacity:1;transform:translate(-50%,-50%)rotate(-8deg)scale(.94)}to{opacity:1;transform:translate(-50%,-50%)rotate(-14deg)scale(1)}}.judge-pop{opacity:0;text-align:center;pointer-events:none;z-index:20;position:absolute;top:32%;left:50%;transform:translate(-50%,-50%)scale(.4)}.judge-pop.show{animation:.85s forwards pop-in}.judge-pop .timing-label{letter-spacing:.1em;font-size:clamp(44px,9vw,84px);font-weight:900;line-height:1.1}.judge-pop .verdict-label{letter-spacing:.35em;margin-top:4px;font-size:clamp(26px,5vw,46px);font-weight:900}.judge-pop.perfect .timing-label{color:var(--gold);text-shadow:0 0 30px #f1c40f99}.judge-pop.good .timing-label{color:var(--blue);text-shadow:0 0 30px #5dade299}.judge-pop.miss .timing-label{color:var(--red);text-shadow:0 0 30px #e74c3c99}.judge-pop.correct .verdict-label{color:var(--hire)}.judge-pop.wrong .verdict-label{color:var(--reject)}@keyframes pop-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}14%{opacity:1;transform:translate(-50%,-50%)scale(1.12)}26%{opacity:1;transform:translate(-50%,-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1.02)}}.countdown{z-index:30;opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;transition:opacity .15s;display:flex;position:absolute;inset:0}.countdown.show{opacity:1}.count-num{color:var(--text);text-shadow:0 0 50px #5dade280;font-size:clamp(96px,20vw,170px);font-weight:900;animation:1s ease-in-out infinite count-pulse}.count-word{color:var(--text-dim);letter-spacing:.3em;font-size:18px}@keyframes count-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(1.08)}}.actions{z-index:25;padding:14px 18px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(#0000,#0a101ceb);justify-content:center;gap:18px;display:flex;position:absolute;bottom:0;left:0;right:0}.btn-action{letter-spacing:.1em;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:12px;max-width:220px;padding:15px 10px;font-size:20px;font-weight:900;transition:transform .1s,box-shadow .1s;display:flex}.btn-action:active{transform:translateY(2px)}.btn-action.pressed{filter:brightness(1.4);transform:translateY(2px)scale(.97);box-shadow:0 2px #00000080}.btn-action .key-hint{background:#00000047;border-radius:7px;justify-content:center;align-items:center;width:30px;height:30px;font-size:15px;font-weight:800;display:inline-flex}.btn-reject{background:linear-gradient(180deg, var(--reject), var(--reject-strong));color:#2a0500;box-shadow:0 6px #6d1a10}.btn-hire{background:linear-gradient(180deg, var(--hire), var(--hire-strong));color:#04170b;box-shadow:0 6px #14532d}.start-overlay{z-index:40;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#080c16c7;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.start-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;flex-direction:column;align-items:center;gap:16px;max-width:480px;padding:34px 40px;display:flex;box-shadow:0 24px 60px #00000080}.start-box h2{font-size:30px;font-weight:900}.start-box p{color:var(--text-dim);font-size:15px}.start-box .start-rules{color:var(--text);font-size:14px}.start-box .start-rules b{color:var(--gold)}.btn-start{background:linear-gradient(180deg, var(--hire), var(--hire-strong));color:#04170b;border-radius:12px;margin-top:8px;padding:16px 44px;font-size:18px;font-weight:900;transition:transform .12s;box-shadow:0 6px #14532d,0 14px 30px #2ecc7140}.btn-start:hover{transform:translateY(-2px)}.btn-start:active{transform:translateY(3px);box-shadow:0 2px #14532d}.result-screen{justify-content:flex-start;gap:20px;max-width:760px;margin:0 auto;padding-top:52px}.result-title{letter-spacing:.08em;font-size:40px;font-weight:900}.result-job{color:var(--text-dim);font-size:16px}.rank-block{background:var(--surface);border:1px solid var(--border);border-radius:18px;flex-direction:column;align-items:center;gap:6px;width:100%;padding:22px 30px;display:flex}.rank-badge{background:radial-gradient(circle at 35% 30%, #f7e28a, var(--gold) 65%);color:#3a2c02;border:4px solid #ffffff8c;border-radius:50%;justify-content:center;align-items:center;width:92px;height:92px;font-size:56px;font-weight:900;display:flex;box-shadow:0 0 34px #f1c40f73}.rank-a .rank-badge{color:#082440;background:radial-gradient(circle at 35% 30%,#bcd8f2,#5dade2 65%);box-shadow:0 0 34px #5dade273}.rank-b .rank-badge{color:#1a2736;background:radial-gradient(circle at 35% 30%,#d8e0ec,#8aa4c4 65%);box-shadow:0 0 30px #8aa4c466}.rank-c .rank-badge{color:#331f06;background:radial-gradient(circle at 35% 30%,#e8c9a2,#c98f4e 65%);box-shadow:0 0 26px #c98f4e66}.rank-d .rank-badge{color:#1f1116;background:radial-gradient(circle at 35% 30%,#a99ba0,#6b5259 65%);box-shadow:0 0 24px #6b525966}.rank-comment{font-size:19px;font-weight:800}.rank-sub{color:var(--text-dim);font-size:14px}.stats-grid{grid-template-columns:repeat(4,1fr);gap:12px;width:100%;display:grid}.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:14px 10px;display:flex}.stat label{color:var(--text-dim);letter-spacing:.1em;font-size:12px}.stat>span{font-size:26px;font-weight:900}.stat .stat-score{color:var(--gold)}.stat .stat-note{color:var(--text-faint);font-size:12px;font-weight:500}.timing-breakdown{gap:16px;font-size:14px;font-weight:700;display:flex}.bd-perfect{color:var(--gold)}.bd-good{color:var(--blue)}.bd-miss{color:var(--red)}.people-list{background:var(--surface);border:1px solid var(--border);text-align:left;border-radius:14px;width:100%;padding:18px 22px}.people-list h3{letter-spacing:.08em;color:var(--text-dim);margin-bottom:12px;font-size:15px}.hired-list h3{color:#7ddb9a}.misjudged-list h3{color:#f09a8f}.chips{flex-wrap:wrap;gap:10px;display:flex}.chip{background:var(--bg-deep);border:1px solid #2ecc7166;border-radius:12px;justify-content:center;align-items:center;width:54px;height:54px;font-size:30px;display:inline-flex}.miss-list{flex-direction:column;gap:10px;display:flex}.miss-item{background:var(--bg-deep);border:1px solid #e74c3c40;border-radius:10px;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 12px;display:flex}.miss-face{font-size:26px}.miss-name{font-size:14px;font-weight:800}.miss-line{color:var(--text-dim);flex:1;min-width:180px;font-size:12.5px}.miss-should{color:var(--red);border:2px solid var(--red);white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:800}.empty-note{color:var(--text-faint);font-size:13px;font-style:italic}.result-actions{flex-wrap:wrap;justify-content:center;gap:14px;padding-top:6px;display:flex}@media (width<=720px){.stage-cards{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.stage-header{padding:12px 14px}.judge-counts{display:none}.hud{top:64px}.score-value{font-size:36px}.applicant-card{width:min(280px,82vw)}.btn-action{max-width:46vw;font-size:18px}}