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

/* ---- Spielszene: magischer Filz ---- */
#w-view .felt, #w-room-view .felt { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(44vw, 560px); aspect-ratio: 1.15; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 32%, #51468f, #2b2454 55%, #191338);
  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); }
#w-view .felt .flabel, #w-room-view .felt .flabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem); font-weight: 900; letter-spacing: 8px; color: rgba(246,239,220,.10); font-style: italic; }
#w-view .felt { width: min(52vw, 700px); aspect-ratio: 1.25; }

/* Zentrum: Trumpf + Stich-Zähler */
.w-trump { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-54%); z-index: 5; text-align: center; pointer-events: none; }
.w-trump .tsuit { font-size: clamp(3rem, 6vw, 5rem); line-height: 1; text-shadow: 0 0 26px rgba(255,215,120,.45); }
.w-trump .tsuit.dot { display: inline-block; width: clamp(46px, 5.5vw, 66px); height: clamp(46px, 5.5vw, 66px); border-radius: 50%;
  box-shadow: 0 0 26px rgba(255,255,255,.28), inset 0 0 0 4px rgba(255,255,255,.5); }
.w-trump .tsuit.none { color: #cfc5f2; font-size: clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing: 2px; }
.w-trump .tlabel { font-weight: 900; letter-spacing: 3px; font-size: .86rem; opacity: .96; margin-top: 3px; text-shadow: 0 1px 3px #000; }
.w-trump .tup { font-size: .68rem; opacity: .8; margin-top: 2px; }
.w-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: .78rem; padding: 3px 14px; border-radius: 20px; letter-spacing: 1px; display: inline-block; }

/* ---- Sitzplätze rund um den Tisch ---- */
#w-view .wseat { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; z-index: 10; width: 150px; }
#w-view .wseat .avatar { width: clamp(44px, 5vw, 66px); height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
#w-view .wseat.me .avatar { width: clamp(60px, 7vw, 96px); }
#w-view .wseat .pname { font-size: .78rem; font-weight: 700; margin-top: 2px; text-align: center; text-shadow: 0 1px 3px #000;
  max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#w-view .wseat.me .pname { color: var(--gold); }
#w-view .wseat .bidchip { font-size: .68rem; font-weight: 800; color: #241304; background: var(--gold); border-radius: 12px;
  padding: 1px 9px; margin-top: 3px; letter-spacing: .5px; }
#w-view .wseat .hrow { display: flex; gap: 3px; margin-top: 4px; }
#w-view .wseat .hrow .hcard { width: clamp(34px, 3.6vw, 48px); aspect-ratio: 5/7; }
#w-view .wseat .hrow .hcard .card { box-shadow: 0 0 8px rgba(223,171,51,.65); }
#w-view .wseat .tricksdots { margin-top: 3px; font-size: .6rem; letter-spacing: 2px; color: #e8e2ff; }
#w-view .wseat.turn .avatar { animation: turnBob 1s ease-in-out infinite; }
#w-view .wseat.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; }
#w-view .wseat.dealer .pname::after { content: ' 🎩'; }
#w-view .wseat.off .avatar { opacity: .35; }
#w-view .wseat.off::before { content: '💤 offline'; position: absolute; top: 8px; font-size: .6rem; opacity: .8; z-index: 3; }

/* gespielte Karten: nahe der Mitte, Richtung Spieler */
#w-view .wplay { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; z-index: 8; }
#w-view .wplay .slot { width: clamp(46px, 5vw, 66px); aspect-ratio: 5/7; }
#w-view .wplay .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; }
#w-view .wplay .tag .potimg { width: 14px; height: 14px; }
#w-view .wplay.lastwin .slot .card { box-shadow: 0 0 14px rgba(223,171,51,.95); }

/* ---- eigene Hand ---- */
#w-view .w-hand { position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px; z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: min(94vw, 1180px); }
#w-view .w-hand .slot { width: clamp(38px, 4vw, 62px); aspect-ratio: 5/7; }
#w-view .w-hand .slot .card { transition: transform .12s, box-shadow .12s; }
#w-view .w-hand .slot.legal .card { cursor: pointer; }
#w-view .w-hand .slot.legal .card:hover { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(0,0,0,.5); }
#w-view .w-hand .slot.illegal .card { opacity: .38; filter: saturate(.4); }
#w-view .w-hand .hint { width: 100%; text-align: center; font-size: .7rem; opacity: .8; margin-top: 2px; }
#w-view .w-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; }
#w-view .w-me-name .ownpot { width: 34px; }

/* ---- Punkte-/Ansage-Tafel (rechts) ---- */
#w-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; }
#w-board .btitle { text-align: center; font-weight: 900; letter-spacing: 2px; color: var(--gold); font-size: .72rem; margin-bottom: 6px; }
#w-board .brow { display: flex; align-items: center; gap: 7px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
#w-board .brow:last-child { border-bottom: none; }
#w-board .brow .potimg { width: 24px; height: 24px; flex-shrink: 0; }
#w-board .brow .bn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#w-board .brow .bs { font-size: .68rem; opacity: .85; white-space: nowrap; }
#w-board .brow .sc { font-weight: 900; color: var(--gold); min-width: 38px; text-align: right; }
#w-board .brow.me { background: rgba(223,171,51,.14); border-radius: 6px; }
#w-board .bnote { text-align: center; font-size: .62rem; opacity: .6; 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, 900px); }
#w-prompt.inactive { border-color: rgba(255,255,255,.25); }
#w-prompt.inactive .pmain { opacity: .75; }
#w-prompt .pmain { font-size: .98rem; font-weight: 600; text-align: center; }
#w-prompt .pbtns { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 640px; }
#w-prompt .pbtns .btn { min-width: 44px; }
#w-prompt .pbtns .btn.suitbtn { font-size: 1.35rem; padding: 6px 16px; }

/* Karten: Zauberer & Narr */
.card.wz { background: linear-gradient(150deg, #7b3fd4, #4a1d96); border: 1px solid #b48bf0; }
.card.wz .rank { color: #ffe9a8; font-size: 1.1em; left: 3px; top: 3px; }
.card.wz .suit { color: #ffe9a8; font-size: 1.4em; }
.card.wz::after { content: '★'; position: absolute; bottom: 1px; right: 5px; font-size: .6em; color: rgba(255,233,168,.85); }
.card.wn { background: linear-gradient(150deg, #8d8d94, #55555c); border: 1px solid #b7b7c0; }
.card.wn .rank { color: #eee; font-size: 1.1em; left: 3px; top: 3px; }
.card.wn .suit { color: #eee; font-size: 1.4em; }
.card.wz.sm, .card.wn.sm { font-size: .8rem; }

/* Echte Wizard-Karten: Wert 1–13 in der Wizard-Farbe (Amigo-Set) */
.card.wcard { border-width: 2px; border-style: solid; }
.card.wcard .rank { font-size: 1.05em; }
.card.wcard .suit { font-size: clamp(1.5em, 2.2vw, 2.2em); font-weight: 900; }
.card.wcard.sm .suit { font-size: 1.15em; }
.card.wblau { border-color: #2f5fc4; background: linear-gradient(160deg, #f6f9ff, #dbe6fa); }
.card.wblau .rank, .card.wblau .suit { color: #2f5fc4; }
.card.wrot { border-color: #c0392b; background: linear-gradient(160deg, #fff6f5, #f8d8d4); }
.card.wrot .rank, .card.wrot .suit { color: #b43022; }
.card.wgruen { border-color: #218c53; background: linear-gradient(160deg, #f4fbf7, #d5ecdf); }
.card.wgruen .rank, .card.wgruen .suit { color: #1e7a48; }
.card.wgelb { border-color: #c79a1b; background: linear-gradient(160deg, #fffcf2, #f6e9c3); }
.card.wgelb .rank, .card.wgelb .suit { color: #9a6b00; }
.w-hand .slot .card.hellcard { border: 2px dashed rgba(223,171,51,.85); box-shadow: 0 0 8px rgba(223,171,51,.35); }

/* Regeltafel (Kreide) */
#w-chalk h3 { color: #ffe9a8; }
#w-chalk .gold { color: #ffe9a8; }

/* Ergebnis-Overlay */
.wrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); font-size: .95rem; }
.wrow .potimg { width: 40px; }
.wrow .wname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .wmeta { font-size: .75rem; opacity: .85; text-align: center; }
.wrow .wdelta { font-weight: 800; min-width: 46px; text-align: right; }
.wrow .wscore { font-weight: 900; color: var(--gold); min-width: 44px; text-align: right; }
.wrow.win { background: rgba(223,171,51,.16); border-radius: 8px; }
.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%; }

/* Breite Hände nicht über den Bildschirmrand */
#w-view { overflow: hidden; }

/* Kreidetafel & Logposition (wizard-spezifisch) */
#w-chalk { position: absolute; left: 14px; top: 74px; width: min(240px, 20vw); z-index: 25; transform: rotate(-.7deg); }
.chalkboard.collapsed .chalk-inner { display: none; }
#w-chalk .cr { font-size: .72rem; }
#w-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; }
#w-loglines div { padding: 1.5px 0; opacity: .9; }
#w-loglines div.me { color: var(--gold); }
#w-loglines div:first-child { font-weight: 700; }
/* ===== Mobile/Tablet-Anpassungen ===== */
@media (max-width: 700px) {
  /* Tisch gross genug auf dem Handy */
  #w-view .felt { width: min(88vw, 560px); }
  #w-room-view .felt { width: min(70vw, 560px); }
  /* Punkte-Tafel kompakt nach rechts oben */
  #w-board { width: min(150px, 46vw); right: 4px; top: 62px; padding: 6px 8px; font-size: .66rem; }
  #w-board .btitle { font-size: .6rem; }
  #w-board .brow .potimg { width: 18px; height: 18px; }
  #w-board .bnote { display: none; }
  #w-board .bs { font-size: .58rem; }
  #w-view .w-me-name { font-size: .8rem; }
  #w-view .w-hand .slot { width: clamp(34px, 9.4vw, 46px); }
  #w-view .wseat .avatar { width: clamp(34px, 10vw, 48px); }
  #w-view .wseat .pname { font-size: .6rem; max-width: 84px; }
  #w-view .wplay .slot { width: clamp(38px, 10vw, 52px); }
}
@media (max-width: 600px) {
  #w-board { top: 132px; right: 2px; width: 118px; font-size: .6rem; padding: 4px 6px; }
  #w-board .brow { gap: 4px; padding: 2px 0; }
  #w-board .brow .potimg { width: 15px; height: 15px; }
  #w-board .bs { display: none; } /* nur Name + Punkte auf Handys */
}