/* MISCHIEVIA — all selectors scoped under #mischievia-game for Squarespace safety */

:root { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: #050407;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* =====================================================================
   ROOT VARIABLES & CONTAINER
   ===================================================================== */

#mischievia-game {
  --cream: #fff1cf;
  --cream-soft: rgba(255, 241, 207, 0.82);
  --gold: #ffc857;
  --orange: #ff6a00;
  --red: #ff2f5f;
  --blue: #3ee4ff;
  --green: #4fffb0;
  --deep: #07040b;
  --purple: #23102f;
  --panel: rgba(10, 7, 18, 0.82);
  --panel-solid: #110918;
  --line: rgba(255, 255, 255, 0.14);
  --line-bright: rgba(255, 255, 255, 0.26);
  --shadow: rgba(0, 0, 0, 0.6);

  position: relative;
  width: min(1180px, 100%);
  min-height: 820px;
  overflow: hidden;
  border-radius: 32px;
  color: var(--cream);
  background:
    radial-gradient(circle at 16% 36%, rgba(62, 228, 255, 0.22), transparent 34%),
    radial-gradient(circle at 84% 38%, rgba(255, 47, 95, 0.19), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255, 106, 0, 0.17), transparent 38%),
    linear-gradient(135deg, #030206, #16081f 48%, #070309);
  box-shadow: 0 30px 90px var(--shadow), 0 0 0 1px rgba(255,255,255,0.05);
  isolation: isolate;
  /* Teko = game-logo headers, Barlow Condensed = UI labels, Barlow = body copy */
  font-family: "Teko", "Barlow Condensed", Impact, system-ui, sans-serif;
}

#mischievia-game * { box-sizing: border-box; }
#mischievia-game button, #mischievia-game input, #mischievia-game select { font: inherit; }

/* =====================================================================
   BACKGROUND LAYERS
   ===================================================================== */

#mischievia-game .mg-bg,
#mischievia-game .mg-orb,
#mischievia-game .mg-particles,
#mischievia-game .mg-grid,
#mischievia-game .mg-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#mischievia-game .mg-bg { z-index: -5; }

#mischievia-game .mg-orb {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(88px);
  opacity: 0.75;
  animation: mgPulse 7s ease-in-out infinite alternate;
}

#mischievia-game .mg-orb-blue {
  background: rgba(62, 228, 255, 0.38);
  left: -160px;
  top: 100px;
}

#mischievia-game .mg-orb-red {
  background: rgba(255, 70, 0, 0.38);
  right: -150px;
  top: 100px;
  animation-delay: -3s;
}

#mischievia-game .mg-particles {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,106,0,.7) 0 1px, transparent 3px),
    radial-gradient(circle, rgba(62,228,255,.65) 0 1px, transparent 2px);
  background-size: 110px 110px, 160px 160px, 210px 210px;
  animation: mgDrift 20s linear infinite;
  opacity: .4;
}

#mischievia-game .mg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(700px) rotateX(62deg) translateY(220px) scale(1.4);
  opacity: .16;
}

#mischievia-game .mg-ember {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
  animation: mgEmberRise linear infinite;
  opacity: 0;
}

/* =====================================================================
   SCREEN SYSTEM
   ===================================================================== */

#mischievia-game .mg-screen {
  display: none;
  min-height: 820px;
  padding: clamp(20px, 4vw, 52px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  gap: 0;
}

#mischievia-game .mg-screen.active {
  display: flex;
  animation: mgScreenIn .32s ease-out both;
}

/* =====================================================================
   SHARED CARD SURFACES
   ===================================================================== */

#mischievia-game .mg-logo-card,
#mischievia-game .mg-panel,
#mischievia-game .mg-card,
#mischievia-game .mg-reveal-card {
  background: linear-gradient(180deg, rgba(35, 16, 47, .85), rgba(5, 4, 9, .92));
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.52), inset 0 0 40px rgba(255,255,255,.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#mischievia-game .mg-card::before,
#mischievia-game .mg-reveal-card::before,
#mischievia-game .mg-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(62,228,255,.1), transparent 38%, rgba(255,106,0,.11));
  pointer-events: none;
}

/* =====================================================================
   LOGO / START SCREEN
   ===================================================================== */

#mischievia-game .mg-logo-wrap {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mischievia-game .mg-logo-img {
  width: min(560px, 94vw);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(255,130,0,.5)) drop-shadow(0 8px 24px rgba(0,0,0,.7));
  animation: mgFloatSoft 4s ease-in-out infinite;
}

#mischievia-game .mg-logo-fallback {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 4vw, 40px) clamp(24px, 5vw, 60px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(35,16,47,.9), rgba(5,4,9,.94));
  border: 1px solid rgba(255,200,87,.25);
  box-shadow: 0 0 60px rgba(255,100,0,.2), 0 24px 60px rgba(0,0,0,.55);
}

/* Halo shown inside fallback only */
#mischievia-game .mg-halo {
  width: 140px;
  height: 38px;
  border: 6px solid rgba(255, 200, 87, .9);
  border-radius: 50%;
  margin: 0 auto 8px;
  transform: perspective(240px) rotateX(58deg);
  box-shadow: 0 0 22px rgba(255, 200, 87, .5);
  animation: mgFloatSoft 3.5s ease-in-out infinite;
}

#mischievia-game .mg-horns {
  position: absolute;
  right: 22px;
  top: 14px;
  color: var(--red);
  font-size: 52px;
  transform: rotate(20deg);
  text-shadow: 0 0 16px rgba(255, 47, 95, .7);
}

/* =====================================================================
   HEADINGS
   ===================================================================== */

#mischievia-game h1 {
  font-family: "Teko", Impact, system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
  font-size: clamp(72px, 16vw, 160px);
  line-height: .82;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* Orange-to-gold gradient matching logo */
  background: linear-gradient(175deg, #ffe066 0%, #ffa500 40%, #ff6a00 80%, #cc2200 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 0 rgba(100,20,0,.9)) drop-shadow(0 0 30px rgba(255,140,0,.5));
  paint-order: stroke fill;
}

#mischievia-game h2 {
  font-family: "Teko", Impact, system-ui, sans-serif;
  font-weight: 600;
  margin: 0 0 12px;
  font-size: clamp(28px, 5.5vw, 60px);
  line-height: .95;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.8), 0 0 22px rgba(255,255,255,.12);
}

#mischievia-game h3 {
  font-family: "Teko", Impact, system-ui, sans-serif;
  font-weight: 600;
  margin: 0 0 8px;
  font-size: clamp(22px, 3.5vw, 38px);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gold);
}

#mischievia-game .mg-subtitle {
  font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
  font-weight: 900;
  margin: 10px 0 0;
  font-size: clamp(18px, 3.5vw, 38px);
  color: white;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(62,228,255,.5), 0 2px 0 rgba(0,0,0,.8);
}

/* =====================================================================
   TYPOGRAPHY UTILITIES
   ===================================================================== */

#mischievia-game .mg-kicker {
  font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--blue);
  letter-spacing: .22em;
  font-size: 11px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(62,228,255,.4);
}

#mischievia-game .mg-tagline {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  max-width: 580px;
  margin: 0 auto 24px;
  font-size: clamp(14px, 1.9vw, 18px);
  line-height: 1.6;
  color: var(--cream-soft);
}

#mischievia-game .mg-muted {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 16px);
  color: rgba(255, 241, 207, .6);
  margin: 0 0 16px;
  line-height: 1.55;
}

/* =====================================================================
   MODE GRID (START SCREEN)
   ===================================================================== */

#mischievia-game .mg-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(560px, 100%);
  margin-bottom: 20px;
}

#mischievia-game .mg-mode-btn {
  background: linear-gradient(180deg, rgba(35,16,47,.9), rgba(10,6,18,.95));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(18px, 3vw, 28px) 16px;
  color: var(--cream);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}

#mischievia-game .mg-mode-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .2s ease;
  background: radial-gradient(circle at center, rgba(255,200,87,.14), transparent 65%);
}

#mischievia-game .mg-mode-btn:hover::before,
#mischievia-game .mg-mode-btn:focus::before { opacity: 1; }

#mischievia-game .mg-mode-btn:hover,
#mischievia-game .mg-mode-btn:focus {
  transform: translateY(-3px);
  border-color: rgba(255, 200, 87, .5);
  box-shadow: 0 16px 36px rgba(0,0,0,.4), 0 0 22px rgba(255,200,87,.12);
  outline: none;
}

#mischievia-game .mg-mode-icon {
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1;
}

#mischievia-game .mg-mode-btn strong {
  font-family: "Teko", Impact, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,200,87,.3);
}

#mischievia-game .mg-mode-btn small {
  font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--cream-soft);
  letter-spacing: .06em;
  text-transform: uppercase;
}

#mischievia-game .mg-mode-hot { border-color: rgba(255, 106, 0, .28); }
#mischievia-game .mg-mode-party { border-color: rgba(255, 47, 95, .28); }

#mischievia-game .mg-rank-peek {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: var(--gold);
  opacity: .7;
  min-height: 20px;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

#mischievia-game .mg-btn,
#mischievia-game .mg-powerup,
#mischievia-game .mg-icon-btn {
  cursor: pointer;
  border: 1px solid var(--line);
  color: var(--cream);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#mischievia-game .mg-btn {
  min-height: 52px;
  border-radius: 999px;
  padding: 10px 28px 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 1.9vw, 18px);
}

#mischievia-game .mg-primary {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #140604;
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(255,106,0,.3);
}

#mischievia-game .mg-secondary {
  background: rgba(255,255,255,.08);
}

#mischievia-game .mg-btn:hover,
#mischievia-game .mg-powerup:hover,
#mischievia-game .mg-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(62,228,255,.14), 0 0 20px rgba(255,106,0,.14);
  border-color: rgba(255, 200, 87, .5);
}

#mischievia-game .mg-btn:focus,
#mischievia-game .mg-powerup:focus,
#mischievia-game .mg-icon-btn:focus {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

#mischievia-game .mg-btn:disabled {
  opacity: .38;
  pointer-events: none;
}

#mischievia-game .mg-back-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 0;
  letter-spacing: .06em;
  align-self: flex-start;
  margin-bottom: 12px;
}

#mischievia-game .mg-add-btn {
  min-height: 52px;
  border-radius: 999px;
  padding: 12px 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: linear-gradient(135deg, var(--blue), #00a8cc);
  color: #040b0e;
  border-color: transparent;
  font-size: 14px;
  white-space: nowrap;
}

#mischievia-game .mg-mute {
  position: absolute;
  z-index: 10;
  right: 18px;
  top: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  font-size: 18px;
}

#mischievia-game .mg-music-btn {
  position: absolute;
  z-index: 10;
  right: 72px;
  top: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  font-size: 18px;
  transition: opacity .2s ease, transform .2s ease;
}

/* =====================================================================
   PANEL / FORMS
   ===================================================================== */

#mischievia-game .mg-panel {
  position: relative;
  width: min(720px, 100%);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

#mischievia-game .mg-input {
  width: min(400px, 100%);
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.38);
  color: var(--cream);
  text-align: center;
  padding: 0 20px;
  margin: 8px auto 18px;
  display: block;
  outline: none;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
}

#mischievia-game .mg-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 22px rgba(62,228,255,.2);
}

#mischievia-game .mg-input-inline {
  width: 100%;
  margin: 0;
  border-radius: 999px 0 0 999px;
}

#mischievia-game .mg-player-add-row {
  display: flex;
  width: min(400px, 100%);
  margin: 0 auto 18px;
  gap: 0;
}

#mischievia-game .mg-player-add-row .mg-add-btn {
  border-radius: 0 999px 999px 0;
  border-left: none;
}

#mischievia-game .mg-player-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mischievia-game .mg-player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 15px;
  animation: mgScreenIn .22s ease-out both;
}

#mischievia-game .mg-player-item .mg-player-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  color: #060412;
  flex-shrink: 0;
}

#mischievia-game .mg-player-item .mg-player-remove {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 50%;
  line-height: 1;
  transition: background .14s;
}

#mischievia-game .mg-player-item .mg-player-remove:hover {
  background: rgba(255,47,95,.15);
}

/* =====================================================================
   SELECT / SETTINGS
   ===================================================================== */

#mischievia-game .mg-select {
  background: rgba(0,0,0,.4);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--cream);
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

#mischievia-game .mg-settings-list {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  text-align: left;
}

#mischievia-game .mg-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}

#mischievia-game .mg-toggle {
  background: rgba(255,255,255,.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: var(--cream);
  cursor: pointer;
  transition: background .16s, border-color .16s;
}

#mischievia-game .mg-toggle[data-on="true"] {
  background: linear-gradient(135deg, rgba(62,228,255,.25), rgba(62,228,255,.1));
  border-color: var(--blue);
  color: var(--blue);
}

#mischievia-game .mg-party-options {
  width: min(400px, 100%);
  margin-bottom: 18px;
}

#mischievia-game .mg-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  border: none;
  outline: none;
  cursor: pointer;
}

#mischievia-game .mg-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255,106,0,.4);
}

#mischievia-game .mg-vol-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  border: none;
  cursor: pointer;
}

#mischievia-game .mg-vol-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--orange) 0%, rgba(255,255,255,.12) 0%);
  border-radius: 999px;
  height: 6px;
}

/* =====================================================================
   HUD (GAME SCREEN)
   ===================================================================== */

#mischievia-game .mg-hud {
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 10px;
  margin-bottom: 14px;
}

#mischievia-game .mg-hud-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  background: rgba(0,0,0,.26);
  text-align: left;
}

#mischievia-game .mg-hud-item span,
#mischievia-game .mg-card-top span {
  display: block;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}

#mischievia-game .mg-hud-item strong {
  font-family: "Teko", Impact, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--cream);
  line-height: 1;
}

/* =====================================================================
   MISCHIEF METER
   ===================================================================== */

#mischievia-game .mg-meter-block {
  width: min(900px, 100%);
  margin-bottom: 12px;
}

#mischievia-game .mg-meter-label {
  display: flex;
  justify-content: space-between;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: var(--cream-soft);
  margin-bottom: 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#mischievia-game .mg-meter {
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: rgba(0,0,0,.4);
}

#mischievia-game .mg-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold), var(--red));
  box-shadow: 0 0 16px rgba(255,106,0,.4);
  transition: width .55s cubic-bezier(.34,1.56,.64,1);
}

/* =====================================================================
   POWERUPS
   ===================================================================== */

#mischievia-game .mg-powerups {
  width: min(900px, 100%);
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}

#mischievia-game .mg-powerup {
  border-radius: 999px;
  padding: 7px 11px;
  font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: .04em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

#mischievia-game .mg-power-label { display: inline; }

#mischievia-game .mg-power-count {
  background: rgba(0,0,0,.4);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  color: var(--gold);
}

#mischievia-game .mg-powerup.used,
#mischievia-game .mg-option.removed {
  opacity: .25;
  pointer-events: none;
  filter: grayscale(1);
}

#mischievia-game .mg-powerup.activating {
  animation: mgPowerActivate .4s ease-out both;
}

#mischievia-game .mg-double-active {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: var(--orange);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: -4px 0 8px;
  animation: mgPulseText 1.2s ease-in-out infinite;
  border: 1px solid rgba(255,106,0,.4);
  border-radius: 999px;
  padding: 6px 18px;
  background: rgba(255,106,0,.08);
}

/* =====================================================================
   GAME CARD
   ===================================================================== */

#mischievia-game .mg-card {
  width: min(900px, 100%);
  border-radius: 28px;
  padding: clamp(18px, 3.5vw, 38px);
  text-align: left;
  position: relative;
  overflow: hidden;
  animation: mgCardIn .38s ease-out both;
}

#mischievia-game .mg-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

#mischievia-game .mg-badge {
  font-family: "Barlow", Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(62,228,255,.1);
  border: 1px solid rgba(62,228,255,.3);
  border-radius: 999px;
  padding: 4px 12px;
}

#mischievia-game .mg-badge-hot {
  color: var(--orange);
  background: rgba(255,106,0,.1);
  border-color: rgba(255,106,0,.35);
}

#mischievia-game .mg-progress {
  font-family: "Barlow", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: var(--cream-soft);
  letter-spacing: .06em;
}

#mischievia-game .mg-card h2 {
  margin-bottom: 16px;
  font-size: clamp(24px, 4vw, 46px);
}

#mischievia-game .mg-card p {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 1.55;
  margin: 0 0 22px;
  color: rgba(255, 241, 207, .92);
}

/* =====================================================================
   ANSWER OPTIONS
   ===================================================================== */

#mischievia-game .mg-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#mischievia-game .mg-option {
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.34);
  color: var(--cream);
  text-align: left;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}

#mischievia-game .mg-option:hover {
  transform: translateY(-3px) rotate(-.4deg);
  border-color: rgba(255, 200, 87, .55);
  background: rgba(255,255,255,.09);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}

#mischievia-game .mg-option:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

#mischievia-game .mg-letter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  color: #12050a;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}

#mischievia-game .mg-option-text {
  font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.3;
}

#mischievia-game .mg-option.angel {
  border-color: rgba(62,228,255,.85);
  box-shadow: 0 0 20px rgba(62,228,255,.2), inset 0 0 20px rgba(62,228,255,.05);
}

#mischievia-game .mg-option.demon {
  border-color: rgba(255,47,95,.9);
  box-shadow: 0 0 20px rgba(255,47,95,.24), inset 0 0 20px rgba(255,47,95,.05);
}

#mischievia-game .mg-option.selected {
  animation: mgSelected .42s ease both;
  border-color: var(--gold);
}

/* =====================================================================
   REVEAL SCREEN
   ===================================================================== */

#mischievia-game .mg-reveal-card {
  position: relative;
  width: min(840px, 100%);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 46px);
  text-align: center;
}

#mischievia-game .mg-stamp {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  font-family: "Teko", Impact, system-ui, sans-serif;
  font-weight: 700;
  color: var(--red);
  border: 4px solid var(--red);
  padding: 4px 18px 0;
  transform: rotate(-8deg);
  font-size: clamp(26px, 5.5vw, 58px);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255,47,95,.5);
  box-shadow: 0 0 20px rgba(255,47,95,.18);
  animation: mgStamp .44s cubic-bezier(.3,1.6,.4,1) both;
}

#mischievia-game .mg-picked-answer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  padding: 16px 18px;
  margin: 10px 0 16px;
}

#mischievia-game .mg-picked-letter {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #12050a;
  font-size: 20px;
  font-weight: 900;
  flex-shrink: 0;
}

#mischievia-game .mg-picked-text {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.4;
  color: var(--cream);
  padding-top: 8px;
}

#mischievia-game .mg-score-burst {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  min-height: 32px;
}

#mischievia-game .mg-score-chip {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  border-radius: 999px;
  padding: 4px 14px;
  border: 1px solid;
  animation: mgChipIn .3s ease-out both;
}

#mischievia-game .mg-score-chip.mischief {
  color: var(--red);
  border-color: rgba(255,47,95,.4);
  background: rgba(255,47,95,.1);
}

#mischievia-game .mg-score-chip.growth {
  color: var(--green);
  border-color: rgba(79,255,176,.4);
  background: rgba(79,255,176,.1);
}

#mischievia-game .mg-score-chip.xp {
  color: var(--gold);
  border-color: rgba(255,200,87,.4);
  background: rgba(255,200,87,.1);
}

#mischievia-game .mg-breakdown {
  text-align: left;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mischievia-game .mg-breakdown-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}

#mischievia-game .mg-breakdown-icon {
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

#mischievia-game .mg-breakdown strong {
  font-family: "Barlow", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

#mischievia-game .mg-breakdown p {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.5;
  margin: 3px 0 0;
  color: var(--cream-soft);
}

#mischievia-game .mg-verdict-row strong { color: var(--gold); }
#mischievia-game .mg-verdict {
  color: var(--gold) !important;
  font-family: "Teko", Impact, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 2.5vw, 24px) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 0 16px rgba(255,200,87,.4);
}

/* =====================================================================
   HOT SEAT SCREENS
   ===================================================================== */

#mischievia-game .mg-hotseat-panel {
  width: min(820px, 100%);
}

#mischievia-game .mg-hotseat-header {
  margin-bottom: 18px;
}

#mischievia-game .mg-card-preview {
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 18px;
  width: 100%;
  text-align: left;
}

#mischievia-game .mg-card-preview p {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.5;
  color: var(--cream-soft);
  margin: 6px 0 0;
}

#mischievia-game .mg-predict-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-bottom: 18px;
}

#mischievia-game .mg-predict-btn {
  background: rgba(0,0,0,.34);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--cream);
  cursor: pointer;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  text-align: left;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

#mischievia-game .mg-predict-btn:hover,
#mischievia-game .mg-predict-btn:focus {
  border-color: rgba(255,200,87,.5);
  background: rgba(255,255,255,.09);
  transform: translateY(-2px);
  outline: none;
}

#mischievia-game .mg-predict-btn.selected-predict {
  border-color: var(--gold);
  background: rgba(255,200,87,.1);
  box-shadow: 0 0 16px rgba(255,200,87,.14);
}

#mischievia-game .mg-predict-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  color: #12050a;
  font-size: 13px;
}

#mischievia-game .mg-predictor-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

#mischievia-game .mg-predictor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
}

#mischievia-game .mg-predictor-name { color: var(--cream-soft); }

#mischievia-game .mg-predictor-pick {
  font-size: 12px;
  color: rgba(255,241,207,.45);
  letter-spacing: .06em;
}

#mischievia-game .mg-predictor-pick.voted {
  color: var(--gold);
  font-size: 13px;
}

/* HOT SEAT REVEAL */
#mischievia-game .mg-hotseat-reveal { text-align: center; }

#mischievia-game .mg-predict-results {
  width: 100%;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mischievia-game .mg-predict-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  animation: mgScreenIn .3s ease-out both;
}

#mischievia-game .mg-predict-result-row.correct {
  border-color: rgba(79,255,176,.5);
  background: rgba(79,255,176,.07);
  color: var(--green);
}

#mischievia-game .mg-predict-result-row.wrong {
  border-color: rgba(255,47,95,.4);
  background: rgba(255,47,95,.06);
  color: rgba(255,241,207,.65);
}

/* =====================================================================
   PASS DEVICE SCREEN
   ===================================================================== */

#mischievia-game .mg-pass-panel {
  gap: 14px;
}

#mischievia-game .mg-pass-icon {
  font-size: 56px;
  animation: mgFloatSoft 2.5s ease-in-out infinite;
}

#mischievia-game .mg-pass-cover {
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 20px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,241,207,.5);
  width: min(400px, 100%);
}

/* =====================================================================
   ROUND CHECKPOINT
   ===================================================================== */

#mischievia-game .mg-report-mini {
  width: min(400px, 100%);
  margin: 14px auto 22px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 15px;
  line-height: 2;
  color: var(--cream-soft);
}

/* =====================================================================
   FINAL REPORT
   ===================================================================== */

#mischievia-game .mg-report {
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  gap: 0;
}

#mischievia-game .mg-report-score {
  width: 164px;
  height: 164px;
  margin: 16px auto;
  border: 2px solid rgba(255,200,87,.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle, rgba(255,200,87,.16), transparent 56%),
    rgba(0,0,0,.28);
  box-shadow: 0 0 44px rgba(255,106,0,.18);
}

#mischievia-game .mg-report-score span {
  font-family: "Teko", Impact, system-ui, sans-serif;
  font-weight: 700;
  font-size: 58px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 0 30px rgba(255,180,0,.5);
}

#mischievia-game .mg-report-score p {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--cream-soft);
}

#mischievia-game .mg-report-lines {
  width: min(540px, 100%);
  margin: 12px auto;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.6;
  text-align: left;
  color: var(--cream-soft);
}

#mischievia-game .mg-report-lines strong {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-top: 12px;
}

#mischievia-game .mg-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0;
  width: 100%;
}

#mischievia-game .mg-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px;
  text-align: left;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
}

#mischievia-game .mg-stat > span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 13px;
}

#mischievia-game .mg-stat-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.4);
  overflow: hidden;
}

#mischievia-game .mg-stat-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold), var(--red));
  transition: width .7s cubic-bezier(.34,1.56,.64,1);
}

/* PARTY REPORT */
#mischievia-game .mg-party-awards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

#mischievia-game .mg-award-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 18px;
  text-align: left;
  animation: mgScreenIn .3s ease-out both;
}

#mischievia-game .mg-award-icon {
  font-size: 28px;
  flex-shrink: 0;
}

#mischievia-game .mg-award-label {
  font-family: "Barlow", Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}

#mischievia-game .mg-award-name {
  font-size: clamp(18px, 3vw, 28px);
  color: var(--gold);
  line-height: 1;
}

#mischievia-game .mg-award-sub {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--cream-soft);
  margin-top: 2px;
}

#mischievia-game .mg-party-scoreboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

#mischievia-game .mg-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  animation: mgScreenIn .3s ease-out both;
}

#mischievia-game .mg-score-row:first-child {
  border-color: rgba(255,200,87,.45);
  background: rgba(255,200,87,.08);
}

#mischievia-game .mg-score-row-rank {
  font-size: 11px;
  color: var(--gold);
  margin-right: 8px;
}

#mischievia-game .mg-score-row-name { flex: 1; color: var(--cream); }
#mischievia-game .mg-score-row-mischief { color: var(--red); font-size: 13px; }
#mischievia-game .mg-score-row-xp { color: var(--gold); font-size: 12px; margin-left: 10px; }

/* =====================================================================
   LEVEL UP OVERLAY
   ===================================================================== */

#mischievia-game .mg-levelup-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
}

#mischievia-game .mg-levelup-overlay.active {
  display: flex;
  animation: mgFadeIn .2s ease-out both;
}

#mischievia-game .mg-levelup-card {
  text-align: center;
  position: relative;
  padding: 40px;
  animation: mgBounceIn .5s cubic-bezier(.3,1.6,.4,1) both;
}

#mischievia-game .mg-levelup-burst {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,87,.3) 0%, transparent 65%);
  animation: mgPulse 1.5s ease-in-out infinite;
}

#mischievia-game .mg-levelup-card h2 {
  font-size: clamp(54px, 10vw, 100px);
  color: var(--gold);
  text-shadow: 0 0 44px rgba(255,200,87,.6);
  margin-bottom: 10px;
}

#mischievia-game .mg-levelup-card p {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  color: var(--cream-soft);
  font-size: 18px;
}

/* =====================================================================
   TOAST NOTIFICATION
   ===================================================================== */

#mischievia-game .mg-toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(10,6,18,.94);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  padding: 12px 24px;
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--cream);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  z-index: 60;
  backdrop-filter: blur(12px);
}

#mischievia-game .mg-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* =====================================================================
   ACTIONS ROW
   ===================================================================== */

#mischievia-game .mg-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* =====================================================================
   KEYFRAMES
   ===================================================================== */

@keyframes mgPulse {
  from { transform: scale(.94); opacity: .5; }
  to { transform: scale(1.12); opacity: .82; }
}

@keyframes mgPulseText {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

@keyframes mgDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-240px); }
}

@keyframes mgFloatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes mgScreenIn {
  from { opacity: 0; transform: translateY(14px) scale(.982); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mgCardIn {
  from { opacity: 0; transform: translateY(28px) rotateX(8deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes mgSelected {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); box-shadow: 0 0 40px rgba(255,200,87,.26); }
  100% { transform: scale(1); }
}

@keyframes mgStamp {
  from { opacity: 0; transform: scale(2.2) rotate(-22deg); }
  to { opacity: 1; transform: scale(1) rotate(-8deg); }
}

@keyframes mgPowerActivate {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); box-shadow: 0 0 30px rgba(255,200,87,.3); }
  100% { transform: scale(1); }
}

@keyframes mgEmberRise {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: .9; }
  100% { transform: translateY(-120px) translateX(calc((var(--drift, 0) - 0.5) * 60px)) scale(.2); opacity: 0; }
}

@keyframes mgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mgBounceIn {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mgChipIn {
  from { opacity: 0; transform: scale(.7) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  #mischievia-game .mg-orb,
  #mischievia-game .mg-particles,
  #mischievia-game .mg-halo,
  #mischievia-game .mg-ember {
    animation: none !important;
  }

  #mischievia-game .mg-screen.active,
  #mischievia-game .mg-card,
  #mischievia-game .mg-stamp,
  #mischievia-game .mg-levelup-card {
    animation-duration: 0.01s !important;
  }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 720px) {
  body { padding: 0; }

  #mischievia-game {
    border-radius: 0;
    min-height: 100dvh;
    width: 100%;
  }

  #mischievia-game .mg-screen {
    min-height: 100dvh;
    padding: 70px 16px 28px;
  }

  #mischievia-game .mg-options,
  #mischievia-game .mg-stat-grid,
  #mischievia-game .mg-predict-options {
    grid-template-columns: 1fr;
  }

  #mischievia-game .mg-mode-grid {
    gap: 10px;
  }

  /* HUD: keep 3-column but compact */
  #mischievia-game .mg-hud {
    grid-template-columns: 1fr 1fr 2fr;
    margin-top: 10px;
    gap: 6px;
  }

  #mischievia-game .mg-hud-item {
    padding: 6px 10px;
    border-radius: 10px;
  }

  #mischievia-game .mg-hud-item strong {
    font-size: clamp(14px, 4vw, 20px);
  }

  #mischievia-game .mg-option {
    min-height: auto;
  }

  #mischievia-game .mg-logo-card {
    transform: none;
  }

  /* Lifeline bar: 3-across grid so all fit with labels */
  #mischievia-game .mg-powerups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  #mischievia-game .mg-powerup {
    min-height: 38px;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }

  /* Show labels on mobile — small but readable */
  #mischievia-game .mg-power-label {
    display: block;
    font-size: 9px;
    letter-spacing: .03em;
    opacity: .85;
  }

  #mischievia-game .mg-report {
    max-height: none;
  }

  #mischievia-game .mg-stamp {
    font-size: clamp(20px, 6vw, 34px);
  }

  #mischievia-game .mg-reveal-card {
    padding: 18px 14px;
  }
}

@media (max-width: 420px) {
  #mischievia-game .mg-mode-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =====================================================================
   SCREEN SHAKE
   ===================================================================== */

@keyframes mgShakeSm {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px,-2px); }
  60% { transform: translate(-2px, 3px); }
  80% { transform: translate(2px,-1px); }
}

@keyframes mgShakeMd {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-6px, 4px) rotate(-.4deg); }
  30% { transform: translate(6px,-4px) rotate(.4deg); }
  50% { transform: translate(-4px, 6px) rotate(-.3deg); }
  70% { transform: translate(4px,-3px) rotate(.3deg); }
  85% { transform: translate(-3px, 5px); }
}

@keyframes mgShakeLg {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-10px, 6px) rotate(-.6deg); }
  25% { transform: translate(10px,-6px) rotate(.6deg); }
  40% { transform: translate(-7px, 10px) rotate(-.5deg); }
  55% { transform: translate(7px,-5px) rotate(.5deg); }
  70% { transform: translate(-5px, 8px) rotate(-.3deg); }
  85% { transform: translate(5px,-4px) rotate(.3deg); }
}

#mischievia-game.mg-shake-sm { animation: mgShakeSm .32s ease both; }
#mischievia-game.mg-shake-md { animation: mgShakeMd .42s ease both; }
#mischievia-game.mg-shake-lg { animation: mgShakeLg .52s ease both; }

/* =====================================================================
   CARD TILT
   ===================================================================== */

#mischievia-game .mg-card {
  transition: transform .12s ease-out, box-shadow .12s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

#mischievia-game .mg-card.tilting {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.018);
  box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 28px rgba(255,200,87,.18);
}

/* =====================================================================
   SPRING BUTTON BOUNCE
   ===================================================================== */

#mischievia-game .mg-btn,
#mischievia-game .mg-mode-btn,
#mischievia-game .mg-option {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .18s ease, box-shadow .18s ease, opacity .18s ease;
}

#mischievia-game .mg-btn:hover,
#mischievia-game .mg-mode-btn:hover {
  transform: scale(1.055);
}

#mischievia-game .mg-btn:active,
#mischievia-game .mg-mode-btn:active {
  transform: scale(.94);
  transition: transform .08s ease;
}

#mischievia-game .mg-option:hover:not([disabled]):not(.removed) {
  transform: scale(1.03) translateX(3px);
}

#mischievia-game .mg-option:active:not([disabled]) {
  transform: scale(.97);
  transition: transform .06s ease;
}

/* =====================================================================
   FX LAYER
   ===================================================================== */

#mischievia-game .mg-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
  border-radius: inherit;
}

/* =====================================================================
   PARTICLE BURST
   ===================================================================== */

@keyframes mgParticle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

#mischievia-game .mg-particle {
  position: absolute;
  border-radius: 50%;
  animation: mgParticle .7s ease-out both;
  pointer-events: none;
}

/* =====================================================================
   HOLY WATER
   ===================================================================== */

@keyframes mgSplash {
  0%   { transform: scale(0); opacity: .9; }
  60%  { transform: scale(1.1); opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes mgDroplet {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

#mischievia-game .mg-holy-splash {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62,228,255,.9) 0%, rgba(62,228,255,0) 70%);
  animation: mgSplash .55s ease-out both;
  pointer-events: none;
}

#mischievia-game .mg-droplet {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(62,228,255,.9);
  box-shadow: 0 0 6px rgba(62,228,255,.7);
  animation: mgDroplet .58s ease-out both;
  pointer-events: none;
}

/* =====================================================================
   GUARDIAN ANGEL MASCOT
   ===================================================================== */

@keyframes mgAngelFly {
  0%   { transform: translate(-160px,-80px) rotate(-8deg) scale(.5); opacity: 0; }
  25%  { opacity: 1; }
  60%  { transform: translate(0,0) rotate(4deg) scale(1.08); }
  80%  { transform: translate(0,-10px) rotate(-2deg) scale(1); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes mgAngelFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}

#mischievia-game .mg-mascot-angel {
  position: absolute;
  font-size: 54px;
  animation: mgAngelFly .8s cubic-bezier(.22,1,.36,1) both;
  filter: drop-shadow(0 0 16px rgba(62,228,255,.85)) drop-shadow(0 0 6px rgba(255,255,255,.6));
  pointer-events: none;
  z-index: 9010;
  line-height: 1;
  text-shadow: none;
}

#mischievia-game .mg-mascot-angel.mg-floating {
  animation: mgAngelFloat 2s ease-in-out infinite;
}

/* =====================================================================
   DEMON MASCOT
   ===================================================================== */

@keyframes mgDemonDrop {
  0%   { transform: translateY(-130px) rotate(12deg) scale(.4); opacity: 0; }
  40%  { opacity: 1; transform: translateY(18px) rotate(-4deg) scale(1.1); }
  65%  { transform: translateY(-6px) rotate(2deg) scale(.97); }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes mgSmokePuff {
  0%   { transform: scale(0) translate(0,0); opacity: .7; }
  100% { transform: scale(2.8) translate(var(--sx), var(--sy)); opacity: 0; }
}

#mischievia-game .mg-mascot-demon {
  position: absolute;
  font-size: 54px;
  animation: mgDemonDrop .68s cubic-bezier(.22,1,.36,1) both;
  filter: drop-shadow(0 0 16px rgba(255,47,95,.85)) drop-shadow(0 0 6px rgba(255,106,0,.5));
  pointer-events: none;
  z-index: 9010;
  line-height: 1;
}

#mischievia-game .mg-smoke {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,80,200,.6), transparent 70%);
  animation: mgSmokePuff .72s ease-out both;
  pointer-events: none;
}

/* =====================================================================
   DOUBLE TROUBLE FLASH
   ===================================================================== */

@keyframes mgDoubleFlash {
  0%   { opacity: 0; }
  15%  { opacity: .85; }
  35%  { opacity: .2; }
  55%  { opacity: .7; }
  75%  { opacity: .1; }
  100% { opacity: 0; }
}

#mischievia-game .mg-double-flash {
  position: absolute;
  inset: -3px;
  border: 3px solid #ffe066;
  border-radius: inherit;
  box-shadow:
    0 0 20px 8px rgba(255,224,102,.6),
    inset 0 0 16px rgba(255,224,102,.3);
  animation: mgDoubleFlash .65s ease-out both;
  pointer-events: none;
  z-index: 10;
}

/* =====================================================================
   REDEMPTION GLOW
   ===================================================================== */

@keyframes mgRedemptionGlow {
  0%   { box-shadow: 0 0 0 0 rgba(79,255,176,.9); }
  40%  { box-shadow: 0 0 22px 10px rgba(79,255,176,.5); }
  100% { box-shadow: 0 0 0 0 rgba(79,255,176,0); }
}

#mischievia-game .mg-mischief-bar.mg-redemption-glow {
  animation: mgRedemptionGlow .9s ease-out both;
  border-radius: 99px;
}

/* =====================================================================
   GRUNGE NEON THEME — Full override, amplified from design spec
   ===================================================================== */

/* Re-skin variables + atmosphere */
#mischievia-game {
  --cream: #fff7dc;
  --cream-soft: rgba(255, 247, 220, 0.88);
  --gold: #ffd35b;
  --orange: #ff6a00;
  --red: #ff244f;
  --blue: #29dfff;
  --green: #4fffb0;
  --panel: rgba(6,4,10,.90);
  --panel-solid: #07040d;
  --line: rgba(255,255,255,.16);
  --line-bright: rgba(255,255,255,.34);

  background:
    radial-gradient(circle at 7%  35%, rgba(41,223,255,.34), transparent 28%),
    radial-gradient(circle at 0%  82%, rgba(9,125,255,.20),  transparent 26%),
    radial-gradient(circle at 96% 30%, rgba(255,36,79,.32),  transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(255,106,0,.24),  transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(100,20,160,.10), transparent 40%),
    linear-gradient(125deg, #020104 0%, #06020a 28%, #130310 55%, #04020a 100%);
  box-shadow:
    0 44px 140px rgba(0,0,0,.88),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 130px rgba(0,0,0,.86);
}

/* Scanline / noise layer drifting over whole game */
#mischievia-game::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .20;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 62%, rgba(255,106,0,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 82%, rgba(41,223,255,.20) 0 1px, transparent 2px),
    linear-gradient(112deg, transparent 47%, rgba(255,255,255,.06) 48%, transparent 49%);
  background-size: auto, 86px 86px, 130px 130px, 162px 162px, 320px 320px;
  mix-blend-mode: screen;
  animation: mgGrungeDrift 30s linear infinite;
}

/* Heaven-left / Hell-right energy split */
#mischievia-game::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(41,223,255,.20), transparent 34%, transparent 62%, rgba(255,72,0,.22)),
    radial-gradient(circle at 13% 50%, rgba(41,223,255,.30), transparent 34%),
    radial-gradient(circle at 87% 52%, rgba(255,72,0,.30), transparent 36%);
}

/* Brighter orbs */
#mischievia-game .mg-orb-blue { background: rgba(41,223,255,.64); filter: blur(94px); }
#mischievia-game .mg-orb-red  { background: rgba(255,74,0,.60);   filter: blur(94px); }

/* Tighter perspective grid */
#mischievia-game .mg-grid {
  opacity: .27;
  background-image:
    linear-gradient(rgba(41,223,255,.058) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,0,.044) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Harder glass on all shared surfaces */
#mischievia-game .mg-logo-card,
#mischievia-game .mg-panel,
#mischievia-game .mg-card,
#mischievia-game .mg-reveal-card {
  background: linear-gradient(180deg, rgba(22,12,34,.95), rgba(3,2,8,.98));
  border: 1px solid rgba(255,255,255,.21);
  box-shadow:
    0 28px 90px rgba(0,0,0,.74),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 52px rgba(255,255,255,.03);
}

/* Scanline texture + corner lights on card surfaces via ::after */
#mischievia-game .mg-panel,
#mischievia-game .mg-card,
#mischievia-game .mg-reveal-card {
  position: relative;
}

#mischievia-game .mg-panel::after,
#mischievia-game .mg-card::after,
#mischievia-game .mg-reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(41,223,255,.18), transparent 22%, transparent 72%, rgba(255,106,0,.20)),
    repeating-linear-gradient(96deg, rgba(255,255,255,.026) 0 1px, transparent 1px 14px);
  opacity: .58;
  mix-blend-mode: screen;
  z-index: 1;
}

/* =====================================================================
   START SCREEN — Logo as game hero
   ===================================================================== */

#mischievia-game .mg-logo-wrap {
  isolation: isolate;
  margin-bottom: 30px;
  position: relative;
}

/* Atmospheric frame behind the logo */
#mischievia-game .mg-logo-wrap::before {
  content: "";
  position: absolute;
  width: min(1000px, 98vw);
  height: 360px;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 30px;
  background:
    radial-gradient(circle at 5%  50%, rgba(41,223,255,.60), transparent 34%),
    radial-gradient(circle at 95% 50%, rgba(255,74,0,.60),   transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255,106,0,.12),  transparent 44%),
    linear-gradient(180deg, rgba(20,8,34,.92), rgba(0,0,0,.94));
  border: 1px solid rgba(255,211,91,.32);
  box-shadow:
    0 0 70px rgba(41,223,255,.22),
    0 0 80px rgba(255,74,0,.20),
    inset 0 0 70px rgba(0,0,0,.82);
  clip-path: polygon(2% 0, 98% 0, 100% 16%, 99% 100%, 3% 100%, 0 84%);
}

/* The actual logo image — cinematic */
#mischievia-game .mg-logo-img {
  width: min(820px, 97vw);
  filter:
    drop-shadow(0 0 28px rgba(255,211,91,.55))
    drop-shadow(0 14px 0  rgba(80,14,0,.84))
    drop-shadow(0 32px 40px rgba(0,0,0,.95));
  animation: mgLogoEntrance 1s cubic-bezier(.18,1.48,.22,1) both,
             mgLogoPulse 5.2s ease-in-out infinite 1s;
}

/* CSS fallback logo (when logo.png not found) — matches real logo colors */
#mischievia-game .mg-logo-fallback {
  border-color: rgba(255,211,91,.38);
  box-shadow:
    0 0 52px rgba(255,106,0,.26),
    0 0 38px rgba(41,223,255,.18),
    0 30px 80px rgba(0,0,0,.78);
}

#mischievia-game .mg-logo-fallback h1 {
  background: linear-gradient(175deg, #fff07a 0%, #ffa500 35%, #ff6a00 72%, #cc1800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 5px 0 rgba(100,20,0,.95))
    drop-shadow(0 0 28px rgba(255,200,60,.55));
}

/* =====================================================================
   MODE GRID — Arcade tiles
   ===================================================================== */

#mischievia-game .mg-mode-grid {
  width: min(700px, 100%);
  gap: 16px;
}

#mischievia-game .mg-mode-btn {
  min-height: 148px;
  background: linear-gradient(160deg, rgba(18,8,28,.96), rgba(2,1,5,.99));
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 20px;
  box-shadow: 0 20px 44px rgba(0,0,0,.60), inset 0 0 30px rgba(255,255,255,.024);
  isolation: isolate;
}

#mischievia-game .mg-mode-btn:hover,
#mischievia-game .mg-mode-btn:focus {
  transform: translateY(-9px) scale(1.024);
  box-shadow: 0 30px 64px rgba(0,0,0,.75), 0 0 42px rgba(255,211,91,.22);
}

#mischievia-game .mg-mode-btn[data-mode="solo"] {
  border-color: rgba(41,223,255,.58);
  box-shadow: 0 20px 44px rgba(0,0,0,.60), 0 0 32px rgba(41,223,255,.18),
              inset 0 0 36px rgba(41,223,255,.048);
}
#mischievia-game .mg-mode-btn[data-mode="solo"]::before {
  background: radial-gradient(circle at 50% 26%, rgba(41,223,255,.30), transparent 52%);
  opacity: .75;
}

#mischievia-game .mg-mode-btn[data-mode="hotseat"] {
  border-color: rgba(255,106,0,.62);
  box-shadow: 0 20px 44px rgba(0,0,0,.60), 0 0 32px rgba(255,106,0,.18),
              inset 0 0 36px rgba(255,106,0,.052);
}
#mischievia-game .mg-mode-btn[data-mode="hotseat"]::before {
  background: radial-gradient(circle at 50% 26%, rgba(255,106,0,.32), transparent 52%),
              radial-gradient(circle at 84% 54%, rgba(255,36,79,.24), transparent 32%);
  opacity: .75;
}

#mischievia-game .mg-mode-btn[data-mode="party"] {
  border-color: rgba(139,61,255,.62);
  box-shadow: 0 20px 44px rgba(0,0,0,.60), 0 0 32px rgba(139,61,255,.18),
              inset 0 0 36px rgba(139,61,255,.052);
}
#mischievia-game .mg-mode-btn[data-mode="party"]::before {
  background: radial-gradient(circle at 50% 26%, rgba(139,61,255,.32), transparent 52%);
  opacity: .75;
}

#mischievia-game .mg-mode-icon {
  font-size: clamp(36px, 5.5vw, 56px);
  filter: drop-shadow(0 0 20px rgba(255,211,91,.38));
}

#mischievia-game .mg-mode-btn strong {
  color: var(--gold);
  font-size: clamp(22px, 3vw, 31px);
  text-shadow: 0 2px 0 rgba(0,0,0,.92), 0 0 22px rgba(255,211,91,.40);
}

#mischievia-game .mg-mode-btn small {
  color: rgba(255,247,220,.80);
}

/* =====================================================================
   HUD
   ===================================================================== */

#mischievia-game .mg-hud-item {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.42));
  border-color: rgba(255,255,255,.21);
  box-shadow: 0 16px 36px rgba(0,0,0,.38), inset 0 0 24px rgba(255,255,255,.024);
}

#mischievia-game .mg-hud-item span,
#mischievia-game .mg-card-top span {
  color: #c4f2ff;
  text-shadow: 0 0 12px rgba(41,223,255,.44);
}

#mischievia-game .mg-meter {
  height: 20px;
  border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 0 20px rgba(0,0,0,.84);
}

#mischievia-game .mg-meter-fill {
  background: linear-gradient(90deg, #29dfff 0%, #ffd35b 46%, #ff244f 100%);
  box-shadow: 0 0 24px rgba(255,106,0,.58), 0 0 38px rgba(255,36,79,.26);
}

/* =====================================================================
   GAME CARD — Polygon cut, max atmosphere
   ===================================================================== */

#mischievia-game .mg-card {
  border-radius: 24px;
  border-color: rgba(255,255,255,.23);
  box-shadow:
    0 34px 96px rgba(0,0,0,.78),
    0 0 54px rgba(255,106,0,.10),
    inset 0 0 44px rgba(255,255,255,.024);
  clip-path: polygon(0 2%, 98% 0, 100% 9%, 99.5% 100%, 3% 100%, 0 93%);
}

#mischievia-game .mg-card::before {
  background:
    linear-gradient(90deg, rgba(41,223,255,.22), transparent 22%, transparent 72%, rgba(255,106,0,.24)),
    radial-gradient(circle at 0% 0%,   rgba(41,223,255,.15), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(255,106,0,.15), transparent 35%);
}

/* =====================================================================
   ANSWER OPTIONS — Per-letter neon color identity
   ===================================================================== */

#mischievia-game .mg-options { gap: 14px; }

#mischievia-game .mg-option {
  min-height: 106px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.040), rgba(0,0,0,.64));
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 0 24px rgba(255,255,255,.024), 0 12px 28px rgba(0,0,0,.40);
  overflow: hidden;
}

#mischievia-game .mg-option::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .18s ease;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%);
  pointer-events: none;
}
#mischievia-game .mg-option:hover::before { opacity: 1; }

#mischievia-game .mg-option:hover:not([disabled]):not(.removed) {
  transform: translateY(-8px) rotate(-.7deg) scale(1.016);
}

/* A = Red — sinner */
#mischievia-game .mg-option[data-label="A"],
#mischievia-game .mg-predict-btn[data-label="A"] { border-color: rgba(255,36,79,.54); }
#mischievia-game .mg-option[data-label="A"]:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 34px rgba(255,36,79,.30);
}
#mischievia-game .mg-option[data-label="A"] .mg-letter,
#mischievia-game .mg-predict-btn[data-label="A"] .mg-predict-letter {
  background: linear-gradient(135deg, #ff244f, #ff6a00);
  box-shadow: 0 0 22px rgba(255,36,79,.50);
}

/* B = Gold — saint */
#mischievia-game .mg-option[data-label="B"],
#mischievia-game .mg-predict-btn[data-label="B"] { border-color: rgba(255,211,91,.50); }
#mischievia-game .mg-option[data-label="B"]:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 34px rgba(255,211,91,.26);
}
#mischievia-game .mg-option[data-label="B"] .mg-letter,
#mischievia-game .mg-predict-btn[data-label="B"] .mg-predict-letter {
  background: linear-gradient(135deg, #fff07a, #d69526);
  box-shadow: 0 0 22px rgba(255,211,91,.50);
}

/* C = Blue — chaos/divine */
#mischievia-game .mg-option[data-label="C"],
#mischievia-game .mg-predict-btn[data-label="C"] { border-color: rgba(41,223,255,.54); }
#mischievia-game .mg-option[data-label="C"]:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 34px rgba(41,223,255,.28);
}
#mischievia-game .mg-option[data-label="C"] .mg-letter,
#mischievia-game .mg-predict-btn[data-label="C"] .mg-predict-letter {
  background: linear-gradient(135deg, #29dfff, #097dff);
  box-shadow: 0 0 22px rgba(41,223,255,.50);
}

/* D = Purple — mischief */
#mischievia-game .mg-option[data-label="D"],
#mischievia-game .mg-predict-btn[data-label="D"] { border-color: rgba(139,61,255,.54); }
#mischievia-game .mg-option[data-label="D"]:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 34px rgba(139,61,255,.30);
}
#mischievia-game .mg-option[data-label="D"] .mg-letter,
#mischievia-game .mg-predict-btn[data-label="D"] .mg-predict-letter {
  background: linear-gradient(135deg, #de8cff, #8b3dff);
  box-shadow: 0 0 22px rgba(139,61,255,.50);
}

#mischievia-game .mg-letter {
  width: 40px; height: 40px; font-size: 18px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.28);
}

#mischievia-game .mg-option-text {
  font-size: clamp(15px, 1.9vw, 20px);
  color: rgba(255,247,220,.94);
}

/* =====================================================================
   REVEAL SCREEN
   ===================================================================== */

#mischievia-game .mg-reveal-card {
  border-radius: 24px;
  clip-path: polygon(1% 0, 99% 2%, 100% 91%, 97% 100%, 3% 100%, 0 9%);
  box-shadow: 0 38px 100px rgba(0,0,0,.80), 0 0 52px rgba(255,36,79,.10);
}

#mischievia-game .mg-stamp {
  color: #ff7060;
  border-color: #ff5050;
  text-shadow: 0 0 24px rgba(255,36,79,.62), 0 2px 0 rgba(0,0,0,.80);
  box-shadow: 0 0 22px rgba(255,36,79,.28), inset 0 0 22px rgba(255,36,79,.09);
  background: rgba(255,36,79,.06);
  filter: drop-shadow(0 18px 15px rgba(0,0,0,.50));
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

#mischievia-game .mg-primary {
  background: linear-gradient(135deg, #ffe978, #ff9a1f 52%, #d74a00);
  color: #140604;
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 14px 38px rgba(255,106,0,.32),
    0 0 22px rgba(255,211,91,.24),
    inset 0 -4px 0 rgba(0,0,0,.22);
}

#mischievia-game .mg-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.42));
  border-color: rgba(139,61,255,.42);
  box-shadow: 0 0 22px rgba(139,61,255,.16);
}

/* =====================================================================
   INPUTS
   ===================================================================== */

#mischievia-game .mg-input {
  background: rgba(0,0,0,.66);
  border-color: rgba(255,255,255,.26);
  box-shadow: inset 0 0 26px rgba(0,0,0,.70), 0 0 24px rgba(41,223,255,.09);
}

#mischievia-game .mg-input:focus {
  border-color: rgba(41,223,255,.90);
  box-shadow: 0 0 32px rgba(41,223,255,.28), inset 0 0 26px rgba(0,0,0,.70);
}

/* =====================================================================
   POWERUPS
   ===================================================================== */

#mischievia-game .mg-powerup {
  min-height: 42px; padding: 8px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.44));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.44), inset 0 0 18px rgba(255,255,255,.034);
}

#mischievia-game .mg-powerup[data-power="holy"]  {
  border-color: rgba(41,223,255,.50); box-shadow: 0 10px 26px rgba(0,0,0,.44), 0 0 18px rgba(41,223,255,.14);
}
#mischievia-game .mg-powerup[data-power="angel"] {
  border-color: rgba(194,243,255,.50); box-shadow: 0 10px 26px rgba(0,0,0,.44), 0 0 18px rgba(194,243,255,.14);
}
#mischievia-game .mg-powerup[data-power="demon"] {
  border-color: rgba(255,36,79,.50);  box-shadow: 0 10px 26px rgba(0,0,0,.44), 0 0 18px rgba(255,36,79,.14);
}
#mischievia-game .mg-powerup[data-power="redemption"],
#mischievia-game .mg-powerup[data-power="confession"] {
  border-color: rgba(255,211,91,.52); box-shadow: 0 10px 26px rgba(0,0,0,.44), 0 0 18px rgba(255,211,91,.14);
}

/* =====================================================================
   FINAL REPORT — Boss battle
   ===================================================================== */

#mischievia-game .mg-report-score {
  width: 206px; height: 206px;
  background:
    radial-gradient(circle, rgba(255,211,91,.24), transparent 56%),
    conic-gradient(from 220deg, rgba(41,223,255,.46), rgba(255,211,91,.64), rgba(255,36,79,.50), rgba(41,223,255,.46));
  border-color: rgba(255,211,91,.75);
  box-shadow:
    0 0 52px rgba(255,211,91,.26),
    0 0 76px rgba(255,106,0,.20),
    inset 0 0 0 10px rgba(0,0,0,.68);
}

#mischievia-game .mg-report-score span {
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(80,20,0,.85), 0 0 36px rgba(255,211,91,.64);
}

#mischievia-game .mg-stat {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.46));
  border-color: rgba(255,255,255,.19);
}

/* Hot seat predict buttons */
#mischievia-game .mg-predict-btn {
  min-height: 78px;
  background: linear-gradient(180deg, rgba(255,255,255,.040), rgba(0,0,0,.66));
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 0 20px rgba(255,255,255,.024), 0 10px 24px rgba(0,0,0,.38);
}

#mischievia-game .mg-predict-btn:hover {
  transform: translateY(-5px) scale(1.014);
  border-color: rgba(255,211,91,.55);
}

/* =====================================================================
   GRUNGE + LOGO KEYFRAMES
   ===================================================================== */

@keyframes mgGrungeDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-95px,-140px,0); }
}

@keyframes mgLogoEntrance {
  0%   { opacity: 0; transform: translateY(-44px) scale(.82) rotate(-2.8deg); filter: blur(14px); }
  50%  { opacity: 1; transform: translateY(12px) scale(1.052) rotate(.9deg);  filter: blur(0); }
  76%  { transform: translateY(-4px) scale(1.012) rotate(-.3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes mgLogoPulse {
  0%,100% { transform: translateY(0) scale(1);      filter: drop-shadow(0 0 28px rgba(255,211,91,.55)) drop-shadow(0 14px 0 rgba(80,14,0,.84)) drop-shadow(0 32px 40px rgba(0,0,0,.95)); }
  50%     { transform: translateY(-9px) scale(1.014); filter: drop-shadow(0 0 44px rgba(255,211,91,.70)) drop-shadow(0 14px 0 rgba(80,14,0,.84)) drop-shadow(0 38px 50px rgba(0,0,0,.95)); }
}

@keyframes mgGrungeSelected {
  0%   { transform: scale(1);    filter: brightness(1); }
  30%  { transform: scale(1.04) rotate(-.48deg); filter: brightness(1.30); }
  62%  { transform: scale(.99)  rotate(.24deg);  filter: brightness(1.12); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* =====================================================================
   MOBILE — Remove clip-paths, keep atmosphere
   ===================================================================== */

@media (max-width: 720px) {
  #mischievia-game .mg-card,
  #mischievia-game .mg-reveal-card,
  #mischievia-game .mg-panel { clip-path: none; border-radius: 26px; }

  #mischievia-game .mg-logo-wrap::before { height: 200px; width: 99vw; }

  /* 2×2 grid — all 4 buttons visible without scrolling */
  #mischievia-game .mg-mode-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  #mischievia-game .mg-mode-btn  {
    min-height: 88px;
    padding: 14px 10px;
  }
  #mischievia-game .mg-mode-btn .mg-mode-icon { font-size: 26px; }
  #mischievia-game .mg-mode-btn strong        { font-size: clamp(13px, 3.6vw, 17px); }
  #mischievia-game .mg-mode-btn small         { font-size: 10px; }
  #mischievia-game .mg-logo-img  { width: min(420px, 88vw); }

  /* Compact tagline + logo gap */
  #mischievia-game .mg-logo-wrap { margin-bottom: 10px; }
  #mischievia-game .mg-tagline   { font-size: 13px; margin-bottom: 14px; }
}

/* =====================================================================
   FILTER CHIPS (age + category on home screen)
   ===================================================================== */

#mischievia-game .mg-filter-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  width: min(700px, 100%);
}

#mischievia-game .mg-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

#mischievia-game .mg-chip {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,247,220,.7);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 5px 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

#mischievia-game .mg-chip:hover {
  background: rgba(255,211,91,.14);
  border-color: rgba(255,211,91,.4);
  color: var(--gold);
}

#mischievia-game .mg-chip.mg-chip-active {
  background: rgba(255,211,91,.22);
  border-color: rgba(255,211,91,.7);
  color: var(--gold);
}

/* Fullscreen button */
#mischievia-game .mg-fs-btn {
  right: 126px;
  font-size: 18px;
}

/* =====================================================================
   DESKTOP FULLSCREEN — fill viewport, no gap at bottom
   ===================================================================== */

@media (min-width: 721px) {
  body {
    padding: 0;
    height: 100vh;
    overflow: hidden;
  }

  #mischievia-game {
    min-height: 100vh;
    height: 100vh;
    border-radius: 0;
    width: 100%;
    max-width: 100vw;
    overflow-y: auto;
  }

  #mischievia-game .mg-screen {
    min-height: 100vh;
  }
}