/* FIV App: Quiz, Spiele, Spots (Dark-Luxury, Gold #C9A96A) */
.sbox{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 20px;border:1px solid var(--line);border-radius:99px;background:var(--surf);text-decoration:none;color:var(--mut);margin-top:6px}
.sbox svg.i{width:20px;height:20px;flex:none}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:99px;border:1px solid var(--line);background:var(--surf);color:var(--ink);text-decoration:none;font-weight:500;font-size:15px}
.btn2 svg.i{width:20px;height:20px}
.btn2--c{display:flex;margin:14px auto 0;max-width:320px}
.ib--b{border:1px solid var(--line);background:var(--surf)}
.ib--g{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.h-sm{margin:18px 0 10px;font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.chip.is-on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
button.chip{cursor:pointer}

/* Quiz */
.qhead{display:flex;gap:16px;align-items:center;margin:8px var(--pad) 0;padding:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,var(--surf),color-mix(in srgb,var(--acc) 14%,var(--surf)))}
.qhead__l{flex:none;width:76px;height:76px;border-radius:50%;border:2px solid var(--acc);display:flex;flex-direction:column;align-items:center;justify-content:center}
.qhead__l .kick{font-size:9px}
.qhead__n{font:600 30px/1 var(--serif);color:var(--acc)}
.qhead__m{flex:1;min-width:0}
.qhead__t{font:600 22px/1.15 var(--serif)}
.qhead__m p{margin:4px 0 10px;font-size:13px;color:var(--mut)}
.xp{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.xp i{display:block;height:100%;background:var(--acc);border-radius:6px;transition:width .6s}
.qstats{display:flex;gap:18px;padding:14px var(--pad) 4px;font-size:13px;color:var(--mut)}
.qstats span{display:inline-flex;align-items:center;gap:6px}
.qstats b{color:var(--ink)}
.qstats svg.i{width:18px;height:18px;color:var(--acc)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px var(--pad) 0}
.qtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:164px;padding:14px 10px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);text-decoration:none;text-align:center;transition:transform .15s,border-color .2s}
.qtile:active{transform:scale(.97)}
.qtile:hover{border-color:var(--acc)}
.qtile__m{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--acc) calc(var(--p)*1%),var(--line) 0);margin-bottom:8px}
.qtile__m::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surf)}
.qtile__m i{position:relative;font:500 26px/1 var(--serif);font-style:normal;color:var(--acc)}
.qtile b{font:600 15px/1.2 var(--serif)}
.qtile small{font-size:12px;color:var(--mut)}
.qplay{padding:6px var(--pad) 40px}
.qbar{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--acc);transition:width .4s}
.qmeta{display:flex;justify-content:space-between;align-items:center;margin:12px 0 22px;font-size:13px;color:var(--mut)}
.qmeta svg.i{width:16px;height:16px;color:var(--acc);vertical-align:-3px}
.qq{font:500 26px/1.25 var(--serif);margin:0 0 24px;outline:0}
.qblank{display:inline-block;min-width:64px;border-bottom:2px solid var(--acc);color:transparent;line-height:.9}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{min-height:56px;padding:12px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surf);text-align:left;font-size:16px;line-height:1.3;transition:transform .15s,border-color .2s,background .2s}
.qopt:not(:disabled):active{transform:scale(.98)}
.qopt:not(:disabled):hover{border-color:var(--acc)}
.qopt:disabled{cursor:default;opacity:.55}
.qopt.is-ok{opacity:1;border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,var(--surf));font-weight:600}
.qopt.is-bad{opacity:1;border-color:#c0645a;background:color-mix(in srgb,#c0645a 22%,var(--surf));animation:shake .35s}
.qopt.pop{animation:pop2 .35s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes pop2{50%{transform:scale(1.04)}}
.qfb{min-height:28px;margin:16px 0 4px;font-size:15px;font-weight:500}
.qfb--ok{color:var(--acc)}
.qfb--bad{color:var(--ink)}
.qnext{width:100%;border:0}
.qnext[hidden]{display:none}
.qres{padding:16px var(--pad) 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.qres__ring{position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--acc) calc(var(--p)*1%),var(--line) 0);margin:10px 0;animation:pop2 .6s}
.qres__ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg)}
.qres__ring b{position:relative;font:600 38px var(--serif);color:var(--acc)}
.qres h2{margin:0;font:600 28px var(--serif)}
.qres p{margin:0}
.qres__s{font-size:16px}
.qres__x{font-size:14px;color:var(--mut)}
.qres .cta,.qres .btn2{width:100%;max-width:340px}
.qres .cta{border:0;margin-top:14px}

/* Spiele */
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px var(--pad) 0}
.gcard{display:flex;flex-direction:column;gap:6px;min-height:168px;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,var(--surf),color-mix(in srgb,var(--acc) 10%,var(--surf)));text-decoration:none;transition:transform .15s,border-color .2s}
.gcard:active{transform:scale(.97)}
.gcard:hover{border-color:var(--acc)}
.gcard svg.i{width:30px;height:30px;color:var(--acc);margin-bottom:8px}
.gcard b{font:600 18px/1.2 var(--serif)}
.gcard small{font-size:12.5px;line-height:1.4;color:var(--mut)}
.quote{margin:0;padding:22px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line)}
.quote blockquote{margin:0}
.quote svg.i{width:26px;height:26px;color:var(--acc)}
.quote p{margin:10px 0 12px;font:italic 400 20px/1.4 var(--serif)}
.quote figcaption{font-size:13px;color:var(--mut)}
.deck{padding:10px var(--pad) 40px}
.deck__stack{position:relative;height:min(58vh,440px);margin:6px 8px 0}
.dcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;text-align:center;border-radius:26px;border:1px solid color-mix(in srgb,var(--acc) 55%,var(--line));background:linear-gradient(160deg,var(--surf),color-mix(in srgb,var(--acc) 12%,var(--surf)));touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:0;overflow-y:auto}
.dcard:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.dcard--b1,.dcard--b2{pointer-events:none;background:var(--surf);border-color:var(--line)}
.dcard--b1{transform:translateY(10px) scale(.96);opacity:.8}
.dcard--b2{transform:translateY(20px) scale(.92);opacity:.5}
.dcard__n{position:absolute;top:18px;left:0;right:0;font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.dcard__q{margin:0;font:500 26px/1.3 var(--serif)}
.dcard__a{margin:18px 0 0;font:400 16px/1.55 var(--sans);color:var(--mut)}
.dcard__a[hidden]{display:none}
.dcard.in-r{animation:inr .3s}
.dcard.in-l{animation:inl .3s}
@keyframes inr{from{transform:translateX(40px) scale(.96);opacity:0}}
@keyframes inl{from{transform:translateX(-40px) scale(.96);opacity:0}}
.deck__ctl{display:flex;align-items:center;justify-content:space-between;margin-top:34px}
.deck__h{font-size:12px;color:var(--mut)}
.bingo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px var(--pad) 0}
.bcell{aspect-ratio:1/1;display:grid;place-items:center;padding:3px;border-radius:14px;border:1px solid var(--line);background:var(--surf);font:600 10.5px/1.2 var(--sans);text-align:center;overflow-wrap:anywhere;transition:transform .15s,background .2s,color .2s}
.bcell:active{transform:scale(.94)}
.bcell[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);transform:scale(.96)}
.bingo.win{animation:pop2 .5s 2}
.bscore{padding:14px var(--pad) 0;text-align:center;font-size:13px;color:var(--mut)}
.runbox{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);max-width:360px;margin:0 auto;background:#0b0b0b}
.runbox canvas{display:block;width:100%;height:auto;touch-action:none}
.runov{position:absolute;inset:0;background:rgba(0,0,0,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#f6f4ef}
.runov[hidden]{display:none}
.runov b{font:600 30px var(--serif)}
.runov .cta{border:0;margin:0;min-width:160px}
.runctl{display:flex;gap:10px;justify-content:center;margin-top:14px}
.runctl .btn2{flex:1;max-width:170px}

/* Spots */
.spots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.spot-tile{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,var(--surf),color-mix(in srgb,var(--acc) 10%,var(--surf)));text-decoration:none}
.spot-tile svg.i{width:28px;height:28px;color:var(--acc)}
.spot-tile b{font:600 17px/1.2 var(--serif)}
.spot-tile small{font-size:12px;line-height:1.4;color:var(--mut)}
.spot{padding:16px 0;border-bottom:1px solid var(--line)}
.spot h3{margin:6px 0 6px;font:500 19px/1.2 var(--serif)}
.spot p{margin:0 0 4px;font-size:14px;color:var(--mut);display:flex;gap:6px;align-items:flex-start}
.spot p svg.i{width:16px;height:16px;flex:none;margin-top:2px}
.spot__r b{color:var(--acc)}
.spot__a{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.spot__a .chip{min-height:44px;font-size:13px}
.spot__a .chip svg.i{width:16px;height:16px;margin-right:6px}

.set__r .seg button{min-width:44px;padding:0 9px}
.set__r>span:first-of-type{white-space:nowrap}
.gcard{min-height:160px}