:root {
  --bg: #10141b;
  --bg-2: #171d27;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-2: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.12);
  --text: #eef1f6;
  --muted: #9aa5b5;
  --accent: #ffd23f;
  --accent-text: #2a2100;
  --danger: #ef4444;

  --red: #d42a32;
  --red-ink: #c8202a;
  --yellow: #f5c400;
  --yellow-ink: #d39b00;
  --green: #2f9a45;
  --green-ink: #23863a;
  --blue: #2a5fa9;
  --blue-ink: #23508f;

  --paper: #f6f3eb;
  --ink: #1b2130;

  --cell-h: clamp(36px, 5.6dvh, 60px);
  --radius: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body {
  background:
    radial-gradient(120% 70% at 50% -10%, #23304a 0%, rgba(35, 48, 74, 0) 60%),
    var(--bg);
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app {
  height: 100dvh;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* ---------- Screens ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
}
.screen.active { display: flex; animation: fade-in 160ms ease-out; }
#screen-home { overflow-y: auto; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: transform 80ms ease, background 120ms ease, opacity 120ms;
}
.btn:active { transform: scale(0.97); background: var(--panel-2); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn.primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(255, 210, 63, 0.25);
}
.btn.primary:active { background: #f2c42a; }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3); }
.btn.secondary { background: #2b3546; color: var(--text); border-color: transparent; box-shadow: none; }
.btn.big { padding: 16px 20px; font-size: 18px; border-radius: 18px; }
.btn.block { display: block; width: 100%; margin-top: 10px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.icon-btn {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--line);
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  flex: none;
}
.icon-btn:active { transform: scale(0.95); }
.muted { color: var(--muted); }

/* ---------- Home ---------- */
.home-inner {
  margin: auto;
  width: min(420px, 100%);
  padding: 24px 20px calc(24px + var(--safe-bottom));
  text-align: center;
}
.logo { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.lg {
  width: 54px; height: 62px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 900; font-size: 36px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.15);
}
.lg:nth-child(odd) { transform: rotate(-4deg); }
.lg:nth-child(even) { transform: rotate(3deg) translateY(3px); }
.lg-red { background: var(--red); }
.lg-yellow { background: var(--yellow); color: #3b2b00; }
.lg-green { background: var(--green); }
.lg-blue { background: var(--blue); }
.lg-white { background: #fbfbfb; color: var(--ink); }
.tagline { color: var(--muted); margin: 14px 0 28px; font-size: 16px; }
.home-buttons { display: grid; gap: 12px; }
.home-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.home-row .btn { padding: 12px 6px; font-size: 14px; }
.home-hint { color: var(--muted); font-size: 13px; margin-top: 16px; min-height: 1em; }

/* ---------- Setup ---------- */
.sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
}
.sheet-head h2 { margin: 0; font-size: 20px; flex: 1; text-align: center; }
.sheet-head .spacer { width: 42px; }
.setup-body {
  flex: 1; overflow-y: auto;
  padding: 4px 16px calc(24px + var(--safe-bottom));
  width: min(520px, 100%); margin: 0 auto;
}
.setup-players { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.setup-player {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px;
}
.setup-player .badge {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px; flex: none;
  background: #2b3546;
}
.setup-player input[type=text] {
  flex: 1; min-width: 0;
  background: transparent; border: 0; color: var(--text);
  font: inherit; font-size: 17px; font-weight: 600; padding: 6px 4px;
  -webkit-user-select: text; user-select: text;
  outline: none;
}
.setup-player select {
  background: #2b3546; color: var(--text); border: 0; border-radius: 10px;
  font: inherit; font-size: 14px; padding: 8px;
}
.setup-player .remove {
  background: transparent; border: 0; color: var(--muted); font-size: 22px;
  width: 36px; height: 36px; cursor: pointer;
}
.setup-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.setup-toggle { display: flex; align-items: center; gap: 10px; margin: 6px 2px 20px; color: var(--muted); }
.setup-toggle input { width: 20px; height: 20px; accent-color: var(--accent); }
#btn-start { width: 100%; }

/* ---------- Game: Topbar & Spieler ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 6px;
}
.players {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  flex: 1; padding: 2px;
}
.players::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 8px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
  position: relative;
}
.chip .avatar {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: #2b3546;
}
.chip .name { font-weight: 600; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.chip .pen { display: flex; gap: 2px; }
.chip .pen i { width: 5px; height: 5px; border-radius: 50%; background: var(--danger); display: block; }
.chip.active { background: rgba(255, 210, 63, 0.14); border-color: rgba(255, 210, 63, 0.5); }
.chip.active .avatar { background: var(--accent); color: var(--accent-text); }
.chip.deciding { box-shadow: 0 0 0 2px var(--text); }
.chip.flash { animation: chip-flash 500ms ease-out; }
@keyframes chip-flash { 0% { background: rgba(255,255,255,.35); } 100% { background: var(--panel); } }

/* ---------- Game: Hauptbereich ---------- */
.game-main {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 0 10px 8px;
}
.table-area { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.status {
  font-size: 15px; text-align: center; min-height: 40px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px;
  line-height: 1.3; padding: 0 6px;
}
.status b { font-weight: 800; }
.status .who {
  display: inline-block; padding: 2px 9px; border-radius: 8px;
  background: var(--text); color: var(--bg); font-weight: 800;
}
.status .sum {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 26px; padding: 0 6px;
  border-radius: 8px; background: #fbfbfb; color: var(--ink); font-weight: 900;
}

/* ---------- Dice bowl ---------- */
/* Square box, with a round bowl inside it that the dice get thrown into */
.dice-tray {
  --bowl-size: min(60vw, 34dvh, 300px);
  width: var(--bowl-size);
  aspect-ratio: 1;
  position: relative;
  flex: none;
  container-type: size;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(160deg, #222b38, #171d27);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  cursor: pointer;
}
.dice-tray.locked-input { cursor: default; }
.bowl {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  container-type: size;
  /* Units here refer to the square (cqw = 1% of the square) */
  background:
    radial-gradient(circle at 50% 38%, #2f7a5a 0%, #205a42 45%, #143b2c 80%, #0e2a20 100%);
  box-shadow:
    inset 0 0.5cqw 0 rgba(255,255,255,.06),
    inset 0 5cqw 10cqw rgba(0,0,0,.55),
    inset 0 -1.6cqw 4cqw rgba(0,0,0,.35),
    0 0 0 2.6cqw #6b4428,
    0 0 0 3.4cqw #4a2e1a,
    0 1.2cqw 0 3.4cqw #2e1c10,
    0 3cqw 6cqw 3cqw rgba(0,0,0,.45);
}
/* Fine rays on the green surface only: they start at the green edge and
   narrow inward to a point (they fade out toward the middle) */
.bowl::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 4deg, rgba(255,255,255,.05) 0 1.4deg, transparent 1.4deg 10deg);
  -webkit-mask: radial-gradient(closest-side, transparent 38%, rgba(0,0,0,.45) 72%, #000 95%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 38%, rgba(0,0,0,.45) 72%, #000 95%, transparent 100%);
  pointer-events: none;
}
.bowl-hint {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
  font-weight: 800; font-size: clamp(12px, 8cqw, 18px); line-height: 1.2;
  color: #fff;
  background: rgba(8, 24, 18, .5);
  opacity: 0; pointer-events: none;
  transition: opacity 160ms;
  z-index: 5;
}
.dice-tray.idle .bowl-hint { opacity: 1; }
.dice-tray.idle:active .bowl { transform: scale(.98); }
.bowl { transition: transform 90ms; }

.die {
  position: absolute;
  left: 50%; top: 50%;
  width: 19cqw; height: 19cqw;
  border-radius: 3.6cqw;
  background: #fdfdfd;
  box-shadow:
    0.6cqw 1.4cqw 0 rgba(0,0,0,.22),
    1cqw 2.6cqw 3.4cqw rgba(0,0,0,.45),
    inset 0 -0.7cqw 0 rgba(0,0,0,.1),
    inset 0 0.5cqw 0 rgba(255,255,255,.5);
  transition: opacity 200ms, box-shadow 140ms, filter 200ms;
  will-change: transform;
  --pip: #20242c;
}
.die.red { background: var(--red); --pip: #fff; }
.die.yellow { background: var(--yellow); --pip: #3b2b00; }
.die.green { background: var(--green); --pip: #fff; }
.die.blue { background: var(--blue); --pip: #fff; }
.die.gone { display: none; }
.die.dim { filter: brightness(.55) saturate(.7); }
.die.used {
  box-shadow: 0 0 0 0.9cqw #fff, 0 0 0 1.8cqw rgba(255,210,63,.95), 1cqw 2.6cqw 3.4cqw rgba(0,0,0,.45);
  z-index: 3;
}
.pip {
  position: absolute; width: 19%; height: 19%;
  border-radius: 50%; background: var(--pip);
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
}
.pip.tl { left: 27%; top: 27%; } .pip.tr { left: 73%; top: 27%; }
.pip.ml { left: 27%; top: 50%; } .pip.c  { left: 50%; top: 50%; } .pip.mr { left: 73%; top: 50%; }
.pip.bl { left: 27%; top: 73%; } .pip.br { left: 73%; top: 73%; }
.die[data-face="1"] .c,
.die[data-face="2"] .tl, .die[data-face="2"] .br,
.die[data-face="3"] .tl, .die[data-face="3"] .c, .die[data-face="3"] .br,
.die[data-face="4"] .tl, .die[data-face="4"] .tr, .die[data-face="4"] .bl, .die[data-face="4"] .br,
.die[data-face="5"] .tl, .die[data-face="5"] .tr, .die[data-face="5"] .bl, .die[data-face="5"] .br, .die[data-face="5"] .c,
.die[data-face="6"] .tl, .die[data-face="6"] .tr, .die[data-face="6"] .ml, .die[data-face="6"] .mr, .die[data-face="6"] .bl, .die[data-face="6"] .br { opacity: 1; }
.die[data-face="0"] { opacity: .3; }

/* Corners of the square: white sum (top left), locked colors (bottom left) */
.corner { position: absolute; pointer-events: none; z-index: 6; }
.corner-tl { left: 5px; top: 5px; }
.corner-bl { left: 6px; bottom: 6px; }
.sum-badge {
  background: #fff; color: var(--ink);
  font-weight: 900; font-size: clamp(14px, calc(var(--bowl-size) * .075), 22px); line-height: 1;
  padding: 4px 7px 5px; border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  text-align: center;
  opacity: 0; transform: scale(.8);
  transition: opacity 140ms, transform 140ms;
}
.sum-badge small { display: block; font-size: 9px; font-weight: 700; color: #6b7385; letter-spacing: .3px; margin-bottom: 1px; }
.sum-badge.show { opacity: 1; transform: none; }
.gone-dice { display: flex; gap: 4px; }
.gone-dice i {
  width: 18px; height: 18px; border-radius: 5px; display: block;
  background: no-repeat center/62% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  opacity: .9;
}
.gone-dice i.red { background-color: var(--red); } .gone-dice i.yellow { background-color: var(--yellow); }
.gone-dice i.green { background-color: var(--green); } .gone-dice i.blue { background-color: var(--blue); }

.combo { min-height: 22px; font-size: 13px; color: var(--muted); text-align: center; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.combo .tag { padding: 2px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.combo .tag i { font-style: normal; font-weight: 800; }

/* ---------- Scorecard (modeled on the original card) ---------- */
.card-area { display: flex; justify-content: center; margin-top: auto; margin-bottom: auto; }
.card {
  --card-font: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  width: 100%; max-width: 680px;
  background: #fbfbfa;
  color: var(--ink);
  border-radius: 10px;
  border: 3px solid #d4d6d8;
  padding: 7px 7px 0 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  font-family: var(--card-font);
  overflow: hidden;
  transition: opacity 150ms;
}
.card.switching { animation: card-swap 220ms ease-out; }
@keyframes card-swap { from { opacity: .3; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.row {
  --c: var(--red);
  display: grid;
  grid-template-columns: repeat(11, 1fr) 1.05fr;
  gap: 3px;
  padding: 4px 5px 4px 6px;
  background: var(--c);
  margin-bottom: 4px;
  position: relative;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
  transition: filter 200ms, opacity 200ms;
}
/* Black arrow at the start of the row */
.row::before {
  content: "";
  position: absolute; left: -11px; top: 50%;
  transform: translateY(-50%);
  border-left: 13px solid #1d1f22;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.row.red    { --c: var(--red);    --ink-row: var(--red-ink);    --tint: #fdf0f0; }
.row.yellow { --c: var(--yellow); --ink-row: var(--yellow-ink); --tint: #fffbea; }
.row.green  { --c: var(--green);  --ink-row: var(--green-ink);  --tint: #ecf6ee; }
.row.blue   { --c: var(--blue);   --ink-row: var(--blue-ink);   --tint: #ebf0f8; }
.row.closed { filter: saturate(.25) brightness(.95); }

.cell {
  height: var(--cell-h);
  border-radius: 7px;
  background: var(--tint);
  color: var(--ink-row);
  display: grid; place-items: center;
  font-family: var(--card-font);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  position: relative;
  border: 0; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.12);
  transition: opacity 160ms, transform 90ms, box-shadow 160ms, background 160ms;
  cursor: default;
}
.cell.lockcell {
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1; height: auto; max-height: var(--cell-h);
  align-self: center; justify-self: center;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.12);
}
.cell.lockcell svg { width: 60%; height: 60%; }
.cell.dead { opacity: .32; }
.cell.cand {
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--ink), 0 4px 10px rgba(0,0,0,.25);
  transform: translateY(-1px);
  z-index: 1;
  animation: cand-pulse 1.4s ease-in-out infinite;
}
.no-hints .cell.cand { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.12); transform: none; animation: none; background: var(--tint); }
.cell.cand:active { transform: scale(.92); }
@keyframes cand-pulse {
  0%, 100% { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--ink), 0 4px 10px rgba(0,0,0,.25); }
  50% { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px rgba(27,33,48,.35), 0 4px 10px rgba(0,0,0,.25); }
}
.cell.marked::after, .cell.sel::after {
  content: ""; position: absolute; inset: 8%;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2130' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}
.cell.marked { color: color-mix(in srgb, var(--ink-row) 55%, transparent); }
.cell.sel {
  cursor: pointer;
  background: #fff;
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--accent), 0 4px 12px rgba(0,0,0,.3);
  z-index: 2;
}
.cell.sel::after { opacity: .9; animation: mark-pop 160ms cubic-bezier(.3,1.6,.5,1) both; }
.cell.pop::after { animation: mark-pop 200ms cubic-bezier(.3,1.6,.5,1) both; }
.cell.nope { animation: nope 260ms ease-in-out; }
@keyframes nope {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes mark-pop { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Points table + penalties */
.card-legend {
  display: flex; align-items: flex-end; gap: 3px;
  padding: 5px 0 6px;
  margin-left: -8px;
}
.pt {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  background: #fff;
  border: 1.5px solid #b9bcc0;
  border-radius: 6px;
  font-size: 11px; line-height: 1.15;
  padding: 1px 0 2px;
  color: #2a2d33;
}
.pt b { font-weight: 700; border-bottom: 1px solid #b9bcc0; width: 76%; text-align: center; padding-bottom: 1px; }
.pt span { font-weight: 700; padding-top: 1px; }
.pt-head { flex: 1.5 1 0; background: none; border: 0; color: #4a4e56; }
.pt-head b { border: 1.5px solid #9aa0a6; border-radius: 4px; width: auto; padding: 0 5px; font-size: 10px; margin-bottom: 2px; }
.pt-head span { font-size: 10px; }
.pen-block { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: 8px; }
.pen-icon { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #4a4e56; }
.pen-icon svg { width: 18px; height: 18px; }
.pboxes { display: flex; gap: 3px; }
.pbox {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1.5px solid #b9bcc0; background: #fff;
  position: relative;
}
.pbox.on::after {
  content: ""; position: absolute; inset: 2px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2130' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}
.pbox.pop::after { animation: mark-pop 220ms cubic-bezier(.3,1.6,.5,1) both; }

/* Total row */
.card-total {
  display: flex; align-items: center; gap: 5px;
  margin: 0 -7px 0 -16px;
  padding: 6px 10px 7px 12px;
  background: #e1e2e3;
  font-variant-numeric: tabular-nums;
}
.tlabel { font-size: 12px; font-weight: 700; color: #3a3d44; margin-right: 4px; }
.tbox {
  flex: 1 1 0; min-width: 0;
  height: 28px;
  display: grid; place-items: center;
  background: #fff;
  border: 2.5px solid #9aa0a6;
  border-radius: 7px;
  font-weight: 700; font-size: 16px;
  color: var(--ink);
}
.tbox.red { border-color: var(--red); } .tbox.yellow { border-color: var(--yellow); }
.tbox.green { border-color: var(--green); } .tbox.blue { border-color: var(--blue); }
.tbox.pen { border-color: #a9adb2; color: #c62828; }
.tbox.sum { flex: 2.2 1 0; border-color: #1d1f22; font-size: 18px; }
.card-total .op { color: #9aa0a6; font-weight: 800; font-size: 16px; }

/* ---------- Aktionsleiste ---------- */
.actionbar {
  display: flex; gap: 10px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background: linear-gradient(to top, var(--bg) 70%, rgba(16,20,27,0));
}
.actionbar .main { flex: 1; height: 56px; font-size: 18px; font-weight: 800; border-radius: 16px; }
.actionbar .icon-only { width: 56px; height: 56px; padding: 0; display: grid; place-items: center; border-radius: 16px; }

/* ---------- Toasts ---------- */
.toasts {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 84px);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
  pointer-events: none; z-index: 20;
}
.toast {
  background: rgba(23, 29, 39, .96);
  border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  animation: toast-in 160ms ease-out both;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px);
}
.toast.out { animation: toast-out 220ms ease-in both; }
.toast .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.toast .dot.red { background: var(--red); } .toast .dot.yellow { background: var(--yellow); }
.toast .dot.green { background: var(--green); } .toast .dot.blue { background: var(--blue); }
.toast.bad { border-color: rgba(239,68,68,.6); }
.toast.good { border-color: rgba(255,210,63,.7); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }

/* ---------- Sheets ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30;
  animation: fade 150ms ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(560px, 100%);
  max-height: 86dvh; overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(16px + var(--safe-bottom));
  z-index: 31;
  animation: sheet-up 200ms cubic-bezier(.2,.8,.3,1);
}
.sheet.tall { max-height: 92dvh; }
@keyframes sheet-up { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.grabber { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); margin: 2px auto 10px; }
.sheet h3 { margin: 4px 0 12px; font-size: 20px; text-align: center; }
.sheet .card { margin-top: 4px; }

.setting {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 16px;
}
.setting input {
  appearance: none; width: 50px; height: 30px; border-radius: 15px;
  background: #3a4456; position: relative; cursor: pointer; transition: background 150ms; flex: none;
}
.setting input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: transform 160ms ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.setting input:checked { background: #34c759; }
.setting input:checked::after { transform: translateX(20px); }

.rules { font-size: 15px; line-height: 1.5; color: #d6dbe4; }
.rules h4 { margin: 18px 0 6px; color: var(--text); }
.rules ol { padding-left: 20px; }
.points-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; font-variant-numeric: tabular-nums; }
.points-table div { background: var(--panel); border-radius: 8px; padding: 6px 0; text-align: center; font-size: 13px; }
.points-table b { display: block; font-size: 15px; }

.stats-table, .end-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.stats-table th, .stats-table td, .end-table th, .end-table td { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.stats-table th:first-child, .stats-table td:first-child, .end-table td:nth-child(2), .end-table th:nth-child(2) { text-align: left; }
.end-table .place { font-size: 18px; }
.end-table .tot { font-weight: 900; font-size: 17px; }
.end-table tr.win td { color: var(--accent); }
.end-table .cdot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.end-buttons { margin-top: 14px; }
.empty { text-align: center; color: var(--muted); padding: 20px 0; }

/* ---------- Portrait (phone upright, tablet upright) ----------
   Top: players · then small bowl on the left with the status next to it ·
   scorecard full width below · button at the bottom (thumb reach) */
@media (max-aspect-ratio: 4/3) {
  #screen-game.active {
    --bowl: clamp(128px, min(47vw, 29dvh), 300px);
    --cell-h: clamp(36px, calc((100dvh - var(--bowl) - 300px - var(--safe-top) - var(--safe-bottom)) / 4), 56px);
    display: grid;
    grid-template-columns: var(--bowl) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top  top"
      "dice status"
      "dice combo"
      "card card"
      "act  act";
    column-gap: 14px;
    padding: var(--safe-top) max(10px, var(--safe-right)) 0 max(10px, var(--safe-left));
  }
  #screen-game .game-main,
  #screen-game .table-area { display: contents; }
  .topbar { grid-area: top; padding: 8px 0; }
  .dice-tray { grid-area: dice; --bowl-size: var(--bowl); width: var(--bowl); }
  .status {
    grid-area: status; align-self: end;
    justify-content: flex-start; text-align: left;
    font-size: 15px; line-height: 1.35;
    min-height: 0; padding: 0;
  }
  .combo { grid-area: combo; align-self: start; justify-content: flex-start; padding-top: 8px; }
  .card-area { grid-area: card; margin: 0; padding: 10px 0 2px; min-height: 0; align-items: center; }
  .actionbar { grid-area: act; padding-left: 0; padding-right: 0; }
  .toasts { top: auto; bottom: calc(var(--safe-bottom) + 84px); flex-direction: column-reverse; }
}
@media (max-aspect-ratio: 4/3) and (max-width: 370px) {
  .cell { font-size: 15px; }
  .status { font-size: 14px; }
}
/* Tablet upright: more room for everything */
@media (max-aspect-ratio: 4/3) and (min-width: 700px) {
  #screen-game.active { --cell-h: clamp(44px, 6dvh, 70px); padding-left: 24px; padding-right: 24px; }
  .cell { font-size: 24px; }
  .card { max-width: none; }
}

/* ---------- Landscape: card big, bowl small on the left ---------- */
@media (min-aspect-ratio: 4001/3000) {
  #screen-game.active {
    --left-w: clamp(150px, min(26vw, calc(100dvh - 172px - var(--safe-bottom))), 340px);
    --row-h: clamp(34px, calc((100dvh - 188px - var(--safe-bottom)) / 4), 78px);
    display: grid;
    grid-template-columns: var(--left-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "dice   top"
      "dice   card"
      "status card"
      "combo  card"
      "hint   card"
      "act    card";
    column-gap: 14px;
    padding: max(6px, var(--safe-top)) max(12px, var(--safe-right)) max(8px, var(--safe-bottom)) max(12px, var(--safe-left));
  }
  #screen-game .game-main,
  #screen-game .table-area { display: contents; }

  .topbar { grid-area: top; padding: 0 0 6px; gap: 8px; }
  .topbar .icon-btn { width: 36px; height: 36px; }
  .status {
    grid-area: status;
    min-height: 0; font-size: 13px;
    padding: 8px 0 0; line-height: 1.25;
  }
  .status .sum { min-width: 24px; height: 22px; }
  .dice-tray { grid-area: dice; --bowl-size: var(--left-w); width: 100%; align-self: start; }
  .combo { grid-area: combo; font-size: 12px; padding-top: 6px; min-height: 0; }
  .combo .tag { padding: 2px 6px; }
  .actionbar { grid-area: act; padding: 8px 0 0; background: none; gap: 8px; }
  .actionbar .main { height: 50px; font-size: 16px; }
  .actionbar .icon-only { width: 50px; height: 50px; }

  .card-area { grid-area: card; margin: 0; min-height: 0; align-items: flex-start; }
  .card { max-width: none; max-height: 100%; }
  .row { height: var(--row-h); gap: 4px; }
  .cell { height: auto; font-size: clamp(16px, calc(var(--row-h) * .46), 28px); }
  .cell.lockcell { max-height: 100%; }

  .toasts { left: calc(var(--left-w) + 24px); right: 0; top: max(6px, var(--safe-top)); bottom: auto; flex-direction: column; }
}

/* ---------- Desktop / laptop (big window, mouse) ---------- */
.kbd-hint { display: none; }
@media (min-aspect-ratio: 4001/3000) and (min-width: 1000px) and (min-height: 620px) {
  #app { max-width: 1480px; }
  #screen-game.active {
    --left-w: clamp(260px, 24vw, 380px);
    --row-h: clamp(48px, calc((100dvh - 300px) / 4), 86px);
    /* Left column stacked from the top: bowl, status, buttons */
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "dice   top"
      "dice   card"
      "status card"
      "combo  card"
      "act    card"
      "hint   card"
      ".      card";
    column-gap: 32px;
    padding: 22px 32px 22px;
  }
  .topbar { padding-bottom: 14px; }
  .topbar .icon-btn { width: 42px; height: 42px; }
  .chip { padding: 8px 14px 8px 10px; font-size: 15px; border-radius: 14px; }
  .chip .avatar { width: 26px; height: 26px; font-size: 14px; }
  .chip .name { max-width: 160px; }
  .status { font-size: 16px; padding-top: 18px; }
  .status .sum { min-width: 30px; height: 28px; }
  .combo { font-size: 14px; padding-top: 10px; }
  .kbd-hint {
    display: block; grid-area: hint;
    font-size: 12px; color: var(--muted); line-height: 1.9; padding-top: 14px;
  }
  .kbd-hint kbd {
    display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 3px;
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
    font-family: inherit; font-size: 11px; font-weight: 600; line-height: 18px;
    text-align: center; color: var(--text); background: var(--panel);
  }
  .actionbar { padding-top: 16px; }
  .actionbar .main { height: 60px; font-size: 19px; }
  .actionbar .icon-only { width: 60px; height: 60px; }

  .card-area { align-items: center; align-self: stretch; }
  .card { max-width: 1060px; padding: 10px 10px 0 24px; border-width: 4px; border-radius: 14px; }
  .row { gap: 6px; padding: 6px 7px 6px 8px; margin-bottom: 6px; }
  .row::before { left: -16px; border-left-width: 18px; border-top-width: 12px; border-bottom-width: 12px; }
  .cell { border-radius: 9px; }
  .card-legend { gap: 5px; padding: 8px 0 10px; margin-left: -12px; }
  .pt { font-size: 13px; padding: 2px 0 3px; }
  .pen-icon { font-size: 13px; }
  .pen-icon svg { width: 22px; height: 22px; }
  .pbox { width: 32px; height: 32px; border-radius: 8px; }
  .card-total { margin: 0 -10px 0 -24px; padding: 9px 14px 10px 18px; gap: 8px; }
  .tbox { height: 40px; font-size: 21px; border-width: 3px; border-radius: 9px; }
  .tlabel { font-size: 15px; }
  .card-total .op { font-size: 20px; }
  .toasts { top: 22px; }
}
@media (hover: hover) and (pointer: fine) {
  .cell.cand:hover { transform: translateY(-2px) scale(1.05); }
  .pbox.cand:hover { background: #fff0f0; }
  .btn:hover:not(:disabled) { filter: brightness(1.08); }
  .chip:hover { background: var(--panel-2); }
  .dice-tray.idle:hover .bowl { transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .cell.cand { animation: none; }
}

/* ---------- Online ---------- */
.online-btn { background: linear-gradient(135deg, #2c6cdf, #2a9f57); border-color: transparent; color: #fff; }
/* The column may shrink (minmax 0), so an input field never gets wider than its box.
   Safari otherwise counts the field's default width of ~20 characters (incl. letter spacing) as a minimum. */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0 14px; font-size: 14px; color: var(--muted); }
.field input {
  -webkit-appearance: none; appearance: none;
  display: block; box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%;
  margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font: inherit; font-size: 18px; font-weight: 600; padding: 12px 14px;
  -webkit-user-select: text; user-select: text; outline: none;
}
.field input:focus { border-color: rgba(255,210,63,.6); }
.field input::placeholder { color: rgba(154, 165, 181, .6); }
/* Code field: big, centered, letter-spaced. The letter spacing also lands after the last letter;
   the slightly larger left padding balances that out so the code sits exactly centered. */
.code-input {
  text-transform: uppercase; text-align: center;
  font-size: 24px !important; letter-spacing: 6px;
  padding: 12px 14px 12px 20px !important;
}
.online-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 16px; margin-bottom: 14px; }
.online-card h3 { margin: 0 0 4px; font-size: 17px; }
.online-card p { margin: 0 0 10px; font-size: 14px; }
.small { font-size: 13px; line-height: 1.4; }
.center { text-align: center; }
.room-code {
  text-align: center; font-size: 44px; font-weight: 900; letter-spacing: 10px;
  padding: 6px 0 12px; font-variant-numeric: tabular-nums; color: var(--accent);
}
.setup-add.single { grid-template-columns: 1fr; }
.setup-player .lname { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; padding: 6px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-status { text-align: center; font-size: 14px; color: var(--muted); min-height: 1.2em; margin-top: 12px; }
.net-status.ok { color: #6fd08c; }
.net-status.warn { color: var(--accent); }
.net-status.bad { color: #ff7b7b; }

.chip.me { border-color: rgba(255,255,255,.45); }
.chip.waiting .avatar { animation: waiting 1s ease-in-out infinite; }
@keyframes waiting { 50% { opacity: .35; } }
.chip.offline { opacity: .45; }
.chip.offline .name::after { content: " 📴"; }

/* Narrow phones in portrait: points table more compact */
@media (max-width: 500px) {
  .pt { font-size: 9.5px; border-radius: 4px; border-width: 1px; }
  .pt-head { display: none; }
  .pbox { width: 20px; height: 20px; }
  .pen-block { margin-left: 4px; }
  .tbox { height: 26px; font-size: 14px; }
  .tlabel { font-size: 11px; }
}

/* ---------- Secret points, penalty selection, view other boards ---------- */
.tbox { transition: filter 700ms ease, opacity 700ms ease; }
.tbox.blur { filter: blur(6px); opacity: .75; }
.pbox.cand { border: 2px dashed var(--danger); cursor: pointer; }
.pbox.sel { border-color: var(--danger); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); cursor: pointer; }
.pbox.sel::after {
  content: ""; position: absolute; inset: 2px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0262d' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
  animation: mark-pop 160ms cubic-bezier(.3,1.6,.5,1) both;
}
.pbox.nope { animation: nope 260ms ease-in-out; }

.peek-banner { display: none; }
.card.peek .peek-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: calc(100% + 9px); margin: -2px 0 7px -9px;
  padding: 6px 10px; border: 0; border-radius: 8px;
  background: #1d1f22; color: #fff;
  font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}
.peek-banner b { font-weight: 800; }
.peek-back { font-size: 12px; opacity: .75; white-space: nowrap; }
.card.peek .card-legend,
.card.peek .card-total { display: none; }
.card.peek { padding-bottom: 4px; }
.chip.viewing { box-shadow: 0 0 0 2px var(--accent); }
.peek-btn.on { background: var(--accent); color: var(--accent-text); border-color: transparent; }

/* ---------- Boxes via white + colored die: thin inner border in the die's color ----------
   (boxes for the white sum keep the normal highlight; if both apply, the border shows anyway) */
.mk-ring {
  display: none;
  position: absolute; inset: 3px;
  border: 2px solid var(--c);
  border-radius: 5px;
  pointer-events: none;
}
.cell.mk-color .mk-ring { display: block; }
.row.yellow .mk-ring { border-color: #e6b400; }
.no-hints .mk-ring { display: none !important; }
@media (min-aspect-ratio: 4001/3000) and (min-width: 1000px) and (min-height: 620px) {
  .mk-ring { inset: 5px; border-width: 3px; border-radius: 6px; }
}

/* Legend next to the bowl */
.ring-demo {
  display: inline-block; vertical-align: -2px; box-sizing: border-box;
  width: 13px; height: 13px; border-radius: 3px; margin-right: 6px;
  background: #fff; box-shadow: 0 0 0 1.5px #1b2130;
}
.ring-demo.c {
  padding: 2.5px;
  background: conic-gradient(var(--red) 0 25%, var(--yellow) 0 50%, var(--green) 0 75%, var(--blue) 0);
}
.ring-demo.c::after { content: ""; display: block; width: 100%; height: 100%; background: #fff; border-radius: 1px; }
.ring-demo.c.red { background: var(--red); } .ring-demo.c.yellow { background: var(--yellow); }
.ring-demo.c.green { background: var(--green); } .ring-demo.c.blue { background: var(--blue); }
.combo .tag.legend { color: var(--muted); }

/* ---------- Big white-sum reveal after every roll ---------- */
.sum-flash {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 26;
}
.sum-flash > * { grid-area: 1 / 1; }
.sf-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 34px 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff, #eef0f3);
  color: var(--ink);
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 6px rgba(255,255,255,.16),
    0 0 70px 14px rgba(255,210,63,.35);
  will-change: transform, opacity;
}
.sf-label {
  font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: #6b7385;
}
.sf-num {
  font-size: clamp(76px, 24vmin, 160px);
  font-weight: 900; line-height: .95;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
}
.sf-dice { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: #8a91a0; }
.sf-die {
  font-style: normal;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #c9ccd2, 0 2px 0 rgba(0,0,0,.12);
}
.sf-burst {
  width: clamp(150px, 40vmin, 280px); aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 210, 63, .85);
  box-shadow: 0 0 30px rgba(255, 210, 63, .6), inset 0 0 30px rgba(255, 210, 63, .4);
  opacity: 0;
}

/* ---------- Online: countdown until the turn moves on ---------- */
.countdown {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(255, 210, 63, .16); color: var(--accent);
  font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.countdown.urgent { background: rgba(239, 68, 68, .2); color: #ff8a8a; animation: urgent 500ms ease-in-out infinite alternate; }
@keyframes urgent { to { transform: scale(1.08); } }

/* ---------- Game mode picker (Einfach / Normal) ---------- */
.mode-pick { margin: 6px 0 16px; }
.mode-title { display: block; font-size: 14px; color: var(--muted); margin: 0 2px 6px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-btn {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 10px 12px; color: var(--text);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 120ms, background 120ms;
}
.seg-btn b { font-size: 16px; }
.seg-btn small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.seg-btn.on { border-color: var(--accent); background: rgba(255, 210, 63, .12); }
.seg-btn.on b::after { content: " ✓"; color: var(--accent); }
.seg-btn:disabled { cursor: default; opacity: 1; }
.seg-btn:disabled:not(.on) { opacity: .45; }