/* Game Studio — shared look. Sits on top of the site design system so a
   generated game feels like the rest of MLO rather than a bolted-on tool. */

/* .wrap is width:100% PLUS 20px of side padding, which without border-box makes
   it wider than the viewport and scrolls the whole page sideways. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--night-deep, #0f0a2e);
  color: var(--cream, #f6f1e4);
  font-family: Andika, 'Comic Sans MS', sans-serif;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 18px 20px 28px; flex: 1 1 auto; min-height: 0; }

.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; }
.topbar a { color: var(--gold, #f4c842); text-decoration: none; font-size: 15px; }
.topbar a:hover { text-decoration: underline; }
.topbar .spacer { flex: 1 1 auto; }
.game-title { font-size: clamp(20px, 3vw, 30px); font-weight: 700; }
.game-sub { color: #b9aee0; font-size: clamp(13px, 1.6vw, 17px); }

/* ---- setup ---- */
.setup { text-align: center; padding: 10px 0 30px; }
.setup h2 { font-size: clamp(24px, 4vw, 38px); margin: 10px 0 18px; }
.setup h2 em { color: var(--gold, #f4c842); font-style: normal; }
.count-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.count {
  width: 58px; height: 58px; border-radius: 14px; font-size: 22px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,.07); color: var(--cream, #f6f1e4); border: 2px solid rgba(255,255,255,.16);
}
.count.on { background: var(--gold, #f4c842); color: #2d1a5c; border-color: var(--gold, #f4c842); }

.team-cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.team-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: 12px; width: 190px;
}
.team-hero { font-size: 40px; line-height: 1; }
.team-name {
  width: 100%; box-sizing: border-box; margin: 8px 0; padding: 7px 9px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.28); color: var(--cream, #f6f1e4);
  font: inherit; font-size: 15px; text-align: center; min-width: 0;
}
.hero-row { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.hero {
  width: 34px; height: 34px; border-radius: 9px; font-size: 17px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid transparent; color: inherit;
}
.hero.on { border-color: var(--gold, #f4c842); background: rgba(244,200,66,.22); }
.hero:disabled { opacity: .25; cursor: not-allowed; }

.go, .btn {
  background: var(--gold, #f4c842); color: #2d1a5c; border: 0; border-radius: 999px;
  padding: 15px 34px; font: inherit; font-size: 21px; font-weight: 700; cursor: pointer;
}
.btn.ghost { background: rgba(255,255,255,.1); color: var(--cream, #f6f1e4); }
.go:hover, .btn:hover { filter: brightness(1.08); }

/* ---- scores ---- */
.scores { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.score {
  display: flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 2px solid transparent; font-size: 19px;
}
.score.now { border-color: var(--gold, #f4c842); background: rgba(244,200,66,.16); }
.score.out { opacity: .38; text-decoration: line-through; }
.s-pts { font-weight: 700; color: var(--gold, #f4c842); }

.endgame {
  background: rgba(196,74,106,.24); color: #ffd9e2; border: 1px solid rgba(196,74,106,.6);
  border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 14px; cursor: pointer;
}

.final { text-align: center; }
.final h2 { font-size: clamp(26px, 4vw, 40px); }
.frow {
  display: flex; justify-content: space-between; gap: 20px; max-width: 440px; margin: 8px auto;
  padding: 13px 20px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: 22px;
}
.frow.win { background: rgba(244,200,66,.2); border: 1px solid var(--gold, #f4c842); font-weight: 700; }

/* ---- generic card grid used by several games ---- */
.grid { display: grid; gap: 12px; justify-content: center; }
.card-tile {
  background: linear-gradient(135deg, #5a2d8c, #2d1a5c);
  border-radius: 16px; padding: 16px; cursor: pointer; text-align: center;
  border: 2px solid rgba(255,255,255,.1); transition: transform .12s var(--ease-pop, ease);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.card-tile:hover { transform: translateY(-3px); border-color: var(--gold, #f4c842); }
.card-tile.picked { border-color: var(--gold, #f4c842); background: linear-gradient(135deg,#7a4dbc,#3d2a7c); }
.card-tile.dead { opacity: .35; cursor: default; transform: none; }
/* A tile is narrow and some vocabulary is not — "temperature" has to break
   rather than run off the card. */
.card-word {
  font-size: clamp(20px, 2.6vw, 36px); font-weight: 700;
  max-width: 100%; overflow-wrap: break-word; hyphens: auto; line-height: 1.15;
}
/* Long words step down a size rather than being cut in half. KIT.word() picks
   the class from the longest token in the phrase. */
.card-word.w-lg { font-size: clamp(18px, 2.2vw, 30px); }
.card-word.w-xl { font-size: clamp(16px, 1.85vw, 26px); }
.card-sentence {
  font-size: clamp(16px, 2vw, 25px); color: #ddd4f5;
  max-width: 100%; overflow-wrap: anywhere; line-height: 1.25;
}
.card-sentence em { color: var(--gold, #f4c842); font-style: normal; }

.banner { text-align: center; font-size: clamp(20px, 2.9vw, 32px); margin: 10px 0 16px; }
.banner b { color: var(--gold, #f4c842); }
.hint { text-align: center; color: #b9aee0; font-size: 18px; margin-top: 10px; }

/* ---- outcome stage (shared by every game) ---- */
.modal-back {
  position: fixed; inset: 0; background: rgba(8,4,26,.84);
  display: grid; place-items: center; z-index: 60; padding: 20px;
}
.modal {
  background: linear-gradient(150deg,#3a2470,#1d1140); border: 2px solid var(--gold,#f4c842);
  border-radius: 22px; padding: 26px; max-width: 660px; width: 100%; text-align: center;
}
.modal.tone-great { border-color: #6ee7b7; box-shadow: 0 0 34px rgba(110,231,183,.3); }
.modal.tone-bad   { border-color: #ff8fa8; box-shadow: 0 0 34px rgba(255,143,168,.28); }
.modal.tone-wild  { border-color: #c88bff; box-shadow: 0 0 34px rgba(200,139,255,.3); }
.modal.tone-flat  { border-color: rgba(255,255,255,.3); box-shadow: none; }
.modal .big { font-size: clamp(30px,4.6vw,50px); font-weight: 700; margin: 10px 0; }
.modal .sent { font-size: clamp(20px,2.8vw,30px); color: #ddd4f5; margin-bottom: 6px; }
.modal .sent em { color: var(--gold,#f4c842); font-style: normal; }
.prize-line { font-size: clamp(26px,4vw,42px); font-weight: 700; margin: 6px 0 10px; }
.prize-detail { font-size: clamp(19px,2.6vw,26px); color: #ddd4f5; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.pick-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pick-row button {
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25); color: inherit;
  border-radius: 999px; padding: 9px 15px; font: inherit; cursor: pointer;
}
.pick-row button:hover { border-color: var(--gold,#f4c842); }

.box-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.boxpick {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 168px;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); color: inherit;
  border-radius: 16px; padding: 14px 10px; font: inherit; cursor: pointer;
}
.boxpick:hover { border-color: var(--gold,#f4c842); transform: translateY(-2px); }
.boxpick .bi { font-size: 34px; }
.boxpick .bn { font-weight: 700; font-size: 16px; }
.boxpick .bd { font-size: 12px; color: #b9aee0; }

/* a card carrying a hidden outcome */
.card-tile .outcome {
  margin-top: 6px; font-size: 14px; font-weight: 700; letter-spacing: .03em; color: var(--gold,#f4c842);
}