/* Additive v3.4 store layout. Hero, roster, matches and the 3D world unchanged. */
#tag-store .tag-shop { padding: 30px; }
#tag-store .tag-shop-heading { margin-bottom: 25px; align-items: flex-start; }
#tag-store .tag-shop-heading h3 { margin-top: 9px; }
.tag-shop-subtitle { margin: 10px 0 0; color: var(--muted); font: 400 12px/1.5 var(--body); letter-spacing: .5px; }
#tag-store .tag-shop-body { grid-template-columns: minmax(0,1.5fr) minmax(310px,1fr); gap: 0 28px; grid-template-areas: "scene controls" "scene plans"; align-items: start; }
#tag-store .tag-preview-column { grid-area: scene; }
#tag-store .tag-nickname-controls { grid-area: controls; min-width: 0; border-left: 1px solid var(--line); padding-left: 28px; }
#tag-store .tag-plans-column { grid-area: plans; border-left: 1px solid var(--line); padding-left: 28px; }
#tag-store .tag-player-plate { margin-top: 12px; margin-bottom: 18px; padding: 12px 14px; min-height: 0; }
#tag-store .tag-player-line { margin: 0; gap: 12px; min-height: 32px; }
#tag-store .tag-avatar { flex-basis: 23px; width: 23px; height: 29px; }
#tag-store .tag-name-output { font-size: clamp(19px,1.7vw,27px); line-height: 1.3; }
#tag-store .tag-input-label { margin-bottom: 9px; }
#tag-store .tag-plan-surface { min-height: 94px; padding: 12px 14px 9px; }
#tag-store .tag-plan-price { font-size: 29px; margin-top: 7px; }
#tag-store .tag-order-row { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 14px; }
#tag-store .tag-order-row .button { padding: 15px; min-height: 50px; font-size: 9px; gap: 10px; }
#tag-store .tag-order-summary { margin-top: 8px; }
#tag-store #tag-order-note { margin-top: 7px; }
#tag-store #tag-preview-note { font-size: 10px; margin-top: 8px; }
.tag-game-preview { margin: 0; min-width: 0; }
.tag-game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border: 1px solid var(--line); border-bottom: 0; padding: 0 14px; background: rgba(17,16,13,.55); }
.tag-game-toolbar>span { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-bright); font: 700 9px var(--body); letter-spacing: 1.3px; }
.tag-game-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: #d8b77d; box-shadow: 0 0 8px #ac8649; }
.tag-game-replay { background: none; border: 0; color: var(--muted); font: 600 8px var(--body); letter-spacing: .8px; cursor: pointer; min-height: 44px; padding: 0 2px 0 12px; display: inline-flex; align-items: center; gap: 6px; }
.tag-game-replay>span { font: 18px/1 Arial,sans-serif; }
.tag-game-replay:hover { color: var(--gold-bright); }
.tag-game-stage { position: relative; aspect-ratio: 827 / 540; display: flex; align-items: center; border: 1px solid var(--line); isolation: isolate; background: #201712; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.tag-game-ambient { position: absolute; inset: -28px; z-index: -1; background-position: center; background-size: cover; filter: blur(18px) brightness(.39) saturate(.75); opacity: .9; }
.tag-game-viewport { width: 100%; position: relative; flex: 0 0 100%; container-type: inline-size; }
.tag-game-image { display: block; width: 100%; height: auto; user-select: none; }
.tag-game-preview[data-scene='gameplay'] .tag-game-image { filter: brightness(1.1); }
/* The masks cover the old baked-in feed/name, not any part of the environment. */
.tag-feed-mask, .tag-name-mask { position: absolute; background: #171311; pointer-events: none; }
.tag-feed-mask { left: 4.7%; top: 6.2%; width: 14.3%; height: 6%; }
.tag-name-mask { left: 5.2%; top: 60.4%; width: 9.1%; height: 5%; background: #282422; }
.tag-live-feed { --feed-fit: 1; position: absolute; left: 4.8%; top: 6.35%; display: inline-flex; width: max-content; align-items: center; gap: 7px; gap: 1cqw; color: #f1ebe0; font: 500 12px/1.3 Arial,Helvetica,sans-serif; font-size: clamp(9px,1.7cqw,14px); padding: .35em .55em; background: rgba(23,16,12,.96); border: 1px solid #ba4940; box-shadow: inset 0 0 0 1px rgba(255,80,65,.06),0 2px 7px rgba(0,0,0,.28); transform: scale(var(--feed-fit)); transform-origin: left top; white-space: pre; pointer-events: none; }
.tag-feed-actor { white-space: pre; display: inline-block; }
.tag-live-feed .tag-name-nickname, .tag-game-name .tag-name-nickname { color: #bdcee7; }
.tag-live-feed .tag-name-tag, .tag-live-feed .tag-name-literal, .tag-game-name .tag-name-tag, .tag-game-name .tag-name-literal { color: #e7c786; }
.tag-feed-weapon { width: 2.8em; height: 1.2em; flex: 0 0 2.8em; color: #fff; }
.tag-feed-skull { width: 1em; height: 1em; flex: 0 0 1em; color: #e8e5de; }
.tag-feed-opponent { color: #f0eade; font-size: .95em; }
.tag-game-name { --feed-fit: 1; position: absolute; top: 60.6%; left: 5.1%; font: 500 12px/1.2 Arial,Helvetica,sans-serif; font-size: clamp(9px,1.55cqw,13px); padding: .4em .55em; background: rgba(22,18,16,.96); width: max-content; transform: scale(var(--feed-fit)); transform-origin: left top; white-space: pre; }
[data-scene='sandstone'] .tag-feed-mask { top: 9%; left: 1.6%; width: 29.8%; height: 5.7%; background: #302019; }
[data-scene='sandstone'] .tag-live-feed { top: 9.2%; left: 1.75%; min-width: 29%; padding: .45em .55em; }
[data-scene='sandstone'] .tag-name-mask { top: 50.8%; left: 0; width: 22%; height: 7.4%; background: #312219; }
[data-scene='sandstone'] .tag-game-name { top: 50.8%; left: 0; min-width: 22%; padding: .72em 1em; font-size: clamp(10px,2cqw,17px); background: #312219; }
.tag-game-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(18,17,13,.62); border: 1px solid var(--line); border-top: 0; padding: 0 10px; }
.tag-scene-switch { display: flex; gap: 2px; min-width: 0; }
.tag-scene-switch button { min-height: 44px; padding: 0 9px; font: 700 8px/1.3 var(--body); letter-spacing: .6px; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.tag-scene-switch button[aria-pressed='true'] { color: var(--gold-bright); border-bottom-color: var(--gold); }
.tag-game-map { font: 700 8px var(--body); letter-spacing: 1px; color: #b09b7c; white-space: nowrap; }
.tag-game-caption { margin: 14px 0 0; color: var(--gold-bright); font: 500 10px/1.6 var(--body); }
.tag-game-hint { margin: 5px 0 0; color: var(--muted); max-width: 52ch; font: 400 10px/1.8 var(--body); }
.tag-scene-fallback { position: absolute; bottom: 8%; left: 8%; right: 8%; color: var(--muted); font: 12px/1.6 var(--body); text-align: center; }
.tag-game-stage.scene-error .tag-game-viewport { aspect-ratio: 658/303; }
.tag-game-stage.scene-error .tag-game-ambient { display: none; }
.tag-game-stage.scene-error .tag-feed-mask, .tag-game-stage.scene-error .tag-name-mask { display: none; }
.tag-live-feed.is-replaying { animation: rcb-feed-in .4s ease-out both; }
@keyframes rcb-feed-in { 0% { opacity: .25; translate: -8px 0; } 100% { opacity: 1; translate: 0 0; } }
@media(min-width:1550px) { #tag-store .tag-shop-body { grid-template-columns: minmax(0,1.7fr) minmax(360px,1fr); } }
@media(max-width:1100px) { #tag-store .tag-shop { padding: 24px; } #tag-store .tag-shop-body { gap: 22px; grid-template-columns: minmax(0,1.2fr) minmax(280px,1fr); } #tag-store .tag-plans-column, #tag-store .tag-nickname-controls { padding-left: 22px; } #tag-store .tag-plan-surface { padding: 11px; } #tag-store .tag-plan-price { font-size: 26px; } #tag-store .tag-order-row { grid-template-columns: 1fr; gap: 0; } #tag-store .tag-copy { justify-self: start; min-height: 40px; } }
@media(max-width:850px) { #tag-store .tag-shop-body { grid-template-columns: minmax(0,1fr); grid-template-areas: "controls" "scene" "plans"; gap: 20px; } #tag-store .tag-nickname-controls { padding: 0; border: 0; } #tag-store .tag-player-plate { margin-bottom: 0; } #tag-store .tag-plans-column { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); } #tag-store .tag-game-stage { aspect-ratio: 1.7; } #tag-store .tag-game-preview[data-scene='sandstone'] .tag-game-stage { aspect-ratio: 827/540; } #tag-store .tag-order-row { grid-template-columns: 1fr auto; gap: 16px; } #tag-store .tag-plan-surface { min-height: 96px; padding: 13px 15px; } #tag-store .tag-plan-price { font-size: 30px; } #tag-store .tag-name-output { font-size: 25px; } }
@media(max-width:480px) { #tag-store .tag-shop { padding: 19px 15px; } #tag-store .tag-shop-heading { margin-bottom: 19px; flex-wrap: wrap; gap: 8px; } #tag-store .tag-shop-heading h3 { font-size: 30px; } #tag-store .tag-seller { min-height: 32px; } #tag-store .tag-shop-subtitle { font-size: 11px; } .tag-game-toolbar { padding: 0 9px; } .tag-game-toolbar>span { font-size: 8px; letter-spacing: .7px; } .tag-game-bottom { padding: 0 4px; } .tag-scene-switch button { font-size: 7px; padding: 0 6px; letter-spacing: .3px; } .tag-game-map { font-size: 7px; letter-spacing: .4px; padding-right: 5px; } #tag-store .tag-plan-surface { padding: 12px; } #tag-store .tag-order-row { grid-template-columns: 1fr; gap: 0; } #tag-store .tag-plan-price { font-size: clamp(23px,7.2vw,30px); } .tag-game-hint { font-size: 10px; } }
@media(prefers-reduced-motion:reduce) { .tag-live-feed.is-replaying { animation: none; } }
html.motion-off .tag-live-feed.is-replaying { animation: none; }