/* =====================================================================
   WEREWOLF — game visuals: card flip, day/night cycle, lockdown toggle
   ===================================================================== */

/* ---------- Role card with 3D flip ---------- */
.card-stage { perspective: 1400px; display: flex; justify-content: center; margin: 10px 0 18px; }
.card {
    width: min(74vw, 280px); aspect-ratio: 5 / 7;
    position: relative; transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
}
.card.flipped { transform: rotateY(180deg); }
.card-face {
    position: absolute; inset: 0; backface-visibility: hidden;
    border: 4px solid var(--ink); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 18px; text-align: center; overflow: hidden;
}
/* Back (hidden) face — bauhaus geometry */
.card-back {
    background:
        conic-gradient(from 0deg at 50% 50%, var(--red) 0 90deg, var(--blue) 90deg 180deg, var(--yellow) 180deg 270deg, var(--ink) 270deg 360deg);
}
.card-back .seal {
    width: 46%; aspect-ratio: 1; border-radius: 50%;
    background: var(--paper); border: 4px solid var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font); font-size: 2.4rem;
}
.card-back .hint { position:absolute; bottom: 10px; font-family:var(--font); color:#fff; text-transform:uppercase; font-size:.72rem; background:var(--ink); padding:3px 8px; }

/* Front (revealed) face */
.card-front {
    transform: rotateY(180deg);
    background: var(--panel);
    justify-content: flex-start; gap: 10px;
}
.card-front img.card-art { width: 100%; flex: 1; object-fit: contain; border: 3px solid var(--ink); background:#fff; }
.card-front .role-name { font-family: var(--font); text-transform: uppercase; font-size: 1.5rem; }
.card-front .role-team { font-size:.8rem; }
.card-front .placeholder {
    flex:1; width:100%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font); font-size:1.1rem; color:var(--muted);
    border:3px dashed var(--ink); background:
        repeating-linear-gradient(45deg,#fff,#fff 12px,#f0ead8 12px,#f0ead8 24px);
}

/* ---------- Hide toggle: normal vs. locked-down (hard to reach) ---------- */
.hide-toggle.normal { display:block; margin: 0 auto; }

/* After day 1: shove it to a far corner, small, requires confirm */
.hide-toggle.locked {
    position: fixed; bottom: 8px; right: 8px; z-index: 40;
    transform: scale(.7); transform-origin: bottom right; opacity: .85;
}
.hide-toggle.locked .btn { box-shadow: 3px 3px 0 0 var(--ink); }

/* ---------- Day / night cycle animation ---------- */
.cycle {
    position: relative; height: 120px; border: var(--bd); box-shadow: var(--shadow);
    overflow: hidden; margin-bottom: 18px;
    transition: background 1.2s ease;
}
.cycle.night { background: linear-gradient(180deg, var(--night-1), var(--night-2)); }
.cycle.day   { background: linear-gradient(180deg, var(--day-1), var(--day-2)); }

.cycle .orb {
    position: absolute; z-index: 3; width: 56px; height: 56px; border-radius: 50%;
    border: 3px solid var(--ink); left: 50%; margin-left: -28px;
    transition: top 1.2s cubic-bezier(.4,0,.2,1), background 1.2s ease;
}
.cycle.day  .orb { top: 22px;  background: var(--yellow); box-shadow: 0 0 0 6px rgba(255,204,0,.35); }
.cycle.night .orb { top: 22px; background: #e9ecf5; box-shadow: 0 0 0 6px rgba(233,236,245,.18); }
/* during the transition we briefly slide the orb */
.cycle.transition .orb { top: 130px; }

/* stars (night only) */
.cycle .stars { position:absolute; inset:0; z-index:1; opacity:0; transition: opacity 1.2s ease; }
.cycle.night .stars { opacity:1; }
.cycle .stars::before, .cycle .stars::after {
    content:""; position:absolute; width:4px; height:4px; background:#fff; border-radius:50%;
    box-shadow: 30px 20px #fff, 90px 50px #fff, 160px 16px #fff, 220px 60px #fff,
                260px 30px #fff, 120px 80px #fff, 60px 70px #fff, 300px 18px #fff;
}

/* drifting clouds (both phases) */
.cycle .clouds { position:absolute; inset:0; z-index:2; pointer-events:none; }
.cycle .cloud {
    position:absolute; width:50px; height:18px; border-radius:18px; background:#fff;
}
.cycle .cloud::before { content:""; position:absolute; top:-10px; left:10px; width:24px; height:24px; border-radius:50%; background:inherit; }
.cycle .cloud::after  { content:""; position:absolute; top:-7px;  right:9px; width:17px; height:17px; border-radius:50%; background:inherit; }
.cycle .cloud.c1 { top:16px; transform:scale(.85); animation: drift 17s linear infinite; }
.cycle .cloud.c2 { top:44px; animation: drift 26s linear infinite; animation-delay:-8s; }
.cycle .cloud.c3 { top:70px; transform:scale(.6); animation: drift 21s linear infinite; animation-delay:-14s; }
.cycle.day  .cloud { background:#ffffff; opacity:.92; }
.cycle.night .cloud { background:rgba(228,233,247,.16); }
@keyframes drift { from { left:-70px; } to { left:110%; } }

/* readable brutalist label chip */
.cycle .label {
    position:absolute; left:10px; bottom:10px; z-index:4;
    font-family:var(--font); text-transform:uppercase; font-size:1rem;
    background:var(--ink); color:var(--yellow);
    border:2px solid var(--ink); box-shadow:3px 3px 0 0 rgba(0,0,0,.25);
    padding:4px 10px;
}

/* sweeping bauhaus shape during phase change */
.cycle .sweep {
    position:absolute; z-index:5; top:0; bottom:0; width:60px; left:-80px;
    background: var(--red); border-right:3px solid var(--ink);
    transform: skewX(-12deg);
}
.cycle.swept .sweep { animation: sweep 1.2s ease forwards; }
@keyframes sweep { to { left: 120%; } }

/* ---------- Role info (shown on reveal) ---------- */
.role-info {
    text-align: left; background: #fff; border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 0 var(--ink); padding: 12px 14px;
    margin: 14px auto 0; max-width: min(74vw, 320px);
}
.role-info-title { font-family: var(--font); text-transform: uppercase; font-size: .8rem; }
.role-info p { font-size: .9rem; line-height: 1.45; }

/* ---------- Night action picker ---------- */
.targets { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
.target {
    border: var(--bd); box-shadow: var(--shadow-sm); background:#fff;
    padding: 12px; cursor: pointer; font-weight: 800; text-align:center;
}
.target:hover { transform: translate(-1px,-1px); }
.target.sel { background: var(--blue); color:#fff; }
.target:disabled { opacity:.4; }