/* Bibelspiele: gemeinsame Zusatzstile für Übersicht, Lückenvers und Wer sagt's (Basis: /bibelspiele/kabelsalat/css/kabelsalat.css) */

/* ---------- allgemein ---------- */
.game .bg-crumb{margin:14px 0 0;font-size:.95rem}
.game .bg-crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.game .bg-crumb a:hover{color:var(--gold);border-color:var(--gold)}
.game .bg-steps{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:st;display:grid;gap:12px 28px}
.game .bg-steps li{counter-increment:st;position:relative;padding-left:2.2em;margin:0}
.game .bg-steps li::before{content:counter(st);position:absolute;left:0;top:.05em;width:1.6em;height:1.6em;border-radius:50%;background:var(--gold);color:#111;font-weight:900;font-size:.85em;display:flex;align-items:center;justify-content:center}
@media(min-width:820px){.game #g-how .bg-steps{grid-template-columns:1fr 1fr}}
.game .bg-about h2{margin:0 0 8px;font-family:var(--display);text-transform:uppercase;font-size:1.5rem}
.game .bg-about p{margin:0 0 18px;color:#dcdae3;line-height:1.65}
.game .bg-about p:last-child{margin-bottom:0}
.game .bg-links{display:grid;gap:10px}
@media(min-width:700px){.game .bg-links{grid-template-columns:1fr 1fr}}
.game .bg-link{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#0f0f16;color:var(--text);text-decoration:none;transition:border-color .25s}
.game .bg-link:hover{border-color:var(--gold)}
.game .bg-link b{font-size:1.05rem}
.game .bg-link span{color:var(--muted);font-size:.9rem}

/* ---------- Lückenvers ---------- */
.game .lv-wrap{position:relative;z-index:2;padding-top:10px}
.game .lv-verse{margin:0 auto;max-width:900px;font-size:1.45rem;line-height:2.6;text-align:center;color:var(--text)}
.game .lv-gap{position:relative;display:inline-block;vertical-align:middle;min-width:5.4em;height:1.7em;line-height:1.55;margin:0 .18em;padding:0 .5em;border-radius:10px;border:2px dashed #5a5a68;background:#0f0f16;color:var(--text);font:700 inherit/1.55 inherit;cursor:pointer;transition:border-color .2s,box-shadow .4s,background .2s}
.game .lv-gap::before{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#0b0b10;border:2px solid #5a5a68;transition:border-color .2s,background .2s}
.game .lv-gap:not(.filled)::after{content:attr(data-n);color:var(--muted);font-size:.7em;font-weight:800}
.game .lv-gap.ph{min-width:3.4em;cursor:default}
.game .lv-gap.ph::after{content:"?";color:#5a5a68}
.game .lv-gap.filled{border-style:solid;border-color:var(--gold);background:#17150d;touch-action:none}
.game .lv-gap.filled::before{border-color:var(--gold);background:var(--gold)}
.game .lv-gap.sel,.game .lv-gap.target{border-color:var(--gold);border-style:solid;box-shadow:0 0 18px rgba(255,170,40,.35)}
.game .lv-gap:hover:not(.ph){border-color:rgba(255,170,40,.8)}
.game .lv-gap.ok{border-color:#ffe38a;background:#241f0e;color:#fff;box-shadow:0 0 16px rgba(255,210,74,.6)}
.game .lv-gap.dragging{opacity:.4}
.game .lv-verse.lit{color:#fff6d4;text-shadow:0 0 14px rgba(255,210,74,.5)}
.game .lv-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:26px auto 0;padding-top:20px;border-top:1px dashed var(--line)}
.game .lv-chip{padding:10px 18px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:#12121a;color:var(--text);font:600 1.05rem system-ui,sans-serif;cursor:pointer;touch-action:none;transition:border-color .2s,box-shadow .3s,opacity .2s,transform .15s}
.game .lv-chip:hover:not([disabled]){border-color:rgba(255,170,40,.8);transform:translateY(-2px)}
.game .lv-chip.sel{border-color:var(--gold);background:#17150d;box-shadow:0 0 16px rgba(255,170,40,.3)}
.game .lv-chip.used{opacity:.22;pointer-events:none}
.game .lv-chip.back{color:#5a5a68;cursor:default;min-width:76px;text-align:center}
.game .lv-chip.dragging{opacity:.4}
.lv-ghost{position:fixed;z-index:300;transform:translate(-50%,-130%);pointer-events:none;padding:9px 16px;border-radius:12px;background:var(--gold);color:#111;font:800 1.05rem system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.5)}
@media(max-width:700px){
  .game .lv-verse{font-size:1.18rem;line-height:2.5}
  .game .lv-gap{min-width:4.4em}
  .game .lv-chip{padding:9px 14px;font-size:1rem}
}

/* ---------- Wer sagt's ---------- */
.game .wq{position:relative;z-index:2;display:flex;flex-direction:column;gap:100px;padding-top:10px}
.game .wq-people,.game .wq-quotes{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px}
.game .wq-p,.game .wq-q{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 12px;border-radius:14px;border:1px solid var(--line);background:#12121a;color:var(--text);cursor:pointer;touch-action:none;transition:border-color .2s,box-shadow .4s,transform .15s;font-family:inherit}
.game .wq-p{min-height:72px;font:800 1.1rem system-ui,sans-serif}
.game .wq-q{min-height:112px;font:600 .95rem/1.4 system-ui,sans-serif}
.game .wq-p::after,.game .wq-q::before{content:"";position:absolute;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#0b0b10;border:2px solid #5a5a68;transition:border-color .2s,background .2s}
.game .wq-p::after{bottom:-6px}
.game .wq-q::before{top:-6px}
.game .wq-p:hover:not(.back),.game .wq-q:hover:not(.back){border-color:rgba(255,170,40,.7);transform:translateY(-2px)}
.game .wq-p.paired,.game .wq-q.paired{border-color:rgba(255,210,74,.7);background:#17150d}
.game .wq-p.paired::after,.game .wq-q.paired::before{border-color:var(--gold);background:var(--gold)}
.game .wq-p.sel,.game .wq-q.sel,.game .wq .target{border-color:var(--gold);box-shadow:0 0 20px rgba(255,170,40,.3);background:#17150d}
.game .wq-p.ok,.game .wq-q.ok{border-color:#ffe38a;box-shadow:0 0 16px rgba(255,210,74,.5)}
.game .wq-p.back,.game .wq-q.back{color:#5a5a68;cursor:default}
.game .wq .dragging{opacity:.5}
.game .g-wires path.drag{stroke:var(--gold);opacity:.6;stroke-dasharray:6 8}
@media(max-width:820px){
  .game .wq{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:46px;gap:0 46px;align-items:stretch}
  .game .wq-people,.game .wq-quotes{grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px;height:100%}
  .game .wq-p{min-height:78px;font-size:1rem;padding:10px 8px}
  .game .wq-q{min-height:78px;font-size:.88rem;padding:10px 10px}
  .game .wq-p::after{left:auto;right:-6px;bottom:auto;top:50%;margin:-6px 0 0 0}
  .game .wq-q::before{left:-6px;top:50%;margin:-6px 0 0 0}
}

/* ---------- Übersichtsseite ---------- */
.game .bg-games{display:grid;gap:16px;margin:0 0 22px}
@media(min-width:900px){.game .bg-games{grid-template-columns:repeat(3,1fr)}}
.game .bg-card{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);text-decoration:none;transition:border-color .25s,box-shadow .5s,transform .2s}
.game .bg-card:hover{border-color:var(--gold);box-shadow:0 0 28px rgba(255,170,40,.16);transform:translateY(-3px)}
.game .bg-card .bg-ico{width:64px;height:64px;color:var(--gold)}
.game .bg-card .bg-kind{font:800 .7rem system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.game .bg-card h2{margin:0;font-family:var(--display);text-transform:uppercase;font-size:2rem;line-height:1.05}
.game .bg-card p{margin:0;color:#dcdae3;line-height:1.55;flex:1}
.game .bg-card .bg-tags{display:flex;flex-wrap:wrap;gap:6px}
.game .bg-card .bg-tags span{font:700 .72rem system-ui,sans-serif;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.game .bg-card .bg-go{margin-top:6px;font-weight:800;color:var(--gold)}
.game .bg-card:hover .bg-go{text-decoration:underline}

/* ---------- v2 ---------- */
.game .wq-field .g-source{display:none}
.game .wq-field .g-fbulb::after{display:none}
.game .wq-field{padding-top:0}
.game .wq-field .wq{padding-top:128px}
@media(max-width:700px){.game .wq-field .wq{padding-top:92px}}
.game .lv-gap{height:2em;min-width:5.8em;line-height:1.7}
.game .bg-faq-jump{margin:18px 0 0}
.game .bg-faq-jump a{color:var(--gold);font-weight:800;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.game .bg-faq-jump a span{font-weight:500;color:var(--gold);opacity:.85}
.game .bg-faq-jump a:hover{border-bottom-color:var(--gold)}
.game .bg-all{margin:18px 0 0;text-align:center}
.game .bg-more-games h2{margin:0 0 12px;font-family:var(--display);text-transform:uppercase;font-size:1.7rem}
.game .bg-all .btn{background:transparent;border:2px solid var(--gold);color:var(--text);box-shadow:none}
.game .bg-all .btn:hover{background:rgba(255,210,74,.14);color:var(--text)}

/* Ohne Namen spielen */
.game .g-hint a{color:var(--gold);text-decoration:underline}
.game .g-anon-wrap{text-align:center;margin:16px 0 0}
.game .g-anon{background:none;border:0;padding:6px 10px;color:var(--gold);font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.game .g-anon:hover{opacity:.85}
.game .g-anon-wrap span{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}

.game .g-pin-label{display:block;margin:14px 0 6px;font-size:.9rem;font-weight:700;color:var(--muted)}
.game .g-input.g-pin{max-width:9rem;letter-spacing:.35em;text-align:center}

/* Mit Namen / Anonym */
.game .g-who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.game .g-who-b{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 10px;border:1px solid var(--line);border-radius:14px;background:#0f0f16;color:var(--text);cursor:pointer;font:inherit;transition:border-color .25s,background .25s,box-shadow .4s}
.game .g-who-b b{font-size:1.05rem}
.game .g-who-b small{color:var(--muted);font-size:.8rem}
.game .g-who-b.on{border-color:var(--gold);background:#17150d;box-shadow:0 0 22px rgba(255,170,40,.15)}
.game .g-who-b:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.game #g-name-box[hidden],.game #g-anon-hint[hidden]{display:none}
/* Prüf-Häkchen */
.game .g-pin-row{display:flex;align-items:center;gap:12px}
.game .g-pin-ind{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#0b0b10;color:#5d5b69;display:grid;place-items:center;cursor:pointer;padding:0;transition:color .3s,border-color .3s,box-shadow .5s,background .3s}
.game .g-pin-ind .xx{display:none}
.game .g-pin-ind[data-s=ok]{color:#1a1200;background:var(--gold);border-color:var(--gold);box-shadow:0 0 22px rgba(255,200,60,.6)}
.game .g-pin-ind[data-s=bad]{color:#fff;background:#b3261e;border-color:#ff6b61}
.game .g-pin-ind[data-s=bad] .ck{display:none}
.game .g-pin-ind[data-s=bad] .xx{display:block}
.game .g-pin-ind[data-s=busy]{border-color:var(--gold);animation:gpinpulse 1s ease-in-out infinite}
@keyframes gpinpulse{50%{box-shadow:0 0 14px rgba(255,200,60,.5)}}
.game .g-pin-ind:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.game .g-pin-msg{min-height:1.2em;margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.game .g-pin-msg.ok{color:var(--gold)}
.game .g-pin-msg.bad{color:#ff8a80}
/* Hinweis Bibeltext */
.game .g-sl{display:inline-block;margin:6px 0 0;padding:0;background:none;border:0;color:var(--muted);font:inherit;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.game .g-sl:hover{color:var(--gold)}
.game .g-sl[hidden]{display:none}
.game .g-bar-name .g-sl{display:block}
.g-sl-dlg{border:1px solid var(--gold,#ffd24a);border-radius:16px;background:#101018;color:#f7f4ec;padding:0;max-width:min(92vw,440px);width:100%}
.g-sl-dlg::backdrop{background:rgba(0,0,0,.7)}
.g-sl-box{padding:24px 22px}
.g-sl-box h2{margin:0 0 12px;font-size:1.3rem}
.g-sl-box p{margin:0 0 12px;line-height:1.55;color:#b8b6c1}
.g-sl-box .g-sl-legal{color:#f7f4ec;padding:12px 14px;border:1px solid #2a2a36;border-radius:10px;background:#0b0b10;font-size:.92rem}
.g-sl-box a{color:#ffd24a}
.g-sl-close{width:100%;margin-top:6px}

/* Erklär-Animation (Lückenvers, Wer sagt's) */
.game .bgd{padding:84px 12px 44px}
.game .bgd .g-fbulb{position:absolute;width:64px;top:2px;right:8px}
.game .bgd .g-fbulb .halo{width:300%}
.game .bgd-verse{margin:0 0 18px;text-align:center;font:600 1.05rem/2 system-ui,sans-serif}
.game .bgd-gap{display:inline-block;min-width:3.6em;padding:0 8px;border-bottom:2px dashed rgba(255,210,74,.7);text-align:center}
.game .bgd-gap i{font-style:normal;color:var(--gold);opacity:0;transition:opacity .4s}
.game .bgd.st1 .g1 i,.game .bgd.st2 .g2 i,.game .bgd.st3 .g2 i,.game .bgd.st2 .g1 i,.game .bgd.st3 .g1 i{opacity:1}
.game .bgd.st1 .g1,.game .bgd.st2 .g2,.game .bgd.st2 .g1,.game .bgd.st3 .g1,.game .bgd.st3 .g2{border-bottom-style:solid}
.game .bgd-bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.game .bgd .chip{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#12121a;font:600 .9rem system-ui,sans-serif;transition:opacity .4s,border-color .4s}
.game .bgd.st1 .c1,.game .bgd.st2 .c2,.game .bgd.st2 .c1,.game .bgd.st3 .c1,.game .bgd.st3 .c2{opacity:.25}
.game .bgd:not(.st1) .c1,.game .bgd.st1:not(.st2) .c2{border-color:var(--gold)}
.game .bgd-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.game .bgd-row span{display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 8px;border:1px solid var(--line);border-radius:12px;background:#12121a;font:600 .85rem/1.35 system-ui,sans-serif;transition:border-color .4s,box-shadow .6s}
.game .bgd-people span{font-weight:800;font-size:1rem}
.game .bgd-quotes span{min-height:62px}
.game .bgd-wires{display:block;width:100%;height:56px}
.game .bgd-wires path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s ease,filter .6s}
.game .bgd.st1 .w1,.game .bgd.st2 .w1,.game .bgd.st3 .w1,.game .bgd.st2 .w2,.game .bgd.st3 .w2{opacity:1}
.game .bgd.lit .bgd-wires path{filter:drop-shadow(0 0 5px rgba(255,200,60,.9))}
.game .bgd.lit .bgd-row span,.game .bgd.lit .bgd-gap{border-color:var(--gold)}
.game .bgd-state{position:absolute;left:0;right:0;bottom:12px}