:root {
  --gold: #c9a227; --blue: #2f6db3; --bg: #14100b; --card: #241d14;
  --ink: #f2e8d5; --dim: #a89880;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 100vh; display: flex; justify-content: center;
}
#app { width: 100%; max-width: 1100px; padding: 24px; }
.screen.hidden, .hidden { display: none !important; }
.screen { text-align: center; }
.screen.wide { text-align: left; }
h1 { font-size: 3rem; margin: 0.5em 0 0.1em; color: var(--gold); letter-spacing: 2px; }
.tagline { color: var(--dim); font-style: italic; margin-bottom: 2em; }
.row { margin: 12px 0; display: flex; gap: 8px; justify-content: center; }
input {
  padding: 12px 16px; font-size: 1rem; border-radius: 8px;
  border: 1px solid #4a3f30; background: var(--card); color: var(--ink);
  font-family: inherit;
}
input.code-input { width: 130px; text-transform: uppercase; text-align: center; }
button {
  padding: 12px 24px; font-size: 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid #4a3f30; background: var(--card); color: var(--ink);
  font-family: inherit;
}
button.primary { background: var(--gold); color: #1a1408; border: none; font-weight: bold; }
button:hover { filter: brightness(1.15); }
.hint { color: var(--dim); font-size: 0.9rem; }
.code { color: var(--gold); letter-spacing: 4px; font-size: 1.4em; }

.teams { display: flex; gap: 16px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.team {
  flex: 1; min-width: 220px; max-width: 320px; border-radius: 12px;
  padding: 16px; background: var(--card);
}
.team-gold { border: 2px solid var(--gold); }
.team-blue { border: 2px solid var(--blue); }
.team h3 { margin-top: 0; }
.team ul { list-style: none; padding: 0; min-height: 60px; }
.team li { padding: 4px 0; }
.team li .star { color: var(--gold); }
.role-toggle { display: block; margin: 16px 0; font-size: 1.05rem; }

#status-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--card); border-radius: 10px; margin-bottom: 12px;
  font-size: 1.1rem;
}
#turn-banner.gold { color: var(--gold); font-weight: bold; }
#turn-banner.blue { color: #7fb0e8; font-weight: bold; }

#clue-area {
  text-align: center; padding: 14px; margin-bottom: 12px; border-radius: 10px;
  background: #1d1710; font-size: 1.25rem; min-height: 58px;
}
#clue-area .clue-num {
  display: inline-block; background: var(--gold); color: #1a1408;
  border-radius: 50%; width: 34px; height: 34px; line-height: 34px;
  font-weight: bold; margin-left: 10px;
}

#board {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.painting {
  position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
  border: 3px solid transparent; cursor: pointer; padding: 0; background: #000;
}
.painting img { width: 100%; height: 100%; object-fit: cover; display: block; }
.painting.guessable:hover { border-color: #fff; }
/* storyteller key */
.painting.k-gold { border-color: var(--gold); }
.painting.k-blue { border-color: var(--blue); }
.painting.k-neutral { border-color: #6b6259; }
.painting.k-deceiver { border-color: #c0392b; }
/* revealed */
.painting.r-gold::after, .painting.r-blue::after,
.painting.r-neutral::after, .painting.r-deceiver::after {
  content: ''; position: absolute; inset: 0;
}
.painting.r-gold::after { background: rgba(201,162,39,.55); }
.painting.r-blue::after { background: rgba(47,109,179,.55); }
.painting.r-neutral::after { background: rgba(107,98,89,.6); }
.painting.r-deceiver::after { background: rgba(192,57,43,.65); }
.painting.r-deceiver { border-color: #c0392b; }
.painting:disabled { cursor: default; }

#clue-form { display: flex; gap: 8px; margin-top: 14px; justify-content: center; }
#clue-text { flex: 1; max-width: 420px; }
#clue-count { width: 70px; text-align: center; }
#btn-pass { margin-top: 12px; }

#winner-banner {
  text-align: center; font-size: 1.8rem; padding: 24px; margin-top: 16px;
  background: var(--card); border-radius: 12px; border: 2px solid var(--gold);
}
#winner-banner button { margin-top: 12px; }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #c0392b; color: #fff; padding: 12px 24px; border-radius: 8px;
  font-size: 1rem;
}
@media (max-width: 700px) {
  #board { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  h1 { font-size: 2rem; }
}