/* S00-A arena only. The approved Home styles and markup stay untouched. */
.br-play main.container { max-width: 1120px; padding-top: 12px !important; }
.br-play > header { padding-block: 8px !important; }
.br-play .play-title { font-size: clamp(1.15rem,2.5vw,1.7rem); margin-bottom: 4px; }
.br-play .play-note { font-size: .8rem; color: var(--br-text-muted); margin-bottom: 12px; }
.play-shell { border: 2px solid #73815a; border-radius: 12px; overflow: hidden; background: #162728; box-shadow: 0 5px 0 #05080d; }
.play-hud { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 16px; background: #25372f; font-size: .85rem; }
.play-hud > span { white-space: nowrap; }
.play-hud small { color: var(--br-text-muted); margin-left: 8px; }
.play-hud label { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; width: 55%; font-size: .75rem; }
.play-hud progress { width: 100%; height: 8px; grid-column: 1/-1; accent-color: var(--br-accent-green); }
.play-hud { flex-wrap: wrap; }
.play-energy { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:.75rem; }
.play-energy small { margin:0; }
.play-energy [data-energy-wait] { color:var(--br-gold); }
.play-energy [hidden] { display:none; }
.br-play #game-container { position: relative; height: clamp(280px,41svh,410px); background: #20342f; outline-offset: -4px; touch-action: manipulation; }
.play-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: #20342f; color: var(--br-gold); font-weight: 800; pointer-events: none; }
#game-container[data-booted="true"] .play-loading { display: none; }
.play-controls { padding: 9px 18px 10px; background: linear-gradient(#27382e,#172729); border-top: 1px solid #73815a; }
.play-state { color: var(--br-gold); font-weight: 900; font-size: 1rem; min-height: 24px; }
#play-instruction { margin: 0 0 6px; color: var(--br-text-muted); font-size: .75rem; }
.play-timing-heading { display: flex; justify-content: space-between; font-size: .7rem; }
.play-timing { height: 25px; position: relative; margin: 3px 5px 0; border: 2px solid #05080d; border-radius: 5px; background: #82332d; }
.timing-zone { position: absolute; top: 0; bottom: 0; }
.timing-good { left: 20%; width: 60%; background: #bd8030; }
.timing-great { left: 35%; width: 30%; background: #658f30; }
.timing-perfect { left: 46%; width: 8%; background: #d0ff57; border-inline: 2px solid #fff5b1; }
.timing-marker { position: absolute; z-index: 2; left: 0; top: -5px; bottom: -5px; width: 5px; transform: translateX(-50%); background: white; box-shadow: 0 0 0 2px #05080d; }
.timing-legend { display: flex; justify-content: space-between; margin: 4px 0 7px; font-size: .53rem; color: #d5ddc6; }
.timing-legend strong { color: #ddff73; }
.play-buttons { display: grid; grid-template-columns: 1fr; gap: 6px; }
.play-buttons .br-btn { min-height: 48px; width: 100%; padding: .45rem .5rem; font-size: 1.05rem; }
.play-buttons #reset-wall { font-size: .7rem; width: auto; min-height: 44px; justify-self: end; padding: .4rem .7rem; }
#reset-wall[hidden] { display: none; }
.play-result { padding-top: 8px; min-height: 86px; }
.play-result .result-title { min-height: 22px; margin-bottom: 4px; font-size: .9rem; color: var(--br-gold); }
#result-critical { color: #f6caff; margin-left: 10px; }
.play-result dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0; }
.play-result dt { color: var(--br-text-muted); font-size: .66rem; font-weight: 400; }
.play-result dd { font-size: 1rem; font-weight: 800; margin: 0; }
.play-back { display: inline-flex; align-items: center; min-height: 44px; padding: 8px; margin-top: 5px; }
@media(max-width: 600px) {
 .br-play main.container { padding: 8px 8px 0 !important; }
 .br-play > header { gap: 0 !important; padding-inline: 8px; }
 .br-play > header nav { gap: 6px !important; }
 .br-play > header nav > span { display: none; }
 .br-play #game-container { height: 280px; }
 .play-controls { padding: 8px 10px; }
 .play-hud { padding: 8px 10px; }
 .play-hud label { width: 58%; }
 .play-hud small { display: block; margin-left: 0; }
 .play-buttons .br-btn { font-size: .95rem; }
 .play-result dt { font-size: .6rem; }
}

/* Reserved warning space prevents network status changes from moving the controls. */
.br-play .play-network-feedback { min-height: 3em; margin: 0 0 4px; font-size: .7rem; line-height: 1.5; color: var(--br-text-muted); }
.br-play #timing-diagnostic dl > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* C6 supplemental receipt feedback; core result remains primary. */
.br-play .play-global-wall-feedback { margin:8px 0 0; font-size:.75rem; font-weight:400; color:var(--br-text-muted); overflow-wrap:anywhere; }

/* S05-A: production shell, using the Home HUD/nav and shared arcade tokens.
   Arena coordinates, assets and timing-zone geometry remain unchanged. */
.br-play main.container { max-width: 1320px; padding: 8px 24px 16px !important; }
/* Logo and top HUD inherit Home geometry at every breakpoint.
   The title occupies Home's second status row, to the right of the logo. */
.br-play .play-account { text-decoration: none; }
.br-play .home-genesis .play-heading { grid-template-columns: minmax(0,1fr); }
.br-play .play-title { margin: 0; font-size: 1.3rem; line-height: 1.2; color: var(--br-gold); }
.br-play .play-note { margin: 0; font-size: .8rem; line-height: 1.5; }
.br-play .play-shell { flex-shrink: 0; border: 3px solid var(--br-outline); border-bottom: 0; border-top-color: #7b865c; border-radius: 12px 12px 0 0; background: #101e22; box-shadow: inset 0 2px 0 #b6c08a22; }
/* One continuous frame; navigation remains docked while the arena scrolls. */
.br-play main > .br-bottom-nav { flex-shrink: 0; margin: 0; border: 3px solid var(--br-outline); border-top: 1px solid #7b865c; border-radius: 0 0 10px 10px; }
.br-play #game-status { margin: 0; padding: 8px 10px; background: #101e22; }
.br-play .play-hud { background: linear-gradient(#25362f,#101e22); padding: 12px 18px; font-size: .95rem; }
.br-play .play-hud label { font-size: .85rem; min-width: 0; }
.br-play .play-hud progress { height: 12px; accent-color: var(--br-gold); }
.br-play .play-target { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 7px 18px; font-size: .75rem; color: var(--br-text-muted); background: #10211f; border-top: 1px solid #495958; }
.br-play .play-target strong { color: var(--br-gold); }
.br-play #game-container { height: clamp(280px,38svh,380px); }
.br-play .play-controls { padding: 14px 20px 18px; background: linear-gradient(#25362f,#101e22); border-top: 2px solid #7b865c; }
.br-play .play-state { font-size: 1.1rem; }
.br-play #play-instruction { font-size: .82rem; }
.br-play .play-timing-heading { font-size: .8rem; }
.br-play .play-timing { height: 32px; margin-top: 6px; }
.br-play .timing-legend { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 8px 0; font-size: .72rem; font-weight: 800; }
.br-play .timing-legend > * { text-align: center; word-break: normal; overflow-wrap: normal; }
.br-play .timing-legend > *::before { content: ''; display: inline-block; width: .55em; height: .55em; margin-right: .35em; border: 1px solid #ffffff80; background: var(--zone-color); }
.br-play .legend-miss { --zone-color: #82332d; }
.br-play .legend-good { --zone-color: #bd8030; }
.br-play .legend-great { --zone-color: #658f30; }
.br-play .legend-perfect { --zone-color: #d0ff57; }
.br-play .play-network-feedback { min-height: 3em; font-size: .75rem; }
.br-play .play-buttons .br-btn-primary { min-height: 60px; border-radius: 9px 9px 15px 15px; font-size: clamp(1.3rem,2.5vw,1.85rem); background: linear-gradient(#ffe476,#ffcd3e 40%,#dca321); box-shadow: inset 0 3px 0 #fff4b2,inset 0 -6px 0 #9c691e,0 5px 0 #071012; }
.br-play .play-buttons .br-btn-primary:disabled { background: var(--br-disabled); }
.br-play .play-result { margin-top: 16px; padding: 12px 0 0; border-top: 1px solid #526153; }
.br-play .play-result .result-title { font-size: 1.1rem; }
.br-play .play-result dl > div { min-width: 0; }
.br-play .play-result dt { font-size: .8rem; }
.br-play .play-result dd { font-size: 1.15rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.br-play .br-nav-item { word-break: normal; overflow-wrap: normal; text-decoration: none; }
.br-play .br-nav-item > span:last-child { min-width: 0; }
@media (max-width: 767.98px) {
    .br-play main.container { min-height: 100svh; padding: 4px 8px 8px !important; }
    .br-play main > .br-mobile-dock { position: sticky; bottom: 0; left: auto; right: auto; width: 100%; }
    .br-play .home-genesis .play-heading { padding-left: 116px; }
    .br-play .play-note { font-size: .75rem; }
    .br-play .play-hud { padding: 10px; gap: 10px; }
    .br-play .play-hud > span { white-space: normal; }
    .br-play .play-hud label { width: 58%; font-size: .72rem; gap: 3px 6px; }
    .br-play .play-target { padding: 7px 10px; }
    .br-play #game-container { height: clamp(250px,34svh,310px); }
    .br-play .play-controls { padding: 12px 10px; }
    .br-play .timing-legend { font-size: .65rem; gap: 3px; }
    .br-play .play-result dt { font-size: .7rem; }
    .br-play .play-result dd { font-size: 1rem; }
    .br-play .br-nav-item { min-height: 64px; font-size: .56rem; }
}