:root{ --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); 
  --bg:#0b1016; --grad1:#0e1d2a; --grad2:#0a251c;
  --felt1:#155c3f; --felt2:#0e3f2b;
  --fg:#eaf3f7; --muted:#9cb3bf; --accent:#2be08f; --accent-2:#5bd6ff; --danger:#ff6b6b; --gold:#ffd36b;
  --card:#fff; --ink:#121417; --shadow:rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%;}
html{background:#000;}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--fg);
  background: radial-gradient(1200px 700px at 20% -10%, var(--grad2), transparent 60%), radial-gradient(1200px 700px at 120% 10%, var(--grad1), transparent 50%), linear-gradient(120deg, #071119, #071514);
  overflow:hidden; overscroll-behavior: none;
}
#wrap{position:fixed; inset:0; display:flex; flex-direction:column; gap:10px; padding: calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal));}
header, footer{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(10,20,20,.55); border:1px solid rgba(100,160,160,.15); border-radius:16px; backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px var(--shadow);
}
header h1{font-size:18px; margin:0; letter-spacing:.4px;}
.spacer{flex:1}
.pill{
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:8px 14px; font-weight:800; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.accent{ box-shadow: inset 0 0 0 1px rgba(43,224,143,.35); color:#c7ffe6; }
.gold{ color:var(--gold); box-shadow: inset 0 0 0 1px rgba(255,211,107,.35); }
.danger{ color:#ffb3b3; box-shadow: inset 0 0 0 1px rgba(255,107,107,.35); }
main{ flex:1; display:grid; grid-template-rows: 1fr auto auto; gap:10px; }
.table{
  position:relative; border-radius:22px; overflow:hidden; overscroll-behavior: none; border:1px solid rgba(120,200,160,.16);
  background: radial-gradient(120% 100% at 50% 20%, var(--felt1) 0%, var(--felt2) 65%, #0b2b1e 100%);
  box-shadow: inset 0 30px 80px rgba(0,0,0,.35), 0 30px 60px var(--shadow);
  display:flex; flex-direction:column; justify-content:center; align-items:center; padding:14px;
}
.status{ position:absolute; top:10px; left:10px; right:10px; text-align:center; font-weight:900; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.lane{ width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; }
.title{ font-size:12px; color:#cfe9d9; opacity:.9; letter-spacing:.3px; }
.hand{ display:flex; gap:10px; min-height:110px; position:relative; align-items:flex-end;}
.cards{ display:flex; gap:10px; }
.total{
  position:absolute; top:-18px; right:-6px; padding:6px 10px; border-radius:12px;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); font-weight:900; font-size:12px;
  transform: translateY(-6px); opacity:0; animation: popin .45s ease forwards;
}
@keyframes popin { from{ transform: translateY(6px) scale(.96); opacity:0; } to{ transform: translateY(-6px) scale(1); opacity:1; } }
.chipbar, .buttons{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  background: rgba(10,20,20,.55); border:1px solid rgba(100,160,160,.15); border-radius:16px; padding:10px; backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px var(--shadow);
}
.btn{
  background:linear-gradient(180deg, rgb(20, 168, 226), rgb(20, 168, 226));
  border:1px solid rgba(120,200,200,.2); padding:12px 16px; border-radius:14px; font-weight:900; letter-spacing:.3px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35); transform: translateY(0); transition: transform .1s ease, box-shadow .2s ease, filter .2s ease;
  color: #ffffff;  /* Schriftfarbe */
}
.btn:active{ transform: translateY(1px) scale(.995); filter: brightness(.95); }
.btn.primary{ background: linear-gradient(180deg, rgba(48, 226, 12, 0.85), rgba(20,100,70,.85)); color:rgb(235, 241, 237); }
.btn.danger{ background: linear-gradient(180deg, rgba(255,107,107,.9), rgba(120,30,30,.9)); color:#fff; }
.btn.secondary{ background: linear-gradient(180deg, rgba(91,214,255,.85), rgba(20,80,100,.85)); color:rgb(235, 241, 237); }
.card{
  width:66px; height:94px; border-radius:10px; background:var(--card); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:900; position:relative; transform: translateY(20px) scale(.98);
  box-shadow: 0 14px 32px rgba(0,0,0,.45); animation: cardIn .35s cubic-bezier(.2,.8,.2,1) forwards;
}
.card.red{ color:#b1001a; }
.card.back{
  background: repeating-linear-gradient(45deg, #112, #112 10px, #223 10px, #223 20px);
  color:transparent;
}
@keyframes cardIn { to{ transform: translateY(0) scale(1); } }
.flash{ animation: flash .7s ease; }
@keyframes flash{ 0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.6), 0 14px 32px rgba(0,0,0,.45);} 100%{ box-shadow: 0 14px 32px rgba(0,0,0,.45);} }


/* ===========================
   KOMPAKTES MOBILE LAYOUT
   =========================== */
@media (max-width: 768px) {

  /* Header */
  header {
    display: grid !important;
    grid-template-areas:
      "title  title  title"
      "left   right  mute";
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    justify-items: center;
    padding: 6px 8px;
  }

  header h1 {
    grid-area: title;
    margin: 0;
    font-size: 1rem;
    text-align: center;
    line-height: 1.1;
  }

  #bankroll, #bet {
    width: 100%;
    font-size: 0.85rem;
    padding: 6px 8px;
    border-radius: 12px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  #bankroll { grid-area: left; }
  #bet      { grid-area: right; }

  #muteBtn {
    grid-area: mute;
    padding: 6px 8px;
    min-height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tisch */
  main {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 6px;
    min-height: 0;
  }
  .table {
    min-height: 0;
    height: 42vh; /* normale Höhe beibehalten */
    padding: 8px;
    border-radius: 16px;
  }
  .total { font-size: 0.75rem; padding: 2px 5px; }

  /* Chip-Leiste */
  .chipbar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-items: stretch;
    justify-items: stretch;
    padding: 6px;
    border-radius: 10px;
  }
  .chipbar .pill {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 2px;
    font-size: 0.75rem;
  }
  .chipbar .btn {
    width: 100%;
    min-height: 38px;
    font-size: 0.85rem;
    border-radius: 10px;
  }
  .chipbar .btn[data-chip="5"]   { grid-row: 2; grid-column: 1; }
  .chipbar .btn[data-chip="25"]  { grid-row: 2; grid-column: 2; }
  .chipbar .btn[data-chip="50"]  { grid-row: 2; grid-column: 3; }
  .chipbar .btn[data-chip="100"] { grid-row: 3; grid-column: 1; }
  .chipbar .btn[data-chip="500"] { grid-row: 3; grid-column: 2; }
  .chipbar #clear                { grid-row: 3; grid-column: 3; }

  /* Action-Buttons */
  .buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    align-items: stretch;
    justify-items: stretch;
  }
  .buttons .btn {
    width: 100%;
    min-height: 38px;
    font-size: 0.85rem;
    border-radius: 10px;
  }
  #dealBtn   { order: 1; }
  #hitBtn    { order: 2; }
  #standBtn  { order: 3; }
  #doubleBtn { order: 4; }

  /* Titel Dealer/Spieler nur optisch verschieben */
  .lane .title {
    transform: translateY(14px);
  }

  button, .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

/* ===========================
   DESKTOP FEINTUNING (>= 769px)
   =========================== */
@media (min-width: 769px) {

  /* 1) Titel im Header exakt mittig, ohne das Flex-Layout zu ändern */
  header{
    position: relative; /* damit h1 relativ zentriert werden kann */
  }
  header h1{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
    pointer-events: none; /* klickt nicht dazwischen */
  }

  /* 2) Chipbar & Buttons auf gleiche Breite bringen und mittig ausrichten */
  .chipbar,
  .buttons{
    max-width: 980px;   /* gemeinsam definierte Breite */
    margin: 0 auto;     /* mittig */
    padding-left: 10px; /* gleiche Innenabstände wie oben */
    padding-right: 10px;
  }

  /* 3) Einheitliche Flex-Basis, damit die Spaltenbreiten/Abstände matchen */
  .chipbar .btn,
  .buttons .btn{
    flex: 1 1 160px;   /* gleiche Breite-Logik für beide Leisten */
  }

  /* 4) Optional: gleiche Button-Höhe/Look auf Desktop */
  .buttons .btn{
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 1rem;
  }
}


@media (min-width: 769px) {

  /* Einsatz-Buttons in einer Reihe, gleiche Größe */
  .chipbar {
    display: flex;
    justify-content: center;   /* mittig ausrichten */
    flex-wrap: nowrap;         /* alles in eine Reihe */
    gap: 10px;                 /* Abstand zwischen Buttons */
    max-width: 980px;
    margin: 0 auto;
  }

  .chipbar .btn {
    flex: 1 1 0;               /* alle gleich breit */
    min-width: 120px;          /* Mindestbreite für Lesbarkeit */
    text-align: center;
  }

  /* Einsatz-Label (Einsatz:) vor den Buttons mit fixer Breite */
  .chipbar .pill {
    flex: 0 0 auto;            /* bleibt kompakt */
    align-self: center;
    padding: 10px 14px;
    font-weight: bold;
  }
}

@media (min-width: 769px) {
  /* Hover nur für Desktop */
  .chipbar .btn,
  .buttons .btn {
    transition: all 0.25s ease;
    transform: scale(1);
  }

  .chipbar .btn:hover,
  .buttons .btn:hover {
    transform: scale(1.08);
    background: linear-gradient(180deg, rgba(13, 221, 75, 0.9), rgba(13, 221, 75, 0.9));
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 120, 255, 0.5);
  }

  .chipbar .btn,
  .buttons .btn {
    will-change: transform, background, box-shadow;
  }
}