:root{--ink:#2a2030;--muted:#806f7e;--pink:#f06491;--pink2:#ff94b5;--paper:#fffafd;--line:#efd8e2;--shadow:0 18px 55px rgba(70,25,50,.12)}*{box-sizing:border-box}html{font-family:Inter,"Noto Sans Thai",system-ui,sans-serif;color:var(--ink);background:#f8eef4}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 5%,#fff 0 9%,transparent 32%),linear-gradient(135deg,#fff9fc,#f4e9f0)}a{color:inherit;text-decoration:none}button{font:inherit}.library-shell{width:min(1120px,calc(100% - 32px));margin:auto;padding:48px 0 64px}.brand-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:.72rem;letter-spacing:.2em;font-weight:900;color:var(--pink)}h1,h2,p{margin-top:0}.brand-header h1{font-size:clamp(2.5rem,7vw,5.5rem);line-height:.9;margin:12px 0}.brand-header p{color:var(--muted)}.admin-link,.play-label{font-weight:800;color:var(--pink)}.admin-link{border:1px solid var(--line);border-radius:99px;padding:12px 18px;background:#fff}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.track-card,.empty-card{background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:28px;padding:14px;box-shadow:var(--shadow)}.track-card{display:flex;gap:18px;align-items:center;transition:.2s}.track-card:hover{transform:translateY(-4px);border-color:var(--pink2)}.track-card img{width:130px;aspect-ratio:1;border-radius:19px;object-fit:cover}.track-card h2{margin:8px 0 4px}.track-card p{font-size:.86rem;color:var(--muted);margin-bottom:14px}.difficulty{font-size:.68rem;letter-spacing:.1em;color:var(--pink);font-weight:900}.empty-card{text-align:center;padding:60px}.empty-card p{color:var(--muted);margin:8px 0 0}
.game-page{background:#160f19;color:#fff}.game-shell{width:min(920px,calc(100% - 30px));margin:auto;padding:18px 0 38px}.game-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-bottom:18px;background:#241827;border:1px solid #3b2a40;border-radius:22px;padding:14px 20px}.game-header>a{color:#ff91b5;font-weight:800}.game-header h1{font-size:1.25rem;margin:0;text-align:center}.game-header p{margin:2px 0 0;text-align:center;font-size:.78rem;color:#aa96aa}.scoreboard{display:flex;justify-content:flex-end;gap:18px}.scoreboard span{font-size:.7rem;color:#b7a6b8}.scoreboard b{display:block;color:#fff;font-size:1rem}.game-grid{display:grid;grid-template-columns:minmax(360px,550px) 220px;gap:18px;align-items:start;justify-content:center}.reveal-panel{grid-column:1}.play-panel{grid-column:1;grid-row:2}.leaderboard{grid-column:2;grid-row:1/span 2;position:sticky;top:18px}.reveal-panel,.play-panel,.leaderboard{background:#241827;border:1px solid #3b2a40;border-radius:26px;padding:14px}.reveal-board{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:18px;background:#332536}.reveal-board>img{width:100%;height:100%;object-fit:cover}.cover-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:3px;background:#fff3;padding:3px}.cover-tile{background:linear-gradient(145deg,var(--pink2),#d9477a);border:1px solid #ffc2d5;box-shadow:inset 0 0 18px #fff4;transform-origin:center;transition:transform .52s cubic-bezier(.7,-.3,.4,1.4),opacity .48s}.cover-tile.broken{transform:translateY(120%) rotate(18deg) scale(.2);opacity:0}.reveal-panel>p{text-align:center;color:#c8b8c7;margin:12px 0 0;font-size:.86rem}.rhythm-stage{height:550px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#19101c,#2c1727);border:1px solid #432c43}.lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}.lane{position:relative;border-right:1px solid #ffffff12}.lane:last-child{border:0}.lane>span{position:absolute;top:15px;left:50%;transform:translateX(-50%);color:#796a7d;font-weight:900}.hit-line{position:absolute;left:0;right:0;bottom:65px;height:5px;background:#fff;box-shadow:0 0 22px var(--pink2)}.note{position:absolute;z-index:2;left:12%;top:0;width:76%;height:54px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#ff97b8,#e64d80);box-shadow:0 8px 20px #e64d8055;font-style:normal;font-weight:900;will-change:transform}.start-overlay{position:absolute;z-index:5;inset:0;display:grid;place-content:center;text-align:center;background:#1c121ed8;transition:.25s}.start-overlay.hidden{opacity:0;pointer-events:none}.start-overlay button{width:210px;aspect-ratio:1;border:0;border-radius:28px;background:linear-gradient(145deg,var(--pink2),var(--pink));color:white;font-weight:900;font-size:1.35rem;box-shadow:0 18px 50px #ef5f9066;cursor:pointer}.start-overlay small{display:block;color:#c9b9c8;margin-top:14px}.hit-visual{position:absolute;z-index:3;left:50%;top:48%;transform:translate(-50%,-50%);width:150px;aspect-ratio:1;display:grid;place-items:center;pointer-events:none}.hit-visual img{width:100%;height:100%;object-fit:cover;border-radius:24px}.hit-visual strong{font-size:5rem;color:#fff3}.hit-visual.pop{animation:pop .28s}.judgement{position:absolute;z-index:4;left:50%;bottom:92px;transform:translateX(-50%) scale(.7);opacity:0;font-weight:1000;font-size:1.6rem;letter-spacing:.07em;transition:.12s}.judgement.show{opacity:1;transform:translateX(-50%) scale(1)}.judgement.perfect{color:#fff}.judgement.great{color:#79e0ff}.judgement.good{color:#ffcf6c}.judgement.miss{color:#ff7590}.key-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.key-controls button{position:relative;min-height:84px;border:1px solid #593c54;border-radius:17px;background:#322135;color:#fff;overflow:hidden;cursor:pointer;transition:.1s}.key-controls img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}.key-controls strong{position:relative;font-size:1.3rem;text-shadow:0 2px 8px #000}.key-controls button.pressed{transform:translateY(4px);border-color:var(--pink2);box-shadow:0 0 18px #f0649188}.leaderboard h2{font-size:1rem}.leaderboard ol{padding-left:24px;margin:0}.leaderboard li{padding:10px 0;border-bottom:1px solid #ffffff10}.leaderboard li b,.leaderboard li span{display:block}.leaderboard li span,.leaderboard>p{font-size:.74rem;color:#ae9dad}dialog{border:0;padding:0;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#100912d9;backdrop-filter:blur(7px)}.result-card{padding:32px;width:min(430px,calc(100vw - 36px));text-align:center}.result-card h2{font-size:1.8rem;margin:8px 0 22px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-stats p{padding:12px 5px;background:#faedf3;border-radius:14px}.result-stats span,.result-stats b{display:block}.result-stats span{font-size:.7rem;color:var(--muted)}.result-actions{display:flex;gap:10px;margin-top:18px}.result-actions>*{flex:1;border:0;border-radius:13px;padding:12px;font-weight:800;background:#eee3e9}.result-actions button{background:var(--pink);color:#fff;cursor:pointer}@keyframes pop{50%{transform:translate(-50%,-50%) scale(1.18) rotate(-3deg)}}
@media(max-width:850px){.game-grid{grid-template-columns:minmax(300px,550px)}.leaderboard{display:none}}@media(max-width:760px){.library-shell{width:min(100% - 20px,560px);padding-top:24px}.brand-header{align-items:start}.brand-header h1{font-size:3.3rem}.track-grid{grid-template-columns:1fr}.track-card img{width:104px}.game-shell{width:100%;padding:0}.game-header{position:sticky;top:0;z-index:10;border-radius:0;padding:10px;grid-template-columns:auto 1fr}.game-header>div:nth-child(2){display:none}.scoreboard{gap:10px}.game-grid{display:flex;flex-direction:column;gap:0}.reveal-panel,.play-panel{width:100%;border-radius:0;padding:8px}.reveal-panel{order:1}.play-panel{order:2}.reveal-board{max-width:550px;margin:auto}.reveal-panel>p{margin:7px}.rhythm-stage{height:58vh;min-height:360px}.key-controls{position:sticky;bottom:0;z-index:8;background:#241827;padding:8px;margin:0 -8px -8px}.key-controls button{min-height:72px}.game-header>a{font-size:.75rem}.scoreboard span{font-size:.58rem}.note{height:46px}}