/* Lügner – Hinterzimmer: dunkler Tisch, knochenweiße Karten, ein einziges Signalrot für „Lügner!“ */
:root{
  --bg:#ece5d8;--sf:#f7f2e8;--sf2:#e3dbcc;--ink:#171412;--mu:#6b6258;--ln:#d3c9b8;
  --tb:#1a1614;--tb2:#0f0d0c;--bone:#f4eee3;--card-ink:#161311;--red:#e0301e;--card-red:#c4261b;--ok:#2f9a62;
  --pri:var(--ink);--on-pri:var(--bg);
  --disp:"Avenir Next Condensed","AvenirNextCondensed-Bold","Roboto Condensed","sans-serif-condensed","Bahnschrift","Arial Narrow",Impact,system-ui,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --s0:#e0683f;--s1:#5b8fd0;--s2:#d8a640;--s3:#55a77d;--s4:#a083d8;--s5:#d77aa0;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#100e0d;--sf:#1b1816;--sf2:#25211e;--ink:#f2ece1;--mu:#9b9288;--ln:#312c28;--tb:#1e1a17;--tb2:#141110;color-scheme:dark}}
:root[data-theme=dark]{--bg:#100e0d;--sf:#1b1816;--sf2:#25211e;--ink:#f2ece1;--mu:#9b9288;--ln:#312c28;--tb:#1e1a17;--tb2:#141110;color-scheme:dark}
html{height:100%;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
*{box-sizing:border-box}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input{font:inherit;color:inherit}
button,[role=button]{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit}
[hidden]{display:none!important}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(10px + env(safe-area-inset-bottom,0px))}
.view{flex:1;display:flex;flex-direction:column;min-height:0}

/* Knöpfe & Felder */
.btn{min-height:52px;padding:0 18px;border-radius:12px;border:1px solid var(--ln);background:var(--sf);font-weight:700;cursor:pointer;transition:transform .1s ease-out,background .1s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.pri{background:var(--pri);color:var(--on-pri);border-color:transparent}
.btn.bad{background:var(--red);color:#fff;border-color:transparent}
.btn.ghost{background:transparent}
.btn.sm{min-height:42px;padding:0 14px;font-size:15px;border-radius:10px}
.btn:focus-visible,input:focus-visible,summary:focus-visible,.seg button:focus-visible,.rk:focus-visible,.card:focus-visible,.ib:focus-visible,.sw:focus-visible{outline:3px solid var(--s2);outline-offset:2px}
input{min-height:52px;border-radius:12px;border:1px solid var(--ln);background:var(--sf);padding:0 14px;min-width:0;width:100%;font-size:16px}
.fld{display:flex;flex-direction:column;gap:6px;font-weight:600}
.fld span{font-size:13px;color:var(--mu);text-transform:uppercase;letter-spacing:.08em}
.row{display:flex;gap:10px}
.row input{flex:1;text-transform:uppercase;letter-spacing:.2em;font-weight:800;text-align:center}
.row .btn{flex:none}
.note{min-height:1.4em;margin:4px 0 0;color:var(--mu);font-size:15px;text-align:center}
.note.err{color:var(--red)}

/* Kopfleiste */
.bar{display:flex;align-items:center;gap:10px;min-height:40px;margin-bottom:8px}
.logo{font:800 22px/1 var(--disp);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em}
.room{flex:1;font:700 13px/1 system-ui,sans-serif;letter-spacing:.18em;color:var(--mu)}
body[data-view=start] .logo{visibility:hidden}
.bar-r{display:flex;gap:8px;margin-left:auto}
.ib{width:40px;height:40px;border-radius:10px;border:1px solid var(--ln);background:var(--sf);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;font-size:16px}
.ib.adm{background:var(--s2);color:#1d1404;border:0}

/* Startbildschirm */
#v-start{justify-content:center;gap:20px;padding:4px 0}
.hero{text-align:center}
.hero h1{margin:32px 0 0;font:800 clamp(64px,22vw,112px)/.86 var(--disp);font-stretch:75%;text-transform:uppercase;letter-spacing:-.01em}
.tag{margin:12px auto 0;max-width:32ch;color:var(--mu)}
.fan{display:flex;justify-content:center;padding:10px 0 0;perspective:800px}
.fan span{--cw:clamp(52px,15vw,70px);width:var(--cw);aspect-ratio:5/7;margin-left:calc(var(--cw) * -.42);background:var(--bone);color:var(--card-ink);border:1px solid rgba(0,0,0,.18);border-radius:8px;
  display:grid;place-items:center;font:700 clamp(28px,8vw,38px)/1 var(--serif);box-shadow:-3px 3px 10px rgba(0,0,0,.25);
  transform:rotate(calc((var(--i) - 1.5) * 9deg)) translateY(calc(var(--d) * 1px));transform-origin:50% 120%}
.fan span.r,.fan b.r{color:var(--card-red)}
.fan span:first-child{margin-left:0}
.fan span:nth-child(1){--i:0;--d:8}.fan span:nth-child(2){--i:1;--d:0}.fan span:nth-child(3){--i:2;--d:0}.fan span:nth-child(4){--i:3;--d:8}
.fan .flip{position:relative;transform-style:preserve-3d;background:none;border:0;animation:peek 2.4s .4s cubic-bezier(.5,0,.3,1) both}
.fan .flip b,.fan .flip i{position:absolute;inset:0;display:grid;place-items:center;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bone);border:1px solid rgba(0,0,0,.18)}
.fan .flip i{transform:rotateY(180deg);background:var(--tb2) repeating-linear-gradient(135deg,transparent 0 5px,rgba(224,48,30,.55) 5px 6px);border:3px solid var(--bone)}
.fan .flip{box-shadow:none}
@keyframes peek{0%,100%{transform:rotate(13.5deg) translateY(8px) rotateY(0)}35%,65%{transform:rotate(13.5deg) translateY(8px) rotateY(180deg)}}
.panel{background:var(--sf);border:1px solid var(--ln);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.panel>.btn{width:100%}
.or{display:flex;align-items:center;gap:10px;color:var(--mu);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--ln)}
.invite{margin:0;padding:10px 12px;border-radius:10px;background:var(--sf2);font-weight:600;text-align:center}
.rules{background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:0 16px}
.rules summary{cursor:pointer;font-weight:700;padding:14px 0}
.rules p{margin:0 0 12px;color:var(--mu)}
.foot{text-align:center;font-size:14px;color:var(--mu)}

/* Kartenrücken: dunkel mit roter Schraffur */
.bk,.pc,.fc.bk,.mini.bk{background:var(--tb2) repeating-linear-gradient(135deg,transparent 0 5px,rgba(224,48,30,.55) 5px 6px);border:2px solid var(--bone)}

/* Monogramme statt Emoji: jeder Platz hat eine Farbe */
.av{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;flex:none;font:800 17px/1 var(--disp);font-stretch:75%;color:#15110f;background:var(--s0)}
.av.s1{background:var(--s1)}.av.s2{background:var(--s2)}.av.s3{background:var(--s3)}.av.s4{background:var(--s4)}.av.s5{background:var(--s5)}

/* Lobby */
#v-lobby{gap:12px}
.lob-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:var(--tb);color:var(--bone);border-radius:18px;padding:16px 18px}
.lob-head .btn{background:var(--bone);color:var(--card-ink);border-color:transparent}
.sub{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.code{margin:4px 0 0;font:800 46px/1 var(--disp);font-stretch:75%;letter-spacing:.12em}
.players{list-style:none;margin:0;padding:0;background:var(--sf);border:1px solid var(--ln);border-radius:16px;overflow:hidden}
.players li{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:56px}
.players li+li{border-top:1px solid var(--ln)}
.players .nm{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players .tg{font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:.1em}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.dot.off{background:var(--ln)}
.players .x{min-height:36px;min-width:36px;padding:0;border-radius:8px;font-size:18px;line-height:1}
.players li.free{color:var(--mu);font-style:italic}
.settings{background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:4px 16px}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.set+.set{border-top:1px solid var(--ln)}
.set h3{margin:0;font-size:16px}
.set p{margin:2px 0 0;font-size:14px;color:var(--mu)}
.seg{display:flex;background:var(--sf2);border:1px solid var(--ln);border-radius:10px;padding:3px;flex:none}
.seg button{min-width:40px;min-height:38px;border:0;background:transparent;border-radius:7px;font-weight:700;cursor:pointer;padding:0 8px}
.seg button[aria-pressed=true]{background:var(--pri);color:var(--on-pri)}
.seg button:disabled{cursor:default}
.seg button:disabled:not([aria-pressed=true]){opacity:.35}
.sw{position:relative;width:54px;height:32px;border-radius:99px;border:0;background:var(--ln);cursor:pointer;flex:none;transition:background .12s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .12s}
.sw[aria-checked=true]{background:var(--pri)}
.sw[aria-checked=true]::after{transform:translateX(22px);background:var(--bg)}
.sw:disabled{opacity:.6;cursor:default}
.lob-act{display:flex;flex-direction:column;gap:8px;margin-top:auto}

/* Spiel: alles auf einen Bildschirm, kein Scrollen */
body[data-view=game] #app{height:100dvh;min-height:0;overflow:hidden}
#v-game{gap:8px}
#opps{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:6px}
#opps[data-n="1"]{--n:1}#opps[data-n="2"]{--n:2}#opps[data-n="3"]{--n:3}#opps[data-n="4"]{--n:4}#opps[data-n="5"]{--n:5}
.opp{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;border-radius:12px;background:var(--sf);border:2px solid transparent;min-width:0;transition:border-color .12s,transform .12s}
.opp .n{font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.opp .c{font:800 15px/1 var(--disp);font-stretch:75%;color:var(--mu)}
.opp.act{border-color:var(--ink);transform:translateY(-2px)}
.opp.off{opacity:.5}
.opp.done{opacity:.6}.opp.done .c{color:var(--ok);font-size:13px}
.opp.lost .c{color:var(--red);font-size:13px}

#table{flex:1;min-height:150px;position:relative;overflow:hidden;border-radius:18px;padding:12px;color:var(--bone);
  background:radial-gradient(120% 90% at 50% 30%,var(--tb),var(--tb2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#badge{display:flex;flex-direction:column;align-items:center;line-height:1}
#badge small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;opacity:.6}
#badge strong{font:800 clamp(34px,11vw,56px)/1 var(--disp);font-stretch:75%;text-transform:uppercase;margin-top:6px}
#pilew{position:relative;width:110px;height:78px;flex:none}
#pile{position:absolute;inset:0}
.pc{position:absolute;left:50%;top:50%;width:42px;height:60px;margin:-30px 0 0 -21px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.cnt{position:absolute;right:6px;bottom:-2px;background:var(--bone);color:var(--card-ink);font:800 15px/1 var(--disp);font-stretch:75%;border-radius:6px;padding:4px 7px}
.ph{position:absolute;inset:6px 24px;border:2px dashed rgba(244,238,227,.25);border-radius:8px;display:grid;place-items:center;font-size:12px;color:rgba(244,238,227,.5)}
#rv{display:flex;gap:5px;justify-content:center;align-items:center;flex-wrap:wrap}
#rv:empty{display:none}
.rc{width:40px;height:58px;perspective:600px}
.ri{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.rc.flip .ri{transform:rotateY(180deg)}
.ri>div{position:absolute;inset:0;margin:0;width:auto;height:auto;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ri .fr{transform:rotateY(180deg);padding:3px 4px;font-size:14px}
.ri .fr i{font-size:16px}
.fr.ok{box-shadow:0 0 0 3px var(--ok)}.fr.no{box-shadow:0 0 0 3px var(--red)}
#msg{min-height:2.6em;margin:0;text-align:center;font-size:14px;max-width:36ch;opacity:.9}
#msg.err{color:#ff8a7e;opacity:1}
#ov{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5;padding:12px}
#ov:empty{display:none}
.ovt{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:rgba(15,13,12,.94);padding:16px 22px;border-radius:16px;max-width:100%;max-height:100%;overflow:auto;animation:pop .16s ease-out}
.ovt small{font-size:13px;opacity:.75}
.ovt .big{font:800 clamp(30px,9vw,44px)/1 var(--disp);font-stretch:75%;text-transform:uppercase}
.stamp{font:800 clamp(44px,15vw,72px)/1 var(--disp);font-stretch:75%;text-transform:uppercase;color:var(--red);border:4px solid var(--red);border-radius:8px;padding:2px 12px 0;transform:rotate(-6deg)}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:180px}
.rank li{display:flex;gap:10px;align-items:center;font-weight:700;text-align:left}
.rank b{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:var(--bone);color:var(--card-ink);font:800 15px/1 var(--disp);flex:none}
.rank li.lose b{background:var(--red);color:#fff}
.rank li.lose{color:#ff8a7e}
@keyframes pop{from{transform:scale(.85);opacity:0}}

/* Eigene Zeile */
.me{display:flex;align-items:center;gap:10px;padding:2px 2px 0}
.me .av{width:26px;height:26px;font-size:14px;border-radius:7px}
.me .nm{flex:1;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .cn{color:var(--mu);font-size:14px}
.me.act .nm{font:800 20px/1 var(--disp);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em}

/* Steuerung */
#ctrl{display:flex;gap:8px;min-height:56px;align-items:stretch}
#ctrl>.note{flex:1;align-self:center;margin:0}
#ctrl>.btn{flex:1}
#ctrl.act .btn{min-height:58px;font-size:17px}
.btn.liar{flex:1;background:var(--red);color:#fff;border:0;font:800 26px/1 var(--disp)!important;font-stretch:75%!important;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 3px 0 #8f1c12}
.btn.liar:active{transform:translateY(2px);box-shadow:0 1px 0 #8f1c12}
.btn.go{flex:1.25}
#ctrl>.btn.chg{flex:none;width:52px;padding:0;background:var(--bone);color:var(--card-ink);border:1px solid rgba(0,0,0,.2);font:700 22px/1 var(--serif);position:relative}
.btn.chg::after{content:"ändern";position:absolute;left:0;right:0;bottom:4px;font:600 11px/1 system-ui,sans-serif;color:var(--mu)}
#ctrl.picking{flex-direction:column;gap:8px}
.ask{margin:0;font:800 22px/1 var(--disp);font-stretch:75%;text-transform:uppercase;text-align:center}
.rks{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.rk{aspect-ratio:5/6;min-height:44px;max-height:76px;border-radius:8px;border:1px solid rgba(0,0,0,.2);background:var(--bone);color:var(--card-ink);cursor:pointer;
  font:700 22px/1 var(--serif);display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .1s ease-out}
.rk:active{transform:translateY(2px)}

/* Hand: Fächer aus Stapeln, eine Reihe */
#hand{--w:58px;--h:84px;display:flex;justify-content:center;align-items:flex-end;padding:34px 8px 18px;min-height:calc(var(--h) + 52px)}
.stk{position:relative;flex:none;width:var(--w);height:var(--h);margin-left:var(--ml);transform:translateY(var(--y)) rotate(var(--rot));transform-origin:50% 100%;cursor:default;outline:0}
#hand.live .stk{cursor:pointer}
.stk:focus-visible .card:last-of-type{box-shadow:0 0 0 3px var(--s2)}
.card{position:absolute;left:0;top:0;width:var(--w);height:var(--h);background:var(--bone);color:var(--card-ink);border:1px solid rgba(0,0,0,.22);border-radius:7px;padding:4px 5px;
  display:flex;flex-direction:column;align-items:flex-start;font:700 17px/1 var(--serif);box-shadow:-3px 1px 6px rgba(0,0,0,.28);
  transform:translate(calc(var(--k,0) * 2px),calc(var(--k,0) * -6px));transition:transform .12s ease-out}
.card.r{color:var(--card-red)}
.card i{font-style:normal;font-size:20px;margin-top:3px}
.card b.t{letter-spacing:-.09em;margin-left:-2px}
.card.jk{color:#8a5a00}
.card.jk b{font-size:12px;letter-spacing:.02em}
.stk .card.sel{transform:translate(calc(var(--k,0) * 2px),calc(var(--k,0) * -6px - 24px));box-shadow:0 0 0 3px var(--s2),0 8px 12px rgba(0,0,0,.35)}
#hand.live .stk:active .card:not(.sel):last-of-type{transform:translateY(-6px)}
.num{position:absolute;left:3px;bottom:6px;z-index:3;background:var(--tb2);color:var(--bone);font:800 13px/1 var(--disp);font-stretch:75%;padding:3px 5px;border-radius:5px;border:1px solid rgba(244,238,227,.25);pointer-events:none}
.rk[data-n]{position:relative}
.rk[data-n]::after{content:attr(data-n);position:absolute;right:-4px;top:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--s2);color:#1d1404;font:800 12px/18px system-ui,sans-serif;text-align:center}

/* Hinweis-Banner */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;z-index:20;background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.consent p{margin:0;font-size:14px;color:var(--mu)}

/* Abgelegte Vierlinge (Tischecke) */
#tray{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:8px;height:36px}
#tray .lb{font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.55}
#tray .mins{display:flex;align-items:center;padding-right:6px}
.mini{width:24px;height:34px;margin-left:-11px;border-radius:4px;background:var(--bone);color:var(--card-ink);border:1px solid rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;font:700 12px/1 var(--serif);
  box-shadow:2px 2px 0 -1px var(--bone),2px 2px 0 0 rgba(0,0,0,.4),4px 4px 0 -1px var(--bone),4px 4px 0 0 rgba(0,0,0,.4)}
.mini:first-child{margin-left:0}
.mini.r{color:var(--card-red)}
.mini small{font-size:11px;line-height:1}
.mini.jk{color:#8a5a00}

/* Fliegende Karten */
#fly{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.fc{position:absolute;left:0;top:0;width:42px;height:60px;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,.35);will-change:transform}
.fc.card{margin:0;padding:4px 5px;font-size:15px}
.fc.card i{font-size:18px}

/* Kleine Rückmeldungen */
.land{animation:land .18s ease-out}
@keyframes land{from{scale:1.15}}
.stk.deal{animation:deal .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes deal{from{opacity:0;translate:0 24px}}
.card.new{animation:newc .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes newc{from{translate:0 -20px;opacity:.2}}

/* Tablet & PC */
@media (min-width:760px){
  #app{max-width:980px;padding-left:24px;padding-right:24px}
  #v-start,#v-lobby{max-width:520px;width:100%;margin:0 auto}
  #opps{display:flex;justify-content:center;gap:10px}
  .opp{flex-direction:row;gap:10px;padding:8px 14px 8px 8px;min-width:150px}
  .opp .n{font-size:15px;flex:1;text-align:left}
  .opp .c{font-size:20px}
  #table{min-height:240px}
  #badge strong{font-size:72px}
  #pilew{transform:scale(1.2);margin:8px 0}
  .rc{width:52px;height:74px}.ri .fr{font-size:18px}.ri .fr i{font-size:22px}
  #hand{--w:76px;--h:108px}
  .card{font-size:22px;padding:6px 7px}.card i{font-size:27px}
  #ctrl{max-width:640px;width:100%;margin:0 auto}
  .rk{font-size:28px}
}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{filter:brightness(1.08)}
  #hand.live .stk:hover .card:not(.sel):last-of-type{transform:translateY(-8px)}
  .rk:hover{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){*,.fan .flip{animation:none!important;transition:none!important}}

/* Datenschutzseite */
.doc{display:block;max-width:680px;line-height:1.6}
.doc h1{font:800 40px/1.1 var(--disp);font-stretch:75%;text-transform:uppercase;margin:12px 0 18px}
.doc h2{font-size:18px;margin:26px 0 6px}
.doc p{margin:0 0 12px}

/* Fenster (Einstellungen, Admin) */
dialog.sheet{width:min(520px,calc(100vw - 16px));max-height:min(86dvh,720px);border:0;border-radius:18px;padding:0 16px 16px;background:var(--sf);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:auto;overscroll-behavior:contain}
dialog.sheet::backdrop{background:rgba(8,6,5,.6)}
@media (max-width:600px){dialog.sheet{margin:auto auto calc(8px + env(safe-area-inset-bottom,0px));max-height:80dvh}}
.sh-head{position:sticky;top:0;background:var(--sf);display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px;z-index:1}
.sh-head h2{margin:0;font:800 24px/1 var(--disp);font-stretch:75%;text-transform:uppercase}
.sh-sec{padding:12px 0;border-top:1px solid var(--ln)}
.sh-sec h3{margin:0 0 8px;font-size:15px}
.sh-sec .set{padding:0}
.hint{margin:0 0 8px;font-size:14px;color:var(--mu)}
.seg.wide{display:flex;width:100%}
.seg.wide button{flex:1}
.btn.wide{width:100%;margin-top:4px}
.btn.gold{background:var(--s2);color:#1d1404;border:0}
.admin .sh-head{border-bottom:3px solid var(--s2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chip{min-height:38px;min-width:38px;padding:0 8px;border-radius:8px;font:700 16px/1 var(--serif)}
.chip.r{color:var(--card-red)}
.chip[aria-pressed=true]{background:var(--s2);color:#1d1404;border-color:transparent}
.minis{display:flex;flex-wrap:wrap;gap:6px}
.minis .mini{margin-left:0;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.mb{padding:0;border:0;background:none;cursor:pointer;border-radius:6px}
.mb:disabled{opacity:.5;cursor:default}
.peek{margin-top:12px}
.pn{margin:0 0 6px;font-weight:700;font-size:14px}
#code-sec .row input{text-align:left}

/* Einsatz */
.bet{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.bet h3{margin:0;font-size:16px}.bet p{margin:2px 0 0;font-size:14px;color:var(--mu)}
.bet .set{padding:0}.bet .hint{margin:0}.bet>.btn.sm{align-self:flex-start}
.bet .row input{letter-spacing:.3em}
.players .tg.coin{color:#1d1404;background:var(--s2);border-radius:5px;padding:3px 6px;letter-spacing:.04em}
#pot{position:absolute;top:12px;right:14px;margin:0;font:800 16px/1 var(--disp);font-stretch:75%;text-transform:uppercase;color:var(--s2);letter-spacing:.04em}
.opp.bet .av{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--s2)}
.ovt .won{color:var(--s2);opacity:1;font-weight:700}

/* Niedrige Handys (z. B. iPhone SE): alles etwas kompakter, damit nichts scrollt */
@media (max-height:720px) and (max-width:759px){
  .bar{min-height:34px;margin-bottom:4px}.ib{width:36px;height:36px}
  .opp{flex-direction:row;justify-content:center;gap:6px;padding:5px 4px}.opp .av{width:24px;height:24px;font-size:13px;border-radius:6px}
  .rk{aspect-ratio:auto;height:40px;min-height:0;font-size:19px}
  .ask{font-size:19px}
  #table{gap:4px;padding:8px}#pilew{height:58px;transform:scale(.8)}#badge strong{font-size:32px;margin-top:2px}
  #msg{min-height:0;font-size:13px}
  #hand{--w:52px;--h:76px;padding-top:28px;padding-bottom:12px}
}
.stake-in{flex:none;width:118px}
.stake-in input{min-height:42px;border-radius:10px;text-align:right;font-weight:800;letter-spacing:.02em;background:var(--sf2)}