/* ============================================================
   Blocky World — a cool, luminous futurist interface.
   Deep space navy base, cyan as the signature accent, violet and
   mint as secondaries, amber reserved for rewards and heat.
   ============================================================ */

:root {
  --ui-font: 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', Consolas, monospace;

  --void:        #05070F;
  --abyss:       #090D1C;
  --panel:       rgba(11, 17, 34, 0.80);
  --panel-solid: #0B1122;
  --line:        rgba(95, 227, 255, 0.20);
  --line-strong: rgba(95, 227, 255, 0.55);

  --cyan:    #5FE3FF;
  --cyan-dim:#2AA8CC;
  --violet:  #A97BFF;
  --mint:    #5BF2C0;
  --amber:   #FFC24D;
  --coral:   #FF6B6B;

  --text:      #E6F0FF;
  --text-dim:  rgba(230, 240, 255, 0.60);
  --text-mute: rgba(230, 240, 255, 0.36);

  /* kept as aliases so nothing that referenced the old names breaks */
  --accent:   var(--mint);
  --accent-2: var(--cyan);
  --danger:   var(--coral);
  --gold:     var(--amber);
  --edge-light: var(--line);
  --edge-dark:  rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  font-family: var(--ui-font);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
}

#gl-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
  image-rendering: pixelated;
}

/* ---------- glass panel ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(160, 240, 255, 0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Keep interactive HUD controls above the full-screen touch zones. */
  z-index: 25;
}

#hud.hidden { display: none; }

/* Reticle: a thin cyan ring with a centre dot, rather than a fat plus. */
.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}
.crosshair::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(95, 227, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(95, 227, 255, 0.5), inset 0 0 6px rgba(95, 227, 255, 0.25);
}
.crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.crosshair.hit::before { border-color: var(--coral); box-shadow: 0 0 10px var(--coral); }
.crosshair.hit::after { background: var(--coral); box-shadow: 0 0 8px var(--coral); }

.vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 180px rgba(2, 6, 18, 0.62);
  transition: box-shadow 0.2s;
}
.vignette.hurt { box-shadow: inset 0 0 200px rgba(255, 60, 60, 0.55); }

/* ---------- hotbar ---------- */
.hotbar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  max-width: calc(100vw - 20px);
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 6px;
  padding: 7px;
  background: rgba(8, 13, 28, 0.62);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.slot {
  width: 54px;
  height: 54px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(95, 227, 255, 0.14);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, border-color 0.12s, background 0.12s, box-shadow 0.12s;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}
.slot.active {
  border-color: var(--cyan);
  background: rgba(95, 227, 255, 0.12);
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 20px rgba(95, 227, 255, 0.45);
}
.equipment-status {
  position: absolute;
  left: 50%;
  bottom: 130px;
  transform: translateX(-50%);
  max-width: min(94vw, 720px);
  padding: 7px 12px;
  border: 1px solid rgba(145, 205, 255, 0.32);
  border-radius: 12px;
  background: rgba(8, 13, 28, 0.78);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.slot canvas { width: 38px; height: 38px; image-rendering: pixelated; }
.slot .num {
  position: absolute;
  top: 2px;
  left: 6px;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-mute);
}
.slot .key {
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 9px;
  font-family: var(--mono);
  color: rgba(95, 227, 255, 0.4);
}
.slot .food-count {
  position: absolute;
  right: 4px;
  top: 3px;
  min-width: 15px;
  padding: 1px 3px;
  border-radius: 7px;
  background: rgba(8, 13, 28, 0.9);
  color: #fff;
  font: 700 10px/1.2 var(--mono);
  text-align: center;
  pointer-events: none;
}

/* ---------- status bars ---------- */
.status-row {
  position: absolute;
  bottom: 82px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
}
/* Segmented energy bars rather than plain fills. */
.bar {
  width: 230px;
  height: 14px;
  border-radius: 7px;
  background: rgba(4, 8, 20, 0.72);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
}
.bar .fill {
  height: 100%;
  transition: width 0.2s cubic-bezier(.2,.8,.3,1);
  position: relative;
}
.bar .fill::after {
  /* a moving sheen so the bar feels alive */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%);
  animation: sheen 2.4s ease-in-out infinite;
}
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }

.bar.hp .fill { background: linear-gradient(90deg, #FF4D6D, #FF9E5E); box-shadow: 0 0 12px rgba(255,77,109,0.5); }
.bar.ult .fill { background: linear-gradient(90deg, #2AA8CC, #5FE3FF); box-shadow: 0 0 12px rgba(95,227,255,0.55); }
.status-row.play-health {
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 218, 155, 0.72);
  border-radius: 16px;
  background: rgba(255, 249, 231, 0.94);
  box-shadow: 0 5px 18px rgba(74, 46, 27, 0.24), inset 0 1px rgba(255, 255, 255, 0.95);
  color: #654533;
}
.status-row.play-health .bar-label {
  color: #8d4c4a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: none;
}
.status-row.play-health .bar.hp {
  height: 18px;
  border-color: rgba(165, 91, 80, 0.32);
  background: rgba(120, 68, 57, 0.14);
  box-shadow: inset 0 1px 3px rgba(95, 52, 46, 0.18);
}
.status-row.play-health .bar.hp .fill {
  background: linear-gradient(90deg, #ff8f72, #f4bf62);
  box-shadow: 0 0 8px rgba(231, 129, 84, 0.25);
}

.bar-label {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-mute);
  min-width: 30px;
}

.ult-ready { animation: pulse 0.7s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(95,227,255,0); }
  50% { box-shadow: 0 0 20px rgba(95,227,255,0.9), 0 0 40px rgba(95,227,255,0.4); }
}

/* ---------- corner info ---------- */
.info-box {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}
.info-box b { color: var(--cyan); font-weight: 600; letter-spacing: 0.3px; }

.debug {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 9px 13px;
  font-size: 11px;
  line-height: 1.6;
  font-family: var(--mono);
  color: var(--mint);
  opacity: 0.8;
  white-space: pre;
}

/* ---------- combo / banner ---------- */
.combo-pop {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255,194,77,0.9), 0 0 34px rgba(255,150,40,0.7);
  opacity: 0;
  pointer-events: none;
}
.combo-pop.show { animation: comboUp 0.8s cubic-bezier(.2,.9,.3,1); }
@keyframes comboUp {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); filter: blur(6px); }
  25%  { opacity: 1; transform: translateX(-50%) scale(1.15); filter: blur(0); }
  100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-80px); filter: blur(2px); }
}

.banner {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 20px rgba(95,227,255,0.8), 0 0 60px rgba(95,227,255,0.4);
  opacity: 0;
  text-align: center;
  white-space: nowrap;
}
.banner.show { animation: bannerIn 1.5s ease-out; }
@keyframes bannerIn {
  0%   { opacity: 0; transform: translateX(-50%) scale(2.2); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.05); }
}

/* ---------- toast ---------- */
#toast {
  position: fixed;
  bottom: 132px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--text);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 60;
  pointer-events: none;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- menus ---------- */
#menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 60, 100, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(5, 8, 20, 0.88), rgba(3, 5, 14, 0.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: none;
}
#menu.hidden { display: none; }

.menu-card {
  width: min(700px, 92vw);
  /* The menu overlay is the single scroll area on narrow screens. */
  flex: 0 0 auto;
  margin-block: auto;
  padding: 34px 38px;
  text-align: center;
}
.menu-card h1 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #FFFFFF 10%, #5FE3FF 60%, #2AA8CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(95, 227, 255, 0.45));
}
.menu-card h2 {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  margin-bottom: 26px;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.menu-card h3 {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--cyan-dim);
  margin: 24px 0 12px;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

/* Flat, outlined buttons with a glow on hover — closer to a HUD than a
   web form. No drop shadows competing with the game itself. */
button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text);
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(20, 32, 60, 0.6);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.16s, background 0.16s, box-shadow 0.16s, color 0.16s;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
button::before {
  /* a light sweep that crosses on hover */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(160, 240, 255, 0.16), transparent);
  transition: left 0.5s ease-out;
}
button:hover {
  border-color: var(--line-strong);
  color: #fff;
  background: rgba(28, 48, 86, 0.72);
  box-shadow: 0 0 22px rgba(95, 227, 255, 0.18);
}
button:hover::before { left: 120%; }
button:active { transform: translateY(1px) scale(0.985); }

button.primary {
  border-color: rgba(91, 242, 192, 0.5);
  color: #DFFFF5;
  background: rgba(20, 60, 52, 0.6);
}
button.primary:hover {
  background: rgba(30, 84, 72, 0.75);
  box-shadow: 0 0 26px rgba(91, 242, 192, 0.28);
  border-color: var(--mint);
}
button.danger {
  border-color: rgba(255, 107, 107, 0.45);
  color: #FFE0E0;
  background: rgba(64, 24, 32, 0.6);
}
button.danger:hover {
  background: rgba(90, 30, 40, 0.75);
  box-shadow: 0 0 26px rgba(255, 107, 107, 0.26);
  border-color: var(--coral);
}
button.blue {
  border-color: rgba(169, 123, 255, 0.45);
  color: #EBE0FF;
  background: rgba(48, 30, 76, 0.6);
}
button.blue:hover {
  background: rgba(66, 42, 104, 0.75);
  box-shadow: 0 0 26px rgba(169, 123, 255, 0.26);
  border-color: var(--violet);
}
button.small { font-size: 11px; padding: 9px 13px; letter-spacing: 1.6px; }

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(95, 227, 255, 0.1);
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.toggle-row:hover { border-color: var(--line); background: rgba(95, 227, 255, 0.05); }
.toggle-row .val { color: var(--cyan); font-size: 11px; font-family: var(--mono); letter-spacing: 1px; }

.keycaps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 20px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
}
.keycaps div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(95, 227, 255, 0.08);
}
.keycaps span:first-child { color: var(--text-dim); }
kbd {
  background: rgba(95, 227, 255, 0.08);
  border: 1px solid rgba(95, 227, 255, 0.25);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--cyan);
  white-space: nowrap;
  box-shadow: inset 0 0 8px rgba(95, 227, 255, 0.1);
}

.credits {
  margin-top: 26px;
  font-size: 10px;
  color: rgba(230, 240, 255, 0.22);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ---------- loading ---------- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 45%, rgba(20, 70, 110, 0.35), transparent 70%),
    var(--void);
}
#loading.hidden { display: none; }
#loading .title { font-size: 26px; font-weight: 700; letter-spacing: 2px; }
#loading .bar-outer {
  width: 280px;
  height: 12px;
  border-radius: 7px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.5);
}
#loading .bar-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2AA8CC, #5FE3FF, #A97BFF);
  box-shadow: 0 0 18px rgba(95, 227, 255, 0.6);
  transition: width 0.25s;
}
#loading .msg { font-size: 12px; color: var(--text-dim); letter-spacing: 1.5px; }

/* ---------- observe mode overlay ---------- */
#observe-hud {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  display: none;
}
#observe-hud.show { display: block; }

/* Camera framing marks, like a viewfinder. */
#observe-frame {
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(95, 227, 255, 0.22);
  border-radius: 4px;
}
#observe-frame::before, #observe-frame::after {
  content: '';
  position: absolute;
  background: rgba(95, 227, 255, 0.5);
}
#observe-frame::before { left: 50%; top: -16px; width: 1px; height: 12px; }
#observe-frame::after  { left: 50%; bottom: -16px; width: 1px; height: 12px; }

#observe-info {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  padding: 14px 30px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
}
#observe-info .view-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 0 14px rgba(95, 227, 255, 0.6);
}
#observe-info .coords { font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
#observe-info .hint { margin-top: 7px; font-size: 10.5px; color: rgba(230,240,255,0.3); letter-spacing: 0.5px; }

.rec-dot {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--danger);
  text-transform: uppercase;
}
.rec-dot i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }

/* ---------- pause / settings ---------- */
#btn-game-settings { position: fixed; z-index: 85; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 10px 12px; pointer-events: auto; touch-action: manipulation; }
#pause .menu-card { touch-action: pan-y; }
#pause {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 12, 0.72);
  backdrop-filter: blur(4px);
}
#pause.show { display: flex; }
#pause .menu-card { width: min(520px, 92vw); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- character select ---------- */
.chars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 8px 0 4px;
}
.char-card {
  padding: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(0,0,0,0.35);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.char-card.sel {
  border-color: var(--accent);
  background: rgba(126, 200, 80, 0.14);
}
.char-card .cname { font-size: 17px; font-weight: 700; }
.char-card .cstyle { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.6; margin: 2px 0 8px; }
.char-card .cdesc { font-size: 12px; line-height: 1.55; opacity: 0.8; }
.character-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; margin: 10px 0; }
.character-choice { display: flex; flex-direction: column; align-items: flex-start; min-height: 56px; padding: 9px 12px; border-radius: 10px; text-align: left; text-transform: none; letter-spacing: 0; }
.character-choice.selected { border-color: var(--mint); background: rgba(91, 242, 192, 0.12); }
.choice-name { font-size: 15px; font-weight: 800; }
.choice-style { margin-top: 3px; font-size: 11px; color: var(--text-mute); }
.character-current { margin: 8px 0; font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.stat-line { display: flex; align-items: center; gap: 7px; font-size: 10px; margin-top: 5px; opacity: 0.7; }
.stat-line .track { flex: 1; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.4); overflow: hidden; }
.stat-line .track i { display: block; height: 100%; background: var(--accent); }

a.link { color: var(--accent-2); font-size: 12px; cursor: pointer; }

/* ============================================================
   TOUCH CONTROLS — iPhone / iPad
   Everything respects safe-area insets so nothing hides under the
   notch (top) or the home indicator (bottom).
   ============================================================ */
#touch-ui {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: none;
  font-family: var(--ui-font);
}

#touch-ui.hidden { display: none !important; }

body.touch #touch-ui:not(.hidden) { display: block; }

/* ---------- desktop mouse capture prompt ----------
   A browser only hands the mouse over after a click. Rather than leaving the
   camera mysteriously frozen, say so plainly in the middle of the screen. */
#capture-hint {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(ellipse 40% 32% at 50% 50%, rgba(5, 10, 25, 0.6), transparent 70%);
  opacity: 0;
  transition: opacity 0.25s;
}
#capture-hint.hidden { display: none; }
#capture-hint.show { opacity: 1; }

.cap-card { text-align: center; }
.cap-ring {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 30px rgba(95, 227, 255, 0.4), inset 0 0 24px rgba(95, 227, 255, 0.16);
  position: relative;
  animation: capPulse 1.8s ease-in-out infinite;
}
.cap-ring::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
@keyframes capPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.07); opacity: 1; }
}
.cap-title {
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 16px rgba(95, 227, 255, 0.5);
  margin-bottom: 9px;
}
.cap-sub { font-size: 12px; color: var(--text-dim); letter-spacing: 0.4px; }
.cap-sub kbd { margin: 0 2px; }

/* ---------- floating analog movement stick ----------
   The stick is ALWAYS visible while playing. A child needs to see it before
   they touch it, otherwise there is nothing to aim at. It sits in the lower
   left and springs to wherever the thumb lands inside its zone. */
#touch-move {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 44%;
  height: 58%;
  pointer-events: auto;
  touch-action: none;
}

#touch-stick {
  position: fixed;
  left: 0;
  top: 0;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  border: 2px solid rgba(120, 240, 255, 0.4);
  background:
    radial-gradient(circle at 50% 50%, rgba(10, 20, 35, 0.55) 30%, rgba(10, 20, 35, 0.28) 70%, rgba(10, 20, 35, 0.12) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 26px rgba(64, 220, 255, 0.22),
    inset 0 0 24px rgba(64, 220, 255, 0.1);
  pointer-events: none;
  /* parked in the resting position; JS moves it to the thumb on touch */
  left: calc(max(26px, env(safe-area-inset-left)) + 66px);
  top: calc(100% - max(30px, env(safe-area-inset-bottom)) - 66px - 92px);
  margin: -66px 0 0 -66px;
  z-index: 1;
  transition: opacity 0.2s ease-out, transform 0.06s linear;
}

/* hidden entirely in menus, faded while a pause overlay is up */
body.touch:not(.playing) #touch-stick { opacity: 0; }
#touch-move.active #touch-stick { opacity: 1; }

#touch-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(190, 250, 255, 0.95), rgba(64, 200, 235, 0.75));
  border: 2px solid rgba(220, 255, 255, 0.7);
  box-shadow: 0 0 18px rgba(64, 220, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.stick-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 10px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(190, 245, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.4s;
}

/* the coach mark retires once the child has used the stick */
#touch-move.used .stick-hint { opacity: 0; }

/* ---------- look area ---------- */
#touch-look {
  position: absolute;
  right: 0;
  top: 0;
  width: 54%;
  height: 74%;
  pointer-events: auto;
  touch-action: none;
}

.look-hint {
  position: absolute;
  right: 14px;
  top: calc(max(12px, env(safe-area-inset-top)) + 4px);
  font-size: 10px;
  letter-spacing: 1.6px;
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- action buttons ----------
   Two stacked clusters in the bottom-right corner:
   primary action (BREAK / HIT) is big and closest to the thumb.       */
#touch-buttons {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 78px);
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px;
  align-items: end;
  justify-items: end;
  pointer-events: none;
}

.tbtn {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.45);
  background: rgba(74, 144, 217, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.25);
  transition: transform 0.07s, filter 0.1s;
}

.tbtn.pressed {
  transform: scale(0.9);
  filter: brightness(1.45);
}

.tbtn-hit {
  width: 92px;
  height: 92px;
  font-size: 15px;
  background: rgba(226, 85, 63, 0.88);
  grid-row: 1 / span 2;
  grid-column: 2;
}

.tbtn-use { background: rgba(126, 200, 80, 0.88); }
.tbtn-jump { background: rgba(74, 144, 217, 0.88); }
.tbtn-fly  { background: rgba(154, 160, 166, 0.88); }

/* Keep camera choice separate from BREAK so changing perspective never mines a block. */
#touch-view {
  position: absolute;
  top: calc(max(16px, env(safe-area-inset-top)) + 30px);
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  width: 64px;
  height: 42px;
  border-radius: 14px;
  background: rgba(46, 122, 170, 0.92);
  font-size: 12px;
  letter-spacing: 0.6px;
  pointer-events: auto;
}
#touch-view.hidden { display: none !important; }

/* the primary button sits in the lower-right, under the thumb */
#touch-buttons { grid-auto-flow: dense; }
.tbtn-hit { order: 3; }

/* ---------- small screens & phones ---------- */
@media (max-width: 760px) {
  .slot { width: min(38px, calc((100vw - 40px) / 10)); height: 42px; flex: 0 0 min(38px, calc((100vw - 40px) / 10)); }
  .slot canvas { width: clamp(22px, 7vw, 30px); height: clamp(22px, 7vw, 30px); }
  .bar { width: 120px; height: 13px; }
  .hotbar { bottom: max(12px, env(safe-area-inset-bottom)); gap: 2px; padding: 4px; }
  .equipment-status { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 110px); max-width: calc(100vw - 20px); font-size: 10px; padding: 6px 9px; }
  body.touch .equipment-status { top: max(84px, calc(env(safe-area-inset-top) + 70px)); bottom: auto; }
  .status-row { bottom: 62px; gap: 8px; max-width: calc(100vw - 24px); }
  .status-row.play-health { bottom: 64px; gap: 6px; padding: 6px 9px; }
  .status-row.play-health .bar.hp { width: min(190px, 46vw); height: 16px; }
  .status-row .bar.hp { width: min(230px, 54vw); }
  .status-row .bar-label { min-width: auto; letter-spacing: 1px; }
  .menu-card h1 { font-size: 27px; }
  .menu-card h2 { font-size: 12px; margin-bottom: 16px; }
  .menu-card { padding: 20px 16px; }
  .debug { display: none !important; }
  button { font-size: 14px; padding: 11px 12px; }
  .tbtn { width: 58px; height: 58px; font-size: 11px; }
  .tbtn-hit { width: 78px; height: 78px; font-size: 13px; }
  #touch-move { width: 124px; height: 124px; }
  #touch-stick { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .crosshair { width: 18px; height: 18px; }
  .info-box { font-size: 10.5px; padding: 6px 9px; top: 10px; left: 10px; }
  .observe-hint { display: none; }
  #observe-frame { inset: 14px; }
  #observe-info { bottom: calc(env(safe-area-inset-bottom) + 20px); padding: 8px 16px; font-size: 11px; }
  #observe-info .view-name { font-size: 14px; }
}

/* iPad and landscape phones get more room back */
@media (min-width: 761px) and (pointer: coarse) {
  #touch-move { width: 160px; height: 160px; bottom: calc(env(safe-area-inset-bottom) + 100px); }
  .tbtn { width: 78px; height: 78px; font-size: 13px; }
  .tbtn-hit { width: 108px; height: 108px; font-size: 16px; }
}

/* keep the page itself from scrolling or rubber-banding on iOS */
html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.session-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -12px 0 18px; color: var(--text-dim); font-size: 12px; }
.session-row .hidden { display: none; }
.session-row button { padding: 8px 12px; }
.world-label { margin: -8px 0 14px; color: var(--mint); font-size: 12px; letter-spacing: 1px; }
.world-select { margin: 12px 0; text-align: left; }
.world-select h3 { color: var(--cyan); margin: 0 0 4px; }
.world-select > p { color: var(--text-dim); font-size: 13px; margin-bottom: 10px; }
.world-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.world-card { min-height: 100px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px; border-radius: 8px; border: 2px solid var(--line); background: rgba(24, 37, 65, 0.88); color: var(--text); text-align: left; }
.world-card:hover, .world-card:focus-visible { border-color: var(--cyan); outline: none; }
.world-card strong { color: var(--mint); font-size: 14px; }
.world-card span { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.world-card em { color: var(--amber); font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 420px) { .world-cards { grid-template-columns: 1fr; } }
.visit-lobby { margin-top: 14px; padding: 14px; border: 1px solid rgba(95, 227, 255, 0.22); border-radius: 18px; background: rgba(22, 39, 71, 0.72); text-align: left; }
.visit-lobby.hidden { display: none; }
.visit-lobby h3 { margin: 0 0 8px; color: var(--mint); font-size: 16px; }
.visit-lobby p { margin: 6px 0; color: var(--text-dim); font-size: 13px; line-height: 1.4; }
.visit-lobby .visit-owner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.visit-lobby .visit-owner button { min-height: 46px; }
.visit-lobby select { width: 100%; min-height: 48px; margin: 8px 0; padding: 8px 12px; border-radius: 12px; }
.visit-hud { position: fixed; z-index: 80; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 10px; border: 1px solid rgba(145, 205, 255, 0.4); border-radius: 18px; background: rgba(9, 15, 33, 0.92); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); color: var(--text); font-size: 13px; text-align: center; pointer-events: auto; touch-action: manipulation; }
.visit-hud.hidden { display: none; }
.visit-hud button { min-height: 44px; padding: 8px 14px; }
.visit-status { flex: 1 1 100%; color: var(--mint); font-weight: 800; }
.visit-request { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; }
.visit-request.hidden { display: none; }
.visit-request span { flex: 1 1 100%; color: var(--text-dim); }
.visit-mode-dialog { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(5, 10, 24, .76); touch-action: manipulation; }
.visit-mode-dialog.hidden { display: none; }
.visit-mode-dialog .menu-card { width: min(520px, 100%); max-height: 90dvh; overflow-y: auto; }
.visit-mode-dialog p { color: var(--text-dim); }
@media (max-width: 760px) {
  .visit-lobby { padding: 11px; }
  .visit-lobby .visit-owner { align-items: stretch; flex-direction: column; }
  .visit-hud { top: max(8px, env(safe-area-inset-top)); width: calc(100vw - 16px); padding: 8px; border-radius: 15px; }
  .visit-hud button { min-height: 48px; }
}

/* Shared visibility state for gameplay buttons and nested panels. */
.hidden { display: none !important; }