:root{color-scheme:light dark;--bg:#f7f7f7;--surface:#fff;--text:#3c3c3c;--sub:#8a8a8a;--line:#e5e5e5;
--green:#58cc02;--green-d:#58a700;--blue:#1cb0f6;--blue-d:#1899d6;--red:#ff4b4b;--red-d:#ea2b2b;--yellow:#ffc800;--yellow-d:#e5b400;--purple:#ce82ff;--purple-d:#a568cc;--r:18px}
@media(prefers-color-scheme:dark){:root{--bg:#131f24;--surface:#1f2c33;--text:#f1f7fb;--sub:#8ea2ad;--line:#37464f}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:700;min-height:100dvh;line-height:1.3}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
h1{margin:0;font-size:26px;font-weight:800}

/* Buttons (Duolingo-Stil: dicker Unterrand, drückt sich ein) */
.btn{--c:var(--green);--d:var(--green-d);appearance:none;border:0;border-radius:16px;padding:14px 20px;background:var(--c);color:#fff;box-shadow:0 4px 0 var(--d);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .06s,box-shadow .06s;white-space:nowrap}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--d)}
.btn.blue{--c:var(--blue);--d:var(--blue-d)}
.btn.red{--c:var(--red);--d:var(--red-d)}
.btn.yellow{--c:var(--yellow);--d:var(--yellow-d);color:#7a5a00}
.btn.gray{background:var(--surface);color:var(--sub);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);padding:12px 16px}
.btn.gray:active{box-shadow:0 0 0 var(--line)}
.btn.sm{padding:9px 14px;font-size:13px}
.btn:disabled{background:var(--line);color:var(--sub);box-shadow:none;cursor:default;transform:none;border:0}
.link{background:none;border:0;color:var(--blue);font-weight:800;cursor:pointer;padding:4px 8px}

/* Login */
.login{max-width:380px;margin:0 auto;padding:12vh 24px 24px;display:grid;gap:18px;justify-items:center;text-align:center}
.logo{width:88px;height:88px;border-radius:26px;background:var(--green);box-shadow:0 6px 0 var(--green-d);display:grid;place-items:center;font-size:52px;color:#fff}
.login form{display:grid;gap:12px;width:100%}
.login input{padding:15px 16px;border-radius:16px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);font-size:18px;outline:none}
.login input:focus{border-color:var(--blue)}
.err{color:var(--red-d);min-height:1.3em}
.conn{position:fixed;right:10px;top:10px;font-size:12px;padding:3px 10px;border-radius:99px;background:var(--surface);border:2px solid var(--line);z-index:20}
body.in .conn{display:none}
.conn.ok{color:var(--green-d)}.conn.bad{color:var(--red-d)}

/* gemeinsame Bausteine */
.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;flex:none}
.av.lg{width:42px;height:42px;font-size:19px}
.pill{background:var(--surface);border:2px solid var(--line);border-radius:99px;padding:5px 14px;font-weight:800;white-space:nowrap}
.pill.coin{color:#b88a00}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 16px 4px}
.tile{background:var(--surface);border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r);padding:9px 12px;min-width:0}
.tile small{display:block;color:var(--sub);font-size:12px}
.tile b{display:block;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.tile.wide{grid-column:span 2}
.pos{color:var(--green-d)}.neg{color:var(--red-d)}
.legend{padding:4px 18px 8px;color:var(--sub);font-size:12px}
.bar{height:16px;border-radius:99px;background:var(--line);overflow:hidden;margin:6px 16px 0}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .4s;box-shadow:inset 0 5px 0 rgba(255,255,255,.25)}
.barl{padding:4px 18px 0;color:var(--sub);font-size:13px}
.msg{padding:6px 18px;color:var(--blue-d);text-align:center;min-height:1.2em}

/* Karten */
.hand{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:28px}
.card{width:46px;height:64px;border-radius:10px;background:#fff;color:#2b2b2b;border:2px solid #e5e5e5;border-bottom-width:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;font-weight:800}
.card b{font-size:20px}.card i{font-style:normal;font-size:18px}
.card.red{color:var(--red-d)}
.card.back{background:var(--blue) repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 4px,transparent 4px 9px);border-color:var(--blue-d)}
.card.pop{animation:pop .38s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:translateY(-26px) scale(.5) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.card.pop{animation:none}}
.empty{color:var(--sub);padding:18px 0}

/* ---------- Spieler (Handy) ---------- */
body.player #game{max-width:560px;margin:0 auto}
.phdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;position:sticky;top:0;background:var(--bg);z-index:5}
.who{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800}
.panel{background:var(--surface);border:2px solid var(--line);border-bottom-width:4px;border-radius:22px;padding:14px;margin:12px 16px;display:grid;gap:10px;justify-items:center}
.ph{display:flex;justify-content:space-between;align-items:center;width:100%;color:var(--sub)}
.total{font-size:26px;font-weight:800;color:var(--text)}
.mine .card{width:66px;height:92px}.mine .card b{font-size:30px}.mine .card i{font-size:26px}
.banner{width:100%;border-radius:16px;padding:12px 16px;display:flex;justify-content:space-between;font-size:20px;font-weight:800}
.banner.win{background:#d7ffb8;color:#58a700}.banner.lose{background:#ffdfe0;color:#ea2b2b}.banner.push{background:var(--line);color:var(--sub)}
.state{width:100%;text-align:center;font-weight:800}
.state.ok{color:var(--green-d)}.state.bad{color:var(--red-d)}
#p-main{padding-bottom:230px}
.dock{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:2px solid var(--line);padding:14px 16px calc(14px + env(safe-area-inset-bottom));z-index:10}
.dockin{max-width:528px;margin:0 auto;display:grid;gap:12px}
.dockrow{display:flex;gap:10px}.dockrow .btn{flex:1}
.info{text-align:center;color:var(--sub)}.info b{color:var(--text)}
.betline{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.chips{display:flex;justify-content:space-between}
.chip{--c:var(--blue);--d:var(--blue-d);width:64px;height:64px;border-radius:50%;border:0;background:var(--c);color:#fff;box-shadow:0 4px 0 var(--d);font-weight:800;font-size:17px;outline:3px dashed rgba(255,255,255,.7);outline-offset:-9px;cursor:pointer}
.chip:active{transform:translateY(4px);box-shadow:none}
.chip.c50{--c:var(--green);--d:var(--green-d)}.chip.c100{--c:var(--purple);--d:var(--purple-d)}.chip.c500{--c:var(--yellow);--d:var(--yellow-d);color:#7a5a00;outline-color:rgba(122,90,0,.5)}
.chip:disabled{background:var(--line);color:var(--sub);box-shadow:none;outline-color:transparent}

/* ---------- Admin (Beamer) ---------- */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:2px solid var(--line)}
.top .sp{flex:1}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800}
.brand .logo{width:40px;height:40px;font-size:24px;border-radius:12px;box-shadow:0 3px 0 var(--green-d)}
.code{font-size:clamp(22px,3vw,34px);letter-spacing:.2em;padding:0 16px;border-radius:14px;background:#ddf4ff;color:#1899d6;border:2px solid #84d8ff;font-weight:800}
.admin .tiles{padding-top:16px}
.admin .tile b{font-size:clamp(26px,3.6vw,48px)}
.stage{display:grid;grid-template-columns:1fr 270px;gap:16px;padding:8px 16px 28px;align-items:start}
.table{position:relative;aspect-ratio:16/10;border-radius:0 0 50% 50%/0 0 100% 100%;background:radial-gradient(120% 100% at 50% 0,#3fd16d,#1f9d55 55%,#168240);border:6px solid var(--surface);border-top:0;box-shadow:0 0 0 2px var(--line),0 6px 0 2px var(--line)}
.dealer{position:absolute;left:50%;top:3%;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;color:#fff;font-weight:800}
.dealer .card{width:54px;height:76px}.dealer .card b{font-size:24px}
.dealer .pill{background:rgba(0,0,0,.25);border:0;color:#fff}
.seat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:120px;background:var(--surface);border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:7px;display:grid;gap:5px;justify-items:center;font-size:12px}
.seat.win{border-color:var(--green)}.seat.lose{border-color:var(--red)}.seat.off{opacity:.55}
.sh{display:flex;gap:6px;align-items:center;width:100%}
.sh b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:66px}
.sh small{color:var(--sub);font-weight:700}
.x{margin-left:auto;border:0;background:none;color:var(--sub);cursor:pointer;font-size:14px;padding:0 2px}
.seat .card{width:26px;height:36px;border-radius:6px;border-width:1px;border-bottom-width:3px}
.seat .card b{font-size:13px}.seat .card i{font-size:11px}
.seat .hand{gap:3px;min-height:0}
.badge{border-radius:99px;padding:2px 9px;font-size:11px;font-weight:800;background:var(--line);color:var(--sub);text-align:center}
.badge.ok{background:#d7ffb8;color:#58a700}.badge.bad{background:#ffdfe0;color:#ea2b2b}.badge.gold{background:#fff0b3;color:#a67c00}
.board{background:var(--surface);border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r);padding:14px;display:grid;gap:8px}
.board h2{margin:0 0 4px;font-size:18px}
.row{display:flex;align-items:center;gap:8px}
.row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .rk{width:18px;color:var(--sub)}

@media(max-width:900px){
  .stage{grid-template-columns:1fr}
  .table{aspect-ratio:auto;border-radius:24px;border-top:6px solid var(--surface);display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:12px;box-shadow:0 0 0 2px var(--line)}
  .dealer{position:static;transform:none;grid-column:1/-1;padding:6px 0}
  .seat{position:static;transform:none;width:auto}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile b{font-size:22px}
}