/* Durak — eigenes Layout (Basis-Style für Panel/Buttons/Karten) */
#d-lobby { display: none; align-items: center; justify-content: center; background:
  radial-gradient(ellipse at 50% 30%, rgba(120,40,30,.30), transparent 60%),
  repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 2px, transparent 2px 9px), var(--pub-bg); }
#d-lobby.active { display: flex; }
#d-lobby .panel h1 { font-size: 2.3rem; }

/* ---- Spielszene: roter Filz ---- */
#d-view .felt, #d-room-view .felt { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: min(52vw, 720px); aspect-ratio: 1.35; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 32%, #7a3f3f, #57282a 55%, #3c1719);
  box-shadow: inset 0 -14px 30px rgba(0,0,0,.5), inset 0 10px 18px rgba(255,255,255,.12),
    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); }
#d-room-view .felt { width: min(44vw, 560px); aspect-ratio: 1.6; }
#d-view .felt .flabel, #d-room-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: 9px; color: rgba(246,239,220,.10); font-style: italic; }

/* ---- Trumpf-Markierung + Nachziehstapel (über der Tischmitte) ---- */
.d-mid { position: absolute; left: 50%; top: clamp(185px, 31vh, 268px); transform: translateX(-50%); z-index: 6;
  display: flex; align-items: flex-start; gap: 22px; pointer-events: none; }
.d-mid .d-trumpbox, .d-mid .d-stockbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.d-mid .tcardwrap { width: clamp(40px, 4.4vw, 60px); aspect-ratio: 5/7; position: relative; }
.d-mid .tcardwrap .card { box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 0 16px rgba(223,171,51,.5); border-color: var(--gold); }
.d-mid .tlabel { font-size: .66rem; font-weight: 900; letter-spacing: 2px; color: var(--gold);
  background: rgba(0,0,0,.5); padding: 1px 9px; border-radius: 10px; text-shadow: 0 1px 2px #000; }
.d-mid .tnote { font-size: .58rem; opacity: .8; }
.d-mid .stockcount { font-size: .66rem; font-weight: 800; background: rgba(0,0,0,.5); padding: 1px 8px; border-radius: 10px; }
.card.trumpc { outline: 2px solid rgba(223,171,51,.85); outline-offset: -2px; }
.card.trumpc::after { content: '★'; position: absolute; top: 1px; right: 4px; font-size: .55em; color: #c9a227; }

/* ---- Austausch-Tisch (Mitte) ---- */
.d-table { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(88vw, 680px); }
.d-table .d-sidebar { display: flex; align-items: center; gap: 18px; font-size: .68rem; font-weight: 800;
  letter-spacing: 1px; opacity: .95; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.d-table .d-sidebar .atk { color: #ffd9a0; }
.d-table .d-sidebar .def { color: #b7e0c8; }
.d-table .d-pairs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 10px 18px; max-width: min(88vw, 640px); }
.d-empty { font-size: .8rem; opacity: .55; font-style: italic; padding: 10px 0; }
.d-pair { display: flex; align-items: center; gap: 7px; }
.d-pair .aslot, .d-pair .bslot { width: clamp(52px, 5.6vw, 80px); aspect-ratio: 5/7; position: relative; }
.d-pair .aslot .tag, .d-pair .bslot .tag { position: absolute; bottom: -15px; left: 0; right: 0; text-align: center;
  font-size: .52rem; opacity: .85; font-weight: 700; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.d-pair .aslot .card.hot { animation: targetPulse 1s infinite; border-color: transparent; }
.d-pair .bslot .beatempty { width: 100%; height: 100%; border: 2px dashed rgba(255,255,255,.35); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: .7rem; opacity: .7; }
.d-pair .aslot .beatcnt { position: absolute; top: -13px; right: -4px; font-size: .58rem; opacity: .85; }

/* ---- Gegner-Sitze (Bogen oben) ---- */
#d-view .dseat { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column;
  align-items: center; z-index: 10; width: 130px; }
#d-view .dseat .avatar { width: clamp(42px, 4.8vw, 64px); height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); position: relative; z-index: 2; }
#d-view .dseat .pname { font-size: .76rem; font-weight: 700; margin-top: 2px; text-align: center; text-shadow: 0 1px 3px #000;
  max-width: 128px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#d-view .dseat .hrow { display: flex; gap: 2px; margin-top: 3px; }
#d-view .dseat .hrow .hc { width: clamp(16px, 1.7vw, 24px); aspect-ratio: 5/7; }
#d-view .dseat .hrow .hc .card { font-size: .3rem; }
#d-view .dseat .hrow .more { font-size: .6rem; opacity: .85; align-self: center; margin-left: 2px; font-weight: 700; }
#d-view .dseat .rolechip { font-size: .6rem; font-weight: 800; margin-top: 2px; padding: 1px 8px; border-radius: 10px;
  background: rgba(0,0,0,.55); letter-spacing: .5px; }
#d-view .dseat .rolechip.atk { color: #ffd9a0; border: 1px solid rgba(255,190,110,.6); }
#d-view .dseat .rolechip.def { color: #b7e0c8; border: 1px solid rgba(150,230,180,.55); }
#d-view .dseat.turn .avatar { animation: turnBob 1s ease-in-out infinite; }
#d-view .dseat.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; }
#d-view .dseat.out .avatar { opacity: .3; filter: grayscale(.8); }
#d-view .dseat.out .pname::after { content: ' 🏆'; }
#d-view .dseat.off .avatar { opacity: .3; }

/* ---- eigene Hand & Namenszeile ---- */
#d-view .d-hand { position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: min(94vw, 1150px); }
#d-view .d-hand .slot { width: clamp(40px, 4.4vw, 66px); aspect-ratio: 5/7; }
#d-view .d-hand .slot .card { transition: transform .12s, box-shadow .12s; }
#d-view .d-hand .slot.legal .card { cursor: pointer; }
#d-view .d-hand .slot.legal .card:hover { transform: translateY(-7px); box-shadow: 0 10px 18px rgba(0,0,0,.55); }
#d-view .d-hand .slot.illegal .card { opacity: .45; filter: saturate(.5); }
#d-view .d-me-name { position: absolute; left: 50%; transform: translateX(-50%); bottom: 46px; z-index: 21;
  display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; text-shadow: 0 1px 3px #000; }
#d-view .d-me-name .ownpot { width: 34px; }
#d-view .d-me-name .rolechip { font-size: .64rem; font-weight: 800; padding: 1px 9px; border-radius: 10px; background: rgba(0,0,0,.55); }
#d-view .d-me-name .rolechip.atk { color: #ffd9a0; }
#d-view .d-me-name .rolechip.def { color: #b7e0c8; }

/* ---- Aktionsleiste ---- */
#d-prompt { position: fixed; left: 50%; 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); }
#d-prompt.inactive { border-color: rgba(255,255,255,.25); }
#d-prompt.inactive .pmain { opacity: .75; }
#d-prompt .pmain { font-size: .98rem; font-weight: 600; text-align: center; }
#d-prompt .pbtns { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 680px; }
#d-prompt .pbtns .btn.takebtn { background: #7a3f3f; color: #fff; }
#d-prompt .pbtns .btn.stopbtn { background: #1e5a33; color: #fff; }

/* ---- Customizer (Vorschau, Farben, Deko) ---- */
#d-custzone { margin-top: 12px; }
#d-custzone .custprevwrap { text-align: center; line-height: 1; }
#d-custzone .custprev { width: 96px; margin-bottom: 2px; }
#d-custzone .custrow { margin-top: 8px; }
#d-custzone .accchip.dim { opacity: .4; }
#d-custzone .swatch { display: inline-block; flex: none; }
@media (max-width: 600px) {
  #d-custzone .custprev { width: 78px; }
}

/* ---- Emote-Klick (eigener Avatar) + Chips an den Sitzen ---- */
#d-view .d-me-name .ownpot, #d-room-view .seat.me .avatar { position: relative; }
#d-view .d-me-name .ownpot.emitable, #d-room-view .seat.me .avatar.emitable { cursor: pointer; }
#d-view .d-me-name .ownpot.emitable:hover, #d-room-view .seat.me .avatar.emitable:hover { transform: scale(1.14) rotate(-5deg); }
#d-view .dseat .chipcount { margin-top: 3px; }
#d-view .d-me-name .chipcount { align-self: center; }
#d-view .dseat .avatar, #d-view .d-me-name .ownpot { position: relative; }

/* Kreidetafel & Log (durak-Position) */
#d-chalk { position: absolute; left: 14px; top: 74px; width: min(250px, 21vw); z-index: 25; transform: rotate(-.7deg); }
#d-chalk .cr { font-size: .72rem; }
#d-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; }
#d-loglines div { padding: 1.5px 0; opacity: .9; }
#d-loglines div.me { color: var(--gold); }
#d-loglines div:first-child { font-weight: 700; }

/* Ergebnis-Overlay */
.drow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 1rem; }
.drow .potimg { width: 42px; }
.drow .dn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .rk { font-weight: 900; color: var(--gold); width: 30px; }
.drow.durakrow { background: rgba(192,57,43,.25); border-radius: 8px; border-bottom: none; }
.drow.durakrow .rk, .drow.durakrow .dn { color: #ff9d8a; }
.drow.win .rk { color: #8fd48f; }

/* Mobile/Tablet */
@media (max-width: 700px) {
  #d-view .felt { width: min(92vw, 560px); }
  #d-room-view .felt { width: min(70vw, 560px); }
  .d-mid { top: 156px; gap: 14px; }
  #d-chalk { width: min(240px, 60vw); top: 64px; }
  #d-logpanel { width: min(220px, 58vw); max-height: 96px; font-size: .68rem; bottom: 8px; }
  #d-view .d-hand .slot { width: clamp(34px, 9.4vw, 46px); }
  #d-view .dseat .avatar { width: clamp(30px, 9.6vw, 44px); }
  #d-view .dseat .pname { font-size: .58rem; max-width: 76px; }
  #d-view .dseat { width: 82px; }
  #d-view .dseat .rolechip { font-size: .54rem; padding: 0 6px; }
  #d-view .dseat .hrow .hc { width: clamp(13px, 3.4vw, 19px); }
  .d-pair .aslot, .d-pair .bslot { width: clamp(38px, 10.5vw, 52px); }
  .d-table .d-sidebar { font-size: .6rem; gap: 10px; }
  #d-view .d-me-name { font-size: .8rem; }
}