/* =========================================================
   Demo-ul „Vezi cum se joacă” (public/demo.js).
   Elementele apar pe fraze: [data-cue] stă ascuns până primește .in; .gone îl scoate din scenă.
   ========================================================= */
body.demo-open { overflow: hidden; }
#demo { position: fixed; inset: 0; z-index: 90; background: radial-gradient(1000px 600px at 50% 0%, #3a2a1a, #0d0a07 75%); display: flex; flex-direction: column; animation: fade .3s; }
#demo.paused * { animation-play-state: paused !important; }
.d-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; }
.d-prog { flex: 1; display: flex; gap: 3px; }
.d-prog i { flex: 1; height: 5px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; cursor: pointer; }
.d-prog i b { display: block; height: 100%; width: 0; background: var(--gold); transition: width .6s; }
.d-prog i.done b { width: 100% !important; }
.d-x { width: 38px; height: 38px; border-radius: 4px; background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.d-stage { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 10px 14px; max-width: 1000px; width: 100%; margin: 0 auto; }
.d-sub { max-width: 820px; width: 100%; margin: 0 auto 6px; padding: 10px 16px; text-align: center; font-family: var(--type); font-size: clamp(.95rem, 2.6vw, 1.2rem); color: var(--paper); background: rgba(0,0,0,.45); border-top: 1px solid var(--line); min-height: 3.4em; display: flex; align-items: center; justify-content: center; }
.d-ctrl { display: flex; justify-content: center; gap: 14px; padding: 6px 0 calc(12px + env(safe-area-inset-bottom)); }
.d-ctrl button { width: 48px; height: 48px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.d-ctrl .d-play { background: var(--fas); border-color: #e05a48; color: #fff; width: 56px; height: 56px; }

/* aparițiile pe fraze */
[data-cue]:not(.in) { opacity: 0; }
[data-cue].in { animation: d-in .45s calc(var(--i, 0) * .12s) both; }
.a-pop.in { animation-name: pop; }
.a-stamp.in { animation-name: stampin; animation-duration: .5s; }
.a-flip.in { animation-name: flip; animation-duration: .55s; }
.gone, [data-cue].in.gone { animation: d-out .5s forwards; }
@keyframes d-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes d-out { to { opacity: 0; transform: translateY(-36px) rotate(-10deg) scale(.7); visibility: hidden; } }
@keyframes d-dim { to { opacity: .25; filter: grayscale(1) brightness(.6); } }
@keyframes d-light { from { opacity: .25; filter: grayscale(1) brightness(.6); } to { opacity: 1; filter: none; } }
@keyframes d-glow { to { background: var(--fas); color: #fff; border-color: var(--fas-d); box-shadow: 0 0 16px rgba(196,59,42,.7); } }

.d-center { text-align: center; }
.d-h { font-size: clamp(1.4rem, 5vw, 2.2rem); text-transform: uppercase; color: var(--paper); text-align: center; margin: 0; }
.d-note { font-family: var(--type); color: var(--gold); text-align: center; font-style: normal; display: block; margin-top: 6px; }
.d-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.d-av { display: flex; flex-direction: column; align-items: center; font-size: .85rem; }
.d-av .avatar-svg { width: clamp(54px, 10vw, 92px); height: auto; aspect-ratio: 160 / 190; }
.d-stamp { animation: stampin .5s .2s both; }
.d-logo { animation: stampin .6s .4s both; font-size: clamp(2.6rem, 10vw, 4.6rem); }
.d-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.d-group > small { font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.d-cards3 { display: flex; gap: 10px; justify-content: center; }
.pback { width: 46px; aspect-ratio: .7; border-radius: 4px; background: repeating-linear-gradient(45deg, #3a2a1a 0 6px, #2a1d12 6px 12px); border: 2px solid var(--paper2); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.pback span { font-family: var(--head); font-size: .6rem; color: var(--paper2); letter-spacing: .1em; }
.vback { background: repeating-linear-gradient(45deg, #3a2a1a 0 6px, #2a1d12 6px 12px); color: var(--paper2); border-color: var(--paper2); }

/* intro: cele două tabere */
.d-camps { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.d-camp { display: flex; flex-direction: column; align-items: center; padding: 14px 22px; border-radius: 6px; font-family: var(--head); font-size: 1.5rem; letter-spacing: .08em; min-width: 180px; color: #fff; text-transform: uppercase; }
.d-camp .emb { width: 54px; }
.d-camp small { font-family: var(--type); font-size: .85rem; letter-spacing: 0; text-transform: none; margin-top: 4px; }
.d-camp.lib { background: linear-gradient(160deg, #4d8fd0, #23507f); }
.d-camp.fas { background: linear-gradient(160deg, #d24a37, #7a1d12); }
.d-vs { font-family: var(--type); color: var(--muted); }

/* rolurile */
.sc-roluri { position: relative; }
.d-env { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: var(--paper); color: var(--ink); padding: 22px 28px; border: 3px solid var(--ink); transform: rotate(-2deg); position: absolute; z-index: 2; top: 30%; }
.d-env .ic { width: 70px; height: 70px; }
.d-env span { font-family: var(--head); font-size: 1.4rem; letter-spacing: .1em; }
.d-cardrow { display: flex; gap: 30px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.d-cardrow .rcard { width: clamp(84px, 14vw, 130px); }
.d-rt { width: auto; min-width: 320px; background: var(--panel); }
.d-rt .d-hl { transition: background .4s, color .4s; }
.d-rt .d-hl.on { background: var(--gold); color: var(--ink); font-weight: 700; }

/* ce e o lege */
.d-laws { display: flex; gap: 30px; justify-content: center; }
.d-law { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--head); text-transform: uppercase; }
.d-law .pcard { width: clamp(70px, 9vw, 92px); }
.sc-lege { gap: 10px; }
.sc-lege .d-note { margin: 0; }
.sc-lege .d-av .avatar-svg { width: 62px; }
.d-lawboards .slot { aspect-ratio: .95; }
.d-lawboards { display: grid; grid-template-columns: 5fr 6fr; gap: 10px; width: 100%; max-width: 760px; }
.d-lawboards .board { padding: 6px; margin: 0; }
.d-wants { display: flex; gap: 22px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.d-wants .tag { margin-top: 4px; font-size: .75rem; }
.d-unlock { display: flex; align-items: center; gap: 8px; color: var(--gold); font-family: var(--type); }
.d-unlock .pcard.mini { width: 34px; height: auto; aspect-ratio: .7; }
.d-unlock .ic { width: 34px; height: 34px; }
.d-unlock span { font-size: 1.6rem; }

/* pachetul */
.d-big17 { font-family: var(--head); text-transform: uppercase; font-size: 1.2rem; color: var(--muted); }
.d-big17 b { font-size: 3rem; color: var(--paper); margin-right: 6px; vertical-align: middle; }
.d-deck17 { display: grid; grid-template-columns: repeat(17, 1fr); gap: 4px; width: 100%; max-width: 900px; }
.d-deck17 > div { aspect-ratio: .7; }
.d-deck17 .pcard b { font-size: clamp(.3rem, .9vw, .5rem); }
.d-ratio { display: flex; width: 100%; max-width: 620px; border-radius: 4px; overflow: hidden; font-family: var(--head); text-transform: uppercase; text-align: center; }
.d-ratio span { padding: 8px 4px; color: #fff; }
.d-ratio .fas { background: var(--fas); } .d-ratio .lib { background: var(--lib); }
.d-piles { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 70px; flex-wrap: wrap; }
.d-pile { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--head); text-transform: uppercase; color: var(--muted); }
.d-stack { position: relative; width: 52px; height: 74px; }
.d-stack .pback { position: absolute; width: 52px; }
.d-stack .pback:nth-child(2) { top: -4px; left: 3px; } .d-stack .pback:nth-child(3) { top: -8px; left: 6px; }
.d-stack.gunoi .pback { transform: rotate(8deg); opacity: .8; }
.d-fly { position: absolute; left: calc(50% - 120px); bottom: 26px; }
.d-fly .pback { width: 52px; }
.d-piles.in .d-fly { animation: d-fly 1.4s .8s ease-in-out 2 both; }
@keyframes d-fly { 0% { transform: none; opacity: 1; } 70% { transform: translate(120px, -40px) rotate(160deg); opacity: 1; } 100% { transform: translate(122px, 0) rotate(188deg); opacity: 0; } }
.d-reshuffle { display: flex; align-items: center; gap: 8px; color: var(--gold); font-family: var(--type); }
.d-reshuffle .ic { width: 34px; height: 34px; animation: d-spin 1.6s linear infinite; }
@keyframes d-spin { to { transform: rotate(360deg); } }

/* tablele */
.d-board { width: 100%; max-width: 700px; margin: 0 auto; }
.d-board.slim .track { margin: 0; }
.d-board .slot > div { width: 100%; height: 100%; }
.d-board .slot.on, .d-board .slot:has(> .in) { border-style: solid; border-color: transparent; padding: 0; }
.d-board .slot.pw.hl { animation: d-glow .5s forwards; }
.d-board .slot.kill { animation: d-glow .5s forwards, pulse .6s .5s infinite alternate; }
.d-board .board-foot .dot { transition: background .3s, box-shadow .3s; transition-delay: calc(var(--i, 0) * .12s); }
.d-board .board-foot .dot.on { background: var(--fas); border-color: var(--fas-d); box-shadow: 0 0 10px var(--fas); }
.d-board .et b { color: var(--fas-d); }

/* cărțile de vot și plăcuțele */
.d-tools { display: flex; gap: 46px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.d-tools .vcard { width: clamp(90px, 15vw, 130px); }
.d-tools .vcard b { font-size: 2.2rem; }
.d-plates { display: flex; flex-direction: column; gap: 12px; }
.d-plate { font-family: var(--head); font-size: clamp(1.1rem, 3.5vw, 1.6rem); letter-spacing: .12em; padding: 12px 26px; border-radius: 4px; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.4); }
.d-plate.pres { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); }
.d-plate.chan { background: var(--gold); color: var(--ink); border: 3px solid #7a5a1a; }

/* noaptea */
.sc-noapte { background: radial-gradient(circle at 50% 30%, #2a0a06, #000 70%); max-width: none; }
.d-night { text-align: center; width: 100%; max-width: 940px; }
.d-n0 { font-size: clamp(1.6rem, 6vw, 2.6rem); text-transform: uppercase; color: var(--paper); }
.d-nt { position: relative; height: 2.6em; font-family: var(--head); text-transform: uppercase; font-size: clamp(1.2rem, 4.5vw, 2rem); }
.d-nt span { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.d-nt .ic { width: 1.3em; height: 1.3em; }
.d-n1 { color: var(--paper); } .d-n2 { color: var(--fas-l); }
.d-nf { margin-top: 26px; }
.d-nf .nf.dim { animation: d-dim .6s forwards; }
.d-nf .nf.dim.lit { animation: d-light .6s forwards; }
.d-nf .nf-finger.in { animation: d-finger .8s both; }
.d-nf .nf-finger .finger { animation: wave 1.2s .8s ease-in-out infinite alternate; }
@keyframes d-finger { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* victoria */
.d-wins { width: 100%; max-width: 860px; }
.d-wins .gw { font-size: 1rem; padding: 16px; }
.d-wins .gw > b { font-family: var(--head); text-transform: uppercase; font-size: 1.3rem; }
.d-cards { display: flex; gap: 4px; justify-content: center; margin: 8px 0; }
.d-cards > div { width: clamp(28px, 6vw, 54px); aspect-ratio: .7; }
.d-cards .pcard b { font-size: clamp(.32rem, 1vw, .55rem); }
.d-or { font-family: var(--type); margin-top: 6px; }

/* runda */
.d-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 860px; margin-top: 16px; }
.d-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--paper); color: var(--ink); border-radius: 4px; padding: 20px 10px 16px; }
.d-step em { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--head); background: var(--fas); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.d-step .ic { width: 42px; height: 42px; color: var(--fas-d); }
.d-step b { font-family: var(--head); text-transform: uppercase; font-size: 1.25rem; }
.d-step small { font-size: .88rem; }

/* alegerile și votul */
.d-table { max-width: 920px; }
.d-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 6px; min-width: 96px; transition: background .4s, border-color .4s, transform .4s, box-shadow .4s; }
.badge.no { background: #000; color: var(--fas-l); border: 1px solid var(--fas); }
.d-seat.picked { background: #4a3514; border-color: var(--gold); box-shadow: 0 0 20px rgba(217,164,65,.6); transform: scale(1.06); }
.d-vote { position: absolute; right: -8px; bottom: -8px; width: 42px; height: 58px; }
.d-vote > div { position: absolute; inset: 0; }
.d-vote .vcard { width: 42px; } .d-vote .vcard b { font-size: .8rem; } .d-vote .vcard small { display: none; }
.d-results { position: relative; width: 100%; max-width: 640px; height: 76px; margin-top: 10px; }
.d-results > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.d-results .result { font-size: clamp(1rem, 3.6vw, 1.6rem); }
.d-chaos { gap: 12px; background: #1a0a07; border: 2px solid var(--fas); border-radius: 4px; }
.d-chaos .pcard.mini { width: 40px; height: auto; aspect-ratio: .7; }
.d-chaos b { font-family: var(--head); font-size: 1.8rem; color: var(--fas-l); display: block; line-height: 1; }
.d-chaos small { font-family: var(--type); color: var(--paper); }
.d-tracker { font-family: var(--head); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.d-tracker .dot { border-color: var(--paper); transition: background .3s, box-shadow .3s; }
.d-tracker .dot.on { background: var(--fas); border-color: var(--fas-d); box-shadow: 0 0 10px var(--fas); }

/* legea */
.d-leg { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.d-who { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.d-flow { position: relative; flex: 1; max-width: 520px; min-height: 250px; }
.d-flow > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.d-flow .d-final { flex-direction: column; gap: 6px; font-family: var(--head); text-transform: uppercase; color: var(--gold); }
.d-hand { gap: 10px; }
.d-hand .pcard { width: clamp(64px, 12vw, 92px); }
.d-final .pcard.huge { width: clamp(110px, 22vw, 160px); }
.d-trash { font-family: var(--head); text-transform: uppercase; color: var(--muted); display: flex; gap: 6px; align-items: center; position: relative; padding-right: 22px; }
.d-trash b { color: var(--fas-l); font-size: 1.3rem; position: absolute; right: 0; }
.sc-legi .silence { justify-content: center; }

/* minciunile */
.d-lies { display: flex; gap: 140px; justify-content: center; margin-top: 70px; }
.d-liar { position: relative; }
.d-liar .chat-bubble { position: absolute; left: 50%; top: -6px; white-space: nowrap; font-size: clamp(.85rem, 2.4vw, 1.1rem); max-width: none; }
.d-liar .d-b1 { transform: translate(-85%, -100%); }
.d-liar .d-b1::after { left: 85%; }
.d-liar .d-b2 { transform: translate(-15%, -100%); background: var(--fas); color: #fff; }
.d-liar .d-b2::after { border-top-color: var(--fas); left: 15%; }
.d-liar .chat-bubble.in { animation-name: d-bub; }
@keyframes d-bub { from { opacity: 0; scale: .7; } }
.d-qm { font-family: var(--head); font-size: 4rem; color: var(--gold); line-height: 1; }

/* puterile */
.d-powers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 760px; }
.d-pw { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 14px 8px; text-align: center; }
.d-pw b { font-family: var(--head); text-transform: uppercase; font-size: .95rem; }
.d-pw small { font-size: .82rem; color: var(--muted); }
.d-pw .ic { width: 36px; height: 36px; color: var(--gold); }

/* execuția */
.d-execrow { display: flex; align-items: flex-start; justify-content: center; gap: 18px; width: 100%; flex-wrap: wrap; }
.d-aim { align-self: center; }
.d-aim .ic { width: 54px; height: 54px; color: var(--fas-l); animation: pulse .5s infinite alternate; }
.d-victim { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 180px; text-align: center; }
.d-victim .ov-x { position: absolute; inset: -6px 0 auto; display: flex; justify-content: center; color: var(--fas); opacity: 0; }
.d-victim .ov-x .ic { width: 88px; height: 88px; }
.d-victim.shot .ov-x { animation: pop .25s .5s both; opacity: 1; }
.d-victim.shot .d-av { animation: d-shotdim .3s .5s forwards; }
@keyframes d-shotdim { to { filter: grayscale(1) brightness(.75); } }
.d-victim .d-was, .d-victim .d-out { opacity: 0; margin-top: 6px; padding: 3px 10px; }
.d-victim.shot .d-was, .d-victim.shot .d-out { animation: pop .3s 1s both; opacity: 1; }
.d-victim .d-was { font-family: var(--head); text-transform: uppercase; background: var(--lib); color: #fff; }
.d-victim .d-out { font-family: var(--type); font-weight: 400; font-size: .85rem; background: #000; color: var(--muted); }

/* regulile */
.d-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 860px; }
.d-rule { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.d-gavel { display: flex; flex-direction: column; align-items: center; color: var(--gold); font-family: var(--head); font-size: 1.4rem; }
.d-gavel .ic { width: 60px; height: 60px; }
.d-gavel.bang .ic { animation: d-bang .5s 2; }
@keyframes d-bang { 50% { transform: rotate(-25deg); } }
.d-go { max-width: 360px; margin-top: 6px; }

@media (max-width: 680px) {
  .d-stage { gap: 10px; padding: 6px 10px; }
  .d-deck17 { grid-template-columns: repeat(9, 1fr); max-width: 360px; }
  .d-piles { gap: 40px; }
  .d-fly { left: calc(50% - 92px); }
  .d-piles.in .d-fly { animation-name: d-fly-m; }
  @keyframes d-fly-m { 0% { transform: none; opacity: 1; } 70% { transform: translate(92px, -40px) rotate(160deg); opacity: 1; } 100% { transform: translate(92px, 0) rotate(188deg); opacity: 0; } }
  .d-steps, .d-rules, .d-powers { grid-template-columns: 1fr; gap: 16px; }
  .d-pw { flex-direction: row; text-align: left; padding: 8px 10px; flex-wrap: wrap; }
  .d-pw small { width: 100%; }
  .d-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; justify-items: center; }
  .d-leg .d-flow { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 200px; }
  .d-hand .pcard { width: 76px; }
  .d-who .avatar-svg { width: 56px; }
  .d-lies { gap: 70px; margin-top: 90px; }
  .d-liar .chat-bubble { white-space: normal; width: 140px; }
  .d-seat { min-width: 76px; padding: 6px 4px; }
  .d-seat .d-av .avatar-svg { width: 50px; }
  .d-tools { gap: 24px; }
  .d-lawboards { grid-template-columns: 1fr; }
  .d-laws { gap: 16px; }
  .d-camp { min-width: 0; padding: 10px 14px; font-size: 1.1rem; }
  .d-rt { min-width: 0; font-size: .8rem; }
  .d-cardrow { gap: 14px; }
  .d-cardrow .rcard { width: 78px; padding: 6px; }
  .d-cardrow .rcard b { font-size: .9rem; }
}