/* Arcade kit structure and a neutral default look. A game restyles it with theme.json cssVars (--ar-*) and its own
   stylesheet; the layout rules here are what every arcade shooter shares. */
:root {
  --ar-bg: #0a0f22;
  --ar-text: #eef2fa;
  --ar-muted: #b9c3e4;
  --ar-accent: #ffc94a;
  --ar-accent-2: #ff8a3d;
  --ar-accent-ink: #1b1530;
  --ar-glass-a: rgba(24, 40, 104, .80);
  --ar-glass-b: rgba(7, 12, 40, .90);
  --ar-line: rgba(255, 201, 74, .55);
  --ar-cyan: #5fe1ff;
  --ar-danger: #ff9a9a;
  --ar-font: "Chakra Petch", "Rajdhani", "Eurostile", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ar-bg); color: var(--ar-text); font: 500 16px/1.35 var(--ar-font); overscroll-behavior: none; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }

.ar-root { position: fixed; inset: 0 0 var(--ar-bar, 0px) 0; overflow: hidden; background: #1a1230; }
.ar-stage { position: absolute; inset: 0; overflow: hidden; }
.ar-sky { position: absolute; inset: -3%; background: #1a2e78 center 38% / cover no-repeat; will-change: transform; }
.ar-clouds { position: absolute; left: -6%; right: -6%; bottom: 0; height: 46%; background: center bottom / cover no-repeat; will-change: transform, opacity; transform-origin: 50% 100%; pointer-events: none; opacity: .95; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%); mask-image: linear-gradient(to bottom, transparent 0, #000 38%); }
.ar-canvas, .ar-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-flare { position: absolute; inset: 0; background: center 28% / cover no-repeat; mix-blend-mode: screen; opacity: .5; pointer-events: none; animation: ar-flare 5s ease-in-out infinite; }
@keyframes ar-flare { 0%, 100% { opacity: .38; } 50% { opacity: .62; } }
.ar-tags, .ar-popups { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.ar-tag { position: absolute; left: 0; top: 0; min-width: 44px; padding: 3px 12px 4px; border-radius: 999px; font: 700 15px/1.15 var(--ar-font); text-align: center; letter-spacing: .02em; color: #fff;
  background: linear-gradient(180deg, #3d62d9 0%, #1b2f86 100%); border: 1.5px solid rgba(255, 255, 255, .6); box-shadow: 0 2px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); transition: opacity .25s; will-change: transform; }
.ar-tag-shrike { background: linear-gradient(180deg, #2fb7c9 0%, #0f6475 100%); }
.ar-tag-wraith { background: linear-gradient(180deg, #a56bf0 0%, #4a2088 100%); }
.ar-tag-golden { background: linear-gradient(180deg, #ffe08a 0%, #d99a1c 100%); color: #3b2500; border-color: #fff3c4; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); font-size: 17px; }
.ar-tag.is-selected { box-shadow: 0 0 0 2px var(--ar-cyan), 0 0 16px rgba(95, 225, 255, .8), 0 2px 10px rgba(0, 0, 0, .45); }

.ar-reticle { position: absolute; left: 0; top: 0; width: 72px; height: 72px; margin: -36px 0 0 -36px; color: var(--ar-cyan); filter: drop-shadow(0 0 6px rgba(95, 225, 255, .9)); pointer-events: none; opacity: 0; }
.ar-reticle[data-type="golden"] { color: var(--ar-accent); filter: drop-shadow(0 0 6px rgba(255, 201, 74, .9)); }
.ar-reticle svg { width: 100%; height: 100%; overflow: visible; animation: ar-spin 6s linear infinite; }  /* spin the glyph, never the positioned box: `rotate` on the box swings its translate() around the screen origin */
@keyframes ar-spin { to { rotate: 360deg; } }

.ar-popup { position: absolute; left: 0; top: 0; padding: 2px 10px; font: 700 18px/1.2 var(--ar-font); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .85), 0 0 12px rgba(255, 140, 40, .7); transition: transform 1.1s cubic-bezier(.2, .8, .3, 1), opacity 1.1s ease-in; white-space: nowrap; }
.ar-popup.gold { color: var(--ar-accent); font-size: 22px; }
.ar-popup.miss { color: #f2f4f8; font-size: 17px; letter-spacing: .04em; }

.ar-hud { position: absolute; inset: 0; pointer-events: none; padding-top: env(safe-area-inset-top); }
.ar-hud > * { pointer-events: none; }
.ar-top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar-logo { display: block; width: clamp(120px, 34vmin, 210px); height: auto; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55)); }
.ar-icon-btn { pointer-events: auto; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ar-line); background: linear-gradient(180deg, var(--ar-glass-a), var(--ar-glass-b)); color: var(--ar-accent); font: italic 700 20px/1 Georgia, serif; box-shadow: 0 3px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ar-badge { margin-left: auto; margin-right: 4px; padding: 5px 12px 6px; border-radius: 999px; border: 1px solid var(--ar-accent); background: rgba(10, 15, 34, .62); color: #ffd979; font: 700 12px/1.2 var(--ar-font); white-space: nowrap; }

.ar-panel { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ar-ammo { pointer-events: none; flex: 1 1 auto; max-width: 300px; padding: 8px 12px 9px; border-radius: 14px; border: 1px solid var(--ar-line); background: linear-gradient(180deg, var(--ar-glass-a), var(--ar-glass-b)); box-shadow: 0 4px 16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ar-ammo-txt { font: 700 13px/1.2 var(--ar-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ar-muted); }
.ar-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0 7px; }
.ar-pip { display: block; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); transform: skewX(-14deg); transition: background .15s, box-shadow .15s; }
.ar-pip.is-on { background: linear-gradient(180deg, #fff0b0, #ffb347 55%, #e0701a); box-shadow: 0 0 8px rgba(255, 170, 60, .8), inset 0 1px 0 rgba(255, 255, 255, .7); }
.ar-pip.is-on.is-gold { background: linear-gradient(180deg, #fff8d0, #ffd34a 55%, #d99a1c); }
.ar-ammo-row { display: flex; justify-content: space-between; gap: 10px; font: 700 14px/1.2 var(--ar-font); }
.ar-kills { color: #fff; }
.ar-clipwin { color: var(--ar-accent); }
.ar-clipwin.is-zero { color: var(--ar-muted); }
.ar-feats { pointer-events: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ar-super, .ar-buy { pointer-events: auto; min-width: 118px; min-height: 52px; padding: 7px 16px 8px; border-radius: 14px; border: 1.5px solid #fff3c4; text-align: center; color: #3b2500; background: linear-gradient(180deg, #ffe9a0 0%, #ffb52e 55%, #d9791a 100%); box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(255, 170, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .8); display: flex; flex-direction: column; line-height: 1.15; }
.ar-super b, .ar-buy b { font: 700 15px/1.15 var(--ar-font); text-transform: uppercase; letter-spacing: .05em; }
.ar-super span, .ar-buy span { font: 600 12px/1.2 var(--ar-font); opacity: .85; }
.ar-super:disabled, .ar-buy:disabled { filter: grayscale(.85) brightness(.7); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.ar-buy { background: linear-gradient(180deg, #8ee8ff, #2f9fd0 55%, #17608a); color: #04202e; border-color: #d4f6ff; box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 16px rgba(95, 225, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .8); }

.ar-banner { position: absolute; left: 0; right: 0; top: 22%; isolation: isolate; text-align: center; padding: 0 16px; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.4, .4, 1); text-shadow: 0 3px 14px rgba(0, 0, 0, .7); }
.ar-banner.is-show { opacity: 1; transform: scale(1); }
.ar-banner::before { content: ""; position: absolute; inset: -30px -10px; z-index: -1; background: radial-gradient(ellipse at center, rgba(8, 12, 40, .62) 0%, rgba(8, 12, 40, .35) 55%, rgba(8, 12, 40, 0) 78%); pointer-events: none; }
.ar-banner-tag { font: 700 13px/1.2 var(--ar-font); letter-spacing: .22em; text-transform: uppercase; color: var(--ar-cyan); min-height: 16px; }
.ar-banner-title { font: italic 700 clamp(30px, 9.5vmin, 54px)/1.05 var(--ar-font); text-transform: uppercase; letter-spacing: .02em; background: linear-gradient(180deg, #ffffff 0%, #ffe08a 45%, #ff9a3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(70, 22, 0, .9)) drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.ar-banner.is-miss .ar-banner-title { background: linear-gradient(180deg, #ffffff, #b9c3e4 60%, #7d89b8); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgba(10, 15, 40, .6)); }
.ar-banner.is-gold .ar-banner-tag { color: var(--ar-accent); }
.ar-banner-sub { font: 600 15px/1.3 var(--ar-font); color: #fff; margin-top: 2px; }
.ar-banner-amount { font: 700 clamp(26px, 8vmin, 42px)/1.1 var(--ar-font); color: var(--ar-accent); margin-top: 4px; text-shadow: 0 3px 12px rgba(0, 0, 0, .75), 0 0 18px rgba(255, 170, 60, .7); }

.ar-toast { position: absolute; left: 12px; right: 12px; top: 74px; margin: 0 auto; max-width: 420px; padding: 9px 14px; border-radius: 12px; background: rgba(10, 15, 34, .9); border: 1px solid var(--ar-line); font: 600 14px/1.3 var(--ar-font); text-align: center; }
.ar-toast.is-error { border-color: var(--ar-danger); color: var(--ar-danger); }

/* the bottom bar in demo mode (the RGS draws its own); hidden behind the intro */
body:not(.ar-live) .ar-bar { visibility: hidden; }
.ar-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; gap: 6px; padding: 8px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(14, 22, 64, .96), rgba(5, 8, 28, .98)); border-top: 1px solid var(--ar-line); }
.ar-bar-stats { display: flex; justify-content: space-between; gap: 12px; font: 600 13px/1.2 var(--ar-font); }
.ar-bar-stat { display: flex; gap: 6px; align-items: baseline; }
.ar-bar-stat.is-zero b { color: var(--ar-muted); }
.ar-bar-label { color: var(--ar-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ar-bar-stat b, .ar-bar-stake { font: 700 16px/1.2 var(--ar-font); color: #fff; }
.ar-bar-row { display: grid; grid-template-columns: auto 1fr 46px; gap: 8px; align-items: center; max-width: 560px; width: 100%; margin: 0 auto; }
.ar-bar-bet { display: flex; align-items: center; gap: 6px; }
.ar-bar-bet.is-locked { opacity: .6; }
.ar-bar-stakebox { display: flex; flex-direction: column; align-items: center; min-width: 66px; }
.ar-bar-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ar-line); background: linear-gradient(180deg, var(--ar-glass-a), var(--ar-glass-b)); font: 700 22px/1 var(--ar-font); }
.ar-bar-btn:disabled { opacity: .4; }
.ar-bar-btn.is-off { opacity: .5; }
.ar-bar-play { min-height: 54px; white-space: nowrap; padding: 0 8px; font-size: clamp(16px, 5vw, 22px) !important; border-radius: 27px; border: 2px solid #fff3c4; background: linear-gradient(180deg, #ffe9a0, #ffb52e 55%, #d9791a); color: #3b2500; font: italic 700 22px/1 var(--ar-font); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 16px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 170, 60, .5), inset 0 2px 0 rgba(255, 255, 255, .8); }
.ar-bar-play:disabled { filter: grayscale(.8) brightness(.75); }

/* rules */
.ar-dialog { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(4, 7, 22, .78); backdrop-filter: blur(4px); }
.ar-dialog-card { width: min(520px, 100%); max-height: 100%; overflow: auto; padding: 18px 18px 16px; border-radius: 18px; border: 1px solid var(--ar-line); background: linear-gradient(180deg, #16246a, #090f33); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); font-size: 14px; line-height: 1.45; -webkit-user-select: text; user-select: text; }
.ar-dialog-card h2 { margin: 0 0 8px; font: italic 700 24px/1.1 var(--ar-font); text-transform: uppercase; color: var(--ar-accent); }
.ar-dialog-card p { margin: 0 0 9px; }
.ar-paytable { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.ar-paytable th, .ar-paytable td { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ar-paytable th { color: var(--ar-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ar-paytable td:nth-child(n+2) { font-variant-numeric: tabular-nums; }
.ar-facts { font-size: 15px; color: #fff; }
.ar-fine { color: var(--ar-muted); font-size: 12px; }
.ar-close { min-height: 46px; width: 100%; margin-top: 4px; border-radius: 12px; border: 1.5px solid var(--ar-line); background: linear-gradient(180deg, var(--ar-glass-a), var(--ar-glass-b)); font: 700 15px/1 var(--ar-font); }

/* loading and intro */
.ar-intro { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #1a1230; transition: opacity .5s; }
.ar-intro[data-state="leaving"] { opacity: 0; pointer-events: none; }
.ar-intro-sky { position: absolute; inset: -4%; background: center 40% / cover no-repeat var(--ar-intro-sky, #1a2e78); animation: ar-zoom 14s ease-out forwards; }
@keyframes ar-zoom { from { transform: scale(1.08); } to { transform: scale(1.0); } }
.ar-intro-jet { position: absolute; left: 50%; top: 52%; width: min(86vw, 520px); transform: translate(-50%, -50%); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); animation: ar-glide 4.2s cubic-bezier(.2, .7, .2, 1) both, ar-bob 3.4s 4.2s ease-in-out infinite; }
@keyframes ar-glide { from { transform: translate(-190%, -20%) rotate(-8deg) scale(.85); opacity: 0; } 60% { opacity: 1; } to { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; } }
@keyframes ar-bob { 50% { transform: translate(-50%, -53%); } }
.ar-intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ar-intro-flare { position: absolute; inset: 0; background: center 30% / cover no-repeat; mix-blend-mode: screen; opacity: .55; animation: ar-flare 4s ease-in-out infinite; pointer-events: none; }
.ar-intro-logo { position: absolute; left: 50%; top: max(8%, env(safe-area-inset-top)); width: min(84vw, 460px); height: auto; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); animation: ar-logo-in 1s .1s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes ar-logo-in { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.ar-intro[data-state="video"] .ar-intro-logo, .ar-intro[data-state="video"] .ar-intro-jet, .ar-intro[data-state="video"] .ar-intro-flare, .ar-intro[data-state="video"] .ar-intro-foot { display: none; }
.ar-intro[data-state="sweep"] .ar-intro-foot { opacity: 0; }
.ar-intro[data-state="sweep"] .ar-intro-logo { animation: ar-sweep 1.5s ease-in-out both; }
@keyframes ar-sweep { from { opacity: 0; transform: translateX(-50%) scale(.8); filter: brightness(2); } 35% { opacity: 1; transform: translateX(-50%) scale(1); filter: brightness(1.4) drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); } to { opacity: 1; transform: translateX(-50%) scale(1.04); } }
.ar-intro-foot { position: absolute; left: 0; right: 0; bottom: max(7%, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 24px; transition: opacity .3s; }
.ar-progress { width: min(78vw, 360px); height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.ar-progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #ffb347, #ffe08a); box-shadow: 0 0 10px rgba(255, 190, 80, .8); transition: width .3s; }
.ar-intro[data-state="ready"] .ar-progress { opacity: .0; height: 0; }
.ar-intro-status { min-height: 18px; font: 600 14px/1.2 var(--ar-font); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); letter-spacing: .08em; text-transform: uppercase; }
.ar-start { min-width: 220px; min-height: 56px; padding: 0 28px; border-radius: 30px; border: 2px solid #fff3c4; background: linear-gradient(180deg, #ffe9a0, #ffb52e 55%, #d9791a); color: #3b2500; font: italic 700 22px/1 var(--ar-font); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 22px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 170, 60, .6), inset 0 2px 0 rgba(255, 255, 255, .85); animation: ar-pulse 1.6s ease-in-out infinite; }
@keyframes ar-pulse { 50% { transform: scale(1.05); } }
.ar-skip { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); min-width: 70px; min-height: 46px; padding: 0 18px; border-radius: 23px; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(8, 12, 36, .55); color: #fff; font: 700 14px/1 var(--ar-font); letter-spacing: .06em; text-transform: uppercase; }

.is-wide .ar-logo { width: clamp(150px, 16vw, 230px); }
.is-wide .ar-panel { left: 50%; right: auto; width: min(680px, calc(100% - 20px)); transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .ar-flare, .ar-intro-flare, .ar-reticle svg, .ar-start, .ar-intro-jet, .ar-intro-sky { animation: none; } }