/* Aiming scene: stage background, reticle layer, dart states, impact. Layer order inside .game-stage
   (isolated stacking context): architectural background (-2) -> host (0) -> board with its one soft shadow, reticle
   and dart (2) -> round figures (3). No dimming overlay: the stage is the light room of the reference. */

/* ---- stage background: one decorative pseudo-element, never focusable or clickable; fades into the white card ---- */
.game-stage{isolation:isolate}
.game-stage:before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:#fffdfa url(assets/stage/stage-white-1729.webp) 50% 50%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 92%,transparent 100%)}
@media (max-width:760px){
  .game-stage:before{background-image:url(assets/stage/stage-white-960.webp);background-position:86% 100%}
  .game-card .game-stage .round-summary{padding:14px 12px 4px;margin-top:6px}}
@media (max-width:370px){.game-card .game-stage .round-summary{padding:12px 9px 2px;gap:4px 6px}.game-card .game-stage .timer{min-width:90px;font-size:19px;padding:8px 9px;gap:5px}}
/* names inside the sectors are too small to read on a phone-sized board: avatars and shares stay */
@media (max-width:760px){#dartboard .sector-name{display:none}}

/* ---- board material (drawn by drawBoard in app.js) --------------------------------------------------------------- */
#dartboard .board-fibre{mix-blend-mode:overlay;opacity:.55}
#dartboard .board-fibre-dark{mix-blend-mode:multiply;opacity:.42}
#dartboard .divider-shadow line{stroke:#1d140c;stroke-opacity:.32;stroke-width:2.6px;vector-effect:non-scaling-stroke;transform:translate(.45px,.55px)}
#dartboard .divider-metal line{stroke:#ece8df;stroke-opacity:.92;stroke-width:1.15px;vector-effect:non-scaling-stroke}

/* ---- reticle layer: same box and rotation as #dartboard, so board coordinates match exactly --------------------- */
#aim-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;transform:rotate(var(--board-rot,0deg));animation:board-arrive .8s var(--ease) both;visibility:hidden}
#aim-layer.is-on{visibility:visible}
#aim-layer .aim-reticle .r-shadow{fill:none;stroke:#1b120a;stroke-opacity:.28;stroke-width:4.5}
#aim-layer .aim-reticle .r-outer{fill:#ff6b1f1f;stroke:#fff;stroke-width:3}
#aim-layer .aim-reticle .r-inner{fill:none;stroke:#ff6a1c;stroke-width:2.6}
#aim-layer .aim-reticle .r-ticks{stroke:#fff;stroke-width:2.4;stroke-linecap:round}
#aim-layer .aim-reticle .r-dot{fill:#fff;stroke:#ff6a1c;stroke-width:1}
#aim-layer .aim-reticle.is-locked .r-inner{stroke:#ff4d00}
#aim-layer .aim-trail path{fill:none;stroke:#ffb37a;stroke-linecap:round}
#aim-layer .aim-pulse{fill:none;stroke:#fff}
/* winner: thin amber edge of the one winning sector with a soft local glow, and a small ring at the hit point */
#aim-layer .aim-highlight{fill:#ffb347;fill-opacity:.03;stroke:#ffd27a;stroke-width:2.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round;filter:drop-shadow(0 0 2px #ffae3d) drop-shadow(0 0 6px #ff8a1c)}
#aim-layer .aim-hit{fill:none;stroke:#ffd27a;stroke-width:2.2px;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #ffae3d) drop-shadow(0 0 5px #ff8a1c)}

/* ---- dart: one owner (aim-scene.js) sets the state; the tip is the transform origin ----------------------------- */
#dart.is-flying{opacity:1;animation:none;filter:drop-shadow(3px 5px 2px #0004)}
#dart.at-rest{opacity:1;transform:rotate(27deg)}
#dart.at-rest.impact{animation:dart-impact .36s cubic-bezier(.3,.7,.4,1) both}
@keyframes dart-impact{0%{transform:rotate(27deg) translate(0,-3%)}30%{transform:rotate(31deg)}62%{transform:rotate(25.5deg)}100%{transform:rotate(27deg)}}

.round-banner.aiming{background:linear-gradient(100deg,#fff0e3,#fff7f0 50%,#fff0e3)}
.phase-badge.aiming{background:#fff2e4;color:#f06a28}

@media (prefers-reduced-motion:reduce){#aim-layer{animation:none}#dart.at-rest.impact{animation:none}}