/* Kriegsspiel: the living battle arena (cards-arena.js). Everything here sits inside .kc-tablewrap, under the board
   rows, and takes no pointer. Layers move by transform only (parallax); the canvases are cached and pixelated. */
.kc-arena-scene { position: absolute; inset: 0; overflow: hidden; overflow: clip; border-radius: 6px; pointer-events: none; z-index: 0; contain: strict; background: #1a1d20; }
.kc-arena-scene * { pointer-events: none; }
.kc-arena-scene canvas { position: absolute; display: block; image-rendering: pixelated; }
.kc-arena-layer { position: absolute; inset: 0; will-change: transform; }
/* the old flat map and its CSS ambient give way to the scene; the frame, the lamp and the cold glow stay */
.kc-arena-live .kc-tablec, .kc-arena-live .kc-amb, .kc-arena-live .kc-tstain { display: none; }
.kc-arena-live.kc-tablewrap { background: #1a1d20; }
/* Over the scene the table's light never dips: the flat map's lamp breathes and flickers by dimming (kc-lampb, and
   kc-flicker on low HP), which on the pale sky read as the top-right corner blinking dark. Here the lamp's pool rests at
   .55 and only ever rises (a slow breath; on low HP a rare soft warm flare), and the cold alarm is a red tint that swells
   on its own layer while the white glow holds still. */
.kc-desk-ww2 .kc-arena-live.kc-tablewrap .kc-tableglow { opacity: .55; animation: kc-arena-lamp 6s ease-in-out infinite; }
.kc-lowhp .kc-desk-ww2:not(.kc-lamp-off) .kc-arena-live .kc-tableglow { animation: kc-arena-lamplow 7s ease-in-out infinite; }
.kc-desk-ww2.kc-lamp-off .kc-arena-live.kc-tablewrap .kc-tableglow { opacity: 0; animation: none; }
@keyframes kc-arena-lamp { 0%, 100% { opacity: .55; } 50% { opacity: .62; } }
@keyframes kc-arena-lamplow { 0%, 76%, 100% { opacity: .55; } 83% { opacity: .72; } 90% { opacity: .6; } }
.kc-desk-cold .kc-arena-live .kc-tableglow { background: none; box-shadow: inset 0 0 34px rgba(255, 255, 255, .22); }
.kc-lowhp .kc-desk-cold .kc-arena-live.kc-tablewrap .kc-tableglow { background: none; animation: none; }
.kc-lowhp .kc-desk-cold .kc-arena-live .kc-tableglow::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 60, 40, .1), transparent 70%); animation: kc-arena-alarm 3.2s ease-in-out infinite; }
@keyframes kc-arena-alarm { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kc-arena-live .kc-tableglow, .kc-arena-live .kc-tableglow::after { animation: none !important; } }

/* sky: sun or moon walks with the turns, clouds drift, the odd plane goes over */
.kc-arena-sun { position: absolute; left: 0; width: 39px; height: 39px; transition: transform 6s ease; opacity: .92; }
.kc-arena-sun canvas { position: static; width: 39px; height: 39px; }
.kc-arena-clouds { position: absolute; height: 100%; animation: kc-arena-drift 220s linear infinite; }
@keyframes kc-arena-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kc-arena-air { position: absolute; inset: 0; }
.kc-arena-plane { position: absolute; left: 0; opacity: 0; }
.kc-arena-plane canvas { position: static; }
.kc-arena-plane1 { animation: kc-arena-fly 58s linear 9s infinite; }
.kc-arena-plane2 { animation: kc-arena-fly2 83s linear 34s infinite; }
.kc-arena-plane2 canvas { transform: scaleX(-1); }
/* the plane box is the scene's width, so translateX in % crosses the whole sky */
.kc-arena-plane { width: 100% !important; }
.kc-arena-plane canvas { left: 0; }
@keyframes kc-arena-fly { 0% { transform: translateX(-12%); opacity: .6; } 22% { transform: translateX(104%); opacity: .6; } 22.1%, 100% { transform: translateX(104%); opacity: 0; } }
@keyframes kc-arena-fly2 { 0% { transform: translateX(104%); opacity: .45; } 26% { transform: translateX(-12%); opacity: .45; } 26.1%, 100% { transform: translateX(-12%); opacity: 0; } }
/* searchlights sweep from behind the horizon once it is dark */
.kc-arena-beams { position: absolute; inset: 0; opacity: 0; transition: opacity 4s ease; }
.kc-arena-dark .kc-arena-beams { opacity: 1; }
.kc-arena-beam { position: absolute; width: 44px; margin-left: -22px; transform-origin: 50% 100%; clip-path: polygon(0 0, 100% 0, 54% 100%, 46% 100%);
    background: linear-gradient(to top, rgba(236, 240, 214, .32), rgba(236, 240, 214, .08) 70%, transparent); animation: kc-arena-sweep 11s ease-in-out infinite alternate; }
.kc-arena-beam2 { animation-duration: 14s; animation-delay: -6s; }
@keyframes kc-arena-sweep { from { transform: rotate(-26deg); } to { transform: rotate(24deg); } }
/* a ship creeps along the horizon */
.kc-arena-ship { position: absolute; left: 0; width: 90px; height: 24px; animation: kc-arena-sail 260s linear -70s infinite; opacity: .8; }
.kc-arena-ship canvas { position: static; }
@keyframes kc-arena-sail { from { transform: translateX(-100px); } to { transform: translateX(1500px); } }
/* near: grass and reeds bend in the wind */
.kc-arena-grass { transform-origin: 50% 100%; animation: kc-arena-sway 4.6s ease-in-out infinite alternate; }
@keyframes kc-arena-sway { from { transform: skewX(-3deg); } to { transform: skewX(2.5deg); } }
/* readability: a soft dim behind the two rows, the light of the hour, a faint shade while the enemy moves */
.kc-arena-dim { position: absolute; left: 0; right: 0; top: 30%; height: 38%;
    background: linear-gradient(rgba(12, 14, 18, 0), rgba(12, 14, 18, .2) 14%, rgba(12, 14, 18, .2) 86%, rgba(12, 14, 18, 0)); }
.kc-arena-light { position: absolute; inset: 0; transition: background 5s ease; }
.kc-arena-shade { position: absolute; inset: 0; background: rgba(10, 16, 30, .09); opacity: 0; transition: opacity 1.4s ease; }
.kc-arena-theirs .kc-arena-shade { opacity: 1; }

/* standing still: Arena animation off, or reduced motion. The scene is drawn once; nothing moves. */
.kc-arena-still *, .kc-arena-paused * { animation-play-state: paused !important; }
.kc-arena-still .kc-arena-clouds, .kc-arena-still .kc-arena-grass, .kc-arena-still .kc-arena-beam, .kc-arena-still .kc-arena-ship { animation: none !important; }
.kc-arena-still .kc-arena-plane { display: none; }
.kc-arena-still .kc-arena-ship { transform: translateX(62%); }
.kc-arena-still .kc-arena-beam1 { transform: rotate(-14deg); }
.kc-arena-still .kc-arena-beam2 { transform: rotate(18deg); }
.kc-arena-still .kc-arena-sun, .kc-arena-still .kc-arena-light, .kc-arena-still .kc-arena-shade, .kc-arena-still .kc-arena-beams { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .kc-arena-scene *, .kc-arena-scene { animation: none !important; transition: none !important; }
    .kc-arena-plane { display: none; }
}