/* ===== Theme variables (default = Violett hell) ===== */
:root{
  --bg:#F5F4FB; --surface:#FFFFFF; --soft:#FAF9FE; --card-bg:#FFFFFF;
  --ink:#3E3A57; --muted:#8E8AA6; --faint:#B9B5CC;
  --border:#ECEAF5; --border-2:#E2DFEF;
  --primary:#7C6FE8; --primary-ink:#5B4FD0; --primary-soft:#EEEBFC;
  --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(62,58,87,.10); --shadow-sm:0 4px 14px rgba(62,58,87,.08);
}
[data-theme="mint"]{
  --bg:#EEF6F1; --surface:#FFFFFF; --soft:#F3FAF6; --card-bg:#fff;
  --ink:#2C3A34; --muted:#7C917F; --faint:#AEBDB0; --border:#E4EFE8; --border-2:#D8E8DE;
  --primary:#38B48C; --primary-ink:#2A9576; --primary-soft:#E0F3EB; --good:#38B48C; --good-soft:#E0F3EB;
  --shadow:0 12px 34px rgba(44,58,52,.10); --shadow-sm:0 4px 14px rgba(44,58,52,.08);
}
[data-theme="rose"]{
  --bg:#FBF2F5; --surface:#FFFFFF; --soft:#FDF5F8; --card-bg:#fff;
  --ink:#4A3540; --muted:#A78591; --faint:#CBB2BC; --border:#F2E6EC; --border-2:#EBD8E1;
  --primary:#E06A97; --primary-ink:#C9527F; --primary-soft:#FBE7EF; --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(74,53,64,.10); --shadow-sm:0 4px 14px rgba(74,53,64,.08);
}
[data-theme="amber"]{
  --bg:#FBF6EC; --surface:#FFFFFF; --soft:#FDF9F1; --card-bg:#fff;
  --ink:#463C2C; --muted:#A2917A; --faint:#C9BCA6; --border:#F1E9D9; --border-2:#EADFC9;
  --primary:#D39A3C; --primary-ink:#BC8329; --primary-soft:#F7EDD8; --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(70,60,44,.10); --shadow-sm:0 4px 14px rgba(70,60,44,.08);
}
[data-theme="sky"]{
  --bg:#EDF3FB; --surface:#FFFFFF; --soft:#F4F8FD; --card-bg:#fff;
  --ink:#2E3A4B; --muted:#7E8CA0; --faint:#AEBACB; --border:#E4EDF6; --border-2:#D6E2F0;
  --primary:#4E8FDB; --primary-ink:#3B78C2; --primary-soft:#E3EEFA; --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(46,58,75,.10); --shadow-sm:0 4px 14px rgba(46,58,75,.08);
}
[data-theme="coral"]{
  --bg:#FBF1EF; --surface:#FFFFFF; --soft:#FDF5F3; --card-bg:#fff;
  --ink:#4A3532; --muted:#A98A83; --faint:#CDB4AD; --border:#F3E6E2; --border-2:#ECD8D2;
  --primary:#EC6B5A; --primary-ink:#D65442; --primary-soft:#FBE6E1; --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(74,53,50,.10); --shadow-sm:0 4px 14px rgba(74,53,50,.08);
}
[data-theme="forest"]{
  --bg:#F0F5EC; --surface:#FFFFFF; --soft:#F5F9F1; --card-bg:#fff;
  --ink:#333F2E; --muted:#849079; --faint:#B4BEA8; --border:#E7EFDF; --border-2:#DBE7D0;
  --primary:#5C9A5C; --primary-ink:#4B8449; --primary-soft:#E6F1E2; --good:#5C9A5C; --good-soft:#E6F1E2;
  --shadow:0 12px 34px rgba(51,63,46,.10); --shadow-sm:0 4px 14px rgba(51,63,46,.08);
}
[data-theme="ocean"]{
  --bg:#ECF6F8; --surface:#FFFFFF; --soft:#F2F9FA; --card-bg:#fff;
  --ink:#2A3E43; --muted:#7C959A; --faint:#AAC1C5; --border:#E0EEF1; --border-2:#D0E4E7;
  --primary:#2FA5B8; --primary-ink:#238A9B; --primary-soft:#DEF1F4; --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(42,62,67,.10); --shadow-sm:0 4px 14px rgba(42,62,67,.08);
}
[data-theme="slate"]{
  --bg:#F1F3F7; --surface:#FFFFFF; --soft:#F6F8FB; --card-bg:#fff;
  --ink:#333B49; --muted:#818B9C; --faint:#B2BAC8; --border:#E6E9F0; --border-2:#D8DDE7;
  --primary:#5E7599; --primary-ink:#4C6284; --primary-soft:#E7EBF2; --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(51,59,73,.10); --shadow-sm:0 4px 14px rgba(51,59,73,.08);
}
[data-theme="sand"]{
  --bg:#F8F3EC; --surface:#FFFFFF; --soft:#FBF7F1; --card-bg:#fff;
  --ink:#463B2E; --muted:#9E8C79; --faint:#C7B7A4; --border:#EFE7DA; --border-2:#E7DCCB;
  --primary:#C08A5E; --primary-ink:#A9744A; --primary-soft:#F4E9DC; --good:#4FB795; --good-soft:#E3F4EE;
  --shadow:0 12px 34px rgba(70,59,46,.10); --shadow-sm:0 4px 14px rgba(70,59,46,.08);
}
/* ---- abgedunkelte Themes ---- */
[data-theme="midnight"]{
  --bg:#1B1B26; --surface:#262633; --soft:#2E2E3D; --card-bg:#2E2D3B;
  --ink:#E9E8F2; --muted:#A6A2BC; --faint:#6F6B86; --border:#33323F; --border-2:#3D3B4B;
  --primary:#8E82F2; --primary-ink:#A99FF6; --primary-soft:#332F4A; --good:#4FC79E; --good-soft:#213A33;
  --shadow:0 14px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
}
[data-theme="dark-teal"]{
  --bg:#152020; --surface:#1E2C2A; --soft:#233432; --card-bg:#243534;
  --ink:#E2EFEC; --muted:#93AEA8; --faint:#5E7772; --border:#2B3B39; --border-2:#344644;
  --primary:#3FC7A2; --primary-ink:#5AD4B3; --primary-soft:#1F3B35; --good:#3FC7A2; --good-soft:#1F3B35;
  --shadow:0 14px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
}
[data-theme="dark-plum"]{
  --bg:#211926; --surface:#2C2233; --soft:#342839; --card-bg:#33283A;
  --ink:#EFE6F2; --muted:#B49CBE; --faint:#7A6684; --border:#3A2E42; --border-2:#45374E;
  --primary:#C488E4; --primary-ink:#D3A0EE; --primary-soft:#3A2C44; --good:#4FC79E; --good-soft:#233A34;
  --shadow:0 14px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
}
[data-theme="graphite"]{
  --bg:#1A1C20; --surface:#24272D; --soft:#2B2F36; --card-bg:#2A2E35;
  --ink:#E7EAF0; --muted:#9CA4B2; --faint:#666D7B; --border:#31353D; --border-2:#3B404A;
  --primary:#7FA0D6; --primary-ink:#96B2E0; --primary-soft:#2C333F; --good:#4FC79E; --good-soft:#213A33;
  --shadow:0 14px 34px rgba(0,0,0,.5); --shadow-sm:0 4px 14px rgba(0,0,0,.38);
}
[data-theme="dark-rose"]{
  --bg:#24191E; --surface:#2F2128; --soft:#38272F; --card-bg:#372630;
  --ink:#F2E4E9; --muted:#C199A6; --faint:#84636F; --border:#3D2C34; --border-2:#48353E;
  --primary:#EE7CA3; --primary-ink:#F295B4; --primary-soft:#3F2B34; --good:#4FC79E; --good-soft:#233A34;
  --shadow:0 14px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
}
[data-theme="dark-forest"]{
  --bg:#161F1A; --surface:#1F2B23; --soft:#26342A; --card-bg:#25332A;
  --ink:#E3EFE6; --muted:#98B29E; --faint:#5F7865; --border:#2C3A30; --border-2:#35463A;
  --primary:#5FBF7E; --primary-ink:#77CE92; --primary-soft:#213A2A; --good:#5FBF7E; --good-soft:#213A2A;
  --shadow:0 14px 34px rgba(0,0,0,.45); --shadow-sm:0 4px 14px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
button{font-family:inherit;border:none;cursor:pointer;color:inherit}
input{font-family:inherit}

/* ---------- buttons ---------- */
.btn{padding:11px 20px;border-radius:11px;font-weight:600;font-size:14px;transition:transform .12s, box-shadow .12s, background .12s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.14)}
.btn.primary:hover{background:var(--primary-ink)}
.btn.primary[disabled]{opacity:.5;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--border-2)}
.btn.ghost:hover{background:var(--soft)}
.btn.block{width:100%}
.btn.tiny{padding:7px 12px;border-radius:9px;font-size:13px;background:var(--surface);border:1px solid var(--border-2);color:var(--muted)}
.btn.tiny:hover{background:var(--soft);color:var(--ink)}
.btn.tiny.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn.tiny.ghost{color:var(--faint)}

/* ---------- start page ---------- */
.start{max-width:460px;margin:0 auto;padding:9vh 24px 40px;text-align:center}
.brand{font-size:30px;font-weight:800;letter-spacing:-.5px}
.brand .dot,.room-name .dot{color:var(--primary)}
.tagline{color:var(--muted);margin:8px 0 30px;font-size:15px}
.start-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:26px;text-align:left}
.field-label{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--muted);margin-bottom:7px;display:block}
.txt{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--border-2);background:var(--soft);font-size:15px;color:var(--ink);outline:none;transition:border .12s, box-shadow .12s}
.txt:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.deck-pick{display:flex;gap:8px;margin-top:14px}
.deck-pick .dp{flex:1;text-align:center;padding:9px;border-radius:10px;border:1px solid var(--border-2);background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.deck-pick .dp.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-ink)}
.split{display:flex;align-items:center;gap:14px;margin:22px 0 6px}
.split .line{flex:1;height:1px;background:var(--border-2)}
.split span{font-size:12px;color:var(--faint);font-weight:600}
.join-row{display:flex;gap:10px}
.join-row .txt{flex:1;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.msg{margin-top:14px;font-size:13px;min-height:18px;color:var(--muted)}
.msg.err{color:#D06277}
.mt{margin-top:16px}

/* ---------- room ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border-bottom:1px solid var(--border);padding:13px 26px;position:sticky;top:0;z-index:20}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.room-name{font-weight:800;font-size:17px;letter-spacing:-.3px}
.chip{background:var(--primary-soft);color:var(--primary-ink);font-weight:700;font-size:12px;letter-spacing:1px;padding:4px 10px;border-radius:8px}
.muted-sm{color:var(--faint);font-size:13px}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-right>#tbRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.seg{display:flex;gap:2px;background:var(--soft);border:1px solid var(--border-2);border-radius:10px;padding:2px}
.seg-btn{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;background:transparent;color:var(--muted)}
.seg-btn.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.timer{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:7px 12px;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.timer::before{content:"⏱";font-size:13px;opacity:.65}

/* theme picker */
.theme-ctrl{position:relative}
.theme-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:10px;display:none;grid-template-columns:repeat(4,1fr);gap:8px;width:196px;z-index:40}
.theme-pop.open{display:grid}
.sw{width:38px;height:38px;border-radius:10px;border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sw span{width:16px;height:16px;border-radius:50%;display:block}
.sw.on{outline:2px solid var(--primary);outline-offset:1px}

.stage{max-width:none;width:100%;margin:0 auto;padding:24px 40px 200px;min-height:calc(100vh - 200px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.story{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:34px}
.story-label{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--faint)}
.story-input{width:min(560px,70vw);padding:11px 15px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-size:15px;font-weight:600;color:var(--ink);text-align:center;outline:none;box-shadow:var(--shadow-sm)}
.story-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.story-input::placeholder{color:var(--faint);font-weight:500}

/* played cards — bigger & centered, names only (no avatar).
   Full browser width: wrap only when the window is genuinely too narrow. */
.players{display:flex;flex-wrap:wrap;gap:26px 30px;justify-content:center;align-items:flex-start;width:100%;margin-bottom:40px;min-height:120px}
.player{display:flex;flex-direction:column;align-items:center;gap:12px;width:118px}
.pcard{width:88px;height:124px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:36px;box-shadow:var(--shadow-sm);transition:transform .2s ease}
.pcard.empty{background:var(--card-bg);border:2px dashed var(--border-2)}
.pcard.back{background:var(--primary);border:2px solid var(--primary);position:relative}
.pcard.back::after{content:"";position:absolute;inset:10px;border:2px solid rgba(255,255,255,.4);border-radius:9px}
.pcard.val{background:var(--card-bg);border:2px solid var(--primary-soft);color:var(--ink);animation:flip .3s ease}
.pcard.spec{background:var(--soft);border:2px solid var(--border-2);font-size:30px}
.pname{font-size:14px;font-weight:600;color:var(--ink);max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname.mine{color:var(--primary);font-weight:700}

.center{text-align:center;margin-bottom:26px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.headline{font-size:34px;font-weight:800;letter-spacing:-.6px}
.headline.good{color:var(--good)}
.sub{color:var(--muted);font-size:14px}

/* available cards — fixed dock at the bottom */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--border);
  box-shadow:0 -10px 30px rgba(0,0,0,.06);padding:14px 20px 18px;display:flex;flex-direction:column;align-items:center;gap:12px}
.reactions{display:flex;gap:8px;justify-content:center}
.rbtn{width:38px;height:38px;border-radius:11px;background:var(--soft);border:1px solid var(--border);font-size:18px;display:flex;align-items:center;justify-content:center}
.rbtn:hover{background:var(--primary-soft);transform:translateY(-2px)}
.hand{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.card{width:64px;height:92px;border-radius:13px;background:var(--card-bg);border:2px solid var(--border-2);color:var(--ink);
  font-weight:700;font-size:23px;display:flex;align-items:center;justify-content:center;
  transition:transform .13s, box-shadow .13s, border-color .13s}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-sm);border-color:var(--primary)}
.card.sel{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink);transform:translateY(-14px);box-shadow:0 16px 26px rgba(0,0,0,.18)}
.card.disabled{opacity:.4;pointer-events:none;box-shadow:none;transform:none}

.results{max-width:520px;margin:0 auto}
.stats-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);padding:20px;display:flex;flex-direction:column;gap:16px}
.stat-row{display:flex;gap:14px}
.stat{flex:1;background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.stat .k{color:var(--faint);font-size:12px;font-weight:600}
.stat .v{font-size:26px;font-weight:800;margin-top:2px}
.dist{display:flex;flex-direction:column;gap:8px}
.dist-row{display:flex;align-items:center;gap:10px}
.dist-row .lab{width:30px;text-align:right;font-weight:700;font-size:14px}
.dist-row .bar{flex:1;height:11px;background:var(--border-2);border-radius:7px;overflow:hidden}
.dist-row .bar>span{display:block;height:100%;border-radius:7px;background:var(--primary)}
.dist-row.good .bar>span{background:var(--good)}
.dist-row .cnt{width:16px;font-size:13px;font-weight:700;color:var(--muted)}

/* ---------- fx ---------- */
.fx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:50}
.confetti{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px}
.react-float{position:absolute;bottom:150px;font-size:34px}
@keyframes spfall{to{transform:translateY(105vh) rotate(560deg);opacity:.85}}
@keyframes spfloat{0%{transform:translateY(0) scale(.6);opacity:0}18%{opacity:1;transform:translateY(-16px) scale(1)}100%{transform:translateY(-230px) scale(1.15);opacity:0}}
@keyframes flip{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}

.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--surface);
  padding:11px 18px;border-radius:11px;font-size:14px;font-weight:600;opacity:0;transition:opacity .2s, transform .2s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}