/* Ground Assault page and HUD. Forge identity: black, hot orange, steel. Targets are at least 44 px,
   focus is always visible, nothing scrolls sideways at 360 px, and motion stops under reduced motion. */
:root {
  --ga-bg: #050506; --ga-panel: #101114; --ga-panel2: #17191d; --ga-line: rgba(255, 255, 255, .12); --ga-text: #f2efe9; --ga-dim: #a9a6a0;
  --ga-hot: #ff8428; --ga-orange: #e8680c; --ga-good: #39d07a; --ga-bad: #ff5a4a; --ga-friend: #6fb1ff; --ga-enemy: #ff6a55;
  --ga-c0: #3d8bff; --ga-c1: #ff4d3d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ga-bg); color: var(--ga-text); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.ga { min-height: 100dvh; overflow-x: hidden; }
body.ga-playing { overflow: hidden; touch-action: none; overscroll-behavior: none; }
a { color: var(--ga-hot); }
:focus-visible { outline: 3px solid var(--ga-hot); outline-offset: 3px; }
[hidden] { display: none !important; }
.ga-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ga-hot); color: #000; padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.ga-skip:focus { left: 8px; }

/* ---------- menu ---------- */
.ga-menu { max-width: 1080px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px 48px; }
.ga-nav { display: flex; align-items: center; min-height: 44px; }
.ga-home { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ga-dim); text-decoration: none; font-weight: 600; }
.ga-home:hover { color: var(--ga-text); }
.ga-hero { padding: 28px 0 8px; position: relative; }
.ga-hero::before { content: ""; position: absolute; inset: -40px -16px auto; height: 320px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 20% 30%, rgba(255, 132, 40, .22), transparent 70%), radial-gradient(ellipse 50% 60% at 85% 10%, rgba(61, 139, 255, .14), transparent 70%); }
.ga-eyebrow { margin: 0 0 6px; color: var(--ga-hot); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ga-hero h1 { margin: 0; font-size: clamp(2.4rem, 9vw, 4.6rem); line-height: .95; letter-spacing: -.02em; font-weight: 900; text-transform: uppercase; }
.ga-lede { max-width: 62ch; color: #d9d5ce; font-size: 1.06rem; }
.ga-access { display: inline-block; margin: 4px 0 0; padding: 10px 14px; border: 1px solid rgba(255, 132, 40, .45); border-radius: 10px; background: rgba(255, 132, 40, .08); max-width: 70ch; }
.ga-note { color: var(--ga-dim); font-size: .9rem; }
.ga-loading { color: var(--ga-dim); padding: 24px 0; }
.ga-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.ga-group { margin: 0; padding: 14px; border: 1px solid var(--ga-line); border-radius: 14px; background: var(--ga-panel); min-width: 0; }
.ga-group--wide { grid-column: 1 / -1; }
.ga-group legend { padding: 0 6px; font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ga-dim); }
.ga-opts { display: grid; gap: 8px; }
.ga-opts--classes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ga-opt { position: relative; display: block; cursor: pointer; }
.ga-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ga-opt span { display: block; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ga-line); border-radius: 10px; background: var(--ga-panel2); transition: border-color .15s, background .15s; }
.ga-opt b { display: block; }
.ga-opt small { display: block; color: var(--ga-dim); font-size: .84rem; margin-top: 2px; }
.ga-opt input:checked + span { border-color: var(--ga-hot); background: rgba(255, 132, 40, .12); box-shadow: inset 4px 0 0 var(--ga-hot); }
.ga-opt input:focus-visible + span { outline: 3px solid var(--ga-hot); outline-offset: 2px; }
.ga-more summary, .ga-how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.ga-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.ga-field { display: grid; gap: 4px; font-size: .9rem; color: var(--ga-dim); min-width: 0; }
.ga-field select, .ga-field input[type=range] { min-height: 44px; width: 100%; }
.ga-field select { background: var(--ga-panel2); color: var(--ga-text); border: 1px solid var(--ga-line); border-radius: 8px; padding: 0 10px; font: inherit; }
.ga-field output { color: var(--ga-text); font-weight: 700; }
#ga-loadout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#ga-loadout legend, #ga-loadout .ga-note { grid-column: 1 / -1; }
.ga-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ga-actions--stack { flex-direction: column; align-items: stretch; }
.ga-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--ga-line);
  background: var(--ga-panel2); color: var(--ga-text); font: 700 1rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.ga-btn:hover { border-color: rgba(255, 255, 255, .3); }
.ga-btn--hot { background: linear-gradient(180deg, var(--ga-hot), var(--ga-orange)); color: #140700; border-color: transparent; text-transform: uppercase; letter-spacing: .04em; min-width: 180px; }
.ga-btn--hot:hover { filter: brightness(1.08); }
.ga-btn--ghost { background: transparent; }
.ga-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; color: var(--ga-dim); }
.ga-career { margin-top: 28px; padding: 16px; border: 1px solid var(--ga-line); border-radius: 14px; background: var(--ga-panel); }
.ga-career h2 { margin: 0 0 4px; font-size: 1.15rem; }
.ga-career h3 { margin: 18px 0 6px; font-size: .95rem; color: var(--ga-dim); }
.ga-rank { margin: 0 0 8px; } .ga-rank span { color: var(--ga-dim); }
.ga-bar { height: 10px; border-radius: 6px; background: #24262b; overflow: hidden; } .ga-bar i { display: block; height: 100%; background: var(--ga-hot); }
.ga-ch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.ga-ch li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--ga-panel2); }
.ga-ch li small { grid-column: 1 / -1; color: var(--ga-dim); } .ga-ch li.done b { color: var(--ga-good); }
.ga-hist { margin: 0; padding-left: 18px; color: #d9d5ce; }
.ga-how { margin-top: 20px; padding: 6px 16px; border: 1px solid var(--ga-line); border-radius: 14px; background: var(--ga-panel); }
.ga-how li { margin: 6px 0; }
.ga-legal { color: var(--ga-dim); font-size: .85rem; margin-top: 20px; }

/* ---------- canvases and overlays ---------- */
.ga-canvas { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; outline: none; touch-action: none; background: #0b0c0f; }
.ga-click { position: fixed; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 12; min-height: 56px; padding: 12px 26px; border-radius: 14px; border: 1px solid rgba(255, 132, 40, .6);
  background: rgba(10, 10, 12, .82); color: var(--ga-text); font: 800 1.05rem system-ui; display: grid; gap: 2px; cursor: pointer; }
.ga-click small { color: var(--ga-dim); font-weight: 600; font-size: .8rem; }
.ga-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); overflow-y: auto; }
.ga-modal-card { width: min(420px, 100%); padding: 20px; border-radius: 16px; border: 1px solid var(--ga-line); background: var(--ga-panel); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.ga-modal-card--wide { width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.ga-modal-card h2 { margin: 0 0 14px; }
.ga-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: -20px; background: var(--ga-panel); padding: 4px 0 8px; z-index: 1; }
.ga-modal-head h2 { margin: 0; }
.ga-settings h3 { margin: 18px 0 6px; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ga-dim); }
.ga-settings .ga-field { margin: 8px 0; }
.ga-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; }
.ga-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ga-hot); flex: none; }
.ga-check small { display: block; color: var(--ga-dim); font-size: .84rem; }
.ga-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.ga-key { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ga-line); background: var(--ga-panel2); color: var(--ga-text); font: inherit; cursor: pointer; }
.ga-key kbd { font: 700 .85rem ui-monospace, monospace; color: var(--ga-hot); }
.ga-end-card { width: min(640px, 100%); padding: 22px; border-radius: 18px; border: 1px solid var(--ga-line); background: var(--ga-panel); }
.ga-end-head { display: flex; gap: 16px; align-items: center; }
.ga-end-head h2 { margin: 0; font-size: 2.4rem; text-transform: uppercase; } .ga-end-head h2.good { color: var(--ga-good); } .ga-end-head h2.bad { color: var(--ga-bad); }
.ga-end-head p { margin: 2px 0; }
.ga-portrait { flex: none; width: 88px; height: 88px; border-radius: 14px; background: var(--ga-panel2); display: grid; place-items: center; overflow: hidden; color: var(--ga-dim); font-weight: 800; }
.ga-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ga-end-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 18px 0 8px; }
.ga-end-stats div { padding: 10px 6px; border-radius: 10px; background: var(--ga-panel2); text-align: center; }
.ga-end-stats dt { color: var(--ga-dim); font-size: .75rem; } .ga-end-stats dd { margin: 0; font-size: 1.4rem; font-weight: 800; }
.ga-end-xp { font-weight: 700; }

/* ---------- HUD ---------- */
.ga-hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: calc(14px * var(--ga-scale, 1)); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); user-select: none; -webkit-user-select: none; }
.ga-hud button { pointer-events: auto; }
.ga-top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; width: min(720px, calc(100% - 24px)); }
.ga-team { display: grid; gap: 3px; padding: 6px 10px; border-radius: 10px; background: rgba(8, 9, 12, .62); border: 1px solid transparent; }
.ga-team.mine { border-color: rgba(255, 255, 255, .35); }
.ga-t0 { text-align: right; } .ga-t0 .ga-tname { color: var(--ga-c0); } .ga-t1 .ga-tname { color: var(--ga-c1); }
.ga-tname { font-weight: 800; font-size: .86em; letter-spacing: .04em; text-transform: uppercase; }
.ga-tval { font-size: .9em; color: #e8e4dc; }
.ga-hold { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ga-hold i { display: block; height: 100%; } .ga-t0 .ga-hold i { background: var(--ga-c0); margin-left: auto; } .ga-t1 .ga-hold i { background: var(--ga-c1); }
.ga-mid { text-align: center; padding: 4px 10px; border-radius: 10px; background: rgba(8, 9, 12, .62); }
.ga-clock { display: block; font: 800 1.35em ui-monospace, monospace; }
.ga-obj { display: block; font-size: .78em; color: #d8d4cc; max-width: 220px; }
.ga-zones { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 64px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.ga-zone { --p: 0; --pc: var(--ga-friend); position: relative; display: grid; place-items: center; width: 46px; height: 40px; border-radius: 8px; background: rgba(8, 9, 12, .7); border: 2px solid #9d99ab; overflow: hidden; }
.ga-zone b { font-size: 1.05em; line-height: 1; } .ga-zone small { font-size: .55em; color: #d8d4cc; line-height: 1; max-width: 42px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ga-zone i { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p) * 100%); background: var(--pc); }
.ga-zone[data-owner=f] { border-color: var(--ga-friend); background: rgba(40, 90, 170, .45); } .ga-zone[data-owner=e] { border-color: var(--ga-enemy); background: rgba(170, 50, 40, .45); }
.ga-zone[data-owner=e] b::after { content: "✕"; font-size: .7em; margin-left: 2px; }   /* shape cue, not colour only */
.ga-zone[data-owner=f] b::after { content: "✓"; font-size: .7em; margin-left: 2px; }
.ga-zone.contested { box-shadow: 0 0 0 2px #fff; } .ga-zone.here { transform: translateY(2px); box-shadow: 0 0 0 2px var(--ga-hot); }
.ga-compass { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 110px); left: 50%; width: min(360px, 70vw); height: 22px; transform: translateX(-50%); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.ga-compass-strip { position: absolute; left: 50%; top: 0; height: 100%; }
.ga-compass-strip span, .ga-compass-strip em { position: absolute; top: 2px; transform: translateX(-50%); font-size: .78em; color: #d8d4cc; font-style: normal; }
.ga-compass-strip em { top: 0; font-weight: 800; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .5); color: #fff; }
.ga-compass-strip em[data-owner=f] { color: var(--ga-friend); } .ga-compass-strip em[data-owner=e] { color: var(--ga-enemy); }
.ga-compass-tick { position: absolute; left: 50%; bottom: 0; width: 2px; height: 7px; background: var(--ga-hot); }
.ga-mini { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); width: 150px; height: 150px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: rgba(8, 9, 12, .5); }
.ga-hud.ga-bigmap .ga-mini { width: min(72vmin, 560px); height: min(72vmin, 560px); top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); background: rgba(8, 9, 12, .85); z-index: 2; }
.ga-markers { position: absolute; inset: 0; overflow: hidden; }
.ga-mk { position: absolute; left: 0; top: 0; will-change: transform; }
.ga-mk-zone { width: 44px; margin: -40px 0 0 -22px; text-align: center; }
.ga-mk-zone b { display: block; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; line-height: 22px; border: 2px solid #d8d4e6; background: rgba(0, 0, 0, .55); font-size: .9em; }
.ga-mk-zone[data-owner=f] b { border-color: var(--ga-friend); color: var(--ga-friend); } .ga-mk-zone[data-owner=e] b { border-color: var(--ga-enemy); color: var(--ga-enemy); }
.ga-mk-zone.contested b { border-style: dashed; }
.ga-mk-zone small { font-size: .7em; color: #e8e4dc; }
.ga-mk-mate { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.ga-mk-mate::before { content: ""; position: absolute; inset: 0; background: var(--ga-friend); clip-path: polygon(50% 100%, 0 0, 100% 0); }
.ga-mk-mate.squad::before { background: #8ff0b0; } .ga-mk-mate.enemy::before { background: var(--ga-enemy); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ga-mk-mate.down::before { background: #ffd34d; clip-path: none; border-radius: 50%; } .ga-mk-mate.down::after { content: "+"; position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-weight: 900; color: #ffd34d; }
.ga-cross { --gap: 6px; position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ga-cross i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
.ga-cross i:nth-child(1) { width: 2px; height: 9px; left: -1px; top: calc(-9px - var(--gap)); } .ga-cross i:nth-child(2) { width: 2px; height: 9px; left: -1px; top: var(--gap); }
.ga-cross i:nth-child(3) { width: 9px; height: 2px; top: -1px; left: calc(-9px - var(--gap)); } .ga-cross i:nth-child(4) { width: 9px; height: 2px; top: -1px; left: var(--gap); }
.ga-cross b { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: #fff; }
.ga-cross[data-style=dot] i { display: none; } .ga-cross[data-style=dot] b { width: 5px; height: 5px; left: -2.5px; top: -2.5px; border-radius: 50%; }
.ga-cross[data-style=circle] i { display: none; } .ga-cross[data-style=circle] b { width: calc(var(--gap) * 2 + 8px); height: calc(var(--gap) * 2 + 8px); left: calc(-1 * var(--gap) - 4px); top: calc(-1 * var(--gap) - 4px); border-radius: 50%; background: none; border: 2px solid #fff; }
.ga-cross[data-style=none] { display: none; }
.ga-cross.hidden { display: none; }
.ga-hitm { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; }
.ga-hitm::before, .ga-hitm::after { content: ""; position: absolute; left: 12px; top: 0; width: 2px; height: 26px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 2px #000; }
.ga-hitm::after { transform: rotate(-45deg); }
.ga-hitm.on { opacity: 1; } .ga-hitm.head::before, .ga-hitm.head::after { background: #ffd34d; } .ga-hitm.kill::before, .ga-hitm.kill::after { background: var(--ga-bad); width: 3px; }
.ga-scope { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, transparent 0 34vmin, rgba(0, 0, 0, .96) 34.4vmin),
  linear-gradient(#000, #000) center / 1px 68vmin no-repeat, linear-gradient(#000, #000) center / 68vmin 1px no-repeat; }
.ga-scope.on { opacity: 1; }
.ga-dmg i { position: absolute; left: 50%; top: 50%; width: 140px; height: 40px; margin: -190px 0 0 -70px; transform-origin: 70px 190px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 50, 40, .85), transparent 70%); animation: ga-fade .9s ease-out forwards; }
@keyframes ga-fade { to { opacity: 0; } }
.ga-flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .15s; }
.ga-feed { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 160px); display: grid; gap: 4px; justify-items: end; max-width: min(380px, 60vw); }
.ga-fi { padding: 3px 8px; border-radius: 6px; background: rgba(8, 9, 12, .62); font-size: .86em; transition: opacity .5s; border-right: 3px solid transparent; }
.ga-fi.ga-good { border-right-color: var(--ga-good); } .ga-fi.ga-bad { border-right-color: var(--ga-bad); } .ga-fi.out { opacity: 0; }
.ga-w { color: var(--ga-dim); margin: 0 4px; }
.ga-ai { font-style: normal; font-size: .72em; padding: 0 4px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .35); color: #cfcbc4; vertical-align: 1px; }
.ga-caption { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px); transform: translateX(-50%); max-width: min(640px, 90vw); padding: 6px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, .78); font-size: 1em; text-align: center; opacity: 0; transition: opacity .2s; }
.ga-caption.on { opacity: 1; }
.ga-prompt { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, .55); font-weight: 700; opacity: 0; }
.ga-prompt.on { opacity: 1; }
.ga-vitals { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: min(260px, 40vw); padding: 8px 10px; border-radius: 10px; background: rgba(8, 9, 12, .62); }
.ga-hp { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; } .ga-hp i { display: block; height: 100%; background: #e9e5dd; transition: width .2s; }
.ga-hp.low i { background: var(--ga-bad); }
.ga-hpn { display: inline-block; margin-top: 4px; font-size: 1.1em; } .ga-kda { margin-left: 8px; color: var(--ga-dim); }
.ga-weapon { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); text-align: right; padding: 8px 12px; border-radius: 10px; background: rgba(8, 9, 12, .62); }
.ga-wname { display: block; color: var(--ga-dim); } .ga-ammo { display: block; font: 800 1.9em ui-monospace, monospace; line-height: 1.05; } .ga-ammo small { font-size: .5em; color: var(--ga-dim); } .ga-gear { font-size: .82em; color: #d8d4cc; }
.ga-banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -10px); padding: 10px 22px; border-radius: 12px; background: rgba(0, 0, 0, .7); font: 900 1.4em system-ui; text-transform: uppercase; letter-spacing: .04em; opacity: 0; transition: opacity .25s, transform .25s; }
.ga-banner.on { opacity: 1; transform: translate(-50%, 0); } .ga-banner.good { color: var(--ga-good); } .ga-banner.bad { color: var(--ga-bad); }
.ga-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, calc(100% - 24px)); max-height: 80dvh; overflow: auto; padding: 16px; border-radius: 14px; background: rgba(10, 11, 14, .92); border: 1px solid var(--ga-line); pointer-events: auto; }
.ga-score h2 { margin: 0 0 10px; font-size: 1em; color: var(--ga-dim); }
.ga-score { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ga-score h2 { grid-column: 1 / -1; }
.ga-scol h3 { margin: 0 0 6px; } .ga-scol table { width: 100%; border-collapse: collapse; font-size: .9em; }
.ga-scol th, .ga-scol td { padding: 3px 6px; text-align: right; } .ga-scol th:first-child, .ga-scol td:first-child { text-align: left; }
.ga-scol tr.me td { background: rgba(255, 132, 40, .18); }
.ga-respawn { text-align: center; width: min(460px, calc(100% - 24px)); }
.ga-respawn h2 { margin: 0; } .ga-rs-t { font: 800 1.5em ui-monospace, monospace; margin: 6px 0 12px; }
.ga-rs-pts { display: grid; gap: 8px; } .ga-rs-pts button { min-height: 48px; border-radius: 10px; border: 1px solid var(--ga-line); background: var(--ga-panel2); color: var(--ga-text); font: 700 1em system-ui; cursor: pointer; }
.ga-rs-pts button:disabled { opacity: .5; cursor: default; } .ga-rs-pts button:not(:disabled):hover { border-color: var(--ga-hot); }
.ga-rs-hint { color: var(--ga-dim); margin: 10px 0 0; font-size: .9em; }
.ga-hud.ga-2d .ga-compass, .ga-hud.ga-2d .ga-mini, .ga-hud.ga-2d .ga-cross, .ga-hud.ga-2d .ga-markers, .ga-hud.ga-2d .ga-scope { display: none; }

/* ---------- touch controls ---------- */
.ga-touch { --ga-touch: 1; position: fixed; inset: 0; z-index: 11; pointer-events: none; }
.ga-t { pointer-events: auto; width: calc(56px * var(--ga-touch)); height: calc(56px * var(--ga-touch)); min-width: 44px; min-height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(10, 10, 12, .45); color: #fff; font: 700 calc(12px * var(--ga-touch)) system-ui; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ga-t.on { background: rgba(255, 132, 40, .55); border-color: var(--ga-hot); }
.ga-t-pause { position: absolute; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%) translateY(108px); width: 44px; height: 44px; border-radius: 10px; }
.ga-t-right { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 74px); display: grid; grid-template-columns: repeat(3, auto); gap: 8px; direction: rtl; }
.ga-t-fire { grid-row: span 2; width: calc(84px * var(--ga-touch)); height: calc(84px * var(--ga-touch)); background: rgba(255, 90, 60, .5); font-size: calc(15px * var(--ga-touch)); align-self: center; }
.ga-touch.left .ga-t-right { right: auto; left: max(12px, env(safe-area-inset-left)); direction: ltr; }
body.ga-playing:has(#ga-touch:not([hidden])) .ga-weapon { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 160px); }
body.ga-playing:has(#ga-touch:not([hidden])) .ga-feed { top: calc(max(10px, env(safe-area-inset-top)) + 240px); }

/* Sliding twin-stick guides — visual only; canvas touch events still drive simulation. */
.ga-stick-hint{position:absolute;width:116px;height:116px;bottom:20px;
  box-sizing:border-box;border-radius:50%;pointer-events:none;touch-action:none;z-index:1;
  border:2px solid rgba(255,160,75,.48);
  background:radial-gradient(circle,#ff9b3725,#0b10162c 70%);
  box-shadow:inset 0 0 0 9px #fa8b1920,0 0 20px #ff8e1838;
  transform:translate(-50%,-50%);opacity:.62;transition:opacity .13s}
.ga-stick-move{left:88px}
.ga-stick-look{left:calc(100% - 88px);border-color:#79b9ff70;background:radial-gradient(circle,#8cc8ff21,#0b10162c 70%);
  box-shadow:inset 0 0 0 9px #79b9ff1c,0 0 20px #79b9ff30}
.ga-stick-hint.engaged{opacity:.95;transition:none}
.ga-stick-knob{position:absolute;left:50%;top:50%;width:42px;height:42px;pointer-events:none;
  border:2px solid #ffbd74;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#ffc17b,#e27a20 65%,#874112);
  box-shadow:0 3px 10px #0009;transform:translate(-50%,-50%)}
.ga-stick-look .ga-stick-knob{border-color:#9ccfff;
  background:radial-gradient(circle at 35% 28%,#c5e5ff,#3877b8 65%,#16446d)}
.ga-stick-label{position:absolute;top:100%;left:0;width:100%;padding-top:5px;
  color:#ffe2c0;font:800 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-align:center}
.ga-stick-look .ga-stick-label{color:#c6e7ff}
.ga-t-right{z-index:3}
.ga-touch.left .ga-stick-move{left:calc(100% - 88px)}
.ga-touch.left .ga-stick-look{left:88px}
body.ga-capture .ga-stick-hint{display:none}
@media(max-width:380px){.ga-stick-hint{width:96px;height:96px}.ga-stick-move{left:64px}
 .ga-stick-look{left:calc(100% - 64px)}.ga-touch.left .ga-stick-move{left:calc(100% - 64px)}
 .ga-touch.left .ga-stick-look{left:64px}}
@media(prefers-reduced-motion:reduce){.ga-stick-hint{transition:none}}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .ga-setup { grid-template-columns: minmax(0, 1fr); }
  .ga-opts--classes, #ga-loadout, .ga-fields, .ga-ch, .ga-keys { grid-template-columns: minmax(0, 1fr); }
  .ga-end-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ga-end-head h2 { font-size: 1.8rem; }
  .ga-top { gap: 6px; } .ga-obj { display: none; }
  .ga-mini { width: 104px; height: 104px; top: calc(max(10px, env(safe-area-inset-top)) + 72px); }
  .ga-zones { top: calc(max(10px, env(safe-area-inset-top)) + 60px); } .ga-zone { width: 38px; } .ga-zone small { display: none; }
  .ga-compass { display: none; }
  .ga-score { grid-template-columns: minmax(0, 1fr); }
}
@media (orientation: portrait) and (max-width: 760px) { .ga-hud::after { content: "Turn your phone sideways for the best view"; position: absolute; left: 50%; top: 42%; transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .6); font-size: .85em; white-space: nowrap; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
body.reduce *, body.reduce *::before, body.reduce *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }

/* Ask Forge (ChatGPT's help launcher) is for the menu only: hidden during a match, including the pause menu. */
body.ga-playing #forge-ask-open, body.ga-playing .forge-ask-sheet { display: none !important; }

/* Battle options: checkbox field, trailer row */
.ga-field--check span { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ga-text); }
.ga-field--check input { width: 22px; height: 22px; accent-color: var(--ga-hot); }
.ga-trailer-row { align-items: end; }
.ga-trailer-row .ga-btn { min-height: 48px; }
.ga-trailer-row .ga-note { grid-column: span 2; margin: 0; }
@media (max-width: 720px) { .ga-trailer-row .ga-note { grid-column: auto; } }

/* Replay and photo toolbars: bottom of the screen, wrap on phones, 44 px targets */
.ga-bar-ui { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(8, 8, 10, .88); border-top: 1px solid var(--ga-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ga-bar-ui[hidden] { display: none; }
.ga-bar-title { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--ga-hot); }
.ga-bar-time { font-variant-numeric: tabular-nums; color: var(--ga-text); min-width: 96px; }
.ga-bar-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ga-bar-label { color: var(--ga-dim); font-size: .85rem; }
.ga-bar-status { color: var(--ga-dim); font-size: .9rem; }
.ga-bar-help { flex-basis: 100%; margin: 0; }
.ga-bar-fov { gap: 8px; color: var(--ga-dim); }
.ga-bar-fov input { min-height: 44px; width: 140px; accent-color: var(--ga-hot); }
.ga-chip { min-height: 44px; min-width: 44px; padding: 0 12px; }
.ga-chip[aria-pressed="true"] { border-color: var(--ga-hot); background: rgba(255, 132, 40, .16); box-shadow: inset 0 -3px 0 var(--ga-hot); }
.ga-bar-ui .ga-btn { min-height: 44px; }

/* Trailer capture: the canvas takes the clip's shape, centred, with nothing over it */
body.ga-capture #ga-canvas { position: fixed; inset: 0; margin: auto; }
body.ga-capture-9x16 #ga-canvas { width: min(100vw, 56.25vh) !important; height: min(100vh, 177.78vw) !important; }
body.ga-capture-16x9 #ga-canvas { width: min(100vw, 177.78vh) !important; height: min(100vh, 56.25vw) !important; }
body.ga-capture #forge-ask-open, body.ga-capture #ga-click-to-play { display: none !important; }
.ga-capture-label { position: fixed; z-index: 41; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(8, 8, 10, .8); color: var(--ga-text); font-weight: 700; }
.ga-capture-label::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--ga-bad); vertical-align: 0; }

/* squad: ping marker and quick-chat menu */
.ga-mk-ping { margin: -14px 0 0 -10px; text-align: center; color: #ffd25a; font: 700 12px/1.1 system-ui, sans-serif; text-shadow: 0 1px 2px #000; }
.ga-mk-ping b { display: block; font-size: 20px; } .ga-mk-ping[data-kind="enemy"] { color: #ff6a6a; }
.ga-chat { position: absolute; left: 16px; top: auto; bottom: 140px; transform: none; width: min(340px, calc(100% - 32px)); pointer-events: auto; }
.ga-chat h2 { margin: 0 0 8px; font-size: 1.05em; } .ga-chat h2 small { font-weight: 500; opacity: .75; }
.ga-chat-list { display: grid; gap: 6px; }
.ga-chat-list button { min-height: 44px; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(20,18,30,.82); color: #fff; font: inherit; cursor: pointer; }
.ga-chat-list button.on { border-color: #ff8428; background: rgba(255,132,40,.22); }
.ga-chat-list kbd { display: inline-block; min-width: 1.4em; text-align: center; margin-right: 6px; font: 700 .85em ui-monospace, monospace; opacity: .8; }
.ga-chat-hint { margin: 8px 0 0; font-size: .82em; opacity: .75; }
.ga-chat-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
@media (max-width: 480px) { .ga-chat { left: 8px; bottom: 200px; width: calc(100% - 16px); } }

/* Concrete Crown campaigns (The Crown / The Family) */
.ga-campaign { margin: 0 0 22px; padding: 16px; border: 1px solid var(--ga-line); border-radius: 14px; background: linear-gradient(160deg, #1a1410, var(--ga-panel) 60%); }
.ga-campaign h2 { margin: 6px 0 4px; font-size: 1.3rem; } .ga-campaign h2 small { color: var(--ga-dim); font-size: .85rem; font-weight: 600; margin-left: 6px; }
.ga-campaign h3 { margin: 16px 0 4px; font-size: 1rem; }
.ga-camp-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ga-territory { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.ga-terr { padding: 10px; border-radius: 10px; background: var(--ga-panel2); border: 1px solid var(--ga-line); display: grid; gap: 6px; }
.ga-terr span { display: flex; gap: 5px; } .ga-terr i { width: 18px; height: 18px; border-radius: 4px; background: #2a2c31; border: 1px solid var(--ga-line); }
.ga-terr i.own-crown { background: var(--ga-c0); clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; } .ga-terr i.own-ironside { background: var(--ga-c1); border: 0; }
.ga-terr small { color: var(--ga-dim); }
.ga-chapters summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.ga-chapters ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .ga-chapters li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ga-chapters li small { color: var(--ga-dim); margin-left: 4px; }
.ga-brief-card { width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.ga-lines { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.ga-lines li { display: flex; gap: 10px; align-items: flex-start; } .ga-lines b { display: inline; } .ga-lines small { color: var(--ga-dim); margin-left: 6px; font-size: .78rem; } .ga-lines p { margin: 2px 0 0; }
.ga-face { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #2a2c31; border: 2px solid var(--ga-line); }
.ga-face--i { display: grid; place-items: center; font-weight: 800; color: var(--ga-hot); }
.ga-goal { padding: 10px 12px; border-left: 3px solid var(--ga-hot); background: var(--ga-panel2); border-radius: 6px; }
.ga-camp-debrief { margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--ga-panel2); border: 1px solid var(--ga-line); }
.ga-choice { margin-top: 10px; display: grid; gap: 8px; } .ga-choice .ga-btn { text-align: left; }
.ga-medal { font-weight: 800; } .ga-medal small { display: block; color: var(--ga-dim); font-weight: 400; }
.ga-medal--1 { color: #c98b4b; } .ga-medal--2 { color: #cfd6de; } .ga-medal--3 { color: #ffd34d; }
.ga-next { margin: 8px 0 0; }

/* Concrete Crown saga: the empire, word from the cities, the crowning */
.ga-empire { margin: 10px 0 14px; padding: 12px; border-radius: 12px; background: #120f0c; border: 1px solid var(--ga-line); }
.ga-empire-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ga-cash { font: 800 1.35rem/1 ui-monospace, monospace; color: #7fd18b; }
.ga-rep { padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: .85rem; background: #2a2c31; }
.ga-rep--feared { background: #5a1c1c; color: #ffb3a8; } .ga-rep--respected { background: #1c4a3a; color: #a8f0d0; } .ga-rep--calculating { background: #3a2c50; color: #d7c3ff; }
.ga-grudge { color: #ff8a7a; font-weight: 700; font-size: .85rem; }
.ga-holds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 10px 0; }
.ga-holding { padding: 10px; border-radius: 10px; background: var(--ga-panel2); border: 1px solid var(--ga-line); display: grid; gap: 4px; }
.ga-holding.lost { border-color: #8a2a2a; opacity: .8; } .ga-holding small { color: var(--ga-dim); } .ga-holding em { color: var(--ga-hot); font-style: normal; font-weight: 700; }
.ga-holding label { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 6px; font-size: .8rem; color: var(--ga-dim); }
.ga-bar { display: block; height: 8px; border-radius: 4px; background: #2a2c31; overflow: hidden; min-width: 60px; }
.ga-bar i { display: block; height: 100%; background: #6cc28a; } .ga-bar.warn i { background: #e0a030; } .ga-bar.heat i { background: #e0603a; } .ga-bar.loyal i { background: #c9a227; }
.ga-word { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--ga-panel2); border: 1px solid var(--ga-line); border-left: 3px solid #7aa6c2; }
.ga-word--crisis { border-left-color: #e0503a; } .ga-word--family { border-left-color: #c9a227; } .ga-word--succession { border-left-color: var(--ga-hot); }
.ga-word .ga-btn small { display: block; color: var(--ga-dim); font-weight: 400; }
.ga-word--succession .ga-btn { display: flex; gap: 10px; align-items: center; } .ga-word--succession .ga-face { width: 36px; height: 36px; }
.ga-returns { display: grid; gap: 6px; }
.ga-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ga-crew { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.ga-crew li { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 8px; } .ga-crew li span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ga-crew .ga-face { width: 32px; height: 32px; } .ga-crew small { color: var(--ga-dim); width: 100%; } .ga-crew li.gone { opacity: .5; }
.ga-log { margin: 0; padding-left: 18px; color: var(--ga-dim); font-size: .85rem; }
.ga-report { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #101a12; } .ga-report p { margin: 0; } .ga-report ul { margin: 4px 0 0; padding-left: 18px; }
.ga-word-h { margin: 12px 0 4px; } .ga-bad { color: #ff8a7a; }
.ga-crown-btn { background: linear-gradient(180deg, #ffd36a, #c9902a); color: #1a1208; border-color: #ffd36a; }
.ga-crowning { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: #07060a; color: #f3eee6; }
.ga-crowning[hidden] { display: none; }
.ga-crowning-sky { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 20%, #3a2a1a 0%, #120c14 45%, #050408 100%); pointer-events: none; }
.ga-crowning-city { position: absolute; left: 0; right: 0; bottom: 0; height: 32vh; opacity: .55;
  background: linear-gradient(transparent 0 40%, #000 40%) 0 0 / 60px 100%, repeating-linear-gradient(90deg, #0d0b10 0 34px, #17131c 34px 52px, #0a090d 52px 90px);
  mask: linear-gradient(to top, #000 60%, transparent); clip-path: polygon(0 40%, 6% 40%, 6% 20%, 12% 20%, 12% 50%, 20% 50%, 20% 10%, 26% 10%, 26% 35%, 34% 35%, 34% 0, 38% 0, 38% 30%, 48% 30%, 48% 15%, 56% 15%, 56% 45%, 64% 45%, 64% 5%, 70% 5%, 70% 38%, 80% 38%, 80% 22%, 88% 22%, 88% 48%, 100% 48%, 100% 100%, 0 100%); }
.ga-sparks i { position: absolute; top: -10px; width: 4px; height: 10px; border-radius: 2px; opacity: 0; animation: ga-fall 3.5s ease-in infinite; }
@keyframes ga-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
.ga-crowning-card { position: relative; width: min(680px, calc(100% - 32px)); margin: 40px auto 60px; text-align: center; }
.ga-crowning-stage { position: relative; width: 200px; height: 240px; margin: 0 auto 8px; }
.ga-crowning-face { position: absolute; left: 20px; bottom: 0; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
  background: #1c1820; border: 3px solid #ffd36a; box-shadow: 0 0 0 0 rgba(255, 211, 106, .6); animation: ga-glow 2.4s ease-out 1.8s both; }
.ga-crowning-face img { width: 100%; height: 100%; object-fit: cover; }
@keyframes ga-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 211, 106, .0); } 40% { box-shadow: 0 0 60px 16px rgba(255, 211, 106, .55); } 100% { box-shadow: 0 0 28px 4px rgba(255, 211, 106, .3); } }
.ga-crown-svg { position: absolute; left: 50px; top: 0; width: 100px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); animation: ga-crown-down 2.2s cubic-bezier(.2, .7, .2, 1) .4s both; }
@keyframes ga-crown-down { 0% { transform: translateY(-140px) rotate(-12deg) scale(1.4); opacity: 0; } 55% { opacity: 1; } 80% { transform: translateY(46px) rotate(2deg) scale(1); } 100% { transform: translateY(40px) rotate(-4deg) scale(1); opacity: 1; } }
.ga-crowning-title { font-size: clamp(1.6rem, 6vw, 2.6rem); margin: 6px 0; background: linear-gradient(180deg, #fff3cf, #ffd36a 60%, #c9902a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ga-crowning-sub { color: #cfc6b8; margin: 0; } .ga-crowning-crown { color: #e8dcc0; }
.ga-crowning .ga-lines, .ga-epi { text-align: left; } .ga-epi { padding-left: 18px; display: grid; gap: 6px; }
.ga-crowning h3 { margin: 22px 0 6px; color: #ffd36a; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.ga-crowning-code { font: 600 .82rem ui-monospace, monospace; color: #b8ad9a; margin-top: 18px; }
.ga-reveal { opacity: 0; animation: ga-reveal .9s ease-out var(--d, 0s) both; }
@keyframes ga-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ga-reveal, .ga-crown-svg, .ga-crowning-face, .ga-sparks i { animation: none !important; opacity: 1; } .ga-crown-svg { transform: translateY(40px); } .ga-sparks { display: none; } }
.ga-word .ga-btn { flex-wrap: wrap; justify-content: flex-start; } .ga-word .ga-btn small { flex-basis: 100%; }

/* Concrete Crown: The Rise. Layout must remain usable at 360px and with keyboard. */
.ga-origins{margin:16px 0 28px;padding:clamp(12px,3vw,24px);background:linear-gradient(165deg,rgba(35,34,34,.94),rgba(9,10,12,.98));border:1px solid rgba(235,181,112,.33);border-radius:16px;box-shadow:0 14px 45px #0008;}
.ga-origin-heading h2{font-size:clamp(1.5rem,4.2vw,2.45rem);margin:6px 0 10px;letter-spacing:.012em;}
.ga-origin-heading>p{max-width:78ch;}
.ga-origin-cities,.ga-origin-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;}
.ga-origin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin-top:12px;}
.ga-origin-family{border:1px solid #77614c;background:linear-gradient(125deg,#1e1e24,#0d1014);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;}
.ga-origin-family.is-active{border-color:#eec58b;box-shadow:inset 0 0 0 1px #fbd69a;}
.ga-origin-family h3{font-size:1.16rem;line-height:1.25;margin:0;}
.ga-origin-family p{margin:4px 0;line-height:1.5;}
.ga-origin-family small{opacity:.85;line-height:1.45;}
.ga-origin-family button{margin-top:auto;min-height:44px;}
.ga-origin-now{margin:16px 0 22px;border:1px solid #a27b4c;border-left:4px solid #edbb72;border-radius:10px;background:#21190f;padding:16px;}
.ga-origin-now h3{margin:6px 0;}
.ga-origin-now p{line-height:1.55;}
.ga-origin-buttons>button{white-space:normal;flex:1 1 230px;text-align:left;min-height:58px;}
.ga-origin-buttons small{display:block;opacity:.82;font-weight:400;margin-top:4px;}
.ga-classic-saga{margin:16px 0 25px;border:1px solid #574a3b;border-radius:10px;padding:12px;background:#131416;}
.ga-classic-saga>summary{cursor:pointer;padding:8px;min-height:44px;font-weight:700;}
.ga-origin-debrief{margin:16px 0;border-top:1px solid #ae8856;padding-top:16px;}
.ga-origins :focus-visible,.ga-classic-saga :focus-visible{outline:3px solid #ffbd62;outline-offset:3px;}
@media(max-width:460px){.ga-origins{padding:12px}.ga-origin-grid{grid-template-columns:1fr}.ga-origin-cities .ga-btn{flex:1 1 100%;min-height:44px}}
@media(prefers-reduced-motion:reduce){.ga-origins *{animation:none!important;transition:none!important}}

/* ===== Call of Duty Mobile control layout (phones) =====
   Left thumb: floating move stick anywhere on the left half (push all the way to sprint) + a left Fire button.
   Right thumb: swipe anywhere on the right half to look (no visible stick), big Fire with Aim, Reload, Jump,
   Crouch, Grenade and Swap arced around it. Auto-fire shoots when the crosshair is on an enemy.
   Ping, Chat and Run leave the screen (auto-sprint, keyboard shortcuts unchanged). */
.ga-stick-look{display:none !important}
.ga-touch .ga-t-right{display:block !important;position:absolute !important;inset:0 !important;right:0 !important;bottom:0 !important;left:0 !important;pointer-events:none !important;direction:ltr !important}
.ga-touch .ga-t-right > .ga-t,.ga-touch > .ga-t-lfire{position:absolute;pointer-events:auto;margin:0;padding:0;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.42);background:rgba(10,10,14,.42);box-shadow:0 4px 14px rgba(0,0,0,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.ga-touch .ga-t-right > [data-ga="fire"]{right:calc(max(16px,env(safe-area-inset-right)) + 0px);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 46px);
  width:calc(86px*var(--ga-touch));height:calc(86px*var(--ga-touch));background:rgba(214,58,36,.55);border-color:rgba(255,190,160,.75);font-size:calc(15px*var(--ga-touch))}
.ga-touch .ga-t-right > [data-ga="ads"]{right:calc(max(16px,env(safe-area-inset-right)) + 104px*var(--ga-touch));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 14px);width:calc(60px*var(--ga-touch));height:calc(60px*var(--ga-touch))}
.ga-touch .ga-t-right > [data-ga="reload"]{right:calc(max(16px,env(safe-area-inset-right)) + 112px*var(--ga-touch));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 92px*var(--ga-touch));width:calc(52px*var(--ga-touch));height:calc(52px*var(--ga-touch))}
.ga-touch .ga-t-right > [data-ga="jump"]{right:calc(max(16px,env(safe-area-inset-right)) + 18px);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 150px*var(--ga-touch));width:calc(56px*var(--ga-touch));height:calc(56px*var(--ga-touch))}
.ga-touch .ga-t-right > [data-ga="crouch"]{right:calc(max(16px,env(safe-area-inset-right)) + 86px*var(--ga-touch));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 158px*var(--ga-touch));width:calc(52px*var(--ga-touch));height:calc(52px*var(--ga-touch))}
.ga-touch .ga-t-right > [data-ga="grenade"]{right:calc(max(16px,env(safe-area-inset-right)) + 176px*var(--ga-touch));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 120px*var(--ga-touch));width:calc(46px*var(--ga-touch));height:calc(46px*var(--ga-touch))}
.ga-touch .ga-t-right > [data-ga="swap"]{right:calc(max(16px,env(safe-area-inset-right)) + 180px*var(--ga-touch));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 30px);width:calc(46px*var(--ga-touch));height:calc(46px*var(--ga-touch))}
.ga-touch .ga-t-right > [data-ga="use"]{right:calc(max(16px,env(safe-area-inset-right)) + 232px*var(--ga-touch));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 84px*var(--ga-touch));width:calc(44px*var(--ga-touch));height:calc(44px*var(--ga-touch));font-size:11px}
.ga-touch .ga-t-right > [data-ga="tool"]{right:calc(max(16px,env(safe-area-inset-right)) + 236px*var(--ga-touch));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 142px*var(--ga-touch));width:calc(44px*var(--ga-touch));height:calc(44px*var(--ga-touch));font-size:11px}
.ga-touch .ga-t-right > [data-ga="sprint"],.ga-touch .ga-t-right > [data-ga="ping"],.ga-touch .ga-t-right > [data-ga="chat"]{display:none !important}
.ga-touch > .ga-t-lfire{left:calc(max(18px,env(safe-area-inset-left)) + 10px);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 168px*var(--ga-touch));
  width:calc(58px*var(--ga-touch));height:calc(58px*var(--ga-touch));background:rgba(214,58,36,.45);border-color:rgba(255,190,160,.6);font:700 calc(12px*var(--ga-touch)) system-ui;color:#fff;border-radius:50%}
.ga-touch.left .ga-t-right{transform:scaleX(-1)}
.ga-touch.left .ga-t-right > .ga-t{transform:scaleX(-1)}
.ga-touch.left > .ga-t-lfire{left:auto;right:calc(max(18px,env(safe-area-inset-right)) + 10px)}
/* Pause in the top-left corner (it sat on the compass); weapon/ammo bottom-center; kill feed top-left. */
.ga-touch > .ga-t-pause{left:max(12px,env(safe-area-inset-left)) !important;top:max(10px,env(safe-area-inset-top)) !important;transform:none !important}
body.ga-playing:has(#ga-touch:not([hidden])) .ga-weapon{top:auto !important;bottom:max(8px,env(safe-area-inset-bottom)) !important;right:auto !important;left:50% !important;transform:translateX(-50%) !important;text-align:center !important;padding:6px 12px !important}
body.ga-playing:has(#ga-touch:not([hidden])) .ga-feed{top:calc(max(10px,env(safe-area-inset-top)) + 60px) !important;right:auto !important;left:max(12px,env(safe-area-inset-left)) !important;justify-items:start !important;max-width:min(300px,40vw) !important}
@media (orientation:portrait){
  .ga-touch .ga-t-right > [data-ga="fire"]{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px)}
}
/* PLAY NOW: one tap from the landing into a match */
.ga-quickplay{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,420px);margin:18px 0 6px;padding:18px 22px;border:0;border-radius:16px;cursor:pointer;
  background:linear-gradient(180deg,#ffb04a,#ff6a10);color:#1a0b00;font:900 24px/1 system-ui,-apple-system,sans-serif;letter-spacing:.08em;box-shadow:0 14px 34px rgba(255,106,16,.45)}
.ga-quickplay small{font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.02em;opacity:.8}
.ga-quickplay:disabled{opacity:.7;cursor:progress}
.ga-quickplay-alt{margin:4px 0 0;color:#cfc6b8;font-size:14px}