/* Shared 3D tank game styles (see tank3d.js; also needs sim3d.css + car-kit.css). The stage is an inline-size
   container, so the sight is sized in cqw: --r is the lens radius. */
.t3-sight { --r: 21cqw; position: absolute; inset: 0; pointer-events: none; display: none; }
@container (max-width: 560px) { .t3-sight { --r: 44cqw; } }
.t3-sight.is-on { display: block; background: radial-gradient(circle at 50% 50%, transparent 0 var(--r), rgba(0,0,0,.92) calc(var(--r) + 2px)); }
.t3-sight.is-thermal.is-on { background: radial-gradient(circle at 50% 50%, rgba(34,197,94,.12) 0 var(--r), rgba(0,0,0,.94) calc(var(--r) + 2px)); }
.t3-sight__ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid rgba(0,0,0,.7); box-shadow: inset 0 0 30px rgba(0,0,0,.6); }
.t3-sight__h, .t3-sight__v { position: absolute; background: rgba(250,250,250,.85); }
.t3-sight__h { left: calc(50% - var(--r) * .8); right: calc(50% - var(--r) * .8); top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(250,250,250,.9) 0 44%, transparent 44% 56%, rgba(250,250,250,.9) 56%); }
.t3-sight__v { top: calc(50% + 10px); height: calc(var(--r) * .6); left: 50%; width: 2px; margin-left: -1px; }
.t3-sight__ticks i { position: absolute; left: calc(50% - 10px); width: 20px; height: 2px; background: rgba(250,250,250,.75); }
.t3-sight__rng { position: absolute; left: 50%; top: calc(50% + var(--r) * .72); transform: translateX(-50%); color: #fde047; font: 800 15px ui-monospace, monospace; text-shadow: 0 1px 3px #000; }
.t3-sight__lbl { position: absolute; left: calc(50% + 14px); top: calc(50% + 12px); color: #fca5a5; font: 800 12px system-ui, sans-serif; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.is-thermal .t3-sight__h, .is-thermal .t3-sight__v, .is-thermal .t3-sight__ticks i { background: rgba(134,239,172,.9); }
.is-thermal .t3-sight__h { background: linear-gradient(90deg, rgba(134,239,172,.9) 0 44%, transparent 44% 56%, rgba(134,239,172,.9) 56%); }
.t3-aim { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; }
.t3-aim::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; }
.t3-aim.is-lock { border-color: #f87171; }
.t3-aim.is-ready { border-color: #4ade80; }
.ck-touch .sim-tbtn[data-id="fire"] { order: 6; background: rgba(194, 65, 12, .85); font-size: 15px; min-width: 84px; }
.ck-touch .sim-tbtn[data-id="sight"] { order: 5; }
/* six touch buttons must fit a phone: slimmer buttons, FIRE stays the widest */
@container (max-width: 480px) {
  .ck-touch .sim-tbtns { left: 6px; right: 6px; gap: 5px; }
  .ck-touch .sim-tbtn { min-width: 44px; padding-left: 4px; padding-right: 4px; }
  .ck-touch .sim-tbtn[data-id="fire"] { min-width: 62px; font-size: 13px; }
}