/* GAME NIGHT — Ray Gun / David Carson chaos, mobile-first.
   Palette: pure black + saturated brights. NO cream, NO beige. */

:root {
  --black: #000000;
  --pink: #ff2e88;
  --acid: #e8ff00;
  --cyan: #00f0ff;
  --orange: #ff5a00;
  --violet: #9d2eff;
  --white: #ffffff;
  --red: #ff1f1f;
  --font-mono: 'Rubik Mono One', 'Arial Black', Impact, sans-serif;
  --font-loud: 'Bungee', 'Arial Black', Impact, sans-serif;
  --font-block: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-neon: 'Monoton', 'Arial Black', cursive;
  --font-scratch: 'Rubik Wet Paint', 'Comic Sans MS', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-block);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* ---------- screens ---------- */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
}
.screen.active { display: flex; }
.hidden { display: none !important; }

/* ---------- home ---------- */
.chaos-bg { position: absolute; inset: 0; pointer-events: none; opacity: 0.9; }
.bg-word {
  position: absolute;
  font-family: var(--font-mono);
  color: transparent;
  -webkit-text-stroke: 2px var(--violet);
  white-space: nowrap;
}
.bg-word-1 { font-size: 34vw; top: -4vw; left: -12vw; transform: rotate(-8deg); -webkit-text-stroke-color: #2a2a2a; }
.bg-word-2 { font-size: 30vw; bottom: -3vw; right: -16vw; transform: rotate(5deg); -webkit-text-stroke-color: #262626; }
.bg-word-3 { font-size: 26vw; top: 38%; left: 62%; transform: rotate(14deg); -webkit-text-stroke-color: var(--violet); opacity: .5; }

.home-masthead { position: relative; text-align: center; margin-bottom: 1.6rem; z-index: 1; }
.masthead-line1 {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 17vw, 6rem);
  color: var(--acid);
  transform: rotate(-4deg);
  text-shadow: 5px 5px 0 var(--pink);
  letter-spacing: -0.02em;
}
.masthead-line2 {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 17vw, 6rem);
  color: var(--cyan);
  transform: rotate(2deg) translateY(-0.6rem);
  text-shadow: -5px 5px 0 var(--orange);
  margin-left: 1.2rem;
}
.masthead-sub {
  font-family: var(--font-scratch);
  color: var(--pink);
  font-size: 1.15rem;
  transform: rotate(-2deg);
  margin-top: .4rem;
}

.home-menu { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; max-width: 420px; z-index: 1; }
.btn-game {
  position: relative;
  padding: 1.1rem 1rem 1rem;
  font-family: var(--font-loud);
  border: 4px solid var(--black);
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.btn-game:active { transform: scale(0.96) rotate(0deg) !important; }
.btn-charades {
  background: var(--pink);
  color: var(--black);
  transform: rotate(-2deg);
  box-shadow: 8px 8px 0 var(--acid);
}
.btn-pictionary {
  background: var(--cyan);
  color: var(--black);
  transform: rotate(1.5deg);
  box-shadow: -8px 8px 0 var(--orange);
}
.btn-motormouth {
  background: var(--acid);
  color: var(--black);
  transform: rotate(-1deg);
  box-shadow: 8px 8px 0 var(--violet);
}
.btn-game-label { font-size: clamp(1.6rem, 8vw, 2.4rem); line-height: 1; }
.btn-game-tag { font-family: var(--font-scratch); font-size: 1rem; opacity: .85; }

.home-foot { margin-top: 1.6rem; z-index: 1; }

/* ---------- shared buttons ---------- */
.btn-big {
  font-family: var(--font-loud);
  font-size: clamp(1.4rem, 7vw, 2rem);
  background: var(--acid);
  color: var(--black);
  border: 4px solid var(--black);
  box-shadow: 6px 6px 0 var(--pink);
  padding: 1.1rem 2rem;
  transform: rotate(-1deg);
  width: 100%;
  max-width: 420px;
}
.btn-big:active { transform: scale(0.96); }
.btn-small {
  font-family: var(--font-loud);
  font-size: 1rem;
  color: var(--acid);
  border: 3px dashed var(--acid);
  padding: .7rem 1.2rem;
  transform: rotate(1deg);
  background: rgba(232, 255, 0, .06);
}
.btn-small:active { transform: scale(0.95); }
.btn-back {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  left: 1rem;
  font-family: var(--font-loud);
  font-size: 1rem;
  color: var(--cyan);
  padding: .6rem .8rem;
  transform: rotate(-2deg);
}
.btn-reset-scores-inline {
  margin-top: 1.1rem;
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 90, 0, .06);
}
.btn-danger {
  font-family: var(--font-loud);
  font-size: 1.05rem;
  background: var(--red);
  color: var(--white);
  border: 3px solid var(--white);
  padding: .8rem 1.2rem;
  box-shadow: 4px 4px 0 var(--violet);
  width: 100%;
}
.btn-danger:active { transform: scale(0.96); }

.screen-title {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 11vw, 3.4rem);
  color: var(--acid);
  text-shadow: 4px 4px 0 var(--violet);
  text-align: center;
  margin-bottom: 1.8rem;
  line-height: 1.05;
}
.rot-l { transform: rotate(-3deg); }
.rot-r { transform: rotate(2deg); }

/* ---------- teams ---------- */
.team-edit { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: .3rem; }
.team-edit label {
  font-family: var(--font-loud);
  font-size: .9rem;
  color: var(--black);
  background: var(--orange);
  padding: .2rem .6rem;
  width: max-content;
  transform: rotate(-2deg) translateY(6px);
  z-index: 1;
}
.team-edit-b label { background: var(--cyan); transform: rotate(2deg) translateY(6px); }
.team-edit input {
  font-family: var(--font-block);
  font-size: 1.5rem;
  padding: .9rem .8rem;
  background: var(--black);
  color: var(--white);
  border: 4px solid var(--pink);
  box-shadow: 6px 6px 0 rgba(255, 46, 136, .35);
  transform: rotate(-1deg);
  width: 100%;
}
.team-edit-b input { border-color: var(--cyan); box-shadow: -6px 6px 0 rgba(0, 240, 255, .35); transform: rotate(1deg); }
.team-edit input:focus { outline: 4px solid var(--acid); }
.vs-splat {
  font-family: var(--font-neon);
  font-size: 2.6rem;
  color: var(--acid);
  transform: rotate(-8deg);
  margin: .7rem 0;
  text-shadow: 3px 3px 0 var(--red);
}
#btn-teams-next { margin-top: 2rem; }

/* ---------- difficulty ---------- */
.diff-menu { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; max-width: 420px; margin-bottom: 2rem; }
.btn-diff {
  padding: 1rem;
  border: 4px solid var(--black);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  opacity: .45;
  filter: saturate(.4);
}
.btn-diff.selected { opacity: 1; filter: none; outline: 5px solid var(--white); }
.btn-diff-1 { background: var(--cyan); color: var(--black); transform: rotate(-1.5deg); box-shadow: 6px 6px 0 var(--violet); }
.btn-diff-2 { background: var(--acid); color: var(--black); transform: rotate(1deg); box-shadow: -6px 6px 0 var(--pink); }
.btn-diff-3 { background: var(--red); color: var(--white); transform: rotate(-2deg); box-shadow: 6px 6px 0 var(--orange); }
.diff-name { font-family: var(--font-loud); font-size: 1.5rem; }
.diff-desc { font-family: var(--font-scratch); font-size: .95rem; }

/* ---------- play: scorebar ---------- */
.scorebar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: stretch;
  z-index: 5;
  padding-top: env(safe-area-inset-top);
  background: var(--black);
  border-bottom: 3px solid var(--white);
}
.scorebar-team {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem;
  padding: .5rem .7rem;
  font-family: var(--font-loud);
  overflow: hidden;
}
.scorebar-a { background: var(--pink); color: var(--black); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); padding-right: 1.2rem; }
.scorebar-b { background: var(--cyan); color: var(--black); clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%); padding-left: 1.2rem; flex-direction: row-reverse; }
.sb-name { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-score { font-size: 1.4rem; }
.scorebar-team.turn-active { outline: 4px solid var(--acid); outline-offset: -4px; }
.scorebar-menu {
  font-size: 1.3rem;
  color: var(--acid);
  padding: 0 .8rem;
  background: var(--black);
}

/* ---------- play states ---------- */
.play-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: 100%;
  height: 100%;
  padding-top: 3.2rem;
}
.turn-banner { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.turn-up {
  font-family: var(--font-scratch);
  font-size: 1.3rem;
  color: var(--orange);
  transform: rotate(-4deg);
}
.turn-team {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 9vw, 2.8rem);
  color: var(--acid);
  text-shadow: 4px 4px 0 var(--violet);
  transform: rotate(-2deg);
  text-align: center;
  max-width: 92vw;
  overflow-wrap: anywhere;
}
.turn-hint { font-family: var(--font-block); color: var(--cyan); font-size: 1rem; transform: rotate(1deg); text-align: center; }
.btn-draw { background: var(--pink); box-shadow: 6px 6px 0 var(--cyan); color: var(--black); }

/* ---------- the word card: CLEAN. chaos never touches the word. ---------- */
.reveal-hint { font-family: var(--font-scratch); color: var(--acid); font-size: 1.2rem; transform: rotate(-2deg); }
.word-card {
  background: var(--white);
  color: var(--black);
  width: min(92vw, 480px);
  height: 38vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  border: 6px solid var(--black);
  outline: 4px solid var(--acid);
  text-align: center;
}
.word-card span {
  font-family: var(--font-block);
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: normal;
}
.btn-start { background: var(--acid); box-shadow: 6px 6px 0 var(--orange); }

/* ---------- running / timer ---------- */
#play-running { justify-content: space-between; padding-bottom: max(1rem, env(safe-area-inset-bottom)); gap: .6rem; }
.btn-peek {
  position: absolute;
  top: calc(3.4rem + env(safe-area-inset-top));
  left: .7rem;
  font-family: var(--font-loud);
  font-size: .85rem;
  line-height: 1.15;
  background: var(--violet);
  color: var(--white);
  border: 3px solid var(--white);
  padding: .8rem .7rem;
  transform: rotate(-3deg);
  z-index: 6;
  box-shadow: 4px 4px 0 var(--pink);
}
.btn-peek.pulse { animation: peekpulse 1s ease-in-out infinite; }
@keyframes peekpulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--pink); }
  50% { box-shadow: 4px 4px 0 var(--acid), 0 0 22px var(--acid); }
}
/* a fresh, unseen word is waiting behind the button */
.btn-peek.new {
  background: var(--acid);
  color: var(--black);
  border-color: var(--black);
  transform: rotate(-3deg) scale(1.3);
  transform-origin: top left;
}
.newword-flash {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  z-index: 6;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  background: var(--pink);
  color: var(--black);
  border: 5px solid var(--black);
  outline: 4px solid var(--acid);
  padding: 1.2rem 1.6rem;
  animation: nwpop .25s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes nwpop {
  from { transform: translate(-50%, -50%) rotate(-12deg) scale(.3); }
  to { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
}
.nw-big { font-family: var(--font-loud); font-size: 2.1rem; line-height: 1; }
.nw-small { font-family: var(--font-block); font-size: 1rem; }
.word-card-peek {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  min-height: 30vh;
}
/* always-show: no peek button, card sits in the flow above a smaller timer */
#play-running.live .btn-peek { display: none; }
#play-running.live .word-card-peek {
  position: static;
  transform: rotate(-1deg);
  height: 24vh;
  min-height: 0;
  margin-top: .4rem;
}
#play-running.live .timer-display { font-size: clamp(4.5rem, 26vw, 9rem); }
.timer-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 100%; }
.timer-display {
  font-family: var(--font-block);
  font-size: clamp(7rem, 44vw, 15rem);
  line-height: 1;
  color: var(--acid);
  text-shadow: 8px 8px 0 rgba(157, 46, 255, .55);
}
.timer-display.urgent {
  color: var(--red);
  text-shadow: 8px 8px 0 rgba(255, 46, 136, .6);
  animation: urgentpulse .5s ease-in-out infinite;
}
@keyframes urgentpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.timer-round-score { font-family: var(--font-loud); color: var(--cyan); font-size: 1.1rem; transform: rotate(-1deg); }

.running-actions {
  display: flex;
  width: 100%;
  max-width: 480px;
  gap: 1.2rem;
  padding: 0 .4rem;
}
.btn-skip, .btn-got {
  font-family: var(--font-loud);
  border: 4px solid var(--black);
  padding: 1.5rem .5rem;
  font-size: 1.35rem;
}
.btn-skip {
  flex: 2;
  background: var(--orange);
  color: var(--black);
  transform: rotate(-1.5deg);
  box-shadow: 4px 5px 0 var(--violet);
}
.btn-got {
  flex: 3;
  background: var(--acid);
  color: var(--black);
  transform: rotate(1deg);
  box-shadow: -4px 5px 0 var(--pink);
  font-size: 1.6rem;
}
.btn-skip:active, .btn-got:active { transform: scale(0.94); }

/* ---------- summary ---------- */
.summary-title {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 12vw, 3.6rem);
  color: var(--red);
  text-shadow: 4px 4px 0 var(--acid);
  transform: rotate(-3deg);
}
.summary-score {
  font-family: var(--font-loud);
  font-size: 1.6rem;
  color: var(--black);
  background: var(--acid);
  padding: .5rem 1.2rem;
  transform: rotate(1.5deg);
  border: 4px solid var(--black);
  box-shadow: 5px 5px 0 var(--pink);
  max-width: 92vw;
  text-align: center;
}
.summary-words {
  max-height: 32vh;
  overflow-y: auto;
  width: min(92vw, 420px);
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  padding: .4rem;
}
.summary-fixnote {
  font-family: var(--font-scratch);
  font-size: .95rem;
  color: var(--cyan);
  transform: rotate(-1deg);
}
.summary-chip {
  font-family: var(--font-block);
  font-size: .95rem;
  padding: .35rem .6rem;
  border: 2px solid;
  background: var(--black);
}
.summary-chip:active { transform: scale(.9); }
.summary-chip.got { color: var(--acid); border-color: var(--acid); transform: rotate(-1deg); }
.summary-chip.skip { color: var(--orange); border-color: var(--orange); text-decoration: line-through; transform: rotate(1.5deg); }

/* ---------- overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 1rem;
}
/* settings can be opened from the pause menu — it must stack above it */
#settings-overlay { z-index: 22; }

/* ---------- winner ceremony ---------- */
#winner-overlay { z-index: 24; overflow: hidden; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -4vh;
  width: 10px;
  height: 16px;
  animation: confettifall linear infinite;
}
@keyframes confettifall {
  to { transform: translateY(108vh) rotate(720deg); }
}
.winner-panel { align-items: center; text-align: center; }
.winner-title {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 11vw, 3rem);
  color: var(--acid);
  text-shadow: 4px 4px 0 var(--red);
  transform: rotate(-3deg);
}
.winner-team {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 8vw, 2.3rem);
  color: var(--cyan);
  text-shadow: 4px 4px 0 var(--violet);
  transform: rotate(1.5deg);
  overflow-wrap: anywhere;
}
.winner-note { font-family: var(--font-scratch); color: var(--pink); }
.panel {
  background: var(--black);
  border: 5px solid var(--acid);
  box-shadow: 10px 10px 0 var(--pink);
  padding: 1.6rem 1.2rem;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transform: rotate(-1deg);
  max-height: 90vh;
  overflow-y: auto;
}
.panel-title {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  color: var(--cyan);
  text-shadow: 3px 3px 0 var(--violet);
  transform: rotate(-2deg);
}
.panel-text { font-family: var(--font-block); font-size: 1rem; color: var(--white); line-height: 1.4; }
.setting-row { display: flex; flex-direction: column; gap: .5rem; }
.setting-label { font-family: var(--font-loud); font-size: .95rem; color: var(--orange); }
.setting-note { font-family: var(--font-block); font-size: .8rem; color: var(--cyan); }
.seg { display: flex; gap: .5rem; }
.seg button {
  flex: 1;
  font-family: var(--font-loud);
  font-size: 1rem;
  padding: .7rem 0;
  border: 3px solid var(--white);
  color: var(--white);
  background: var(--black);
}
.seg button.selected { background: var(--acid); color: var(--black); border-color: var(--acid); }