:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --line:#2a3242;
  --txt:#e6edf3; --mut:#8b98a9; --green:#2ea043; --red:#f85149; --amber:#d29922;
  --blue:#4493f8; --accent:#7ee787;
  --felth:#1a4a2f; --felth-dk:#0f3320; --card:#f5f0e1; --card-t:#1a1a1a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,#0b1020,#0d1117 60%);
  color:var(--txt); min-height:100%;
}
#app{max-width:1040px;margin:0 auto;padding:14px 16px 90px}
h1{font-size:20px;margin:0;color:var(--accent);letter-spacing:.3px}
h2{font-size:19px;margin:26px 0 10px;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:6px}
h3{font-size:15px;margin:18px 0 8px;color:#d7e0e8}
#topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,17,23,.94);z-index:20;backdrop-filter:blur(6px)}
#top-nav{display:flex;gap:6px;flex-wrap:wrap}
.navbtn{background:transparent;border:1px solid var(--line);color:var(--mut);padding:7px 13px;border-radius:8px;cursor:pointer;font-size:13px}
.navbtn.active{background:var(--blue);border-color:var(--blue);color:#fff}
.navbtn:hover{color:var(--txt)}
.panel{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0}
.mode-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 12px;cursor:pointer;
  transition:transform .12s,border-color .12s,background .12s}
.mode-card:hover{border-color:var(--blue);background:var(--panel2);transform:translateY(-2px)}
.mode-card h3{margin:0 0 5px;font-size:14px;color:#fff}
.mode-card p{margin:0;font-size:11.5px;color:var(--mut);line-height:1.35}
.mode-card.selected{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.start-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 4px;
  background:var(--panel);border:1px solid var(--line);padding:12px 14px;border-radius:12px}
.lbl{font-size:13px;color:var(--mut)}
select,input[type=number]{
  background:#0b1017;border:1px solid var(--line);color:var(--txt);padding:8px 9px;border-radius:8px;font-size:14px}
button{border:none;border-radius:8px;padding:9px 15px;cursor:pointer;font-size:14px;background:#223;color:#fff;transition:filter .1s}
button:hover{filter:brightness(1.15)}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--green);color:#fff}
.primary.big{font-size:16px;padding:11px 22px}
.danger{background:var(--red);color:#fff}
.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.badge{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:20px;
  padding:3px 11px;font-size:12px;margin-right:6px;color:var(--mut)}
.badge.lvl{color:var(--blue);border-color:var(--blue)}
.badge.streak{color:var(--amber);border-color:var(--amber)}
.session-bar{background:var(--red);border-radius:20px;flex:1;min-width:120px;margin-top:4px}
.session-bar>div{height:8px;background:var(--green);border-radius:20px;width:0%;transition:width .3s}
#fb-title{color:var(--accent);margin:0 0 8px}
.title-red{color:var(--red)!important}
.fb-actions{margin-top:10px}
.home-stats,.mini-stats{color:var(--mut);font-size:13px;line-height:1.7}
.mini-stats{margin:6px 0}

/* Trainer area */
#t-area{margin-top:16px;min-height:250px}
.train-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.hand-canvas{font-family:ui-monospace,Menlo,Consolas,monospace;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.card-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:74px;border-radius:8px;font-weight:800;font-size:22px;
  background:var(--card);color:var(--card-t);box-shadow:0 3px 8px rgba(0,0,0,.4);position:relative}
.card-chip.red{color:#c92a2a}
.card-chip.back{color:transparent;background:
  repeating-linear-gradient(45deg,#2c3e6b,#2c3e6b 6px,#3b5186 6px,3b5186 12px)}
.card-chip small{position:absolute;bottom:2px;font-size:8px;right:4px;color:#888}
.qtext{font-size:17px;line-height:1.6;color:#eef}
.hint-box{background:var(--panel2);border-left:3px solid var(--amber);padding:10px 13px;border-radius:6px;margin-top:12px;
  color:#f0d9a0;font-size:14px;line-height:1.6;white-space:pre-wrap}
.answer-num{font-size:46px;font-weight:800;color:var(--accent);text-align:center;margin:6px 0 2px}
.time-count{font-size:20px;letter-spacing:2px;color:#fff;text-align:center;margin:14px 0;font-weight:700;min-height:28px}
.shoe-bar{background:#0a1017;border-radius:10px;height:26px;width:100%;overflow:hidden;border:1px solid var(--line);position:relative}
.shoe-fill{height:100%;background:repeating-linear-gradient(90deg,#2c3e6b,#2c3e6b 5px,#27426e 5px,#27426e 10px);transition:width .4s}
.shoe-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}

.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.action-btn{min-width:88px;padding:11px 10px;font-weight:700;background:var(--panel2);border:1px solid var(--line);font-size:15px}
.action-btn:hover{border-color:var(--blue)}
.action-btn.bet{max-width:120px}
.input-inline{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.input-inline input[type=number]{width:110px}
.table-illus{background:radial-gradient(circle at 50% 30%,var(--felth),var(--felth-dk));border:6px solid #0a4930;
  border-radius:30px;padding:22px 18px;color:#eaffe6;box-shadow:inset 0 0 60px rgba(0,0,0,.5);margin:10px 0}
.row-pos{display:flex;justify-content:space-between;align-items:center;margin:5px 0;font-size:16px;gap:10px}
.row-pos .lbl{font-size:13px}
.big-amt{font-size:22px;font-weight:800}
.cbox{min-height:60px;background:rgba(0,0,0,.18);border:1px dashed rgba(255,255,255,.25);border-radius:10px;padding:8px}
.good{color:var(--green)} .bad{color:var(--red)} .warn{color:var(--amber)}

/* dashboard */
.dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dash .cell{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.dash .cell .k{font-size:11px;color:var(--mut);letter-spacing:.4px}
.dash .cell .v{font-size:24px;font-weight:800;margin-top:2px}
.dash .cell.best{grid-column:1/-1;text-align:left}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--mut);font-weight:600}
.pill-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pill{background:var(--panel2);border:1px solid var(--amber);color:#f0d9a0;padding:7px 12px;border-radius:20px;font-size:13px;cursor:pointer}
.pill:hover{border-color:var(--blue)}
table.eem td{font-variant-numeric:tabular-nums}
.title-center{text-align:center}
.tap-option{display:block;width:100%;margin:6px 0;text-align:left;background:var(--panel2);border:1px solid var(--line);
  padding:12px 14px;border-radius:10px;font-size:15px;color:#fff}
.tap-option:hover{border-color:var(--blue)}
.tap-option tiny{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.drink{font-size:12px;color:var(--mut);margin-top:8px}
.floatbox{position:fixed;inset:0;background:rgba(5,8,14,.72);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.float-inner{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:560px;width:100%;max-height:90vh;overflow:auto}
.glow-green{box-shadow:0 0 0 2px var(--green)}
.glow-red{box-shadow:0 0 0 2px var(--red)}
.md{line-height:1.7;font-size:14.5px;color:#d7e0e8}
.md b{color:#fff}
.md code{background:var(--panel2);padding:2px 6px;border-radius:5px;font-size:13px}
#foot{position:fixed;bottom:0;left:0;right:0;background:#0a0f16;border-top:1px solid var(--line);
  text-align:center;padding:8px;color:var(--mut);font-size:12px}
.quit{position:fixed;bottom:52px;right:16px;z-index:80;background:var(--panel);border:1px solid var(--line);border-radius:50%;width:44px;height:44px;font-size:16px;display:none}
.config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.config-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mut)}
.btn-row{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.table .th,td .rowhead{color:var(--mut)}
.welcome{line-height:1.55}
.sub{color:var(--mut)}
@media(max-width:520px){.card-chip{width:44px;height:64px;font-size:18px}.qtext{font-size:15px}}

/* hidden muss auch gegen display-Regeln gewinnen (z. B. .floatbox hat display:flex) */
.floatbox[hidden],
.panel[hidden],
button[hidden],
*[hidden]{
  display:none !important;
}
/* ----- Blackjack-Spiel-Modus ----- */
.table-area{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.seat{background:#1a2119;border:1px solid #2c3b2a;border-radius:8px;padding:10px;position:relative}
.seat .seatname{font-size:12px;color:var(--mut);margin-bottom:4px}
.pse{margin-left:8px}
.sump{position:absolute;right:12px;top:8px;font-weight:bold;color:var(--xtra)}
.mlabel{min-width:auto;margin-right:6px;color:var(--mut);font-size:12px;display:block}
.nice-tag{font-size:16px;margin:6px 0;padding:6px 10px;border-radius:6px;background:var(--panel2)}
.countcheck{margin:10px 0;background:var(--panel2);border:1px dashed var(--line);border-radius:8px;padding:8px 10px}
.cctitle{font-weight:bold;margin-bottom:4px}
.a-btns{margin:8px 0;display:flex;gap:8px;flex-wrap:wrap}
.betctl{display:flex;gap:10px;align-items:center;margin:8px 0;flex-wrap:wrap}
.card-chip{display:inline-block;background:#f5f1e6;color:#111;border-radius:5px;padding:5px 7px;margin:2px;font-weight:bold;border:1px solid #ccc;min-width:26px;text-align:center}
.card-chip.red{color:#b91c1c}
.muted{color:var(--mut)} .dim{opacity:.7}
.mutedrow{color:var(--mut);margin-bottom:4px}
.mode-card.gamecard{background:linear-gradient(160deg,#14321c,#0e2213);border-color:#2f6f3a}
.mode-card.gamecard:hover{border-color:#3fa34d}