.b-gap{grid-column:span 3}.b-arr{grid-column:span 3}
.game{position:relative;margin:18px -6px 0;border-radius:20px;background:var(--ring1);overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.game svg{display:block;width:100%;height:auto;cursor:crosshair;outline:none}
.game svg:focus-visible{box-shadow:inset 0 0 0 3px var(--acc);border-radius:20px}
.game .ret circle{fill:none;stroke:var(--acc);stroke-width:2}
.game .ret .rd{fill:var(--acc);stroke:none}
.game .ret line{stroke:var(--acc);stroke-width:2;stroke-linecap:round}
.game .ret .pulse{transform-box:fill-box;transform-origin:center;animation:tp 1.6s ease-out infinite}
.game .impact{transform-box:fill-box;transform-origin:center;animation:imp .7s ease-out forwards}
@keyframes imp{to{transform:scale(5);opacity:0}}
.game .pop{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:15px;fill:var(--acc);animation:popup 1s ease-out forwards}
.game .pop.m{fill:var(--miss)}
@keyframes popup{0%{transform:translateY(6px);opacity:0}20%{opacity:1}100%{transform:translateY(-26px);opacity:0}}
.game svg.shake{animation:shake .35s}
@keyframes shake{25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-3px)}75%{transform:translate(-2px,1px)}}
.g-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;transition:opacity .4s;animation:bob 3s ease-in-out infinite}
.g-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.g-stats div{border-radius:14px;background:var(--ring1);padding:10px 12px}
.g-stats b{display:block;font-size:20px;letter-spacing:-.02em}
.g-stats span{font-size:11px;color:var(--muted)}
.g-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12px;color:var(--muted)}
.g-foot button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:12px;font-weight:700}
.road{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.road::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.ph-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}
.ph-card .num{position:relative;z-index:1;width:44px;height:44px;margin:-44px 0 14px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--panel);border:2px solid var(--line);color:var(--muted)}
.ph-card.now{border-color:var(--acc)}
.ph-card.now .num{background:var(--acc);border-color:var(--acc);color:var(--onAcc);box-shadow:0 0 0 6px var(--accSoft)}
.ph-card h4{margin:0;font-size:18px}
.ph-card p{margin:6px 0 0;color:var(--sub);font-size:14px;line-height:1.55}
.ph-card .st{display:inline-block;margin-top:12px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:var(--ring1);color:var(--muted)}
.ph-card.now .st{background:var(--accSoft);color:var(--acc)}
.road-wrap{padding-top:22px}
@media (max-width:960px){.b-gap,.b-arr{grid-column:span 6}.road{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.road::before{display:none}}
@media (max-width:520px){.road{grid-template-columns:1fr}.g-stats b{font-size:17px}}
@media (max-width:820px){.sheet.open nav a:nth-child(6){transition-delay:.25s}.sheet nav a{font-size:30px;padding:12px 0}}
main{overflow-x:hidden}@media (max-width:820px){.hero .scene{width:90%}}