.poison-page {
  margin: 0;
  /* Shared motion tokens (strong curves beat the built-in easings). */
  --wp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wp-pop: cubic-bezier(0.2, 0.8, 0.3, 1);
}

.poison-header { padding: 57px 24px 45px; }

.poison-header-inner,
.poison-main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.poison-header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.poison-header-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 21px;
  background: rgba(255, 255, 255, .12);
  font-size: 2.35rem;
}

.poison-kicker {
  margin: 0 0 5px;
  color: var(--leaf);
  font-size: .77rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.poison-header .poison-kicker { color: #ffe28e; }
.poison-header h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; }
.poison-header p:not(.poison-kicker) { max-width: 720px; margin: 5px 0 0; font-size: 1.05rem; }

.poison-header-badge {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
  color: #ffe89e;
  font-size: .84rem;
  font-weight: 900;
  white-space: nowrap;
}

.poison-main { padding: 34px 0 68px; }

.poison-panel {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.poison-panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  background: linear-gradient(90deg, var(--sun), #f4dd86, var(--leaf-light));
}

.poison-panel-heading,
.poison-game-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.poison-panel-heading { margin-bottom: 22px; }
.poison-panel-heading > span { font-size: 2.5rem; }

.poison-panel h2 {
  margin: 0;
  color: var(--chalk);
  font-family: 'DM Serif Display', 'Noto Sans SC', serif;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 400;
  line-height: 1.2;
}

.poison-panel label {
  display: block;
  margin: 16px 0 7px;
  color: var(--chalk);
  font-size: .94rem;
  font-weight: 900;
}

.poison-panel textarea,
.poison-panel input,
.poison-panel select {
  display: block;
  width: 100%;
  padding: 12px 13px;
  font-size: 1rem;
}

.poison-panel textarea {
  min-height: 280px;
  resize: vertical;
  line-height: 1.6;
}

.poison-help {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.poison-library {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d8e5c7;
  border-radius: 8px;
  background: #f8fbf2;
}

.poison-library label:first-child { margin-top: 0; }

.poison-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.poison-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.poison-primary,
.poison-secondary {
  min-height: 48px;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  transition: transform 160ms var(--wp-ease-out), box-shadow 160ms var(--wp-ease-out), background-color 160ms ease;
}

.poison-primary {
  border: 1px solid transparent;
  background: var(--coral);
  box-shadow: 0 5px 0 #9d392f;
  color: #fff;
}

/* Hover lift only where a real pointer exists (touch taps would stick otherwise) */
@media (hover: hover) and (pointer: fine) {
  .poison-primary:hover:not(:disabled) { transform: translateY(-2px); background: #d75d49; box-shadow: 0 7px 0 #9d392f; }
}
.poison-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #9d392f; }
.poison-primary:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.poison-setup .poison-primary,
#poison-setup-form > .poison-primary { width: 100%; margin-top: 25px; }

.poison-secondary {
  border: 1px solid #cfdcbf;
  background: #eef6e4;
  color: var(--chalk);
}

.poison-secondary:hover { background: #fff0bf; border-color: #e4b744; }

.poison-status {
  min-height: 25px;
  margin: 12px 0 0;
  color: var(--leaf);
  font-size: .88rem;
  font-weight: 800;
  text-align: center;
}

.poison-status.is-error { color: var(--coral); }
.poison-status.is-ended { color: #9d392f; font-size: 1rem; }
.poison-game[hidden],
.poison-cast[hidden],
.poison-banner[hidden] { display: none; }

.poison-game { min-height: 570px; }

.poison-progress {
  margin: 4px 0 0;
  padding: 7px 12px;
  border: 1px solid #d8e5c7;
  border-radius: 999px;
  background: #eef6e4;
  color: var(--leaf);
  font-size: .84rem;
  font-weight: 900;
  white-space: nowrap;
}

.poison-read-prompt {
  margin: 28px 0 11px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
  text-align: center;
}

.poison-read-prompt.is-hold-prompt {
  color: var(--chalk);
  font-size: 1.02rem;
  font-weight: 900;
}

.poison-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  animation: poison-rise 300ms var(--wp-ease-out) both;
}

@keyframes poison-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.poison-grid-card {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 12px 14px;
  border: 2px solid #d8d5f0;
  border-radius: 8px;
  background: #fbf8ff;
  color: #201835;
  cursor: pointer;
  font: inherit;
  font-size: 1.85rem; /* base tier: 5–8 chars */
  font-weight: 900;
  line-height: 1.22;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: pre-wrap;
  box-shadow: 0 5px 0 rgba(44, 30, 90, .18);
  transition: transform 140ms var(--wp-ease-out), border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .poison-grid-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: #8f74df;
    background: #fffdf7;
  }
}

/* Tactile press feedback on the card the student picks */
.poison-grid-card:active:not(:disabled) { transform: scale(0.97); }

.poison-grid-card:disabled { cursor: not-allowed; }

/* Size tiers by text length: short = big text, long = smaller text + wider card */
.poison-grid-card.is-xshort { font-size: 2.9rem; }
.poison-grid-card.is-short { font-size: 2.3rem; }
.poison-grid-card.is-long { font-size: 1.35rem; }
.poison-grid-card.is-xlong { font-size: 1.02rem; grid-column: span 2; }

/* Placement markers (☠️/💊) always show at a comfortable size regardless of tier. */
.poison-grid-card.is-poison-setup,
.poison-grid-card.is-antidote-setup { font-size: 2.1rem; grid-column: auto; }

.poison-grid-card.is-poison-setup {
  border-color: #9478f2;
  background: #5a3eb7;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.poison-grid-card.is-safe {
  border-color: #5e489f;
  background: #35236f;
  color: #d9cffb;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
}

.poison-grid-card.is-antidote-setup {
  border-color: #59c08a;
  background: #17795a;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.poison-grid-card.is-poisoned {
  border-color: #ffd85d;
  background: #cb473a;
  color: #fff;
  animation: poison-card-shake 1.8s ease both;
}

.poison-grid-card.is-antidote-found {
  border-color: #7be0b0;
  background: #17795a;
  color: #eafff5;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
  animation: poison-card-pop 620ms cubic-bezier(.2, .8, .3, 1) both;
}

.poison-grid-card.is-poison-flash { animation: poison-card-shake 1.1s ease both; }
.poison-grid-card.is-antidote-flash { animation: poison-card-pop 620ms cubic-bezier(.2, .8, .3, 1) both; }

@keyframes poison-card-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* Setup: antidote toggle */
.poison-toggle-field { align-self: end; }
.poison-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  cursor: pointer;
}
.poison-toggle input { width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer; }
.poison-toggle span { font-size: .94rem; font-weight: 900; color: var(--chalk); }

.poison-game-status { margin-top: 17px; }

.poison-game-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

/* ---- Team roster / avatars ---- */
.poison-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 6px;
}

.poison-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 108px;
  padding: 12px 8px 10px;
  border: 2px solid #d8d5f0;
  border-radius: 14px;
  background: #fbf8ff;
  text-align: center;
  transition: transform 160ms var(--wp-ease-out), border-color 160ms ease, background-color 220ms ease, box-shadow 160ms ease;
  /* Staggered fade-in at game start (opacity only, so it never fights the
     is-current lift). */
  animation: poison-fade-in 300ms ease both;
}

.poison-team:nth-child(2) { animation-delay: 55ms; }
.poison-team:nth-child(3) { animation-delay: 110ms; }
.poison-team:nth-child(4) { animation-delay: 165ms; }
.poison-team:nth-child(5) { animation-delay: 220ms; }
.poison-team:nth-child(6) { animation-delay: 275ms; }
.poison-team:nth-child(n+7) { animation-delay: 320ms; }

.poison-team.is-current {
  border-color: #e4b744;
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(228, 183, 68, .35);
  transform: translateY(-3px);
}

.poison-team-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #f3edff, #e4dbfb);
  border: 2px solid #cdbff4;
  transition: background 260ms ease, border-color 260ms ease, filter 260ms ease;
}

.poison-team-people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 0;
  width: 60px;
  line-height: 1;
}

.poison-person { font-size: 2.1rem; line-height: 1; transition: filter 260ms ease; }

.poison-team-status {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 1.35rem;
  line-height: 1;
}

.poison-team-name {
  width: 100%;
  margin: 0;
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--chalk);
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  text-align: center;
  cursor: text;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.poison-team-name:hover { border-color: #cdbff4; }
.poison-team-name:focus {
  outline: none;
  border-color: #7b53c9;
  background: #fff;
}
.poison-team-badges { margin: 0; min-height: 1em; color: #7a5cd6; font-size: .82rem; font-weight: 900; }

/* Poisoned team turns purple */
.poison-team.is-poisoned {
  border-color: #7b53c9;
  background: #efe6fb;
}
.poison-team.is-poisoned .poison-team-avatar {
  background: radial-gradient(circle at 50% 35%, #9b6ee6, #6a3bb0);
  border-color: #52288f;
}
.poison-team.is-poisoned .poison-person { filter: grayscale(1) brightness(1.7) sepia(1) hue-rotate(230deg) saturate(4); }
.poison-team.is-poisoned .poison-team-name { color: #6a3bb0; }

.poison-team-cure {
  margin-top: 2px;
  padding: 5px 10px;
  border: 1px solid #7b53c9;
  border-radius: 999px;
  background: #f0e6ff;
  color: #52288f;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  font-weight: 900;
  animation: poison-cure-pulse 1.4s ease-in-out infinite;
}
.poison-team-cure:hover { background: #7b53c9; color: #fff; }
.poison-team-cure[hidden] { display: none; }

@keyframes poison-cure-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(123, 83, 201, .5); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(123, 83, 201, 0); }
}

/* ---- Witch cast animation ---- */
.poison-cast {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.poison-cast-figure {
  position: relative;
  display: grid;
  place-items: center;
  animation: poison-cast-in 1.1s cubic-bezier(.2, .8, .3, 1) both;
}

.poison-cast-img {
  width: clamp(150px, 34vw, 260px);
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(30, 8, 60, .35));
}
.poison-cast-emoji { display: none; font-size: clamp(4rem, 15vw, 8rem); line-height: 1; filter: drop-shadow(0 10px 24px rgba(30, 8, 60, .4)); }
.poison-cast-emoji.is-visible { display: block; }

.poison-cast-spark {
  position: absolute;
  top: 8%;
  font-size: clamp(2.5rem, 9vw, 5rem);
  animation: poison-cast-spark 1.1s ease both;
}

.poison-cast-label {
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(30, 8, 60, .82);
  color: #fff;
  font-size: clamp(1rem, 3.4vw, 1.5rem);
  font-weight: 900;
  animation: poison-cast-in 1.1s ease both;
}

.poison-cast.is-antidote .poison-cast-label { background: rgba(23, 79, 69, .88); }

@keyframes poison-cast-in {
  0% { opacity: 0; transform: scale(.4) translateY(30px) rotate(-6deg); }
  20% { opacity: 1; transform: scale(1.08) translateY(0) rotate(3deg); }
  32% { transform: scale(1) rotate(-2deg); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.94) translateY(-18px); }
}

@keyframes poison-cast-spark {
  0% { opacity: 0; transform: scale(.3) rotate(0); }
  25% { opacity: 1; transform: scale(1.2) rotate(20deg); }
  60% { opacity: 1; transform: scale(1) rotate(-12deg); }
  100% { opacity: 0; transform: scale(1.4) rotate(30deg); }
}

/* ---- Group chooser (who places next) ---- */
.poison-chooser {
  position: fixed;
  z-index: 1002;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 8, 60, .82);
  animation: poison-fade-in 220ms ease both;
}
.poison-chooser[hidden] { display: none; }

.poison-chooser-card {
  width: min(560px, 100%);
  padding: 32px 28px;
  border: 4px solid #ffd85d;
  border-radius: 26px;
  background: linear-gradient(145deg, #6a3bb0, #341a63);
  box-shadow: 0 30px 80px rgba(14, 2, 34, .55);
  color: #fff;
  text-align: center;
}

.poison-chooser-title {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  font-weight: 900;
  line-height: 1.2;
}

.poison-chooser-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.poison-chooser-group {
  min-height: 60px;
  padding: 14px 16px;
  border: 2px solid #ffd85d;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  transition: transform 140ms var(--wp-ease-out), background-color 140ms ease, color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .poison-chooser-group:hover { transform: translateY(-2px); background: #ffd85d; color: #341a63; }
}
.poison-chooser-group:active { transform: scale(0.97); }

@keyframes poison-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Fullscreen button on the setup screen spans the form width. */
.poison-setup-toggles { display: flex; gap: 12px; margin-top: 12px; }
.poison-setup-toggles .poison-secondary { flex: 1; }

/* Witchy purple backdrop while in fullscreen */
body.poison-fs { background: radial-gradient(circle at 50% -10%, #4a2585, #2a1257 55%, #180a34) fixed; }
body.poison-fs .poison-header { background: transparent; }
body.poison-fs .poison-main { color: #f3ecff; }

/* ---- Big banner (game start / game over) ---- */
.poison-banner {
  position: fixed;
  z-index: 1001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 8, 60, .78);
  animation: poison-fade 1.7s ease both;
}
.poison-banner.is-over { background: rgba(58, 12, 12, .82); }

.poison-banner-inner {
  width: min(620px, 100%);
  padding: 44px 30px;
  border: 5px solid #ffd85d;
  border-radius: 30px;
  background: linear-gradient(145deg, #6a3bb0, #341a63);
  box-shadow: 0 30px 80px rgba(14, 2, 34, .55);
  color: #fff;
  text-align: center;
  animation: poison-pop 1.7s cubic-bezier(.2, .75, .25, 1) both;
}
.poison-banner.is-over .poison-banner-inner { background: linear-gradient(145deg, #cb473a, #7b1e1a); }

.poison-banner-title { margin: 0; font-size: clamp(2.4rem, 9vw, 5rem); font-weight: 900; line-height: 1.05; }
.poison-banner-sub { margin: 12px 0 0; color: #ffe89e; font-size: clamp(1.05rem, 3vw, 1.65rem); font-weight: 900; }

@keyframes poison-pop {
  0% { opacity: 0; transform: scale(.35) rotate(-8deg); }
  16% { opacity: 1; transform: scale(1.1) rotate(3deg); }
  25% { transform: scale(.96) rotate(-3deg); }
  34% { transform: scale(1.04) translateX(10px); }
  42% { transform: scale(1) translateX(-10px); }
  50% { transform: translateX(7px); }
  58% { transform: translateX(-5px); }
  72% { transform: scale(1); }
  90% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.88); }
}

@keyframes poison-card-shake {
  0%, 100% { transform: translateX(0); }
  14%, 42%, 70% { transform: translateX(-8px); }
  28%, 56%, 84% { transform: translateX(8px); }
}

@media (max-width: 720px) {
  .poison-header { padding-top: 82px; }
  .poison-header-inner { width: min(100%, calc(100% - 32px)); grid-template-columns: auto minmax(0, 1fr); }
  .poison-header-badge { display: none; }
  .poison-main { width: min(100%, calc(100% - 32px)); padding-top: 24px; }
  .poison-options { grid-template-columns: 1fr; gap: 2px; }
  .poison-library-row { grid-template-columns: 1fr; }
  .poison-panel { padding: 23px; }
  .poison-card-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; }
  .poison-grid-card { min-height: 82px; font-size: 1.55rem; }
  .poison-grid-card.is-xshort { font-size: 2.15rem; }
  .poison-grid-card.is-short { font-size: 1.85rem; }
  .poison-grid-card.is-long { font-size: 1.1rem; }
  .poison-grid-card.is-xlong { font-size: .9rem; }
  .poison-grid-card.is-poison-setup,
  .poison-grid-card.is-antidote-setup { font-size: 1.75rem; }
}

@media (max-width: 480px) {
  .poison-header-inner { grid-template-columns: 1fr; }
  .poison-header-icon { width: 56px; height: 56px; border-radius: 17px; font-size: 1.85rem; }
  .poison-game-topline { align-items: stretch; flex-direction: column; gap: 12px; }
  .poison-progress { align-self: flex-start; }
  .poison-game-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .poison-primary,
  .poison-secondary,
  .poison-grid-card,
  .poison-team { transition: none; }
  .poison-banner,
  .poison-banner-inner,
  .poison-cast-figure,
  .poison-cast-label { animation-timing-function: linear; }
  .poison-banner-inner { animation-name: poison-fade; }
  .poison-cast-spark,
  .poison-team-cure,
  .poison-card-grid,
  .poison-team,
  .poison-grid-card.is-poisoned,
  .poison-grid-card.is-antidote-found,
  .poison-grid-card.is-poison-flash,
  .poison-grid-card.is-antidote-flash { animation: none; }
  .poison-team { animation-delay: 0ms; }
  .poison-grid-card:active:not(:disabled) { transform: none; }
}

@keyframes poison-fade {
  0%, 100% { opacity: 0; }
  12%, 88% { opacity: 1; }
}