/* ==========================================================
   VEXENTA — Play mode (game HUD)
   ========================================================== */
.game {
  --g-ink: #1d2233;
  --g-blue: #2f54ff;
  --g-coral: #ff6b4a;
  --g-yellow: #ffc23c;
  --g-mint: #1fbf9f;
  --g-cream: #fff8ec;
  --g-font: "Bungee", "Inter Tight", system-ui, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: clip;
  background: linear-gradient(180deg, #8fd0ff 0%, #cfeaff 55%, #fbe6cf 100%);
  color: var(--g-ink);
  font-family: var(--body);
  visibility: hidden;
  clip-path: circle(0px at var(--cx, 50%) var(--cy, 0%));
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.9s;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.game.is-open {
  visibility: visible;
  clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 0%));
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s;
}
body.mode-game { overflow: hidden; }
.game__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Shared chunky toy style */
.hud__chip, .hud__btn, .hud__brand, .hud__map, .zone, .toast, .intro__card, .hud__keys span, .jump, .joy {
  border: 3px solid var(--g-ink);
  box-shadow: 0 5px 0 var(--g-ink);
}

/* ---------- Top HUD ---------- */
.hud--top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
  pointer-events: none;
}
.hud--top > * { pointer-events: auto; }
.hud__brand {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 14px;
  background: var(--g-cream); font: 15px/1 var(--g-font); letter-spacing: 0.06em;
}
.hud__brand svg { width: 22px; height: 22px; fill: var(--g-blue); }
.hud__brand span { color: var(--g-coral); }
.hud__stats { display: flex; gap: 10px; }
.hud__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 14px;
  background: #fff; font: 15px/1 var(--g-font);
}
.hud__chip b { font-weight: 400; }
.hud__chip.is-bump { animation: bump 0.4s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 40% { transform: scale(1.18) rotate(-3deg); } }
.gem-ico { width: 14px; height: 14px; background: var(--g-yellow); transform: rotate(45deg); border: 2px solid var(--g-ink); border-radius: 3px; }
.zone-ico { width: 14px; height: 14px; border-radius: 50%; background: var(--g-mint); border: 2px solid var(--g-ink); }
.hud__right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hud__map { width: 132px; height: 132px; border-radius: 50%; background: #fff6e6; }
.hud__btns { display: flex; gap: 8px; }
.hud__btn {
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px; background: #fff; cursor: pointer;
  font: 15px/1 var(--g-font); color: var(--g-ink); transition: transform 0.12s, box-shadow 0.12s;
}
.hud__btn:hover { background: var(--g-yellow); }
.hud__btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--g-ink); }
.hud__btn--exit { background: var(--g-ink); color: #fff; font-size: 13px; }
.hud__btn--exit:hover { background: var(--g-blue); }
.hud__btn.is-muted { opacity: 0.55; text-decoration: line-through; }

/* ---------- Key hints ---------- */
.hud__keys {
  position: absolute; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; transition: opacity 0.6s;
}
.hud__keys span { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.92); font: 600 12px var(--body); box-shadow: 0 4px 0 var(--g-ink); }
.game kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px;
  background: var(--g-cream); border: 2px solid var(--g-ink); border-bottom-width: 4px;
  font: 11px/1 var(--g-font); color: var(--g-ink);
}
.hud__keys.is-faded { opacity: 0; }

/* ---------- Touch controls ---------- */
.joy, .jump { display: none; }
.is-touch .joy {
  display: block; position: absolute; left: 22px; bottom: max(26px, env(safe-area-inset-bottom));
  width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.5); backdrop-filter: blur(6px);
}
.joy__knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--g-yellow); border: 3px solid var(--g-ink); box-shadow: 0 4px 0 var(--g-ink); }
.is-touch .jump {
  display: grid; place-items: center; position: absolute; right: 22px; bottom: max(36px, env(safe-area-inset-bottom));
  width: 84px; height: 84px; border-radius: 50%; background: var(--g-coral); color: #fff; font: 14px var(--g-font);
}
.is-touch .jump:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--g-ink); }
.is-touch .hud__keys { display: none; }

/* ---------- Zone panel ---------- */
.zone {
  position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: min(360px, calc(100% - 32px));
  padding: 20px 20px 18px; border-radius: 20px; background: var(--g-cream);
  transform: translateY(calc(100% + 40px)) rotate(4deg); transition: transform 0.5s cubic-bezier(.3,1.4,.5,1);
}
.zone.is-on { transform: none; }
.zone__tag { display: inline-block; padding: 5px 10px; border-radius: 8px; border: 2px solid var(--g-ink); font: 11px/1 var(--g-font); letter-spacing: 0.06em; color: var(--zone-ink, #fff); background: var(--zone, var(--g-blue)); }
.zone__title { margin: 12px 0 6px; font: 26px/1.05 var(--g-font); }
.zone__text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #3d4256; }
.zone__list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.zone__list li { font: 600 12px var(--body); padding: 4px 9px; border-radius: 8px; background: #fff; border: 2px solid var(--g-ink); }
.zone__cta {
  width: 100%; height: 46px; border-radius: 12px; border: 3px solid var(--g-ink); box-shadow: 0 4px 0 var(--g-ink);
  background: var(--zone, var(--g-blue)); color: var(--zone-ink, #fff); font: 14px var(--g-font); cursor: pointer;
}
.zone__cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--g-ink); }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; top: 84px; padding: 12px 18px; border-radius: 14px; background: var(--g-yellow);
  font: 15px/1.2 var(--g-font); text-align: center; white-space: nowrap;
  transform: translate(-50%, -30px) scale(.8); opacity: 0; transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .3s;
  pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; }

/* ---------- Intro ---------- */
.intro {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px;
  background: rgba(29, 34, 51, 0.25); backdrop-filter: blur(3px); transition: opacity .5s, visibility .5s;
}
.intro.is-hidden { opacity: 0; visibility: hidden; }
.intro__card {
  width: min(460px, 100%); padding: 28px 26px 22px; border-radius: 26px; background: var(--g-cream); text-align: center;
  box-shadow: 0 8px 0 var(--g-ink), 0 40px 80px -30px rgba(0,0,0,.5);
  animation: pop .7s cubic-bezier(.3,1.5,.5,1) both .5s;
}
@keyframes pop { from { transform: scale(.7) rotate(-4deg); opacity: 0; } }
.intro__kicker { margin: 0; font: 12px var(--g-font); letter-spacing: .14em; color: var(--g-coral); }
.intro__title { margin: 8px 0 12px; font: clamp(40px, 9vw, 58px)/.92 var(--g-font); color: var(--g-blue); text-shadow: 3px 3px 0 var(--g-ink); -webkit-text-stroke: 1.5px var(--g-ink); }
.intro__text { margin: 0 auto 18px; max-width: 340px; font-size: 15px; color: #3d4256; }
.intro__how { display: grid; gap: 8px; justify-items: center; margin-bottom: 20px; font-size: 13px; font-weight: 600; }
.intro__how div { display: flex; align-items: center; gap: 4px; }
.intro__how span { margin: 0 8px 0 4px; }
.intro__touch { display: none !important; }
.is-touch .intro__how div:not(.intro__touch) { display: none; }
.is-touch .intro__touch { display: block !important; }
.intro__start {
  width: 100%; height: 56px; border-radius: 16px; border: 3px solid var(--g-ink); box-shadow: 0 6px 0 var(--g-ink);
  background: var(--g-yellow); font: 18px var(--g-font); color: var(--g-ink); cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.intro__start:not(:disabled):hover { background: #ffd56b; }
.intro__start:not(:disabled):active { transform: translateY(5px); box-shadow: 0 1px 0 var(--g-ink); }
.intro__start:disabled { cursor: progress; opacity: .7; }
.intro__back { margin-top: 12px; border: 0; background: none; font: 600 13px var(--body); color: #5b6070; text-decoration: underline; cursor: pointer; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .hud--top { flex-wrap: wrap; padding-left: 10px; padding-right: 10px; }
  .hud__brand { font-size: 12px; padding: 7px 10px 7px 8px; }
  .hud__brand span { display: none; }
  .hud__stats { order: 3; width: 100%; }
  .hud__chip { font-size: 13px; padding: 7px 11px; }
  .hud__map { width: 92px; height: 92px; }
  .hud__btn--exit { font-size: 11px; padding: 0 9px; }
  .hud__btn { height: 36px; min-width: 36px; }
  .zone { top: auto; bottom: 170px; left: 10px; right: 10px; width: auto; padding: 14px 14px 12px; }
  .zone__title { font-size: 20px; }
  .zone__text { font-size: 13px; margin-bottom: 8px; }
  .zone__list { display: none; }
  .zone__cta { height: 40px; font-size: 12px; }
  .toast { top: 150px; font-size: 13px; }
}