/* ===== SkullCheck – unified, ohne !important ===== */
:root{
  --modal-pad: 1.2rem 1.4rem;
  --modal-title-gap: 1.1rem;
  --modal-gap: .9rem;
  --modal-actions-gap: 1.2rem;

  --edge-offset-x: clamp(1rem, 2.5vw, 3rem);
  --edge-offset-y: clamp(3.5rem, 5vh, 5rem);

  --edge-offset-top: clamp(1rem, 2.5vw, 3rem);


  --bg:#071219;
  --panel:#0c1c24;
  --panel-2:#0a1820;
  --brand:#19d3a3;
  --brand-2:#26b6e8;
  --text:#eaf6ff;
  --muted:#a9c1d1;
  --danger:#ff6b77;
  --shadow:0 14px 44px rgba(0,0,0,.48);

  /* GameTable sizing (JS passt col-min an) */
  --col-min:320px;
  --input-w: 9.5rem; /* Breite guess/right/extra */

  --modal-x:50vw;
  --modal-y:50vh;

  --round-col: minmax(9.8ch, 10.6ch);
  --input-min: 3.6rem;       /* kleiner, reicht für "extra" */
  --row-h: 36px;           /* wird per JS dynamisch gesetzt */
  --fs-scale: 1;           /* 1 = normal, <1 = kleiner */
  --input-pad-y: 0.26rem;   /* wird per JS leicht runtergesetzt */
  --col-min-min: 260px;
  --input-grow: max(3.6rem, 5.6ch);
  --col-gap: clamp(.48rem, 1.2vw, .9rem);
  --card-pad-x: clamp(14px, 3.2vw, 22px);
  --row-h: 36px;
}

*{ box-sizing:border-box; }
html,body{
  height:100%; margin:0; color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(38,182,232,.13), transparent 60%),
    radial-gradient(1200px 800px at 110% 10%, rgba(25,211,163,.12), transparent 60%),
    var(--bg);
  background-attachment:fixed,fixed,fixed;
}

a{ color:#bcd3e4; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

.version-row{
  position: fixed;
  right: 0.75rem;   /* ganz nah am Rand, ~12px */
  bottom: 0.75rem;
  display: flex;
  gap: .75rem;
  font-size: .9rem;
  color: #ddd;
  z-index: 1000;
}


.madeby{ color:#ddd; opacity:.9; border-left:1px solid rgba(255,255,255,.25); padding-left:10px; }

.grid-wrapper{ position:fixed; inset:0; padding:2%; }
.start-page{ width:100%; height:100%; position:relative; }
.uberschrift_App{
  position:absolute; top:12%; left:50%; transform:translateX(-50%);
  font-size:clamp(32px,10vw,120px); margin:0; letter-spacing:.3px;
  text-shadow:0 10px 40px rgba(0,0,0,.35);
}

/* Profilbild (leer / Bild via JS) */
.div_profile_pic{
  position:absolute; top:20px; right:20px;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:#1f2c35; border:2px solid rgba(255,255,255,.8);
}

/* Start-Navigation */
.div_Main_navigation{
  position:absolute; top:33%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:35px;
}

/* Buttons */
button,.btn{
  appearance:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  background:linear-gradient(180deg, rgba(25,211,163,.16), rgba(38,182,232,.10));
  border-radius:14px; padding:.8rem 1.1rem;
  font-weight:600; letter-spacing:.2px;
  transition:box-shadow .22s, background .22s, border-color .22s, opacity .22s;
  box-shadow:0 8px 28px rgba(38,182,232,.12);
}
button:hover{ box-shadow:0 12px 42px rgba(25,211,163,.35), 0 0 0 2px rgba(25,211,163,.22) inset; }
.btn-ghost{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.btn.danger{
  background:linear-gradient(180deg, rgba(255,107,119,.18), rgba(255,107,119,.08));
  border-color:rgba(255,107,119,.28); box-shadow:0 12px 36px rgba(255,107,119,.16);
}
.cta{
  background:linear-gradient(180deg, rgba(25,211,163,.22), rgba(38,182,232,.18));
  border-color:rgba(25,211,163,.28); box-shadow:0 14px 38px rgba(25,211,163,.20);
  min-width:220px;
}

/* Dev-Badge unten rechts, Label darunter */
.dev-mode{ position:fixed; right:var(--edge-offset-x); bottom:var(--edge-offset-y); z-index:45; }
.dev-mode #button_Main_devMode{
  padding: .55rem .9rem;
  border-radius: .75rem;
  font-size: 1rem;
  line-height: 1.1;
}
.textNormal{ color:#aaa; font-size:16px; text-align:center; }
.dev-mode .textNormal{
  font-size: 1rem;          /* Anzeige "On/Off" auch größer */
  line-height: 1.1;
}

/* How to play links unten gespiegelt */
#button_Main_htp{ position:fixed; left:var(--edge-offset-x); bottom:var(--edge-offset-y); z-index:45; padding:.48rem .78rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);}

/* Inputs */
input[type="text"], input[type="search"]{
  width:min(420px,80%); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text); border-radius:12px; padding:.65rem .8rem; outline:none;
}
input[type="range"]{
  width:100%; accent-color:var(--brand); -webkit-appearance:none; height:6px;
  border-radius:999px; background:rgba(255,255,255,.18); outline:none; margin:.8rem 0 .4rem;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  border:2px solid rgba(255,255,255,.65); box-shadow:0 4px 14px rgba(0,0,0,.35);
}
input[type="checkbox"]{
  width:18px; height:18px; border-radius:6px; appearance:none; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  display:inline-grid; place-content:center; transition:background .18s, border-color .18s, box-shadow .18s;
}
input[type="checkbox"]::before{
  content:""; width:10px; height:10px; border-radius:3px; transform:scale(0);
  transition:transform .14s ease-out;
  background:linear-gradient(180deg, rgba(25,211,163,.9), rgba(38,182,232,.9));
  box-shadow:0 4px 14px rgba(38,182,232,.25);
}
input[type="checkbox"]:checked::before{ transform:scale(1); }

/* File input hübsch */
input[type="file"]{
  width:100%; padding:.65rem .8rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text); border-radius:12px;
}
input[type="file"]::file-selector-button{
  margin-right:.6rem; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(25,211,163,.16), rgba(38,182,232,.10));
  color:var(--text); border-radius:10px; padding:.45rem .7rem; cursor:pointer;
}

/* Backdrop & Modals */
#backdrop{
  position: fixed; inset: 0;
  z-index: 40;
  background: rgba(4,10,15,.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
}
.backdrop.show{opacity:1;pointer-events:auto;}

.modal-sheet{position:fixed;top:50%;left:50%;width:min(92vw,700px);max-height:min(86vh,680px);overflow:auto;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:var(--shadow);opacity:0;transform:translate(-50%,-46%) scale(.985);pointer-events:none;transition:opacity .22s ease, transform .22s ease;z-index:80;padding:var(--modal-pad);}
.modal-sheet.in{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
.modal-sheet.out{opacity:0;transform:translate(-50%,-46%) scale(.985);pointer-events:none;}

.modal-actions{ display:flex; gap:12px; justify-content:center; margin-top:22px; }
.modal-actions.between{justify-content:space-between;}
.block-label{ display:block; margin-top:8px; margin-bottom:4px; }
.switch-row{ display:flex; align-items:center; justify-content:flex-start; gap:.55rem; margin:.25rem 0; }
.muted{ color:#a9c1d1; opacity:.9; }

/* Player Select specifics */
.div_Main_selectPlayerNames_profilePic{
  margin:14px auto 10px auto; border:4px solid #fff; border-radius:50%;
  background:#777; width:90px; height:90px; display:grid; place-items:center; color:#000; font-size:40px;
}
.input_text_Main_selectPlayerNames_playername{
  display: block;
  margin: 0 auto;
  width: clamp(10ch, 18vw, 14rem);
  text-align:center; font-size:18px;   
}

/* GameTable wrapper */
.div_gameTable{
  display:none;
  padding-inline:clamp(12px,3.5vw,60px);
  padding-block:clamp(8px,2vw,24px);
}

/* GameTable Grid */
#div_gameTable.is-live{
  display: grid;
  gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--col-min-min, 260px), var(--col-min))  /* MAX bleibt deine Standardbreite */
  );
  justify-content: center;
  align-content: start;
  width: 100%;
  max-width: var(--table-max-w, 2000px);
  margin: 0 auto;
}


/* Player card */
#div_gameTable .column{
  display:flex; flex-direction:column;
  background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding: clamp(10px, 1.2vw, 14px) var(--card-pad-x);
  min-width:0; width:min(100%, 560px); overflow: hidden;
  padding-left: clamp(14px, 3.2vw, 22px); padding-right: clamp(14px, 3.2vw, 22px);
}
#div_gameTable .player-header{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto; /* [player-info] [Punkte:] [+X Punkte] */
  align-items: start;                               /* alles oben ausrichten */
  column-gap: .6rem;
  padding-inline: 0;                                /* Karten-Padding kommt von .column */
}
#div_gameTable .player-header .player-info{
  align-self: start;
}
#div_gameTable .player-info{ display:flex; align-items:center; gap:10px; }
#div_gameTable .player-profile{
  width:30px; height:30px; border-radius:50%; background:#5b7cff; color:#fff;
  display:grid; place-items:center; font-weight:700; flex:0 0 auto;
}

#div_gameTable .player-header > span:not(.points-delta){
  justify-self: end;
  white-space: nowrap;
  line-height: 1.05;
  padding-right: .1rem; /* optische Luft */
}

#div_gameTable .player-header .points-delta{
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  /* genug Platz, ohne die Spielerinfo brutal zu drücken */
  max-width: clamp(8ch, 20vw, 14ch);
  padding-right: 0;                 /* Randabstand kommt über Karten-Padding */
  margin-right: .1rem;              /* minimaler optischer Abstand zum Rand */
}

/* Row: Runde | guess | right | extra | Punkte */
#div_gameTable .row{
  display: grid;

  /* Spalten: "Runde", 3x Buttons (guess/right/extra), Punkte-Text */
  grid-template-columns:
    var(--round-col)
    repeat(3, minmax(var(--input-grow), 1fr))
    minmax(12ch, 1fr);        /* genug für „+100 Punkte“ */

  column-gap: clamp(.48rem, 1.2vw, .9rem);
  align-items: center;

  /* Höhe/Gefühl – bleibt an deinen Variablen dran */
  min-height: var(--row-h);
  margin: calc(var(--row-h) * .12) 0;

  /* wichtig: Grid darf schrumpfen, ohne überzulaufen */
  min-width: 0;

  height: var(--row-h);
  font-size: calc(1rem * var(--fs-scale));
}


/* Inputs kompakt, gleich breit, kein Überlaufen */
#div_gameTable input.field{
  width: 100%; min-width: 0;
  text-align: center;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .625rem;
  padding: var(--input-pad-y) .5rem;
  font-weight: 600;
  font-size: calc(1rem * var(--fs-scale));
  line-height: 1.1;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#div_gameTable input.field::-webkit-outer-spin-button,  
#div_gameTable input.field::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#div_gameTable input.field[type="number"]{ -moz-appearance:textfield; }

/* Runde + Punkte: nie umbrechen, letzte Zelle mit Sicherheitsnetz */
#div_gameTable .row > span:first-child{      /* "Runde X" */
  font-size: calc(1rem * var(--fs-scale));
  line-height: 1;
}
#div_gameTable .row > span:last-child{
  min-width: 7.5ch;         /* Platz für "+100" */
  max-width: 12ch;          /* "+100 Punkte" wenn Platz */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;      /* niemals "..." bei den Punktewerten */
}
#div_gameTable .row .field{                  /* guess/right/extra */
  font-size: calc(1rem * var(--fs-scale));   /* ≙ Runde */
  padding-block: var(--input-pad-y);
  width: var(--input-grow);
}

/* Fokus gut sichtbar */
#div_gameTable .field:focus,
#div_gameTable .field:focus-visible{
  outline:none;
  border-color:rgba(38,182,232,.65);
  background:rgba(38,182,232,.10);
  box-shadow:0 0 0 2px rgba(38,182,232,.45), 0 6px 22px rgba(38,182,232,.18);
}

#div_gameTable .row > *:nth-child(2),
#div_gameTable .row > *:nth-child(3),
#div_gameTable .row > *:nth-child(4){
  min-width: var(--input-grow);
}

/* End Game – kleine feste Pill unten rechts */
#button_endGameButton{
  position: fixed;
  right: var(--edge-offset-x);
  bottom: calc(var(--edge-offset-y) + 2.2rem); /* etwas höher als Footer/Version */
  z-index: 45;
  padding: .6rem 1.1rem;    /* etwas größer */
  border-radius: 999rem;
  font-size: 1rem;          /* größerer Text */
  outline: none;
}

/* Results / Pyramide */
.tribune-container{ text-align:center; padding:clamp(12px,3vw,22px); }
.title{ font-size:clamp(24px,4vw,36px); margin:28px 0 40px; }
.tribune{ display:grid; grid-template-columns:repeat(5, minmax(180px,1fr)); gap:22px 40px; justify-items:center; grid-auto-rows:auto; }
.player{
  color:#fff; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:16px 10px; box-shadow:0 8px 26px rgba(0,0,0,.35);
  width:220px;
}
.player .rank{ font-size:22px; font-weight:800; color:#bfeaf7; }
.player .name{ margin-top:8px; font-size:18px; }
.player .score{ margin-top:6px; font-size:16px; color:#9ec7d8; }
/* Footer/Legal */
#legal-buttons{
  position:fixed; left:20px; bottom:20px; z-index:20;
  display:flex; gap:10px; flex-wrap:wrap;
}
#legal-buttons a, #legal-buttons button{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  color:#d8e6f2; font-size:.75rem; padding:6px 10px; border-radius:10px;
}

/* Mobile */
@media (max-width: 480px){
  :root{ --input-w: 8.6rem; }
  #div_gameTable.is-live{ grid-template-columns:1fr; gap:14px; }
}

/* Modal content padding */
.modal-sheet .modal-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--modal-gap);margin:0;}

/* Headline spacing */
.modal-sheet h3{text-align:center;font-weight:700;margin:0 0 var(--modal-title-gap) 0;}

/* Checkbox rows inline */
.switch-row{ display:flex; align-items:center; justify-content:flex-start; gap:.55rem; margin:.25rem 0; }

/* Range and label spacing */
#div_Main_settingsGame_playerCount{ margin:.4rem 0 1rem 0; }
#input_range_Main_settingsGame_playerCount{ margin-bottom:.4rem; }

/* Extra space before actions */
.modal-sheet .modal-actions{margin-top:var(--modal-actions-gap);display:flex;gap:.8rem;}

/* Game Settings spacing */
#div_Main_settingsGame label.block-label{ margin-bottom:.35rem; }
#div_Main_settingsGame input[type="range"]{ margin:.25rem 0 .35rem 0; }
#div_Main_settingsGame #div_Main_settingsGame_playerCount{ margin-bottom:.6rem; }
#div_Main_settingsGame .switch-row + .switch-row{ margin-top:.25rem; }
#div_Main_settingsGame .modal-actions{ margin-top:1.1rem; }

/* Disabled buttons: no hover, no click */
.btn:disabled, .btn[disabled]{
  cursor: not-allowed;
  opacity: .55;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
  pointer-events: none;
}
.btn:disabled:hover, .btn[disabled]:hover{ box-shadow:none; transform:none; }

/* Game Settings: center group */
#div_Main_settingsGame .modal-body{ align-items:center; text-align:center; }
#div_Main_settingsGame label.block-label{ margin-bottom:.35rem; }
#div_Main_settingsGame input[type="range"]{ width: clamp(240px, 36vw, 420px); margin:.25rem 0 .35rem 0; }
#div_Main_settingsGame #div_Main_settingsGame_playerCount{ margin-bottom:.6rem; }
#div_Main_settingsGame .switch-row{ justify-content:center; }
#div_Main_settingsGame .modal-actions{ margin-top:1.2rem; }

/* Game Settings: center all controls and narrow slider */
#div_Main_settingsGame .modal-body{align-items:center;text-align:center;}
#div_Main_settingsGame label.block-label{margin-top:.2rem;margin-bottom:.5rem;}
#div_Main_settingsGame input[type="range"]{width:clamp(240px,36vw,420px);margin:.3rem 0 .5rem 0;}
#div_Main_settingsGame #div_Main_settingsGame_playerCount{margin-bottom:.8rem;}
#div_Main_settingsGame .switch-row{justify-content:center;}
#div_Main_settingsGame .modal-actions{margin-top:1.4rem;}
#button_Main_selectPlayerNames_Start{
  min-width: clamp(8rem, 18vw, 12rem);
  padding: .55rem 1rem;
}

/* Pyramid mapping */
.player:nth-child(1){ grid-column:3; grid-row:1; }
.player:nth-child(2){ grid-column:2; grid-row:2; }
.player:nth-child(3){ grid-column:4; grid-row:2; }
.player:nth-child(4){ grid-column:1; grid-row:3; }
.player:nth-child(5){ grid-column:2; grid-row:3; }
.player:nth-child(6){ grid-column:3; grid-row:3; }
.player:nth-child(7){ grid-column:4; grid-row:3; }
.player:nth-child(8){ grid-column:5; grid-row:3; }


#button_endGameButton{
  outline: none;
}
#button_endGameButton:hover,
#button_endGameButton:focus-visible{
  outline: none;
  border-color: rgba(220,38,38,.65);
  background: rgba(220,38,38,.18);
  box-shadow: 0 0 0 3px rgba(220,38,38,.45), 0 10px 28px rgba(220,38,38,.30);
}

/* Hub-Button oben links – wie "How to play", alles in rem */
#button_hub{
  position: fixed;
  top: var(--edge-offset-top);
  left: var(--edge-offset-x);
  z-index: 50;
  padding: .48rem .78rem;
  border-radius: 999rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;           /* Text in rem */
  text-decoration: none;
  transition: box-shadow .22s, background .22s, border-color .22s;
}
#button_hub:hover{
  background: rgba(255,255,255,.12);
  box-shadow: 0 12px 36px rgba(25,211,163,.35),
              0 0 0 2px rgba(25,211,163,.22) inset;
}


/* Home-Button unten rechts, etwas größer – rem-basiert */
#button_home{
  position: fixed;
  right: var(--edge-offset-x);
  bottom: var(--edge-offset-y);
  z-index: 50;
  padding: .65rem 1.1rem;
  border-radius: 999rem;
  font-weight: 600;
  font-size: 1rem;
}
#button_home:hover,
#button_home:focus-visible{
  outline: none;
  box-shadow: 0 12px 36px rgba(25,211,163,.35),
              0 0 0 2px rgba(25,211,163,.22) inset;
  background: rgba(255,255,255,.12);
}

/* Mobile Legal-FAB – kleiner & perfekt zentriert */
#legal-fab{
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60;
  width: 2rem; height: 2rem; border-radius: 999rem;
  display: none; place-items: center;
  font-weight: 800; font-size: .95rem; line-height: 1;
  padding: 0; text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}
#legal-fab:hover{ box-shadow: 0 12px 30px rgba(25,211,163,.28); }

/* Popover bleibt wie gehabt; optional minimal kompakter */
#legal-pop{
  position: fixed; left: 1rem; bottom: 3.2rem; z-index: 60;
  display: grid; gap: .45rem; padding: .5rem .55rem;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: .7rem; box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform-origin: bottom left; transform: scale(.92); opacity: 0; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
#legal-pop.open{ transform: scale(1); opacity: 1; pointer-events: auto; }
#legal-pop a{ font-size: .85rem; }

/* Sichtbarkeit: Handy + kleines Querformat */
@media (max-width: 920px), (orientation: landscape) and (max-height: 560px){
  #legal-buttons{ display: none; }
  #legal-fab{ display: grid; }
}

@media (max-width: 1480px){
  :root{
    --input-grow: max(3.30rem, 4.45ch);
  }
  #div_gameTable .row{
    column-gap: clamp(.32rem, .9vw, .6rem);
    grid-template-columns:
      var(--round-col)
      repeat(3, minmax(var(--input-grow), 1fr))
      minmax(11ch, 1fr);  /* bei Enge: nur „+100“ sicher */
  }
}
@media (max-width: 1366px){
  :root{
    --input-grow: max(3.20rem, 4.35ch);
  }
  #div_gameTable .row{
    column-gap: clamp(.28rem, 1vw, .52rem);
    grid-template-columns:
      var(--round-col)
      repeat(3, minmax(var(--input-grow), 1fr))
      minmax(10.5ch, 1fr);
  }
}

@media (max-width: 1024px){
  #div_gameTable .row{ column-gap: clamp(.28rem, 1vw, .56rem); }
  #div_gameTable .row > span:first-child,
  #div_gameTable .row > span:last-child{
    font-size: clamp(.82em, 1vw, .95em);
  }
}

/* Sonderkarten Warnung unten mittig */
.special-card-warning{
  position: fixed;
  left: 50%;
  bottom: 1.4rem;           /* Abstand vom unteren Rand */
  transform: translateX(-50%);
  z-index: 200;

  padding: .55rem 1rem;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  border: 2px solid rgba(255, 0, 0, 0.788);  /* leicht "brand" */
  backdrop-filter: blur(6px);

  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;

  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
/* Guess-Summe (Wollen) unten mittig */
.guess-sum-warning{
  position: fixed;
  left: 50%;
  bottom: 4.4rem;          /* etwas höher als specialCardWarning, damit sie sich nicht überlappen */
  transform: translateX(-50%);
  z-index: 200;

  padding: .55rem 1rem;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  border: 1.5px solid rgba(241, 199, 60, 0.55);  /* leicht "brand" */
  backdrop-filter: blur(6px);

  font-size: 1.05rem;
  font-weight: 650;
  color: #fff;

  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

/* When 🐙/🐳 warning is visible: tint the player columns slightly */
#div_gameTable.special-warn-active .column{
  background:rgba(255, 37, 37, 0.11);
}

/* ===== Mobile: Warnings als kleine Kreise links oben ===== */
@media (max-width: 1366px), (orientation: landscape) and (max-height: 1024px){

  .guess-sum-warning,
  .special-card-warning{
    left: .75rem;
    top: .75rem;
    transform: none;

    width: 34px;
    height: 34px;
    padding: 0;

    border-radius: 50%;
    display: grid;
    place-items: center;

    font-size: .95rem;
    font-weight: 800;
    line-height: 1;

    z-index: 300;
  }

  .special-card-warning{
    width: auto;              /* passt sich Text an */
    min-width: 38px;          /* mindestens wie vorher */
    height: 38px;
    padding: 0 .45rem;        /* bisschen Luft links/rechts */
    border-radius: 999px;     /* pill statt Kreis */
    display: inline-grid;
  }
}

/* hidden MUSS immer gewinnen (sonst überschreibt Mobile-CSS display:grid etc.) */
[hidden] { 
  display: none !important; 
}