/* =====================================================================
   Sketch Party — "sketchbook on a studio desk"
   Cream paper cards with hand-drawn ink outlines, tape, marker accents,
   hand-lettered headings, sticky-note players and a ruled notepad chat.
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --desk: #15131a;
  --desk-2: #24202d;
  --paper: #f8f2e4;
  --paper-2: #efe6d2;
  --paper-3: #e5dac1;
  --ink: #1f1b24;
  --ink-2: #3d3745;
  --muted: #6f6779;
  --text: var(--ink);
  --coral: #ff4d6d;
  --mustard: #ffc53d;
  --amber: #c98a00;
  --teal: #12968a;
  --sky: #3aa6d9;
  --grape: #8b5cf6;
  --good: #2f9e5f;
  --accent: var(--coral);
  --accent-2: var(--amber);
  --line: rgba(31, 27, 36, 0.18);
  --panel: var(--paper);
  --panel-2: var(--paper-2);
  --radius: 14px;
  --sk: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --sk-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
  --sk-sm: 14px 7px 16px 8px / 8px 16px 7px 14px;
  --shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
  --font-hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(255, 77, 109, 0.16), transparent 60%),
    radial-gradient(900px 600px at 108% 108%, rgba(58, 166, 217, 0.16), transparent 60%),
    linear-gradient(160deg, var(--desk), var(--desk-2));
  color: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 26l2-7L22 5l5 5-14 14-7 2z' fill='%23ffc53d' stroke='%231f1b24' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M19 8l5 5M8 19l5 5' stroke='%231f1b24' stroke-width='2'/%3E%3C/svg%3E") 6 26, auto;
}

/* paper grain over the whole desk */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hidden { display: none !important; }

#bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* floating chalk doodles behind everything */
.doodles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.doodle {
  position: absolute;
  width: var(--s, 90px);
  height: var(--s, 90px);
  opacity: 0.14;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: float var(--d, 14s) ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translateY(0) rotate(var(--r, 0deg)); }
  to { transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 8deg)); }
}

/* marker wipe between screens */
#wipe {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: var(--coral);
  /* the extra -60vh margin keeps the skewed shape fully off-screen at rest:
     skewX shears a tall box by roughly height*tan(8deg) at its far edge, which
     -100% alone doesn't clear on narrow/tall viewports */
  transform: translateX(calc(-100% - 60vh)) skewX(-8deg);
}
#wipe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mustard);
  transform: translateX(-28%);
}
#wipe.run { animation: wipe 0.75s cubic-bezier(0.77, 0, 0.18, 1); }
@keyframes wipe {
  from { transform: translateX(calc(-100% - 60vh)) skewX(-8deg); }
  to { transform: translateX(calc(100% + 60vh)) skewX(-8deg); }
}

.confetti {
  position: fixed;
  top: -14px;
  width: 10px;
  height: 14px;
  z-index: 150;
  pointer-events: none;
  border-radius: 2px;
  animation: confetti-fall var(--t, 2.6s) ease-in forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--x, 0), 112vh) rotate(var(--r, 540deg)); opacity: 0.85; }
}

.screen { display: none; min-height: 100vh; position: relative; z-index: 1; }
.screen.active { display: flex; flex-direction: column; }

/* ============ paper surfaces ============ */

.home-card, .lobby-card, .modal-card, .game-header, .chat-col, .toolbar,
.action-bar, .overlay-card, .team-col {
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 5px 0 var(--ink), var(--shadow);
  position: relative;
}

/* a second, wobbly hand-drawn outline around the big cards */
.home-card::after, .lobby-card::after, .modal-card::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 2px solid var(--ink);
  border-radius: inherit;
  filter: url(#wobble);
  opacity: 0.55;
  pointer-events: none;
}

/* a strip of tape at the top of the big cards */
.home-card::before, .lobby-card::before, .modal-card::before, .overlay-card::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  width: 118px;
  height: 30px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 197, 61, 0.78);
  border-left: 2px dashed rgba(255, 255, 255, 0.5);
  border-right: 2px dashed rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: none;
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-36px) rotate(-4deg) scale(0.96); }
  to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
}
@keyframes note-in {
  from { opacity: 0; transform: translateY(24px) rotate(3deg) scale(0.92); }
  to { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); }
}
@keyframes wiggle {
  0% { transform: translate(-1px, -1px) rotate(-1deg); }
  30% { transform: translate(-1px, -1px) rotate(1.6deg); }
  60% { transform: translate(-1px, -1px) rotate(-1.2deg); }
  100% { transform: translate(-1px, -1px) rotate(-1deg); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-2deg); }
  75% { transform: translateX(2px) rotate(2deg); }
}
@keyframes pulse { 50% { opacity: 0.55; } }
@keyframes swipe { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes letter-in {
  0% { opacity: 0; transform: translateY(22px) rotate(-14deg) scale(0.5); }
  60% { opacity: 1; transform: translateY(-5px) rotate(5deg) scale(1.1); }
  100% { opacity: 1; transform: none; }
}

/* ============ buttons & inputs ============ */

.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--sk-sm);
  padding: 12px 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s;
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); animation: wiggle 0.45s ease; }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); animation: none; }
.btn:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--coral); color: #fff; }
.btn-secondary { background: var(--mustard); color: var(--ink); }
.btn-ghost { background: transparent; box-shadow: none; border-style: dashed; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); }
.btn-tiny { padding: 6px 12px; font-size: 0.82rem; box-shadow: 2px 2px 0 var(--ink); }
.btn-tiny:hover:not(:disabled) { box-shadow: 3px 3px 0 var(--ink); }

input, select {
  font-family: var(--font-body);
  font-weight: 600;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--sk-sm);
  padding: 12px 16px;
  font-size: 1rem;
  outline: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
input:focus, select:focus { border-color: var(--coral); box-shadow: 3px 3px 0 var(--coral); transform: translate(-1px, -1px); }
input::placeholder { color: var(--muted); font-weight: 500; }
input:disabled { background: var(--paper-2); box-shadow: none; }

/* ============ home ============ */

#screen-home { align-items: center; justify-content: center; padding: 28px 24px; }

.home-card {
  --tilt: -0.7deg;
  border-radius: var(--sk);
  padding: 46px 48px 40px;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: rotate(var(--tilt));
  animation: drop-in 0.75s var(--pop) both;
}

.logo {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  text-align: center;
  color: var(--ink);
  transform: rotate(-2deg);
  margin-top: 6px;
}
.logo span { color: var(--coral); }
.logo .ch {
  display: inline-block;
  animation: letter-in 0.6s var(--pop) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.logo-underline { display: block; width: 240px; height: 18px; margin: -4px auto 0; overflow: visible; }
.logo-underline path {
  stroke: var(--coral);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: draw 0.9s 0.8s ease forwards;
}
.tagline { text-align: center; color: var(--muted); font-family: var(--font-hand); font-size: 1.4rem; margin-bottom: 8px; transform: rotate(-1deg); }

.field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-label::before { content: ''; width: 18px; height: 3px; background: var(--coral); border-radius: 2px; transform: rotate(-6deg); }

.avatar-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.avatar-opt {
  font-size: 1.55rem;
  padding: 6px 0;
  text-align: center;
  border-radius: 50% 42% 56% 46% / 48% 54% 44% 52%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.18s var(--pop), border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}
.avatar-opt:hover { transform: scale(1.22) rotate(-8deg); }
.avatar-opt.selected { border-color: var(--ink); background: var(--mustard); transform: rotate(-6deg) scale(1.12); box-shadow: 2px 2px 0 var(--ink); }

.home-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.home-actions .btn-primary { width: 100%; padding: 15px; font-size: 1.15rem; }
.home-actions .btn-ghost { width: 100%; }
.join-row { display: flex; gap: 10px; }
.join-row input {
  flex: 1;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 8px;
  font-family: var(--font-mono);
  font-size: 1.2rem;
}

.party-toggle { display: flex; align-items: center; gap: 10px; }
.party-toggle-label { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); user-select: none; }

.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; box-shadow: none; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 999px;
  transition: background 0.15s;
  pointer-events: none;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.2s var(--pop), background 0.15s;
}
.toggle-switch input:checked ~ .toggle-track { background: var(--coral); }
.toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(20px); background: #fff; }
.toggle-switch input:focus-visible ~ .toggle-track { box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.35); }

/* ============ browse open rooms ============ */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 14, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-card {
  border-radius: var(--sk-2);
  padding: 26px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: rotate(0.6deg);
  animation: drop-in 0.55s var(--pop) both;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-family: var(--font-hand); font-size: 1.7rem; font-weight: 700; }

.browse-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; min-height: 60px; }
.browse-empty { color: var(--muted); font-weight: 600; text-align: center; padding: 18px 0; font-family: var(--font-hand); font-size: 1.25rem; }
.browse-row {
  background: var(--paper-2);
  border: 2px dashed var(--ink);
  border-radius: var(--sk-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.browse-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.browse-code { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; letter-spacing: 3px; color: var(--coral); }
.browse-meta { font-size: 0.78rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ lobby ============ */

#screen-lobby { align-items: center; justify-content: center; padding: 28px 24px; }

.lobby-card {
  --tilt: 0.5deg;
  border-radius: var(--sk-2);
  padding: 40px 46px 36px;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform: rotate(var(--tilt));
  animation: drop-in 0.75s var(--pop) both;
}

.lobby-title {
  font-family: var(--font-hand);
  font-weight: 700;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1;
  transform: rotate(-1.5deg);
}

.code-box {
  background: var(--mustard);
  border: 2px dashed var(--ink);
  border-radius: var(--sk-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: rotate(1deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.code-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; color: var(--ink-2); }
.code-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 12px;
  padding-left: 12px;
  color: var(--ink);
  line-height: 1;
}
.code-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.lobby-players { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 64px; }
.lobby-player {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-1.5deg);
  animation: drop-in 0.5s var(--pop) both;
}
.lobby-player:nth-child(2n) { transform: rotate(1.5deg); background: var(--paper-2); }
.lobby-player .av { font-size: 1.4rem; }

.settings-row { display: flex; gap: 16px; justify-content: center; }
.setting { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.setting label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }
.setting select { min-width: 110px; text-align: center; }
.settings-row.locked { opacity: 0.55; pointer-events: none; }

.lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lobby-actions .btn-primary { width: 100%; padding: 15px; font-size: 1.15rem; }
.lobby-wait { color: var(--muted); font-weight: 600; font-family: var(--font-hand); font-size: 1.25rem; }

/* ============ game ============ */

#screen-game { padding: 12px; gap: 12px; height: 100vh; max-height: 100vh; overflow: hidden; }

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--sk-sm);
  padding: 8px 16px;
  gap: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}
.game-header::before, .game-header::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 54px;
  height: 18px;
  background: rgba(255, 197, 61, 0.78);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.game-header::before { left: 18px; transform: rotate(-6deg); }
.game-header::after { right: 18px; transform: rotate(5deg); }
.hdr-left { display: flex; align-items: center; gap: 12px; }
.hdr-logo { font-family: var(--font-hand); font-weight: 700; font-size: 1.5rem; color: var(--coral); white-space: nowrap; transform: rotate(-3deg); }
.hdr-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: var(--paper);
  background: var(--ink);
  padding: 3px 10px;
  border-radius: 4px;
  transform: rotate(-2deg);
}
.hdr-round, .hdr-mode { font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem; color: var(--ink-2); white-space: nowrap; }
.hdr-mode::before { content: '·'; margin-right: 10px; opacity: 0.6; }
.hdr-word {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: 4px;
  text-align: center;
  flex: 1;
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink);
}
.hdr-word.is-word { color: var(--coral); }
.hdr-word.guessed-it { color: var(--good); }
.hdr-right { display: flex; align-items: center; gap: 10px; }
.hdr-timer {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 12px;
  box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
}
.hdr-timer.low { color: #fff; background: var(--coral); border-color: var(--ink); animation: shake 0.5s infinite; }
.hdr-teamscore { font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; }
.hdr-teamscore .ta { color: var(--coral); }
.hdr-teamscore .tb { color: var(--sky); }

.game-main {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* players: sticky notes */
.player-list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 10px 6px 6px; }
.player-card {
  --tilt: -1.4deg;
  --note: #fff3a8;
  background: var(--note);
  color: var(--ink);
  border-radius: 3px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--tilt));
  position: relative;
  transition: transform 0.2s var(--pop), box-shadow 0.2s;
}
.player-card:nth-child(2n) { --tilt: 1.3deg; --note: #d3efff; }
.player-card:nth-child(3n) { --tilt: -0.8deg; --note: #ffd9e2; }
.player-card:nth-child(4n) { --tilt: 1.8deg; --note: #d9f5e4; }
.player-card:hover { transform: rotate(0deg) scale(1.03); }
.player-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 46px;
  height: 14px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.player-card.me { outline: 2px solid var(--ink); outline-offset: -2px; }
.player-card.me::after {
  content: '';
  position: absolute;
  top: -7px;
  right: 10px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.25);
}
.player-card.drawer { box-shadow: 0 0 0 2px var(--coral), 2px 3px 7px rgba(0, 0, 0, 0.35); }
.player-card.guessed-ok { --note: #cdf5d8; }
.player-card .av { font-size: 1.6rem; }
.player-card .info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.player-card .nm { font-weight: 800; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-card .sc { font-size: 0.78rem; color: var(--ink-2); font-weight: 600; font-family: var(--font-mono); }
.player-card .badges { font-size: 0.95rem; }
.player-card.team-a { border-left: 5px solid #e63946; }
.player-card.team-b { border-left: 5px solid #00a8d8; }

/* canvas: a pinned sheet of paper */
.canvas-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: calc(100vh - 210px);
  margin: 0 auto;
}
.canvas-wrap::before, .canvas-wrap::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 64px;
  height: 20px;
  background: rgba(255, 197, 61, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 7;
  pointer-events: none;
}
.canvas-wrap::before { left: 22px; transform: rotate(-8deg); }
.canvas-wrap::after { right: 22px; transform: rotate(7deg); }
#board {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 5px 6px 0 var(--ink), 0 18px 40px rgba(0, 0, 0, 0.45);
  touch-action: none;
  display: block;
  cursor: crosshair;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 18, 25, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 22px;
}
.overlay-card {
  border-radius: var(--sk);
  padding: 28px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  max-width: 92%;
  max-height: 94%;
  overflow: auto;
  transform: rotate(-1deg);
  animation: note-in 0.5s var(--pop) both;
}
.overlay-title { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; line-height: 1.15; }
.overlay.peek { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; align-items: flex-end; padding: 12px; }
.overlay.peek .overlay-card { padding: 12px 22px; gap: 6px; transform: rotate(0); }
.overlay.peek .reveal-word { font-size: 1.7rem; }

.choose-words { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.word-btn {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.5rem;
  padding: 12px 26px;
  border-radius: var(--sk-sm);
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s var(--pop), background 0.15s;
  text-transform: capitalize;
}
.word-btn:nth-child(2n) { transform: rotate(1.5deg); }
.word-btn:nth-child(2n + 1) { transform: rotate(-1.5deg); }
.word-btn:hover { transform: rotate(0) scale(1.08); background: var(--mustard); }

.reveal-word {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--ink);
  text-transform: capitalize;
  display: inline-block;
  padding: 0 12px;
  background-image: linear-gradient(transparent 50%, var(--mustard) 50%, var(--mustard) 90%, transparent 90%);
  background-repeat: no-repeat;
  background-position: left;
  animation: swipe 0.6s 0.25s var(--pop) both;
}
.reveal-note { color: var(--teal); font-weight: 700; font-size: 0.95rem; }
.reveal-gains { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.reveal-gains .gain-pos { color: var(--good); }
.reveal-gains .gain-zero { color: var(--muted); }

.podium { display: flex; gap: 18px; align-items: flex-end; justify-content: center; }
.podium-spot { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; }
.podium-spot .pav { font-size: 2.2rem; }
.podium-spot .medal { font-size: 1.6rem; }
.podium-spot .psc { color: var(--amber); font-family: var(--font-mono); font-size: 0.9rem; }
.podium-rest { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-weight: 600; }

/* toolbar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: var(--sk-sm);
  padding: 10px 14px;
  box-shadow: 3px 3px 0 var(--ink);
}
.colors { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  cursor: pointer;
  border: 2px solid var(--ink);
  transition: transform 0.15s var(--pop);
}
.color-swatch:nth-child(2n) { border-radius: 54% 46% 50% 50% / 45% 55% 45% 55%; }
.color-swatch:hover { transform: scale(1.18) rotate(-10deg); }
.color-swatch.selected { transform: scale(1.18); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.tool-group { display: flex; gap: 6px; align-items: center; }
.sizes { display: flex; gap: 6px; align-items: center; }
.size-dot { border-radius: 50%; background: var(--ink); cursor: pointer; border: 2px solid transparent; transition: transform 0.1s; }
.size-dot:hover { transform: scale(1.2); }
.size-dot.selected { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--coral); }
.tool-btn {
  font-size: 1.1rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--sk-sm);
  padding: 5px 10px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.1s, background 0.1s;
}
.tool-btn:hover { transform: translate(-1px, -1px) rotate(-3deg); }
.tool-btn.selected { background: var(--coral); }

/* chat: a ruled notepad */
.chat-col {
  display: flex;
  flex-direction: column;
  border-radius: var(--sk-sm);
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
  min-height: 0;
  background-color: #fffcf3;
}
.chat-col::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 36px;
  width: 2px;
  background: rgba(255, 77, 109, 0.45);
  pointer-events: none;
  z-index: 1;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 12px 46px;
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  min-height: 0;
  /* ruled paper lines live on the scrolling element itself (with local
     attachment) so they scroll along with the text instead of staying
     fixed while messages scroll past them */
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(31, 27, 36, 0.12) 27px 28px);
  background-attachment: local;
  background-position: 0 14px;
}
.msg { line-height: 28px; word-wrap: break-word; }
.msg .who { font-weight: 800; color: var(--coral); }
.msg-system { color: var(--muted); font-style: italic; }
.msg-correct { color: var(--good); font-weight: 800; }
.msg-close { color: var(--amber); font-weight: 800; }
.msg-guessed { color: var(--teal); font-style: italic; }

.chat-form { display: flex; gap: 6px; padding: 10px; border-top: 2px dashed var(--line); background: var(--paper-2); }
.chat-form input { flex: 1; padding: 10px 14px; min-width: 0; }
.btn-send { padding: 8px 16px; }

/* toast: a flung sticky note */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--mustard);
  color: var(--ink);
  font-weight: 800;
  padding: 12px 24px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 3px 4px 0 var(--ink), 0 12px 30px rgba(0, 0, 0, 0.4);
  z-index: 100;
  animation: toast-in 0.35s var(--pop);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 24px) rotate(6deg); } }

/* ============ imposter mode ============ */

.settings-col { display: flex; flex-direction: column; gap: 18px; }
.settings-col.locked { opacity: 0.55; pointer-events: none; }

.mode-setting { align-items: stretch; }
.mode-setting > label { text-align: center; }
.mode-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 6px 4px 4px; }
.mode-card {
  --tilt: -2deg;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  text-align: center;
  align-items: center;
  position: relative;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(var(--tilt));
  transition: transform 0.2s var(--pop), background 0.15s, box-shadow 0.15s;
}
.mode-card:nth-child(2) { --tilt: 1.5deg; }
.mode-card:nth-child(3) { --tilt: -1deg; }
.mode-card:nth-child(4) { --tilt: 2deg; }
.mode-card:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); box-shadow: 5px 6px 0 var(--ink); }
.mode-card.selected { background: var(--mustard); border-color: var(--ink); transform: rotate(0deg) scale(1.03); }
.mode-card.selected::after {
  content: '✓';
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  position: absolute;
  top: -13px;
  right: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  transform: rotate(12deg);
}
.mode-icon { width: 46px; height: 46px; display: block; }
.mode-icon svg { width: 100%; height: 100%; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mode-name { font-family: var(--font-hand); font-weight: 700; font-size: 1.4rem; line-height: 1; margin-top: 4px; }
.mode-desc { font-size: 0.76rem; color: var(--muted); font-weight: 500; line-height: 1.35; }

.imp-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 4;
  pointer-events: none;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}
.imp-banner.my-turn { background: var(--coral); color: #fff; animation: pulse 1.2s infinite; }

.blind-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(21, 18, 25, 0.62);
  border-radius: 6px;
  pointer-events: none;
  z-index: 3;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--paper);
  text-align: center;
  padding: 20px;
}
.blind-icon { font-size: 2.4rem; }

/* ============ team draw mode ============ */

.team-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.team-col {
  background: var(--paper-2);
  border-radius: var(--sk-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  box-shadow: 3px 3px 0 var(--ink);
}
.team-col-a { border-color: #e63946; box-shadow: 3px 3px 0 #e63946; }
.team-col-b { border-color: #00a8d8; box-shadow: 3px 3px 0 #00a8d8; }
.team-col-header { font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
.team-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
.team-dot.a { background: #e63946; }
.team-dot.b { background: #00a8d8; }
.team-col-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 30px; width: 100%; }
.team-chip {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.team-shuffle-btn { grid-column: 1 / -1; justify-self: center; }

.reveal-teamscore { font-family: var(--font-mono); font-weight: 700; color: var(--ink-2); font-size: 0.95rem; }

.team-winner-banner {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.6rem;
  padding: 8px 18px;
  border-radius: var(--sk-sm);
  background: var(--mustard);
  border: 2px solid var(--ink);
  color: var(--ink);
  transform: rotate(-2deg);
}

.role-icon { font-size: 3rem; }
.role-hint { color: var(--muted); font-weight: 500; max-width: 440px; line-height: 1.45; }

.action-bar {
  border-radius: var(--sk-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  box-shadow: 3px 3px 0 var(--ink);
  animation: drop-in 0.4s var(--pop) both;
}
.action-title { font-family: var(--font-hand); font-weight: 700; font-size: 1.35rem; line-height: 1.2; text-align: center; }
.action-sub { color: var(--muted); font-weight: 600; font-size: 0.85rem; text-align: center; }
.reveal-bar-word { color: var(--coral); }
.reveal-bar-gains { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-weight: 700; }
.reveal-bar-gains .gain-pos { color: var(--good); }
.reveal-bar-gains .gain-zero { color: var(--muted); }

.vote-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.vote-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s var(--pop), background 0.15s;
}
.vote-btn:hover:not(:disabled) { transform: scale(1.06) rotate(-2deg); background: var(--mustard); }
.vote-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.vote-btn.voted { background: var(--coral); color: #fff; opacity: 1; }

.guess-form { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.guess-form input { flex: 1; min-width: 0; }

.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: baseline;
  box-shadow: 0 0 0 2px rgba(31, 27, 36, 0.35);
}

.impresult-votes { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 0.9rem; color: var(--muted); max-height: 150px; overflow-y: auto; }
.vote-line.correct { color: var(--good); }

.next-mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 2px dashed var(--line);
}
.next-mode-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gameover-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 14px; }

/* ============ responsive ============ */

@media (max-width: 900px) {
  /* the blob border-radius is tuned for a wide desktop card; at phone widths
     the same px radii eat a huge share of the corner and clip content
     (the avatar grid, buttons) near the edges, so scale it way down */
  :root {
    --sk: 32px 14px 30px 14px / 14px 30px 14px 32px;
    --sk-2: 14px 30px 14px 32px / 32px 14px 30px 14px;
  }

  .game-main { display: flex; flex-direction: column; overflow-y: auto; }
  .player-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 10px 4px 6px; }
  .player-card { min-width: 130px; flex-shrink: 0; }
  .canvas-wrap { max-height: none; }
  .chat-col { min-height: 240px; }
  .hdr-word { font-size: 1.2rem; letter-spacing: 3px; }
  .hdr-code, .hdr-mode, .hdr-logo { display: none; }
  .home-card, .lobby-card { padding: 30px 20px; transform: none; }
  .home-card::after, .lobby-card::after, .modal-card::after { inset: -5px; }
  .join-row { flex-wrap: wrap; }
  .join-row input { min-width: 0; }
  .join-row #btn-join { flex-shrink: 0; padding: 12px 18px; }
  .code-btns { flex-wrap: wrap; }
  .code-value { font-size: 2.2rem; letter-spacing: 8px; padding-left: 8px; }
  .logo { font-size: 3rem; }
  .doodle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}