/* Loup-Garou : village qui passe du jour à la nuit, anneau de joueurs, carte de rôle, annonces cinématiques. */
.lg { --hill: #3e6b4c; --house: #7a5440; --win: rgba(0, 0, 0, 0.25); overflow: auto; isolation: isolate; }
.lg.night { --hill: #0d1330; --house: #10183a; --win: #ffd36b; }
.lg .sky { position: fixed; inset: 0; z-index: -2; }
.lg .sky::before, .lg .sky::after { content: ""; position: absolute; inset: 0; transition: opacity 1.4s ease; }
.lg .sky::before { background: linear-gradient(180deg, #4a90d9 0%, #9ec9ee 55%, #f6c177 100%); }
.lg .sky::after { background: linear-gradient(180deg, #050816 0%, #151d4a 55%, #2d3a7a 100%); opacity: 0; }
.lg.night .sky::after { opacity: 1; }
.lg .stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 40%, #fff, transparent), radial-gradient(1.8px 1.8px at 52% 14%, #fff, transparent), radial-gradient(1.3px 1.3px at 72% 32%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 64% 58%, #fff, transparent), radial-gradient(1.4px 1.4px at 22% 66%, #fff, transparent), radial-gradient(1.2px 1.2px at 92% 70%, #fff, transparent); animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: 0.45; filter: brightness(1.4); } }
.lg.night .stars { opacity: 1; }
.lg .moon { position: absolute; top: 9%; right: 12%; width: 84px; height: 84px; border-radius: 50%; background: #f4f1d0; box-shadow: 0 0 60px 14px rgba(244, 241, 208, 0.45); opacity: 0; transform: translateY(40px); transition: opacity 1.4s, transform 1.4s; }
.lg .moon::after { content: ""; position: absolute; inset: -4px -4px -4px 24px; border-radius: 50%; background: #1a2252; }
.lg.night .moon { opacity: 1; transform: none; }
.lg .sun { position: absolute; top: 10%; right: 14%; width: 96px; height: 96px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 90px 30px rgba(255, 243, 176, 0.6); opacity: 1; transition: opacity 1.4s, transform 1.4s; }
.lg.night .sun, .lg.over:not(.night) .moon { opacity: 0; transform: translateY(60px); }
.lg .clouds { position: absolute; inset: 0; opacity: 0.6; transition: opacity 1.4s; background: radial-gradient(120px 40px at 20% 22%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(160px 48px at 62% 30%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(110px 34px at 85% 16%, rgba(255, 255, 255, 0.5), transparent); animation: drift 60s linear infinite alternate; }
@keyframes drift { to { transform: translateX(40px); } }
.lg.night .clouds { opacity: 0.08; }
.lg .village { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 22vh; min-height: 120px; z-index: -1; pointer-events: none; }
.lg .village .win { fill: var(--win); transition: fill 1.4s; }
.lg .village path, .lg .village g { transition: fill 1.4s; }
.lg .gamebar { background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(8px); position: sticky; top: 0; }
.phaselabel { color: #e4e8ff; font-weight: 600; font-size: 0.92rem; }

.lgmain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: 18px; padding: 8px clamp(10px, 2vw, 22px) 24px; flex: 1; min-height: 0; align-items: start; }
.ringwrap { display: grid; place-items: center; min-height: 0; padding: 4vh 0; }
.ring { position: relative; width: min(100%, 76vh); aspect-ratio: 1.1 / 1; }
.pl { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; width: 92px; background: none; border: 0; padding: 0; color: inherit; transition: filter 0.4s, opacity 0.4s; }
.pl .avatar { transition: transform 0.18s, box-shadow 0.2s; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.pl.pick { cursor: pointer; }
.pl.pick .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.35); animation: glowpulse 1.6s ease-in-out infinite; }
.pl.pick:hover .avatar { transform: scale(1.14); }
.pl.sel .avatar { box-shadow: 0 0 0 5px var(--accent-2), 0 0 34px var(--accent-2) !important; animation: none; transform: scale(1.12); }
.pl.me .pname { color: #fff3b0; }
.pl.mate .avatar { border-color: #e0524a; box-shadow: 0 0 0 3px #e0524a, 0 0 18px #e0524a; }
.pl .pname { font-weight: 700; font-size: 0.8rem; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 6px #000, 0 0 3px #000; }
.pl .seatno { position: absolute; top: -4px; left: 8px; min-width: 20px; padding: 0 5px; border-radius: 99px; background: rgba(0, 0, 0, 0.7); font-size: 0.72rem; font-weight: 800; z-index: 2; }
.pl.dead { filter: grayscale(1) brightness(0.7); }
.pl.dead .avatar { opacity: 0.55; }
.pl .tomb, .pl .revealed { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; padding: 1px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.7); margin-top: 1px; white-space: nowrap; }
.pl .tomb .ricon, .pl .revealed .ricon { width: 14px; height: 14px; }
.pl .heart { position: absolute; top: -8px; right: 8px; font-size: 1.1rem; animation: bob 1.4s ease-in-out infinite; }
.pl .mateb { position: absolute; top: 18px; right: 6px; font-size: 0.9rem; }
.pl .votes { position: absolute; top: -6px; right: 4px; min-width: 26px; text-align: center; padding: 1px 8px; border-radius: 99px; background: #ff5d6c; font-weight: 900; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); animation: pop 0.35s; z-index: 2; }
.pl .votes.wolf { background: #7a1010; }
@keyframes pop { from { transform: scale(0.3); } 70% { transform: scale(1.25); } }
.ringcenter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36%; text-align: center; pointer-events: none; display: grid; gap: 6px; justify-items: center; }
.phaseicon { font-size: clamp(2rem, 6vw, 3.4rem); filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5)); }
.ringcenter .note { font-size: 0.9rem; font-weight: 600; text-shadow: 0 1px 8px #000, 0 0 3px #000; line-height: 1.35; }

.side { display: grid; gap: 12px; align-content: start; }
.rolecard { --rc: #888; padding: 16px; border-color: color-mix(in srgb, var(--rc) 70%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--rc) 28%, transparent), var(--shadow); background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 28%, #12162a), rgba(18, 22, 42, 0.9)); backdrop-filter: blur(10px); transform-style: preserve-3d; }
.rhead { display: flex; align-items: center; gap: 12px; }
.rhead .btn { margin-left: auto; }
.rbadge { width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 0, 0, 0.35); display: grid; place-items: center; color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); flex: none; }
.rbadge .ricon { width: 36px; height: 36px; }
.rname { font-size: 1.3rem; font-weight: 800; color: var(--rc); }
.rcamp { color: var(--muted); font-size: 0.85rem; }
.rolecard p { margin: 10px 0 0; line-height: 1.5; color: #dfe3ff; }
.rolecard .extra { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); font-size: 0.92rem; }
.rolecard .dead { color: #ff9aa5; }
.rolecard.spec { text-align: center; padding: 18px; }
.act { padding: 14px 16px; display: grid; gap: 10px; background: rgba(12, 14, 32, 0.78); backdrop-filter: blur(10px); }
.act p { margin: 0; }
.row.wrap { flex-wrap: wrap; }
.sleep { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px; }
.zzz { font-size: 2.4rem; animation: bob 2.4s ease-in-out infinite; }
.wolfvotes { font-size: 0.9rem; color: #ffb4ac; display: grid; gap: 2px; }
.logwrap { padding: 12px 14px; background: rgba(12, 14, 32, 0.7); backdrop-filter: blur(10px); }
.logwrap h3 { margin: 0 0 8px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.logbox { max-height: 26vh; overflow: auto; display: grid; gap: 6px; font-size: 0.88rem; }
.logline { padding: 6px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); line-height: 1.4; }
.logline.death { background: rgba(255, 93, 108, 0.14); }
.logline.vote { background: rgba(124, 92, 255, 0.18); }
.logline.night { color: #aab4ff; }

/* annonces */
.fxlayer { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: grid; place-items: center; }
.cine { grid-area: 1 / 1; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 20px; }
.cine .big { display: grid; justify-items: center; gap: 8px; padding: 28px 40px; border-radius: 28px; backdrop-filter: blur(10px); max-width: min(92vw, 620px); }
.cine .big b { font-size: clamp(1.8rem, 6vw, 3rem); letter-spacing: 0.04em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7); }
.cine .big small { font-size: clamp(1rem, 2.6vw, 1.25rem); color: #e8ebff; line-height: 1.4; }
.cine .emo { font-size: clamp(3rem, 10vw, 5.4rem); filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6)); line-height: 1; }
.cine .emo .ricon.big { width: 1em; height: 1em; color: #fff; }
.nightcine { background: radial-gradient(circle at 50% 50%, rgba(5, 8, 22, 0.78), rgba(5, 8, 22, 0.35) 70%, transparent); }
.nightcine .big { background: rgba(10, 14, 40, 0.5); }
.daycine { background: radial-gradient(circle at 50% 50%, rgba(255, 190, 90, 0.4), transparent 70%); }
.daycine .big { background: rgba(120, 70, 20, 0.45); }
.votecine .big { background: rgba(60, 40, 130, 0.55); }
.deathcine { background: radial-gradient(circle at 50% 50%, rgba(80, 0, 10, 0.7), rgba(0, 0, 0, 0.35) 70%, transparent); }
.deathcine .big { background: rgba(60, 5, 15, 0.6); border: 1px solid rgba(255, 93, 108, 0.4); }
.deathcine .emo { animation: shake 0.6s 2; }
@keyframes shake { 25% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } }

.ricon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.lgvictory { max-height: 90vh; overflow: auto; }
.reveal { display: grid; gap: 6px; width: 100%; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-height: 38vh; overflow: auto; }
.rv { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.rv.dead { opacity: 0.7; }
.rrole { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.85rem; }
.small { font-size: 0.78rem; }

@media (max-width: 900px) {
  .lgmain { grid-template-columns: 1fr; }
  .ring { width: min(100%, 96vw); aspect-ratio: 1 / 1.05; }
  .pl { width: 70px; }
  .pl .pname { max-width: 70px; font-size: 0.7rem; }
  .ringcenter { width: 44%; }
  .ringcenter .note { font-size: 0.78rem; }
  .hide-m { display: none; }
  .gamebar .title { display: none; }
}