/* =====================================================================
   HIT THE BUTTON - Game styles (game.css)  v1
   Loaded only on pages with the game. Self-contained under .htb.
   ===================================================================== */
.htb {
  --g-accent: #5A32E6;
  --g-accent-2: #7B2FF7;
  --g-grad: linear-gradient(135deg, var(--g-accent) 0%, var(--g-accent-2) 100%);
  --g-surface: #FFFFFF;
  --g-ink: #1E2033;
  position: relative;
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(123,47,247,0.10), transparent 60%),
    linear-gradient(180deg, #FBFAFF 0%, #F3EFFF 100%);
  border: 1px solid #E7E4F2;
  box-shadow: 0 22px 50px rgba(41,30,90,0.16);
  overflow: hidden;
  min-height: 520px;
  isolation: isolate;
  font-family: var(--font-body, system-ui, sans-serif);
}
/* Themes swap the accent + emoji field */
.htb[data-theme="space"]  { --g-accent:#5A32E6; --g-accent-2:#9333EA; }
.htb[data-theme="ocean"]  { --g-accent:#0EA5E9; --g-accent-2:#0D9488; }
.htb[data-theme="jungle"] { --g-accent:#16A34A; --g-accent-2:#65A30D; }
.htb[data-theme="candy"]  { --g-accent:#EC4899; --g-accent-2:#F97316; }

/* floating emoji background */
.htb__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.htb__field span { position: absolute; font-size: 2rem; opacity: 0.16; animation: htb-drift 12s linear infinite; }
@keyframes htb-drift { from { transform: translateY(110%) rotate(0deg); } to { transform: translateY(-30%) rotate(360deg); } }

.htb__screen { position: relative; z-index: 1; padding: clamp(20px, 4vw, 40px); display: none; }
.htb__screen.is-active { display: block; animation: htb-fade 0.35s ease; }
@keyframes htb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Menu ---- */
.htb__title { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); text-align: center; color: var(--g-ink); margin-bottom: 4px; }
.htb__subtitle { text-align: center; color: #5C6079; margin-bottom: 24px; font-weight: 700; }
.htb__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.htb__mode {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px;
  border-radius: 20px; background: #fff; border: 2px solid #EAE6F7; box-shadow: 0 4px 12px rgba(41,30,90,0.06);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, box-shadow 0.2s;
  text-align: center; -webkit-tap-highlight-color: transparent;
}
.htb__mode:hover, .htb__mode:focus-visible { transform: translateY(-4px); border-color: var(--g-accent); box-shadow: 0 14px 28px rgba(41,30,90,0.14); outline: none; }
.htb__mode .emoji { font-size: 2.4rem; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg,#F1ECFF,#E9F5FF); }
.htb__mode strong { font-family: var(--font-display, sans-serif); font-weight: 600; font-size: 1.05rem; color: var(--g-ink); }
.htb__mode small { color: #5C6079; font-size: 0.8rem; }

/* Options row */
.htb__options { margin-top: 22px; display: grid; gap: 18px; background: rgba(255,255,255,0.7); border: 1px solid #EAE6F7; border-radius: 20px; padding: 20px; }
.htb__opt-label { font-family: var(--font-display, sans-serif); font-weight: 600; color: var(--g-ink); margin-bottom: 10px; display: block; }
.htb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.htb__chip {
  padding: 9px 16px; border-radius: 999px; background: #fff; border: 2px solid #EAE6F7;
  font-weight: 800; color: #3A3D57; font-size: 0.92rem; transition: all 0.16s; -webkit-tap-highlight-color: transparent;
}
.htb__chip:hover { border-color: var(--g-accent); }
.htb__chip[aria-pressed="true"] { background: var(--g-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(90,50,230,0.28); }
.htb__start-row { display: flex; justify-content: center; margin-top: 8px; }

/* ---- Play ---- */
.htb__hud { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.htb__stat { background: #fff; border: 1px solid #EAE6F7; border-radius: 16px; padding: 10px 16px; text-align: center; min-width: 78px; box-shadow: 0 4px 12px rgba(41,30,90,0.06); }
.htb__stat b { display: block; font-family: var(--font-display, sans-serif); font-size: 1.4rem; color: var(--g-ink); line-height: 1; }
.htb__stat span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #5C6079; font-weight: 800; }
.htb__stat--time b { color: var(--g-accent); }
.htb__timebar { height: 10px; border-radius: 999px; background: #EAE6F7; overflow: hidden; margin-bottom: 22px; }
.htb__timebar i { display: block; height: 100%; width: 100%; background: var(--g-grad); border-radius: 999px; transform-origin: left; transition: transform 1s linear; }
.htb__timebar.low i { background: linear-gradient(135deg,#FF8E8E,#FF6B6B); }

.htb__question {
  text-align: center; font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.4rem); color: var(--g-ink); margin: 6px 0 22px;
  min-height: 1.2em; transition: transform 0.15s, color 0.15s;
}
.htb__question.correct { color: var(--g-accent); transform: scale(1.08); }
.htb__question.wrong { color: #E23B3B; animation: htb-shake 0.3s; }
@keyframes htb-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

.htb__answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 560px; margin: 0 auto; }
.htb__answer {
  font-family: var(--font-display, sans-serif); font-weight: 700; font-size: clamp(1.4rem, 4vw, 2rem);
  padding: 22px 10px; border-radius: 18px; background: #fff; color: var(--g-ink);
  border: 2px solid #EAE6F7; box-shadow: 0 6px 0 #E1DCF2; transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.htb__answer:hover { border-color: var(--g-accent); }
.htb__answer:active { transform: translateY(4px); box-shadow: 0 2px 0 #E1DCF2; }
.htb__answer.pick-correct { background: var(--g-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 0 rgba(0,0,0,0.15); }
.htb__answer.pick-wrong { background: #FFE3E3; color: #C23A3A; border-color: #FFC2C2; box-shadow: 0 6px 0 #F3B4B4; }
.htb__answer.reveal-correct { background: #DFF7EE; color: #0B8C63; border-color: #A7E9D0; }

.htb__toast { text-align: center; font-family: var(--font-display, sans-serif); font-weight: 700; color: var(--g-accent); height: 28px; margin-top: 14px; font-size: 1.1rem; opacity: 0; transition: opacity 0.2s; }
.htb__toast.show { opacity: 1; }

.htb__toolbar { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.htb__tool {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.8); border: 1px solid #EAE6F7; font-weight: 800; color: #3A3D57; font-size: 0.9rem;
  transition: all 0.16s; -webkit-tap-highlight-color: transparent;
}
.htb__tool:hover { border-color: var(--g-accent); color: var(--g-accent); }

/* theme picker */
.htb__themes { display: flex; gap: 8px; }
.htb__theme-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #EAE6F7; cursor: pointer; }
.htb__theme-dot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--g-ink); }
.htb__theme-dot[data-t="space"]  { background: linear-gradient(135deg,#5A32E6,#9333EA); }
.htb__theme-dot[data-t="ocean"]  { background: linear-gradient(135deg,#0EA5E9,#0D9488); }
.htb__theme-dot[data-t="jungle"] { background: linear-gradient(135deg,#16A34A,#65A30D); }
.htb__theme-dot[data-t="candy"]  { background: linear-gradient(135deg,#EC4899,#F97316); }

/* ---- Game over ---- */
.htb__over { text-align: center; max-width: 460px; margin: 0 auto; }
.htb__stars { font-size: 2.6rem; letter-spacing: 6px; margin: 10px 0; }
.htb__over h3 { font-family: var(--font-display, sans-serif); font-size: 2rem; color: var(--g-ink); }
.htb__final { font-size: 4rem; font-family: var(--font-display, sans-serif); font-weight: 700; background: var(--g-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin: 8px 0; }
.htb__over p { color: #5C6079; font-weight: 700; }
.htb__over-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

.htb__btn {
  font-family: var(--font-display, sans-serif); font-weight: 600; font-size: 1.1rem; padding: 15px 30px;
  border-radius: 999px; color: #fff; background: var(--g-grad); box-shadow: 0 12px 26px rgba(90,50,230,0.3), inset 0 -4px 0 rgba(0,0,0,0.14);
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1), filter 0.14s; -webkit-tap-highlight-color: transparent;
}
.htb__btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.htb__btn:active { transform: translateY(1px); }
.htb__btn--ghost { background: #fff; color: var(--g-accent); box-shadow: 0 4px 12px rgba(41,30,90,0.1); border: 2px solid #EAE6F7; }

/* MTC practice - reuses htb__ components, needs the same custom props */
.mtc {
  --g-accent: #5A32E6; --g-accent-2: #7B2FF7;
  --g-grad: linear-gradient(135deg, var(--g-accent) 0%, var(--g-accent-2) 100%);
  --g-surface: #FFFFFF; --g-ink: #1E2033;
  position: relative; border-radius: 28px;
  background: linear-gradient(180deg, #FBFAFF 0%, #F3EFFF 100%);
  border: 1px solid #E7E4F2; box-shadow: 0 22px 50px rgba(41,30,90,0.16);
  overflow: hidden; min-height: 480px; isolation: isolate;
  font-family: var(--font-body, system-ui, sans-serif);
}
.mtc .htb__screen { display: none; }
.mtc .htb__screen.is-active { display: block; }

/* Mini-game (embedded on game-review pages) - reuses htb__ components */
.htbm {
  --g-accent: #5A32E6; --g-accent-2: #7B2FF7;
  --g-grad: linear-gradient(135deg, var(--g-accent) 0%, var(--g-accent-2) 100%);
  --g-surface: #FFFFFF; --g-ink: #1E2033;
  position: relative; border-radius: 26px;
  background: linear-gradient(180deg, #FBFAFF 0%, #F3EFFF 100%);
  border: 1px solid #E7E4F2; box-shadow: 0 18px 40px rgba(41,30,90,0.14);
  overflow: hidden; min-height: 420px; isolation: isolate; margin-block: 1.5rem;
  font-family: var(--font-body, system-ui, sans-serif);
}
.htbm .htb__screen { display: none; }
.htbm .htb__screen.is-active { display: block; }
.htbm .htb__answers { grid-template-columns: repeat(2, 1fr); max-width: 480px; }

/* player badge (2-player) */
.htb__player-badge { display: inline-block; font-family: var(--font-display, sans-serif); font-weight: 700;
  padding: 6px 18px; border-radius: 999px; margin-bottom: 14px; color: #fff; background: var(--g-grad); }
.htb__player-badge[data-p="2"] { background: linear-gradient(135deg,#FF8E8E,#FF6B6B); }

/* type-the-answer keypad */
.htb__keypad { max-width: 340px; margin: 0 auto; }
.htb__display { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 2.4rem;
  text-align: center; background: #fff; border: 2px solid #EAE6F7; border-radius: 16px; padding: 10px;
  margin-bottom: 14px; color: var(--g-ink); min-height: 60px; }
.htb__display.ok { background: #DFF7EE; color: #0B8C63; border-color: #A7E9D0; }
.htb__display.bad { background: #FFE3E3; color: #C23A3A; border-color: #FFC2C2; }
.htb__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.htb__key { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 1.6rem; padding: 16px;
  border-radius: 14px; background: #fff; color: var(--g-ink); border: 2px solid #EAE6F7; box-shadow: 0 5px 0 #E1DCF2;
  transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent; }
.htb__key:active { transform: translateY(4px); box-shadow: 0 1px 0 #E1DCF2; }
.htb__key--go { background: var(--g-grad); color: #fff; border-color: transparent; box-shadow: 0 5px 0 rgba(0,0,0,.15); }

/* stats screen */
.htb__stats-box { max-width: 520px; }
.htb__stats-top { display: flex; gap: 12px; justify-content: center; margin: 14px 0; }
.htb__stats-h { font-family: var(--font-display, sans-serif); color: var(--g-ink); margin: 18px 0 10px; }
.htb__stats-body { text-align: left; }
.htb__stat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid #EEE9FB; font-weight: 700; color: #3A3D57; }
.htb__stat-row b { font-family: var(--font-display, sans-serif); font-size: 1.2rem; color: var(--g-accent); }

/* confetti canvas */
.htb__confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

@media (max-width: 620px) {
  .htb__modes { grid-template-columns: repeat(2, 1fr); }
  .htb__answers { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .htb__answer { padding: 18px 8px; }
  .htb__hud { gap: 8px; }
  .htb__stat { min-width: 64px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .htb__field span { animation: none; display: none; }
  .htb__screen.is-active, .htb__question.correct { animation: none; }
}