/* ============================================================
 * game.css — catch game canvas + wheel
 * ============================================================ */

/* ---------- Catch game ---------- */
#screen-game { padding: 0; }
#catch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.game-hud {
  position: absolute; top: 64px; left: 0; right: 0; z-index: 12;
  display: flex; justify-content: center; gap: 18px; pointer-events: none;
}
.hud-item {
  background: rgba(10,28,82,.62); color: #fff; backdrop-filter: blur(6px);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 3vw, 30px);
  padding: 8px 22px; border-radius: 999px; box-shadow: var(--shadow-sm); min-width: 120px; text-align: center;
}
.hud-item.score { color: var(--gold); }

.game-intro { position: absolute; inset: 0; z-index: 14; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 23, 63, .45); backdrop-filter: blur(3px); }
.intro-card { max-width: 620px; }
.intro-rules { display: flex; gap: 18px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.intro-rules .rule { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.intro-rules .rule img { width: 64px; height: 64px; object-fit: contain; }
.intro-rules .rule.good span:last-child { color: var(--green); }
.intro-rules .rule.bad span:last-child { color: var(--red); }
.x-shirt { width: 64px; height: 64px; border-radius: 10px;
  background: linear-gradient(135deg, #6a5acd, #3b5bdb); position: relative; }
.x-shirt::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34px; font-weight: 900; }

.game-feedback { position: absolute; font-family: var(--font-display); font-weight: 900;
  font-size: 40px; pointer-events: none; z-index: 13; animation: floatUp .8s ease forwards; }
.game-feedback.plus { color: #36e07a; } .game-feedback.minus { color: #ff6b6b; }
@keyframes floatUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }

/* ---------- Wheel ---------- */
#screen-wheel { gap: 10px; }
.wheel-kicker { margin-bottom: 6px; }
.wheel-wrap { position: relative; display: flex; align-items: center; justify-content: center;
  width: min(72vh, 620px); height: min(72vh, 620px); }
#wheel-canvas { width: 100%; height: 100%; filter: drop-shadow(0 18px 36px rgba(7,26,70,.4)); }
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent;
  border-top: 38px solid var(--gold); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.wheel-spin-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 22%; height: 22%; border-radius: 50%; border: 6px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--red), var(--red-dark)); color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(16px, 2.4vw, 24px);
  box-shadow: 0 8px 18px rgba(0,0,0,.3); z-index: 6;
}
.wheel-spin-btn:active { transform: translate(-50%, -50%) scale(.94); }
.wheel-spin-btn[disabled] { filter: grayscale(.4) opacity(.7); pointer-events: none; }