:root {
  --felt: #17603f; --felt-dark: #0f4a30; --ink: #f4f1e6; --muted: #b9cfc1;
  --gold: #e9c46a; --card: #fffdf6; --red: #c0262d; --black: #1b1b1f;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 16px/1.4 system-ui, "Segoe UI", sans-serif; color: var(--ink);
  background: radial-gradient(ellipse at 50% 30%, var(--felt), var(--felt-dark) 80%) fixed;
}
button, select, input { font: inherit; }
button {
  padding: 8px 14px; border-radius: 8px; border: 1px solid #ffffff55; background: #ffffff1a; color: var(--ink); cursor: pointer;
}
button:hover:not(:disabled) { background: #ffffff33; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--gold); border-color: var(--gold); color: #2b2205; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #f3d68c; }
button.on { background: var(--ink); color: #123; font-weight: 600; }
button.link { border: 0; background: none; text-decoration: underline; padding: 0 4px; }
button.chip { border-radius: 99px; min-width: 52px; border: 2px dashed var(--gold); font-weight: 700; }
select, input { padding: 8px 10px; border-radius: 8px; border: 1px solid #ffffff55; background: #fffdf6; color: #222; }
.muted { color: var(--muted); font-size: .9em; }
.good { color: #9be7a8; } .bad { color: #ffaaa5; } .redtxt { color: #ffaaa5; }

.landing { max-width: 460px; margin: 0 auto; padding: 6vh 16px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.landing h1 { font-size: 2.4rem; margin: 0; }
.landing label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: .9em; color: var(--muted); }
.landing .or { color: var(--muted); }
.landing .row { display: flex; gap: 8px; } .landing .row input { flex: 1; min-width: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; }
.tile .icon { font-size: 1.8rem; line-height: 1; }
.tile small { font-size: .75em; opacity: .8; }
.tile.on { background: var(--ink); color: #123; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

header { display: flex; gap: 14px; align-items: center; padding: 8px 16px; background: #00000033; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.1rem; }

.table { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; max-width: 1000px; margin: 0 auto; }
.opps { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-around; }
.center { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.center p { margin: 4px 0; }
.mine { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.seat { padding: 8px 12px; border-radius: 10px; background: #00000030; border: 2px solid transparent; min-width: 150px; }
.seat.turn { border-color: var(--gold); box-shadow: 0 0 12px #e9c46a66; }
.seat.offline, .seat.dim { opacity: .55; }
.tag { font-size: .7em; padding: 1px 6px; border-radius: 99px; background: #ffffff2a; vertical-align: middle; white-space: nowrap; }
.tag.gold { background: var(--gold); color: #2b2205; font-weight: 600; }
.backs { display: flex; margin-top: 6px; min-height: 30px; }
.backs span, .card.back {
  border: 1px solid #fff;
  background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 3px, #9c2b3a 3px, #9c2b3a 6px);
}
.backs span { width: 20px; height: 30px; margin-right: -10px; border-radius: 3px; }
.mini { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; align-items: center; justify-content: center; }

.panel { background: #00000040; border-radius: 12px; padding: 14px 22px; text-align: center; max-width: 520px; }
.panel h2 { margin: 0 0 6px; }
.panel p { margin: 6px 0; }
.players { text-align: left; display: inline-block; margin: 6px 0; }
.big-score { font-size: 2rem; font-weight: 700; }
.gamebar { background: #00000040; border-radius: 99px; padding: 4px 14px; font-size: .95em; }

.controls { min-height: 44px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.controls .col { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.games { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.check { margin: 0 8px; white-space: nowrap; }
.check input { margin-right: 4px; }
.raise { display: inline-flex; gap: 4px; } .raise input { width: 96px; }

.card {
  position: relative; display: inline-block; width: 70px; height: 104px; padding: 0; flex: none;
  background: var(--card); color: var(--black); border: 1px solid #0006; border-radius: 8px;
  box-shadow: 0 2px 5px #0006; transition: transform .12s;
}
button.card:hover:not(:disabled) { background: var(--card); }
.card:disabled { opacity: 1; }
.card.red { color: var(--red); }
.card .corner { position: absolute; top: 4px; left: 6px; font-weight: 700; font-size: 17px; line-height: 1; text-align: center; }
.card .corner i { display: block; font-style: normal; font-size: 15px; }
.card .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; padding-top: 14px; }
.card.small { width: 34px; height: 50px; border-radius: 5px; }
.card.small .corner { font-size: 12px; top: 2px; left: 3px; }
.card.small .corner i { font-size: 11px; }
.card.small .pip { display: none; }
.card.slot { background: #00000026; border: 1px dashed #ffffff44; box-shadow: none; }
.card.legal { cursor: pointer; }
.hand .card.legal:hover, .hand .card.sel { transform: translateY(-14px); }
.card.sel { outline: 3px solid var(--gold); }
.card.dim { filter: brightness(.62); }

.hand { display: flex; justify-content: center; padding: 16px 30px 8px 0; max-width: 100%; flex-wrap: wrap; row-gap: 8px; }
.hand .card { margin-right: -24px; }
.board { display: flex; gap: 6px; justify-content: center; }

/* Skat-Stich */
.trick { position: relative; width: 240px; height: 190px; }
.trick .card { position: absolute; }
.trick .pos-l { left: 20px; top: 10px; transform: rotate(-8deg); }
.trick .pos-r { right: 20px; top: 10px; transform: rotate(8deg); }
.trick .pos-me { left: 85px; top: 80px; }

/* Durak */
.durak-top { display: flex; gap: 24px; align-items: center; }
.stock { position: relative; width: 120px; height: 124px; text-align: center; }
.stock .trump { position: absolute; left: 40px; top: 0; transform: rotate(90deg); }
.stock .pile { position: absolute; left: 0; top: 0; }
.stock .muted { position: absolute; bottom: -4px; left: 0; right: 0; }
.pairs { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; min-height: 130px; }
.pair { position: relative; width: 92px; height: 128px; text-align: left; }
.pair .over { position: absolute; left: 22px; top: 24px; }

.list { max-width: 1000px; margin: 8px auto 24px; padding: 0 16px; }
.list summary { cursor: pointer; }
.list table { border-collapse: collapse; width: 100%; margin-top: 8px; background: #00000030; border-radius: 8px; }
.list th, .list td { padding: 4px 10px; text-align: right; border-bottom: 1px solid #ffffff1a; }
.list th:nth-child(2), .list td:nth-child(2) { text-align: left; }
.list .sum td { font-weight: 700; border-bottom: 0; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1b1b1f; color: #fff; padding: 10px 18px; border-radius: 99px; box-shadow: 0 4px 14px #0008; z-index: 10;
}

@media (max-width: 640px) {
  .card { width: 52px; height: 78px; }
  .card .corner { font-size: 14px; } .card .corner i { font-size: 12px; }
  .card .pip { font-size: 24px; }
  .hand { padding-right: 26px; } .hand .card { margin-right: -26px; }
  .seat { min-width: 0; padding: 6px 8px; font-size: .9em; }
  .trick { width: 190px; height: 150px; }
  .trick .pos-me { left: 69px; top: 66px; }
  .trick .pos-l { left: 10px; } .trick .pos-r { right: 10px; }
  .pair { width: 70px; height: 98px; } .pair .over { left: 16px; top: 18px; }
  .stock { width: 92px; height: 100px; } .stock .trump { left: 30px; }
  .board { gap: 3px; }
}