/* Skat — eigenes Layout (Basis-Style für Panel/Buttons/Karten) */
#sk-lobby { display: none; align-items: center; justify-content: center; background:
  radial-gradient(ellipse at 50% 30%, rgba(60,120,90,.28), transparent 60%),
  repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 2px, transparent 2px 9px), var(--pub-bg); }
#sk-lobby.active { display: flex; }
#sk-lobby .panel h1 span { display: block; font-size: .68rem; letter-spacing: 3px; opacity: .7; }

/* Spielszene: grüner Filz (wie Cambio/Schwimmen) */
#sk-view .felt, #sk-room-view .felt { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(46vw, 600px); aspect-ratio: 1.3; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 32%, #4d8a6a, var(--felt) 55%, var(--felt-dark));
  box-shadow: inset 0 -14px 30px rgba(0,0,0,.45), inset 0 10px 18px rgba(255,255,255,.14),
    0 18px 45px rgba(0,0,0,.6), 0 0 0 16px var(--wood), 0 0 0 22px #3a2512, 0 24px 60px rgba(0,0,0,.65); }
#sk-view .felt .flabel, #sk-room-view .felt .flabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 900; letter-spacing: 8px; color: rgba(246,239,220,.1); font-style: italic; }

/* Zentrum: Trumpf + Stichzähler */
.sk-trump { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); z-index: 5; text-align: center; pointer-events: none; }
.sk-trump .tsuit { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; text-shadow: 0 0 26px rgba(255,215,120,.5); }
.sk-trump .tsuit.red { color: var(--red); }
.sk-trump .tsuit.black { color: #1e1a16; text-shadow: 0 0 22px rgba(255,255,255,.25); }
.sk-trump .tlabel { font-weight: 900; letter-spacing: 2px; font-size: .82rem; opacity: .97; margin-top: 2px; text-shadow: 0 1px 3px #000; }
.sk-trump .stich { margin-top: 5px; background: rgba(0,0,0,.35); border: 1px solid rgba(223,171,51,.4); color: var(--gold);
  font-weight: 800; font-size: .74rem; padding: 2px 12px; border-radius: 20px; letter-spacing: 1px; display: inline-block; }

/* Skat-Häufchen (verdeckt) */
.sk-skat { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.skatpile { display: flex; }
.skatpile .card.mini { width: clamp(26px, 3vw, 38px); aspect-ratio: 5/7; }
.skatpile .card.mini::after { font-size: .7em; }
.skatlbl { font-size: .58rem; letter-spacing: 2px; opacity: .75; margin-top: 2px; }

/* ---- Sitzplätze der Gegner (oben links/rechts) ---- */
.sk-seat { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; z-index: 10; width: 160px; }
.sk-seat .avatar { width: clamp(46px, 5.2vw, 66px); height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.sk-seat .pname { font-size: .78rem; font-weight: 700; margin-top: 2px; text-align: center; text-shadow: 0 1px 3px #000;
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-seat .sk-chip { font-size: .66rem; font-weight: 800; color: #241304; background: var(--gold); border-radius: 12px;
  padding: 1px 10px; margin-top: 3px; letter-spacing: .5px; }
.sk-seat .sk-chip:empty { display: none; }
.sk-seat .sk-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.sk-seat .backs { display: flex; }
.sk-seat .backs .card.mini { width: clamp(16px, 1.8vw, 22px); aspect-ratio: 5/7; }
.sk-seat .backs .card.mini::after { font-size: .5em; }
.sk-seat .backs .more { font-size: .6rem; opacity: .8; margin-left: 2px; }
.sk-seat .sk-pts { font-size: .66rem; font-weight: 800; color: var(--gold); background: rgba(0,0,0,.45); padding: 1px 7px; border-radius: 10px; }
.sk-seat.turn .avatar { animation: charJump .7s ease-in-out infinite; }
.sk-seat.turn::before { content: ''; position: absolute; inset: -6px; border-radius: 30px; border: 3px solid var(--gold);
  box-shadow: 0 0 16px rgba(223,171,51,.8); animation: turnGlow 1.2s infinite; }
.sk-seat.dealer .pname::after { content: ' 🎩'; }

/* gespielte Karten: Richtung Spieler */
.sk-play { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; z-index: 8; }
.sk-play .slot { width: clamp(52px, 5.4vw, 74px); aspect-ratio: 5/7; }
.sk-play .tag { display: flex; align-items: center; gap: 3px; font-size: .6rem; opacity: .95; margin-top: 3px;
  background: rgba(0,0,0,.5); padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.sk-play .tag .potimg { width: 14px; height: 14px; }

/* ---- eigene Hand ---- */
.sk-hand { position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px; z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: min(96vw, 1250px); }
.sk-hand .slot { width: clamp(38px, 4.4vw, 66px); aspect-ratio: 5/7; }
.sk-hand .slot .card { transition: transform .12s, box-shadow .12s; }
.sk-hand .slot.legal .card { cursor: pointer; box-shadow: 0 0 0 2px rgba(223,171,51,.0); }
.sk-hand .slot.legal .card:hover { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(0,0,0,.55); outline: 2px solid rgba(223,171,51,.9); }
.sk-hand .slot.illegal .card { opacity: .4; filter: saturate(.4); }
.sk-hand .slot.pick .card { cursor: pointer; animation: targetPulse 1s infinite; }
.sk-hand .slot.pick .card:hover { transform: translateY(-5px); }
.sk-hand .slot.sel .card { transform: translateY(-12px); outline: 3px solid var(--gold); box-shadow: 0 10px 18px rgba(0,0,0,.6); }
.sk-hand .hint { width: 100%; text-align: center; font-size: .72rem; opacity: .92; margin-top: 2px; text-shadow: 0 1px 3px #000; }
.sk-hand .card { font-size: clamp(.7rem, 1.1vw, 1.05rem); }
.sk-hand .card .suit { font-size: 1.5em; }

/* eigene Namenszeile + Punkte */
.sk-me-name { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 21;
  display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; }
.sk-me-name .ownpot { width: 34px; }
.sk-me-pts { font-size: .7rem; font-weight: 800; color: var(--gold); background: rgba(0,0,0,.45); padding: 2px 10px; border-radius: 12px; }

/* ---- Punkte-Tafel (rechts) ---- */
#sk-board { position: absolute; top: 74px; right: 12px; z-index: 25; width: 196px;
  background: rgba(24,14,7,.9); border: 2px solid rgba(223,171,51,.55); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); font-size: .78rem; pointer-events: none; }
#sk-board .btitle { text-align: center; font-weight: 900; letter-spacing: 2px; color: var(--gold); font-size: .72rem; margin-bottom: 6px; }
#sk-board .brow { display: flex; align-items: center; gap: 7px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
#sk-board .brow:last-child { border-bottom: none; }
#sk-board .brow .potimg { width: 24px; height: 24px; flex-shrink: 0; }
#sk-board .brow .bn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#sk-board .brow .bs { font-size: .66rem; opacity: .9; white-space: nowrap; }
#sk-board .brow .sc { font-weight: 900; color: var(--gold); min-width: 40px; text-align: right; }
#sk-board .brow.me { background: rgba(223,171,51,.14); border-radius: 6px; }
#sk-board .brow.decl .bn { color: #ffe28a; }
#sk-board .bnote { text-align: center; font-size: .6rem; opacity: .65; margin-top: 5px; }

/* ---- Aktionsleiste ---- */
bottom: calc(8px + env(safe-area-inset-bottom, 0px)) transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: rgba(24,14,7,.95); border: 2px solid var(--gold); border-radius: 14px; padding: 10px 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6); max-width: min(96vw, 920px); }
#sk-prompt.inactive { border-color: rgba(255,255,255,.25); }
#sk-prompt.inactive .pmain { opacity: .75; }
#sk-prompt .pmain { font-size: .96rem; font-weight: 600; text-align: center; }
#sk-prompt .pbtns { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 660px; }
#sk-prompt .pbtns .btn { min-width: 44px; }
#sk-prompt .pbtns .btn.suitbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; }
#sk-prompt .pbtns .btn.suitbtn b { font-size: 1.25rem; line-height: 1; }
#sk-prompt .pbtns .btn.suitbtn b.red { color: var(--red); }
#sk-prompt .pbtns .btn.suitbtn span { font-size: .8rem; }
#sk-prompt .pbtns .btn.suitbtn i { font-style: normal; font-size: .66rem; opacity: .85; background: rgba(0,0,0,.18); padding: 1px 6px; border-radius: 10px; }

/* Karten-Größen */
.sk-play .card, .sk-seat .backs .card { font-size: .8rem; }
.sk-play .card .suit, .sk-seat .backs .card .suit { font-size: 1.3em; }

/* Kreidetafel & Log (skat-spezifisch) */
#sk-chalk { position: absolute; left: 14px; top: 74px; width: min(250px, 21vw); z-index: 25; transform: rotate(-.7deg); }
.chalkboard.collapsed .chalk-inner { display: none; }
#sk-chalk .cr { font-size: .72rem; }
#sk-chalk h3 { color: #ffe9a8; }
#sk-chalk .gold { color: #ffe9a8; }
#sk-logpanel { position: absolute; left: 14px; bottom: 14px; width: min(290px, 23vw); z-index: 25;
  background: rgba(24,14,7,.85); border: 2px solid var(--wood-dark); border-radius: 12px; padding: 8px 12px;
  font-size: .76rem; max-height: 130px; overflow: hidden; }
#sk-loglines div { padding: 1.5px 0; opacity: .9; }
#sk-loglines div.me { color: var(--gold); }
#sk-loglines div:first-child { font-weight: 700; }

/* Ergebnis-Overlay */
.sk-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: .95rem; }
.sk-row .potimg { width: 40px; }
.sk-row .wname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-row .wmeta { font-size: .74rem; opacity: .9; text-align: center; white-space: nowrap; }
.sk-row .wdelta { font-weight: 800; min-width: 52px; text-align: right; }
.sk-row .wscore { font-weight: 900; color: var(--gold); min-width: 46px; text-align: right; }
.rankline { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 1rem; }
.rankline .rk { font-weight: 900; color: var(--gold); width: 30px; }
.rankline .pts { margin-left: auto; font-weight: 800; color: var(--gold); min-width: 42px; text-align: right; }
.rankline.win { background: rgba(223,171,51,.16); border-radius: 8px; }
.rankline .potimg { width: 44px; }
.rankline .potimg svg { width: 100%; }

#sk-view { overflow: hidden; }
#sk-view .card.red .rank, #sk-view .card.red .suit { color: var(--red); }
#sk-view .card.black .rank, #sk-view .card.black .suit { color: #1e1a16; }

/* ===== Mobile/Tablet-Anpassungen ===== */
@media (max-width: 700px) {
  .sk-hand .slot { width: clamp(30px, 8.6vw, 44px); }
}