#park { position: fixed; inset: 0; z-index: 82; display: none; background: #0a0418; color: #f3ecff; font-family: "DIN Condensed", "Arial Narrow", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif; user-select: none; touch-action: none; }
#park.on { display: block; }
#pk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#park small { display: block; font-size: 9px; letter-spacing: .22em; color: #c9b8f0; }
.pk-hud { position: absolute; inset: 0; pointer-events: none; }
.pk-brand { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; gap: 10px; align-items: center; }
.pk-brand .flame { width: 30px; height: 40px; background: radial-gradient(circle at 50% 65%, #fff, #ff8ad8 35%, #7a4dff 75%); clip-path: path("M15 0 C30 18 30 30 15 40 C0 30 0 18 15 0 Z"); filter: drop-shadow(0 0 10px #b48aff); }
.pk-brand b { display: block; font-size: 20px; letter-spacing: .34em; color: #fff; text-shadow: 0 0 14px rgba(170,130,255,.9); }
.pk-oh { display: flex; gap: 6px; align-items: center; } .pk-oh .dia { color: #ffd28a; text-shadow: 0 0 8px #ffb04a; }
.pk-oh small { color: #ffd28a !important; }
.pk-list { margin-top: 8px; }
.pk-list div { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: #e4dcff; letter-spacing: .04em; border-top: 1px solid rgba(155,232,255,.12); }
.pk-list span { width: 14px; height: 14px; display: grid; place-items: center; font-size: 10px; border: 1px solid rgba(155,232,255,.6); color: #0a0418; }
.pk-list .done span { background: #7dffc8; border-color: #7dffc8; } .pk-list .done { color: #9fffd8; }
.pk-list em { margin-left: auto; font-style: normal; font-size: 11px; color: #9be8ff; }
.pk-prof { display: flex; gap: 8px; align-items: center; padding: 4px 12px 4px 4px; background: rgba(16,8,40,.8); border: 1px solid rgba(155,232,255,.35); border-radius: 30px; }
.pk-prof img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 1px solid #ffd8ee; }
.pk-prof b { display: block; font-size: 12px; letter-spacing: .08em; }
.pk-tok.gem { color: #c9a8ff; border-color: rgba(200,160,255,.5); }
.pk-map { position: absolute; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); width: 170px; text-align: center; }
.pk-map canvas { width: 170px; height: 170px; display: block; filter: drop-shadow(0 0 14px rgba(120,180,255,.4)); }
.pk-zone { margin-top: -4px; font-size: 11px; letter-spacing: .2em; color: #fff; text-shadow: 0 0 8px #9be8ff; }
#park.riding .pk-map, #park.riding .pk-brand, #park.riding .pk-prof { display: none; }
#park:not(.touch) .pk-keys { left: 196px; }
#park.touch .pk-map { display: none; }
.pk-obj { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 52px); max-width: min(420px, 62vw); padding: 10px 14px;
  background: linear-gradient(150deg, rgba(40,18,80,.82), rgba(16,8,40,.74)); border: 1px solid rgba(255,150,220,.4); box-shadow: 0 0 24px rgba(200,100,255,.25);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.pk-obj b { display: block; margin-top: 4px; font-size: 16px; letter-spacing: .05em; color: #fff3df; text-shadow: 0 0 10px rgba(255,160,200,.6); }
.pk-obj i { font-style: normal; font-size: 11px; color: #ffd28a; letter-spacing: .1em; }
.pk-right { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); display: flex; gap: 6px; align-items: center; pointer-events: auto; }
.pk-tok { padding: 8px 12px; font-size: 15px; color: #ffd28a; background: rgba(16,8,40,.8); border: 1px solid rgba(255,210,138,.5); text-shadow: 0 0 10px rgba(255,200,120,.7); }
.pk-tok small { display: inline !important; margin-left: 2px; }
.pk-chip, .pk-btn { cursor: pointer; padding: 9px 12px; font-family: inherit; font-weight: 700; font-size: 11px; letter-spacing: .16em; color: #f3ecff; background: rgba(20,10,48,.85); border: 1px solid rgba(200,160,255,.45);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.pk-btn { color: #1a0828; background: linear-gradient(150deg, #ffe0f2, #ff8ac8); border-color: #ffe0f2; box-shadow: 0 0 18px rgba(255,120,200,.45); padding: 12px 16px; font-size: 12px; }
.pk-btn.ghost { color: #f3ecff; background: rgba(20,10,48,.85); border-color: rgba(200,160,255,.45); box-shadow: none; }
.pk-arrow { position: absolute; left: 50%; top: max(84px, calc(env(safe-area-inset-top) + 76px)); font-size: 22px; color: #ffd28a; text-shadow: 0 0 12px #ffb04a; transform-origin: 50% 50%; }
.pk-card { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 24px)); max-height: 56vh; overflow-y: auto; padding: 12px 14px; pointer-events: auto;
  background: linear-gradient(160deg, rgba(36,16,76,.92), rgba(14,7,36,.92)); border: 1px solid rgba(255,170,230,.45); box-shadow: 0 0 30px rgba(190,100,255,.3);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); display: none; }
.pk-card.on { display: block; }
.pk-ct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.pk-ct b { font-size: 18px; letter-spacing: .06em; color: #fff; }
.pk-ct span { font-size: 13px; color: #ffd8ee; }
.pk-ct em { font-style: normal; font-size: 9px; letter-spacing: .18em; padding: 3px 6px; border: 1px solid currentColor; }
.pk-ct em.play { color: #7dffc8; } .pk-ct em.proto { color: #ffd28a; } .pk-ct em.soon, .pk-ct em.gate { color: #9bb8ff; } .pk-ct em.open { color: #ff9ad0; }
.pk-row { padding: 5px 0; border-top: 1px solid rgba(200,160,255,.15); }
.pk-row p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #e4dcff; font-family: "Helvetica Neue", "PingFang TC", sans-serif; }
.pk-card .pk-btn { margin-top: 10px; width: 100%; }
.pk-best { margin-top: 6px; font-size: 11px; color: #ffd28a; letter-spacing: .12em; }
.pk-keys { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 12px; padding: 8px 12px; background: rgba(16,8,40,.72); border: 1px solid rgba(200,160,255,.3); font-size: 10px; letter-spacing: .12em; color: #c9b8f0; }
.pk-keys b { display: inline-block; padding: 3px 6px; margin-right: 4px; color: #fff; border: 1px solid rgba(255,190,230,.5); }
#park.touch .pk-keys { display: none; }
.pk-ride { position: absolute; inset: 0; pointer-events: none; display: none; }
.pk-ride.on { display: block; }
.pk-rstat { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 14px; padding: 8px 14px; background: rgba(16,8,40,.78); border: 1px solid rgba(155,232,255,.45); font-size: 12px; letter-spacing: .14em; white-space: nowrap; }
.pk-rstat b { color: #9be8ff; font-size: 15px; } .pk-rstat span:first-child { color: #ff6a9a; font-size: 16px; } .pk-rstat i { font-style: normal; opacity: .25; }
#park.riding .pk-obj, #park.riding .pk-arrow, #park.riding .pk-tok { display: none; }
.pk-call { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: clamp(20px, 4.4vw, 40px); font-weight: 700; letter-spacing: .12em; color: #fff3df; text-shadow: 0 0 14px #ff6ab8, 0 0 40px #ff4fa3; white-space: nowrap; }
.pk-beat { position: absolute; left: 50%; bottom: max(110px, calc(env(safe-area-inset-bottom) + 100px)); width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; border: 2px solid rgba(255,210,138,.6); display: none; }
.pk-ride.carousel .pk-beat { display: block; }
.pk-beat i { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, #ffe8a0, #ff8ac8 70%, transparent); }
.pk-beat.ok { animation: beatok .3s ease; } .pk-beat.bad { animation: beatbad .4s ease; }
@keyframes beatok { 50% { box-shadow: 0 0 40px #7dffc8; border-color: #7dffc8; } }
@keyframes beatbad { 50% { box-shadow: 0 0 40px #ff4f7a; border-color: #ff4f7a; } }
#park.hitfx #pk-canvas { animation: hitfx .35s ease; }
@keyframes hitfx { 30% { filter: saturate(2) hue-rotate(-30deg) brightness(1.4); transform: translateX(6px); } 60% { transform: translateX(-4px); } }
.pk-touch { position: absolute; inset: 0; pointer-events: none; display: none; }
#park.touch .pk-touch { display: block; }
.pk-stick { position: absolute; left: 0; bottom: 0; width: 50%; height: 45%; pointer-events: auto; }
#park.riding .pk-stick, #park.riding .pk-act { display: none; }
.pk-stick .base { position: absolute; display: none; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 1px solid rgba(255,190,230,.4); background: rgba(40,16,70,.3); }
.pk-stick .knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,220,240,.7), rgba(255,120,200,.35)); }
.pk-act { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; pointer-events: auto; padding: 16px 26px; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: .2em; color: #1a0828; background: linear-gradient(150deg, #ffe0f2, #ff8ac8); border: 1px solid #fff; border-radius: 40px; box-shadow: 0 0 26px rgba(255,120,200,.6); }
.pk-act.on { display: block; }
#park.touch .pk-card { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 70px); max-height: 34vh; }
.pk-rbtn { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: none; justify-content: space-between; padding: 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
#park.touch.riding .pk-rbtn { display: flex; }
.pk-rbtn button { pointer-events: auto; width: 74px; height: 74px; border-radius: 50%; font-size: 26px; color: #fff; background: rgba(40,16,70,.55); border: 1px solid rgba(255,190,230,.55); }
.pk-rbtn button.hit { background: rgba(255,140,210,.45); }
.pk-modal { position: absolute; inset: 0; display: none; place-items: center; padding: 16px; background: rgba(6,2,16,.55); backdrop-filter: blur(3px); z-index: 5; overflow-y: auto; }
.pk-modal.on { display: grid; }
.pk-mcard { width: min(520px, 100%); padding: 18px 20px; background: linear-gradient(160deg, rgba(44,20,92,.96), rgba(16,8,40,.97)); border: 1px solid rgba(255,170,230,.55); box-shadow: 0 0 44px rgba(190,100,255,.45);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.pk-mcard h3 { margin: 8px 0; font-size: 22px; letter-spacing: .08em; color: #fff; text-shadow: 0 0 16px rgba(255,140,220,.7); }
.pk-mcard p { font-size: 14px; line-height: 1.6; color: #e4dcff; font-family: "Helvetica Neue", "PingFang TC", sans-serif; }
.pk-mcard p b { color: #ffd28a; } .pk-mcard .dim { font-size: 12px; opacity: .7; }
.pk-mbtns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pk-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.pk-res > div { padding: 8px; border: 1px solid rgba(200,160,255,.3); background: rgba(0,0,0,.2); }
.pk-res b { font-size: 20px; color: #9be8ff; }
.pk-chaps > div { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(200,160,255,.15); font-size: 13px; }
.pk-chaps b { color: #ffd8ee; letter-spacing: .08em; } .pk-chaps span { color: #e4dcff; font-family: "Helvetica Neue", "PingFang TC", sans-serif; font-size: 12.5px; }
.pk-chaps i { font-style: normal; font-size: 9px; letter-spacing: .18em; color: #9bb8ff; }
.pk-chaps .done i { color: #7dffc8; } .pk-chaps .now i { color: #ffd28a; } .pk-chaps .now { background: rgba(255,210,138,.08); }
@media (max-width: 760px) { .pk-prof, .pk-brand small { display: none; } .pk-brand b { font-size: 15px; } }
@media (max-width: 560px) { .pk-list { display: none; } .pk-tok.gem { display: none; } .pk-res { grid-template-columns: repeat(2, 1fr); } .pk-rstat { gap: 8px; font-size: 10px; padding: 6px 8px; } .pk-rstat b { font-size: 13px; } .pk-obj b { font-size: 14px; } }
@media (max-width: 760px) { .pk-brand div { display: none; } .pk-obj { top: calc(max(10px, env(safe-area-inset-top)) + 50px); max-width: calc(100vw - 24px); } }
#park.riding.carousel-on .pk-rbtn button[data-k="ArrowUp"], #park.riding.carousel-on .pk-rbtn button[data-k="ArrowDown"] { visibility: hidden; }
.pk-drinks { display: grid; gap: 8px; margin: 10px 0; }
.pk-drinks > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 9px 11px; border-radius: 10px; background: rgba(20,10,48,.6); border: 1px solid rgba(200,160,255,.25); }
.pk-drinks b { font-size: 13px; color: #fff; } .pk-drinks span { font-size: 12px; opacity: .85; } .pk-drinks em { font-size: 10px; letter-spacing: .14em; font-style: normal; color: #ffd28a; }
.pk-drinks .pk-btn { grid-column: 2; grid-row: 1 / span 3; padding: 9px 14px; }
.pk-drinks .pk-btn:disabled { opacity: .4; cursor: default; }