/* ==========================================================
   SigilBound · Plancia di gioco (checkpoint 3)
   ========================================================== */
.board-screen { display: grid; gap: 14px; }

.board-hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg); padding: 12px 16px;
}
.board-hud .who { font-weight: 600; color: var(--gold); }
.timer {
  font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: #EFE7DC;
  background: #140F0D; border: 1px solid rgba(232,203,148,.28); border-radius: 999px; padding: 4px 14px;
}
.timer.warn { color: var(--ember); border-color: rgba(228,135,58,.55); }
.timer.danger { color: var(--blood); border-color: rgba(229,100,88,.6); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .timer.danger { animation: none } }
.board-hud .spacer { flex: 1; }

.res { display: flex; gap: 8px; flex-wrap: wrap; }
.res span {
  font-size: 12.5px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 5px 11px;
}

.side {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg); padding: 14px;
}
.side.foe { border-color: rgba(229,100,88,.22); }
.side h4 { margin: 0 0 10px; font-size: 13px; color: #A69C93; text-transform: uppercase; letter-spacing: .08em; }

.bonfires { display: flex; gap: 10px; margin-bottom: 12px; }
.bf {
  flex: 1; text-align: center; padding: 10px; border-radius: var(--r);
  background: radial-gradient(80% 100% at 50% 0%, rgba(228,135,58,.25), transparent 70%), #140F0D;
  border: 1px solid rgba(228,135,58,.3); font-size: 13px;
}
.bf.out { opacity: .35; filter: grayscale(1); border-color: rgba(255,255,255,.1); }
.bf b { display: block; font-size: 17px; color: var(--ember); }

.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slots.rituals { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.slot {
  position: relative;
  min-height: 104px; border-radius: 12px; padding: 8px; font-size: 12px; text-align: center;
  border: 1px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.02);
  display: grid; place-content: center; gap: 4px; color: #8B827B; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.slot:hover, .slot:focus-visible { border-color: rgba(232,203,148,.45); transform: translateY(-2px); }
.slot.filled {
  border-style: solid; color: #EFE7DC; cursor: default;
  background: linear-gradient(180deg, #1D1714, #15100E); border-color: rgba(232,203,148,.3);
}
.slot.filled.ready { border-color: rgba(114,188,143,.5); box-shadow: 0 0 0 1px rgba(114,188,143,.2) inset; }
.slot.filled.sick { opacity: .75; }
.slot.covered { background: repeating-linear-gradient(45deg, #171210, #171210 8px, #1D1714 8px, #1D1714 16px); }
.slot .nm { font-weight: 600; font-size: 12.5px; line-height: 1.25; }
.slot .st { color: #C9BCA9; font-size: 12px; }
.slot .tagline { font-size: 10.5px; color: #8B827B; }
.slot.target { border-color: var(--blood); }

.hand { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.hcard {
  flex: 0 0 132px; text-align: left; cursor: pointer; padding: 10px; border-radius: 12px;
  background: linear-gradient(180deg, #1F1916, #15100E); border: 1px solid rgba(232,203,148,.2);
  transition: transform .15s ease, border-color .15s ease;
}
.hcard:hover, .hcard:focus-visible { transform: translateY(-5px); border-color: rgba(232,203,148,.5); }
.hcard.selected { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember) inset; }
.hcard h5 { margin: 0 0 6px; font-size: 12.5px; color: #F2E9DC; }
.hcard .meta { font-size: 11px; color: #9A9089; }

.board-log {
  max-height: 140px; overflow: auto; font-size: 12.5px; color: #A69C93; line-height: 1.7;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r); padding: 10px 14px;
}
.board-log b { color: var(--gold); }

.board-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.emoji-wheel { display: flex; gap: 6px; flex-wrap: wrap; }
.emoji-wheel button {
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.emoji-wheel button:disabled { opacity: .4; cursor: not-allowed; }

.coin-flip { text-align: center; padding: 26px 10px; }
.coin {
  width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3D79C, #A9762C);
  display: grid; place-items: center; font-size: 34px; color: #2A1B08;
  animation: spin 1.1s ease-out; box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
@keyframes spin { from { transform: rotateY(0) scale(.7) } to { transform: rotateY(1080deg) scale(1) } }
@media (prefers-reduced-motion: reduce) { .coin { animation: none } }

.dice {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 14px;
  background: linear-gradient(180deg, #24201C, #15100E); border: 1px solid rgba(232,203,148,.35);
  display: grid; place-items: center; font-size: 32px; color: var(--gold);
}

.result-banner {
  text-align: center; padding: 26px; border-radius: var(--r-lg);
  border: 1px solid rgba(232,203,148,.3); background: linear-gradient(180deg, #1D1714, #12100E);
}
.result-banner h3 { margin: 0 0 6px; font-size: 24px; color: var(--gold); }
.result-banner.lose h3 { color: var(--blood); }

@media (max-width: 760px) {
  .slots { grid-template-columns: repeat(2, 1fr); }
  .slots.rituals { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .hcard { flex-basis: 118px; }
  .timer { font-size: 17px; }
}

/* ---------- Plancia 3D e jumpscare (checkpoint 4) ---------- */
.board3d {
  border-radius: 16px; overflow: hidden; min-height: 0;
  border: 1px solid rgba(232,203,148,.16);
  background: radial-gradient(70% 90% at 50% 20%, rgba(228,135,58,.12), #0B0908 70%);
}
.board3d:empty { display: none; }
.board3d canvas { display: block; width: 100%; height: auto; }

.jumpscare {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgba(0,0,0,.92); animation: jsIn .12s ease-out;
}
.jumpscare span { font-size: min(46vw, 320px); animation: jsPop .4s ease-out; }
@keyframes jsIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes jsPop { from { transform: scale(.4) rotate(-8deg) } to { transform: scale(1) rotate(0) } }
@media (prefers-reduced-motion: reduce) { .jumpscare span { animation: none } }

.lobby-code {
  font-size: 30px; letter-spacing: .22em; font-variant-numeric: tabular-nums;
  color: var(--gold); text-align: center; margin: 10px 0;
}
.peer-badge {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(114,188,143,.45); color: var(--green);
}
.peer-badge.off { border-color: rgba(229,100,88,.45); color: var(--blood); }

/* Dorsi e falò reali sulla plancia 2D */
.slot.covered { padding: 0; overflow: hidden; }
.slot .slot-back {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  opacity: .92;
}
.slot.covered .tagline {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}
.bf { position: relative; }
.bf img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  margin: 0 auto 2px;
  filter: drop-shadow(0 0 8px rgba(228, 135, 58, .55));
}
.bf.out img { filter: grayscale(1) brightness(.45); }