:root {
  --paper: #f6f3ea;
}

body {
  padding: 0;
  background:
    /* paper grain texture */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 8px,
      rgba(0, 0, 0, 0.018) 8px,
      rgba(0, 0, 0, 0.018) 10px
    ),
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 8px,
      rgba(0, 0, 0, 0.018) 8px,
      rgba(0, 0, 0, 0.018) 10px
    ),
    radial-gradient(circle at 12% 18%, rgba(214, 205, 175, 0.28), transparent 60%),
    linear-gradient(rgba(237, 231, 210, 0.16), transparent),
    var(--paper);
  background-attachment: fixed;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 18px;
  min-height: 100vh;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.small { font-size: .8rem; }
.muted { color: var(--muted); }
.err { color: var(--danger); margin-top: 8px; }

.brand { text-align: center; }
.logo {
  font-size: 58px;
  letter-spacing: 1px;
}
.logo em { color: var(--secondary); }
.tagline {
  color: var(--muted);
  font-size: 16px;
  margin: 4px 0 0;
}

.home-card.paper { padding: 24px 26px; text-align: center; max-width: 480px; width: 100%; }
.home-actions { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }

.form-card.paper { max-width: 420px; width: 100%; text-align: left; }
.form-card h2 { margin-top: 0; }
.form-card label { color: var(--muted); }

.home-return {
  margin-top: 14px;
  font-size: 14px;
  border-top: 2px dashed var(--primary);
  padding-top: 10px;
}

.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 720px) { .lobby-grid { grid-template-columns: 1fr; } }

/* Host controls are hidden until the server confirms the viewer is admin.
   JS overrides this inline once the snapshot arrives. */
#host-panel { display: none; }

#roster { list-style: none; }
#roster li::before { content: ""; }
#roster li { text-indent: 0; }

.roster-list { margin: 0; }
.roster-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--primary-shaded-50);
}
.roster-list li:last-child { border-bottom: 0; }

.dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--primary);
}
.dot.off { background: #fff; }
.me-tag { font-size: 12px; color: var(--secondary); margin-left: auto; }

.set-row { display: flex; flex-direction: column; gap: 14px; }
.twist-checks { display: flex; flex-direction: column; gap: 6px; }

.twist-check { cursor: pointer; display: block; margin-bottom: .5rem; }
.twist-check input {
  border: 0; height: 1px; margin: -1px;
  opacity: 0; overflow: hidden; padding: 0;
  position: absolute; width: 1px;
}
.twist-check input + span { display: block; }
.twist-check input + span::before {
  border: 2px solid var(--primary);
  content: "";
  display: inline-block;
  height: 1rem;
  margin-right: .75em;
  position: relative;
  vertical-align: -.25em;
  width: 1rem;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
}
.twist-check input:checked + span::before {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230b74d5' stroke-width='4' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.start-row { margin-top: 14px; }

/* dev/test admin panels (not part of the real game UI) */
.admin-test-panel { margin-top: 4px; }
.test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kick-row { display: flex; gap: 8px; align-items: flex-end; }
.kick-row select { flex: 1; }

/* floating twist-trigger panel on the game screen (draw phase) */
.admin-test-float {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 130;
  background: var(--paper);
  border: 2px dashed var(--danger);
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  padding: 10px 12px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4);
  max-width: 320px;
}
.admin-test-float .admin-test-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--danger);
  margin-bottom: 8px;
}
.admin-test-float .dur-label { font-weight: 400; text-transform: none; font-size: .75rem; }
.admin-test-float .dur-label input { width: 52px; padding: 2px 4px; }
.admin-test-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- game ---------- */
.topbar {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 40;
}
.gm-clock { font-variant-numeric: tabular-nums; }
.gm-clock.hurried { background: var(--danger); color: #fff; }

.view {
  display: none;
  margin-top: 14px;
}
.view.on { display: block; }

.vote-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .vote-options { grid-template-columns: 1fr; } }
.vote-option {
  padding: 20px 16px;
  margin: 0;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.vote-option .letter {
  display: inline-block;
  width: 30px; height: 30px; line-height: 30px;
  text-align: center;
  border: 2px solid var(--primary);
  background: #fff;
  font-weight: 700;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
}
.vote-option.selected { background: var(--secondary); color: #fff; border-color: var(--secondary); }
.vote-option .tally { font-size: .8rem; color: var(--muted); }

.reveal-prompt {
  text-align: center;
  font-size: 2rem;
  padding: 30px;
  background: #fff;
  transform: rotate(-1deg);
}

.draw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.prompt-chip { display: inline-block; background: #fff; padding: 4px 14px; font-size: 1.1rem; }

.draw-stage {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.canvas-shell {
  flex: 1;
  min-width: 0;
  padding: 10px;
  background: #fff;
  overflow: auto;
}
.draw-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  touch-action: none;
}
.zoom-stage {
  width: 100%;
  transform-origin: 0 0;
}

.draw-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 200px;
  flex-shrink: 0;
}
.tool { font-size: .9rem; padding: .5rem .9rem; margin: 0; }
.tool.active { background: var(--primary); color: #fff; }

.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border: 2px solid var(--primary);
  cursor: pointer;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
}
.swatch.active { outline: 3px solid var(--secondary); outline-offset: 2px; }
.draw-status { font-size: .85rem; color: var(--muted); }

.brush-row { display: flex; align-items: center; gap: 8px; }
.brush-row input[type="range"] { flex: 1; width: auto; min-width: 0; }

@media (max-width: 720px) {
  .draw-stage { flex-direction: column; }
  .draw-tools {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .draw-tools .swatches { flex: 1; }
}

.judge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.judge-art {
  text-align: center;
  width: 100%;
  padding: 14px;
  background: #fff;
}
.judge-art img { margin: 0 auto; }
.score-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.score-btn {
  aspect-ratio: 1 / 1;
  padding: 0; margin: 0;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  line-height: 1;
}
.score-btn.selected { background: var(--secondary); color: #fff; border-color: var(--secondary); }

.winner-title { text-align: center; color: var(--secondary); }
.winner-art { text-align: center; padding: 8px; }
.winner-art img { margin: 0 auto; }
.winner-name {
  text-align: center;
  transform: rotate(-2deg);
}
.results { width: 100%; margin-top: 8px; }
.results .top { font-weight: 700; background: #efe7cf; }

#toast-inline {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid var(--primary);
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  padding: 12px 22px;
  box-shadow: 0 12px 25px -12px rgba(0, 0, 0, .35);
  text-align: center;
  pointer-events: none;
  z-index: 130;
  transition: opacity .3s;
}

.conn-strip {
  position: fixed;
  left: 16px; top: 12px;
  background: var(--secondary);
  color: #fff;
  padding: 8px 16px;
  font-size: .9rem;
  border: 2px solid var(--secondary);
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35);
  z-index: 120;
  display: none;
}
.twist-banner {
  position: fixed;
  left: 50%; bottom: 120px;
  transform: translate(-50%, 0) rotate(-2deg);
  background: var(--danger);
  color: #fff;
  padding: 16px 30px;
  border: 3px solid var(--primary);
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .4);
  font-size: 1.3rem;
  text-align: center;
  z-index: 110;
  display: none;
}
.twist-banner small { display: block; font-size: .7rem; margin-top: 4px; }

.draw-canvas.upside { transform: rotate(180deg); }

.draw-canvas.bw { filter: grayscale(1); }

@keyframes canvas-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.draw-canvas.rotating {
  animation: canvas-spin 18s linear infinite;
  will-change: transform;
}

@keyframes tools-run {
  0%   { left: 30%; top: 62%; transform: rotate(-3deg); }
  12%  { left: 62%; top: 48%; transform: rotate(3deg); }
  25%  { left: 40%; top: 34%; transform: rotate(-4deg); }
  37%  { left: 58%; top: 30%; transform: rotate(3deg); }
  50%  { left: 66%; top: 55%; transform: rotate(-3deg); }
  62%  { left: 45%; top: 38%; transform: rotate(4deg); }
  75%  { left: 34%; top: 48%; transform: rotate(-3deg); }
  87%  { left: 52%; top: 62%; transform: rotate(3deg); }
  100% { left: 30%; top: 62%; transform: rotate(0deg); }
}
.draw-tools.scared {
  position: fixed;
  z-index: 105;
  width: 200px;
  background: var(--paper);
  padding: 10px;
  border: 2px dashed var(--danger);
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  animation: tools-run 9s linear infinite;
  will-change: left, top, transform;
}

@keyframes canvas-wander {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30px, -24px); }
  50%  { transform: translate(-28px, 20px); }
  75%  { transform: translate(20px, 30px); }
  100% { transform: translate(0, 0); }
}
#canvas-shell.wandering {
  animation: canvas-wander 4s ease-in-out infinite;
  will-change: transform;
}

.paper-lines {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 22px,
      rgba(27, 27, 27, 0.04) 23px,
      transparent 24px
    );
}
@media (prefers-reduced-motion: no-preference) {
  .paper-lines { opacity: 0.5; }
}

/* =============================================================
   Hand-crafted torn paper collage theme additions
   ============================================================ */

/* ---------- 2. paper card upgrades ---------- */
.paper {
  background-color: #f8f8f8;
  position: relative;
  box-shadow: none;
  filter:
    drop-shadow(0 22px 12px rgba(42, 37, 44, 0.04))
    drop-shadow(0 14px 8px rgba(42, 37, 44, 0.10))
    drop-shadow(0 6px 6px rgba(42, 37, 44, 0.16))
    drop-shadow(0 2px 4px rgba(42, 37, 44, 0.20));
}

/* torn top edge — jagged pseudo-element (jagged upward, flat bottom) */
.paper::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16'%3E%3Cpolygon fill='%23f8f8f8' points='0,2 8,13 16,3 24,12 32,4 40,15 48,5 56,11 64,3 72,14 80,5 88,12 96,3 104,15 112,6 120,11 128,2 136,14 144,4 152,12 160,3 168,15 176,6 184,13 192,4 200,12 208,5 216,14 224,3 232,13 240,2 240,16 0,16'/%3E%3C/svg%3E") repeat-x;
  background-size: 240px 16px;
}

/* torn bottom edge (flat top, jagged downward) */
.paper::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16'%3E%3Cpolygon fill='%23f8f8f8' points='0,14 8,3 16,13 24,4 32,12 40,1 48,11 56,5 64,13 72,2 80,12 88,4 96,14 104,2 112,10 120,5 128,14 136,3 144,12 152,4 160,13 168,1 176,11 184,3 192,13 200,4 208,12 216,2 224,13 232,4 240,14 240,0 0,0'/%3E%3C/svg%3E") repeat-x;
  background-size: 240px 16px;
}

/* ---------- 3. organic rotation utility classes ---------- */
.tilt-left  { transform: rotate(-1.5deg); }
.tilt-right { transform: rotate(1.8deg); }

/* ---------- 4. drop-shadow on overlays & popups ---------- */
#toast-inline {
  box-shadow: none;
  filter:
    drop-shadow(0 19px 8px rgba(42, 37, 44, 0.02))
    drop-shadow(0 11px 6px rgba(42, 37, 44, 0.08))
    drop-shadow(0 5px 5px rgba(42, 37, 44, 0.13))
    drop-shadow(0 1px 3px rgba(42, 37, 44, 0.15));
}
.conn-strip,
.twist-banner {
  box-shadow: none;
  filter:
    drop-shadow(0 19px 8px rgba(42, 37, 44, 0.02))
    drop-shadow(0 11px 6px rgba(42, 37, 44, 0.08))
    drop-shadow(0 5px 5px rgba(42, 37, 44, 0.13))
    drop-shadow(0 1px 3px rgba(42, 37, 44, 0.15));
}

/* ---------- 5. hand-drawn text highlights ---------- */
.hand-highlight {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M5,30 Q30,10 60,25 T120,20 T175,28' fill='none' stroke='%23f6dc5a' stroke-width='18' opacity='0.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  color: inherit;
  padding: 0 0.3em;
  font-style: normal;
}

/* ---------- 6. hand-drawn underline on nav links & primary buttons ---------- */
.topbar a {
  position: relative;
}
.topbar a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Cpath d='M1,3 Q25,0 50,3 T100,3' fill='none' stroke='%230b74d5' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 50px 6px;
  pointer-events: none;
}

/* ---------- 7. hand-drawn bullet points ---------- */
.hand-bullets {
  list-style: none;
}
.hand-bullets li::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%2341403e' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: middle;
}

/* ---------- 8. floating background doodles ---------- */
#bg-doodles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#bg-doodles img {
  position: absolute;
  opacity: 0.12;
  width: 70px;
  height: auto;
  border: none;
  border-radius: 0;
}
#bg-doodles img:nth-child(1)  { top: 6%;  left: 4%;   transform: rotate(-15deg);  width: 60px; }
#bg-doodles img:nth-child(2)  { top: 8%;  right: 6%;  transform: rotate(22deg);   width: 75px; }
#bg-doodles img:nth-child(3)  { top: 22%; left: 1%;   transform: rotate(10deg);   width: 50px; }
#bg-doodles img:nth-child(4)  { top: 30%; right: 2%;  transform: rotate(-18deg);  width: 65px; }
#bg-doodles img:nth-child(5)  { top: 45%; left: 3%;   transform: rotate(-25deg);  width: 55px; }
#bg-doodles img:nth-child(6)  { top: 50%; right: 4%;  transform: rotate(15deg);   width: 70px; }
#bg-doodles img:nth-child(7)  { top: 65%; left: 2%;   transform: rotate(-8deg);   width: 60px; }
#bg-doodles img:nth-child(8)  { top: 70%; right: 1%;  transform: rotate(30deg);   width: 50px; }
#bg-doodles img:nth-child(9)  { top: 82%; left: 5%;   transform: rotate(-20deg);  width: 65px; }
#bg-doodles img:nth-child(10) { top: 88%; right: 5%;  transform: rotate(12deg);   width: 55px; }
#bg-doodles img:nth-child(11) { top: 28%; left: 88%;  transform: rotate(-5deg);   width: 45px; }
#bg-doodles img:nth-child(12) { top: 75%; left: 90%;  transform: rotate(18deg);   width: 50px; }

/* ---------- 9. wandering background duck ---------- */
#duck-walker {
  position: fixed;
  left: 0;
  z-index: 90;
  pointer-events: none;
  will-change: transform;
  display: none;
}
#duck-walker img {
  display: block;
  width: auto;
  height: 140px;
  border: 0; /* PaperCSS gives every img an ink border — drop it */
  animation: duck-bob 0.55s ease-in-out infinite;
}
@keyframes duck-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-5px) rotate(1.5deg); }
}