/* Magarac: Akzent Eselbraun; klassische weiße Spielkarten (♠ ♣ schwarz, ♥ ♦ rot), großer runder „Hand drauf!“-Knopf */
:root{--accent:#8a5a33;--accent-dunkel:#6b4426;--on-accent:#ffffff;--kw:84px;--mg-rot:#c8262c;--mg-schwarz:#1b1d22}
@media (prefers-color-scheme: dark){:root:not([data-theme="hell"]){--accent:#d29a6a;--on-accent:#24150a}}
:root[data-theme="dunkel"]{--accent:#d29a6a;--on-accent:#24150a}

/* ---- Karte ---- */
.mk{--w:var(--kw);width:var(--w);height:calc(var(--w) * 1.45);flex:none;position:relative;display:inline-grid;place-items:center;padding:0;margin:0;
  border-radius:calc(var(--w) * .1);background:#fff;color:var(--mg-schwarz);border:1px solid rgba(0,0,0,.18);
  box-shadow:0 1px 3px rgba(0,0,0,.22);font-family:var(--f-display);line-height:1;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mk.rot{color:var(--mg-rot)}
.mg-z{font-size:calc(var(--w) * .46);font-weight:800;margin-top:calc(var(--w) * -.2)}
.mk.lang .mg-z{font-size:calc(var(--w) * .38);letter-spacing:-.04em}
.mg-f{position:absolute;bottom:calc(var(--w) * .3);font-size:calc(var(--w) * .34)}
.mg-e{position:absolute;top:calc(var(--w) * .08);left:calc(var(--w) * .09);font-size:calc(var(--w) * .17);font-weight:800;display:flex;flex-direction:column;align-items:center;gap:1px}
.mg-e small{font-size:calc(var(--w) * .15)}
.mg-e.u{top:auto;left:auto;bottom:calc(var(--w) * .08);right:calc(var(--w) * .09);transform:rotate(180deg)}
button.mk{cursor:pointer;transition:transform .14s,box-shadow .14s,opacity .14s}
@media (hover:hover){button.mk:hover{transform:translateY(-8px)}}
button.mk.gewaehlt{transform:translateY(-22px);box-shadow:0 0 0 3px var(--accent),0 10px 18px rgba(0,0,0,.3);z-index:2}
button.mk:focus-visible{outline:3px solid var(--accent);outline-offset:2px;z-index:3}
.mk.weg{transform:translateY(-22px);opacity:.45}
.mk.neu{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent),0 2px 6px rgba(0,0,0,.2)}
.mk.neu::after{content:"neu";position:absolute;top:calc(var(--w) * -.16);left:50%;transform:translateX(-50%);font:700 11px var(--f-body,inherit);
  padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--on-accent)}

/* ---- MAGARAC-Buchstaben ---- */
.mg-wort{display:inline-flex;gap:3px;font-family:var(--f-display);font-weight:800}
.mg-wort i{font-style:normal;display:grid;place-items:center;width:26px;height:30px;border-radius:7px;border:1.5px dashed color-mix(in srgb,var(--muted) 55%,transparent);color:color-mix(in srgb,var(--muted) 45%,transparent);font-size:16px}
.mg-wort i.an{border:0;background:var(--accent);color:var(--on-accent)}
.mg-wort.voll i.an{background:var(--danger);color:#fff}
.mg-wort.klein{gap:2px}
.mg-wort.klein i{width:13px;height:16px;border-radius:4px;font-size:9px;border-width:1px}

/* ======== Spielfläche ======== */
.mg{display:flex;flex-direction:column;gap:14px;width:100%;max-width:820px;margin-inline:auto}
.spiel.laeuft:has(.mg) > .kopfzeile{flex-direction:row;align-items:baseline;justify-content:center;gap:10px}
.spiel.laeuft:has(.mg) > .kopfzeile h2{font-size:17px}
.spiel.laeuft:has(.mg) > .kopfzeile .sub{display:none}
.mg-tisch{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px 14px 20px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 55%,color-mix(in srgb,var(--accent) 16%,var(--surface)),color-mix(in srgb,var(--accent) 5%,var(--surface)) 70%);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
.mg-sitze{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;width:100%}
.mg-sitz{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);min-width:0}
.mg-sitz .av{width:32px;height:32px;font-size:14px}
.mg-sitz-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.15;min-width:0;text-align:left}
.mg-sitz-text b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.mg-pfeil{color:var(--accent)}
.mg-zustand{display:grid;place-items:center;min-width:30px;height:30px;font-size:15px}
/* Platz-Zeichen ○ wählt noch, ● hat gewählt, ◉ Hand drauf – absichtlich gleich groß und gleich gefärbt, keine Bewegung, kein Rahmen */
.mg-punkt{font-size:15px;line-height:1;color:var(--muted)}
.mg-mitte{display:flex;flex-direction:column;align-items:center;gap:10px}
.mg-info{margin:0;font-size:13px;color:var(--muted);text-align:center}
.mg-info b{color:var(--ink)}
.mg-auto{margin:0;font-size:13px;color:var(--muted)}
.mg-zeitleiste{position:absolute;left:0;right:0;bottom:0;height:5px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.mg-zeitleiste i{display:block;height:100%;width:100%;background:var(--accent);transition:width .35s linear}

/* ---- du ---- */
.mg-ich{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
.mg-leiste{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:10px 12px 10px 16px;border-radius:16px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));border:1px solid var(--accent)}
.mg-status{display:flex;align-items:baseline;gap:10px}
.mg-status b{font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--accent)}
.uhr{font-family:var(--f-mono);font-size:15px;color:var(--muted)}
.uhr.knapp{color:var(--danger);font-weight:700}
.mg-knoepfe .btn{min-width:130px}
.mg-hinweis{margin:-2px 0 0;font-size:14px;color:var(--muted);text-align:center}
.mg-hinweis b{color:var(--ink)}
.mg-reihe{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,4vw,36px);padding-top:26px}
.mg-hand{display:flex;gap:10px}
/* der große Knopf */
.mg-handknopf{width:calc(var(--kw) * 1.45);height:calc(var(--kw) * 1.45);flex:none;border-radius:50%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--danger) 75%,#fff),var(--danger));color:#fff;
  box-shadow:0 6px 0 color-mix(in srgb,var(--danger) 60%,#000),0 10px 20px rgba(0,0,0,.25);font-family:var(--f-display);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:transform .06s,box-shadow .06s}
.mg-handknopf span{font-size:calc(var(--kw) * .5);line-height:1}
.mg-handknopf b{font-size:calc(var(--kw) * .19);font-weight:800}
.mg-handknopf small{font-size:11px;opacity:.85}
.mg-handknopf:active,.mg-handknopf.drauf{transform:translateY(5px);box-shadow:0 1px 0 color-mix(in srgb,var(--danger) 60%,#000),0 3px 8px rgba(0,0,0,.25)}
.mg-handknopf.drauf{background:color-mix(in srgb,var(--danger) 55%,var(--surface));cursor:default}
.mg-handknopf:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (hover:none){.mg-handknopf small{display:none}}
.mg-ich.zuschauer .warte{margin:0;text-align:center}

/* ---- Ergebnis ---- */
.mg-ende{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.mg-ende span{font-size:52px;line-height:1}
.mg-ende b{font-family:var(--f-display);font-weight:800;font-size:clamp(21px,4vw,28px)}
.mg-ende small{font-size:14px;color:var(--muted)}
.mg-weiter{margin:4px 0 0;text-align:center;color:var(--muted)}
.mg-rest{--kw:24px;display:flex;gap:2px;margin-top:4px}
.mg-rest .mk{border-radius:4px}
.mg-rest .mg-e,.mg-rest .mg-f{display:none}
.mg-rest .mg-z{margin:0;font-size:12px}
.mg-rest .mk.lang .mg-z{font-size:10px}
tr.verloren td:first-child .wer{color:var(--danger);font-weight:700}
.mg-esel{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.mg-esel span{font-size:56px;line-height:1}
.mg-esel b{font-family:var(--f-display);font-size:clamp(20px,4vw,26px)}
.mg-tag{font-family:var(--f-display);letter-spacing:.06em;color:var(--danger)}

/* ---- Handy ---- */
@media (max-width:600px){
  .mg{gap:10px}
  .mg-tisch{padding:12px 8px 16px;gap:12px;border-radius:18px}
  .mg-sitze{gap:6px}
  .mg-sitz{padding:4px 8px 4px 4px;gap:6px}
  .mg-sitz .av{width:26px;height:26px;font-size:12px}
  .mg-sitz-text b{font-size:13px;max-width:84px}
  .mg-ich{--kw:64px}
  .mg-hand{gap:6px}
  .mg-reihe{flex-direction:column;align-items:center;gap:16px;padding-top:24px}
  .mg-handknopf{width:auto;height:auto;align-self:stretch;border-radius:18px;flex-direction:row;gap:10px;padding:14px}
  .mg-handknopf span{font-size:30px}
  .mg-handknopf b{font-size:20px}
  .mg-leiste{padding:8px 8px 8px 12px}
  .mg-knoepfe{width:100%}
  .mg-knoepfe .btn{width:100%}
}
@media (min-width:1200px){
  html.raum-ansicht .app{max-width:1440px}
  html.raum-ansicht #main > .raum{grid-template-columns:minmax(0,1fr) clamp(320px,28vw,420px);gap:24px}
}
@media (min-width:881px){
  html.raum-ansicht #links.spiel.laeuft:has(.mg) > .mg{flex:1 0 auto}
  html.raum-ansicht .mg-tisch{flex:1 0 auto;justify-content:center}
  .mg-ich{--kw:clamp(70px,11vh,120px)}
}
@media (min-width:881px) and (max-height:820px){
  .mg{gap:10px}
  .mg-tisch{padding:10px 12px 14px;gap:10px}
  .mg-ich{--kw:76px}
}
@media (prefers-reduced-motion: reduce){button.mk,.mg-handknopf,.mg-zeitleiste i{transition:none}}
/* Leere Meldungszeile unter dem Spiel nimmt keinen Platz weg */
.spiel.laeuft:has(.mg) > .toast:empty{display:none}
/* Handy/Tablet während der Runde: „Im Raum“ weg – die Plätze am Tisch zeigen alle samt Buchstaben */
@media (max-width:860px){
  #main > .raum:has(.spiel.laeuft .mg) > .spalte-rechts{display:none}
}
/* ======== Handy: alles auf einen Bildschirm, kein Scrollen (wie Farbenjagd/Shithead) ======== */
@media (max-width:600px){
  html:has(.spiel.laeuft .mg),html:has(.spiel.laeuft .mg) body{height:100%;overflow:hidden;overscroll-behavior:none}
  body > .app:has(.spiel.laeuft .mg){height:100dvh;min-height:0;box-sizing:border-box;overflow:hidden;padding-top:6px;gap:6px;padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
  .app:has(.spiel.laeuft .mg) > header{gap:8px}
  .app:has(.spiel.laeuft .mg) > .rechtsfuss{display:none}
  .app:has(.spiel.laeuft .mg) > #main{flex:1;min-height:0;display:flex;flex-direction:column}
  .app:has(.spiel.laeuft .mg) #main > .raum{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0}
  .app:has(.spiel.laeuft .mg) #links.spiel.laeuft{flex:1;min-height:0;overflow:hidden;gap:6px}
  .spiel.laeuft:has(.mg) > .kopfzeile{display:none}
  .app:has(.spiel.laeuft .mg) #links.spiel.laeuft > .mg{flex:1 1 auto;min-height:0;gap:8px}
  .app:has(.spiel.laeuft .mg) .mg-tisch{flex:1 1 auto;min-height:0;padding:8px 6px 12px;gap:8px;border-radius:16px}
  .app:has(.spiel.laeuft .mg) .mg-mitte{margin-block:auto}
  /* Plätze: eine Zeile, bei vielen Spielern seitlich wischen */
  .mg-sitze{flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;padding:2px}
  .mg-sitze::-webkit-scrollbar{display:none}
  .mg-sitz{flex:none}
  /* Status links, „Weitergeben“ rechts – eine Zeile */
  .mg-ich{--kw:clamp(54px,12svh,84px);gap:6px}
  .mg-leiste{flex-wrap:nowrap;gap:8px;border-radius:14px}
  .mg-status{flex-direction:column;align-items:flex-start;gap:0;flex:1;min-width:0}
  .mg-status b{font-size:17px}
  .mg-status .uhr{font-size:12px}
  .mg-knoepfe{width:auto;flex:none}
  .mg-knoepfe .btn{width:auto;min-width:0;padding:10px 14px}
  .mg-hinweis{font-size:12px;line-height:1.3;margin:0}
  .mg-reihe{gap:10px;padding-top:20px}
  .mg-handknopf{padding:10px 14px}
  .mg-handknopf span{font-size:26px}
  .mg-handknopf b{font-size:18px}
  /* Meldungen schweben oben, statt den Inhalt zu verschieben */
  .spiel.laeuft:has(.mg) > .toast:not(:empty){position:fixed;z-index:40;top:calc(52px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
    width:max-content;max-width:calc(100vw - 32px);padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
}