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

/* Spielszene */
#s-view .felt { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(44vw, 560px); aspect-ratio: 1.7; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #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); }
#s-view .felt .flabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: 7px; color: rgba(246,239,220,.12); font-style: italic; }

/* Tischkarten (Talon) */
.sw-talon { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); display: flex; gap: 14px; align-items: center; z-index: 6; }
.sw-talon .tcard { width: clamp(58px, 6.5vw, 88px); aspect-ratio: 5/7; position: relative; }
.sw-talon .tcard .cnt { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-size: .7rem; opacity: .8; }
.sw-talon .tcard.hl { animation: targetPulse 1s infinite; border-radius: 7px; cursor: pointer; }
.sw-talon .stocknote { font-size: .72rem; opacity: .7; margin-left: 6px; }

/* Gegner oben im Bogen */
#s-view .sw-opp { position: absolute; transform: translate(-50%,0); display: flex; flex-direction: column; align-items: center; z-index: 10; top: 92px; }
#s-view .sw-opp .opphead { display: flex; align-items: center; gap: 6px; }
#s-view .sw-opp .avatar { width: clamp(44px, 5vw, 62px); }
#s-view .sw-opp .pname { font-size: .72rem; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s-view .sw-opp .lives { font-size: .72rem; letter-spacing: 1px; }
#s-view .sw-opp .mrow { display: flex; gap: 5px; margin-top: 4px; }
#s-view .sw-opp .mrow .slot { width: clamp(30px, 3.4vw, 46px); aspect-ratio: 5/7; }
#s-view .sw-opp .mrow .slot.hl { animation: targetPulse 1s infinite; cursor: pointer; border-radius: 5px; }
#s-view .sw-opp.turn { filter: drop-shadow(0 0 12px rgba(223,171,51,.9)); }
#s-view .sw-opp.caller::before { content: '👑'; }
#s-view .sw-opp.out .avatar { opacity: .3; }
#s-view .sw-opp.out::after { content: '💀'; position: absolute; font-size: 1.2rem; }
#s-view .sw-opp .dead { font-size: .68rem; color: #e08a8a; }

/* eigene Hand */
#s-view .sw-me { position: absolute; left: 50%; display: flex; flex-direction: column; align-items: center; z-index: 20; }
#s-view .sw-me .mrow { display: flex; gap: 10px; }
#s-view .sw-me .slot { width: clamp(74px, 9vw, 128px); aspect-ratio: 5/7; }
#s-view .sw-me .mrow .slot.hl { animation: targetPulse 1s infinite; border-radius: 8px; cursor: pointer; }
#s-view .sw-me .pname { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; font-size: .9rem; }
#s-view .sw-me .ownpot { width: 34px; }

/* Avatar-Anker für Emote-Bubble/Delta-Pillen + Emote-Picker am eigenen Avatar */
#s-view .sw-me .ownpot, #s-view .sw-opp .avatar, #s-room-view .waitseat .avatar { position: relative; }
#s-view .sw-me .ownpot { cursor: pointer; }
#s-view .sw-me .ownpot:hover { filter: drop-shadow(0 0 7px rgba(223,171,51,.95)); }
#s-view .sw-opp .chipcount { margin-top: 3px; }
#s-view .sw-me .pname .chipcount { flex: none; }

/* Punkte-Anzeige über eigener Hand */
.sw-pts-badge { position: absolute; left: 50%; transform: translateX(-50%); background: rgba(24,14,7,.9); border: 2px solid var(--gold); color: var(--gold); border-radius: 20px; padding: 2px 12px; font-weight: 800; font-size: .8rem; z-index: 21; }

/* Ergebnis-Overlay */
.handrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.handrow .potimg { width: 40px; }
.handrow .hcards { display: flex; gap: 4px; margin-left: auto; }
.handrow .hcards .slot { width: 34px; aspect-ratio: 5/7; }
.handrow .pts { font-weight: 800; margin-left: 10px; min-width: 46px; text-align: right; }
.handrow.loser { background: rgba(192,57,43,.22); border-radius: 8px; }
.handrow.winner31 { background: rgba(223,171,51,.18); border-radius: 8px; }
.lifeinfo { font-size: .78rem; opacity: .9; margin-top: 8px; text-align: center; }
.rankline { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 1rem; }
.rankline .potimg { width: 42px; }
.rankline .rk { font-weight: 900; color: var(--gold); width: 30px; }

/* Aktionsleiste */
bottom: calc(10px + 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,.94); border: 2px solid var(--gold); border-radius: 14px; padding: 10px 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6); max-width: min(94vw, 760px); }
#sw-prompt.inactive { border-color: rgba(255,255,255,.25); }
#sw-prompt.inactive .pmain { opacity: .7; }
#sw-prompt .pmain { font-size: .95rem; font-weight: 600; }
#sw-prompt .pbtns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Karten in Schwimmen-Größen */
#s-view .card { font-size: 1rem; }
.sw-opp .mrow .card { font-size: .62rem; }
.sw-opp .mrow .card .suit { font-size: 1.2em; }
.sw-me .card { font-size: clamp(1.1rem, 1.8vw, 1.8rem); }
.sw-me .slot .card, .tcard .card { cursor: pointer; }
#s-view .sw-me .slot .card:not(.facedown):hover { transform: translateY(-4px); }
.card.red .rank, .card.red .suit { color: var(--red); }
.card.black .rank, .card.black .suit { color: #1e1a16; }
.handrow .hcards .card { font-size: .7rem; }
.handrow .hcards .card .suit { font-size: 1.2em; }
.sw-pts-badge { pointer-events: none; }
/* ===== Mobile/Tablet-Anpassungen ===== */
@media (max-width: 700px) {
  #s-view .felt { width: min(88vw, 560px); }
  #s-room-view .felt { width: min(70vw, 560px); }
  #s-view .sw-opp { top: 124px; } /* Topbar bricht auf Handys um → Sitze tiefer */
  .sw-me .mrow .slot { width: clamp(56px, 17vw, 88px); }
  .sw-talon .tcard { width: clamp(44px, 13vw, 66px); }
  #s-view .sw-opp .avatar { width: clamp(32px, 9vw, 46px); }
  #s-view .sw-opp .pname { font-size: .6rem; max-width: 76px; }
  #s-view .sw-opp .mrow .slot { width: clamp(20px, 5.6vw, 32px); }
}
/* Kreidetafel & Log: Position (Schwimmen nutzt eigene IDs) */
#s-chalk { position: absolute; left: 14px; top: 74px; width: min(300px, 24vw); z-index: 25; transform: rotate(-.7deg); }
#s-chalk .cr { font-size: .72rem; }
#s-logpanel { position: absolute; left: 14px; bottom: 14px; width: min(280px, 22vw); 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; }
#s-loglines div { padding: 1.5px 0; opacity: .9; }
#s-loglines div.me { color: var(--gold); }
#s-loglines div:first-child { font-weight: 700; }

/* Wartezimmer-Tisch (room view) — gleiche Optik wie im Spiel */
#s-room-view .felt { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
  width: min(82vw, 620px); aspect-ratio: 1.6; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #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); }
#s-room-view .felt .flabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.4rem, 3.6vw, 2.4rem); font-weight: 900; letter-spacing: 7px; color: rgba(246,239,220,.12); font-style: italic; }