/* =========================================================
   CIVIL POP — Styles
   ========================================================= */

:root {
  --vh: 1vh;
  --tint: #ede7de;
  --yellow: #ffce6b;
  --yellow-d: #f6b73f;
  --ink: #2b2b2b;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;              /* no double-tap / pinch zoom */
  -ms-touch-action: none;
  overscroll-behavior: none;
}
/* kill zoom gestures on every game element (touch-action doesn't inherit) */
#app, #app * { touch-action: none; }

#app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  color: #fff;
}

/* ---------- Background (user-supplied image) ---------- */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #d9c7a6 url("assets/bg.png") center center / cover no-repeat;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  text-align: center;
  padding: max(24px, env(safe-area-inset-top)) 16px 0;
  pointer-events: none; /* let taps fall through to the stage */
}
.live-dot { pointer-events: none; }
.title {
  font-size: clamp(38px, 11vw, 84px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 4px 0 rgba(90,70,50,0.35), 0 8px 18px rgba(0,0,0,0.25);
}
.score {
  font-size: clamp(28px, 7vw, 48px);
  font-weight: 700;
  margin-top: 6px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

/* ---------- Stage ---------- */
.stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Big cat anchored to the bottom; lower body tucks behind the panel */
.cat-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* never taller than the viewport minus the header, so it can't overlap the title/score */
  height: min(82vh, 720px, calc(var(--vh, 1vh) * 100 - 200px));
  max-width: 96vw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  touch-action: none;
}
.cat-shadow { display: none; }
.cat {
  position: relative;
  height: 100%;
  transform-origin: 50% 88%;
  cursor: pointer;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.22));
}
.cat-img {
  height: 100%;
  width: auto;
  max-width: 96vw;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: opacity 0.05s linear;
}
.cat-closed { display: block; }            /* sizer */
.cat-open {                                /* overlay */
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
}
.cat.open .cat-closed { opacity: 0; }
.cat.open .cat-open { opacity: 1; }

.cat.pop { animation: popSquish 0.16s ease; }
@keyframes popSquish {
  0%   { transform: scaleY(1) scaleX(1); }
  45%  { transform: scaleY(0.9) scaleX(1.06) translateY(2%); }
  100% { transform: scaleY(1) scaleX(1); }
}
@keyframes slideIn {
  from { transform: translateX(18%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-18%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: none;
  border: none;
  color: #fff;
  font-size: clamp(40px, 9vw, 68px);
  font-weight: 300;
  line-height: 1;
  padding: 12px 18px;
  cursor: pointer;
  text-shadow: 0 3px 10px rgba(0,0,0,0.3);
  opacity: 0.9;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.arrow:active { transform: translateY(-50%) scale(0.85); opacity: 1; }
.arrow-left { left: max(4px, env(safe-area-inset-left)); }
.arrow-right { right: max(4px, env(safe-area-inset-right)); }

/* particles (full-screen overlay, spawn at cursor) */
.particles { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.particle {
  position: absolute;
  transform: translate(-50%, -50%);
  animation: fly 0.7s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes fly {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(40deg); opacity: 0; }
}

/* ---------- Bottom panel (overlaps the cat's lower body) ---------- */
.panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 4;
  background: #fff;
  border-radius: 24px 24px 0 0;
  width: min(560px, 96%);
  padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,0.16);
  color: var(--ink);
}
.cat-name {
  text-align: center;
  font-weight: 800;
  font-size: clamp(15px, 4.4vw, 21px);
  letter-spacing: 0.05em;
  color: #6b5a48;
  margin-bottom: 2px;
}
.team-tag {
  text-align: center;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.team-tag.tag-tony { color: #d23c48; }
.team-tag.tag-cap  { color: #3f5bd8; }
.team-tag.tag-zemo { color: #9b30ae; }
.currencies {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 10px;
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
}
.cur { display: flex; align-items: center; gap: 8px; }
.star-icon { color: #3f5bd8; font-size: 1.15em; }
.gem-icon  { color: #e23c48; font-size: 1.05em; transform: scaleY(1.15); }
.tri-icon  { color: #e23c48; font-size: 1.0em; }   /* Team Tony (triangle) */
.zemo-icon { color: #9b30ae; font-size: 1.35em; line-height: 1; }   /* Team Zemo (circle) */

.select-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--ink);
  font-size: clamp(20px, 6vw, 30px);
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--yellow-d);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s;
}
.select-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-d); }
.select-btn.locked { background: #d9d4cc; box-shadow: 0 4px 0 #b9b4ac; color: #7a746c; }
.select-btn.shake { animation: shake 0.3s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* ---------- In-game controls ---------- */
.game-controls {
  position: absolute;
  z-index: 6;
  top: max(16px, env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}
.game-controls > * { pointer-events: auto; }
.back-btn, .sound-btn {
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  border: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
}
.back-btn:active, .sound-btn:active { transform: scale(0.9); }

/* back-to-team-select button (character-select screen only) */
.home-btn {
  position: absolute;
  z-index: 6;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  width: 46px; height: 46px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: var(--ink);
  font-size: 24px; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
}
.home-btn:active { transform: scale(0.9); }
#app.playing .home-btn { display: none; } /* in-game uses its own back */
.combo {
  font-weight: 900;
  font-size: clamp(18px, 5vw, 26px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  min-height: 1.2em;
}

.tap-hint {
  position: absolute;
  z-index: 6;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.5);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 18px);
  white-space: nowrap;
  animation: pulse 1s ease infinite;
}
@keyframes pulse { 50% { opacity: 0.55; } }

.hidden { display: none !important; }

/* Live server indicator */
.live-dot {
  position: absolute;
  z-index: 6;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(30,180,90,0.85);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#app.playing .live-dot { top: auto; bottom: calc(env(safe-area-inset-bottom) + 8px); }

/* ---------- Playing mode: keep panel (score + name), hide browse UI ---------- */
#app.playing .arrow,
#app.playing .select-btn,
#app.playing .team-tag { display: none; }
#app.playing .cat-name { margin-bottom: 12px; }

/* ---------- Landscape / desktop tuning ---------- */
@media (min-aspect-ratio: 5/4) {
  .cat-wrap { height: min(72vh, 620px, calc(var(--vh, 1vh) * 100 - 180px)); }
  .cat-img { max-width: 46vw; }
  .title { font-size: clamp(34px, 6vw, 72px); }
}

@media (prefers-reduced-motion: reduce) {
  .cat.pop, .particle, .tap-hint { animation: none !important; }
}