/* A quieter paper surface keeps the handmade illustrations and game pieces in focus. */
:root {
  --taste-line: #d8b8b2;
  --taste-shadow: #e6cbc7;
  --taste-ink: #694d4b;
}

body {
  background:
    radial-gradient(circle at 8% 14%, #fce7eb 0, transparent 28%),
    radial-gradient(circle at 92% 56%, #e6f3ef 0, transparent 30%),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(117, 153, 151, .045) 35px 36px),
    repeating-linear-gradient(90deg, transparent 0 35px, rgba(117, 153, 151, .045) 35px 36px),
    #e4f1ef;
}

.panel, .modal {
  border-color: var(--taste-line);
  box-shadow: 0 4px 0 var(--taste-shadow), 0 12px 26px rgba(102, 74, 76, .09);
}

.lobby-title {
  border-color: #caa7a5;
  box-shadow: 0 4px 0 var(--taste-shadow);
}

.page-title p, .subtle { color: #796662; }

.ticket, .tab, .text-button {
  border-color: #846760;
  box-shadow: 0 3px 0 #d1aaa8, 0 7px 13px rgba(102, 74, 76, .10);
}
.ticket.secondary { box-shadow: 0 3px 0 #accbc9; }
.ticket.mint { box-shadow: 0 3px 0 #a8cbb7; }
.ticket:hover, .tab:hover, .text-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #d1aaa8, 0 9px 15px rgba(102, 74, 76, .12);
}
.ticket:active, .tab:active, .text-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #d1aaa8;
}
.ticket:focus-visible, .tab:focus-visible, .text-button:focus-visible,
.map-filter:focus-visible, .library-card summary:focus-visible,
.board .square:focus-visible, .info-disclosure summary:focus-visible {
  outline: 3px solid #a45172;
  outline-offset: 3px;
}

.launch-block .ready-steps { gap: 7px; }
.ready-steps span { background: #fffaf5; }
.ready-steps span.done { background: #ebf5ed; }
.launch-note { max-width: 30ch; }

.library-heading h2 { margin-bottom: 5px; }
.library-heading .subtle { line-height: 1.5; }
.tabs { margin-bottom: 16px; }
.tab { box-shadow: 0 2px 0 #e5ccc3; }
.tab.active { box-shadow: 0 2px 0 #c997a0; }
.map-filter { border-color: #d1b9b0; background: #fffaf6; }
.map-filter.active { background: #f5d4db; border-color: #ad818b; box-shadow: 0 2px 0 #dbb5ba; }
.card-list { gap: 9px; }
.library details.library-card {
  border: 1.5px solid #dcc3bc;
  border-radius: 13px;
  background: #fffaf5;
  box-shadow: 0 2px 0 #ecd8d1;
}
.library details.library-card.chance { background: #fff7f8; }
.library details.library-card.punishment { background: #f7faf6; }
.library details.library-card[open] {
  border-color: #c792a1;
  box-shadow: 0 3px 0 #e5c5cc;
}
.library-card summary { min-height: 57px; }
.card-number { color: #a87e82; }
.card-summary-title small { border: 1px solid #f0e2db; }
.card-body { background: rgba(255, 255, 255, .43); }

.board-prize {
  border: 1.5px solid #e4bbc5;
  background: #fff2f1;
}
.board-panel .board {
  border: 1.5px dashed #d2b6aa;
  background: radial-gradient(circle at center, #fff6e5 0 18%, transparent 55%), #fffdf8;
}
.board .square {
  border-color: #cdb3ad;
  box-shadow: 0 2px 0 #e4d0c8;
}
.board .square.current {
  border-color: #a65b75;
  box-shadow: 0 0 0 2px #f7d3dd, 0 2px 0 #d8adb7;
}
.board .square h3 { color: var(--taste-ink); }
.board .square-number { color: #925f70; }
.preview-panel { padding-block: 20px; }
.preview-panel .preview-bunny { max-width: 100%; }

@media (max-width: 700px) {
  body.has-mobile-action .lobby-actions [data-action="start"],
  body.has-mobile-action .lobby-actions [data-action="preview"] { display: none; }
  body.has-mobile-action .turn-panel > .row,
  body.has-mobile-action .turn-panel > .ticket[data-action="roll"] { display: none; }
  .mobile-action-bar, .mobile-lobby-bar {
    border-top-color: #cfadb0;
    box-shadow: 0 -5px 18px rgba(102, 74, 76, .10);
  }
}

@media (max-width: 580px) {
  .lobby-title { margin-bottom: 16px; }
  .lobby-grid { gap: 16px; }
  .panel { padding: 16px; }
  .launch-note { margin-top: 11px; }
  .library-card summary { min-height: 56px; }
  .board-panel { padding: 9px; }
  .board-panel .board { gap: 4px; padding: 4px; }
  .board .square { border-radius: 9px; box-shadow: 0 2px 0 #e4d0c8; }
  .board .square h3 { font-size: clamp(10px, 3vw, 12px); line-height: 1.18; }
  .board .special-square h3 { font-size: clamp(13px, 3.5vw, 15px); }
  .board .square-number { font-size: 8px; }
  .preview-panel { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ticket, .tab, .text-button, .library-card .card-expand { transition-duration: .01ms; }
}