/* Standalone expansion modes */
.arcade-hidden { display: none !important; }
.game-container.arcade-active > #game-canvas,
.game-container.arcade-active > #judgment-display { display: none !important; }
.game-container.arcade-active > .game-hud { z-index: 40; }
.arcade-root { position: absolute; inset: 0; z-index: 30; padding: 5.2rem 1rem 1rem; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .65rem; background: radial-gradient(circle at 50% 15%, rgba(102,246,209,.12), transparent 45%), #030b12; color: var(--text-primary); overflow: hidden; }
.arcade-root.hidden { display: none; }
.arcade-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; padding: .55rem .8rem; border: 1px solid rgba(102,246,209,.24); border-radius: 8px; background: rgba(5,18,26,.86); letter-spacing: .08em; }
.arcade-title b { display: block; color: var(--accent-green); font: 800 1.1rem var(--font-display); }
.arcade-title span { display: block; margin-top: .15rem; color: var(--text-secondary); font-size: .65rem; }
.arcade-title > strong { color: var(--accent-yellow); white-space: nowrap; }
.arcade-svg { width: 100%; height: 100%; min-height: 0; border: 1px solid rgba(102,246,209,.18); border-radius: 10px; background: #06121b; }
.arcade-tag { fill: #061017; stroke: none; font: 800 4px var(--font-main); paint-order: stroke; }
.arcade-svg-copy { fill: rgba(234,252,255,.55); font: 2.5px var(--font-main); letter-spacing: .12em; }
.arcade-toast,
.arcade-code-readout,
.finder-input { position: absolute; left: 50%; bottom: 1.7rem; transform: translateX(-50%); z-index: 3; padding: .45rem .8rem; border: 1px solid rgba(102,246,209,.28); border-radius: 999px; background: rgba(3,11,18,.88); color: var(--accent-green); font-weight: 800; letter-spacing: .1em; }
.arcade-code-readout { bottom: 2rem; }
.arcade-pause-card { display: none; position: absolute; inset: 0; z-index: 8; place-items: center; align-content: center; background: rgba(2,8,13,.82); color: var(--accent-yellow); font: 900 2.2rem var(--font-display); letter-spacing: .15em; }
.arcade-pause-card small { display: block; margin-top: .7rem; color: var(--text-primary); font: 600 .75rem var(--font-main); }
.arcade-root.is-paused .arcade-pause-card { display: grid; }


.sniper-scope { filter: drop-shadow(0 0 18px rgba(102,246,209,.12)); }
.sniper-laser { stroke: #ffffff; stroke-width: 1.4; filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 7px rgba(255,255,255,.85)); }
/* Red border that flashes when a shape reaches the core. Opacity + fade duration
   are driven inline from the SNIPER_DAMAGE_FADE_SEC tunable in rangesniperMode.js. */
.sniper-damage-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; border-radius: inherit; box-shadow: inset 0 0 0 5px #ff3355, inset 0 0 34px rgba(255,51,85,.55); }
.sniper-vanish-tag { fill: #eafcff; font: 800 4px var(--font-main); filter: drop-shadow(0 0 4px #66f6d1); }
@keyframes sniperStun { 0%, 100% { filter: brightness(1.5) drop-shadow(0 0 4px #8dd8ff); } 50% { filter: brightness(.8); } }
.sniper-target-stunned { animation: sniperStun .16s ease-in-out infinite alternate; }
.glider-ready { min-width: min(90%, 320px); text-align: center; }
/* The lift-key tag sits above the glider body on the open sky, not on a
   filled shape like the ryder/sniper tags do, so the shared dark .arcade-tag
   fill (#061017) is invisible there. Scoped to this mode only. */
.arcade-rangeglider #glider-plane .arcade-tag { fill: #d4d4d4; }

.finder-input { position: static; transform: none; justify-self: center; margin-top: -.15rem; }
.arcade-rangefinder { grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.finder-board { --finder-columns: 4; --finder-rows: 3; display: grid; grid-template-columns: repeat(var(--finder-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--finder-rows), minmax(0, 1fr)); gap: clamp(2px, .55vw, 8px); width: min(100%, 1120px); height: 100%; min-width: 0; min-height: 0; margin: 0 auto; padding: .15rem; perspective: 900px; overflow: hidden; }
.finder-card { min-width: 0; min-height: 0; overflow: hidden; }
.finder-card-inner { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; transform-style: preserve-3d; transition: transform .32s ease; }
.finder-card.is-flipped .finder-card-inner,
.finder-card.is-matched .finder-card-inner { transform: rotateY(180deg); }
.finder-card-back,
.finder-card-front { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; backface-visibility: hidden; border: 1px solid rgba(102,246,209,.36); border-radius: clamp(2px, .5vw, 7px); background: linear-gradient(145deg,#102b38,#07151d); box-shadow: inset 0 0 14px rgba(102,246,209,.08); }
.finder-card-back span { max-width: 92%; overflow: hidden; color: var(--accent-green); font: 900 clamp(.58rem, 2.8vh, 1.4rem) var(--font-display); letter-spacing: .06em; }
.finder-card-front { transform: rotateY(180deg); background: linear-gradient(145deg,#263b4c,#0c1d29); }
.finder-card-front span { display: block; max-width: 94%; line-height: 1; font-size: clamp(1.1rem, 5.2vh, 3.25rem); filter: drop-shadow(0 0 5px rgba(255,255,255,.14)); }
.finder-board[data-card-count="100"] .finder-card-front span { font-size: clamp(.8rem, 3.8vh, 2.4rem); }
.finder-card.is-matched { opacity: .16; pointer-events: none; }

@media (max-width: 700px) {
    .arcade-root { padding: 4.4rem .45rem .45rem; gap: .35rem; }
    .arcade-title span { display: none; }
    .arcade-title b { font-size: .85rem; }
    .finder-board { gap: 2px; padding: 0; }
    .finder-card-front span { font-size: clamp(1rem, 4.8vh, 2.2rem); }
    .finder-card-back span { font-size: clamp(.5rem, 2.2vh, 1rem); }
}