/* Pinpoint: responsive arena with fixed category-specific shapes. */
.page-pinpoint{--pp-blue:#79b5eb;--pp-green:#95d5b4;--pp-gold:#ecc478}
.page-pinpoint .pp-preview{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:100%;min-width:0;margin:auto}
.page-pinpoint .pp-stage{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;box-sizing:border-box}
.page-pinpoint .pp-arena{
 position:relative;flex-shrink:0;min-width:0;
 /* Each input category uses one immutable arena shape on all devices.
    The shared server verifier uses the same 1.34 / .82 ratios. */
 width:min(100%,860px,calc((100dvh - 355px)*1.34));
 aspect-ratio:1.34/1;max-width:100%;height:auto;
 background:color-mix(in srgb,var(--surface-soft) 90%,var(--pp-blue) 10%);
 border:1px solid var(--line);border-radius:16px;overflow:hidden;
 user-select:none;-webkit-user-select:none;touch-action:none;
}
/* Both splash and live play use exactly the same responsive arena geometry. */
.page-pinpoint .pp-preview .pp-arena{width:min(100%,860px,calc((100dvh - 355px)*1.34))}
/* Portrait styling is confined to the mobile breakpoint at the end of
   this file. Desktop never inherits a narrow portrait arena from a pointer. */
.page-pinpoint .pp-grid{
 position:absolute;inset:0;pointer-events:none;opacity:.22;
 background-image:linear-gradient(to right,var(--muted) 1px,transparent 1px),
  linear-gradient(to bottom,var(--muted) 1px,transparent 1px);
 background-size:12.5% 12.5%
}
.page-pinpoint .pp-arena:not(.pp-arena-preview){cursor:crosshair}
.page-pinpoint .pp-target{
 display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:10%;aspect-ratio:1/1;border-radius:50%;box-sizing:border-box;pointer-events:none;
 --pp-target-colour:var(--pp-blue);
 /* A WHITE region exactly 19% of the target radius, just like pinpointImpact.
    No inner pseudo-element or physical border shrinks the scoring illustration. */
 border:0;
 background:radial-gradient(circle closest-side at center,
  #ffffff 0 19%,
  color-mix(in srgb,var(--pp-target-colour) 32%,white) 19.15% 41%,
  color-mix(in srgb,var(--pp-target-colour) 87%,white) 41.2% 70%,
  color-mix(in srgb,var(--pp-target-colour) 83%,#263640) 70.2% 100%);
 box-shadow:0 2px 8px #0002,0 0 0 1px color-mix(in srgb,var(--pp-target-colour) 65%,#263640);
}
.page-pinpoint .pp-target[hidden]{display:none!important}
.page-pinpoint .pp-target::before{display:none}
.page-pinpoint .pp-arena[data-round="1"] .pp-target{--pp-target-colour:var(--pp-green)}
.page-pinpoint .pp-arena[data-round="2"] .pp-target{--pp-target-colour:var(--pp-gold)}
.page-pinpoint .pp-target-ghost{background:none;border:2px dashed var(--muted);box-shadow:none;opacity:.25;width:7%}
.page-pinpoint .pp-target-ghost::before{display:none}
/* The stage title and compact HUD follow the same visual rhythm on every
   screen. None of these blocks change the board's aspect-ratio or hitbox. */
.page-pinpoint .pp-round-title{
 margin:0;text-align:center;font-size:clamp(18px,2vw,24px);
 line-height:1.15;font-weight:820;letter-spacing:-.04em;color:var(--text)
}
.page-pinpoint .pp-hud{
 display:flex;align-items:center;justify-content:center;
 gap:clamp(18px,3vw,36px);width:fit-content;max-width:100%;
 margin-inline:auto;text-align:center
}
.page-pinpoint .pp-hud-item{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:55px}
.page-pinpoint .pp-hud-item span{font-size:10px;font-weight:700;color:var(--muted)}
.page-pinpoint .pp-hud-item strong{font-size:21px;font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1.15}
/* Timer sits INSIDE the arena's top border (including ready screens).
   Absolute positioning prevents any board resizing or hit-position shift. */
.page-pinpoint .pp-arena > .pp-timer-rail{
 position:absolute;inset:0 0 auto 0;z-index:6;pointer-events:none;
 width:100%;height:6px;background:color-mix(in srgb,var(--surface) 77%,transparent);
 border-radius:0;overflow:hidden
}
.page-pinpoint .pp-timer-fill{display:block;height:100%;width:100%;background:var(--pp-blue);border-radius:0;transition:none}
.page-pinpoint .pp-arena[data-round="1"] .pp-timer-fill{background:var(--pp-green)}
.page-pinpoint .pp-arena[data-round="2"] .pp-timer-fill{background:var(--pp-gold)}
.page-pinpoint .pp-arena-overlay{
 position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:12px;text-align:center;
 padding:20px;box-sizing:border-box;cursor:pointer;
 background:color-mix(in srgb,var(--surface) 88%,transparent)
}
.page-pinpoint .pp-arena-overlay[hidden]{display:none!important}
.page-pinpoint .pp-intermission{font-size:clamp(24px,5vw,45px);font-weight:830;letter-spacing:-.06em}
.page-pinpoint .pp-helper{text-align:center;margin:0;font-size:11px;color:var(--muted);min-height:18px}
.page-pinpoint .pp-results-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.page-pinpoint .pp-results-stats>div{display:flex;flex-direction:column;gap:3px;min-width:62px;padding:9px;background:var(--surface-soft);border-radius:9px}
.page-pinpoint .pp-results-stats small{font-size:10px;color:var(--muted)}
.page-pinpoint .pp-results-stats strong{font-size:17px;font-variant-numeric:tabular-nums}
/* Feedback is kept entirely inside the board, with no geometry changes. */
.page-pinpoint .pp-arena.pp-hit{animation:pp-hit-feedback .15s ease-out}
@keyframes pp-hit-feedback{50%{border-color:var(--pp-green)}}
.page-pinpoint .pp-arena.pp-missed::after{
 content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
 border:4px solid #e85967;border-radius:inherit;
 background:
  linear-gradient(to right,rgba(236,65,81,.38),transparent 23%,transparent 77%,rgba(236,65,81,.38)),
  linear-gradient(to bottom,rgba(236,65,81,.32),transparent 27%,transparent 73%,rgba(236,65,81,.32));
 box-shadow:inset 0 0 32px rgba(229,55,70,.48),inset 0 0 8px rgba(239,69,86,.76),0 0 13px rgba(226,65,79,.35);
 animation:pp-miss-blast .38s ease-out both;
}
@keyframes pp-miss-blast{
 0%{opacity:0}24%{opacity:1}50%{opacity:.83}100%{opacity:0}
}
/* One floating point number per click: orange-green for 50-99% hits;
   perfect hits glow gold and grow with capped streak size. */
.page-pinpoint .pp-damage{
 position:absolute;z-index:4;pointer-events:none;user-select:none;
 display:flex;flex-direction:column;align-items:center;gap:1px;
 white-space:nowrap;font-variant-numeric:tabular-nums;
 color:hsl(var(--pp-damage-hue,96) 72% 36%);
 font-weight:860;line-height:1;letter-spacing:-.025em;
 transform:translate(-50%,-50%);text-shadow:0 1px 2px var(--surface);
 animation:pp-damage-float .68s cubic-bezier(.18,.65,.22,1) both;
}
.page-pinpoint .pp-damage-number{font-size:clamp(16px,2.4vw,22px);font-weight:850}
.page-pinpoint .pp-damage-miss{color:#db4a58}
.page-pinpoint .pp-damage-perfect{
 color:#ffe677;
 animation:pp-perfect-float .85s cubic-bezier(.15,.63,.3,1) both;
}
.page-pinpoint .pp-damage-perfect .pp-damage-number{
 font-size:var(--pp-perfect-points-size,22.2px);
 line-height:1.1;
 color:#ffe677;
 text-shadow:0 0 3px rgba(255,245,195,.85),
   0 0 10px rgba(232,170,46,.65),0 1px 1px rgba(104,61,8,.5);
 filter:drop-shadow(0 1px 0 rgba(105,68,10,.3));
 transform-origin:center 85%;
 animation:pp-perfect-points-pop .7s cubic-bezier(.16,.82,.24,1) both;
}
@keyframes pp-perfect-points-pop{
 0%{opacity:0;transform:translateY(6px) scale(.58) rotate(-3deg);filter:brightness(1.8)}
 25%{opacity:1;transform:translateY(-3px) scale(1.2) rotate(2deg);filter:brightness(1.3)}
 58%{opacity:1;transform:translateY(0) scale(.99) rotate(0);filter:brightness(1)}
 100%{opacity:1;transform:translateY(-2px) scale(1.04);filter:brightness(1.08)}
}
@keyframes pp-damage-float{
 0%{opacity:0;transform:translate(-50%,-30%) scale(.78)}
 18%{opacity:1;transform:translate(-50%,-66%) scale(1.08)}
 66%{opacity:1}
 100%{opacity:0;transform:translate(-50%,-215%) scale(.96)}
}
@keyframes pp-perfect-float{
 0%{opacity:0;transform:translate(-50%,-34%) scale(.65)}
 23%{opacity:1;transform:translate(-50%,-69%) scale(1.24)}
 50%{opacity:1;transform:translate(-50%,-125%) scale(1.06)}
 100%{opacity:0;transform:translate(-50%,-230%) scale(.94)}
}
.page-pinpoint .pp-arena[data-round="2"] .pp-target{will-change:left,top}
@media(max-width:700px){
 .page-pinpoint .pp-arena,.page-pinpoint .pp-preview .pp-arena{border-radius:12px}
 .page-pinpoint .pp-stage{gap:6px}
 .page-pinpoint .pp-hud-item strong{font-size:17px}
 .page-pinpoint .tg-game-stage-preview{width:100%;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 .page-pinpoint .pp-arena.pp-hit,.page-pinpoint .pp-arena.pp-missed::after,
 .page-pinpoint .pp-damage,.page-pinpoint .pp-damage-perfect,
 .page-pinpoint .pp-damage-perfect .pp-damage-number{
  animation-duration:.45s;animation-iteration-count:1
 }
 .page-pinpoint .pp-damage-perfect .pp-damage-number{color:#ffe677;filter:none}
}

.page-pinpoint .pp-start-error{color:#c76364;font-size:12px;text-align:center;margin:8px auto;min-height:16px}
.page-pinpoint .pp-start-error[hidden]{display:none!important}

/* Keep the board centred inside the shared game's vertically constrained stage,
   even in portrait and without fixed pixel heights. No transform scaling of
   hit coordinates or targets is involved. */
.page-pinpoint .tg-game-stage-preview,
.page-pinpoint .tg-game-play{
 min-width:0;width:100%;max-width:100%
}
.page-pinpoint .pp-target{
 transition:none;
}
@media(max-height:690px){
 .page-pinpoint .pp-arena,
 .page-pinpoint .pp-preview .pp-arena{
  width:min(100%,860px,calc((100dvh - 395px)*1.34));
 }
}

/* Pinpoint round-ready state: prominent title, brief description and
   a small invitation. The first tap only starts the clock. */
.page-pinpoint .pp-round-description{
 display:block;max-width:290px;font-size:13px;line-height:1.45;
 font-weight:550;color:var(--muted)
}
.page-pinpoint .pp-round-start-hint{
 display:block;margin-top:3px;font-size:11px;font-weight:750;
 letter-spacing:.01em;color:var(--text);opacity:.86
}

/* Lightweight inline comparison: results only, no gameplay interruption. */
.page-pinpoint .pp-round-analysis{
 width:100%;max-width:550px;margin:12px auto 0;padding:0 0 2px;
 text-align:left;box-sizing:border-box
}
.page-pinpoint .pp-round-analysis-title{
 font-size:14px;font-weight:790;letter-spacing:-.025em;
 margin:0 0 3px;text-align:center
}
.page-pinpoint .pp-round-legend{
 font-size:10px;line-height:1.4;color:var(--muted);
 text-align:center;margin:0 0 10px
}
.page-pinpoint .pp-round-analysis-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.page-pinpoint .pp-round-card{
 border:1px solid var(--line);border-radius:12px;padding:10px;
 background:var(--surface-soft);min-width:0;box-sizing:border-box
}
.page-pinpoint .pp-round-card-head{
 display:flex;align-items:center;justify-content:space-between;gap:4px;
 margin:0 0 10px;font-size:12px
}
.page-pinpoint .pp-round-points{font-size:11px;color:var(--text);font-variant-numeric:tabular-nums}
.page-pinpoint .pp-round-bar-group{margin:7px 0}
.page-pinpoint .pp-round-bar-label{
 display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;
 color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums
}
.page-pinpoint .pp-round-bar-rail{
 display:block;height:6px;width:100%;background:var(--line);
 border-radius:99px;overflow:hidden
}
.page-pinpoint .pp-round-bar-fill{
 display:block;height:100%;border-radius:inherit;background:var(--pp-blue)
}
.page-pinpoint .pp-round-bar-quality{background:var(--pp-green)}
.page-pinpoint .pp-round-card-detail{
 font-size:10px;line-height:1.45;color:var(--muted);
 margin:8px 0 0;white-space:normal
}
.page-pinpoint .pp-round-card:nth-child(2) .pp-round-bar-hits{background:var(--pp-green)}
.page-pinpoint .pp-round-card:nth-child(3) .pp-round-bar-hits{background:var(--pp-gold)}
@media(max-width:570px){
 .page-pinpoint .pp-round-analysis-list{grid-template-columns:minmax(0,1fr);gap:7px}
 .page-pinpoint .pp-round-card{padding:9px 12px}
 .page-pinpoint .pp-round-card-head{margin-bottom:5px}
 .page-pinpoint .pp-round-bar-group{margin:5px 0}
}
/* Mobile Pinpoint uses a portrait playfield independent of input devices.
   Desktop inherits only the landscape geometry above. */
@media(max-width:700px){
 .page-pinpoint .pp-arena,
 .page-pinpoint .pp-preview .pp-arena,
 body.float-ui .app-shell:not(.admin-mode) .page-pinpoint .pp-arena{
  aspect-ratio:.82/1!important;
  width:min(100%,clamp(310px,calc((100dvh - 330px)*.82),480px))!important;
  height:auto!important;
  max-height:none!important;
 }
}

/* Desktop screens with a shorter usable viewport reserve space for the
   shared game buttons, preview chips and leaderboard/footer. Scale only the
   arena uniformly: target coordinates and its 1.34:1 geometry never change.
   At 1440p+ the original 860px artwork remains completely unchanged. */
@media (min-width:701px) and (min-height:691px) and (max-height:1150px){
 .page-pinpoint .pp-arena,
 .page-pinpoint .pp-preview .pp-arena{
  width:min(100%,770px,calc((100dvh - 390px)*1.34));
 }
}

/* The complete tutorial illustration has one immutable layout.
   Its animated captions never change parent height or reflow the target. */
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"]{
 box-sizing:border-box;
 display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:178px 20px;
 justify-items:center;align-content:center;
 gap:8px;padding:10px 12px;
 width:100%;height:240px;min-height:240px;max-height:240px;
 overflow:hidden;
}

/* Pinpoint help: a tiny non-interactive version of the actual target.
   Uses .pp-target so the scorer-accurate 19% white circle stays identical. */
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-arena{
 position:relative;isolation:isolate;width:min(100%,300px);height:178px;
  min-height:178px;max-height:178px;flex:none;box-sizing:border-box;
 margin-inline:auto;border-radius:13px;overflow:hidden;
 background:linear-gradient(160deg,#222b33,#172329);
 box-shadow:inset 0 0 0 1px #ffffff24;pointer-events:none;
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-arena::before{
 content:'';position:absolute;inset:0;opacity:.18;
 background-image:linear-gradient(#ffffff26 1px,transparent 1px),
  linear-gradient(90deg,#ffffff26 1px,transparent 1px);
 background-size:35px 35px;
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-target{
 width:68px;height:68px;pointer-events:none;
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-aim{
 position:absolute;width:24px;height:24px;transform:translate(-50%,-50%);
 pointer-events:none;filter:drop-shadow(0 0 2px #101820);
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-aim::before,
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-aim::after{
 content:'';position:absolute;background:#ffffff;border-radius:2px;
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-aim::before{
 left:11px;top:0;width:2px;height:24px;
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-aim::after{
 top:11px;left:0;height:2px;width:24px;
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-feedback{
 position:absolute;transform:translate(-50%,-50%);
 font-size:15px;font-weight:850;letter-spacing:-.03em;
 color:#fff9c6;text-shadow:0 1px 5px #0008;pointer-events:none;
}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .pp-help-feedback[hidden]{display:none}
.tg-game-help-dialog .tg-help-art[data-example="pinpoint"] .tg-help-demo-caption{
 display:block;box-sizing:border-box;align-self:center;
 width:100%;height:20px;min-height:20px;max-height:20px;
 overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
 margin:0;text-align:center;line-height:20px;
 font-size:12px;font-weight:700;color:var(--muted);
}


/* Purely decorative hit feedback: absolute and pointer-transparent, no
   measurable target displacement or additional validation work. */
.page-pinpoint .pp-impact-ring{position:absolute;z-index:3;width:48px;height:48px;border:2px solid var(--pp-green);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.32);opacity:0;animation:pp-impact-pop .35s ease-out both;will-change:transform,opacity}
.page-pinpoint .pp-impact-ring.pp-impact-perfect{border-color:var(--pp-gold);box-shadow:0 0 12px color-mix(in srgb,var(--pp-gold) 45%,transparent)}
@keyframes pp-impact-pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:.85}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.page-pinpoint .pp-streak{position:absolute;z-index:5;bottom:13px;right:14px;color:var(--pp-gold);font-size:11px;font-weight:850;letter-spacing:.09em;text-shadow:0 1px 6px #0006;pointer-events:none;user-select:none}
.page-pinpoint .pp-streak[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.page-pinpoint .pp-impact-ring{animation:none;display:none}}