/* Golden Keys piano game: navy + bright gold grand. No white backgrounds. */
.pk-titlerow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.pk-titlerow h1{margin:.2rem 0}
.pk-howb{font:inherit;font-size:.95rem;font-weight:700;color:#FFD54F;background:rgba(2,31,84,.7);border:1.5px solid rgba(255,199,44,.6);border-radius:999px;padding:.35rem .8rem;cursor:pointer;min-height:40px}
.pk-howb span{display:inline-grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:#FFC72C;color:#021F54;font-weight:900}
.g-stage.pk-stage{padding:0;overflow:hidden;border:2px solid rgba(255,199,44,.55);background:radial-gradient(120% 80% at 50% 0%,#12306e 0%,#061a44 45%,#020b24 100%);height:clamp(460px,calc(100svh - 150px),880px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:#fff4d6}
.g-play.is-full .g-stage.pk-stage{height:var(--maxh,calc(100svh - 70px));border-radius:0}
@media (orientation:landscape) and (max-height:520px){.g-stage.pk-stage{height:calc(100svh - 12px);min-height:300px}}
.pk-cv{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.pk-cv:focus-visible{box-shadow:inset 0 0 0 3px #FFD54F}
.pk-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:.5rem;padding:.55rem .6rem 0;pointer-events:none;z-index:2}
.pk-stage[data-mode=pick] .pk-hud,.pk-stage[data-mode=free] .pk-hud{display:none}
.pk-prog{position:absolute;left:0;right:0;top:0;height:5px;background:rgba(255,199,44,.15)}
.pk-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b8860b,#FFD54F);transform-origin:0 50%}
.pk-hl{flex:1;min-width:0;display:flex;flex-direction:column;text-shadow:0 2px 6px #000}
.pk-hl b{font-size:1.05rem;color:#FFD54F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-hl small{font-size:.8rem;opacity:.85}
.pk-hs{text-align:right;display:flex;flex-direction:column;text-shadow:0 2px 6px #000}
.pk-hs b{font-size:1.5rem;color:#FFE08A;font-variant-numeric:tabular-nums;line-height:1.1}
.pk-hs small{font-size:.9rem;color:#9fd0ff;font-weight:800;min-height:1.1em}
.pk-hb{pointer-events:auto}
.pk-ib{font:inherit;min-width:46px;min-height:46px;border-radius:14px;border:1.5px solid rgba(255,199,44,.7);background:rgba(2,15,45,.75);color:#FFD54F;font-size:1.05rem;font-weight:900;cursor:pointer}
.pk-ib:active{transform:scale(.95)}
.pk-judge{position:absolute;left:0;right:0;top:30%;margin:0;text-align:center;font-size:clamp(1.4rem,4.5vw,2.4rem);font-weight:900;color:#FFD54F;text-shadow:0 0 18px rgba(255,199,44,.7),0 3px 0 #5a3d00;pointer-events:none;opacity:0;z-index:2;transition:opacity .35s}
.pk-judge.on{opacity:1;transition:none;animation:pk-pop .3s ease-out}
.pk-judge.miss{color:#ff8a8a;text-shadow:0 2px 0 #400}
@keyframes pk-pop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.pk-fp{position:absolute;left:50%;top:.6rem;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;z-index:3;background:rgba(2,15,45,.7);border:1px solid rgba(255,199,44,.4);border-radius:16px;padding:.3rem .5rem}
.pk-fp b{color:#FFD54F;min-width:2.6em;text-align:center}
.pk-fp .btn{min-height:44px;padding:.3rem .8rem}
.pk-sheet{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:.55rem;padding:.8rem;background:linear-gradient(180deg,rgba(3,16,48,.94),rgba(2,10,32,.97));color:#fff4d6;overflow:auto;overscroll-behavior:contain}
.pk-sheet[hidden]{display:none}
.pk-how,.pk-buy,.pk-pause,.pk-end{align-items:center;justify-content:center;text-align:center}
.pk-title{margin:0;font-size:1.45rem;font-weight:900;color:#FFD54F}
.pk-phead{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pk-pill{background:rgba(255,199,44,.14);border:1px solid rgba(255,199,44,.5);border-radius:999px;padding:.25rem .7rem;font-weight:800;color:#FFE08A;white-space:nowrap}
.pk-diffs{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.pk-diffs button,.pk-genres button{font:inherit;font-weight:800;cursor:pointer;border-radius:12px;border:1.5px solid rgba(255,199,44,.45);background:rgba(10,35,90,.8);color:#fff4d6;min-height:44px;padding:.25rem .5rem}
.pk-diffs button[aria-checked=true],.pk-genres button[aria-pressed=true]{background:linear-gradient(180deg,#FFD54F,#d9a514);color:#021F54;border-color:#FFE08A}
.pk-genres{display:flex;gap:.35rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:thin;flex:0 0 auto}
.pk-genres button{flex:0 0 auto;border-radius:999px;min-height:40px;padding:.2rem .85rem}
.pk-list{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.45rem;align-content:start;padding:.1rem}
.pk-song{font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;min-height:62px;border-radius:14px;border:1.5px solid rgba(255,199,44,.35);background:linear-gradient(135deg,rgba(18,48,110,.9),rgba(6,24,64,.95));color:#fff4d6;padding:.45rem .6rem}
.pk-song:hover,.pk-song:focus-visible{border-color:#FFD54F;outline:none;box-shadow:0 0 0 2px rgba(255,213,79,.4)}
.pk-song .pk-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;background:rgba(255,199,44,.15);border:1px solid rgba(255,199,44,.4)}
.pk-song b{display:block;font-size:1rem;line-height:1.2}
.pk-song small{display:block;font-size:.8rem;opacity:.8}
.pk-song .pk-st{color:#FFD54F;font-size:.95rem;letter-spacing:1px;white-space:nowrap;text-align:right}
.pk-song .pk-st em{font-style:normal;opacity:.3}
.pk-song.lock{border-style:dashed}
.pk-song .pk-cost{color:#FFE08A;font-weight:900;white-space:nowrap}
.pk-tag{display:inline-block;font-size:.7rem;font-weight:900;color:#021F54;background:#FFD54F;border-radius:6px;padding:0 .35rem;margin-left:.3rem;vertical-align:middle}
.pk-pfoot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pk-count{font-size:.85rem;opacity:.8}
.pk-stars{margin:0;font-size:clamp(2.2rem,8vw,3.4rem);letter-spacing:.2em;color:#FFD54F;text-shadow:0 0 22px rgba(255,199,44,.6)}
.pk-stars em{font-style:normal;color:rgba(255,213,79,.22);text-shadow:none}
.pk-etitle{margin:0;font-size:1.6rem;font-weight:900;color:#FFE08A}
.pk-escore{margin:0;font-size:2.1rem;font-weight:900;color:#fff4d6;font-variant-numeric:tabular-nums}
.pk-estats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);gap:.2rem 1.2rem;font-size:.95rem}
.pk-estats b{color:#FFD54F}
.pk-ecoins{margin:0;font-weight:800;color:#FFE08A;min-height:1.3em}
.pk-ebtns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.pk-ebtns .btn{min-height:50px;min-width:140px}
.pk-steps{text-align:left;margin:0;padding-left:1.3rem;font-size:1.05rem;line-height:1.6}
.pk-note{font-size:.85rem;opacity:.8;margin:0}
@media (max-width:560px){.pk-list{grid-template-columns:1fr}.pk-diffs button{font-size:.85rem;padding:.2rem}.pk-sheet{padding:.6rem}}
@media (orientation:landscape) and (max-height:520px){.pk-sheet{padding:.45rem .7rem;gap:.35rem}.pk-title{font-size:1.15rem}.pk-list{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.pk-song{min-height:50px}.pk-diffs button,.pk-genres button{min-height:38px}}
@media (prefers-reduced-motion:reduce){.pk-judge.on{animation:none}}
.pk-list{grid-auto-rows:minmax(62px,max-content)}
.pk-song{height:auto;min-width:0;width:100%;margin:0;white-space:normal}
.pk-song>span:nth-child(2){min-width:0}
.pk-song b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-song small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pk-song b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-escore{font-size:1.7rem}
@media (max-width:560px){.pk-list{grid-template-columns:1fr}.pk-estats{grid-template-columns:repeat(2,auto)}}