:root{
  --red:#a3241c; --blue:#0aa0e5; --yellow:#f7f115; --green:#63b238; --orange:#f47115;
  --ink:#221f1a; --paper:#f4ede0; --card:#fffdf8; --accent:#a3241c;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:'Segoe UI',Verdana,sans-serif; -webkit-tap-highlight-color:transparent;}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif; margin:.2em 0;}
#app{max-width:720px;margin:0 auto;padding:10px 10px 60px;}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--ink);color:var(--paper);border-radius:14px;margin-bottom:12px;}
.topbar h1{font-size:1.1rem;color:#fff;letter-spacing:.5px;}
.pill{background:var(--accent);color:#fff;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:600;}
.card{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:14px;margin-bottom:12px;
  box-shadow:3px 3px 0 rgba(34,31,26,.15);}
button{font-family:inherit;cursor:pointer;border:none;}
.btn{background:var(--ink);color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;font-size:.95rem;}
.btn:active{transform:translateY(1px);}
.btn.secondary{background:#fff;color:var(--ink);border:2px solid var(--ink);}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
input[type=text]{font-family:inherit;padding:8px 10px;border:2px solid var(--ink);border-radius:8px;font-size:1rem;width:100%;}
label{font-size:.8rem;font-weight:600;color:#555;display:block;margin-top:8px;}
.small{font-size:.8rem;color:#666;}
.center{text-align:center;}
.connDot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;}
.connDot.ok{background:#2d7d2d;}
.connDot.bad{background:#a3241c;}
.footNote{font-size:.75rem;color:#777;line-height:1.4;}

/* Lobby */
.gameGrid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px,1fr));gap:10px;}
.gameCard{border:2px solid var(--ink);border-radius:12px;padding:10px;cursor:pointer;background:#fff;}
.gameCard.selected{background:var(--ink);color:#fff;}
.gameCard.selected .small{color:#ddd;}
.gameCardTitle{font-weight:800;margin-bottom:2px;}
.tabs{display:flex;align-items:center;gap:6px;margin-bottom:0;}
.tab{padding:6px 12px;border-radius:8px 8px 0 0;border:2px solid var(--ink);border-bottom:none;background:#fff;font-weight:700;font-size:.85rem;cursor:pointer;}
.tab.active{background:var(--ink);color:#fff;}

/* Würfel (Noch mal so gut!) */
.diceArea{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0;}
.diceGroup{display:flex;flex-direction:column;align-items:center;gap:4px;}
.diceGroup .glabel{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;color:#777;font-weight:700;}
.dice{width:50px;height:50px;border-radius:10px;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.25rem;color:#fff;position:relative;box-shadow:2px 2px 0 rgba(0,0,0,.2);cursor:pointer;}
.dice.used{opacity:.25;cursor:default;}
.dice.number{background:#fff;color:var(--ink);}
.dice.selected{outline:3px solid #000;outline-offset:2px;transform:scale(1.08);}
.dice.special{background:linear-gradient(135deg,#6b5b95,#3d3357);font-size:1.5rem;cursor:default;}
.col-R{background:var(--red);} .col-B{background:var(--blue);} .col-Y{background:var(--yellow);color:#221f1a;}
.col-G{background:var(--green);} .col-O{background:var(--orange);}

/* generisches Zell-Grid (Board-Spiele) */
.boardWrap{overflow-x:auto;padding-bottom:4px;}
.cell{border-radius:5px;border:2px solid var(--ink);position:relative;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;}
.cell.crossable{box-shadow:0 0 0 2px #2d7d2d inset;}
.cell.picked{box-shadow:0 0 0 3px #111 inset;}
.cell.crossed::after,.cell.crossed::before{
  content:"";position:absolute;left:10%;right:10%;top:47%;height:2.5px;background:#161616;}
.cell.crossed::before{transform:rotate(45deg);}
.cell.crossed::after{transform:rotate(-45deg);}
.colVals{display:grid;gap:2px;width:max-content;margin:4px auto 0;}
.valCell{font-size:.68rem;text-align:center;font-weight:800;}
.valCell.H{color:var(--red);}

.scoreTable{width:100%;border-collapse:collapse;font-size:.9rem;}
.scoreTable td,.scoreTable th{border-bottom:1px solid #ddd;padding:5px 4px;text-align:left;}
.scoreTable td:last-child, .scoreTable th:last-child{text-align:right;font-weight:700;}

/* Schiffe versenken */
.bsCell{background:#0aa0e5;border-radius:4px;border:1.5px solid var(--ink);position:relative;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.bsCell.own{cursor:default;}
.bsCell.ship{background:#4a4a4a;}
.bsCell.hit{background:#a3241c;}
.bsCell.miss{background:#dce8f0;}
.bsCell.sunk{background:#221f1a;}
.bsCell.placable:hover{outline:2px solid #2d7d2d;}
.bsLabel{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;}
.shipList{display:flex;flex-direction:column;gap:4px;margin:8px 0;}
.shipListItem{display:flex;justify-content:space-between;padding:6px 10px;border:2px solid var(--ink);border-radius:8px;background:#fff;}
.shipListItem.active{background:#fff3cf;}
.shipListItem.done{opacity:.5;text-decoration:line-through;}

/* Skyjo */
.skyjoGrid{display:grid;gap:6px;width:max-content;margin:8px auto;}
.skyjoCard{width:52px;height:66px;border-radius:8px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.3rem;color:#fff;box-shadow:2px 2px 0 rgba(0,0,0,.2);}
.skyjoCard.skyjoClickable{cursor:pointer;}
.skyjoCard.skyjoClickable:hover{outline:2px solid #2d7d2d;outline-offset:2px;}
.skyjoCard.skyjoLocked{opacity:.35;}
.skyjoGridMini{display:grid;gap:3px;width:max-content;margin:2px 0;}
.skyjoCardMini{width:22px;height:28px;border-radius:4px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.65rem;color:#fff;}
.skyjoCardMini.skyjoLocked{opacity:.35;}

/* Mensch ärgere dich nicht - echtes Kreuz-Spielfeld */
.menschBoard{position:relative;margin:8px auto;}
.menschHomeBlock{position:absolute;border-radius:16px;border:2.5px solid;box-sizing:border-box;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);}
.menschTrackCell{position:absolute;border:1.5px solid var(--ink);border-radius:5px;box-sizing:border-box;}
.menschTrackCell.start{border-width:2.5px;box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.menschGoalCell{position:absolute;border:2px solid;border-radius:6px;box-sizing:border-box;}
.menschHomeSlot{position:absolute;border:2.5px dashed;border-radius:50%;box-sizing:border-box;opacity:.55;}
.menschCenter{position:absolute;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:var(--ink);border-radius:6px;box-sizing:border-box;}
.menschToken2{position:absolute;border-radius:50%;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.7rem;color:#fff;box-sizing:border-box;box-shadow:1px 2px 3px rgba(0,0,0,.35);z-index:5;
  transition:transform .12s;}
.menschToken2.clickable{cursor:pointer;outline:3px solid #fff;outline-offset:-4px;box-shadow:0 0 0 3px #fffb, 0 0 10px 2px rgba(255,214,0,.9);
  animation:menschPulse 1.1s ease-in-out infinite;}
.menschToken2.clickable:active{transform:scale(1.15);}
@keyframes menschPulse{0%,100%{box-shadow:0 0 0 2px #fffb, 0 0 8px 1px rgba(255,214,0,.7);}50%{box-shadow:0 0 0 4px #fffb, 0 0 14px 4px rgba(255,214,0,1);}}
.menschLegend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:center;}
.menschLegendItem{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;}
.menschLegendDot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);display:inline-block;}
.menschDice{width:56px;height:56px;border-radius:10px;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.8rem;background:#fff;margin:0 auto;box-shadow:2px 2px 0 rgba(0,0,0,.2);}