/* =====================================================================
   VOXEL MAFIA — shared "Voxel Noir" stylesheet (index.html + game.html)
   ===================================================================== */

* { image-rendering: pixelated; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: 'Noto Kufi Arabic', sans-serif; overflow-x: hidden; }
.font-pixel { letter-spacing: .05em; }
input::placeholder { font-family: 'Noto Kufi Arabic'; }
.code-font { font-family: 'Silkscreen', monospace; direction: ltr; unicode-bidi: isolate; }

/* ====== DAY / NIGHT BACKDROPS ====== */
.bg-layer { position: fixed; inset: 0; z-index: -2; transition: opacity 1.6s ease; }
#bgDay {
  background:
    linear-gradient(#8fd3ff 0%, #bfe9ff 52%, transparent 52%),
    conic-gradient(#6fbf44 90deg, #63b03b 90deg 180deg, #6fbf44 180deg 270deg, #63b03b 270deg);
  background-size: 100% 100%, 56px 56px;
}
#bgNight {
  background:
    linear-gradient(#0b0817 0%, #171126 55%, transparent 55%),
    conic-gradient(#1c1430 90deg, #150f26 90deg 180deg, #1c1430 180deg 270deg, #150f26 270deg);
  background-size: 100% 100%, 56px 56px;
}
#stars { position: fixed; inset: 0; z-index: -1; transition: opacity 1.6s ease; pointer-events: none; }
#stars::before {
  content: ''; position: absolute; width: 4px; height: 4px; background: #fff;
  box-shadow: 8vw 12vh 0 #fff, 22vw 6vh 0 #ffe9a8, 35vw 18vh 0 #fff, 48vw 9vh 0 #fff,
    61vw 15vh 0 #ffe9a8, 74vw 5vh 0 #fff, 88vw 13vh 0 #fff, 15vw 26vh 0 #fff,
    42vw 30vh 0 #ffe9a8, 68vw 27vh 0 #fff, 93vw 24vh 0 #fff, 5vw 38vh 0 #fff, 55vw 40vh 0 #fff;
}
#celestial {
  position: fixed; top: 4vh; left: 6vw; z-index: -1; font-size: 56px; line-height: 1;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35));
  transition: transform 1.6s ease, opacity 1.6s ease;
}
body.night #bgDay { opacity: 0; }  body.night #bgNight { opacity: 1; }
body:not(.night) #bgDay { opacity: 1; }  body:not(.night) #bgNight { opacity: 0; }
body:not(.night) #stars { opacity: 0; }  body.night #stars { opacity: 1; }

.scanlines { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05;
  background: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 5px); }

/* ====== VOXEL UI PRIMITIVES ====== */
.vox-btn {
  border: 4px solid #000; box-shadow: 4px 4px 0 0 #000;
  transition: transform .08s ease, box-shadow .08s ease;
  user-select: none;
}
.vox-btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 0 #000; }
.vox-btn:disabled { opacity: .45; cursor: not-allowed; }
.vox-panel { border: 4px solid #000; box-shadow: 8px 8px 0 0 rgba(0,0,0,1); }
.vox-chip { border: 3px solid #000; box-shadow: 3px 3px 0 0 #000; }

/* ====== VOXEL RANGE SLIDERS (host settings) ====== */
input[type="range"].vox-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: pointer;
}
input[type="range"].vox-range::-webkit-slider-runnable-track {
  height: 12px; background: #0b0817; border: 3px solid #000; box-shadow: inset 2px 2px 0 rgba(255,255,255,.08);
}
input[type="range"].vox-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  background: #f6c445; border: 4px solid #000; box-shadow: 2px 2px 0 #000; border-radius: 0;
}
input[type="range"].vox-range::-moz-range-track {
  height: 12px; background: #0b0817; border: 3px solid #000;
}
input[type="range"].vox-range::-moz-range-thumb {
  width: 14px; height: 14px; background: #f6c445; border: 4px solid #000; border-radius: 0; box-shadow: 2px 2px 0 #000;
}

/* Mode toggle (Automated / Storyteller) */
.mode-toggle button { opacity: .55; }
.mode-toggle button.active { opacity: 1; }
.mode-toggle button.active.gold { background: #f6c445; }
.mode-toggle button.active.purple { background: #a55eea; color: #fff; }

/* ====== ROLE CARD FLIP ====== */
.flip-scene { perspective: 1100px; }
.flip-card { position: relative; width: 260px; height: 360px; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.flip-card.flipped { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 5px solid #000; box-shadow: 8px 8px 0 0 rgba(0,0,0,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.flip-back { transform: rotateY(180deg); }

/* ====== NEWS TICKER & MICRO-ANIMATIONS ====== */
@keyframes tickerIn { 0% { transform: translateY(-130%); } 12% { transform: translateY(0); } 88% { transform: translateY(0); } 100% { transform: translateY(-130%); } }
#ticker.show { animation: tickerIn 7s ease forwards; }

@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: popIn .25s ease both; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.shake { animation: shake .3s ease 2; }
@keyframes pulseGold { 0%,100% { box-shadow: 4px 4px 0 0 #000; } 50% { box-shadow: 4px 4px 0 0 #000, 0 0 0 5px rgba(246,196,69,.55); } }
.pulse-gold { animation: pulseGold 1.2s ease infinite; }

.dead-card { filter: grayscale(1) brightness(.72); }

/* =====================================================================
   THE VOXEL VILLAGE (game.html)
   ===================================================================== */
#village {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 340px;
  overflow: visible;
}

/* Central plaza ground: a slightly darker checkered square around the well */
#plaza {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46%; height: 50%;
  background: conic-gradient(rgba(0,0,0,.14) 90deg, rgba(0,0,0,.05) 90deg 180deg, rgba(0,0,0,.14) 180deg 270deg, rgba(0,0,0,.05) 270deg);
  background-size: 28px 28px;
  border: 4px solid rgba(0,0,0,.55);
  box-shadow: 6px 6px 0 rgba(0,0,0,.35);
}

/* The well / campfire centrepiece */
#well {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(56px, 12%, 92px); z-index: 3; line-height: 0;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.4));
}
#wellFire {
  position: absolute; left: 50%; bottom: 78%; transform: translateX(-50%);
  font-size: clamp(20px, 3.2vw, 34px); line-height: 1;
  opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
body.night #wellFire { opacity: 1; animation: flicker 1s steps(2) infinite; }
@keyframes flicker { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-52%) scale(1.12); } }

/* Houses */
.vhouse {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(48px, 13%, 84px); line-height: 0; z-index: 2;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35));
}
.vhouse .win { fill: #9adcf0; }
body.night .vhouse .win { fill: #ffd95e; }   /* windows glow at night */
.vhouse .doorClosed { display: none; }
.vhouse.closed .doorClosed { display: block; }
.vhouse.closed .doorOpen { display: none; }
.vhouse .houseName {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 2px; white-space: nowrap; line-height: 1.2;
  font-weight: 900; font-size: clamp(9px, 1.4vw, 12px);
  background: rgba(255,255,255,.92); border: 2px solid #000; padding: 0 4px;
}
body.night .vhouse .houseName { background: rgba(23,17,38,.92); color: #f6c445; border-color: #f6c445; }

/* Walking avatars */
.vplayer {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 4; line-height: 0; cursor: default;
  transition: left 1.7s steps(11), top 1.7s steps(11);
}
.vplayer .vav {
  border: 3px solid #000; box-shadow: 3px 3px 0 #000; background: #f1ecdd;
  display: inline-block; line-height: 0; position: relative;
}
.vplayer.walking .vav { animation: walkBob .34s steps(2) infinite; }
@keyframes walkBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.vplayer .vbadge {
  position: absolute; top: -14px; left: -10px; font-size: 16px; line-height: 1; z-index: 5;
  filter: drop-shadow(1px 1px 0 #000);
}
.vplayer .vcount {
  position: absolute; top: -16px; right: -12px; z-index: 5;
  background: #d63031; color: #fff; border: 3px solid #000; box-shadow: 2px 2px 0 #000;
  font-family: 'Silkscreen', monospace; font-size: 14px; line-height: 1; padding: 2px 5px;
}
.vplayer .vmark { position: absolute; bottom: -6px; right: -10px; font-size: 15px; z-index: 5; filter: drop-shadow(1px 1px 0 #000); }
.vplayer.votable { cursor: pointer; }
.vplayer.votable .vav { animation: pulseGold 1.2s ease infinite; }
.vplayer.votable:hover .vav { outline: 4px solid #f6c445; }
.vplayer.dead { z-index: 1; }

/* Ghost + tombstone for the fallen */
.vghost { position: relative; display: inline-block; line-height: 1; text-align: center; }
.vghost .tomb { font-size: clamp(26px, 4vw, 40px); filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
.vghost .ghost {
  position: absolute; left: 50%; bottom: 88%; transform: translateX(-50%);
  font-size: clamp(16px, 2.6vw, 26px); opacity: .68;
  animation: ghostFloat 2.6s ease-in-out infinite;
}
@keyframes ghostFloat {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .68; }
  50% { transform: translateX(-46%) translateY(-9px); opacity: .4; }
}

/* Player name tag under the walking avatar */
.vplayer .vname {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 3px; white-space: nowrap; line-height: 1.2;
  font-weight: 900; font-size: clamp(9px, 1.5vw, 12px);
  background: rgba(255,255,255,.92); border: 2px solid #000; padding: 0 4px;
}
body.night .vplayer .vname { background: rgba(23,17,38,.92); color: #fff; border-color: #fff; }

/* Voting strings overlay */
#voteLines { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
#voteLines line, #voteLines polygon { shape-rendering: crispEdges; }

/* =====================================================================
   MAFIA NIGHT TEXT CHAT
   ===================================================================== */
#mafiaChatBox {
  background: #0b0817; border: 4px solid #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.06);
}
#mafiaChatLog {
  height: 130px; overflow-y: auto; padding: 8px;
  font-size: 13px; line-height: 1.7; color: #eee;
  scrollbar-width: thin; scrollbar-color: #d63031 #171126;
}
#mafiaChatLog::-webkit-scrollbar { width: 10px; }
#mafiaChatLog::-webkit-scrollbar-track { background: #171126; }
#mafiaChatLog::-webkit-scrollbar-thumb { background: #d63031; border: 2px solid #000; }
#mafiaChatLog .who { color: #f6c445; font-weight: 900; }
#mafiaChatLog .sys { color: #8a8a9a; font-style: italic; }

/* Voice status pill */
#voicePill { position: fixed; bottom: 12px; left: 12px; z-index: 45; }
#voicePill .talk-allowed { color: #2e7d32; }
#voicePill .talk-muted { color: #d63031; }

/* Storyteller badge in place of the timer */
#manualBadge { background: #a55eea; color: #fff; }