/* ΣΤΡΑΤΟΠΕΔΑ — UI stylesheet (STRAT.UI). Military stencil look: olive / khaki / steel, faction blue & red accents.
   All overlays live inside #strat-ui above the game canvas. No external fonts, no external assets. */

:root {
  --su-font: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --su-olive: #4a5a2e;
  --su-olive-dk: #2c3720;
  --su-olive-lt: #6f8340;
  --su-khaki: #c9b785;
  --su-khaki-lt: #e6d9ad;
  --su-khaki-dk: #8f7d4e;
  --su-steel: #5b6670;
  --su-steel-lt: #8b98a4;
  --su-steel-dk: #333b42;
  --su-ink: #14180f;
  --su-gold: #ffd24d;
  --su-gold-dk: #c9931c;
  --su-blue: #2b6cd9;
  --su-blue-dk: #173f86;
  --su-blue-lt: #9cc2ff;
  --su-red: #d0342c;
  --su-red-dk: #7d1a14;
  --su-red-lt: #ff9d95;
  --su-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .5);
  --su-sat: env(safe-area-inset-top, 0px);
  --su-sar: env(safe-area-inset-right, 0px);
  --su-sab: env(safe-area-inset-bottom, 0px);
  --su-sal: env(safe-area-inset-left, 0px);
  --su-hud-pad: 14px;
  --su-hud-btn: 52px;
  --su-score-h: 62px;   /* rendered height of the score plate (the zoom row sits under it) */
}

#strat-ui, #strat-ui * { box-sizing: border-box; }

#strat-ui {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  font-family: var(--su-font);
  font-weight: 900;
  color: var(--su-khaki-lt);
  text-transform: uppercase;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
#strat-ui button { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; }
#strat-ui .su-hidden { display: none !important; }

/* ------------------------------------------------------------------ FX: scanlines / grain / vignette */
#strat-ui .su-fx {
  position: absolute; inset: 0; pointer-events: none; z-index: 90;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .55;
}
#strat-ui .su-fx::after {
  content: ""; position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .16; animation: su-grain 1.1s steps(3) infinite;
}
@keyframes su-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* ------------------------------------------------------------------ Screens (full-screen, blocking) */
#strat-ui .su-screen {
  position: absolute; inset: 0; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--su-sat)) calc(16px + var(--su-sar)) calc(16px + var(--su-sab)) calc(16px + var(--su-sal));
  overflow: hidden; touch-action: none;
}
#strat-ui .su-screen--scroll { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; align-items: flex-start; -webkit-overflow-scrolling: touch; }
#strat-ui .su-screen--dim { background: radial-gradient(ellipse at 50% 40%, rgba(20, 26, 14, .62), rgba(8, 10, 6, .86)); }
#strat-ui .su-screen--dim.su-in { animation: su-fade .28s ease-out both; }
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ Title */
#strat-ui .su-title { background: #1a1f14; }
#strat-ui .su-title .su-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#strat-ui .su-title .su-cloud {
  position: absolute; top: 12%; left: -30%; width: 40%; height: 22%;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 235, 200, .16), rgba(255, 235, 200, 0) 65%);
  animation: su-cloud 44s linear infinite; pointer-events: none;
}
#strat-ui .su-title .su-cloud.b { top: 24%; width: 26%; height: 14%; animation-duration: 63s; animation-delay: -30s; opacity: .7; }
@keyframes su-cloud { from { transform: translateX(0); } to { transform: translateX(360%); } }
#strat-ui .su-title .su-search {
  position: absolute; bottom: 30%; width: 6px; height: 120vmax; left: 14%; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 250, 220, .28), rgba(255, 250, 220, 0));
  filter: blur(6px); animation: su-search 9s ease-in-out infinite alternate; pointer-events: none; opacity: .8;
}
#strat-ui .su-title .su-search.b { left: 86%; animation-duration: 12s; animation-delay: -5s; }
@keyframes su-search { from { transform: rotate(-38deg); } to { transform: rotate(30deg); } }
#strat-ui .su-title .su-jets {
  position: absolute; top: 9%; left: -12%; width: 90px; height: 40px; pointer-events: none; opacity: .75;
  animation: su-jets 26s linear infinite;
}
#strat-ui .su-title .su-jets i { position: absolute; width: 16px; height: 5px; background: #1b1f18; border-radius: 40% 60% 60% 40%; box-shadow: -60px 0 0 -1px rgba(255, 255, 255, .12); }
#strat-ui .su-title .su-jets i::after { content: ""; position: absolute; right: 16px; top: 2px; width: 120px; height: 2px; background: linear-gradient(to left, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); }
#strat-ui .su-title .su-jets i:nth-child(1) { left: 40px; top: 0; }
#strat-ui .su-title .su-jets i:nth-child(2) { left: 20px; top: 14px; }
#strat-ui .su-title .su-jets i:nth-child(3) { left: 0; top: 28px; }
@keyframes su-jets { from { transform: translateX(0); } to { transform: translateX(130vw); } }

#strat-ui .su-title .su-title-inner {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; max-width: 1100px; text-align: center; padding: 4px 0;
}
#strat-ui .su-title .su-title-row { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 44px); width: 100%; }
#strat-ui .su-title .su-title-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
#strat-ui .su-title .su-kicker {
  font-size: clamp(11px, 1.4vw, 15px); letter-spacing: .42em; color: var(--su-khaki); opacity: 0;
  text-shadow: 0 2px 0 #000; animation: su-rise .5s .25s ease-out forwards;
}
#strat-ui .su-title h1 {
  margin: 4px 0 0; font-size: clamp(42px, 8.4vw, 118px); line-height: .95; letter-spacing: .06em;
  color: var(--su-khaki-lt);
  background: linear-gradient(180deg, #f3e9c4 0%, #d9c890 42%, #b8a267 50%, #e3d4a2 58%, #cdbb84 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #2a2410) drop-shadow(0 8px 0 rgba(0, 0, 0, .45)) drop-shadow(0 18px 24px rgba(0, 0, 0, .6));
  position: relative; opacity: 0; transform: scale(1.6);
  animation: su-title-in .7s cubic-bezier(.2, 1.4, .3, 1) .1s forwards;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(#000 0 45.5%, transparent 45.5% 48%, #000 48%);
  mask-image: linear-gradient(#000 0 45.5%, transparent 45.5% 48%, #000 48%);
}
@keyframes su-title-in { 0% { opacity: 0; transform: scale(1.7) translateY(-10px); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) translateY(0); } }
#strat-ui .su-title h2 {
  margin: 10px 0 0; font-size: clamp(14px, 2.2vw, 28px); letter-spacing: .32em; color: var(--su-gold);
  text-shadow: 0 2px 0 #4a3400, 0 4px 10px rgba(0, 0, 0, .7); opacity: 0; animation: su-rise .55s .55s ease-out forwards;
}
#strat-ui .su-title .su-tag {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 5px 14px;
  font-size: clamp(9px, 1.2vw, 13px); letter-spacing: .24em; color: var(--su-khaki-lt); white-space: nowrap;
  border-top: 1px solid rgba(214, 199, 146, .35); border-bottom: 1px solid rgba(214, 199, 146, .35);
  text-shadow: 0 2px 0 #000, 0 4px 10px rgba(0, 0, 0, .6); opacity: 0; animation: su-rise .5s .7s ease-out forwards;
}
#strat-ui .su-title .su-tag .ret { width: 13px; height: 13px; color: var(--su-gold); flex: 0 0 auto; animation: su-ret-spin 6s linear infinite; }
#strat-ui .su-title .su-tag .ret svg { width: 100%; height: 100%; display: block; }
@keyframes su-ret-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#strat-ui .su-title .su-vs {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: clamp(10px, 1.3vw, 14px); letter-spacing: .2em;
  opacity: 0; animation: su-rise .5s .85s ease-out forwards;
}
#strat-ui .su-title .su-vs b { padding: 4px 10px; border: 2px solid; border-radius: 3px; background: rgba(0, 0, 0, .35); }
#strat-ui .su-title .su-vs .p { color: var(--su-blue-lt); border-color: var(--su-blue); }
#strat-ui .su-title .su-vs .e { color: var(--su-red-lt); border-color: var(--su-red); }
#strat-ui .su-title .su-vs span { color: var(--su-khaki); }
#strat-ui .su-title .su-worlds { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; opacity: 0; animation: su-rise .5s .95s ease-out forwards; }
#strat-ui .su-title .su-worlds .w {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #1b2114; border: 1.5px solid var(--wc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 2px 5px rgba(0, 0, 0, .55);
}
#strat-ui .su-title .su-worlds .w svg { width: 72%; height: 72%; display: block; }
#strat-ui .su-title .su-worlds .t { margin-left: 6px; font-size: clamp(9px, 1.1vw, 12px); letter-spacing: .24em; color: var(--su-khaki-lt); text-shadow: 0 2px 0 #000, 0 3px 8px rgba(0, 0, 0, .6); white-space: nowrap; }
@keyframes su-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

#strat-ui .su-title .su-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
#strat-ui .su-title .su-btns > * { opacity: 0; animation: su-rise .45s ease-out forwards; }
#strat-ui .su-title .su-btns > :nth-child(1) { animation-delay: 1s; }
#strat-ui .su-title .su-btns > :nth-child(2) { animation-delay: 1.12s; }
#strat-ui .su-title .su-btns > :nth-child(3) { animation-delay: 1.24s; }
#strat-ui .su-title .su-foot {
  position: absolute; left: 0; right: 0; bottom: calc(10px + var(--su-sab)); text-align: center;
  font-size: 10px; letter-spacing: .3em; color: rgba(230, 217, 173, .45); pointer-events: none;
}

/* Flags (Sprites.icon('flag') canvas or CSS fallback) */
#strat-ui .su-flag {
  position: relative; width: clamp(64px, 9vw, 120px); aspect-ratio: 3 / 2; flex: 0 0 auto;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); opacity: 0; animation: su-rise .5s .4s ease-out forwards;
}
#strat-ui .su-flag--e { animation-delay: .5s; }
#strat-ui .su-flag canvas { display: block; width: 100%; height: auto; }
#strat-ui .su-flag .su-flag-css {
  position: absolute; inset: 0; border: 2px solid rgba(0, 0, 0, .6);
  transform-origin: 0 50%; animation: su-wave 2.6s ease-in-out infinite;
}
#strat-ui .su-flag--e .su-flag-css { animation-delay: -1.3s; }
@keyframes su-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-3deg) scaleX(.97); } }
#strat-ui .su-flag .su-flag-css::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#strat-ui .su-flag .su-flag-css::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, .18) 70%, rgba(0, 0, 0, .35));
}
#strat-ui .su-flag--p .su-flag-css { background: linear-gradient(180deg, #3f80e6, #2b6cd9 55%, #1e54ad); }
#strat-ui .su-flag--p .su-flag-css::before { background: var(--su-gold); }
#strat-ui .su-flag--e .su-flag-css { background: linear-gradient(180deg, #e04a41, #d0342c 55%, #a1241d); }
#strat-ui .su-flag--e .su-flag-css::before { background: #f2e6c9; }
#strat-ui .su-flag .su-pole { position: absolute; left: -6px; top: -8px; bottom: -14px; width: 5px; background: linear-gradient(90deg, #8a8f95, #d9dde0, #6b7076); border-radius: 3px; }
#strat-ui .su-flag--e .su-pole { left: auto; right: -6px; }
#strat-ui .su-flag--e .su-flag-css { transform-origin: 100% 50%; }

/* ------------------------------------------------------------------ Buttons (chunky bevel, min 48 px) */
#strat-ui .su-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; min-width: 150px; padding: 0 26px; border-radius: 6px; cursor: pointer; user-select: none;
  font-size: 17px; letter-spacing: .14em; text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 0 rgba(0, 0, 0, .35);
  border: 2px solid #1e2418;
  color: #1c2114;
  background: linear-gradient(180deg, #d5c48d 0%, #b9a56f 48%, #a08c58 52%, #b09c66 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 6px 0 #4b3f22, 0 10px 18px rgba(0, 0, 0, .55);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  transform: translateY(0); pointer-events: auto; touch-action: manipulation; -webkit-appearance: none; appearance: none;
}
#strat-ui .su-btn::after {
  content: ""; position: absolute; inset: 3px; border-radius: 3px; pointer-events: none;
  border: 1px dashed rgba(0, 0, 0, .28);
}
#strat-ui .su-btn:hover { filter: brightness(1.08); }
#strat-ui .su-btn:active, #strat-ui .su-btn.su-press { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 #4b3f22, 0 3px 6px rgba(0, 0, 0, .5); }
#strat-ui .su-btn:focus-visible { outline: 3px solid var(--su-gold); outline-offset: 3px; }
#strat-ui .su-btn--gold { color: #3a2a00; background: linear-gradient(180deg, #ffe58a 0%, #ffd24d 48%, #e6b11e 52%, #f5c63a 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 6px 0 #7a5308, 0 10px 18px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 210, 77, .25); }
#strat-ui .su-btn--gold:active, #strat-ui .su-btn--gold.su-press { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 0 #7a5308, 0 3px 6px rgba(0, 0, 0, .5); }
#strat-ui .su-btn--olive { color: #e9e1c1; text-shadow: 0 1px 0 rgba(0, 0, 0, .55); background: linear-gradient(180deg, #7d9349 0%, #5d7237 48%, #4a5b2c 52%, #55692f 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 6px 0 #232c17, 0 10px 18px rgba(0, 0, 0, .55); }
#strat-ui .su-btn--olive:active, #strat-ui .su-btn--olive.su-press { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 #232c17, 0 3px 6px rgba(0, 0, 0, .5); }
#strat-ui .su-btn--olive::after { border-color: rgba(255, 255, 255, .22); }
#strat-ui .su-btn--steel { color: #eef1f4; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); background: linear-gradient(180deg, #8d9aa6 0%, #66727c 48%, #525d66 52%, #5f6a74 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 6px 0 #262c31, 0 10px 18px rgba(0, 0, 0, .55); }
#strat-ui .su-btn--steel:active, #strat-ui .su-btn--steel.su-press { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 #262c31, 0 3px 6px rgba(0, 0, 0, .5); }
#strat-ui .su-btn--steel::after { border-color: rgba(255, 255, 255, .22); }
#strat-ui .su-btn--red { color: #fff0ec; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); background: linear-gradient(180deg, #ea5f56 0%, #d0342c 48%, #ad2620 52%, #c42f28 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 6px 0 #5a120d, 0 10px 18px rgba(0, 0, 0, .55); }
#strat-ui .su-btn--red:active, #strat-ui .su-btn--red.su-press { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 #5a120d, 0 3px 6px rgba(0, 0, 0, .5); }
#strat-ui .su-btn--red::after { border-color: rgba(255, 255, 255, .25); }
#strat-ui .su-btn--blue { color: #eef4ff; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); background: linear-gradient(180deg, #5b93ee 0%, #2b6cd9 48%, #1f55b3 52%, #2a63c7 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 6px 0 #10305f, 0 10px 18px rgba(0, 0, 0, .55); }
#strat-ui .su-btn--blue:active, #strat-ui .su-btn--blue.su-press { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 #10305f, 0 3px 6px rgba(0, 0, 0, .5); }
#strat-ui .su-btn--blue::after { border-color: rgba(255, 255, 255, .25); }
#strat-ui .su-btn--big { min-height: 62px; min-width: 220px; font-size: 21px; }
#strat-ui .su-btn.su-btn--icon { min-width: var(--su-hud-btn); width: var(--su-hud-btn); min-height: var(--su-hud-btn); height: var(--su-hud-btn); padding: 0; border-radius: 8px; flex: 0 0 auto; }
#strat-ui .su-btn.su-btn--icon svg { width: 26px; height: 26px; display: block; }
#strat-ui .su-btn svg { fill: currentColor; }
#strat-ui .su-btn .su-ico { width: 22px; height: 22px; flex: 0 0 auto; }
#strat-ui .su-btn[data-muted="1"] .su-ico-on, #strat-ui .su-btn:not([data-muted="1"]) .su-ico-off { display: none; }

/* ------------------------------------------------------------------ Panels (plates with rivets + hazard tape) */
#strat-ui .su-panel {
  position: relative; pointer-events: auto;
  background: linear-gradient(160deg, #56653a 0%, #3f4c2b 45%, #34401f 100%);
  border: 3px solid #1b2114; border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(214, 199, 146, .28), inset 0 0 60px rgba(0, 0, 0, .35), var(--su-shadow);
  padding: 26px 30px 26px; color: var(--su-khaki-lt);
}
#strat-ui .su-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
#strat-ui .su-panel > * { position: relative; }
#strat-ui .su-rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #d9d4bf, #6d6a58 60%, #2a2a22); box-shadow: 0 1px 2px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0,0,0,.35); }
#strat-ui .su-rivet.tl { left: 8px; top: 8px; } #strat-ui .su-rivet.tr { right: 8px; top: 8px; }
#strat-ui .su-rivet.bl { left: 8px; bottom: 8px; } #strat-ui .su-rivet.br { right: 8px; bottom: 8px; }
#strat-ui .su-tape {
  position: absolute; left: 18px; right: 18px; top: -3px; height: 9px; pointer-events: none;
  background: repeating-linear-gradient(135deg, #f0c419 0 12px, #1a1a14 12px 24px); border-radius: 0 0 3px 3px; opacity: .9;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}
#strat-ui .su-panel--red { background: linear-gradient(160deg, #6a2a24 0%, #4c1f1a 45%, #3a1512 100%); }
#strat-ui .su-panel--steel { background: linear-gradient(160deg, #66727d 0%, #4a545d 45%, #3a4249 100%); }

/* ------------------------------------------------------------------ Overlay (win / lose / pause) */
#strat-ui .su-overlay { z-index: 40; }
#strat-ui .su-overlay .su-panel {
  width: min(600px, 100%); max-height: 100%; overflow: auto; text-align: center;
  animation: su-pop .42s cubic-bezier(.2, 1.35, .35, 1) both;
}
@keyframes su-pop { from { opacity: 0; transform: scale(.7) translateY(20px); } to { opacity: 1; transform: none; } }
#strat-ui .su-stamp {
  display: inline-block; margin: 6px auto 4px; padding: 6px 22px; border: 5px solid; border-radius: 8px; transform: rotate(-4deg);
  font-size: clamp(38px, 6vw, 68px); line-height: 1; letter-spacing: .16em;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .35);
  animation: su-stamp .5s cubic-bezier(.2, 1.6, .4, 1) .12s both;
  background: rgba(0, 0, 0, .28);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.15'/></filter><rect width='100%' height='100%' fill='white' filter='url(%23n)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.15'/></filter><rect width='100%' height='100%' fill='white' filter='url(%23n)'/></svg>");
}
@keyframes su-stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 70% { opacity: 1; transform: rotate(-3deg) scale(.94); } 100% { transform: rotate(-4deg) scale(1); } }
#strat-ui .su-stamp--win { color: var(--su-gold); border-color: var(--su-gold); text-shadow: 0 2px 0 #6b4a00, 0 0 24px rgba(255, 210, 77, .45); }
#strat-ui .su-stamp--lose { color: #ff6b61; border-color: #ff6b61; text-shadow: 0 2px 0 #4a0d09, 0 0 24px rgba(255, 90, 80, .4); }
#strat-ui .su-stamp--pause { color: var(--su-blue-lt); border-color: var(--su-blue-lt); text-shadow: 0 2px 0 #0f2d5e; transform: rotate(0); animation: su-pop .4s cubic-bezier(.2, 1.35, .35, 1) both; }
#strat-ui .su-sub { margin: 6px 0 0; font-size: 12px; letter-spacing: .3em; color: var(--su-khaki); opacity: .85; }
#strat-ui .su-stars { display: flex; justify-content: center; gap: 12px; margin: 14px 0 6px; min-height: 72px; align-items: flex-end; }
#strat-ui .su-stars .su-star { width: 66px; height: 66px; transform: scale(0); opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
#strat-ui .su-stars .su-star:nth-child(2) { width: 80px; height: 80px; margin-bottom: 8px; }
#strat-ui .su-stars .su-star.on { animation: su-star-pop .55s cubic-bezier(.3, 1.9, .4, 1) both; }
#strat-ui .su-stars .su-star.off { animation: su-star-off .35s ease-out both; }
#strat-ui .su-stars .su-star canvas, #strat-ui .su-stars .su-star svg { width: 100%; height: 100%; display: block; }
@keyframes su-star-pop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 65% { transform: scale(1.25) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes su-star-off { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: .35; } }
#strat-ui .su-star.on.su-shine::after { content: ""; position: absolute; }
#strat-ui .su-score-box { margin: 8px auto 4px; display: inline-flex; flex-direction: column; align-items: center; padding: 8px 26px 10px; border-radius: 6px; background: rgba(0, 0, 0, .35); border: 2px solid rgba(214, 199, 146, .25); min-width: 240px; }
#strat-ui .su-score-box .lbl { font-size: 11px; letter-spacing: .34em; color: var(--su-khaki); }
#strat-ui .su-score-box .val { font-size: clamp(30px, 5vw, 48px); line-height: 1.05; color: #fff8dc; text-shadow: 0 2px 0 #3a2f00, 0 0 18px rgba(255, 210, 77, .35); font-variant-numeric: tabular-nums; }
#strat-ui .su-best { margin-top: 6px; font-size: 12px; letter-spacing: .2em; color: var(--su-khaki); display: flex; align-items: center; justify-content: center; gap: 10px; }
#strat-ui .su-badge { display: inline-block; padding: 3px 9px; border-radius: 3px; font-size: 10px; letter-spacing: .2em; background: var(--su-gold); color: #3a2a00; animation: su-blink 1.2s ease-in-out infinite; }
@keyframes su-blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
#strat-ui .su-ov-main, #strat-ui .su-ov-side { display: flex; flex-direction: column; align-items: center; min-width: 0; }
#strat-ui .su-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
#strat-ui .su-row .su-btn { min-width: 140px; }
#strat-ui .su-row .su-btn--big { min-width: 190px; }
#strat-ui .su-row .su-btn.su-btn--icon { min-width: var(--su-hud-btn); }
#strat-ui .su-btn--mute .su-ico svg { width: 22px; height: 22px; display: block; }
#strat-ui .su-overlay .su-row > * { opacity: 0; animation: su-rise .35s ease-out forwards; }
#strat-ui .su-overlay .su-row > :nth-child(1) { animation-delay: .35s; }
#strat-ui .su-overlay .su-row > :nth-child(2) { animation-delay: .45s; }
#strat-ui .su-overlay .su-row > :nth-child(3) { animation-delay: .55s; }
#strat-ui .su-tip { margin-top: 14px; font-size: 10px; letter-spacing: .22em; color: rgba(230, 217, 173, .6); }

/* ------------------------------------------------------------------ Level select */
#strat-ui .su-levels { background: radial-gradient(ellipse at 50% 20%, #4a5a2e 0%, #2a3320 55%, #171c11 100%); }
#strat-ui .su-levels::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(214, 199, 146, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 199, 146, .5) 1px, transparent 1px);
  background-size: 48px 48px;
}
#strat-ui .su-levels-inner { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; animation: su-fade .3s ease-out both; }
#strat-ui .su-levels-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
#strat-ui .su-levels-head h2 { margin: 0; font-size: clamp(20px, 3.4vw, 36px); letter-spacing: .2em; color: var(--su-khaki-lt); text-shadow: 0 3px 0 #1b2114, 0 6px 12px rgba(0, 0, 0, .6); }
#strat-ui .su-levels-head .su-total { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 6px; background: rgba(0, 0, 0, .4); border: 2px solid rgba(214, 199, 146, .25); font-size: 15px; color: var(--su-gold); letter-spacing: .12em; }
#strat-ui .su-levels-head .su-total svg { width: 20px; height: 20px; }
#strat-ui .su-levels-head .su-head-r { display: flex; align-items: center; gap: 12px; }
#strat-ui .su-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding-bottom: 10px; }
#strat-ui .su-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 132px; padding: 12px 10px 12px; border-radius: 8px; cursor: pointer; text-align: center; pointer-events: auto;
  border: 3px solid #1b2114; color: var(--su-khaki-lt);
  background: linear-gradient(170deg, #6f8340 0%, #4a5a2e 55%, #3a4724 100%);
  box-shadow: inset 0 0 0 2px rgba(214, 199, 146, .28), inset 0 -8px 12px rgba(0, 0, 0, .25), 0 6px 0 #1b2114, 0 12px 18px rgba(0, 0, 0, .5);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  opacity: 0; animation: su-card-in .4s ease-out both;
}
#strat-ui .su-card:hover { transform: translateY(-4px); filter: brightness(1.1); box-shadow: inset 0 0 0 2px rgba(214, 199, 146, .4), inset 0 -8px 12px rgba(0, 0, 0, .25), 0 10px 0 #1b2114, 0 18px 24px rgba(0, 0, 0, .55); }
#strat-ui .su-card:active, #strat-ui .su-card.su-press { transform: translateY(4px) scale(.98); box-shadow: inset 0 0 0 2px rgba(214, 199, 146, .28), 0 2px 0 #1b2114, 0 4px 8px rgba(0, 0, 0, .5); }
#strat-ui .su-card:focus-visible { outline: 3px solid var(--su-gold); outline-offset: 2px; }
@keyframes su-card-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
#strat-ui .su-card .num { font-size: 34px; line-height: 1; color: #fff8dc; text-shadow: 0 3px 0 #1b2114, 0 5px 8px rgba(0, 0, 0, .5); }
#strat-ui .su-card .name { font-size: 10.5px; letter-spacing: .12em; line-height: 1.25; color: var(--su-khaki-lt); min-height: 26px; display: flex; align-items: center; }
#strat-ui .su-card .su-mini-stars { display: flex; gap: 3px; }
#strat-ui .su-card .su-mini-stars svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#strat-ui .su-card .su-best-s { font-size: 9px; letter-spacing: .12em; color: var(--su-khaki); opacity: .8; }
#strat-ui .su-card .tod { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; opacity: .8; }
#strat-ui .su-card .tod svg { width: 100%; height: 100%; }
#strat-ui .su-card--current { border-color: var(--su-gold); box-shadow: inset 0 0 0 2px rgba(255, 210, 77, .5), 0 6px 0 #7a5308, 0 12px 18px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 210, 77, .3); }
#strat-ui .su-card--current::before { content: "ΝΕΑ"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 3px; background: var(--su-gold); color: #3a2a00; font-size: 9px; letter-spacing: .2em; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
#strat-ui .su-card--locked { cursor: not-allowed; filter: saturate(.25) brightness(.75); background: linear-gradient(170deg, #5d6670 0%, #434b53 55%, #333b42 100%); }
#strat-ui .su-card--locked:hover { transform: none; filter: saturate(.25) brightness(.8); box-shadow: inset 0 0 0 2px rgba(214, 199, 146, .28), 0 6px 0 #1b2114, 0 12px 18px rgba(0, 0, 0, .5); }
#strat-ui .su-card--locked .lock { width: 30px; height: 30px; margin: 4px 0; }
#strat-ui .su-card--locked .lock svg { width: 100%; height: 100%; fill: #d9d4bf; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#strat-ui .su-card--locked .name { opacity: .55; }
#strat-ui .su-card--locked::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .12) 0 8px, transparent 8px 16px); pointer-events: none; }

/* ---- v1.2 chapters: one section per world (SPEC §12.2) — accent stripe, emblem, per-world card tint */
#strat-ui .su-worlds-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 390px), 1fr)); gap: 16px 18px; align-items: start; padding-bottom: 10px; }
#strat-ui .su-world {
  --wc: #7fae4e; --wt1: #6f8340; --wt2: #4a5a2e; --wt3: #3a4724; --wglow: rgba(127, 174, 78, .16);
  position: relative; margin: 0; padding: 10px 14px 14px 18px; border-radius: 10px; min-width: 0;
  background: linear-gradient(100deg, var(--wglow) 0%, rgba(0, 0, 0, .18) 38%, rgba(0, 0, 0, .12) 100%);
  border: 2px solid rgba(20, 24, 15, .7);
  box-shadow: inset 0 1px 0 rgba(214, 199, 146, .12), 0 6px 14px rgba(0, 0, 0, .35);
  animation: su-fade .35s ease-out both;
}
#strat-ui .su-world::before {
  content: ""; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 7px; border-radius: 10px 0 0 10px;
  background: repeating-linear-gradient(180deg, var(--wc) 0 14px, rgba(0, 0, 0, .55) 14px 17px);
  box-shadow: 0 0 12px var(--wglow);
}
#strat-ui .su-world--wide { grid-column: 1 / -1; }   /* a chapter with many levels (e.g. data without `world`) spans the full width */
#strat-ui .su-world--plains { --wt1: #6f8340; --wt2: #4a5a2e; --wt3: #3a4724; --wglow: rgba(127, 174, 78, .20); }
#strat-ui .su-world--desert { --wt1: #b8904a; --wt2: #8c6a32; --wt3: #6b4f23; --wglow: rgba(224, 176, 87, .22); }
#strat-ui .su-world--snow   { --wt1: #88a8bb; --wt2: #5f7f93; --wt3: #465f70; --wglow: rgba(191, 227, 245, .20); }
#strat-ui .su-world--jungle { --wt1: #45834a; --wt2: #2e6135; --wt3: #214828; --wglow: rgba(63, 154, 82, .24); }
#strat-ui .su-world--city   { --wt1: #817a70; --wt2: #5d5851; --wt3: #433f3a; --wglow: rgba(179, 168, 154, .18); }
#strat-ui .su-world--harbor { --wt1: #4677a0; --wt2: #2f577a; --wt3: #213f5b; --wglow: rgba(79, 155, 209, .24); }
#strat-ui .su-world-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#strat-ui .su-world-head .emb {
  width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .14), rgba(0, 0, 0, .55) 70%), #1b2114;
  border: 2px solid var(--wc); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .55), 0 0 14px var(--wglow);
}
#strat-ui .su-world-head .emb svg { width: 26px; height: 26px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#strat-ui .su-world-head .ttl { display: flex; flex-direction: column; line-height: 1; gap: 3px; min-width: 0; }
#strat-ui .su-world-head .ch { font-size: 9.5px; letter-spacing: .34em; color: var(--wc); text-shadow: 0 1px 0 #000; }
#strat-ui .su-world-head .nm { font-size: 20px; letter-spacing: .22em; color: #fff8dc; text-shadow: 0 2px 0 #1b2114, 0 4px 10px rgba(0, 0, 0, .55); white-space: nowrap; }
#strat-ui .su-world-head .rule { flex: 1 1 auto; height: 0; border-top: 2px dashed rgba(214, 199, 146, .22); min-width: 12px; }
#strat-ui .su-world-head .st {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 5px; flex: 0 0 auto;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(214, 199, 146, .22); font-size: 12px; letter-spacing: .1em; color: var(--su-gold);
}
#strat-ui .su-world-head .st svg { width: 16px; height: 16px; }
#strat-ui .su-world-head .st--lock { color: var(--su-khaki); }
#strat-ui .su-world-head .st--lock svg { fill: var(--su-khaki); width: 13px; height: 13px; }
#strat-ui .su-world--done .su-world-head .st { border-color: rgba(255, 210, 77, .5); box-shadow: 0 0 10px rgba(255, 210, 77, .2); }
#strat-ui .su-world--locked { filter: saturate(.55); }
#strat-ui .su-world--locked .su-world-head .emb { filter: grayscale(.7) brightness(.8); }
#strat-ui .su-world--locked .su-world-head .nm { color: var(--su-khaki); }
#strat-ui .su-world .su-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding-bottom: 4px; }
#strat-ui .su-world .su-card { background: linear-gradient(170deg, var(--wt1) 0%, var(--wt2) 55%, var(--wt3) 100%); overflow: visible; }
#strat-ui .su-world .su-card--locked { background: linear-gradient(170deg, #5d6670 0%, #434b53 55%, #333b42 100%); }
#strat-ui .su-card .wstripe { position: absolute; left: 8px; right: 8px; top: 0; height: 4px; border-radius: 0 0 3px 3px; background: var(--wc, #7fae4e); opacity: .9; box-shadow: 0 1px 0 rgba(0, 0, 0, .45); pointer-events: none; }
#strat-ui .su-card--locked .wstripe { opacity: .35; }
#strat-ui .su-world--snow .su-card .name, #strat-ui .su-world--city .su-card .name { text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
#strat-ui .su-world--snow .su-card .su-best-s, #strat-ui .su-world--desert .su-card .su-best-s { color: #fff3cf; opacity: .85; }

/* ------------------------------------------------------------------ HUD (pointer-events none, except buttons) */
#strat-ui .su-hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#strat-ui .su-hud > * { position: absolute; }
#strat-ui .su-plate {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(50, 60, 34, .88), rgba(30, 37, 20, .9)); border: 2px solid rgba(20, 24, 15, .9);
  box-shadow: inset 0 1px 0 rgba(214, 199, 146, .25), 0 4px 10px rgba(0, 0, 0, .5);
}
#strat-ui .su-hud-score { left: calc(var(--su-hud-pad) + var(--su-sal)); top: calc(var(--su-hud-pad) + var(--su-sat)); flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 16px 8px; min-width: 170px; }
#strat-ui .su-hud-score .lbl { font-size: 10px; letter-spacing: .34em; color: var(--su-khaki); }
#strat-ui .su-hud-score .val { font-size: 30px; line-height: 1; color: #fff8dc; text-shadow: 0 2px 0 #3a2f00, 0 0 14px rgba(255, 210, 77, .25); font-variant-numeric: tabular-nums; }
#strat-ui .su-hud-score .val.su-bump { animation: su-bump .35s ease-out; }
@keyframes su-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--su-gold); } 100% { transform: scale(1); } }
#strat-ui .su-hud-level { left: 50%; top: calc(var(--su-hud-pad) + var(--su-sat)); transform: translateX(-50%); flex-direction: column; gap: 0; padding: 5px 22px 7px; text-align: center; max-width: 46vw; }
#strat-ui .su-hud-level .lbl { font-size: 10px; letter-spacing: .34em; color: var(--su-gold); }
#strat-ui .su-hud-level .val { font-size: 16px; letter-spacing: .16em; color: #fff8dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#strat-ui .su-hud-btns { right: calc(var(--su-hud-pad) + var(--su-sar)); top: calc(var(--su-hud-pad) + var(--su-sat)); display: flex; gap: 8px; }
#strat-ui .su-hud-btns .su-btn { pointer-events: auto; }
/* ---- v1.2 camera row (SPEC §12.1): ＋ / − / ⤢ under the score plate. The row itself is click-through; only the buttons take input. */
#strat-ui .su-hud-zoom {
  --su-zoom-btn: 40px;
  left: calc(var(--su-hud-pad) + var(--su-sal)); top: calc(var(--su-hud-pad) + var(--su-sat) + var(--su-score-h, 62px) + 8px);
  display: flex; gap: 7px; pointer-events: none;
}
#strat-ui .su-hud-zoom .su-btn.su-btn--zoom {
  position: relative; min-width: var(--su-zoom-btn); width: var(--su-zoom-btn); min-height: var(--su-zoom-btn); height: var(--su-zoom-btn);
  padding: 0; border-radius: 7px; pointer-events: auto; touch-action: manipulation;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .3), 0 4px 0 #262c31, 0 7px 12px rgba(0, 0, 0, .5);
}
#strat-ui .su-hud-zoom .su-btn.su-btn--zoom::after { inset: 2px; border-radius: 4px; }
#strat-ui .su-hud-zoom .su-btn.su-btn--zoom svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
#strat-ui .su-hud-zoom .su-btn.su-btn--zoom:active, #strat-ui .su-hud-zoom .su-btn.su-btn--zoom.su-press { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 #262c31, 0 2px 5px rgba(0, 0, 0, .5); }
#strat-ui .su-hud-zoom .su-btn--zoom .k {
  position: absolute; right: -4px; bottom: -4px; min-width: 13px; height: 13px; padding: 0 2px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; font-size: 8px; font-style: normal; letter-spacing: 0; line-height: 1;
  background: #1b2114; color: var(--su-khaki-lt); border: 1px solid rgba(214, 199, 146, .45); box-shadow: 0 1px 0 rgba(0, 0, 0, .6); text-shadow: none; pointer-events: none;
}
#strat-ui .su-hud-zoom .su-btn--zoom.su-btn--limit { filter: saturate(.4) brightness(.72); }
#strat-ui .su-hud-zoom .su-btn--zoom.su-btn--limit svg { opacity: .6; }
#strat-ui .su-hud-zoom .su-btn--zoom.su-btn--on {
  color: #3a2a00; background: linear-gradient(180deg, #ffe58a 0%, #ffd24d 48%, #e6b11e 52%, #f5c63a 100%);
  border-color: #3a2a00; animation: su-zoom-on 1.4s ease-in-out infinite;
}
#strat-ui .su-hud-zoom .su-btn--zoom.su-btn--on svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
#strat-ui .su-hud-zoom .su-btn--zoom.su-btn--on::after { border-color: rgba(58, 42, 0, .35); }
#strat-ui .su-hud-zoom .su-btn--zoom.su-btn--on .k { background: #3a2a00; color: var(--su-gold); border-color: #7a5308; }
#strat-ui .su-hud-zoom .su-btn--zoom.su-load { animation: su-load .45s cubic-bezier(.2, 1.6, .4, 1), su-zoom-on 1.4s ease-in-out .45s infinite; }
@keyframes su-zoom-on {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 #7a5308, 0 7px 12px rgba(0, 0, 0, .5), 0 0 8px rgba(255, 210, 77, .35); }
  50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 #7a5308, 0 7px 12px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 210, 77, .75); }
}
/* ---- weapon selector «ΟΠΛΙΚΟ ΣΥΣΤΗΜΑ» (bottom-center, clear of the launcher; the ONLY HUD plate that takes pointer input) */
#strat-ui .su-hud-ammo {
  /* bottom-CENTER on every screen: the launcher truck + missile grab zone own the bottom-left corner (owner report 21-09) */
  left: 50%; transform: translateX(-50%); bottom: calc(var(--su-hud-pad) + var(--su-sab));
  flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px 12px 9px; pointer-events: auto; touch-action: manipulation;
  border-color: rgba(255, 210, 77, .35);
  box-shadow: inset 0 1px 0 rgba(214, 199, 146, .25), 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .55);
}
#strat-ui .su-hud-ammo .lbl { font-size: 10px; letter-spacing: .3em; color: var(--su-khaki); display: flex; gap: 8px; align-items: center; align-self: stretch; white-space: nowrap; }
#strat-ui .su-hud-ammo .lbl .ret { width: 13px; height: 13px; color: var(--su-gold); flex: 0 0 auto; }
#strat-ui .su-hud-ammo .lbl .ret svg { width: 100%; height: 100%; display: block; }
#strat-ui .su-hud-ammo .lbl .cur { color: var(--su-gold); letter-spacing: .18em; }
#strat-ui .su-hud-ammo .lbl .cur:not(:empty)::before { content: "·"; color: var(--su-khaki); margin-right: 8px; }
#strat-ui .su-hud-ammo .lbl .cur.out { color: #ff6b61; }
#strat-ui .su-hud-ammo .lbl .tot { margin-left: auto; padding-left: 10px; letter-spacing: .16em; color: rgba(230, 217, 173, .6); font-size: 9px; }
/* 1–2 slot loadouts: single-line header «ΟΠΛΙΚΟ ΣΥΣΤΗΜΑ · 4 ΒΟΛΕΣ» (the gold slot already names the weapon) → plate stays ≈ 230 px wide */
#strat-ui .su-weapons--few .lbl .cur { display: none; }
#strat-ui .su-weapons--few .lbl .tot { margin-left: 0; padding-left: 0; }
#strat-ui .su-weapons--few .lbl .tot:not(:empty)::before { content: "·"; margin-right: 8px; color: var(--su-khaki); font-size: 10px; }
#strat-ui .su-weapon-row { display: flex; align-items: stretch; gap: 6px; }
#strat-ui .su-weapon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 66px; height: 82px; padding: 4px 2px 3px; border-radius: 7px; cursor: pointer; user-select: none; pointer-events: auto; touch-action: manipulation;
  background: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .42)); border: 2px solid rgba(214, 199, 146, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .45);
  color: var(--su-khaki-lt); -webkit-appearance: none; appearance: none;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .2s ease;
}
#strat-ui .su-weapon:hover { filter: brightness(1.18); transform: translateY(-3px); border-color: rgba(214, 199, 146, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 5px 0 rgba(0, 0, 0, .45), 0 8px 14px rgba(0, 0, 0, .45); }
#strat-ui .su-weapon:active, #strat-ui .su-weapon.su-press { transform: translateY(2px) scale(.96); filter: brightness(1.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 rgba(0, 0, 0, .45); }
#strat-ui .su-weapon:focus-visible { outline: 3px solid var(--su-gold); outline-offset: 2px; }
#strat-ui .su-weapon .key {
  position: absolute; left: 3px; top: 3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 3px; z-index: 2;
  display: flex; align-items: center; justify-content: center; font-size: 9px; letter-spacing: 0; line-height: 1;
  background: #1b2114; color: var(--su-khaki-lt); border: 1px solid rgba(214, 199, 146, .4); box-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
#strat-ui .su-weapon .ab { position: absolute; right: 4px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--su-blue-lt); box-shadow: 0 0 0 1.5px #1b2114, 0 0 8px var(--su-blue-lt); animation: su-blink 1.4s ease-in-out infinite; }
#strat-ui .su-weapon .ico { display: block; width: 44px; height: 44px; margin-top: 2px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); transition: transform .15s ease; }
#strat-ui .su-weapon .ico canvas { display: block; width: 44px !important; height: 44px !important; }
#strat-ui .su-weapon:hover .ico { transform: scale(1.08) rotate(-4deg); }
#strat-ui .su-weapon .name { margin-top: 2px; font-size: 8px; letter-spacing: .06em; line-height: 1; white-space: nowrap; color: var(--su-khaki-lt); text-shadow: 0 1px 0 #000; }
#strat-ui .su-weapon .name.long { font-size: 7px; letter-spacing: .02em; }
#strat-ui .su-weapon .cnt { margin-top: 3px; font-size: 13px; line-height: 1; color: #fff8dc; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#strat-ui .su-weapon .cnt.su-tick { animation: su-bump .35s ease-out; }
#strat-ui .su-weapon--cur {
  border-color: var(--su-gold); background: linear-gradient(180deg, rgba(255, 210, 77, .22), rgba(255, 170, 30, .1));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 210, 77, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: su-cur-pulse 1.6s ease-in-out infinite; z-index: 1;
}
#strat-ui .su-weapon--cur .cnt { color: var(--su-gold); }
#strat-ui .su-weapon--cur .key { background: var(--su-gold); color: #3a2a00; border-color: #7a5308; }
#strat-ui .su-weapon--cur::before, #strat-ui .su-weapon--cur::after { content: ""; position: absolute; top: -7px; bottom: -7px; width: 7px; border: 2px solid var(--su-gold); pointer-events: none; }
#strat-ui .su-weapon--cur::before { left: -7px; border-right: 0; border-radius: 3px 0 0 3px; }
#strat-ui .su-weapon--cur::after { right: -7px; border-left: 0; border-radius: 0 3px 3px 0; }
@keyframes su-cur-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 210, 77, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 210, 77, .7), inset 0 1px 0 rgba(255, 255, 255, .25); } }
#strat-ui .su-weapon--empty, #strat-ui .su-weapon:disabled { opacity: .42; filter: grayscale(1) brightness(.65); cursor: not-allowed; transform: none; }
#strat-ui .su-weapon--empty:hover, #strat-ui .su-weapon:disabled:hover { transform: none; filter: grayscale(1) brightness(.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .45); border-color: rgba(214, 199, 146, .22); }
#strat-ui .su-weapon--empty .ico::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; background: #ff6b61; transform: rotate(-32deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
#strat-ui .su-weapon--empty .ico { position: relative; }
#strat-ui .su-weapon--empty .cnt { color: #ff9d95; }
#strat-ui .su-weapon--empty .ab { display: none; }
#strat-ui .su-weapon.su-load { animation: su-load .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes su-load { 0% { transform: scale(.82) translateY(6px); } 60% { transform: scale(1.1) translateY(-3px); } 100% { transform: none; } }
#strat-ui .su-weapon.su-shake { animation: su-shake .38s ease-in-out; border-color: #ff6b61 !important; }
@keyframes su-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-2deg); } 40% { transform: translateX(5px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
#strat-ui .su-weapons--busy .su-weapon:not(.su-weapon--cur) { filter: brightness(.8); }
#strat-ui .su-weapons--busy .su-weapon { cursor: progress; }

/* ability hint banner: sits above the selector, never takes input */
#strat-ui .su-ability {
  position: absolute; left: -2px; bottom: calc(100% + 9px); z-index: 3; pointer-events: none;
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 8px; border-radius: 6px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(31, 85, 179, .94), rgba(16, 48, 95, .96)); border: 2px solid var(--su-blue-lt);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 16px rgba(92, 160, 255, .35);
  color: #fff; animation: su-hint-pulse 1.5s ease-in-out infinite;
}
#strat-ui .su-ability::after { content: ""; position: absolute; left: 18px; bottom: -9px; border: 7px solid transparent; border-top-color: var(--su-blue-lt); border-bottom: 0; }
#strat-ui .su-ability .tap { position: relative; width: 22px; height: 22px; flex: 0 0 auto; }
#strat-ui .su-ability .tap svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); animation: su-tap 1.1s ease-in-out infinite; transform-origin: 40% 90%; }
@keyframes su-tap { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(3px) scale(.92); } 60% { transform: translateY(0) scale(1.04); } }
#strat-ui .su-ability .wrap { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
#strat-ui .su-ability .kick { font-size: 7.5px; letter-spacing: .26em; color: var(--su-blue-lt); }
#strat-ui .su-ability .txt { font-size: 13px; letter-spacing: .16em; text-shadow: 0 1px 0 #10305f, 0 0 10px rgba(255, 255, 255, .25); }
@keyframes su-hint-pulse { 0%, 100% { transform: translateY(0); box-shadow: 0 4px 12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 10px rgba(92, 160, 255, .3); } 50% { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 22px rgba(92, 160, 255, .6); } }
#strat-ui .su-ability.su-pop-in { animation: su-hint-in .4s cubic-bezier(.2, 1.5, .4, 1), su-hint-pulse 1.5s ease-in-out .4s infinite; }
@keyframes su-hint-in { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }
#strat-ui .su-ability--live { background: linear-gradient(180deg, rgba(234, 95, 86, .96), rgba(150, 30, 22, .97)); border-color: var(--su-gold); animation: su-hint-live .55s ease-in-out infinite; box-shadow: 0 4px 12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 120, 60, .65); }
#strat-ui .su-ability--live::after { border-top-color: var(--su-gold); }
#strat-ui .su-ability--live .kick { color: var(--su-gold); }
#strat-ui .su-ability--live .txt { font-size: 15px; text-shadow: 0 1px 0 #4a0d09, 0 0 12px rgba(255, 220, 120, .5); }
#strat-ui .su-ability--live.su-pop-in { animation: su-hint-in .35s cubic-bezier(.2, 1.5, .4, 1), su-hint-live .55s ease-in-out .35s infinite; }
@keyframes su-hint-live { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.25); } }

/* ---- enemies-left counter (bottom-right, red-accented) */
#strat-ui .su-hud-enemies {
  /* top-right, under the buttons: the bottom-right corner is where the enemy camp stands (owner: «πιο εμφανείς εχθροί») */
  right: calc(var(--su-hud-pad) + var(--su-sar)); top: calc(var(--su-hud-pad) + var(--su-sat) + var(--su-hud-btn) + 12px); flex-direction: column; align-items: flex-end; gap: 3px; padding: 7px 14px 9px;
  background: linear-gradient(180deg, rgba(78, 26, 22, .9), rgba(38, 12, 10, .93)); border-color: rgba(208, 52, 44, .85);
  box-shadow: inset 0 1px 0 rgba(255, 157, 149, .25), 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .55), 0 0 16px rgba(208, 52, 44, .3);
  min-width: 150px;
}
#strat-ui .su-hud-enemies::before { content: ""; position: absolute; left: 10px; right: 10px; top: -3px; height: 5px; border-radius: 0 0 2px 2px; background: repeating-linear-gradient(135deg, #d0342c 0 8px, #1a1a14 8px 16px); opacity: .85; }
#strat-ui .su-hud-enemies.su-hit { animation: su-plate-hit .55s ease-out; }
@keyframes su-plate-hit { 0% { transform: scale(1); box-shadow: 0 0 0 4px rgba(255, 107, 97, .9), 0 0 34px rgba(255, 80, 60, .9); } 40% { transform: scale(1.06); } 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 157, 149, .25), 0 4px 10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .55), 0 0 16px rgba(208, 52, 44, .3); } }
#strat-ui .su-hud-enemies .lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .34em; color: #ff6b61; text-shadow: 0 1px 0 #2a0503, 0 0 10px rgba(255, 90, 80, .45); }
#strat-ui .su-hud-enemies .lbl .skull { width: 16px; height: 16px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); animation: su-skull 2.4s ease-in-out infinite; }
#strat-ui .su-hud-enemies .lbl .skull svg { width: 100%; height: 100%; display: block; }
@keyframes su-skull { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
#strat-ui .su-hud-enemies .cnt { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
#strat-ui .su-hud-enemies .cnt .left { font-size: 46px; color: #fff; text-shadow: 0 3px 0 #4a0d09, 0 0 18px rgba(255, 90, 80, .55); font-variant-numeric: tabular-nums; letter-spacing: 0; }
#strat-ui .su-hud-enemies .cnt .left.su-bump { animation: su-bump-red .45s ease-out; }
@keyframes su-bump-red { 0% { transform: scale(1); } 35% { transform: scale(1.3); color: #ff6b61; } 100% { transform: scale(1); } }
#strat-ui .su-hud-enemies .cnt .tot { font-size: 16px; color: var(--su-red-lt); }
#strat-ui .su-hud-enemies--clear .cnt .left { color: var(--su-gold); text-shadow: 0 3px 0 #6b4a00, 0 0 18px rgba(255, 210, 77, .6); }
#strat-ui .su-enemy-row { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; max-width: 300px; }
#strat-ui .su-enemy-row .en { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 7px 0 2px; border-radius: 5px; background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 107, 97, .4); transition: opacity .3s ease, filter .3s ease; }
#strat-ui .su-enemy-row .en canvas { width: 26px !important; height: 26px !important; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#strat-ui .su-enemy-row .en b { font-size: 13px; line-height: 1; color: #fff8dc; text-shadow: 0 1px 0 #000; font-variant-numeric: tabular-nums; }
#strat-ui .su-enemy-row .en b:empty { display: none; }
#strat-ui .su-enemy-row .en.su-tick { animation: su-bump-red .45s ease-out; }
#strat-ui .su-enemy-row .en.dead { opacity: .32; filter: grayscale(1) brightness(.55); }

/* ------------------------------------------------------------------ Intro banner / toast */
#strat-ui .su-intro {
  position: absolute; left: 50%; top: calc(84px + var(--su-sat)); transform: translateX(-50%); z-index: 20;
  width: min(720px, calc(100% - 32px)); pointer-events: auto; cursor: pointer;
  padding: 12px 24px 14px 22px; text-align: left; border-left: 8px solid var(--wc, var(--su-gold));
  animation: su-intro-in .45s cubic-bezier(.2, 1.3, .35, 1) both;
}
#strat-ui .su-intro.su-out { animation: su-intro-out .3s ease-in both; }
@keyframes su-intro-in { from { opacity: 0; transform: translate(-50%, -30px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes su-intro-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -20px); } }
#strat-ui .su-intro { flex-wrap: wrap; align-items: flex-start; gap: 6px 18px; }
#strat-ui .su-intro .hd { flex: 1 1 100%; padding-right: 110px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-width: 0; }
#strat-ui .su-intro .txt { flex: 1 1 260px; margin-top: 0; min-width: 0; }
#strat-ui .su-intro .wk { display: flex; align-items: center; gap: 7px; padding: 2px 10px 2px 2px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--wc, var(--su-gold)); font-size: 10px; letter-spacing: .3em; color: var(--wc, var(--su-gold)); text-shadow: 0 1px 0 #000; }
#strat-ui .su-intro .wk .emb { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: #1b2114; border: 1px solid var(--wc, var(--su-gold)); display: flex; align-items: center; justify-content: center; }
#strat-ui .su-intro .wk .emb svg { width: 13px; height: 13px; display: block; }
#strat-ui .su-intro .lbl { font-size: 10px; letter-spacing: .34em; color: var(--su-gold); display: flex; align-items: center; gap: 8px; }
#strat-ui .su-intro .lbl i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff6b61; animation: su-blink .8s ease-in-out infinite; }
#strat-ui .su-intro .txt { font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .1em; line-height: 1.35; color: #fff8dc; margin-top: 4px; }
#strat-ui .su-intro .bar { position: absolute; left: 0; bottom: -2px; height: 3px; background: var(--su-gold); animation: su-bar linear forwards; }
@keyframes su-bar { from { width: 100%; } to { width: 0; } }
#strat-ui .su-intro .hint { position: absolute; right: 12px; top: 8px; font-size: 8px; letter-spacing: .2em; color: rgba(230, 217, 173, .55); }
#strat-ui .su-intro .en { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 5px 8px; max-width: 300px; font-size: 11px; letter-spacing: .2em; color: #ff9d95; flex: 0 1 auto; }
#strat-ui .su-intro .en .skull { width: 15px; height: 15px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
#strat-ui .su-intro .en .skull svg { width: 100%; height: 100%; display: block; }
#strat-ui .su-intro .en b { color: #ff6b61; text-shadow: 0 1px 0 #2a0503, 0 0 10px rgba(255, 90, 80, .4); font-size: 12px; }
#strat-ui .su-intro .en .chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 2px; border-radius: 4px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 107, 97, .35); font-size: 9.5px; letter-spacing: .12em; color: var(--su-khaki-lt); }
#strat-ui .su-intro .en .chip canvas { width: 20px !important; height: 20px !important; display: block; }

#strat-ui .su-toast {
  position: absolute; left: 50%; bottom: calc(158px + var(--su-sab)); transform: translateX(-50%); z-index: 30; pointer-events: none; /* above the bottom-center weapon selector */
  padding: 10px 22px; font-size: 14px; letter-spacing: .16em; color: #fff8dc; border-color: rgba(255, 210, 77, .6);
  animation: su-toast-in .3s cubic-bezier(.2, 1.3, .35, 1) both; max-width: calc(100% - 32px); text-align: center;
}
#strat-ui .su-toast.su-out { animation: su-fade-out .3s ease-in both; }
@keyframes su-toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes su-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ------------------------------------------------------------------ Rotate hint (portrait phones) */
#strat-ui .su-rotate {
  position: absolute; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 22px;
  background: radial-gradient(ellipse at 50% 40%, #3a4724, #14180f 80%); pointer-events: auto; text-align: center; padding: 24px;
}
#strat-ui .su-rotate .phone { width: 64px; height: 110px; border: 5px solid var(--su-khaki-lt); border-radius: 12px; position: relative; animation: su-rot 1.8s ease-in-out infinite; box-shadow: 0 8px 20px rgba(0, 0, 0, .6); }
#strat-ui .su-rotate .phone::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; border-radius: 2px; background: var(--su-khaki-lt); transform: translateX(-50%); }
@keyframes su-rot { 0%, 20% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
#strat-ui .su-rotate h3 { margin: 0; font-size: 22px; letter-spacing: .24em; color: var(--su-khaki-lt); text-shadow: 0 3px 0 #1b2114; }
#strat-ui .su-rotate p { margin: 0; font-size: 11px; letter-spacing: .2em; color: var(--su-khaki); }
@media (orientation: portrait) and (max-width: 820px) and (hover: none) { #strat-ui .su-rotate { display: flex; } }
@media (orientation: portrait) and (max-width: 520px) { #strat-ui .su-rotate { display: flex; } }

/* ------------------------------------------------------------------ Responsive: short / narrow viewports (phones landscape 844×390 … 640×360) */
@media (max-height: 520px), (max-width: 700px) {
  :root { --su-hud-pad: 8px; --su-hud-btn: 48px; --su-score-h: 52px; }
  #strat-ui .su-hud-zoom { --su-zoom-btn: 34px; gap: 6px; top: calc(var(--su-hud-pad) + var(--su-sat) + var(--su-score-h) + 6px); }
  #strat-ui .su-hud-zoom .su-btn.su-btn--zoom { border-radius: 6px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 3px 0 #262c31, 0 5px 9px rgba(0, 0, 0, .5); }
  #strat-ui .su-hud-zoom .su-btn.su-btn--zoom svg { width: 19px; height: 19px; }
  #strat-ui .su-hud-zoom .su-btn--zoom .k { min-width: 11px; height: 11px; font-size: 7px; right: -3px; bottom: -3px; }
  #strat-ui .su-worlds-list { gap: 10px 12px; }
  #strat-ui .su-world { padding: 8px 8px 10px 12px; }
  #strat-ui .su-world-head { gap: 8px; margin-bottom: 8px; }
  #strat-ui .su-world .su-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  #strat-ui .su-world-head .emb { width: 30px; height: 30px; }
  #strat-ui .su-world-head .emb svg { width: 20px; height: 20px; }
  #strat-ui .su-world-head .nm { font-size: 15px; }
  #strat-ui .su-world-head .st { font-size: 11px; padding: 4px 8px; }
  #strat-ui .su-title .su-worlds { margin-top: 6px; }
  #strat-ui .su-title .su-worlds .w { width: 20px; height: 20px; }
  #strat-ui .su-intro .wk { font-size: 8.5px; }
  #strat-ui .su-intro { gap: 4px 12px; }
  #strat-ui .su-btn { min-height: 48px; min-width: 120px; padding: 0 18px; font-size: 15px; }
  #strat-ui .su-btn--big { min-height: 54px; min-width: 180px; font-size: 18px; }
  #strat-ui .su-hud-btns { gap: 6px; }
  #strat-ui .su-hud-score { min-width: 130px; padding: 4px 12px 6px; }
  #strat-ui .su-hud-score .val { font-size: 24px; }
  #strat-ui .su-hud-level { padding: 4px 14px 6px; max-width: 34vw; }
  #strat-ui .su-hud-level .val { font-size: 13px; }
  /* compact weapon selector: 5 slots ≈ 290 px wide, plate ≈ 88 px tall. On short screens the missile rest point sits at
     ≈ (152, 274) CSS px with a 38 px grab radius, so a bottom-LEFT plate would cover it → anchor the selector bottom-CENTER. */
  #strat-ui .su-hud-ammo { padding: 4px 8px 6px; gap: 3px; left: calc(50% - 16px); transform: translateX(-50%); }
  #strat-ui .su-toast { bottom: calc(150px + var(--su-sab)); }
  #strat-ui .su-hud-ammo .lbl { font-size: 8.5px; letter-spacing: .22em; gap: 6px; }
  #strat-ui .su-hud-ammo .lbl .ret { width: 11px; height: 11px; }
  #strat-ui .su-hud-ammo .lbl .tot { font-size: 8px; }
  #strat-ui .su-weapon-row { gap: 4px; }
  #strat-ui .su-weapon { width: 47px; height: 60px; padding: 3px 1px 2px; border-radius: 6px; }
  #strat-ui .su-weapon .key { min-width: 12px; height: 12px; font-size: 8px; left: 2px; top: 2px; padding: 0 2px; }
  #strat-ui .su-weapon .ab { width: 6px; height: 6px; right: 3px; top: 3px; }
  #strat-ui .su-weapon .ico { width: 30px; height: 30px; margin-top: 1px; }
  #strat-ui .su-weapon .ico canvas { width: 30px !important; height: 30px !important; }
  #strat-ui .su-weapon .name { font-size: 6.5px; margin-top: 1px; }
  #strat-ui .su-weapon .name.long { font-size: 5.8px; }
  #strat-ui .su-weapon .cnt { font-size: 10.5px; margin-top: 2px; }
  #strat-ui .su-weapon--cur::before, #strat-ui .su-weapon--cur::after { top: -5px; bottom: -5px; width: 5px; }
  #strat-ui .su-weapon--cur::before { left: -5px; } #strat-ui .su-weapon--cur::after { right: -5px; }
  #strat-ui .su-weapon--empty .ico::after { left: 5px; right: 5px; height: 2px; }
  #strat-ui .su-ability { bottom: calc(100% + 7px); padding: 3px 9px 3px 6px; gap: 6px; }
  #strat-ui .su-ability .tap { width: 16px; height: 16px; }
  #strat-ui .su-ability .kick { font-size: 6.5px; }
  #strat-ui .su-ability .txt { font-size: 10.5px; }
  #strat-ui .su-ability--live .txt { font-size: 12px; }
  #strat-ui .su-hud-enemies { padding: 4px 10px 6px; gap: 2px; min-width: 120px; }
  #strat-ui .su-hud-enemies .lbl { font-size: 10px; letter-spacing: .26em; }
  #strat-ui .su-hud-enemies .lbl .skull { width: 13px; height: 13px; }
  #strat-ui .su-hud-enemies .cnt .left { font-size: 32px; }
  #strat-ui .su-hud-enemies .cnt .tot { font-size: 13px; }
  #strat-ui .su-enemy-row { gap: 4px; max-width: 220px; }
  #strat-ui .su-enemy-row .en { height: 24px; padding: 0 5px 0 2px; } #strat-ui .su-enemy-row .en canvas { width: 20px !important; height: 20px !important; }
  #strat-ui .su-enemy-row .en b { font-size: 11px; }
  #strat-ui .su-intro .en { margin-top: 5px; font-size: 9.5px; gap: 4px 8px; }
  #strat-ui .su-intro .en .chip { font-size: 8px; } #strat-ui .su-intro .en .chip canvas { width: 16px !important; height: 16px !important; }
  #strat-ui .su-title .su-tag { margin-top: 6px; padding: 3px 10px; letter-spacing: .14em; font-size: clamp(8px, 1.4vw, 11px); }
  #strat-ui .su-overlay .su-panel { padding: 14px 18px 16px; width: min(560px, 100%); }
  #strat-ui .su-stamp { font-size: clamp(30px, 8vh, 48px); padding: 4px 16px; border-width: 4px; margin: 2px auto 0; }
  #strat-ui .su-stars { margin: 6px 0 2px; min-height: 52px; }
  #strat-ui .su-stars .su-star { width: 46px; height: 46px; } #strat-ui .su-stars .su-star:nth-child(2) { width: 56px; height: 56px; margin-bottom: 4px; }
  #strat-ui .su-score-box { padding: 4px 18px 6px; min-width: 180px; margin: 4px auto 0; }
  #strat-ui .su-score-box .val { font-size: 28px; }
  #strat-ui .su-row { margin-top: 10px; gap: 8px; }
  #strat-ui .su-tip { margin-top: 8px; }
  #strat-ui .su-intro { top: calc(106px + var(--su-sat)); padding: 8px 16px 10px 16px; } /* below the zoom row (ends ≈ 100 px) */
  #strat-ui .su-intro .hd { padding-right: 96px; }
  #strat-ui .su-title .su-kicker { letter-spacing: .22em; }
  #strat-ui .su-intro .txt { font-size: 12px; }
  #strat-ui .su-title .su-title-inner { gap: 10px; }
  #strat-ui .su-title h1 { font-size: clamp(34px, 9vw, 64px); }
  #strat-ui .su-title h2 { margin-top: 6px; font-size: clamp(11px, 2.4vw, 16px); }
  #strat-ui .su-title .su-vs { margin-top: 6px; }
  #strat-ui .su-title .su-btns { gap: 10px; margin-top: 2px; }
  #strat-ui .su-flag { width: clamp(52px, 9vw, 80px); }
  #strat-ui .su-levels-head { margin-bottom: 10px; }
  #strat-ui .su-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  #strat-ui .su-card { min-height: 104px; padding: 8px 6px 8px; }
  #strat-ui .su-card .num { font-size: 26px; }
  #strat-ui .su-card .name { font-size: 9px; min-height: 22px; }
  #strat-ui .su-card .su-mini-stars svg { width: 18px; height: 18px; }
  #strat-ui .su-toast { font-size: 12px; padding: 8px 16px; }
}
@media (max-width: 420px) {
  #strat-ui .su-hud-level { display: none; }
  #strat-ui .su-title .su-flag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #strat-ui *, #strat-ui *::before, #strat-ui *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
}

/* landscape phones: overlay content side by side (stamp/stars/score | buttons) */
@media (max-height: 520px) and (min-width: 600px) {
  #strat-ui .su-overlay .su-panel { width: min(760px, 100%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 22px; padding: 14px 22px 14px; }
  #strat-ui .su-overlay .su-panel > .su-tape, #strat-ui .su-overlay .su-panel > .su-rivet { position: absolute; }
  #strat-ui .su-ov-main { flex: 1 1 300px; }
  #strat-ui .su-ov-side { flex: 0 0 auto; min-width: 200px; }
  #strat-ui .su-ov-side .su-row { flex-direction: column; align-items: stretch; margin-top: 0; gap: 8px; }
  #strat-ui .su-ov-side .su-row .su-btn, #strat-ui .su-ov-side .su-row .su-btn--big { min-width: 200px; }
  #strat-ui .su-overlay .su-tip { flex: 1 1 100%; margin-top: 6px; }
  #strat-ui .su-stamp { margin: 0 auto; }
  #strat-ui .su-sub { margin-top: 4px; }
}