/* Poster type stays behind the existing approved player sprite. */
.menu-hero::after {
  content:"\0411\0415\0412\0415\0415\0412";left:12px;right:12px;top:40%;bottom:auto;
  font-size:clamp(68px,8vw,110px);line-height:1;letter-spacing:-.025em;text-align:center;
  color:#a4cbdf14;-webkit-text-stroke:1px #acd2e133;z-index:0;
}
.menu-hero::before {
  opacity:.32;background:radial-gradient(ellipse at 68% 60%,#80c5e632,transparent 52%),
  repeating-linear-gradient(155deg,transparent 0,transparent 45px,#8fb9d117 46px,#8fb9d117 47px);
}
.hero-character {
  transform:translateX(-50%) translate(var(--poster-x,0px),var(--poster-y,0px));
  transition:transform .22s ease-out;
}
.hero-caption { border-left:2px solid #f2c663; }
/* The art tile added a third span: the old second-child rule was styling
   the number instead of the copy. Keep all labels separated and readable. */
.mode-card {
  display:grid;grid-template-columns:56px 20px minmax(0,1fr) 76px;
  transition:border-color .18s ease,background-color .18s ease;
}
.mode-card>span:nth-child(2) { display:block;flex:initial; }
.mode-card>span:nth-child(3) { display:grid;gap:5px;min-width:0; }
.mode-card strong,.mode-card small { display:block;line-height:1.25;overflow-wrap:break-word; }
.mode-card .mode-art { width:56px;height:56px; }
.mode-card>b { min-width:0;white-space:nowrap; }
.mode-card:hover,.mode-card:focus-visible { background-color:#d1e9f008;border-color:#f2c663; }
/* Both charge labels fit the same reserved two-line box. The old longer
   release label increased its height by 10px on desktop and 2px on phones. */
#action { min-height:64px;padding-inline:12px;line-height:1.25; }
/* Holding power must not shift the hit target. The existing pressed shadow
   supplies feedback without its old three-pixel translation. */
#action:active:not(:disabled) { transform:none; }
/* A cue only in the EXISTING visible golden zone, never a new hint in RPL.
   Box shadow does not change the button's dimensions or pointer position. */
#action.is-power-ready {
  outline:2px solid #fff0bc;outline-offset:3px;
  box-shadow:0 0 0 5px #f2c66330,0 0 24px #edc56550,inset 0 1px 0 #fff7d799;
}
.motion-replay-bug {
  position:absolute;left:12px;top:48px;z-index:7;pointer-events:none;
  display:grid;gap:4px;min-width:106px;padding:9px 12px 12px;
  background:#061625eb;border-left:3px solid #f2c663;border-radius:2px;
  box-shadow:0 4px 14px #00101a55;color:#f3ecd8;
}
.motion-replay-bug[hidden] { display:none!important; }
.motion-replay-bug b { font:600 13px Oswald,sans-serif;letter-spacing:2px; }
.motion-replay-bug span { font-size:8px;letter-spacing:1.5px;color:#aac2d1; }
.motion-replay-bug i { position:absolute;bottom:0;left:0;right:0;height:2px;background:#f2c663;transform:scaleX(0);transform-origin:left; }
@media(max-width:700px) {
  .menu-hero::after { top:47%;font-size:clamp(54px,17vw,96px);text-align:left;left:12px; }
  .mode-card { grid-template-columns:44px minmax(0,1fr);column-gap:10px;row-gap:6px; }
  .mode-card .mode-art { width:44px;height:44px;grid-row:1/3; }
  .mode-card>span.mode-number { display:none; }
  .mode-card>span:nth-child(3) { grid-column:2; }
  .mode-card>b { grid-column:2;text-align:left; }
  .motion-replay-bug { top:38px;left:8px;min-width:84px;padding:7px 9px 10px; }
  .motion-replay-bug b { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-character { transform:translateX(-50%);transition:none; }
  .mode-card { transition:none; }
  #action.is-power-ready { box-shadow:none; }
}