/* === Vars & Reset === */
:root{
  --bg:#fafafa;
  --card:#fff;
  --border:#ccc;
  --border-strong:#666;
  --muted:#666;
  --accent:#2d89ef;

  --col-desc:   96px;
  --col-score:  44px;
  --table-radius: 10px;

  --card-w: calc(var(--col-desc) + 4 * var(--col-score) + 22px);
  --cards-gap: 16px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:#222; }
body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
h2{ margin:.5rem 0; }

/* === Bereichsbreiten === */
#scoreOut{ width: auto; max-width: none; margin: 0 1rem 1rem; }
.chat-panel{ width: auto; max-width: none; margin: 0 1rem 1.2rem; }

/* === Buttons === */
button{
  cursor:pointer; font-size:1rem; padding:.4rem .6rem;
  border-radius:6px; border:1px solid var(--border); background:#f8f8f8;
}
button:hover{ background:#eee; }

/* Themed action buttons */
#announceBtnInline{
  background: #ffe7c2;           /* zartes Orange */
  border-color: #f0b27a;
  /* allow multi-line text without expanding column width */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  padding: .35rem .5rem;
}
#announceBtnInline:hover{ background: #ffd9a3; }
#announceBtnInline::before{ content: "❗ "; }

#rollBtnInline{
  background: #e2f5e6;           /* zartes Grün */
  border-color: #9ad1a5;
}
#rollBtnInline:hover{ background: #d3efda; }

#announceBtnInline, #rollBtnInline{
  height: 2.6rem;
  min-width: 0;                 /* wichtig für Grid: kein Aufspreizen */
  line-height: 1.1;             /* allow button text to wrap nicely */
  min-height: 2.6rem;
}

/* Hide the roll button while in announce-pick mode to avoid layout shifts */
#diceBar.announce-mode #rollBtnInline{ visibility: hidden !important; }

button.small{ font-size:.85rem; padding:.25rem .5rem; }

button.danger{ border-color:#c0392b; background:#fdecea; color:#8e1b0e; }
button.danger:hover{ background:#fbd5cf; }

/* === Form Controls === */
select, select option{ font-size: 1rem; line-height: 1.2; }
@media (max-width:560px){ select, select option{ font-size: 16px; } }
select, input, button { font-family: inherit; font-size: 16px; line-height: 1.2; }

/* === Chips & Badges === */
.chip{ display:inline-block; padding:.1rem .5rem; border-radius:12px; font-size:.8rem; margin-right:.25rem; }
.chip.ok{ background:#c8f7c5; color:#145214; }
.chip.wait{ background:#f9e79f; color:#6a4a00; }
.chip.warn{ background:#f5b7b1; color:#922b21; }
.chip.info{ background:#d6eaf8; color:#154360; }
.chip.danger{ background:#f5b7b1; color:#7a1b16; }
.badge{ display:inline-block; background:#eee; padding:.1rem .45rem; border-radius:8px; font-size:.8rem; margin-left:.25rem; }

/* === Layout === */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; }
.players-inline{ flex:0 0 auto; }
.muted{ color:var(--muted); font-size:.86rem; margin:.25rem 0 .75rem; }

.players-grid{ display:flex; flex-wrap:wrap; gap: var(--cards-gap); justify-content:flex-start; align-items:flex-start; }

/* Karten */
.player-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .6rem;
  width: var(--card-w);
  flex: 0 0 var(--card-w);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.player-card.turn{ border-color:#2b8cff; box-shadow:0 0 0 2px rgba(43,140,255,.12); }
.pc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; font-weight:700; margin-bottom:.5rem; }
.pc-total{ font-weight:700; }

/* === Dice (Basis) === */
#diceBar{
  /* Einheitliche Grid-Basis: 5 Würfel oben, Aktionszeile unten */
  display: grid;
  grid-auto-flow: row;
  column-gap: .35rem;
  row-gap: .35rem;
  align-items: center;
}
button.die{
  width: 2.6rem;
  height: 2.6rem;
  aspect-ratio: 1 / 1;
  border-radius: .8rem;
  line-height: 1;
  padding: .06rem .06rem .14rem;
  font-variant-numeric: tabular-nums;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#000;
  border:1px solid var(--border);
}
button.die.held{ background:#d4efdf; border-color:#27ae60; }

/* Shake-Animation */
@keyframes dice-shake{
  0%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(-1px,1px) rotate(-2deg)}
  40%{transform:translate(1px,-1px) rotate(2deg)}
  60%{transform:translate(-1px,0) rotate(-1deg)}
  80%{transform:translate(1px,1px) rotate(1deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
button.die.shaking{ animation: dice-shake .5s ease; }

/* === Announce === */
.announce-container{ width: calc(var(--col-desc) + 4 * var(--col-score)); max-width: 100%; margin: 0 0 .5rem 0; }
.announce-slot, .announce-box, .announce-status{ width: 100%; display: block; text-align: center; }

/* Markierung für Ansage-Pick-Modus: leerer ❗-Slot im eigenen Board wird klickbar hervorgehoben */
td.cell.announce-pickable{
  outline: 2px dashed var(--accent);
  background: #eef8ff;
  cursor: crosshair;
}

/* Suggestions */
.suggestions-area{ min-height: 34px; margin: .5rem 0 .5rem 0; }
.suggestions:empty{ opacity: 0; }
.suggestions{ margin: .5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; }
.suggestion-btn{
  display: inline-block; padding: .18rem .55rem; border-radius: 12px;
  font-size: .85rem; font-weight: 600;
  border: 1px solid #f0b27a; background: #ffe0b2; color: #7a3e00;
  cursor: default; user-select: none;
}
.suggestion-btn:hover{ background:#ffd59a; }
.suggestion-btn .points{ font-weight:700; opacity:.95; }

/* === Mobile Styles === */
@media (max-width:560px){
  .announce-container{ width: 100% !important; }
  .suggestions{ flex-direction: row; align-items: flex-start; }
  .suggestion-btn{ width:auto; flex:0 0 auto; }
  .topbar{ margin-bottom: .25rem; }

  #diceBar{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch; align-content: start;
    column-gap: .25rem; row-gap: .55rem;
    width: 100%; margin: 0; padding: .35rem .2rem .6rem;
    overflow: visible;
    min-width: 0; /* added to prevent grid column stretching */
  }
  #diceBar > *{ min-width: 0; } /* prevent children from forcing min width */

  #diceBar .die{
    width: 100% !important;              /* füllt die Spalte */
    aspect-ratio: 1 / 1 !important;      /* bleibt quadratisch */
    max-width: 60px !important;          /* Obergrenze 60px */
    max-height: 60px !important;         /* Obergrenze 60px */
    font-size: clamp(20px, 8vw, 48px);   /* Schriftgröße skaliert, max 48px */
    padding: .06rem !important;          /* kleiner Rand für SVG */
  }
  /* Mobile: Buttons nebeneinander direkt unter den Würfeln */
  #announceBtnInline{
    grid-row: 2 !important;
    grid-column: 1 / span 2 !important; /* unter Würfel 1–2 */
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 2.6rem !important;           /* gleiche Höhe wie Würfel */
    margin-top: 0 !important;
    white-space: normal;
    overflow-wrap:anywhere;
    line-height:1.1;
  }
  #rollBtnInline{
    grid-row: 2 !important;
    grid-column: 3 / span 3 !important; /* unter Würfel 3–5 */
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 2.6rem !important;            /* gleiche Höhe wie Würfel */
    margin-top: 0 !important;
    max-width: none !important;
  }
  /* Mobile: Korrektur-Button in eigene Zeile, damit Ansage/Würfeln nebeneinander bleiben */
  #requestCorrectionBtn{
    grid-row: 3 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: .25rem !important;
  }
  .room-header #roomGameName, .room-header a[href$="rules.html"]{ display: none !important; }
  .pc-head{ margin-bottom: .35rem; } .pc-total{ font-size: .95em; }
  .muted{ margin: .2rem 0 .5rem; }
  .announce-box{ padding: .35rem; }
  .player-card table.grid{ font-size: .82rem; }
  .player-card table.grid.compact th,
  .player-card table.grid.compact td{ padding: .18rem .26rem !important; }
}

/* === Desktop Guard === */
@media (min-width: 561px){
  #diceBar{
    display: grid !important;
    /* absolut feste Würfelspalten, unabhängig von Button-Text */
    grid-template-columns: repeat(5, 2.6rem);
    grid-template-rows: 2.6rem auto; /* Zeile 1: Würfelhöhe fix, Zeile 2: Buttons */
    min-width: 0;
    column-gap: .35rem; row-gap: .35rem;
    align-items: center; justify-content: start;
  }
  #diceBar > * { min-width: 0; } /* prevent children from forcing min width */

  #diceBar button{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;               /* darf schrumpfen, Spaltenbreite bleibt stabil */
    height: 2.6rem;             /* identische Höhe für alle Buttons */
  }
  #rollBtnInline{
    grid-row: 2 !important;
    grid-column: 3 / span 3 !important;
    align-self: stretch !important; width: 100% !important;
    margin-top: .15rem !important; order: 0 !important;
  }
  #announceBtnInline{
    grid-row: 2 !important;
    grid-column: 1 / span 2 !important;
    align-self: stretch !important; width: 100% !important;
    margin-top: .15rem !important; order: 0 !important;
  }
  #requestCorrectionBtn{ grid-row: 3 !important; grid-column: 1 / -1 !important; }
  #diceBar .die{
    width: 2.6rem !important;
    height: 2.6rem !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: .8rem !important;
    font-size: 2.2rem !important;
    line-height: 1 !important;
    padding: .10rem .10rem .22rem !important;
  }
}

/* === Players Grid Mobile Scroll === */
@media (max-width:560px){
  .players-grid{ overflow-x: auto; overflow-y: visible; flex-wrap: nowrap;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 0 12px; gap: 12px; }
  .player-card{
    scroll-snap-align: start; scroll-snap-stop: always;
    width: calc(100vw - 48px); flex: 0 0 calc(100vw - 48px);
  }
  .player-card table.grid{ width: 100% !important; }
}
@media (max-width:560px){
  #announceSlot select, #announceSlot option{ font-size: 1rem !important; line-height: 1.2; }
}

.announce-box{ background:#f4f6f7; border:1px solid var(--border); padding:.45rem; border-radius:6px; }
.announce-box label{ margin-right:.35rem; }
.banner.correction{ background:#ffeaa7; border:1px solid #f39c12; padding:.55rem; margin-bottom:.6rem; border-radius:6px; font-size:.9rem; }

/* === Tabelle === */
.table-wrap{ border-radius:var(--table-radius); overflow:hidden; }
table.grid{
  border-collapse:separate; border-spacing:0; font-size:.9rem; table-layout:fixed;
  border-radius:var(--table-radius); overflow:hidden;
  width: calc(var(--col-desc) + 4 * var(--col-score)); margin: 0; font-variant-numeric: tabular-nums;
}
table.grid th:nth-child(1), table.grid td:nth-child(1){ width:var(--col-desc); text-align:left; }
table.grid th:nth-child(2), table.grid td:nth-child(2),
table.grid th:nth-child(3), table.grid td:nth-child(3),
table.grid th:nth-child(4), table.grid td:nth-child(4),
table.grid th:nth-child(5), table.grid td:nth-child(5){ width:var(--col-score); text-align:center; }
table.grid th, table.grid td{ border:1px solid var(--border); padding:.28rem .35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.grid thead th{ background:#f7f7f7; font-weight:700; }
table.grid th.sticky, table.grid td.desc.sticky{ position:sticky; left:0; background:#f0f0f0; text-align:left; z-index:1; }
td.cell.clickable{ cursor:pointer; background:#fdfdfd; }
td.cell.clickable:hover{ background:#eef; }
td.cell.announced{ background:#ffe9e9 !important; font-weight:700; }
td.cell.compute, td.desc.compute{ background:#f2f3f5; color:#444; font-weight:600; }
td.cell.compute{ font-size:.86rem; }
tr.grp-top td{ border-top:3px solid var(--border-strong); }
tr.grp-top.grp-end td{ border-bottom:3px solid var(--border-strong); }
tr.grp-diff td{ border-top:3px solid var(--border-strong); border-bottom:3px solid var(--border-strong); }
tr.grp-bottom.grp-start td{ border-top:3px solid var(--border-strong); }
tr.grp-bottom td{ border-bottom:3px solid var(--border-strong); }
tr.grp-top td, tr.grp-bottom td, tr.grp-diff td{ border-left:1px solid var(--border) !important; border-right:1px solid var(--border) !important; }
@media (max-width:420px){
  :root{ --col-desc: 90px; --col-score: 40px; }
  .player-card{ width: var(--card-w); flex-basis: var(--card-w); }
}

/* === Leaderboard === */
.leaderboards{ display:flex; gap:20px; margin-top:10px; flex-wrap:wrap; justify-content:flex-start; }
.leaderboard-box{ background:var(--card); border:1px solid var(--border); border-radius:var(--table-radius); padding:.5rem; box-shadow:0 2px 6px rgba(0,0,0,.06); min-width:320px; flex:0 0 520px; max-width:520px; overflow:hidden; }
.leaderboard-box h3{ margin:.3rem 0 .6rem; text-align:center; font-weight:600; color:#333; }
.leaderboard-box table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; font-variant-numeric:tabular-nums; border-radius:var(--table-radius); overflow:hidden; table-layout:fixed; max-width:100%; }
.leaderboard-box th, .leaderboard-box td{ border:1px solid var(--border); padding:.3rem .4rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.leaderboard-box thead th{ background:#f7f7f7; font-weight:700; }

/* Chips */
#playerChips, #roomStatusLine, .top-chips, .chips, .players-inline{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.45rem .55rem; width:auto; max-width:100%; }
.badge, .chip { white-space: nowrap; }
@media (max-width:560px){
  .leaderboards{ gap:12px; }
  .leaderboard-box{ flex:0 0 100%; max-width:100%; }
}

/* === Accessibility === */
button:focus-visible, #diceBar .die:focus-visible, td.cell.clickable:focus, td.cell.clickable:focus-visible{ outline:2px solid #2b8cff; outline-offset:2px; }
td.cell.last-write{ background:#fff3cd !important; box-shadow: inset 0 0 0 2px #ffcf33; }
button[disabled]{ opacity:.6; cursor:not-allowed; }
.pc-head .pc-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* === Chat === */
.chat{ border:1px solid var(--border,#ccc); border-radius:8px; margin:1rem 0; display:flex; flex-direction:column; height:200px; background:#fff; }
.chat-box{ font-size:.9rem; line-height:1.3; max-height:calc(15 * 1.3em); overflow-y:auto; padding:.5rem; background:#fff; border:1px solid var(--border,#e0e0e0); border-radius:.5rem; }
.chat-line{ margin:.2rem 0; }
.chat-input{ display:flex; border-top:1px solid var(--border,#ccc); }
.chat-input input{ flex:1 1 auto; border:none; padding:.5rem; font-size:.9rem; }
.chat-input input:focus{ outline:none; }
.chat-input button{ border:none; background:#eee; padding:.5rem .9rem; cursor:pointer; font-size:.9rem; }
.chat-input button:hover{ background:#ddd; }
.chat-panel h3{ margin:.6rem 0; font-size:1rem; font-weight:700; }
.chat-input-row{ display:flex; gap:.5rem; margin-top:.5rem; }
.chat-input-row input[type="text"]{ flex:1; padding:.45rem .6rem; border:1px solid var(--border,#e0e0e0); border-radius:.45rem; }
.chat-line{ padding:.2rem 0; line-height:1.3; word-wrap:break-word; }
.chat-line .ts{ font-size:.8em; color:#666; margin-right:.35rem; font-variant-numeric: tabular-nums; }

/* === Emoji-FAB fix: immer links oben auf Desktop === */
@media (min-width: 768px){
  .reactions-host{
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 3000;        /* über allem */
  }
  .reactions-host .emoji-dock{ margin-left: 0; }
}

/*
  Accessibility notes:
  - We avoid using pointer-events or pointer-related CSS on disabled buttons to ensure consistent keyboard and screen reader behavior.
  - The dashed outline on .announce-pickable cells supports keyboard focus users by providing a clear visual focus indicator, enhanced by the :focus-visible rules.
*/