/* 피아노 타일 (pianotiles) — 검은 타일만 밟기 · 2026-09-07 */
#pt-game { --pt-gold:#ffd166; --pt-ink:#0b0b0f; position:relative; width:100%; max-width:100%; margin:18px 0 24px; border-radius:24px; border:1px solid #2a2a33; background:#121217; color:#f4f4f7; box-shadow:0 16px 44px rgba(0,0,0,.28); font-family:inherit; isolation:isolate; overflow:hidden; }
#pt-game *, #pt-game *::before, #pt-game *::after { box-sizing:border-box; }
#pt-game [hidden] { display:none !important; }
#pt-game button { font-family:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#pt-game button:disabled { cursor:default; opacity:.45; }
#pt-game button:focus-visible { outline:3px solid #fff2aa; outline-offset:-3px; }
.pt-top { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:14px 16px 8px; }
.pt-brand { font-size:12px; font-weight:900; letter-spacing:2px; white-space:nowrap; }
.pt-brand small { color:#9a9aa8; font-size:11px; letter-spacing:0; margin-left:6px; }
#pt-songname { color:var(--pt-gold); font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%; }
.pt-tools { display:flex; gap:6px; }
.pt-tools button { min-height:38px; min-width:40px; padding:6px 10px; border:1px solid #3a3a46; border-radius:10px; background:#1c1c24; color:#e6e6ee; font-size:11px; font-weight:800; }
.pt-hud { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 16px 10px; text-align:center; }
.pt-hud>div { padding:8px 3px; border:1px solid #2c2c36; border-radius:12px; background:#1a1a21; }
.pt-hud small { display:block; color:#9a9aa8; font-size:11px; }
.pt-hud strong { display:block; margin-top:3px; font-size:24px; line-height:1.1; font-weight:900; font-variant-numeric:tabular-nums; }
.pt-hud>div:first-child strong { color:var(--pt-gold); }
.pt-hud>div:nth-child(2) strong { color:#8be9fd; font-size:20px; }
.pt-hud>div:last-child strong { color:#c4b5fd; font-size:20px; }
.pt-hud>div.lives strong { color:#ff8fa3; font-size:20px; }
.pt-hud>div.lives strong i { font-style:normal; font-size:14px; margin-right:3px; vertical-align:2px; }
.pt-hud>div.lives.low strong { color:#ef4444; animation:pt-low 1s ease-in-out infinite; }
@keyframes pt-low { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.pt-stage-wrap { padding:0 12px 12px; }
#pt-stage { position:relative; width:100%; max-width:440px; margin:0 auto; height:clamp(420px,68svh,640px); border-radius:16px; overflow:hidden; background:#f8f8f6; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:pointer; box-shadow:inset 0 0 0 1px #2a2a33; }
#pt-stage.is-dead { box-shadow:inset 0 0 0 3px #ef4444; }
#pt-canvas { display:block; width:100%; height:100%; }
#pt-toast { position:absolute; top:22%; left:0; right:0; text-align:center; z-index:3; pointer-events:none; font-size:1.5rem; font-weight:900; letter-spacing:-.5px; opacity:0; text-shadow:0 2px 14px rgba(0,0,0,.45); }
#pt-toast.pop { animation:pt-toast .85s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes pt-toast { 0%{opacity:0; transform:scale(.5);} 25%{opacity:1; transform:scale(1.12);} 70%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1) translateY(-16px);} }
.pt-keys { position:absolute; bottom:8px; left:0; right:0; display:none; justify-content:space-around; padding:0 4px; pointer-events:none; z-index:2; }
#pt-stage.has-keys .pt-keys { display:flex; }
.pt-keys span { width:22%; text-align:center; font-size:11px; font-weight:800; color:#8a8a96; background:rgba(255,255,255,.75); border:1px solid #d5d5d0; border-radius:8px; padding:3px 0; }
/* 오버레이는 무대(#pt-stage)의 둥근 모서리를 스스로도 가진다. backdrop-filter 를 쓰면 크롬이 부모의 overflow:hidden 클리핑을 무시해 모서리에 네모난 배경이 남는다(09-07 밤 보고) — 필터 없이 불투명도만 */
.pt-overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(12,12,17,.94); border-radius:inherit; overflow:auto; }
.pt-panel { width:100%; max-width:380px; text-align:center; }
.pt-eyebrow { display:block; color:var(--pt-gold); letter-spacing:2px; font-size:11px; font-weight:900; }
#pt-game .pt-panel h2 { color:#fff; font-size:24px; line-height:1.35; letter-spacing:-.8px; font-weight:900; margin:10px 0 12px; word-break:keep-all; }
.pt-panel p { font-size:13.5px; line-height:1.75; color:#c4c4d0; margin:10px 0; word-break:keep-all; }
.pt-panel p b { color:#fff; }
.pt-panel p.pt-tip { font-size:12.5px; color:#ffd166; border:1px dashed rgba(255,209,102,.4); border-radius:10px; padding:8px 10px; margin:6px 0 4px; }
.pt-panel p.pt-tip b { color:#fff; }
.pt-demo { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:168px; margin:14px auto 16px; }
.pt-demo i { display:block; height:26px; border-radius:4px; background:#eeeeea; }
.pt-demo i.b { background:#141418; }
.pt-demo i.t { background:#141418; animation:pt-demo-tap 1.6s ease-in-out infinite; }
@keyframes pt-demo-tap { 0%,55% { background:#141418; } 62%,100% { background:#b9bfc6; } }
.pt-songs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:8px 0 14px; }
#pt-game .pt-chip { border:1px solid #3a3a46; padding:6px 10px; border-radius:30px; color:#cfcfda; font-size:11.5px; font-weight:700; background:#1a1a21; min-height:32px; }
#pt-game .pt-chip.on { background:var(--pt-gold); color:var(--pt-ink); border-color:var(--pt-gold); }
.pt-modes { display:grid; gap:8px; margin-top:6px; }
#pt-game .pt-mode { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid #3a3a46; border-radius:14px; background:#1a1a21; color:#fff; text-align:left; min-height:64px; }
#pt-game .pt-mode:hover { border-color:#8b8ba0; }
#pt-game .pt-mode:active { transform:translateY(1px); }
#pt-game .pt-mode.arcade { background:linear-gradient(120deg,#ffd166,#ff9f43); color:var(--pt-ink); border-color:transparent; box-shadow:0 8px 22px rgba(255,159,67,.3); }
.pt-mode .ic { font-size:24px; line-height:1; }
.pt-mode b { display:block; font-size:15px; font-weight:900; }
.pt-mode small { display:block; font-size:11.5px; opacity:.78; margin-top:2px; }
.pt-mode em { margin-left:auto; font-style:normal; font-size:11px; font-weight:800; opacity:.8; white-space:nowrap; }
.pt-subcopy { display:block; color:#9a9aa8; line-height:1.6; font-size:11px; margin-top:12px; }
.pt-big { margin:10px 0 4px; }
.pt-big b { color:var(--pt-gold); font-size:64px; font-weight:900; letter-spacing:-3px; line-height:1.05; font-variant-numeric:tabular-nums; }
.pt-big span { color:#a0a0ae; font-size:13px; margin-left:6px; }
.pt-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:14px 0 18px; }
.pt-stats>div { border:1px solid #3a3a46; border-radius:12px; padding:8px 4px; background:#1a1a21; }
.pt-stats small { display:block; color:#9a9aa8; font-size:10.5px; }
.pt-stats b { display:block; font-size:15px; font-weight:900; margin-top:2px; font-variant-numeric:tabular-nums; }
#pt-game .pt-primary { display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px; width:100%; padding:12px 16px; border:0; border-radius:13px; background:var(--pt-gold); color:var(--pt-ink); font-size:16px; font-weight:900; box-shadow:0 4px 0 #b98a2f; }
#pt-game .pt-primary span { font-size:12px; opacity:.6; }
#pt-game .pt-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #b98a2f; }
#pt-game .pt-secondary { margin-top:10px; padding:11px; width:100%; min-height:44px; background:#1f1f28; color:#dedee8; border:1px solid #3a3a46; border-radius:12px; font-size:13px; font-weight:700; }
.pt-guide { text-align:left; line-height:1.7; }
.pt-guide h3 { font-size:15px; font-weight:800; margin:0 0 6px; }
.pt-guide p { font-size:14px; margin:0 0 6px; }
.pt-guide small { font-size:12px; color:#7c8795; }
.pt-rank-title { font-size:14px; font-weight:800; margin:0 0 8px; text-align:left; }
.pt-rank-title small { font-weight:600; color:#7c8795; font-size:12px; margin-left:6px; }
@media (max-width:520px) {
    #pt-stage { max-width:none; height:clamp(400px,66dvh,620px); border-radius:14px; }
    .pt-hud { gap:5px; margin:0 12px 10px; }
    .pt-hud>div { padding:7px 2px; }
    .pt-hud small { font-size:10px; }
    .pt-hud strong { font-size:18px; }
    .pt-hud>div:nth-child(2) strong, .pt-hud>div:last-child strong, .pt-hud>div.lives strong { font-size:15px; }
    #pt-game .pt-panel h2 { font-size:20px; }
    .pt-big b { font-size:54px; }
    #pt-toast { font-size:1.3rem; }
}
@media (prefers-reduced-motion: reduce) { #pt-toast.pop, .pt-demo i.t { animation:none; } #pt-toast.pop { opacity:1; } }