:root {
  --fog-hidden: #030201;
  --dirt-mid: #4a3222;
  --tunnel: #d8b98a;
  --tunnel-dim: #362a1e;
  --diamond: #98f8ff;
  --hud-bg: rgba(20, 13, 8, 0.88);
  --accent: #d97757;
  --panel-bg: #17110b;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%; background: #0d0805;
  font-family: 'Courier New', monospace; color: #f0e6d2;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  overflow-y: auto;
}
.screen { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; padding: 20px; }

.panel {
  background: var(--panel-bg); border: 1px solid var(--accent); border-radius: 6px;
  padding: 24px; width: 340px; display: flex; flex-direction: column; gap: 12px;
}
.panel h1 { margin: 0; font-size: 22px; }
.panel h2 { margin: 0 0 8px; font-size: 16px; color: var(--diamond); }
.sub { margin: -6px 0 8px; color: #8a7862; font-size: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #c9b89a; }
label input[type=text] {
  background: #0d0805; border: 1px solid #5a4834; color: #f0e6d2; padding: 8px; border-radius: 4px;
  font-family: inherit; font-size: 14px;
}
.checkboxRow { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; }
.checkboxRow input { width: 16px; height: 16px; }
.colorPickWrap { display: flex; flex-direction: column; gap: 6px; }
.colorPickWrap .label { font-size: 12px; color: #c9b89a; }
.colorPicker { display: flex; gap: 8px; flex-wrap: wrap; }
.colorSwatch {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
}
.colorSwatch.selected { border-color: #fff; box-shadow: 0 0 6px #fff; }
.colorSwatch.taken { opacity: 0.25; cursor: not-allowed; }

button {
  background: var(--accent); color: #1a0f08; border: none; border-radius: 4px;
  padding: 10px; font-family: inherit; font-weight: bold; font-size: 14px; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.errorText { color: #ff8a6a; font-size: 12px; min-height: 14px; margin: 0; }
.hint { color: #8a7862; font-size: 11px; margin: 6px 0 0; }

#rosterList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
#rosterList li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.readyTag { margin-left: auto; font-size: 11px; color: var(--diamond); }
.audienceTag { margin-left: auto; font-size: 11px; color: #8a7862; }
.hostTag { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 5px; margin-left: 8px; }

#gameWrap {
  position: relative; box-shadow: 0 0 0 3px var(--accent); border-radius: 4px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
/* scaleWrap does viewport-fit scaling; gameWrap holds native pixel dims and
   swaps width/height when the canvas inside is rotated 90/270. The canvas
   itself is the only thing that visually rotates — HUD/overlays stay
   upright and legible regardless of the player's orientation. */
#scaleWrap { transform-origin: top center; }
canvas { display: block; background: var(--fog-hidden); }

#roundTimer {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 2;
}
#diamondProgress {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 2; color: var(--diamond); font-size: 12px;
}
#hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.hudBox { background: var(--hud-bg); border: 1px solid var(--accent); border-radius: 4px; padding: 8px 12px; font-size: 13px; }
#compass { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
#conditionBox { color: #ff8a6a; border-color: #ff8a6a; font-weight: bold; }
#compassArrow {
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 18px solid var(--diamond); transform-origin: 50% 65%;
  filter: drop-shadow(0 0 4px var(--diamond));
}

#voteOverlay {
  position: absolute; inset: 0; background: rgba(10,6,3,0.85);
  display: flex; align-items: center; justify-content: center;
}
.voteBox { text-align: center; }
.voteBox h2 { color: var(--diamond); }
#voteTimer { font-size: 40px; margin: 8px 0; color: var(--accent); }
#voteButtons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
#voteButtons button { border-radius: 50%; width: 44px; height: 44px; }

/* Final vote reuses the same overlay/box, just with a stronger border and
   a different accent so it reads as the bigger moment. */
#voteOverlay.finalVote .voteBox {
  border: 2px solid var(--diamond); border-radius: 6px; padding: 16px;
  box-shadow: 0 0 16px rgba(127,232,240,0.35);
}
#voteOverlay.finalVote #voteReason { color: var(--diamond); }
#voteOverlay.finalVote #voteTimer { color: var(--diamond); }

#roleRevealOverlay {
  position: absolute; inset: 0; background: rgba(10,6,3,0.92);
  display: flex; align-items: center; justify-content: center; z-index: 4;
}
.roleRevealBox {
  text-align: center; max-width: 320px; padding: 20px;
  background: var(--panel-bg); border: 1px solid var(--accent); border-radius: 6px;
}
.roleRevealBox h2 { margin-top: 0; color: var(--diamond); }
.roleRevealBox p { color: #f0e6d2; font-size: 14px; line-height: 1.5; }
.roleRevealBox .hint { color: #8a7862; font-size: 12px; }
.roleRevealBox button { margin-top: 8px; }
/* Weremole's own card gets a different accent so the "this one matters"
   moment reads immediately, same trick the final-vote box already uses. */
#roleRevealOverlay.isWeremole .roleRevealBox {
  border: 2px solid var(--accent); box-shadow: 0 0 16px rgba(217,119,87,0.35);
}

#resultBanner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--hud-bg); border: 1px solid var(--accent); border-radius: 6px;
  padding: 16px 24px; font-size: 16px; text-align: center;
}

#roundEndOverlay {
  position: absolute; inset: 0; background: rgba(10,6,3,0.92);
  display: flex; align-items: center; justify-content: center; z-index: 5;
}
.roundEndBox {
  text-align: center; max-width: 340px; padding: 20px;
  background: var(--panel-bg); border: 1px solid var(--accent); border-radius: 6px;
}
.roundEndBox h2 { margin-top: 0; font-size: 24px; }
.roundEndBox p { color: #c9b89a; font-size: 14px; }
.roundEndBox .revealLine { color: var(--diamond); font-style: italic; margin-top: 12px; }
.roundEndBox button { margin-top: 12px; }

/* ===================== D-PAD (moles, touch) ===================== */
#dpad {
  display: grid;
  grid-template-columns: 60px 60px 60px;
  grid-template-rows: 50px 50px;
  gap: 6px;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.dpadBtn {
  background: var(--panel-bg); border: 1px solid var(--accent); border-radius: 6px;
  color: #f0e6d2; font-family: inherit; font-size: 12px; touch-action: none;
}
.dpadBtn:active { background: var(--accent); color: #1a0f08; }
.dpadUp    { grid-column: 2; grid-row: 1; }
.dpadLeft  { grid-column: 1; grid-row: 2; }
.dpadDown  { grid-column: 2; grid-row: 2; }
.dpadRight { grid-column: 3; grid-row: 2; }

/* ===================== CHAT (audience posts, moles read-only) ===================== */
#chatPanel {
  width: min(800px, 94vw);
  background: var(--panel-bg); border: 1px solid var(--accent); border-radius: 6px;
  display: flex; flex-direction: column; max-height: 180px;
}
.chatHeader {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid #3a2c1e; font-size: 12px; color: #c9b89a;
}
.chatHeader button {
  background: transparent; border: 1px solid #5a4834; color: #c9b89a;
  font-size: 11px; padding: 3px 8px;
}
#chatMessages {
  overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; min-height: 40px;
}
#chatMessages .chatLine { color: #f0e6d2; }
#chatMessages .chatName { color: var(--diamond); margin-right: 6px; }
#chatInputRow { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #3a2c1e; }
#chatInputRow input {
  flex: 1; background: #0d0805; border: 1px solid #5a4834; color: #f0e6d2;
  padding: 8px; border-radius: 4px; font-family: inherit; font-size: 13px;
}
#chatInputRow button { padding: 8px 14px; }

/* ===================== SMALL SCREENS ===================== */
@media (max-width: 640px) {
  #chatPanel { max-height: 130px; }
  .dpadBtn { font-size: 11px; }
}