:root {
  --chalk-white: #f5f2e7;
  --chalk-yellow: #f3d976;
  --chalk-green: #a6dfab;
  --chalk-blue: #92d4dc;
  --chalk-orange: #efa97c;
  --chalk-pink: #e99cb5;
  --chalk-purple: #b9b1e3;
  --chalk-dim: rgba(245, 242, 231, 0.42);
  --board-bg: #173d32;
  --wood-border: #755036;
  --wood-inner: #32251b;
  --bg-color: #111613;
  --card-bg: #173d32;
  --text-color: #f5f2e7;
  --text-muted: #aec5b5;
  --accent-color: #f3d976;
  --border-color: rgba(245, 242, 231, 0.22);
  --frame-color: #755036;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.36), inset 0 0 32px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] {
  --board-bg: #171d1a;
  --wood-border: #53402f;
  --wood-inner: #282018;
  --bg-color: #101311;
  --card-bg: #171d1a;
}

body {
  background-color: #111613;
  background-image:
    radial-gradient(ellipse at 16% 0%, rgba(119, 172, 118, 0.15), transparent 42%),
    radial-gradient(ellipse at 90% 100%, rgba(224, 163, 105, 0.08), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 13px);
  background-attachment: fixed;
}

.board-frame {
  background: linear-gradient(145deg, #89613f, var(--wood-border) 42%, #4c3626);
  border-color: var(--wood-inner);
  box-shadow: 0 24px 68px rgba(0, 0, 0, 0.52), inset 0 0 0 2px rgba(240, 199, 143, 0.14);
}

.board-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(245, 220, 183, 0.22);
  border-radius: 6px;
  pointer-events: none;
}

.blackboard {
  position: relative;
  isolation: isolate;
  border-color: rgba(245, 242, 231, 0.2);
  background-color: var(--board-bg);
  background-image:
    radial-gradient(ellipse at 18% 0%, rgba(159, 210, 159, 0.1), transparent 48%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.24), transparent 55%),
    linear-gradient(rgba(245, 242, 231, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 242, 231, 0.018) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.24);
  animation: board-arrive 420ms ease-out both;
}

.drawing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

.drawing-toolbox {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
  padding: 12px 16px 0;
  background: linear-gradient(180deg, #392a1d, #2b1e15);
  border: 3px solid #725137;
  border-radius: 17px 17px 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 18px rgba(0,0,0,0.18);
  perspective: 1000px;
}

.case-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 4vw, 50px);
  min-height: 218px;
  padding: 0 10px 12px;
}

.instrument-case {
  position: relative;
  flex: 0 1 250px;
  height: 202px;
  isolation: isolate;
  perspective: 900px;
}

.instrument-case.geometry-case {
  flex-basis: 300px;
}

.case-base {
  position: absolute;
  inset: auto 0 4px;
  height: 112px;
  overflow: hidden;
  border: 3px solid #11151c;
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), transparent 17%),
    linear-gradient(145deg, #3b4656, #10151d 68%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.28),
    inset 0 -8px 0 rgba(0,0,0,0.35),
    0 9px 0 #19120d,
    0 14px 18px rgba(0,0,0,0.35);
  z-index: 1;
}

.pencil-case .case-base {
  border-color: #1975a9;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.38), transparent 20%),
    linear-gradient(145deg, #57c8f4, #1483bd 72%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.4),
    inset 0 -8px 0 rgba(0,76,125,0.35),
    0 9px 0 #14577d,
    0 14px 18px rgba(0,0,0,0.35);
}

.case-interior {
  position: absolute;
  inset: 9px 9px 34px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 5px;
  padding: 8px;
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,0.05) 46px 49px),
    linear-gradient(180deg, #121923, #27313b);
  box-shadow: inset 0 4px 9px rgba(0,0,0,0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.pencil-case .case-interior {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,0.2) 46px 49px),
    linear-gradient(180deg, #075b91, #113b65);
}

.instrument-case.is-open .case-interior {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.case-tool {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 42px;
  min-height: 65px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(0,0,0,0.18));
  color: #f5f2e7;
  cursor: pointer;
  font-family: var(--font-chalk-hand);
  box-shadow: inset 0 1px rgba(255,255,255,0.2), 0 3px 3px rgba(0,0,0,0.28);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.case-tool > span {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.35));
}

.case-tool small {
  font-size: 0.88rem;
}

.case-tool.active {
  border-color: var(--chalk-yellow);
  background: linear-gradient(145deg, rgba(243,217,118,0.33), rgba(0,0,0,0.14));
  transform: translateY(-3px);
}

.case-front {
  position: absolute;
  inset: auto 0 0;
  height: 28px;
  display: grid;
  place-items: center;
  border-top: 2px solid rgba(255,255,255,0.2);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.2));
  color: rgba(255,255,255,0.9);
  font: 700 0.8rem var(--font-chalk-hand);
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  z-index: 2;
}

.case-lid {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 85px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 3px solid #121720;
  border-radius: 9px 9px 5px 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), transparent 18%),
    linear-gradient(145deg, #627084, #252e3c 63%, #121821);
  color: #f5f2e7;
  cursor: pointer;
  font-family: var(--font-chalk-hand);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.25), 0 5px 0 #10151b;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 160ms ease;
  z-index: 3;
}

.pencil-case .case-lid {
  border-color: #1673a5;
  background:
    radial-gradient(circle at 78% 25%, rgba(255,255,255,0.34) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255,255,255,0.45), transparent 20%),
    linear-gradient(145deg, #68d7ff, #1e9cd5 65%, #1171ac);
  color: #063859;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.45), 0 5px 0 #125477;
}

.case-lid-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.pencil-case .case-lid-title {
  text-shadow: 0 1px rgba(255,255,255,0.35);
}

.case-lid-art {
  font-size: 1.35rem;
  letter-spacing: 0.4em;
  opacity: 0.82;
}

.case-hinge {
  position: absolute;
  bottom: -7px;
  left: 8%;
  right: 8%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d7dce3, #667080 50%, #27303d);
  box-shadow: 0 2px 3px rgba(0,0,0,0.45);
}

.instrument-case.is-open .case-lid {
  transform: rotateX(112deg);
  filter: brightness(0.85);
}

.instrument-case.is-open .case-hinge {
  opacity: 0.7;
}

.tool-clear {
  align-self: center;
  margin-left: auto;
  border: 2px solid rgba(255,255,255,0.22);
  background: linear-gradient(180deg, rgba(174, 204, 175, 0.12), rgba(96, 126, 102, 0.22));
  color: var(--chalk-white);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font: 1rem var(--font-chalk-hand);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 0 rgba(0,0,0,0.18);
}

.chalk-tray.drawing-chalk-tray {
  height: auto;
  min-height: 32px;
  padding: 6px 20px;
  gap: 12px;
  border-top-color: #765236;
  background: linear-gradient(180deg, #62432d, #392618);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.36);
}

.chalk-stick {
  width: 52px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--swatch) 75%, white), var(--swatch) 55%, color-mix(in srgb, var(--swatch) 75%, #71634b));
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.45), 0 2px 3px rgba(0,0,0,0.32);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.chalk-stick.active {
  box-shadow: 0 0 0 2px #d62f2f, inset 0 1px 2px rgba(255,255,255,0.45), 0 2px 3px rgba(0,0,0,0.32);
  transform: translateY(-2px);
}

.case-lid:hover,
.case-tool:hover,
.tool-clear:hover,
.chalk-stick:hover {
  filter: brightness(1.08);
}

@media (max-width: 620px) {
  .drawing-toolbox {
    padding: 10px 10px 0;
  }

  .case-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .instrument-case,
  .instrument-case.geometry-case {
    flex: 1 1 220px;
    max-width: 300px;
  }

  .tool-clear {
    margin: 0 auto 8px;
  }

  .chalk-tray.drawing-chalk-tray {
    justify-content: center;
    padding-inline: 12px;
  }

  .chalk-stick {
    width: clamp(30px, 10vw, 52px);
  }
}

.blackboard::before {
  background: repeating-radial-gradient(circle at 37% 24%, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  opacity: 0.22;
  z-index: -1;
}

header {
  border-bottom: 1px solid rgba(245, 242, 231, 0.2);
}

.brand {
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.brand-icon {
  background-image: url("../../favicon.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 7px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.36);
}

:is(.eraser-btn, .toggle-btn, .action-btn, .move-btn, .modal-btn, .close-modal-btn, .vote-btn, .btn) {
  border-radius: 5px;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

:is(.eraser-btn, .toggle-btn, .action-btn, .move-btn, .modal-btn, .close-modal-btn, .vote-btn, .btn):not(:disabled):hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

:is(button, a, input, select):focus-visible {
  outline: 2px solid var(--chalk-yellow);
  outline-offset: 3px;
}

:is(.player-box, .gesture-display, .status-banner, .status-panel, .scoreboard, .phase-box, .game-card, .modal-card) {
  border-radius: 6px;
}

.player-box,
.gesture-display,
.status-banner,
.status-panel,
.scoreboard,
.phase-box,
.game-card {
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 8px 22px rgba(0, 0, 0, 0.12);
}

.room-input,
input,
select,
textarea {
  accent-color: var(--chalk-green);
}

.chalk-tray {
  background: linear-gradient(#79573a, #503923);
  border-color: #382719;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}

.chalk-piece {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.48);
}

/* Thief & Police uses a lobby layout instead of the framed board markup. */
.game-card {
  border-color: var(--frame-color);
  background-image: radial-gradient(ellipse at 15% 0%, rgba(159, 210, 159, 0.08), transparent 55%);
}

.lobby-box,
.player-item,
.card-reveal-box,
.vote-btn {
  border-radius: 5px;
}

.player-item {
  border-style: solid;
  border-color: rgba(245, 242, 231, 0.17);
}

.action-btn,
.vote-btn,
.btn {
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
}

.action-btn:active,
.vote-btn:active,
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

@keyframes board-arrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .board-frame { padding: 7px; border-width: 4px; }
  .blackboard { background-size: auto, auto, 28px 28px, 28px 28px; }
  .brand { font-size: 1.15rem; }
  header { gap: 10px; flex-wrap: wrap; }
  .controls-right { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}