/* SWARDBOW /play: full-screen arena + HUD. Tokens from shared/base.css; HUD from arena/arena.css. */
html, body { background: var(--meadow); height: 100%; }
body.sw-play { margin: 0; overflow: hidden; font-family: var(--body); color: var(--ink); overscroll-behavior: none; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }
html.nogl #stage, html.static #stage { display: none; }
.play { position: fixed; inset: 0; z-index: 3; }
.play-view { position: absolute; inset: 0; background: transparent; cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; }
html.nogl .play-view, html.static .play-view { background: var(--sky); }
.play-hud { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--nav-h, 64px) + var(--banner-h, 0px)); }
.play-hud .ar-sheet { top: 0; }
.play-static { position: absolute; inset: 0; z-index: 5; }
.play-static .ar-sheet { position: absolute; inset: 0; top: calc(var(--nav-h, 64px) + var(--banner-h, 0px)); }
.play-static[hidden] { display: none; }
html.nogl .play-static, html.static .play-static { display: block !important; }

/* sheets specific to play */
.ar-sheet .standing-you { background: var(--gold-wash, #FBF0C9); border: 2px solid var(--ink); border-radius: 10px; padding: 10px 14px; margin: 8px 0 10px; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.ar-sheet .standing-you b { font-size: 24px; }
.ar-sheet .standing-you small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.ar-sheet .keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; color: var(--muted, var(--dim)); margin: 10px 0 0; }
.ar-sheet .keys b { color: var(--ink); }
.ar-sheet .wallet-line { font-size: 13px; color: var(--dim); margin-top: 6px; word-break: break-all; }
.ar-sheet .opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted, var(--dim)); margin-top: 10px; }
.ar-sheet .opt input { width: 18px; height: 18px; accent-color: var(--wood); }
.ar-sheet .preview-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--gold); color: var(--ink); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.ar-sheet .live-tag { background: var(--bounty); color: var(--chalk); }
.play-hud .spectate { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; background: var(--chalk); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; box-shadow: 4px 4px 0 rgba(30,42,22,.18); pointer-events: auto; font-size: 14px; width: max-content; max-width: calc(100% - 32px); }
.play-hud .spectate b { font-family: var(--display); font-weight: 400; font-size: 20px; }
.play-hud .spectate > span { flex: 1 1 180px; min-width: 0; }
@media (max-width: 720px) { .play-hud .spectate { width: calc(100% - 32px); bottom: 12px; } .play-hud .spectate .ar-btn { width: 100%; } }
.rotate-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--chalk); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; pointer-events: none; display: none; text-align: center; }
@media (max-width: 720px) and (orientation: portrait) { .rotate-hint.show { display: block; } }