/* [project]/app/globals.css [app-client] (css) */
:root {
  --ink: #17202a;
  --muted: #667085;
  --paper: #f8fafc;
  --line: #d9e2ec;
  --teal: #0f766e;
  --teal-dark: #115e59;
  --magenta: #be185d;
  --amber: #d97706;
  --blue: #2563eb;
  --green: #16a34a;
  --white: #fff;
  --shadow: 0 18px 50px #12263f1f;
}

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(135deg, #0f766e1f, transparent 34%),
    linear-gradient(315deg, #be185d1a, transparent 32%),
    var(--paper);
  min-height: 100vh;
  color: var(--ink);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

button, input, select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled, input:disabled, select:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.playerShell, .adminShell {
  width: min(1180px, 100vw - 32px);
  margin: 0 auto;
  padding: 28px 0;
}

.topbar, .adminHeader {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  display: flex;
}

.eyebrow {
  color: var(--teal-dark);
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 800;
}

h1, h2, p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: .98;
}

.statusPills {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.statusPills span, .roundMeta span, .panelTitle span {
  border: 1px solid var(--line);
  color: var(--muted);
  background: #ffffffbd;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .85rem;
  font-weight: 700;
}

.joinPanel, .gameGrid, .adminGrid {
  gap: 18px;
  display: grid;
}

.joinPanel {
  grid-template-columns: 1.1fr .9fr;
  align-items: stretch;
}

.joinCopy, .formCard, .playSurface, .scoreboard, .adminPanel, .leaderBand {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #ffffffd6;
  border-radius: 8px;
}

.joinCopy {
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  padding: 34px;
  display: flex;
}

.joinCopy svg {
  color: var(--magenta);
}

.joinCopy h2 {
  margin: 20px 0 10px;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.joinCopy p {
  max-width: 620px;
  color: var(--muted);
  font-size: 1.05rem;
}

.formCard, .handArea {
  gap: 14px;
  display: grid;
}

.formCard {
  align-content: center;
  padding: 24px;
}

.formCard label, .handInputs label, .letterForm label {
  color: var(--muted);
  gap: 8px;
  font-weight: 800;
  display: grid;
}

.formCard label {
  color: var(--teal-dark);
  grid-template-columns: 22px 1fr;
  align-items: center;
}

input, select {
  border: 1px solid var(--line);
  background: var(--white);
  width: 100%;
  color: var(--ink);
  border-radius: 8px;
  outline: none;
  padding: 12px 14px;
}

input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px #0f766e24;
}

.primaryButton, .ghostButton, .dangerButton, .modeSwitch button, .manualControls button {
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 900;
  display: inline-flex;
}

.primaryButton {
  background: var(--teal);
  color: #fff;
  padding: 0 16px;
}

.ghostButton {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
  padding: 0 16px;
}

.dangerButton {
  color: #fff;
  background: #b42318;
  padding: 0 16px;
}

.notice {
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.gameGrid {
  grid-template-columns: minmax(0, 1fr);
}

.playSurface {
  min-height: min(660px, 100vh - 150px);
  padding: 22px;
}

.waiting {
  text-align: center;
  min-height: 510px;
  color: var(--muted);
  align-content: center;
  place-items: center;
  gap: 12px;
  display: grid;
}

.spin {
  animation: 1s linear infinite spin;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.kahootArea {
  gap: 22px;
  display: grid;
}

.roundMeta, .panelTitle, .buttonRow {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.kahootArea h2 {
  align-items: center;
  min-height: 132px;
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 4.25rem);
  line-height: 1.04;
  display: flex;
}

.choiceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.choice {
  color: #fff;
  text-align: left;
  border: 0;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 16px;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 900;
  display: flex;
}

.choice1 {
  background: var(--magenta);
}

.choice2 {
  background: var(--blue);
}

.choice3 {
  background: var(--amber);
}

.choice4 {
  background: var(--green);
}

.choice.selected {
  outline: 4px solid #17202a42;
}

.choice.pending, .choice.correct, .choice.incorrect {
  outline: 4px solid #ffffffdb;
  box-shadow: 0 0 0 5px #17202a38;
}

.choice.correct {
  background: #15803d;
}

.choice.incorrect {
  background: #b42318;
}

.answerReceipt {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  gap: 5px;
  padding: 16px;
  display: grid;
  box-shadow: 0 14px 34px #12263f24;
}

.answerReceipt strong {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.05;
}

.answerReceipt span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.answerReceipt.pending {
  border-color: var(--blue);
}

.answerReceipt.sent {
  border-color: var(--teal);
  background: #f0fdfa;
}

.answerReceipt.correct {
  border-color: var(--green);
  background: #f0fdf4;
}

.answerReceipt.incorrect, .answerReceipt.error {
  background: #fff7f7;
  border-color: #b42318;
}

.handArea {
  align-content: start;
}

.letterBlock {
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  align-content: center;
  place-items: center;
  min-height: 160px;
  display: grid;
}

.letterBlock p {
  color: #b7c2ce;
  text-transform: uppercase;
  margin: 0;
  font-size: .82rem;
  font-weight: 900;
}

.letterBlock strong {
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: .9;
}

.handInputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.handInputs label {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 14px;
}

.handInputs small {
  color: var(--muted);
  font-weight: 700;
}

.scoreboard {
  padding: 16px;
}

.scoreboard h2, .panelTitle h2 {
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 1.1rem;
  display: flex;
}

.scoreRows, .participantTable {
  gap: 10px;
  display: grid;
}

.scoreRow, .participantRow {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  display: grid;
}

.scoreRow {
  grid-template-columns: 34px 1fr auto;
  padding: 10px;
}

.scoreRow.me {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px #0f766e1a;
}

.scoreRow span, .rank {
  background: #eef2f7;
  border-radius: 999px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 900;
  display: grid;
}

.scoreRow small, .participantRow small {
  color: var(--muted);
}

.adminGrid {
  grid-template-columns: 420px minmax(0, 1fr);
}

.adminControlGrid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.adminNav, .adminStatusLine {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.adminNav a {
  border: 1px solid var(--line);
  min-height: 42px;
  color: var(--ink);
  background: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
}

.adminNav a.active {
  background: var(--ink);
  color: #fff;
}

.adminStatusLine {
  margin: -8px 0 18px;
}

.adminStatusLine span {
  border: 1px solid var(--line);
  color: var(--muted);
  background: #ffffffbd;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .85rem;
  font-weight: 700;
}

.controlColumn, .dashboardColumn {
  align-content: start;
  gap: 16px;
  display: grid;
}

.modeSwitch {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  display: grid;
}

.modeSwitch button {
  color: var(--muted);
  background: none;
}

.modeSwitch button.active {
  background: var(--ink);
  color: #fff;
}

.adminPanel {
  padding: 16px;
}

.questionPreview {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  gap: 8px;
  margin-bottom: 14px;
  padding: 14px;
  display: grid;
}

.answeredPanel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  display: grid;
}

.answeredHeader {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.answeredHeader strong {
  font-size: 1rem;
}

.answeredHeader span {
  color: var(--ink);
  background: #eef2f7;
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 900;
}

.answeredList {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.answeredList span {
  color: var(--teal-dark);
  background: #0f766e1f;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .86rem;
  font-weight: 900;
}

.questionPreview small {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 900;
}

.questionPreview strong {
  font-size: 1.18rem;
  line-height: 1.25;
}

.letterForm {
  grid-template-columns: 120px 1fr;
  align-items: end;
  gap: 12px;
  display: grid;
}

.aiLine {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 800;
  display: flex;
}

.leaderBand {
  background: var(--ink);
  color: #fff;
  align-items: center;
  gap: 16px;
  padding: 20px;
  display: flex;
}

.leaderBand p {
  color: #b7c2ce;
  margin-bottom: 4px;
  font-weight: 800;
}

.leaderBand h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.leaderBand strong {
  color: #fbbf24;
}

.participantRow {
  grid-template-columns: 34px minmax(0, 1fr) 76px 176px;
  padding: 10px;
}

.identity {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.identity strong, .identity small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.manualControls {
  grid-template-columns: 38px 1fr 38px;
  gap: 6px;
  display: grid;
}

.manualControls button {
  color: var(--ink);
  background: #eef2f7;
}

.manualControls input {
  text-align: center;
  min-width: 0;
  padding: 8px;
}

.playerManager {
  gap: 14px;
  display: grid;
  position: sticky;
  top: 18px;
}

.selectLabel, .pointsTool label {
  color: var(--muted);
  gap: 8px;
  font-weight: 800;
  display: grid;
}

.selectedPlayer {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  gap: 3px;
  padding: 14px;
  display: grid;
}

.selectedPlayer small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.pointsTool {
  gap: 12px;
  display: grid;
}

.modalOverlay {
  z-index: 100;
  background: #17202a9e;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.modalBox {
  background: #fff;
  border-radius: 12px;
  gap: 18px;
  width: min(560px, 100vw - 32px);
  padding: 28px;
  display: grid;
  box-shadow: 0 32px 80px #12263f3d;
}

.modalHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.modalHeader h2 {
  margin: 0;
  font-size: 1.3rem;
}

.modalClose {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 10px;
}

.modalPrompt {
  color: var(--ink);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
}

.modalChoices {
  gap: 8px;
  display: grid;
}

.modalChoice {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
}

.modalChoiceCorrect {
  border-color: var(--green);
  color: var(--green);
  background: #f0fdf4;
}

.submissionsPanel {
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.categoryLegend {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.legendItem {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
}

.submissionList {
  gap: 7px;
  max-height: 320px;
  display: grid;
  overflow-y: auto;
}

.submissionRow {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: grid;
}

.submissionRow.hasPoints {
  border-color: var(--green);
  background: #f0fdf4;
}

.submissionRow.noPoints {
  background: #fff7f7;
  border-color: #b42318;
}

.subIdentity {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.subIdentity strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.subIdentity small {
  color: var(--muted);
  font-weight: 700;
}

.categoryDots {
  align-items: center;
  gap: 5px;
  display: flex;
}

.dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.dotValid {
  background: var(--green);
}

.dotInvalid {
  background: #b42318;
}

.frozenNotice {
  color: #b42318;
  text-align: center;
  background: #fff7f7;
  border: 1px solid #b42318;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 900;
}

.simRoleGrid {
  gap: 10px;
  display: grid;
}

.simRoleRow {
  gap: 6px;
  display: grid;
}

.simRoleLabel {
  color: var(--ink);
  font-size: .88rem;
  font-weight: 800;
}

.simScriptList {
  gap: 8px;
  max-height: 400px;
  display: grid;
  overflow-y: auto;
}

.simScriptCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.simScriptCard.ready {
  border-color: var(--green);
}

.simScriptCard.error {
  border-color: #b42318;
}

.simScriptCard.generating {
  border-color: var(--amber);
}

.simScriptHeader {
  cursor: pointer;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: .9rem;
  font-weight: 800;
  display: flex;
}

.simScriptHeader:hover {
  background: #f8fafc;
}

.simPlayerName {
  color: var(--muted);
  flex: 1;
  font-weight: 700;
}

.simStatus {
  font-size: .78rem;
  font-weight: 900;
}

.simStatus.ready {
  color: var(--green);
}

.simStatus.error {
  color: #b42318;
}

.simStatus.generating {
  color: var(--amber);
}

.simScriptBody {
  border-top: 1px solid var(--line);
  background: #f8fafc;
  max-height: 340px;
  padding: 12px 14px;
  overflow-y: auto;
}

.simProtagonistCard {
  border: 2px solid var(--teal);
  background: #f0fdfa;
  border-radius: 8px;
  margin-top: 12px;
  padding: 14px;
}

.simProtagonistCard p {
  color: var(--muted);
  text-transform: uppercase;
  margin: 0 0 4px;
  font-size: .82rem;
  font-weight: 800;
}

.simProtagonistCard strong {
  font-size: 1.3rem;
  display: block;
}

.simPlayerView {
  gap: 16px;
  display: grid;
}

.simRoleBadge {
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 16px;
  padding: 20px;
  display: flex;
}

.simRoleEmoji {
  font-size: 3rem;
  line-height: 1;
}

.simRoleBadge p {
  color: #b7c2ce;
  text-transform: uppercase;
  margin: 0 0 4px;
  font-size: .82rem;
  font-weight: 800;
}

.simRoleBadge strong {
  font-size: clamp(1rem, 3vw, 1.5rem);
  line-height: 1.2;
}

.simScript {
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 8px;
  margin: 0;
  padding: 18px;
}

.simProtagonistBadge {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 16px;
  padding: 20px;
  display: flex;
}

.simProtagonistBadge p {
  color: #ffffffbf;
  margin: 0 0 4px;
  font-size: .82rem;
  font-weight: 800;
}

.simProtagonistBadge strong {
  font-size: clamp(1.2rem, 3vw, 2rem);
}

.simProtagonistInstructions {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 8px;
  padding: 18px;
}

.simProtagonistInstructions h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.simProtagonistInstructions ol {
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  display: grid;
}

.simProtagonistInstructions li {
  font-size: 1rem;
  line-height: 1.4;
}

.scriptMd {
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.6;
}

.scriptMd p, .scriptMd h4 {
  margin: 0 0 6px;
}

.scriptH {
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1rem;
  font-weight: 900;
  margin: 10px 0 4px !important;
}

.scriptSection {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  display: flex;
  margin: 8px 0 4px !important;
}

.scriptLabel {
  color: var(--teal-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 900;
}

.scriptP {
  color: var(--ink);
}

.scriptOl, .scriptUl {
  gap: 5px;
  margin: 4px 0 8px;
  padding-left: 20px;
  display: grid;
}

.scriptOl li, .scriptUl li {
  line-height: 1.5;
}

.rankingShell {
  width: min(980px, 100vw - 32px);
}

.rankingHero {
  margin-bottom: 18px;
}

.rankingList {
  gap: 10px;
  display: grid;
}

.rankingRow {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #ffffffe6;
  border-radius: 8px;
  grid-template-columns: 42px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  display: grid;
}

.rankingRow b {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}

.rankingRow.place1 {
  border-color: #f59e0b;
}

.rankingRow.place2 {
  border-color: #94a3b8;
}

.rankingRow.place3 {
  border-color: #c08457;
}

@media (max-width: 880px) {
  .topbar, .adminHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .statusPills {
    justify-content: flex-start;
  }

  .joinPanel, .gameGrid, .adminGrid, .adminControlGrid {
    grid-template-columns: 1fr;
  }

  .playSurface {
    min-height: auto;
  }

  .choiceGrid, .handInputs, .letterForm, .participantRow {
    grid-template-columns: 1fr;
  }

  .participantRow {
    align-items: stretch;
  }

  .manualControls {
    grid-template-columns: 44px 1fr 44px;
  }

  .playerManager {
    position: static;
  }
}

@media (max-width: 560px) {
  .playerShell, .adminShell {
    width: min(100vw - 16px, 1180px);
    padding: 10px 0;
  }

  .playerShell {
    width: 100%;
    padding: 8px;
  }

  .topbar {
    gap: 10px;
    margin-bottom: 10px;
  }

  .topbar h1 {
    font-size: 2rem;
  }

  .statusPills span, .roundMeta span {
    padding: 6px 9px;
    font-size: .76rem;
  }

  .joinCopy, .formCard, .playSurface, .adminPanel, .leaderBand {
    padding: 12px;
  }

  .joinPanel {
    gap: 10px;
  }

  .joinCopy {
    min-height: 180px;
  }

  .joinCopy h2 {
    font-size: 2rem;
  }

  .playSurface {
    min-height: calc(100vh - 112px);
  }

  .waiting {
    min-height: calc(100vh - 170px);
  }

  .kahootArea {
    gap: 12px;
  }

  .kahootArea h2 {
    min-height: 112px;
    font-size: clamp(1.45rem, 8vw, 2.45rem);
  }

  .choiceGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .choice {
    min-height: 74px;
    padding: 12px;
    font-size: 1.05rem;
  }

  .answerReceipt {
    padding: 14px;
  }

  .answerReceipt strong {
    font-size: 1.35rem;
  }

  .letterBlock {
    min-height: 112px;
  }

  .letterBlock strong {
    font-size: 5rem;
  }

  .handInputs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .handInputs label {
    padding: 10px;
  }

  .modeSwitch {
    grid-template-columns: 1fr;
  }

  .buttonRow, .adminNav {
    grid-template-columns: 1fr;
    display: grid;
  }

  .rankingRow {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .rankingRow svg {
    display: none;
  }
}

/*# sourceMappingURL=app_globals_0jn8.0u.css.map*/