:root{
  --bg:#202124;
  --panel:#181a20;
  --panel-raised:#212328;
  --ink:#f2f2f2;
  --muted:#b0b7c3;
  --grid-line:rgba(255,255,255,0.05);

  --accent-blue:#006ee6;
  --accent-lime:#b5d331;
  --accent-purple:#7852a9;

  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:12px;

  /* safe fallback */
  --shadow-soft: 0 24px 60px rgba(0,0,0,0.35);

  --font-sans: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* futbol tuning */
  --pitch-pad: 14px;
  --goal-mouth: 168px; /* JS updates dynamically too */
  --goal-depth: 18px;
}

*{ box-sizing:border-box; }
html{ margin:0; padding:0; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  background: radial-gradient(circle at top, #252832 0, #202124 48%, #111215 100%);
  color:var(--ink);
  font:16px/1.6 var(--font-sans);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:24px 16px;
  overflow-x:hidden;
  overscroll-behavior: none;
}
body.error-page{ touch-action: manipulation; }
main{ width:100%; display:flex; align-items:center; justify-content:center; }

.error-hero{ width:100%; }
.error-shell{
  max-width:1120px;
  margin:0 auto;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at top left, rgba(0,110,230,0.16), transparent 60%),
    radial-gradient(circle at bottom right, rgba(184,211,49,0.12), transparent 60%),
    linear-gradient(150deg, #262931 0%, #181a20 55%, #15161c 100%);
  border:1px solid rgba(255,255,255,0.06);
  padding:22px 22px 16px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 768px){
  body{ padding:16px 10px; }
  .error-shell{ padding:18px 14px 14px; border-radius:18px; }
}

/* HUD */
.error-hud{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1.1fr);
  gap:18px 28px;
  align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding-bottom:14px;
}
@media (max-width: 860px){
  .error-hud{ grid-template-columns:minmax(0,1fr); }
}
.hud-main{ display:flex; flex-direction:column; gap:8px; }
.hud-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  font-variant-numeric:tabular-nums;
  gap:10px;
}
@media (max-width: 860px){
  .hud-meta{ align-items:flex-start; }
}

.hud-block{
  border-radius:var(--radius-md);
  background:
    radial-gradient(circle at top, rgba(0,110,230,0.22), transparent 55%),
    radial-gradient(circle at bottom, rgba(120,82,169,0.18), transparent 55%),
    linear-gradient(160deg,#181a20 0%,#101117 100%);
  border:1px solid rgba(255,255,255,0.08);
  padding:10px 12px;
  width:100%;
  max-width: 360px;
}
.hud-kv{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-family: var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.hud-kv strong{
  color:var(--ink);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:none;
}

/* DM Header */
.cavbot-dm{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:4px;
}
@media (max-width: 600px){
  .cavbot-dm{ flex-direction:column; align-items:flex-start; }
}

.cavbot-dm-chat{
  flex:1;
  border-radius:var(--radius-md);
  background:
    radial-gradient(circle at top, rgba(0,110,230,0.24), transparent 55%),
    radial-gradient(circle at bottom, rgba(120,82,169,0.2), transparent 55%),
    linear-gradient(160deg, #181a20 0%, #101117 100%);
  border:1px solid rgba(255,255,255,0.08);
  padding:10px 12px 11px;
  font-family:var(--mono);
  font-size:0.8rem;
  color:#e6ecff;
  position:relative;
}
.cavbot-dm-line{ margin:0; line-height:1.5; }
.cavbot-dm-line .cavbot-dm-segment{ white-space:pre-wrap; }
.cavbot-dm-email{
  color:var(--accent-lime);
  text-decoration:none;
  font-weight:500;
}
.cavbot-dm-email:hover{ text-decoration:underline; }
.cavbot-dm-cursor{
  display:inline-block;
  width:0.6em;
  margin-left:1px;
  animation: dmCursorBlink 1s steps(1,end) infinite;
}
@keyframes dmCursorBlink{ 0%, 50%{ opacity:1; } 50.01%, 100%{ opacity:0; } }

/* Console layout */
.control-console{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px 12px 10px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.12);
}

.console-main{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1.1fr);
  gap:12px;
  align-items:stretch;
}
@media (max-width: 920px){
  .console-main{ grid-template-columns:minmax(0,1fr); }
}
.console-log-column{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* =========================
   FUTBOL PITCH
   ========================= */
.futbol-pitch{
  position:relative;
  border-radius:var(--radius-md);
  min-height:440px;
  background:
    radial-gradient(circle at 20% 18%, rgba(181,211,49,0.10), transparent 52%),
    radial-gradient(circle at 82% 82%, rgba(120,82,169,0.16), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(0,110,230,0.14), transparent 62%),
    linear-gradient(160deg, #12141b 0%, #0f1117 40%, #0b0c10 100%);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  cursor: crosshair;
  isolation:isolate;
  user-select:none;
  touch-action:none; /* important: keep the pitch stable on phones */
  -webkit-tap-highlight-color: transparent;
}
.futbol-pitch::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0.35;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:46px 46px;
}
.futbol-pitch::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 16%, rgba(181,211,49,0.16), transparent 56%),
    radial-gradient(circle at 84% 82%, rgba(0,110,230,0.12), transparent 60%),
    radial-gradient(circle at 50% 52%, rgba(0,255,180,0.08), transparent 55%);
  mix-blend-mode:screen;
  opacity:0.9;
}

.pitch-label{
  position:absolute;
  top:8px;
  left:10px;
  z-index:6;
  font-family:var(--mono);
  font-size:0.5rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(5,6,9,0.75);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.pitch-label .tag{
  font-size:0.5rem;
  letter-spacing:0.12em;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  color:#dfe7ff;
}

/* Field lines (all neon) */
.pitch-lines{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0.95;
  mix-blend-mode:screen;
  background:
    /* center line */
    linear-gradient(to right, transparent calc(50% - 1px), rgba(181,211,49,0.22) calc(50% - 1px), rgba(181,211,49,0.22) calc(50% + 1px), transparent calc(50% + 1px)),
    /* outer border */
    linear-gradient(to right, rgba(0,214,255,0.14), rgba(0,214,255,0.14)) left/2px 100% no-repeat,
    linear-gradient(to right, rgba(0,214,255,0.14), rgba(0,214,255,0.14)) right/2px 100% no-repeat,
    linear-gradient(to bottom, rgba(0,214,255,0.14), rgba(0,214,255,0.14)) top/100% 2px no-repeat,
    linear-gradient(to bottom, rgba(0,214,255,0.14), rgba(0,214,255,0.14)) bottom/100% 2px no-repeat;
}
.pitch-lines::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* center circle */
    radial-gradient(circle at 50% 50%, transparent 0 62px, rgba(181,211,49,0.20) 62px 64px, transparent 64px 100%),
    /* penalty boxes */
    linear-gradient(to right,
      transparent 0,
      transparent 6%,
      rgba(0,214,255,0.14) 6%,
      rgba(0,214,255,0.14) calc(6% + 2px),
      transparent calc(6% + 2px),
      transparent calc(18% - 2px),
      rgba(0,214,255,0.14) calc(18% - 2px),
      rgba(0,214,255,0.14) 18%,
      transparent 18%,
      transparent 82%,
      rgba(0,214,255,0.14) 82%,
      rgba(0,214,255,0.14) calc(82% + 2px),
      transparent calc(82% + 2px),
      transparent calc(94% - 2px),
      rgba(0,214,255,0.14) calc(94% - 2px),
      rgba(0,214,255,0.14) 94%,
      transparent 94%,
      transparent 100%
    );
  opacity:0.85;
}

/* Goals (digital) */
.goal{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height: var(--goal-mouth);
  z-index:4;
  border-radius:14px;
  pointer-events:none;
  opacity:0.95;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}
.goal.left{ left:10px; }
.goal.right{ right:10px; }

.goal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.20), transparent 65%),
    linear-gradient(180deg, rgba(0,110,230,0.86), rgba(0,110,230,0.26));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 18px rgba(0,214,255,0.28);
}
.goal.right::before{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 65%),
    linear-gradient(180deg, rgba(181,211,49,0.70), rgba(120,82,169,0.22));
  box-shadow: 0 0 18px rgba(181,211,49,0.20);
}
.goal::after{
  content:"";
  position:absolute;
  inset:-10px -14px;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,214,255,0.12), transparent 62%),
    radial-gradient(circle at 20% 30%, rgba(181,211,49,0.10), transparent 70%);
  opacity:0.85;
  mix-blend-mode:screen;
}

/* Score overlay (base) */
.scoreboard{
  position:absolute;
  top:10px;
  right:10px;
  z-index:7;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(5,6,9,0.72);
  border:1px solid rgba(255,255,255,0.14);
  font-family:var(--mono);
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.72rem;
  color:var(--muted);
  user-select:none;
  flex-wrap:wrap;
}
.scoreboard strong{
  color:var(--ink);
  letter-spacing:0.06em;
  font-weight:600;
}
.score-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  white-space:nowrap;
}
.score-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: radial-gradient(circle, #f8f8ff 0%, #00d6ff 40%, #00304a 100%);
  box-shadow: 0 0 12px rgba(0,110,230,0.9);
}

/*  NEW: scoreboard dock wrapper (outside pitch) */
.arena-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.scoreboard.scoreboard--dock{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  margin:0 auto;
  justify-content:center;
  align-self:center;
  width:fit-content;
  max-width:calc(100% - 10px);
}

/* Ball (digital futbol) */
.ball{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:999px;
  z-index:6;
  background:
    radial-gradient(circle at 30% 20%, #ffffff 0%, #d8f6ff 18%, #00b8ff 55%, #0060e6 100%);
  box-shadow:
    0 0 14px rgba(0,184,255,0.95),
    0 0 26px rgba(181,211,49,0.25),
    0 18px 30px rgba(0,0,0,0.45);
}
.ball::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.16), transparent 60%);
  background-size: 6px 6px, auto;
  opacity:0.55;
  mix-blend-mode:overlay;
}

/* Players (CavBot heads from head.css) */
.bot-actor{
  position:absolute;
  z-index:5;
  width:0;
  height:0;
  pointer-events:none;
  transform: translate3d(0,0,0);
}
.bot-actor .head-shell{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(var(--head-scale));
  transform-origin:center;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,0.45));
}

/* You = standard CavBot head */
.bot-actor.player .head-shell{ --head-scale: 0.56; }

/* Imposter = hue shift (uses YOUR provided imposter approach) */
.bot-actor.imposter .head-shell{
  --head-scale: 0.56;
  filter: hue-rotate(115deg) saturate(1.18) brightness(1.03) drop-shadow(0 22px 50px rgba(0,0,0,0.45));
}
.bot-actor.imposter .imposter-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:120px;
  height:120px;
  transform: translate(-50%,-50%);
  border-radius:999px;
  background: radial-gradient(circle, rgba(181,211,49,0.16) 0%, transparent 70%);
  opacity:0.85;
  mix-blend-mode:screen;
  pointer-events:none;
}

/* Keep head sizes perfect on phones */
@media (max-width: 560px){
  .futbol-pitch{ min-height:420px; }
  .bot-actor.player .head-shell,
  .bot-actor.imposter .head-shell{
    --head-scale: 0.50;
  }
  .scoreboard{ font-size:0.68rem; gap:8px; }
}
@media (max-width: 360px){
  .bot-actor.player .head-shell,
  .bot-actor.imposter .head-shell{
    --head-scale: 0.46;
  }
}

/* Hide any full-body parts if head.css includes them */
.cavbot-body,
.cavbot-base{ display:none !important; }

/* Speech bubble (arena commentary) — visually removed */
.arena-speech{
  display:none !important;
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:8;
  max-width:min(560px, calc(100% - 24px));
  padding:8px 10px;
  border-radius:12px;
  background: radial-gradient(circle at top left, rgba(0,110,230,0.48), rgba(0,0,0,0.95));
  border:1px solid rgba(255,255,255,0.18);
  color:#eaf2ff;
  font-family:var(--mono);
  font-size:0.78rem;
  line-height:1.45;
}
.arena-speech strong{
  color: var(--accent-lime);
  font-weight:600;
  letter-spacing:0.10em;
  text-transform:uppercase;
  margin-right:8px;
}

/* Micro control row */
.pitch-controls{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:7;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  pointer-events:none;
}
.pitch-chip{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(5,6,9,0.72);
  border:1px solid rgba(255,255,255,0.14);
  font-family:var(--mono);
  font-size:0.70rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  user-select:none;
  cursor:pointer;
}
.pitch-chip strong{ color:var(--ink); letter-spacing:0.08em; font-weight:600; }
.pitch-chip:active{ transform: translateY(1px); }

/* Logs */
.console-log-wrap{
  border-radius:var(--radius-md);
  background: radial-gradient(circle at top left, rgba(0,0,0,0.7), rgba(0,0,0,0.96));
  border:1px solid rgba(255,255,255,0.07);
  padding:8px 9px 7px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height: 170px;
}
.console-log-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:0.78rem;
  color:var(--muted);
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.16em;
}
.console-log-indicators{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.72rem;
}
.console-log-indicators span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.console-log-led{
  width:7px;
  height:7px;
  border-radius:999px;
  background: radial-gradient(circle, #f8f8ff 0%, #00d6ff 40%, #00304a 100%);
  box-shadow: 0 0 12px rgba(0,110,230,0.9);
  animation: logLedPulse 2.6s ease-in-out infinite;
}
@keyframes logLedPulse{ 0%,100%{ transform:scale(1); opacity:0.9; } 50%{ transform:scale(1.35); opacity:1; } }

.console-log{
  position:relative;
  border-radius:10px;
  background: radial-gradient(circle at top left, rgba(20,22,30,0.95), rgba(7,8,13,0.98));
  border:1px solid rgba(255,255,255,0.04);
  padding:6px;
  max-height: 168px;
  overflow:hidden;
  font-family:var(--mono);
  font-size:0.74rem;
  color:#d6deff;
}
.console-log-inner{
  max-height:156px;
  overflow-y:auto;
  overflow-x:auto; /* allow left-right slider */
  padding-right:4px;
  -webkit-overflow-scrolling: touch;
}
.console-log-inner::-webkit-scrollbar{ width:6px; height:6px; }
.console-log-inner::-webkit-scrollbar-track{ background:transparent; }
.console-log-inner::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:999px; }

.log-line{
  white-space:nowrap;
  overflow-x:visible;
  overflow-y:visible;
  text-overflow:clip;
  padding:1px 0;
}
.log-line-prefix{ color: rgba(163,172,210,0.9); }
.log-line-tag{ color: #b5d331; }
.log-line-warning{ color: #f7d27c; }
.log-line-error{ color: #ff8c80; }
.log-line-ok{ color: #9fffbf; }

.console-log-footer{
  margin-top:6px;
  font-size:0.68rem;
  color:var(--muted);
}
.console-log-footer span{ display:block; white-space:normal; line-height:1.4; }

/* Footer */
.powered{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:12px;
  margin-top:2px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.powered a{
  color: var(--accent-lime);
  text-decoration:none;
  letter-spacing:0.10em;
}
.powered a:hover{ text-decoration:underline; }

/* CavCore Security Seal (footer) */
.cavcore-seal{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0,110,230,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:#dfe7ff;
  user-select:none;
  white-space:nowrap;
}
.cavcore-seal svg{
  width:14px;
  height:14px;
  display:block;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45));
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 560px){
  .powered{
    justify-content:center;
    text-align:center;
    font-size:0.70rem;
    gap:8px;
  }
}

/* =========================
   ANTENNA FIX (centered + connected)
   ========================= */
.bot-actor .cavbot-inner{ position:relative; }

.bot-actor .cavbot-antenna{
  position:absolute !important;
  left:50% !important;
  top:-10px !important;
  transform:translateX(-50%) !important;
  transform-origin:bottom center !important;
  margin:0 !important;
  z-index:3;
}
.bot-actor .cavbot-antenna::before{
  content:"";
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,0.22), rgba(0,0,0,0));
  opacity:0.9;
  pointer-events:none;
}
.bot-actor .cavbot-antenna-tip{
  position:absolute !important;
  left:50% !important;
  top:-6px !important;
  transform:translateX(-50%) !important;
}

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
  }
}

/* ==========================================================
   (FIX #3) MOBILE ANALOG STICK — only shows on smaller/coarse pointers
   ========================================================== */
.analog-stick{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:9;
  width:48px;
  height:48px;
  display:none;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.analog-stick .analog-base{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.14), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(0,110,230,0.18), rgba(0,0,0,0.80));
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.40);
  overflow:hidden;
}
.analog-stick .analog-base::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at 50% 50%, rgba(181,211,49,0.10), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(120,82,169,0.14), transparent 62%);
  opacity:0.9;
}
.analog-stick .analog-knob{
  position:absolute;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  margin-left:-16px;
  margin-top:-16px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.45),
    0 0 16px rgba(0,110,230,0.22);
  transform: translate3d(0,0,0);
}
.analog-stick .analog-label{
  position:absolute;
  left:50%;
  top:-14px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(223,231,255,0.78);
  padding:4px 10px;
  border-radius:999px;
  background: rgba(5,6,9,0.70);
  border:1px solid rgba(255,255,255,0.14);
  white-space:nowrap;
  pointer-events:none;
}
@media (max-width: 860px), (pointer:coarse){
  .analog-stick{ display:block; }
}
/* Safe-area padding for iOS */
@supports (padding: max(0px)){
  .analog-stick{
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}