/* Mau-Mau — eigenes Layout (nutzt Basis-Style für Panel/Buttons/Karten) */
#m-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); }
#m-lobby.active { display: flex; }
#m-lobby .panel h1 span { display: block; font-size: .68rem; letter-spacing: 3px; opacity: .7; }

/* Spielszene */
#m-view .felt { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(46vw, 580px); 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); }
#m-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; }

/* Kartenzone Mitte: Ablage + Nachziehstapel */
.m-center { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
  display: flex; align-items: center; gap: clamp(30px, 5vw, 70px); z-index: 6; }
.m-center .m-pile { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m-center .m-cardwrap { width: clamp(64px, 8vw, 118px); aspect-ratio: 5/7; position: relative; }
.m-center .m-cardwrap .card { cursor: default; }
.m-center .m-cardwrap .card:hover { transform: none; }
.m-center .m-pilecap { font-size: .74rem; letter-spacing: 1px; opacity: .85; font-weight: 600; }
.m-center .m-stockcount { position: absolute; bottom: -8px; right: -10px; background: rgba(24,14,7,.95);
  border: 2px solid var(--gold); color: var(--gold); border-radius: 20px; min-width: 26px; height: 22px;
  display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; padding: 0 5px; }
/* Wunsch-Anzeige über der Mitte */
.m-wishbar { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); z-index: 7;
  background: rgba(24,14,7,.92); border: 2px solid var(--gold); border-radius: 16px; padding: 6px 18px;
  font-weight: 800; font-size: 1rem; letter-spacing: 1px; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.m-wishbar .wsym { font-size: 1.4rem; line-height: 1; }
.m-wishbar .wsym.red { color: var(--red); }
.m-wishbar .wsym.black { color: #e8e2d2; }
.m-wishbar.pulse2 { animation: targetPulse 1.1s infinite; border-radius: 16px; }

/* Gegner oben */
.m-opps { position: absolute; top: 66px; left: 50%; transform: translateX(-50%);
  display: flex; gap: clamp(16px, 4vw, 64px); align-items: flex-start; z-index: 10; }
.m-opp { display: flex; flex-direction: column; align-items: center; width: 130px; }
.m-opp .opphead { display: flex; align-items: center; gap: 6px; }
.m-opp .avatar { width: clamp(44px, 5vw, 60px); position: relative; }
.m-opp .pname { font-size: .72rem; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-opp .pmeta { font-size: .68rem; opacity: .85; display: flex; gap: 8px; align-items: center; margin-top: 1px; }
.m-opp.turn { filter: drop-shadow(0 0 12px rgba(223,171,51,.9)); }
.m-opp.off .avatar { opacity: .3; }
.m-opp .mrow { display: flex; gap: 0; margin-top: 6px; }
.m-opp .mrow .slot { width: clamp(15px, 1.7vw, 22px); aspect-ratio: 5/7; margin-left: -6px; }
.m-opp .mrow .slot:first-child { margin-left: 0; }
.m-opp .mrow .slot .card { border-radius: 2px; }
.m-opp .mrow .slot .card.facedown::after { font-size: .5em; }

/* eigene Hand (unten, über der Prompt-Leiste) */
.m-me { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 20; }
.m-me .mrow { display: flex; gap: 10px; }
.m-me .slot { width: clamp(66px, 7.5vw, 112px); aspect-ratio: 5/7; }
.m-me .slot .card { cursor: default; transition: transform .12s, box-shadow .12s; }
.m-me .slot.pickable .card { cursor: pointer; }
.m-me .slot.pickable .card:hover { transform: translateY(-6px); box-shadow: 0 10px 18px rgba(0,0,0,.55); }
.m-me .pname { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; font-size: .88rem; }
.m-me .ownpot { width: 32px; position: relative; cursor: pointer; }
.m-me .ownpot:hover { filter: drop-shadow(0 0 6px rgba(223,171,51,.9)); }
.m-me .ownpot .emobub { top: -30px; font-size: 1.5rem; }
.m-me .winschip { background: rgba(24,14,7,.9); border: 1px solid var(--gold); color: var(--gold);
  border-radius: 12px; padding: 0 8px; font-size: .7rem; font-weight: 800; }

/* Log & Kreidetafel-Positionen */
#m-chalk { position: absolute; right: 14px; top: 74px; width: min(300px, 24vw); z-index: 25; transform: rotate(-.7deg); }
#m-chalk.collapsed .chalk-inner { display: none; }
#m-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; }
#m-loglines div { padding: 1.5px 0; opacity: .9; }
#m-loglines div.me { color: var(--gold); }

/* Aktionsleiste */
#m-prompt { position: fixed; left: 50%;
  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, 820px); }
#m-prompt.inactive { border-color: rgba(255,255,255,.25); }
#m-prompt.inactive .pmain { opacity: .7; }
#m-prompt .pmain { font-size: .95rem; font-weight: 600; }
#m-prompt .pbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Wunschfarben-Auswahl */
.m-suitbtn { font-size: 1.35rem; font-weight: 900; width: 52px; height: 46px; border-radius: 9px;
  border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); cursor: pointer; transition: .15s; }
.m-suitbtn:hover { transform: translateY(-2px); border-color: var(--gold); }
.m-suitbtn.red { color: var(--red); }
.m-suitbtn.black { color: #e8e2d2; }

/* Ergebnis-Overlay-Zeilen */
.m-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.m-row .potimg { width: 40px; }
.m-row .pts { font-weight: 800; margin-left: auto; min-width: 40px; text-align: right; color: var(--gold); }
.m-row.win { background: rgba(223,171,51,.18); border-radius: 8px; border-bottom: none; }
.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: 34px; }
.m-lifeinfo { font-size: .78rem; opacity: .9; margin-top: 8px; text-align: center; }

@media (max-width: 900px) {
  .m-opps { gap: 8px; }
  .m-opp { width: 84px; }
  #m-chalk { width: min(240px, 30vw); }
}

/* ===== Mobile/Tablet-Anpassungen ===== */
@media (max-width: 700px) {
  .m-me .slot { width: clamp(46px, 11.5vw, 62px); }
  #m-view .m-table, #m-room-view .m-table { width: min(86vw, 620px); }
}

/* Wartezimmer-Tisch (room view) — gleiche Optik wie im Spiel */
#m-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); }
#m-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; }

/* sehr schmale Handys: Gegner-Reihe kompakt (5 Gegner passen in 360px) */
@media (max-width: 420px) {
  .m-opps { gap: 2px; top: 56px; }
  .m-opp { width: 62px; }
  .m-opp .avatar { width: 34px; }
  .m-opp .pname { font-size: .56rem; max-width: 58px; }
  .m-opp .pmeta { font-size: .58rem; gap: 3px; }
  .m-opp .mrow { margin-top: 3px; }
  .m-opp .mrow .slot { width: 11px; margin-left: -5px; }
  .m-opp .mrow .slot:first-child { margin-left: 0; }
}