:root{
  --bg:#0b0f0c;
  --panel:#141a16;
  --panel2:#101512;
  --text:#f2f5f2;
  --muted:#9fb3a6;

  /* Pub colors */
  --accent:#2f7d5c;     /* Irish green */
  --accent2:#c9a24d;    /* warm gold */
  --danger:#b64545;

  --border: rgba(255,255,255,.10);

  /* Board */
  --sqEmpty:#0f1411;
  --sqP1:#2f7d5c;       /* Player (you) */
  --sqP2:#8b1e1e;       /* KI */
  --sqWin:#c9a24d;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 700px at 30% 0%, #1b2030, var(--bg));
  color: var(--text);
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 14px;
}

.app-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15,17,21,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}
.logo{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(51,209,122,.35), rgba(255,255,255,.06));
  border: 1px solid var(--border);
  font-weight: 900;
}
.title{ font-weight: 900; letter-spacing: .2px; }
.subtitle{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.controls{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{ transform: translateY(1px); }
.btn:hover{ background: rgba(255,255,255,.09); }
.btn-ghost{ background: transparent; }

.panel{
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
}

.top-panel .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.row2{ margin-top: 8px; }

.pill{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(51,209,122,.10);
  border: 1px solid rgba(51,209,122,.22);
  font-weight: 800;
}

.toggles{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.toggle{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  user-select:none;
}

.toggle input{ transform: scale(1.05); }

.select{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
}
.select select{
  background: transparent;
  color: var(--text);
  border: none;
  outline: none;
  font-weight: 800;
}
.select option{ color: #111; }

.legend{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.sep{ opacity:.6; }

.dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid rgba(255,255,255,.14);
}
.dot.p1{ background: var(--p1); }
.dot.p2{ background: var(--p2); }

.stats{ font-size: 18px; font-weight: 900; }

.muted{ color: var(--muted); }
.small{ font-size: 12px; }

.board-wrap{
  margin-top: 14px;
  position: relative;
}

.board{
  width: 100%;
  background: linear-gradient(180deg, rgba(27,34,64,.95), rgba(27,34,64,.80));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 10px;
  touch-action: manipulation;
  user-select:none;
}

.board-row{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.slot{
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 16px;
  background: radial-gradient(130% 130% at 30% 25%, rgba(255,255,255,.10), rgba(0,0,0,.20));
  border: 1px solid var(--slotBorder);
  display:grid;
  place-items:center;
  position: relative;
  overflow:hidden;
}

.disk{
  width: 86%;
  height: 86%;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.35), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.14);
  transform: translateY(-2px);
}

.disk.p1{ background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.42), rgba(0,0,0,.28)), var(--p1); }
.disk.p2{ background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.35), rgba(0,0,0,.35)), var(--p2); }

.slot.last{
  box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset, 0 0 0 2px rgba(51,209,122,.22);
}

.slot.win{
  outline: 3px solid rgba(166,227,161,.65);
  outline-offset: -3px;
}

.col-hints{
  position:absolute;
  inset: 0;
  pointer-events:none;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 12px;
}

.col-hints .col{
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  opacity: 0;
  transition: opacity .12s ease;
}

.col-hints .col.on{
  opacity: 1;
  background: rgba(51,209,122,.08);
  border: 1px solid rgba(51,209,122,.18);
}

.log-panel .log-head{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:baseline;
}
.log-panel .h{ font-weight: 900; }

.log{
  margin-top: 10px;
  max-height: 220px;
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}

.log .item{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  color: var(--muted);
}
.log .item:last-child{ border-bottom: none; }
.log .item b{ color: var(--text); }

.app-footer{
  margin-top: 18px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.14);
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 520px){
  .subtitle{ display:none; }
  .btn{ padding: 10px 10px; }
  .board{ padding: 10px; gap: 8px; }
  .board-row{ gap: 8px; }
  .slot{ border-radius: 14px; }
}


/* Winners */
.winners-panel .winners-head{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:baseline;
}
.winners-panel .h{ font-weight: 900; }
.winners{
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
.winners .item{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  color: var(--muted);
  display:flex;
  justify-content:space-between;
  gap: 10px;
}
.winners .item:last-child{ border-bottom:none; }
.winners .item b{ color: var(--text); }
.winners .when{ font-size: 12px; color: var(--muted); opacity:.9; }


/* Pub-style background */
body{
  background:
    radial-gradient(1200px 600px at 30% 0%, #1b2a22, var(--bg)),
    linear-gradient(180deg, #0b0f0c, #060807);
}

/* Panels more tavern-like */
.panel{
  background: linear-gradient(180deg, #16201a, #0f1411);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

/* Buttons */
.btn{
  background: linear-gradient(180deg, var(--accent), #245e45);
  color: #fff;
  border: 1px solid rgba(0,0,0,.4);
}
.btn:hover{
  filter: brightness(1.08);
}

/* Board slots */
.slot{
  background: radial-gradient(circle at 30% 30%, #1c261f, #0b0f0c);
}
.disk.p1{
  background: radial-gradient(circle at 30% 30%, #3fa87d, #1f5b43);
}
.disk.p2{
  background: radial-gradient(circle at 30% 30%, #b54a4a, #6f1e1e);
}
.slot.win .disk{
  box-shadow: 0 0 0 3px var(--sqWin), 0 0 18px rgba(201,162,77,.6);
}

/* Header */
.app-header{
  background: linear-gradient(180deg, #152019, #0c120f);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Winners */
.winners-panel .h{
  color: var(--accent2);
}


/* ===== Holztextur Spielfeld ===== */
.board{
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)),
    repeating-linear-gradient(
      90deg,
      #5a3a20 0px,
      #5a3a20 10px,
      #4a2f1a 20px,
      #5a3a20 30px
    );
  border-radius: 18px;
  padding: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.6),
    inset 0 12px 30px rgba(0,0,0,.7),
    0 12px 40px rgba(0,0,0,.6);
}

.slot{
  background:
    radial-gradient(circle at 30% 30%, #2a1a10, #140a05);
}

.slot.last .disk{
  box-shadow:
    0 0 0 3px var(--accent2),
    0 0 20px rgba(201,162,77,.6);
}