:root {
  color-scheme: light;
  --green: #4caf50;
  --green-dark: #3e9142;
  --blue: #2878d0;
  --orange: #e89b19;
  --red: #c84a4a;
  --ink: #252a2f;
  --muted: #687078;
  --surface: #fff;
  --surface-soft: #f5f7f8;
  --line: #dbe1e5;
  --shadow: 0 7px 22px rgba(24,35,45,.09);
  --die-face: #f7f7f2;
  --die-pip: #25282a;
  --die-edge: #595d60;
  --die-highlight: rgba(255,255,255,.88);
  --die-shade: rgba(31,35,38,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #eef2f4;
  color: var(--ink);
  padding: 16px;
}
button, input { font: inherit; }
button {
  border: 0;
  border-radius: 8px;
  padding: 9px 13px;
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease, opacity .18s ease;
}
button:not(.icon-button):not(.real-icon-button):not(.pause):not(.secondary):not(.danger-button):not(.app-install-button):not(.status-bubble-action):not(.opponent-tab):hover:not(:disabled) {
  background: linear-gradient(180deg, #61be65 0%, #4caf50 100%);
  transform: translateY(-1px);
}
button:disabled {
  background: #c5cbd0 !important;
  border-color: #9ca4a9 !important;
  cursor: not-allowed;
  transform: none;
  opacity: .7;
}
button.secondary { background: linear-gradient(180deg, #c84a4a 0%, #a93636 100%); }
button.secondary:hover:not(:disabled) { background: linear-gradient(180deg, #d96862 0%, #c84a4a 100%); }
button.danger-button { background: linear-gradient(180deg, #c84a4a 0%, #a93636 100%); }
button.danger-button:hover:not(:disabled) { background: linear-gradient(180deg, #d96862 0%, #c84a4a 100%); }
button.compact { padding: 7px 10px; }
.pause { background: linear-gradient(180deg, #2878d0 0%, #1f62ad 100%); }
button.pause:hover:not(:disabled) { background: linear-gradient(180deg, #4c93df 0%, #2878d0 100%); }
#leave-game-button,
#real-back-button { background: linear-gradient(180deg, #c84a4a 0%, #a93636 100%); }
#leave-game-button:hover:not(:disabled),
#real-back-button:hover:not(:disabled) { background: linear-gradient(180deg, #d96862 0%, #c84a4a 100%); }

#real-offline-delete-button, #local-board-offline-delete-button { background: linear-gradient(180deg, #2878d0 0%, #1f62ad 100%); }
#real-offline-delete-button:hover:not(:disabled), #local-board-offline-delete-button:hover:not(:disabled) { background: linear-gradient(180deg, #4c93df 0%, #2878d0 100%); }
input {
  width: min(100%, 340px);
  padding: 10px 12px;
  border: 1px solid #c9d0d5;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
h1, h2, h3 { margin-top: 0; }
h1, h2 { color: var(--green-dark); }
.app-version {
  display: inline-block;
  margin-left: .35rem;
  color: #889097;
  font-size: .44em;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: .04em;
}
.app-shell { width: min(1480px, 100%); margin: 0 auto; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
}
[hidden] { display: none !important; }

/* Hilfe */
.help-button {
  position: fixed;
  z-index: 1600;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: #4f5962;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.modal-overlay, .seat-picker {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
}
.rules-dialog, .seat-picker-inner {
  width: min(650px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
  padding: 20px;
  background: #fff;
}
.rules-dialog ul { margin: 12px 0 0; padding-left: 1.25rem; line-height: 1.45; }
.rules-dialog li + li { margin-top: 7px; }
.legal-dialog {
  width: min(900px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  padding: 20px;
  background: var(--surface);
  color: var(--ink);
}
.legal-content { margin-top: 14px; line-height: 1.55; }
.legal-section h3 { margin: 0 0 12px; }
.legal-section h4 { margin: 22px 0 8px; }
.legal-section p { margin: 0 0 11px; }
.legal-section ul { margin: 8px 0 14px; padding-left: 1.35rem; }
.legal-section li + li { margin-top: 4px; }
.legal-section hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); }
.legal-section a { color: inherit; text-decoration: underline; }
.legal-section code { font-size: .92em; }
.legal-uppercase { font-weight: 700; }
.legal-copyright { margin-top: 26px !important; font-size: .9rem; color: var(--muted); text-align: center; }
.legal-stand { font-size: .9rem; color: var(--muted); }
.modal-head, .seat-picker-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.modal-head h2, .seat-picker-head h3 { margin-bottom: 0; }

.create-pin-dialog {
  width: min(420px, 100%);
  padding: 22px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 60px rgba(0,0,0,.3);
}
.create-pin-dialog h2 { margin: 0 0 8px; }
.create-pin-dialog > p:not(.create-pin-error) { margin: 0 0 18px; color: var(--muted); line-height: 1.4; }
.create-pin-dialog label { display: block; margin: 11px 0 5px; font-weight: 700; }
.create-pin-dialog input { width: 100%; letter-spacing: .45em; text-align: center; font-size: 1.25rem; }
.create-pin-error { margin: 10px 0 0; color: var(--red); font-weight: 700; }
.offline-pack-progress { margin-top: 16px; }
.offline-pack-progress-track {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 34%, transparent);
}
.offline-pack-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #9b5dde 0%, #7131b6 100%);
  transition: width .18s ease;
}
.offline-pack-progress-text {
  margin-top: 7px;
  text-align: center;
  font-weight: 800;
  color: var(--muted);
}
.create-pin-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.create-pin-actions button { min-width: 120px; }
.create-pin-actions button:not(.secondary):not(.danger) {
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%) !important;
  border-color: #2f7533 !important;
}
.create-pin-actions button:not(.secondary):not(.danger):hover:not(:disabled) {
  background: linear-gradient(180deg, #61be65 0%, #4caf50 100%) !important;
  border-color: #3d8a42 !important;
}
#player-name-login {
  background: linear-gradient(180deg, #9b5dde 0%, #7131b6 100%) !important;
  border-color: #5a2498 !important;
  color: #fff !important;
}
#player-name-login:hover:not(:disabled) {
  background: linear-gradient(180deg, #aa70e8 0%, #8141c2 100%) !important;
  border-color: #6428a5 !important;
}

.guest-invite-dialog { width:min(460px, 100%); }
.guest-invite-code-row { display:flex; align-items:stretch; gap:9px; }
.guest-invite-code-row input {
  flex:1 1 auto;
  min-width:0;
  width:auto;
  font-size:clamp(.68rem, 2vw, .84rem);
  letter-spacing:0;
  font-weight:600;
  text-transform:none;
}
.guest-invite-code-row button { flex:0 0 auto; }
.guest-invite-copy-status { margin:10px 0 0; color:var(--muted); font-weight:700; }
@media (max-width: 520px) {
  .create-pin-actions { flex-direction: column; }
  .create-pin-actions button { width: 100%; }
  .guest-invite-code-row { flex-direction:column; }
  .guest-invite-code-row input,
  .guest-invite-code-row button { width:100%; }
}

/* Spielende -------------------------------------------------------------- */
.game-end-overlay {
  z-index: 2000;
  background: rgba(20, 24, 28, .72);
  backdrop-filter: blur(4px);
}
.game-end-dialog {
  width: min(760px, 100%);
  padding: clamp(24px, 5vw, 42px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  border: 2px solid color-mix(in srgb, var(--green) 62%, white 38%);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}
.game-end-emojis {
  margin-bottom: 14px;
  font-size: clamp(2rem, 8vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: .08em;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .18));
}
.game-end-dialog.winner-result .game-end-emojis {
  animation: celebration-pop .55s cubic-bezier(.2, .9, .3, 1.25) both;
}
.game-end-dialog.loser-result {
  border-color: color-mix(in srgb, var(--orange) 62%, var(--line) 38%);
}
.game-end-dialog.loser-result h2 { color: #a76a00; }
.game-end-dialog.spectator-result {
  border-color: color-mix(in srgb, var(--blue) 62%, var(--line) 38%);
}
.game-end-dialog.spectator-result h2 { color: var(--blue); }
.game-end-dialog h2 {
  margin: 0;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 5vw, 2.35rem);
  overflow-wrap: anywhere;
}
.game-end-message {
  margin: 14px auto 24px;
  max-width: 42ch;
  color: var(--ink);
  font-size: clamp(1rem, 2.8vw, 1.18rem);
  line-height: 1.5;
}
.game-end-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.game-end-actions button {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 14px;
  font-weight: 800;
  white-space: normal;
}
.game-end-actions button:not(.secondary):not(.danger-button) {
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%) !important;
  border-color: #2f7533 !important;
}
.game-end-actions button:not(.secondary):not(.danger-button):hover:not(:disabled) {
  background: linear-gradient(180deg, #61be65 0%, #4caf50 100%) !important;
  border-color: #3d8a42 !important;
}
.game-end-actions button.vote-selected {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.22);
}
.game-end-actions #restart-round-button.vote-selected {
  color: #fff;
  background: var(--green);
  border-color: color-mix(in srgb, var(--green) 78%, #000 22%);
}
.game-end-actions #leave-after-game-button.vote-selected {
  color: #fff;
  background: var(--red);
  border-color: color-mix(in srgb, var(--red) 78%, #000 22%);
}
.game-end-error {
  margin: 14px 0 0;
  color: var(--red);
  font-weight: 700;
}
.game-end-vote {
  margin: 0 auto 20px;
  max-width: 430px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, var(--line) 14%);
  text-align: left;
}
.game-end-vote-title {
  margin: 0 0 10px;
  font-weight: 800;
  text-align: center;
}
.game-end-vote-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}
.game-end-vote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 90%, var(--line) 10%);
}
.game-end-vote-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.game-end-vote-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
  background: color-mix(in srgb, var(--surface) 82%, var(--line) 18%);
}
.game-end-vote-row.vote-continue .game-end-vote-state { color: var(--green); }
.game-end-vote-row.vote-leave .game-end-vote-state { color: var(--red); }
.game-end-vote-row.vote-pending .game-end-vote-state { color: var(--muted); }
.game-end-vote-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.35;
  text-align: center;
}
@keyframes celebration-pop {
  from { opacity: 0; transform: scale(.55) rotate(-4deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@media (max-width: 520px) {
  .game-end-overlay { padding: 12px; align-items: stretch; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .game-end-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] .game-end-actions {
  flex-direction: column;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] .game-end-actions button {
  width: 100%;
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .game-end-emojis { animation: none !important; }
}

/* Lobby */
.lobby-panel { max-width: 900px; margin: 4vh auto 0; padding: 26px; }
.brand-block { text-align: center; margin-bottom: 22px; }
.seo-heading-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-block h1 {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-block-logo {
  display: block;
  width: auto;
  height: clamp(74px, 12vw, 108px);
  max-width: min(88vw, 420px);
  object-fit: contain;
}
.brand-block p { margin: 0; color: var(--muted); }
.brand-seo-title {
  display: block;
  margin-top: 7px;
  font-size: clamp(.92rem, 1.6vw, 1.08rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}
.brand-block .brand-seo-intro {
  max-width: 680px;
  margin: 8px auto 0;
  line-height: 1.45;
}
.brand-block .brand-seo-action {
  margin-top: 6px;
}

.lobby-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.online-game-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.real-game-launch,
.app-install-button {
  width: min(100%, 430px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
}
/* Match84 V2.0.233: Der Installationsbutton ist bereits im Grundzustand lila.
   Damit kann er waehrend der Initialisierung niemals auf die globale gruene
   button-Regel zurueckfallen, bevor die JS-Zustandsklasse gesetzt ist. */
button.app-install-button {
  background: linear-gradient(180deg, #9b5dde 0%, #7131b6 100%) !important;
  border-color: #49305f !important;
  color: #fff !important;
}
button.app-install-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #a96ceb 0%, #7b3ac2 100%) !important;
  border-color: #513469 !important;
}
.real-game-offline-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.55);
  font-size: .9em;
  font-weight: 900;
  line-height: 1;
}
.real-game-offline-check.is-ready {
  background: rgba(76,175,80,.32);
  border-color: rgba(255,255,255,.72);
}
.lobby-public-intro { margin: 26px 0 0; color: var(--muted); text-align: center; }
.lobby-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.lobby-heading h2 { margin-bottom: 0; }
.lobby-browser { display: grid; gap: 9px; margin: 12px 0 10px; }
.lobby-search-row { display: flex; }
.lobby-search-row input { width: 100%; max-width: none; }
.lobby-filter-row { display: flex; gap: 7px; flex-wrap: wrap; }
.lobby-filter-button {
  min-width: 78px;
  padding: 7px 12px;
  background: #e4e8eb !important;
  border: 1px solid #cbd2d7 !important;
  color: #4f575d !important;
  box-shadow: none !important;
}
.lobby-filter-button:hover:not(:disabled) {
  background: #d9dfe3 !important;
  border-color: #bcc5cb !important;
  transform: none !important;
}
.lobby-filter-button.active,
.lobby-filter-button.active:hover:not(:disabled) {
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%) !important;
  border-color: #2f7533 !important;
  color: #fff !important;
}
.lobby-more-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.lobby-more-wrap[hidden] { display: none; }
.lobby-result-count { color: var(--muted); font-size: .86rem; }
/* Kontextuelle Statusblasen: keine reservierten Statusflächen im Layout. */
.status-live-region {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.status-bubble[hidden] { display: none !important; }
.status-bubble {
  --status-bubble-top: rgba(148,76,255,.98);
  --status-bubble-bottom: rgba(109,43,222,.98);
  --status-bubble-border: rgba(244,236,255,.92);
  position: fixed;
  z-index: 12020;
  box-sizing: border-box;
  max-width: min(360px, calc(100vw - 16px));
  min-width: min(180px, calc(100vw - 16px));
  padding: 11px 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, var(--status-bubble-top), var(--status-bubble-bottom));
  border: 1px solid var(--status-bubble-border);
  box-shadow: 0 9px 24px rgba(0,0,0,.30);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.35;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
  contain: layout style;
}
.status-bubble-close {
  position:absolute;
  top:5px;
  right:7px;
  width:25px;
  height:25px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  font:800 20px/23px Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  pointer-events:auto;
}
.status-bubble-close[hidden] { display:none !important; }
.status-bubble-close:not([hidden]) + .status-bubble-text { padding-right:20px; }
.status-bubble-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.status-bubble-actions[hidden] { display: none !important; }
.status-bubble-action {
  min-width: 108px;
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  pointer-events:auto;
}
.status-bubble-action-join {
  background: linear-gradient(180deg,#8d5ad8 0%,#7342c5 100%);
  box-shadow:none;
}
.status-bubble-action-join:hover:not(:disabled) {
  background: linear-gradient(180deg,#a16bea 0%,#8350d1 100%);
  transform:none;
}
.status-bubble-action-decline {
  background: linear-gradient(180deg,#d95b57 0%,#a33b37 100%);
}
.status-bubble-action-decline:hover:not(:disabled) {
  background: linear-gradient(180deg,#e77872 0%,#c84a4a 100%);
  transform:none;
}
.status-bubble-action:disabled { opacity: .55; cursor: default; }

.status-bubble.is-success {
  --status-bubble-top: #5bc660;
  --status-bubble-bottom: #3e9142;
  --status-bubble-border: rgba(225,255,227,.92);
}
.status-bubble.is-error {
  --status-bubble-top: #dc5c58;
  --status-bubble-bottom: #a93c38;
  --status-bubble-border: rgba(255,230,228,.94);
}
.status-bubble::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, var(--status-bubble-top), var(--status-bubble-bottom));
}
.status-bubble[data-placement="center"]::after { display: none; }
.status-bubble[data-placement="top"]::after {
  left: clamp(18px, var(--status-arrow-x, 50%), calc(100% - 18px));
  bottom: -12px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
}
.status-bubble[data-placement="bottom"]::after {
  left: clamp(18px, var(--status-arrow-x, 50%), calc(100% - 18px));
  top: -12px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform: translateX(-50%);
}
.status-bubble[data-placement="left"]::after {
  right: -12px;
  top: clamp(18px, var(--status-arrow-y, 50%), calc(100% - 18px));
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  transform: translateY(-50%);
}
.status-bubble[data-placement="right"]::after {
  left: -12px;
  top: clamp(18px, var(--status-arrow-y, 50%), calc(100% - 18px));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: translateY(-50%);
}
@media (max-width: 600px) and (orientation: portrait) {
  .status-bubble {
    max-width: min(300px, calc(100vw - 14px));
    min-width: min(150px, calc(100vw - 14px));
    padding: 9px 11px;
    border-radius: 15px;
    font-size: 13px;
  }
}
.empty-state-message {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--m84-text, var(--ink));
  background: var(--surface-soft);
  font-weight: 700;
}
.game-list { display: grid; gap: 10px; }
.game-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.game-card h3 { margin: 0 0 6px; color: var(--ink); }
.lobby-spectator-lock {
  display: inline-flex;
  align-items: center;
  margin-left: .38em;
  vertical-align: .06em;
}
.lobby-spectator-lock .spectator-lock-emoji { font-size: .88em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.game-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: .9rem; }
.game-player-names { flex-basis: 100%; color: #4d565e; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.badge.waiting { background: #e3f5e6; color: #276b30; }
.badge.running { background: #e6edf8; color: #365b8b; }
.badge.paused { background: #fff0cf; color: #80590d; }
.game-card-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.game-list button.lobby-resume-button {
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%) !important;
  border-color: #2f7533 !important;
  color: #fff !important;
}
.game-list button.lobby-resume-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #61be65 0%, #4caf50 100%) !important;
  border-color: #3d8a42 !important;
}
.game-list button.lobby-watch-button {
  background: linear-gradient(180deg, #9b5dde 0%, #7131b6 100%) !important;
  border-color: #49305f !important;
  color: #fff !important;
}
.game-list button.lobby-watch-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #a96ceb 0%, #7b3ac2 100%) !important;
  border-color: #513469 !important;
}
.game-list button.lobby-delete-button {
  background: linear-gradient(180deg, #c84a4a 0%, #a93636 100%) !important;
  border-color: #8b2f2f !important;
  color: #fff !important;
}
.game-list button.lobby-delete-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #d96862 0%, #c84a4a 100%) !important;
  border-color: #a33b3b !important;
}
.resume-box { margin: 16px auto; padding: 12px; border-radius: 10px; background: #fff8e5; border: 1px solid #efd58c; text-align: center; }
.resume-box p { margin-top: 0; }
.seat-picker-inner { border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.seat-picker-list { display: grid; gap: 9px; margin-top: 12px; }
.seat-row-actions button:not(.secondary):not(.danger-button) {
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%) !important;
  border-color: #2f7533 !important;
}
.seat-row-actions button:not(.secondary):not(.danger-button):hover:not(:disabled) {
  background: linear-gradient(180deg, #61be65 0%, #4caf50 100%) !important;
  border-color: #3d8a42 !important;
}
.seat-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }

/* Header */
#game-container { display: flex; flex-direction: column; gap: 13px; }
.game-header {
  display: grid;
  grid-template-columns: minmax(250px,1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  background: #30363b;
  color: #fff;
}
.game-header .game-title-heading { color: #fff; margin: 0 0 5px; font-size: 1.35rem; }
.spectator-lock-button,
.spectator-lock-button:hover,
.spectator-lock-button:focus,
.spectator-lock-button:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  min-width: 1.55em;
  height: 1.42em;
  margin: 0 0 0 .38em;
  padding: .08em .14em;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: .34em;
  background: linear-gradient(180deg, #68747d 0%, #46515a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.3);
  color: inherit;
  font: inherit;
  font-size: .72em;
  line-height: 1;
  vertical-align: .08em;
  transform: translateY(0);
}
.spectator-lock-button:focus-visible { outline: 1px solid rgba(255, 255, 255, .75); outline-offset: 2px; }
.spectator-lock-button:disabled { opacity: .55; cursor: wait; }
.spectator-lock-button .spectator-lock-emoji { display: block; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.28)); }
.spectator-lock-button.unlocked,
.spectator-lock-button.locked { color: inherit !important; cursor: default; }
.spectator-lock-button.host-controllable { cursor: pointer; }
.spectator-lock-button.host-controllable:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.spectator-lock-button.host-controllable:active { transform: translateY(1px); }
.game-title-block { min-width: 0; }
.game-name-row { min-height: 34px; display: flex; align-items: center; }
#game-name-display { color: #dfe6ea; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-name-input { width: min(360px, 100%); padding: 6px 9px; font-size: .94rem; }
.player-info { display: flex; flex-direction: column; gap: 3px; font-size: .88rem; }
.header-actions { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; overflow-x: hidden; }
.header-actions > button { padding: 7px 10px; font-size: .86rem; }
.mobile-menu-button { display: none; }

/* Desktop game area */
#game-area {
  display: grid;
  grid-template-columns: minmax(330px, 450px) minmax(260px, 380px) minmax(330px, 450px);
  justify-content: center;
  grid-template-areas: "own controls opponent";
  gap: 13px;
  align-items: start;
}
#main-player-board { grid-area: own; }
#control-panel { grid-area: controls; }
#opponent-boards { grid-area: opponent; }
.player-board, #control-panel, .opponents-panel { padding: 14px; min-width: 0; }
.player-board h2, .opponents-panel h2 { text-align: center; margin-bottom: 9px; font-size: 1.15rem; }

.board-row { display: flex; align-items: center; min-height: 40px; border-bottom: 1px dashed #e3e6e8; }
.board-row:last-child { border-bottom: 0; }
.row-number { width: 29px; flex: 0 0 29px; font-weight: 700; text-align: center; }
.row-content { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; width: 100%; padding: 3px 5px; }
.bead-container { display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; min-height: 27px; min-width: 0; }
.bead-container.right { justify-content: flex-end; }
.bead { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; border: 1px solid #666; }
.current-player { outline: 3px solid #f0ad4e; outline-offset: -3px; }
.bead.pending-bead { box-shadow: 0 0 0 3px var(--orange); position: relative; z-index: 1; }

/* Steuerung */
#control-panel { text-align: center; }


.icon-actions { display: flex; justify-content: center; align-items: center; gap: 7px; flex-wrap: wrap; }
.turn-actions { margin-bottom: 9px; }
.icon-button {
  --btn-shell-top: #606870;
  --btn-shell-bottom: #2b3035;
  --btn-shell-edge: #15191d;
  --btn-face-hi: #ffffff;
  --btn-face-mid: #d8d8d8;
  --btn-face-low: #b4b4b4;
  --btn-face-border: rgba(0,0,0,.28);
  --btn-glow: rgba(255,255,255,.16);
  position: relative;
  width: 43px;
  height: 43px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: var(--btn-shell-border, 1px) solid var(--btn-shell-edge);
  background: linear-gradient(180deg, var(--btn-shell-top) 0%, #464c52 18%, #353a40 48%, var(--btn-shell-bottom) 100%);
  box-shadow:
    0 0 var(--btn-glow-blur, 11px) var(--btn-glow),
    0 var(--btn-shadow-y, 6px) var(--btn-shadow-blur, 11px) rgba(0,0,0,.34),
    0 2px 0 rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.3);
  overflow: hidden;
  isolation: isolate;
  transition: transform .12s ease, filter .15s ease, box-shadow .16s ease;
}
.icon-button::before {
  content: "";
  position: absolute;
  left: var(--btn-face-inset, 7.5%);
  right: var(--btn-face-inset, 7.5%);
  top: var(--btn-face-inset, 7.5%);
  bottom: var(--btn-face-inset, 7.5%);
  border-radius: var(--btn-face-radius, 4px);
  background: linear-gradient(180deg, var(--btn-face-hi) 0%, var(--btn-face-mid) 50%, var(--btn-face-low) 100%);
  border: var(--btn-face-border-width, 1px) solid var(--btn-face-border);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.35),
    inset 0 -4px 6px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,255,255,.05);
  z-index: 0;
}
.icon-button::after {
  content: "";
  position: absolute;
  left: 18.5%;
  right: 18.5%;
  top: 18.5%;
  height: 28%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.18) 58%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.icon-button svg {
  position: relative;
  z-index: 2;
}
.icon-button svg {
  width: var(--btn-icon-size, 24px);
  height: var(--btn-icon-size, 24px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
#roll-dice-button svg circle { fill: currentColor; stroke: none; }
#roll-dice-button svg rect { fill: none; }
#roll-dice-button {
  --btn-face-hi: #a1e3ff;
  --btn-face-mid: #5ab8ee;
  --btn-face-low: #2d86bb;
  --btn-face-border: #245f82;
  --btn-glow: rgba(72,184,238,.48);
}
#toggle-mode-button {
  --btn-face-hi: #cf9bff;
  --btn-face-mid: #984bf6;
  --btn-face-low: #6821c8;
  --btn-face-border: #5a1ca9;
  --btn-glow: rgba(152,75,246,.52);
}
#toggle-mode-button.mode-single {
  transform: translateY(2px);
  box-shadow:
    0 0 7px rgba(152,75,246,.28),
    0 1px 3px rgba(0,0,0,.34),
    inset 0 3px 5px rgba(0,0,0,.30),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;
  filter: brightness(.90) saturate(1.06);
}
#toggle-mode-button.mode-single::before {
  left: var(--btn-face-inset, 7.5%);
  right: var(--btn-face-inset, 7.5%);
  top: 15%;
  bottom: 6.5%;
  background: linear-gradient(180deg, #8d3edc 0%, #7428cf 48%, #5b1cae 100%);
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.34),
    inset 0 1px 1px rgba(255,255,255,.09),
    0 0 0 1px rgba(0,0,0,.16);
}
#toggle-mode-button.mode-single::after { top: 23%; opacity: .26; }
#toggle-mode-button.mode-single:active:not(:disabled) {
  transform: translateY(2px);
}
#select-dice-button,
#secure-pair-button {
  --btn-face-hi: #5ae989;
  --btn-face-mid: #27b351;
  --btn-face-low: #1b7a37;
  --btn-face-border: #18662f;
  --btn-glow: rgba(39,179,81,.50);
}
#end-turn-button {
  --btn-face-hi: #f1967d;
  --btn-face-mid: #cb6045;
  --btn-face-low: #8d3726;
  --btn-face-border: #742e20;
  --btn-glow: rgba(203,96,69,.48);
}
.icon-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 3px 6px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.icon-button:active:not(:disabled)::before {
  top: 12.5%;
  bottom: 8%;
}
.icon-button:active:not(:disabled)::after { top: 21%; }
.icon-button:disabled {
  filter: grayscale(.16) brightness(.88);
  box-shadow:
    0 5px 8px rgba(0,0,0,.24),
    0 2px 0 rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.24);
}

#selection-area { margin-top: 8px; padding: 9px; border: 2px solid var(--orange); border-radius: 9px; background: #fffaf0; }
#dice-selection-container { margin: 6px 0; }
.dice-group { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; }
.dice-title { width: 100%; margin: 6px 0 2px; font-size: .78rem; color: var(--muted); }
.dice-item { width: 40px; height: 40px; border: 1px solid var(--die-edge); border-radius: 6px; background: linear-gradient(to right, var(--die-highlight) 0 5%, transparent 6% 93%, var(--die-shade) 94% 100%), linear-gradient(to bottom, var(--die-highlight) 0 5%, transparent 6% 92%, var(--die-shade) 93% 100%), var(--die-face); box-shadow: inset 1px 1px 0 rgba(255,255,255,.42), inset -1px -1px 0 rgba(0,0,0,.34), 2px 3px 4px rgba(0,0,0,.32); display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 4px; gap: 2px; cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; }
.dice-item:hover { transform: translateY(-1px); }
.dice-item.selected { border-width: 2px; border-top-color: #72ff8d; border-right-color: #009b2e; border-bottom-color: #006a1f; border-left-color: #22d94f; box-shadow: 0 0 0 2px rgba(0,190,48,.4), 0 0 8px rgba(0,180,45,.68), inset 1px 1px 0 rgba(255,255,255,.36), inset -1px -1px 0 rgba(0,0,0,.36), 2px 4px 5px rgba(0,0,0,.38); transform: translateY(-2px); }
.dice-item.secured:not(.selected) { filter: saturate(.62) brightness(.82); opacity: .78; }
.pip { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--die-pip); transform: scale(.68); box-shadow: inset 0 1px 1px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.2); }






/* Gegner als Tabs */
.opponents-panel { overflow: hidden; }
.opponent-heading h2 { margin-bottom: 7px; }
.opponent-tabs { display: flex; flex-direction: column; gap: 8px; overflow: visible; padding: 2px 1px 10px; }
.opponent-tab {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  padding: 10px 11px;
  border: 1px solid #cfd6da;
  border-bottom: 3px solid transparent;
  background: linear-gradient(180deg, rgba(38, 47, 42, .98) 0%, rgba(27, 34, 30, .98) 100%);
  color: var(--ink);
  text-align: left;
  border-radius: 9px;
}
.opponent-tab:hover:not(:disabled) { background: #e9eeef; transform: none; }
.opponent-tab.active { background: #fff; border-color: #bfc8cd; border-bottom-color: var(--green); }
.opponent-tab.current-turn { box-shadow: inset 0 0 0 2px #f0ad4e; }
.opponent-tab.offline { opacity: .62; }
.opponent-tab-top { display: flex; justify-content: space-between; gap: 7px; align-items: center; margin-bottom: 5px; }
.opponent-tab-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.opponent-tab-name.nudge-available > strong {
  cursor: pointer;
  text-decoration: underline dotted rgba(171, 118, 255, .9);
  text-underline-offset: 3px;
}
.opponent-tab-name.nudge-available > strong.nudge-pending { opacity: .6; }

.opponent-host-label { color: var(--muted); font-size: .68em; font-weight: 700; white-space: nowrap; }
.opponent-tab-top small { color: var(--muted); }
.opponent-progress { display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; }
.opponent-progress-score { display:none; color:var(--muted); font-size:.72rem; font-weight:700; line-height:1; white-space:nowrap; }
.opponent-progress-bead { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(0,0,0,.38); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.45); }
.opponent-progress-bead.dark-text { color: #222; text-shadow: 0 1px 1px rgba(255,255,255,.45); }
.opponent-progress-bead.complete { opacity: .18; filter: grayscale(.7); }
.opponent-view-card { border: 1px solid #dfe3e6; border-radius: 8px; background: #fafbfb; overflow: hidden; }
.opponent-view-card.offline { opacity: .7; }
.opponent-view-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #e5e9eb; }
.opponent-view-head small { color: var(--muted); }
.opponent-board-rows { padding: 0 7px 7px; }
.opponent-dice-live { padding: 6px 8px; border-bottom: 1px solid #e8ebed; background: #fff; min-height: 48px; }
.opponent-dice-title { font-size: .75rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.opponent-dice-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.opponent-die { width: 34.8px; height: 34.8px; padding: 3px; border-radius: 5px; cursor: default; box-shadow: inset 1px 1px 0 rgba(255,255,255,.4), inset -1px -1px 0 rgba(0,0,0,.34), 2px 3px 4px rgba(0,0,0,.3); }
.opponent-selection-text { display: block; margin-top: 4px; color: #c62828; font-size: .75rem; font-weight: 700; }
.mobile-board-switch { display: none; }


/* Zuschauer */
.spectator-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #eef5f8;
  color: var(--muted);
  font-size: .78rem;
}
.spectator-list[hidden] { display: none; }
.spectator-label { font-weight: 800; color: var(--ink); }
.spectator-chip { padding: 3px 7px; border-radius: 999px; background: #fff; border: 1px solid #d7e1e5; }
body.spectator-mode #main-player-board,
body.spectator-mode #control-panel { display: none !important; }
body.spectator-mode #game-area { grid-template-columns: minmax(330px, 520px); grid-template-areas: "opponent"; justify-content: center; }
body.spectator-mode #opponent-boards { width: 100%; }
body.spectator-mode .score-info { display: none !important; }
body.spectator-mode #mobile-board-switch { display: none !important; }
.app-mobile-mode body.spectator-mode #game-area,
.app-tablet-mode body.spectator-mode #game-area { display: block; }
.app-mobile-mode body.spectator-mode #opponent-boards,
.app-tablet-mode body.spectator-mode #opponent-boards { display: block !important; transform: none !important; width: 100% !important; }

/* App-Darstellung für Handy/Tablet. Bei Browser-Desktopmodus fehlt die mobile Browserkennung. */
.app-mobile-mode body.in-game {
  height: 100dvh;
  overflow: hidden;
  padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
}
.app-mobile-mode body.in-game .help-button { width: 29px; height: 29px; top: 5px; right: 5px; font-size: .8rem; }
.app-mobile-mode #game-container { height: 100%; min-height: 0; gap: 4px; }
.app-mobile-mode .game-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "title player" "name actions";
  gap: 3px 7px;
  padding: 5px 36px 5px 8px;
  border-radius: 7px;
}
.app-mobile-mode .game-title-block { display: contents; }
.app-mobile-mode .game-header .game-title-heading { grid-area: title; font-size: .94rem; margin: 0; white-space: nowrap; }
.app-mobile-mode .game-name-row { grid-area: name; min-height: 25px; }
.app-mobile-mode #game-name-display { font-size: .72rem; }
.app-mobile-mode .game-name-input { height: 25px; padding: 2px 6px; font-size: .72rem; max-width: 180px; }
.app-mobile-mode .player-info { grid-area: player; display: flex; flex-direction: row; gap: 6px; align-items: center; font-size: .68rem; white-space: nowrap; }
.app-mobile-mode .player-info .role-info { display: none; }
.app-mobile-mode .header-actions { grid-area: actions; flex-wrap: nowrap; gap: 3px; }
.app-mobile-mode .header-actions > button { padding: 4px 6px; font-size: .65rem; border-radius: 5px; }
.app-mobile-mode .mobile-board-switch { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; height: 20px; font-size: .65rem; color: var(--muted); user-select: none; }
.app-mobile-mode .mobile-board-switch span:first-child,
.app-mobile-mode .mobile-board-switch span:last-child { padding: 2px 6px; border-radius: 9px; }
.app-mobile-mode .mobile-board-switch .active { background: #dfeee1; color: #276b30; font-weight: 800; }

.app-mobile-mode #game-area {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0,1fr);
  grid-template-areas: "controls" "board";
  gap: 4px;
}
.app-mobile-mode #control-panel { grid-area: controls; padding: 5px; border-radius: 7px; box-shadow: none; }
.app-mobile-mode #main-player-board,
.app-mobile-mode #opponent-boards { grid-area: board; min-height: 0; height: 100%; padding: 5px; border-radius: 7px; box-shadow: none; }
.app-mobile-mode #main-player-board { display: flex; flex-direction: column; }
.app-mobile-mode #opponent-boards { display: none; flex-direction: column; }
.app-mobile-mode #game-container.mobile-show-opponent #main-player-board { display: none; }
.app-mobile-mode #game-container.mobile-show-opponent #opponent-boards { display: flex; }
.app-mobile-mode .player-board h2, .app-mobile-mode .opponents-panel h2 { font-size: .82rem; margin: 0 0 3px; }


.app-mobile-mode .turn-actions { margin: 0 0 3px; gap: 4px; flex-wrap: nowrap; }
.app-mobile-mode .icon-button { width: 34px; height: 34px; padding: 6px; border-radius: 7px; }
.app-mobile-mode .icon-button svg { width: var(--btn-icon-size, 20px); height: var(--btn-icon-size, 20px); }
.app-mobile-mode #selection-area { margin-top: 2px; padding: 7px 5px 5px; display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "dice" "info"; gap: 3px; border-width: 1px; border-radius: 6px; }
.app-mobile-mode #selection-area[hidden] { display: none !important; }
.app-mobile-mode #dice-selection-container { grid-area: dice; margin: 0; padding: 3px 4px 4px; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: visible; }
.app-mobile-mode .dice-title { display: none; }
.app-mobile-mode .dice-group { gap: 3px; flex-wrap: nowrap; }
.app-mobile-mode .dice-item { width: 31px; height: 31px; padding: 3px; gap: 1px; border-radius: 6px; border-width: 1px; }
.app-mobile-mode .dice-item.selected { border-width: 2px; }



.app-mobile-mode #board-rows,
.app-mobile-mode .opponent-board-rows { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) !important; padding: 0 3px 3px; }
.app-mobile-mode .board-row { min-height: 0; height: 100%; }
.app-mobile-mode .row-number { width: 20px; flex-basis: 20px; font-size: .62rem; }
.app-mobile-mode .row-content { padding: 1px 2px; gap: 3px; }
.app-mobile-mode .bead-container { min-height: 0; gap: 1px; }
.app-mobile-mode .bead { width: clamp(13px, 4.4vw, 18px); height: clamp(13px, 4.4vw, 18px); flex-basis: clamp(13px, 4.4vw, 18px); border-width: 1px; }
.app-mobile-mode .bead.pending-bead { box-shadow: 0 0 0 2px var(--orange); }

.app-mobile-mode .opponent-heading { flex: 0 0 auto; }
.app-mobile-mode .opponent-tabs { flex: 0 0 auto; flex-direction: column; gap: 5px; padding: 0 0 5px; overflow: visible; }
.app-mobile-mode .opponent-tab { width: 100%; min-width: 0; flex: 0 0 auto; padding: 6px 7px; border-radius: 7px; }
.app-mobile-mode .opponent-tab-top { margin-bottom: 4px; font-size: .72rem; }
.app-mobile-mode .opponent-progress { gap: 2px; }
.app-mobile-mode .opponent-progress-bead { width: 20px; height: 20px; flex-basis: 20px; font-size: 10px; }
.app-mobile-mode .opponent-view { flex: 1 1 auto; min-height: 0; }
.app-mobile-mode .opponent-view-card { height: 100%; display: flex; flex-direction: column; }
.app-mobile-mode .opponent-view-head { flex: 0 0 auto; padding: 3px 6px; font-size: .68rem; }
.app-mobile-mode .opponent-dice-live { flex: 0 0 auto; min-height: 34px; padding: 3px 5px; }
.app-mobile-mode .opponent-dice-title { display: none; }
.app-mobile-mode .opponent-die { width: 30px; height: 30px; padding: 2px; }
.app-mobile-mode .opponent-selection-text { font-size: .6rem; margin-top: 1px; }

/* Lobby bleibt auf mobilen Geräten scrollbar, nur das laufende Spiel ist App-artig fixiert. */
.app-mobile-mode body:not(.in-game) { padding: 8px; }
.app-mobile-mode .lobby-panel { margin: 8px auto 0; padding: 15px 12px; }
.app-mobile-mode .lobby-actions,
.app-mobile-mode .online-game-actions { flex-direction: column; }
.app-mobile-mode .lobby-actions input, .app-mobile-mode .lobby-actions button { width: 100%; max-width: none; }
.app-mobile-mode .game-card { grid-template-columns: 1fr; }
.app-mobile-mode .game-card-actions { justify-content: stretch; }
.app-mobile-mode .game-card-actions button { flex: 1; }
.app-mobile-mode .lobby-filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-mobile-mode .lobby-filter-button { width: 100%; min-width: 0; }
.app-mobile-mode .lobby-more-wrap { align-items: stretch; }
.app-mobile-mode .lobby-more-wrap button { width: 100%; }
.app-mobile-mode .lobby-result-count { width: 100%; text-align: center; }
.app-mobile-mode .seat-row, .app-mobile-mode .seat-picker-head, .app-mobile-mode .modal-head { flex-direction: column; align-items: stretch; }

@media (max-width: 1100px) {
  html:not(.app-mobile-mode) #game-area { grid-template-columns: minmax(310px,360px) minmax(240px,300px) minmax(310px,360px); justify-content:center; }
  html:not(.app-mobile-mode) .bead { width: 21px; height: 21px; flex-basis: 21px; }
}


/* V1.1: Spieler nach 5-Minuten-Abwesenheit */
.opponent-away-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: .08rem .32rem;
  border-radius: 999px;
  background: #e7eaec;
  color: #6b7379;
  font-weight: 800;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .01em;
  text-align: left;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
}
.opponent-tab.offline .opponent-progress { width: 100%; }
.opponent-tab.offline .opponent-progress > .opponent-away-label {
  grid-column: 1 / -1;
  justify-self: start;
  align-self: center;
}


/* V1.1 Tablet-/Telefon-Layoutkorrektur ------------------------------------ */
/* Tablets dürfen nicht in einem zu kleinen 100dvh-Wrapper abgeschnitten
   werden. Die App-Ansicht bleibt erhalten, kann bei knapper Höhe aber sauber
   nach unten wachsen. */
.app-tablet-mode body.in-game {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}
.app-tablet-mode #game-container {
  height: auto;
  min-height: calc(100dvh - 10px);
}
.app-tablet-mode #game-area {
  flex: 0 0 auto;
  min-height: 0;
  grid-template-rows: auto auto;
}
.app-tablet-mode #main-player-board,
.app-tablet-mode #opponent-boards {
  height: auto;
  min-height: 390px;
}
.app-tablet-mode #board-rows,
.app-tablet-mode .opponent-board-rows {
  flex: 0 0 auto;
  grid-template-rows: minmax(0, 1fr) !important;
}

/* Auf Tablets liegen die weiterhin vertikal gestapelten Gegner-Tabs links
   neben dem großen Gegnerbrett. Dadurch nehmen mehrere Tabs dem Brett keine
   Höhe mehr weg. */
.app-tablet-mode #opponent-boards {
  display: none;
  grid-template-columns: minmax(285px, 34%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "opptitle opptitle"
    "opptabs oppview";
  gap: 7px 10px;
  align-items: start;
}
.app-tablet-mode #game-container.mobile-show-opponent #opponent-boards { display: grid; }
.app-tablet-mode .opponent-heading { grid-area: opptitle; }
.app-tablet-mode .opponent-tabs {
  grid-area: opptabs;
  align-self: start;
  padding: 0;
}
.app-tablet-mode .opponent-view {
  grid-area: oppview;
  min-width: 0;
  min-height: 390px;
}
.app-tablet-mode .opponent-view-card { height: auto; min-height: 390px; }
.app-tablet-mode .opponent-progress-bead {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
  font-size: 10px;
}

/* Auf dem Telefon ist jetzt sichtbar mehr Platz in den Bedienelementen und
   Tropfen genutzt, ohne die Brettbreite zu sprengen. */
.app-phone-mode .icon-button {
  width: 42px;
  height: 42px;
  padding: 7px;
  border-radius: 9px;
}
.app-phone-mode .icon-button svg { width: var(--btn-icon-size, 25px); height: var(--btn-icon-size, 25px); }
.app-phone-mode .dice-item { width: 38px; height: 38px; padding: 4px; }
.app-phone-mode .opponent-die { width: 37.2px; height: 37.2px; }
.app-phone-mode .bead {
  width: clamp(15px, 4.8vw, 20px);
  height: clamp(15px, 4.8vw, 20px);
  flex-basis: clamp(15px, 4.8vw, 20px);
}
.app-phone-mode .opponent-progress-bead {
  width: var(--btn-icon-size, 22px);
  height: var(--btn-icon-size, 22px);
  flex-basis: 22px;
  font-size: 11px;
}

/* Desktop-Website auf kleineren Tablets: echte Desktop-Anordnung beibehalten,
   aber der Gegnerbereich muss breit genug für 12 Fortschrittstropfen sein. */
@media (min-width: 900px) and (max-width: 1100px) {
  html:not(.app-mobile-mode) #game-area {
    grid-template-columns: minmax(325px, 1fr) minmax(220px, .72fr) minmax(325px, 1fr);
    gap: 10px;
    width: 100%;
  }
  html:not(.app-mobile-mode) .player-board,
  html:not(.app-mobile-mode) #control-panel,
  html:not(.app-mobile-mode) .opponents-panel { padding: 10px; }
  html:not(.app-mobile-mode) .opponent-progress-bead {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    font-size: 10px;
  }
  html:not(.app-mobile-mode) .opponent-tab { padding-left: 8px; padding-right: 8px; }
}

/* V1.1: Helleres Grundschema, Dunkelmodus und angehefteter Spielerkopf -------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --page-bg: #a7a8a9;
  --surface: #e3e3e3;
  --surface-soft: #d7d7d7;
  --ink: #252a2f;
  --muted: #626970;
  --line: #bfc3c6;
  --input-bg: #e3e3e3;
  --dice-bg: var(--die-face);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #000000;
  --surface: #202224;
  --surface-soft: #2a2d30;
  --ink: #e3e3e3;
  --muted: #b9bec2;
  --line: #464a4e;
  --input-bg: #2a2d30;
  --dice-bg: var(--die-face);
  --shadow: 0 7px 22px rgba(0,0,0,.42);
}

body { background: var(--page-bg); color: var(--ink); }
input { background: var(--input-bg); color: var(--ink); border-color: var(--line); }
.panel { background: var(--surface); border-color: var(--line); }
.game-card{ background: var(--surface-soft); }
.rules-dialog,
.seat-picker-inner,
.game-end-dialog { background: var(--surface); color: var(--ink); }
.seat-row { background: var(--surface-soft); }
.dice-item { background: linear-gradient(to right, var(--die-highlight) 0 5%, transparent 6% 93%, var(--die-shade) 94% 100%), linear-gradient(to bottom, var(--die-highlight) 0 5%, transparent 6% 92%, var(--die-shade) 93% 100%), var(--dice-bg); }
.opponent-tab { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
.opponent-tab:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-soft) 82%, var(--ink) 18%); }
.opponent-tab.active { background: var(--surface); border-color: var(--line); border-bottom-color: var(--green); }
.opponent-view-card { background: var(--surface-soft); border-color: var(--line); }
.opponent-dice-live { background: var(--surface); border-color: var(--line); }
.spectator-list { background: color-mix(in srgb, var(--surface-soft) 88%, #8fc7df 12%); }
.spectator-chip { background: var(--surface); border-color: var(--line); color: var(--ink); }

/* Weißflächen werden im Hellmodus bewusst zu #e3e3e3. */
:root[data-theme="light"] #selection-area { background: #e3e3e3; }
:root[data-theme="light"] .rules-dialog,
:root[data-theme="light"] .seat-picker-inner,
:root[data-theme="light"] .spectator-chip,
:root[data-theme="light"] .opponent-dice-live,
:root[data-theme="light"] .opponent-tab.active { background: #e3e3e3; }

/* Im Dunkelmodus bleiben helle Spielobjekte wie Würfel/weiße Tropfen hell,
   während Text und Bedienelemente auf dunklen Flächen gut lesbar sind. */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] .game-card h3, :root[data-theme="dark"] .game-player-names, :root[data-theme="dark"] .dice-title{ color: #e3e3e3; }
:root[data-theme="dark"] #selection-area { background: #242a27; }
:root[data-theme="dark"] .board-row { border-bottom-color: #44484c; }

:root[data-theme="dark"] .resume-box { background: #343d37; border-color: #667269; }
:root[data-theme="dark"] .badge.waiting { background: #29432d; color: #b9e8be; }
:root[data-theme="dark"] .badge.running { background: #293746; color: #bdd9f6; }
:root[data-theme="dark"] .badge.paused { background: #3a433d; color: #f1d28c; }
:root[data-theme="dark"] .opponent-away-label { background: #34383b; color: #c5c9cc; }
:root[data-theme="dark"] .app-mobile-mode .mobile-board-switch .active { background: #28402c; color: #c2e9c7; }

/* Spielerinfos bleiben beim Scrollen sichtbar. */
.game-header {
  position: sticky;
  top: 0;
  z-index: 1200;
}

/* Globale Schalter oben rechts. */
.top-utility-buttons {
  position: fixed;
  z-index: 1700;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  gap: 7px;
}
.utility-button {
  position: static;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: #4f5962;
  color: #e3e3e3;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.utility-button:hover:not(:disabled) { background: #3f474e; }
.help-button { position: static; top: auto; right: auto; }
.legal-button { position: static; top: auto; right: auto; font-size: 1rem; }
.theme-toggle-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dice-scheme-button { position: relative; }
.dice-scheme-button svg {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.dice-scheme-button svg circle { fill: currentColor; stroke: none; }
.dice-scheme-button svg rect { fill: var(--die-face); stroke: var(--die-edge); }
.dice-scheme-button svg circle { fill: var(--die-pip); }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }

.app-mobile-mode body.in-game .top-utility-buttons {
  top: max(5px, env(safe-area-inset-top));
  right: max(5px, env(safe-area-inset-right));
  gap: 5px;
}
.app-mobile-mode body.in-game .utility-button {
  width: 29px;
  height: 29px;
  font-size: .8rem;
}
.app-mobile-mode body.in-game .theme-toggle-button svg { width: 19px; height: 19px; }
.app-mobile-mode body.in-game .dice-scheme-button svg {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
}
/* Drei globale Rundbuttons benötigen im kompakten Kopf etwas mehr Freiraum. */
.app-mobile-mode .game-header { padding-right: 105px; }

/* V1.1: Korrektur – Spielerkopf dauerhaft fest und immer schwarz ---------- */
/* Der Header bleibt unabhängig vom Farbmodus schwarz. */
.game-header,
:root[data-theme="light"] .game-header,
:root[data-theme="dark"] .game-header {
  background: #30363b;
  color: #fff;
}
.game-header .game-title-heading,
.game-header #game-name-display,
.game-header .player-info,
.game-header .player-info strong,
.game-header .app-version {
  color: #fff;
}
.game-header .app-version { opacity: .72; }

/* Anders als sticky bewegt sich fixed beim Scrollen überhaupt nicht. */
.game-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1480px, calc(100% - 32px));
  z-index: 1200;
}

/* Die echte Headerhöhe wird vom Client per ResizeObserver gesetzt. */
html:not(.app-mobile-mode) #game-container:not([hidden]) {
  padding-top: 0;
}

/* In der App-Ansicht entspricht die feste Position dem kleinen Body-Rand. */
.app-mobile-mode .game-header {
  top: max(5px, env(safe-area-inset-top));
  width: calc(100% - max(10px, env(safe-area-inset-left) + env(safe-area-inset-right)));
}
.app-mobile-mode #game-container:not([hidden]) {
  padding-top: calc(var(--game-header-height, 0px) + 4px);
}


/* V1.1: Mobile Gegneransicht – viele Teilnehmer dürfen das Brett nicht abschneiden */
/* Auf Telefonen bleibt die gewünschte vertikale Tab-Liste erhalten. Die
   komplette Gegnerseite darf aber vertikal scrollen, statt den unteren Teil
   des Bretts außerhalb des fixierten App-Viewports abzuschneiden. */
.app-phone-mode #game-container.mobile-show-opponent #game-area {
  min-height: 0;
  overflow: hidden;
}
.app-phone-mode #game-container.mobile-show-opponent #opponent-boards {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  align-content: start;
}
.app-phone-mode #game-container.mobile-show-opponent .opponent-tabs {
  flex: 0 0 auto;
}
.app-phone-mode #game-container.mobile-show-opponent .opponent-view {
  flex: 0 0 auto;
  min-height: 0;
}
.app-phone-mode #game-container.mobile-show-opponent .opponent-view-card {
  height: auto;
  min-height: 470px;
}
.app-phone-mode #game-container.mobile-show-opponent .opponent-board-rows {
  flex: 0 0 auto;
  grid-template-rows: minmax(0, 1fr) !important;
}

/* Tablets: Tabs stehen neben dem Brett und erhalten ihren eigenen Scrollbereich.
   Dadurch wächst die Tab-Spalte bei bis zu 5 Spielern nicht mehr nach unten und
   drückt das eigentliche Gegnerbrett nicht aus dem sichtbaren Bereich. */
.app-tablet-mode #game-container.mobile-show-opponent #opponent-boards {
  overflow: visible;
}
.app-tablet-mode #game-container.mobile-show-opponent .opponent-tabs {
  max-height: min(72dvh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 3px;
}
.app-tablet-mode #game-container.mobile-show-opponent .opponent-view-card {
  min-height: 520px;
}
.app-tablet-mode #game-container.mobile-show-opponent .opponent-board-rows {
  grid-template-rows: minmax(0, 1fr) !important;
}

/* Sehr flache Tablet-Querformate dürfen notfalls die gesamte Spielseite
   scrollen. So bleiben immer alle 12 Reihen erreichbar. */
@media (max-height: 650px) {
  .app-tablet-mode body.in-game {
    overflow-y: auto;
  }
  .app-tablet-mode #game-container {
    min-height: 100dvh;
  }
}

/* V1.1 Smartphone-Feinschliff --------------------------------------------- */
/* Die Gegnerseite darf bei vielen Spielern wirklich nach unten wachsen.
   Das behebt den Fall, dass Tabs den eigentlichen Gegner-Spielplan unter den
   fixierten App-Viewport drücken und trotzdem kein Scrollbereich entsteht. */
.app-phone-mode body.in-game.mobile-opponent-page {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.app-phone-mode body.in-game.mobile-opponent-page #game-container {
  height: auto;
  min-height: 100dvh;
}
.app-phone-mode body.in-game.mobile-opponent-page #game-area {
  flex: 0 0 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  overflow: visible;
}
.app-phone-mode body.in-game.mobile-opponent-page #opponent-boards {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.app-phone-mode body.in-game.mobile-opponent-page .opponent-tabs {
  overflow: visible;
}
.app-phone-mode body.in-game.mobile-opponent-page .opponent-view,
.app-phone-mode body.in-game.mobile-opponent-page .opponent-view-card {
  height: auto;
  min-height: 0;
}
.app-phone-mode body.in-game.mobile-opponent-page .opponent-board-rows {
  flex: 0 0 auto;
  grid-template-rows: minmax(0, 1fr) !important;
}

/* Eigenes Smartphone-Brett etwas größer, ohne Tablet/Desktop zu verändern. */
.app-phone-mode #main-player-board .bead,
.app-phone-mode #opponent-boards .bead {
  width: clamp(17px, 5.4vw, 22px);
  height: clamp(17px, 5.4vw, 22px);
  flex-basis: clamp(17px, 5.4vw, 22px);
}
.app-phone-mode #main-player-board .board-row {
  min-height: 0;
}

/* Gleiche Button-Größe, aber mehr Luft zwischen den vier Aktionen. */
.app-phone-mode .turn-actions.icon-actions {
  width: 100%;
  justify-content: space-around;
  gap: 10px;
  padding-inline: 4px;
}


/* V1.1 – persistente Vorstart-Sessions / Spielerpflege / Zuschauer-Promotion */
.seat-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.seat-row-actions button { margin: 0; }
.spectator-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spectator-name {
  min-width: 0;
  white-space: nowrap;
}
.spectator-name-button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.spectator-name-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}
.spectator-hand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
}
body.spectator-mode #my-name.spectator-hand-toggle {
  cursor: pointer;
}
body.spectator-mode #my-name.spectator-hand-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}
.spectator-promote-button {
  padding: 3px 7px;
  min-height: 0;
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1.15;
  background: var(--green);
}
.spectator-promote-button:hover:not(:disabled) { background: var(--green-dark); }
.app-mobile-mode .seat-row-actions { width: 100%; justify-content: stretch; }
.app-mobile-mode .seat-row-actions button { flex: 1 1 140px; }

/* V1.1 Smartphone: Gegnerseite vollständig scrollbar ----------------------
   WICHTIG: Auf der Gegnerseite gibt es absichtlich KEINE feste 100dvh-Höhe.
   Die Seite darf so hoch werden wie Tabs + Gegnerbrett tatsächlich sind.
   Dadurch kann der Browser nach dem Einklappen seiner Adressleiste normal
   weiter bis unter die letzte Brettreihe scrollen. */
html.app-phone-mode:has(body.in-game.mobile-opponent-page) {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.app-phone-mode body.in-game.mobile-opponent-page {
  height: auto !important;
  min-height: 100svh;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-phone-mode body.in-game.mobile-opponent-page #game-container {
  height: auto !important;
  min-height: 100svh;
  overflow: visible;
  padding-bottom: max(90px, calc(env(safe-area-inset-bottom) + 70px));
}
.app-phone-mode body.in-game.mobile-opponent-page #game-area {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "controls" "board";
  overflow: visible !important;
}
.app-phone-mode body.in-game.mobile-opponent-page #opponent-boards {
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-y;
}
.app-phone-mode body.in-game.mobile-opponent-page .opponent-tabs,
.app-phone-mode body.in-game.mobile-opponent-page .opponent-view,
.app-phone-mode body.in-game.mobile-opponent-page .opponent-view-card {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
}
.app-phone-mode body.in-game.mobile-opponent-page .opponent-board-rows {
  flex: 0 0 auto;
  height: auto;
  grid-template-rows: minmax(0, 1fr) !important;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}

/* Smartphone-Spielbrett-Tropfen bleiben ca. 20 % größer. */
.app-phone-mode #main-player-board .bead,
.app-phone-mode #opponent-boards .bead {
  width: clamp(20px, 6.5vw, 26px);
  height: clamp(20px, 6.5vw, 26px);
  flex-basis: clamp(20px, 6.5vw, 26px);
}
.app-phone-mode #main-player-board .row-number,
.app-phone-mode #opponent-boards .row-number {
  width: 18px;
  flex-basis: 18px;
}
.app-phone-mode #main-player-board .row-content,
.app-phone-mode #opponent-boards .row-content {
  padding-left: 1px;
  padding-right: 1px;
  gap: 2px;
}
.app-phone-mode #main-player-board .bead-container,
.app-phone-mode #opponent-boards .bead-container {
  gap: 1px;
}

/* V1.1: Spiel zurücksetzen / Host übertragen */
#host-reset-button,
#real-reset-button { background: linear-gradient(180deg, #e89b19 0%, #c87f0f 100%); }
#host-reset-button:hover:not(:disabled),
#real-reset-button:hover:not(:disabled) { background: linear-gradient(180deg, #f3b84c 0%, #e89b19 100%); }
.host-transfer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 7px;
  margin-left: auto;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.host-transfer-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.host-transfer-button:hover { background: var(--green-dark); }
.host-transfer-button.disabled { opacity: .55; pointer-events: none; }
.app-phone-mode .host-transfer-button { padding: 2px 6px; font-size: .62rem; }
.host-remove-player-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-left: auto;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.host-remove-player-button:hover { background: #aa3939; }
.host-remove-player-button.disabled { opacity: .5; pointer-events: none; }

/* V1.2 Smartphone-Kopf mit einklappbarem Spielmenü ----------------------- */
.app-phone-mode .game-header {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title menu"
    "name player";
  column-gap: 7px;
  row-gap: 3px;
  align-items: center;
}
.app-phone-mode .game-header .game-title-heading {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-phone-mode .game-name-row {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
}
.app-phone-mode .player-info {
  grid-area: player;
  min-width: 0;
  max-width: 48vw;
  justify-content: flex-end;
  overflow: hidden;
}
.app-phone-mode .player-info > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-phone-mode .mobile-menu-button {
  grid-area: menu;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 5px;
  border-radius: 6px;
  background: #4f5962;
  color: #fff;
  box-shadow: none;
}
.app-phone-mode .mobile-menu-button:hover:not(:disabled),
.app-phone-mode .game-header.mobile-menu-open .mobile-menu-button {
  background: #68737d;
  transform: none;
}
.app-phone-mode .mobile-menu-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.app-phone-mode .header-actions {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  display: none;
  width: min(260px, calc(100vw - 10px));
  padding: 9px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 7px;
  border: 1px solid #596169;
  border-radius: 9px;
  background: #30363b;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42);
  overflow-x: hidden;
}
.app-phone-mode .game-header.mobile-menu-open .header-actions { display: flex; }
.app-phone-mode .header-actions > button:not([hidden]) {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: .86rem;
  text-align: left;
}

/* V1.3 – lokales Spielbrett für ein reales Spiel ------------------------- */
button.real-game-launch {
  background: #728078;
}
button.real-game-launch:hover:not(:disabled) {
  background: #56615a;
}

/* ========================================================================
   REALMODUS – EIGENSTAENDIGES ONLINE-DESIGN
   Optisch dieselbe Geometrie wie der Online-Modus, aber ausschließlich
   Realmodus-Klassen. Online-Selektoren und Socket-/Mehrspielerlayout bleiben
   unberührt. Im Querformat bleiben die Online-Spaltenproportionen erhalten;
   Gegnerbrett und Mitspieler-Tabs sind schlicht nicht vorhanden.
   ======================================================================== */
body.real-game-mode {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.real-game-mode .app-shell {
  width: min(1660px, 100%) !important;
  height: calc(100dvh - 32px) !important;
  min-height: 0 !important;
}
html body.real-game-mode #real-game-container.real-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Header: dieselbe visuelle Anordnung wie online. */
html body.real-game-mode #real-game-container.real-layout > .real-layout-header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  grid-template-areas: "brand name right" !important;
  grid-template-rows: minmax(0,1fr) !important;
  align-items: center !important;
  column-gap: clamp(6px,1vw,16px) !important;
  row-gap: 0 !important;
  width: 100% !important;
  height: clamp(50px,7dvh,62px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 5px clamp(7px,.8vw,12px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 1200 !important;
  color: var(--m84-text) !important;
  background: var(--m84-main-panel-surface) !important;
  border: 1px solid #596a60 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
#real-game-container.real-layout .real-layout-brand {
  grid-area: brand !important;
  display: flex !important;
  align-items: center !important;
  justify-self: start !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: visible !important;
}
#real-game-container.real-layout .real-layout-logo {
  display: block !important;
  width: auto !important;
  height: min(92%,62px) !important;
  max-width: min(250px,30vw) !important;
  object-fit: contain !important;
  flex: 0 1 auto !important;
}
#real-game-container.real-layout .real-layout-logo-drop {
  display: none !important;
}
#real-game-container.real-layout .real-layout-game-name {
  grid-area: name !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #eef4f0 !important;
  font-size: clamp(.82rem,1.25vw,1.22rem) !important;
  white-space: nowrap !important;
}
#real-game-container.real-layout .real-layout-header-right {
  grid-area: right !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: stretch !important;
  gap: clamp(4px,.55vw,8px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
#real-game-container.real-layout .real-layout-player-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(4px,.45vw,7px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(.76rem,1vw,1rem) !important;
  white-space: nowrap !important;
}
#real-game-container.real-layout .real-layout-player-info > span:first-child { min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#real-game-container.real-layout .real-score-drop {
  display:inline-grid !important;
  place-items:center !important;
  width:38px !important;
  height:53px !important;
  padding:8px 3px 0 !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
  color:#fff !important;
  background-color:#7719e8 !important;
  background-image:
    radial-gradient(circle at 54% 51%, rgba(255,255,255,.15) 0 4%, rgba(255,255,255,.08) 8%, transparent 17%),
    radial-gradient(ellipse at 50% 23%, rgba(255,255,255,.26) 0 13%, rgba(255,255,255,.09) 22%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.10) 0 7%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.16) 14%, rgba(255,255,255,.06) 32%, rgba(255,255,255,.025) 50%, rgba(0,0,0,.04) 72%, rgba(0,0,0,.18) 100%) !important;
  border:0 !important;
  border-radius:50% 50% 56% 56% / 34% 34% 68% 68% !important;
  clip-path:none !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size:100% 100% !important;
  -webkit-mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size:100% 100% !important;
  mask-repeat:no-repeat !important;
  mask-position:center !important;
  font-size:.92rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.56),
    inset 0 13px 12px rgba(255,255,255,.06),
    inset -3px -5px 7px rgba(0,0,0,.20),
    inset 0 -2px 6px rgba(0,0,0,.10),
    0 2px 5px rgba(0,0,0,.32) !important;
  filter:saturate(1.10) contrast(1.04) brightness(1.06) drop-shadow(0 1px 1.6px rgba(0,0,0,.20)) !important;
}#real-game-container.real-layout .real-layout-menu-button {
  display: inline-flex !important;
  position: static !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(32px,4.4dvh,38px) !important;
  min-width: clamp(32px,4.4dvh,38px) !important;
  height: clamp(32px,4.4dvh,38px) !important;
  min-height: clamp(32px,4.4dvh,38px) !important;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#5c6760 0%,#3f4943 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 2px 5px rgba(0,0,0,.25) !important;
  transform: none !important;
}
#real-game-container.real-layout .real-layout-menu-button svg {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: #f4f7f5 !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}
#real-game-container.real-layout > .real-layout-header > .real-layout-menu { display: none !important; }
#real-game-container.real-layout > .real-layout-header.mobile-menu-open > .real-layout-menu {
  display: flex !important;
  position: absolute !important;
  top: calc(100% + 5px) !important;
  right: 0 !important;
  width: min(285px, calc(100vw - 12px)) !important;
  max-height: min(72dvh, 520px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 9px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  z-index: 1500 !important;
  color: var(--m84-text) !important;
  background: var(--m84-main-panel-surface) !important;
  border: 1px solid #596a60 !important;
  border-radius: 9px !important;
  box-shadow: var(--shadow) !important;
}
#real-game-container.real-layout .real-layout-menu > .top-utility-buttons {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  margin: 0 0 2px !important;
}
#real-game-container.real-layout .real-menu-version {
  display: block !important;
  order: 999 !important;
  width: 100% !important;
  margin-top: 3px !important;
  padding: 7px 3px 2px !important;
  border-top: 1px solid rgba(220,232,224,.22) !important;
  text-align: right !important;
  font-size: .70rem !important;
  color: #c7cfca !important;
}

/* Querformat: nur die beiden im Realmodus vorhandenen Online-Spalten.
   Das Verhältnis entspricht Online-Brett : Online-Steuerung (1.08 : .84).
   Die Zweiergruppe ist gemeinsam im verfügbaren Bereich zentriert. */
html body.real-game-mode #real-game-container.real-layout > .real-layout-area {
  display: grid !important;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.84fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
  grid-template-areas: "board controls" !important;
  align-items: stretch !important;
  width: 64% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 10px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}
#real-game-container.real-layout #real-main-player-board.real-layout-board {
  grid-area: board !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  color: var(--m84-text) !important;
  background: var(--m84-main-panel-surface) !important;
  border: 1px solid #596a60 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#real-game-container.real-layout .real-board-heading {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  min-height: 27px !important;
  margin: 0 0 4px !important;
  padding: 2px 4px !important;
  color: #cbd2ce !important;
  text-align: left !important;
  font-size: clamp(.72rem,1.05vw,1rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

/* Steuerblock = Online-Mittelspalte, ohne Tabs darunter. */
#real-game-container.real-layout #real-control-panel.real-layout-controls {
  grid-area: controls !important;
  align-self: start !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: var(--real-button-size,34px) var(--real-dice-row-size,var(--real-die-size,30px)) !important;
  grid-template-areas: "actions" "dice" !important;
  align-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: var(--real-control-panel-height,auto) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: var(--real-control-row-gap,3px) !important;
  margin: 0 !important;
  padding: var(--real-control-panel-pad,4px) !important;
  color: var(--m84-text) !important;
  background: var(--m84-main-panel-surface) !important;
  border: 1px solid #596a60 !important;
  border-radius: var(--real-control-radius,6px) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#real-game-container.real-layout #real-control-panel.real-layout-controls.real-turn-blocked {
  outline: 3px solid #d33a3a !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 1px rgba(211,58,58,.24), 0 0 .7rem rgba(211,58,58,.3) !important;
}
#real-game-container.real-layout #real-turn-actions.real-layout-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: repeat(4,var(--real-button-size,34px)) !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  gap: 0 !important;
  margin: 0 !important;
}
#real-game-container.real-layout .real-icon-button {
  --btn-shell-top: #606870 !important;
  --btn-shell-bottom: #2b3035 !important;
  --btn-shell-edge: #15191d !important;
  --btn-face-hi: #ffffff !important;
  --btn-face-mid: #d8d8d8 !important;
  --btn-face-low: #b4b4b4 !important;
  --btn-face-border: rgba(0,0,0,.28) !important;
  --btn-glow: rgba(255,255,255,.16) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--real-button-size,34px) !important;
  min-width: var(--real-button-size,34px) !important;
  height: var(--real-button-size,34px) !important;
  min-height: var(--real-button-size,34px) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: calc(var(--real-button-size,34px) * .10) !important;
  color: #fff !important;
  border: var(--btn-shell-border, 1px) solid var(--btn-shell-edge) !important;
  border-radius: var(--real-control-radius,5px) !important;
  background: linear-gradient(180deg, var(--btn-shell-top) 0%, #464c52 18%, #353a40 48%, var(--btn-shell-bottom) 100%) !important;
  box-shadow:
    0 0 var(--btn-glow-blur, 11px) var(--btn-glow),
    0 var(--btn-shadow-y, 6px) var(--btn-shadow-blur, 11px) rgba(0,0,0,.34),
    0 2px 0 rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.3) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform .12s ease, filter .15s ease, box-shadow .16s ease !important;
}
#real-game-container.real-layout .real-icon-button::before {
  content: "" !important;
  position: absolute !important;
  left: var(--btn-face-inset, 7.5%) !important;
  right: var(--btn-face-inset, 7.5%) !important;
  top: var(--btn-face-inset, 7.5%) !important;
  bottom: var(--btn-face-inset, 7.5%) !important;
  border-radius: var(--btn-face-radius, 4px) !important;
  background: linear-gradient(180deg, var(--btn-face-hi) 0%, var(--btn-face-mid) 50%, var(--btn-face-low) 100%) !important;
  border: var(--btn-face-border-width, 1px) solid var(--btn-face-border) !important;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.35), inset 0 -4px 6px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.05) !important;
  z-index: 0 !important;
}
#real-game-container.real-layout .real-icon-button::after {
  content: "" !important;
  position: absolute !important;
  left: 18.5% !important;
  right: 18.5% !important;
  top: 18.5% !important;
  height: 28% !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.18) 58%, rgba(255,255,255,0) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#real-game-container.real-layout .real-icon-button svg { position: relative !important; z-index: 2 !important; }
#real-game-container.real-layout .real-icon-button svg {
  width: var(--btn-icon-size, 25px) !important;
  height: var(--btn-icon-size, 25px) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)) !important;
}
#real-game-container.real-layout #real-roll-button svg circle { fill: currentColor !important; stroke: none !important; }
#real-game-container.real-layout #real-roll-button svg rect { fill: none !important; }
#real-game-container.real-layout .real-roll-button {
  --btn-face-hi: #a1e3ff !important;
  --btn-face-mid: #5ab8ee !important;
  --btn-face-low: #2d86bb !important;
  --btn-face-border: #245f82 !important;
  --btn-glow: rgba(72,184,238,.48) !important;
}
#real-game-container.real-layout .real-mode-button {
  --btn-face-hi: #cf9bff !important;
  --btn-face-mid: #984bf6 !important;
  --btn-face-low: #6821c8 !important;
  --btn-face-border: #5a1ca9 !important;
  --btn-glow: rgba(152,75,246,.52) !important;
}
#real-game-container.real-layout .real-mode-button.mode-single {
  transform: translateY(2px) !important;
  box-shadow: 0 0 7px rgba(152,75,246,.28), 0 1px 3px rgba(0,0,0,.34), inset 0 3px 5px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.08) !important;
  filter: brightness(.90) saturate(1.06) !important;
}
#real-game-container.real-layout .real-mode-button.mode-single::before {
  left: var(--btn-face-inset, 7.5%) !important;
  right: var(--btn-face-inset, 7.5%) !important;
  top: 15% !important;
  bottom: 6.5% !important;
  background: linear-gradient(180deg, #8d3edc 0%, #7428cf 48%, #5b1cae 100%) !important;
  box-shadow: inset 0 4px 7px rgba(0,0,0,.34), inset 0 1px 1px rgba(255,255,255,.09), 0 0 0 1px rgba(0,0,0,.16) !important;
}
#real-game-container.real-layout .real-mode-button.mode-single::after { top: 23% !important; opacity: .26 !important; }
#real-game-container.real-layout .real-mode-button.mode-single:active:not(:disabled) {
  transform: translateY(2px) !important;
}
#real-game-container.real-layout .real-confirm-button {
  --btn-face-hi: #5ae989 !important;
  --btn-face-mid: #27b351 !important;
  --btn-face-low: #1b7a37 !important;
  --btn-face-border: #18662f !important;
  --btn-glow: rgba(39,179,81,.50) !important;
}
#real-game-container.real-layout .real-end-turn-button {
  --btn-face-hi: #f1967d !important;
  --btn-face-mid: #cb6045 !important;
  --btn-face-low: #8d3726 !important;
  --btn-face-border: #742e20 !important;
  --btn-glow: rgba(203,96,69,.48) !important;
}
#real-game-container.real-layout .real-icon-button:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.18) !important;
}
#real-game-container.real-layout .real-icon-button:active:not(:disabled)::before {
  top: 12.5% !important;
  bottom: 8% !important;
}
#real-game-container.real-layout .real-icon-button:active:not(:disabled)::after { top: 21% !important; }
#real-game-container.real-layout .real-icon-button:disabled {
  filter: grayscale(.24) brightness(.84) !important;
  opacity: .8 !important;
  box-shadow:
    0 5px 8px rgba(0,0,0,.24),
    0 2px 0 rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.24) !important;
}


#real-game-container.real-layout #real-selection-area.real-layout-selection {
  grid-area: dice !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 3px !important;
  color: #edf3ee !important;
  border: 1px solid #303a34 !important;
  border-radius: var(--real-control-radius,5px) !important;
  background: var(--m84-selection-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow: visible !important;
}
#real-game-container.real-layout #real-dice-set.real-layout-dice-set {
  display: grid !important;
  grid-template-columns: repeat(6,var(--real-die-size,30px)) !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
#real-game-container.real-layout .real-dice-group { display: contents !important; }
#real-game-container.real-layout .real-dice-item {
  width: var(--real-die-size,30px) !important;
  min-width: var(--real-die-size,30px) !important;
  height: var(--real-die-size,30px) !important;
  min-height: var(--real-die-size,30px) !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  grid-template-rows: repeat(3,1fr) !important;
  gap: 2px !important;
  padding: calc(var(--real-die-size,30px) * .07) !important;
  align-self: center !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1px solid var(--die-edge) !important;
  border-radius: var(--real-control-radius,5px) !important;
  background:
    linear-gradient(to right,var(--die-highlight) 0 5%,transparent 6% 93%,var(--die-shade) 94% 100%),
    linear-gradient(to bottom,var(--die-highlight) 0 5%,transparent 6% 92%,var(--die-shade) 93% 100%),
    var(--dice-bg) !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.42),inset -1px -1px 0 rgba(0,0,0,.34),2px 3px 4px rgba(0,0,0,.32) !important;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease !important;
}
#real-game-container.real-layout #real-dice-set:not(.rolling) .real-dice-item:not(.selected):hover { transform: translateY(-1px) !important; }
#real-game-container.real-layout .real-dice-item.selected {
  border-width: 2px !important;
  border-top-color: #72ff8d !important;
  border-right-color: #009b2e !important;
  border-bottom-color: #006a1f !important;
  border-left-color: #22d94f !important;
  padding: max(1px, calc(var(--real-die-size,30px) * .07 - 1px)) !important;
  box-shadow: 0 0 0 2px rgba(0,190,48,.4),0 0 8px rgba(0,180,45,.68),inset 1px 1px 0 rgba(255,255,255,.36),inset -1px -1px 0 rgba(0,0,0,.36),2px 4px 5px rgba(0,0,0,.38) !important;
  transform: none !important;
}
#real-game-container.real-layout .real-dice-item.secured:not(.selected) { filter: saturate(.62) brightness(.82) !important; opacity: .78 !important; }
#real-game-container.real-layout .real-inactive-dice-row .real-dice-item,
#real-game-container.real-layout .real-inactive-die { opacity: .52 !important; filter: grayscale(.32) !important; cursor: default !important; }
#real-game-container.real-layout #real-dice-set.rolling .real-current-dice-group .real-dice-item:not(.secured) {
  animation: m84-die-shake .34s ease-out both;
  animation-delay: calc(var(--m84-roll-index, 0) * 7ms);
  transform-origin: 50% 58%;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none !important;
}

@keyframes m84-die-shake {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  22%  { transform: translate3d(0,-1px,0) rotate(-8deg) scale(.98); }
  46%  { transform: translate3d(0,1px,0) rotate(11deg) scale(.94); }
  70%  { transform: translate3d(0,-1px,0) rotate(-7deg) scale(.97); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}

/* V1.9.5 – Chrome-first Würfelaugen: nur drei wandernde Augenpunkte.
   Keine 9-Pip-Fläche und keine Endlosschleife. Die Ebene läuft genau einmal
   synchron zum 340-ms-Würfelwurf und verschwindet danach mit pip-scramble. */
.real-dice-item.pip-scramble .pip,
.dice-item.pip-scramble .pip,
.opponent-die.pip-scramble .pip {
  opacity: 0 !important;
}
.real-dice-item.pip-scramble,
.dice-item.pip-scramble,
.opponent-die.pip-scramble {
  position: relative !important;
  isolation: isolate;
}
.real-dice-item.pip-scramble::after,
.dice-item.pip-scramble::after,
.opponent-die.pip-scramble::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 18%;
  border-radius: 20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 24%, var(--die-pip, #25282a) 0 10%, transparent 11%),
    radial-gradient(circle at 72% 46%, var(--die-pip, #25282a) 0 10%, transparent 11%),
    radial-gradient(circle at 38% 78%, var(--die-pip, #25282a) 0 10%, transparent 11%);
  opacity: .92;
  transform: translate3d(0,0,0) rotateZ(0deg);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation: m84-pip-chaos-layer .34s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes m84-pip-chaos-layer {
  0%   { opacity: .76; transform: translate3d(-3%,2%,0) rotateZ(-10deg); }
  24%  { opacity: .96; transform: translate3d(4%,-4%,0) rotateZ(26deg); }
  50%  { opacity: .82; transform: translate3d(-2%,4%,0) rotateZ(62deg); }
  76%  { opacity: .96; transform: translate3d(3%,-1%,0) rotateZ(96deg); }
  100% { opacity: .72; transform: translate3d(0,0,0) rotateZ(126deg); }
}

/* Reales Brett: vollständig eigene Klassen, aber dieselbe Geometrie und
   Oberfläche wie das Online-Brett. */
#real-game-container.real-layout #real-board-rows.real-match84-drop-board {
  display: grid !important;
  flex: 1 1 0 !important;
  grid-template-columns: repeat(12,minmax(0,1fr)) !important;
  grid-template-rows: minmax(0,1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: var(--real-fit-board-gap,clamp(1px,.28vw,4px)) !important;
  margin: 0 !important;
  padding: 5px 4px 6px !important;
  background: #3d4842 !important;
  border: 2px solid #566c5d !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(202,221,208,.18) !important;
}
#real-game-container.real-layout .real-match84-shaft {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
}
#real-game-container.real-layout .real-row-number {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 3px !important;
  color: var(--shaft-color) !important;
  text-align: center !important;
  font-size: var(--real-fit-number-size,clamp(.58rem,.82vw,.88rem)) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}
#real-game-container.real-layout .real-match84-shaft-content {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: var(--real-fit-content-gap,clamp(3px,.55dvh,7px)) !important;
  margin: 0 !important;
  padding: 0 !important;
}
#real-game-container.real-layout .real-match84-drop-stack {
  position: relative !important;
  display: grid !important;
  flex: 1 1 0 !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: repeat(7,minmax(0,1fr)) minmax(0,1.15fr) !important;
  place-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(3px,.6dvh,8px) 1px !important;
  border: 2px solid #68766d !important;
  border-radius: clamp(7px,1vw,14px) !important;
  background:
    radial-gradient(ellipse at 50% -5%,rgba(137,171,143,.18),transparent 30%),
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 17% 83%,rgba(255,255,255,.025)),
    linear-gradient(180deg,var(--m84-shaft-bg),var(--m84-shaft-bg-2)) !important;
  box-shadow: inset 4px 0 8px rgba(0,0,0,.24),inset -4px 0 8px rgba(0,0,0,.24),inset 0 2px 0 rgba(222,238,225,.08),0 3px 7px rgba(0,0,0,.24) !important;
  overflow: visible !important;
}
#real-game-container.real-layout .real-match84-drop-slot {
  box-sizing: border-box !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 1 !important;
}
#real-game-container.real-layout .real-match84-drop-slot:not(:nth-child(7))::after {
  content: "" !important;
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: 0 !important;
  height: 1px !important;
  background: rgba(151,177,157,.15) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#real-game-container.real-layout .real-match84-drop {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--real-fit-drop-w,72%) !important;
  height: var(--real-fit-drop-h,auto) !important;
  aspect-ratio: .72 / 1 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  border: 0 !important;
  border-radius: 50% 50% 56% 56% / 34% 34% 68% 68% !important;
  clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  background-image:
    radial-gradient(circle at 54% 51%, rgba(255,255,255,.15) 0 4%, rgba(255,255,255,.08) 8%, transparent 17%),
    radial-gradient(ellipse at 50% 23%, rgba(255,255,255,.26) 0 13%, rgba(255,255,255,.09) 22%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.10) 0 7%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.16) 14%, rgba(255,255,255,.06) 32%, rgba(255,255,255,.025) 50%, rgba(0,0,0,.04) 72%, rgba(0,0,0,.18) 100%) !important;
  box-shadow: inset 2px 2px 4px rgba(255,255,255,.56), inset 0 13px 12px rgba(255,255,255,.06), inset -3px -5px 7px rgba(0,0,0,.20), inset 0 -2px 6px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.32) !important;
  filter: saturate(1.10) contrast(1.04) brightness(1.06) drop-shadow(0 1px 1.6px rgba(0,0,0,.20)) !important;
  z-index: 2 !important;
}
#real-game-container.real-layout .real-match84-drop:not(.real-earned-drop-falling) {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  justify-self: auto !important;
  align-self: auto !important;
  transform: translate(-50%,-50%) !important;
}
#real-game-container.real-layout .real-match84-drop::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 29% !important;
  height: 66% !important;
  left: 12% !important;
  top: 16% !important;
  border-radius: 76% 40% 68% 44% / 42% 34% 72% 60% !important;
  background: linear-gradient(156deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.86) 15%,rgba(255,255,255,.46) 43%,rgba(255,255,255,.16) 66%,transparent 85%) !important;
  filter: blur(.34px) !important;
  transform: rotate(14deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
#real-game-container.real-layout .real-match84-drop::after {
  content: "" !important;
  position: absolute !important;
  width: 18% !important;
  height: 61% !important;
  right: 12% !important;
  top: 18% !important;
  border-radius: 38% 76% 52% 70% / 34% 46% 68% 60% !important;
  background: linear-gradient(204deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.58) 24%,rgba(255,255,255,.22) 54%,transparent 84%) !important;
  filter: blur(.34px) !important;
  transform: rotate(-12deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#real-game-container.real-layout .real-match84-drop-slot.real-pending-slot {
  z-index: 6 !important;
  filter:
    drop-shadow(0 0 1.5px var(--shaft-color))
    drop-shadow(0 0 4px var(--shaft-color))
    drop-shadow(0 0 7px color-mix(in srgb,var(--shaft-color) 78%,transparent)) !important;
}
#real-game-container.real-layout .real-match84-drop-slot.real-pending-slot::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--real-fit-drop-w,72%) !important;
  height: var(--real-fit-drop-h,auto) !important;
  transform: translate(-50%,-50%) !important;
  border-radius: 48% 48% 54% 54% / 35% 35% 66% 66% !important;
  clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  background: color-mix(in srgb,var(--shaft-color) 82%,white 18%) !important;
  opacity: .54 !important;
  filter: blur(2.2px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#real-game-container.real-layout .real-match84-drop.real-pending-bead {
  filter: saturate(1.42) brightness(1.55) contrast(1.07) !important;
  box-shadow: inset 3px 4px 5px rgba(255,255,255,.72),inset -4px -5px 7px rgba(0,0,0,.08),0 0 2px rgba(255,255,255,.30) !important;
}
#real-game-container.real-layout .real-match84-reservoir-wrap {
  display: flex !important;
  flex: 0 0 var(--real-fit-reservoir-basis,20%) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 2px !important;
  margin: 0 !important;
}
#real-game-container.real-layout .real-match84-reservoir {
  position: relative !important;
  isolation: isolate !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(83,93,87,.95) !important;
  border-top-color: rgba(83,93,87,.95) !important;
  border-radius: 2px 2px 6px 6px !important;
  background:
    radial-gradient(ellipse at 50% -5%,rgba(137,171,143,.18),transparent 30%),
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 17% 83%,rgba(255,255,255,.025)),
    linear-gradient(180deg,var(--m84-shaft-bg),var(--m84-shaft-bg-2)) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.3) !important;
  box-sizing: border-box !important;
}
#real-game-container.real-layout .real-match84-reservoir::before,
#real-game-container.real-layout .real-match84-reservoir::after {
  content: none !important;
  display: none !important;
}
#real-game-container.real-layout .real-match84-water {
  position: absolute !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  display: block;
  opacity: 1 !important;
  z-index: 1 !important;
  border-radius: 1px 1px 4px 4px !important;
  background-color: var(--shaft-color) !important;
  background-image:
    radial-gradient(ellipse at 52% 20%, rgba(255,255,255,.18) 0 12%, rgba(255,255,255,.06) 20%, transparent 38%),
    radial-gradient(ellipse at 52% 78%, rgba(255,255,255,.10) 0 6%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.11) 15%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.015) 50%, rgba(0,0,0,.05) 74%, rgba(0,0,0,.17) 100%) !important;
  box-shadow:
    inset 1px 2px 3px rgba(255,255,255,.40),
    inset -2px -4px 6px rgba(0,0,0,.18),
    inset 0 -2px 5px rgba(0,0,0,.09) !important;
  transition: height .32s ease !important;
}
#real-game-container.real-layout .real-match84-water::before {
  content: "" !important;
  position: absolute !important;
  left: -1% !important;
  right: -1% !important;
  top: -2px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--shaft-color) 82%, white 18%) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12) !important;
  opacity: 1 !important;
}
#real-game-container.real-layout .real-match84-water::after {
  content: "" !important;
  position: absolute !important;
  left: 13% !important;
  top: 12% !important;
  width: 17% !important;
  height: 62% !important;
  border-radius: 74% 38% 66% 44% / 44% 34% 70% 58% !important;
  background: linear-gradient(156deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.50) 18%, rgba(255,255,255,.22) 46%, rgba(255,255,255,.07) 66%, transparent 84%) !important;
  filter: blur(.32px) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}
#real-game-container.real-layout .real-match84-progress {
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--shaft-color) !important;
  font-size: clamp(.72rem,.88vw,1rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}
#real-game-container.real-layout .real-match84-drop-barrier {
  position: absolute !important;
  left: 9% !important;
  right: 9% !important;
  top: auto !important;
  bottom: -1px !important;
  width: auto !important;
  height: 2px !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #95a39b !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.42),0 0 2px rgba(170,194,178,.20) !important;
  pointer-events: none !important;
  z-index: 7 !important;
}
#real-game-container.real-layout .real-match84-drop-barrier.real-barrier-at-top { top: -1px !important; bottom: auto !important; }
#real-game-container.real-layout .real-match84-shaft.real-row-complete .real-match84-drop-stack {
  opacity: 1 !important;
  background: radial-gradient(ellipse at 50% -5%,rgba(137,171,143,.12),transparent 30%),linear-gradient(90deg,rgba(255,255,255,.025),transparent 17% 83%,rgba(255,255,255,.018)),linear-gradient(180deg,color-mix(in srgb,var(--m84-shaft-bg) 80%,#000 20%),color-mix(in srgb,var(--m84-shaft-bg-2) 84%,#000 16%)) !important;
}

/* Hochformat = exakt die eigene Online-Seite: Steuerung oben, Brett darunter. */
@media (orientation: portrait) {
  body.real-game-mode { padding: 0 !important; }
  body.real-game-mode .app-shell {
    width: 100% !important;
    max-width: none !important;
    height: var(--app-viewport-height,100dvh) !important;
    margin: 0 !important;
  }
  html body.real-game-mode #real-game-container.real-layout {
    gap: 4px !important;
    padding: 0 3px max(3px,env(safe-area-inset-bottom)) !important;
  }
  html body.real-game-mode #real-game-container.real-layout > .real-layout-area {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto minmax(0,1fr) !important;
    grid-template-areas: "controls" "board" !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 4px !important;
  }
  #real-game-container.real-layout #real-control-panel.real-layout-controls {
    grid-template-rows: auto auto !important;
    height: auto !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 6px !important;
  }
  #real-game-container.real-layout #real-turn-actions.real-layout-actions {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    place-items: center !important;
    gap: 4px !important;
  }
  #real-game-container.real-layout .real-icon-button {
    width: min(100%,44px) !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 5px !important;
    border-radius: 7px !important;
  }
  #real-game-container.real-layout #real-selection-area.real-layout-selection {
    height: auto !important;
    padding: 3px !important;
    border-radius: 6px !important;
  }
  #real-game-container.real-layout #real-dice-set.real-layout-dice-set {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    place-items: center !important;
    height: auto !important;
    gap: 3px !important;
  }
  #real-game-container.real-layout .real-dice-item {
    width: min(88%,43px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 !important;
    padding: 4px !important;
    border-radius: 6px !important;
  }
  #real-game-container.real-layout #real-main-player-board.real-layout-board { padding: 3px !important; }
  #real-game-container.real-layout .real-board-heading {
    min-height: 22px !important;
    margin-bottom: 2px !important;
    padding: 1px 3px !important;
    font-size: .72rem !important;
  }
}

html.app-mobile-mode:is(.app-portrait,.app-landscape) body.real-game-mode #real-game-container.real-layout > .real-layout-header {
  height: clamp(38px,7dvh,46px) !important;
  min-height: 38px !important;
  column-gap: 4px !important;
  padding: 3px 4px !important;
  border-radius: 7px !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.real-game-mode #real-game-container.real-layout .real-layout-logo {
  height: min(90%,44px) !important;
  max-width: min(146px,32vw) !important;
}
html[data-app-device="phone"][data-app-orientation="portrait"] body.real-game-mode #real-game-container.real-layout .real-layout-logo-full {
  display: none !important;
}
html[data-app-device="phone"][data-app-orientation="portrait"] body.real-game-mode #real-game-container.real-layout .real-layout-logo-drop {
  display: block !important;
  width: auto !important;
  height: min(94%,46px) !important;
  max-width: 48px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.real-game-mode #real-game-container.real-layout .real-layout-game-name {
  max-width: 30vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(.60rem,2dvh,.74rem) !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.real-game-mode #real-game-container.real-layout .real-layout-player-info {
  max-width: min(30vw,150px) !important;
  gap: 3px !important;
  font-size: clamp(.56rem,1.9dvh,.70rem) !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.real-game-mode #real-game-container.real-layout .real-score-drop {
  width: 30px !important;
  height: 42px !important;
  padding: 6px 2px 0 !important;
  font-size: .72rem !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.real-game-mode #real-game-container.real-layout .real-layout-menu-button {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 4px !important;
  border-radius: 7px !important;
}

@keyframes m84-real-3d-die-tumble {
  0% {
    transform: perspective(320px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  }
  30% {
    transform: perspective(320px) rotateX(72deg) rotateY(112deg) rotateZ(24deg) scale(.96);
  }
  62% {
    transform: perspective(320px) rotateX(158deg) rotateY(226deg) rotateZ(58deg) scale(.93);
  }
  84% {
    transform: perspective(320px) rotateX(224deg) rotateY(318deg) rotateZ(86deg) scale(.97);
  }
  100% {
    transform: perspective(320px) rotateX(270deg) rotateY(360deg) rotateZ(105deg) scale(1);
  }
}

















@media (max-width: 560px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

@media (orientation: landscape) and (max-height: 700px) {
  
  
  
  
  
  
  
  
  
  
  
}

@media (prefers-reduced-motion: reduce) {
  
  
}

/* V1.3 – 3D-Spielbrettoptik auch im Onlinespiel -------------------------- */
#board-rows,
.opponent-board-rows {
  border: 10px solid #68736c;
  border-left-width: 14px;
  border-right-width: 14px;
  border-radius: 11px;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px #bac3bd,
    inset 0 0 12px rgba(48,58,52,.24),
    0 5px 12px rgba(0, 0, 0, .2);
  overflow: hidden;
}
html:not(.app-mobile-mode) #board-rows,
html:not(.app-mobile-mode) .opponent-board-rows {
  padding: 5px 7px;
}
.board-row {
  position: relative;
  border-bottom: 0;
}
.row-content {
  position: relative;
}
.row-content::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: linear-gradient(#f2f4f5, #8d969c 42%, #525a60 56%, #cbd0d3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .38);
}
.bead-container {
  position: relative;
  z-index: 1;
}
.bead {
  position: relative;
  border-color: rgba(20, 20, 20, .7);
  box-shadow:
    inset -4px -5px 7px rgba(0, 0, 0, .3),
    inset 3px 3px 5px rgba(255, 255, 255, .38),
    1px 2px 3px rgba(0, 0, 0, .32);
}
.bead::after {
  content: "";
  position: absolute;
  width: 30%;
  height: 18%;
  left: 20%;
  top: 17%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .36);
  transform: rotate(-24deg);
}
.bead.pending-bead {
  box-shadow:
    0 0 0 3px var(--orange),
    inset -4px -5px 7px rgba(0, 0, 0, .3),
    inset 3px 3px 5px rgba(255, 255, 255, .38),
    1px 2px 3px rgba(0, 0, 0, .32);
}
@media (max-width: 700px) {
  #board-rows,
  .opponent-board-rows {
    border-width: 6px 8px;
    border-radius: 8px;
    box-shadow:
      inset 0 0 0 1px #bac3bd,
      inset 0 0 8px rgba(62, 28, 8, .2),
      0 3px 8px rgba(0, 0, 0, .16);
  }
  .row-content::before { height: 3px; }
  .bead.pending-bead {
    box-shadow:
      0 0 0 2px var(--orange),
      inset -3px -4px 5px rgba(0, 0, 0, .3),
      inset 2px 2px 4px rgba(255, 255, 255, .38),
      1px 2px 2px rgba(0, 0, 0, .28);
  }
}

/* Mobiles Menü im Kopf des realen Spielbretts. */











/* Sechs Würfelfarben; gelten für Online-, Gegner- und Realmodus. */
:root[data-dice-scheme="1"] {
  --die-face: #f7f7f2;
  --die-pip: #25282a;
  --die-edge: #5b6063;
  --die-highlight: rgba(255,255,255,.9);
  --die-shade: rgba(35,39,42,.27);
}
:root[data-theme="dark"][data-dice-scheme="1"] {
  --die-face: #c5c8c9;
  --die-pip: #25282a;
  --die-highlight: rgba(255,255,255,.52);
  --die-shade: rgba(20,24,27,.32);
}
:root[data-dice-scheme="2"] {
  --die-face: #c72f37;
  --die-pip: #fff;
  --die-edge: #71141a;
  --die-highlight: rgba(255,174,174,.48);
  --die-shade: rgba(74,0,7,.48);
}
:root[data-dice-scheme="3"] {
  --die-face: #191b1e;
  --die-pip: #fff;
  --die-edge: #050607;
  --die-highlight: rgba(255,255,255,.22);
  --die-shade: rgba(0,0,0,.68);
}
:root[data-dice-scheme="4"] {
  --die-face: #1767bb;
  --die-pip: #fff;
  --die-edge: #073563;
  --die-highlight: rgba(164,211,255,.5);
  --die-shade: rgba(0,35,82,.48);
}

:root[data-dice-scheme="5"] {
  --die-face: #1f9d55;
  --die-pip: #fff;
  --die-edge: #0b5a2c;
  --die-highlight: rgba(175,255,205,.48);
  --die-shade: rgba(0,72,31,.48);
}
:root[data-dice-scheme="6"] {
  --die-face: #7719e8;
  --die-pip: #fff;
  --die-edge: #3e087f;
  --die-highlight: rgba(218,181,255,.48);
  --die-shade: rgba(54,0,112,.5);
}

/* Schwarze Online-Tropfen bleiben im Dunkelmodus klar erkennbar. */
:root[data-theme="dark"] .bead.black-bead,
:root[data-theme="dark"] .opponent-progress-bead.black-bead {
  border-color: rgba(170, 178, 184, .78);
  filter: drop-shadow(0 0 1.5px rgba(155, 164, 171, .42));
}

/* Smartphone-Hochformat: Kopf und Würfelbereich behalten immer dieselbe
   Höhe. Nur das Brett erhält den verbleibenden Platz; die Seite selbst kann
   dadurch beim Sichern von Würfeln nicht mehr länger oder scrollbar werden. */
@media (orientation: portrait) {
  
  
  
  
  
  
  
}

/* V1.4 – eindeutiges Responsive-Layout für die mobile Browseransicht ------
   Die Klassen app-phone/app-tablet und app-portrait/app-landscape werden aus
   der tatsächlich sichtbaren Firefox-Viewportgröße gesetzt. Desktop-PCs sind
   von allen folgenden Regeln ausdrücklich ausgeschlossen. */
.app-mobile-mode body.in-game {
  width: 100%;
  max-width: 100%;
}
.app-mobile-mode #game-container,
.app-mobile-mode #game-area,
.app-mobile-mode #main-player-board,
.app-mobile-mode #opponent-boards,
.app-mobile-mode #board-rows,
.app-mobile-mode .opponent-board-rows {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Das mobile Menü gilt jetzt auch auf Tablets. So bleibt der schwarze Kopf
   frei von überlappenden Aktionsbuttons. */
.app-mobile-mode .game-header {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title menu"
    "name player";
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
}
.app-mobile-mode .mobile-menu-button {
  grid-area: menu;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 5px;
  border-radius: 6px;
  background: #4f5962;
  color: #fff;
  box-shadow: none;
}
.app-mobile-mode .mobile-menu-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.app-mobile-mode .header-actions {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: none;
  width: min(270px, calc(100vw - 10px));
  padding: 9px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 7px;
  border: 1px solid #596169;
  border-radius: 9px;
  background: #30363b;
  box-shadow: 0 12px 32px rgba(0,0,0,.42);
  overflow-x: hidden;
}
.app-mobile-mode .game-header.mobile-menu-open .header-actions { display: flex; }
.app-mobile-mode .header-actions > button:not([hidden]) {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: .86rem;
  text-align: left;
}

/* Querformat: Der Kopf nutzt wirklich die gesamte sichtbare Breite. */
.app-mobile-mode.app-landscape .game-header {
  top: 0;
  left: 0;
  width: 100%;
  transform: none;
  border-radius: 0;
  padding-top: max(5px, env(safe-area-inset-top));
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(105px, calc(env(safe-area-inset-right) + 105px));
}
.app-mobile-mode.app-landscape .player-info {
  min-width: 0;
  max-width: none;
  justify-content: flex-end;
  overflow: hidden;
}
.app-mobile-mode.app-landscape .player-info .role-info,
.app-tablet-mode .player-info .role-info { display: inline; }

/* Smartphone quer: Steuerung links, Brett rechts. Falls die geringe Höhe für
   zwölf sinnvoll große Reihen nicht reicht, scrollt ausschließlich das Brett. */
html.app-phone-mode.app-landscape:has(body.in-game) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.app-phone-mode.app-landscape body.in-game,
.app-phone-mode.app-landscape body.in-game.mobile-opponent-page {
  position: fixed;
  inset: 0;
  height: var(--app-viewport-height, 100dvh) !important;
  min-height: 0;
  overflow: hidden !important;
  padding: 4px;
}
.app-phone-mode.app-landscape #game-container,
.app-phone-mode.app-landscape body.in-game.mobile-opponent-page #game-container {
  height: 100% !important;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}






.app-phone-mode.app-landscape .opponent-tabs,
.app-phone-mode.app-landscape .opponent-view,
.app-phone-mode.app-landscape .opponent-view-card {
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}

/* Tablet online: kein Seiten-Scrollen. Steuerung und zwölf Reihen werden in
   den verfügbaren sichtbaren Bereich eingepasst. */
.app-tablet-mode body.in-game,
.app-tablet-mode body.in-game.mobile-opponent-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--app-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  padding: 5px;
}
.app-tablet-mode #game-container,
.app-tablet-mode body.in-game.mobile-opponent-page #game-container {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.app-tablet-mode #game-area,
.app-tablet-mode body.in-game.mobile-opponent-page #game-area {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.app-tablet-mode.app-portrait #game-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "controls" "board";
}

.app-tablet-mode #control-panel {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.app-tablet-mode #main-player-board,
.app-tablet-mode #opponent-boards,
.app-tablet-mode body.in-game.mobile-opponent-page #opponent-boards {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.app-tablet-mode #board-rows,
.app-tablet-mode .opponent-board-rows,
.app-tablet-mode body.in-game.mobile-opponent-page .opponent-board-rows {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) !important;
  padding-bottom: 3px;
}
.app-tablet-mode .board-row { min-height: 0; }
.app-tablet-mode .bead {
  width: clamp(15px, min(2.7vw, 3.2vh), 23px);
  height: clamp(15px, min(2.7vw, 3.2vh), 23px);
  flex-basis: clamp(15px, min(2.7vw, 3.2vh), 23px);
}
.app-tablet-mode #opponent-boards {
  grid-template-columns: clamp(210px, 29%, 285px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
}
.app-tablet-mode .opponent-tabs {
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.app-tablet-mode .opponent-view,
.app-tablet-mode .opponent-view-card {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Tablet-Realmodus quer: mehr Platz für Würfel/Bedienung, alle vier Buttons
   in einer Reihe und keine sich überlagernden Beschriftungen. */

















/* V1.4.1 – Tablet-Feinlayout: Das Spielbrett hat immer Vorrang. ----------- */
html.app-tablet-mode:has(body.in-game){
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Kompakter einzeiliger Kopf im Tablet-Onlinespiel. */
.app-tablet-mode .game-header {
  grid-template-columns: max-content minmax(70px, 1fr) max-content 31px;
  grid-template-areas: "title name player menu";
  min-height: 40px;
  padding: 4px 105px 4px 8px;
  column-gap: 8px;
  row-gap: 0;
}
.app-tablet-mode .game-header .game-title-heading {
  margin: 0;
  font-size: .86rem;
}
.app-tablet-mode .game-name-row {
  min-width: 0;
  min-height: 0;
  height: 28px;
  overflow: hidden;
}
.app-tablet-mode #game-name-display,
.app-tablet-mode .game-name-input { font-size: .68rem; }
.app-tablet-mode .player-info {
  min-width: 0;
  max-width: none;
  flex-direction: row;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
  font-size: .62rem;
}
.app-tablet-mode .player-info > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-tablet-mode #game-container:not([hidden]) {
  padding-top: calc(var(--game-header-height, 40px) + 3px);
}
.app-tablet-mode .mobile-board-switch {
  height: 16px;
  font-size: .58rem;
}
.app-tablet-mode body.in-game .top-utility-buttons { gap: 4px; }
.app-tablet-mode body.in-game .utility-button {
  width: 27px;
  height: 27px;
}

/* Kompakte Tablet-Steuerung, damit ein eingeblendeter Wurf das Brett nicht
   unter Reihe 12 aus dem sichtbaren Bereich drückt. */
.app-tablet-mode #control-panel { padding: 4px; }

.app-tablet-mode .turn-actions {
  margin-bottom: 2px;
  gap: 5px;
}
.app-tablet-mode .icon-button {
  width: 36px;
  height: 36px;
  padding: 6px;
}
.app-tablet-mode .icon-button svg {
  width: var(--btn-icon-size, 22px);
  height: var(--btn-icon-size, 22px);
}
.app-tablet-mode #selection-area {
  margin-top: 1px;
  padding: 5px 5px 3px;
  gap: 2px;
}
.app-tablet-mode #dice-selection-container {
  padding: 2px 3px 3px;
  gap: 3px;
}
.app-tablet-mode .dice-group { gap: 3px; }
.app-tablet-mode .dice-item {
  width: 29px;
  height: 29px;
  padding: 3px;
}


/* Brett und Tropfen dürfen auf dem Tablet auch in der Höhe skalieren. */
.app-tablet-mode #main-player-board,
.app-tablet-mode #opponent-boards { padding: 4px; }
.app-tablet-mode .player-board h2,
.app-tablet-mode .opponents-panel h2 {
  margin: 0 0 2px;
  font-size: .72rem;
  line-height: 1;
}
.app-tablet-mode #board-rows,
.app-tablet-mode .opponent-board-rows {
  height: auto;
  flex: 1 1 0;
  border-width: 6px 8px;
}
.app-tablet-mode .board-row { overflow: hidden; }
.app-tablet-mode .row-number {
  width: 18px;
  flex-basis: 18px;
  font-size: .56rem;
}
.app-tablet-mode .row-content { padding: 0 2px; }
.app-tablet-mode .bead-container { min-height: 0; }
.app-tablet-mode .bead {
  width: clamp(11px, min(2.8vw, 2.8vh), 22px);
  height: clamp(11px, min(2.8vw, 2.8vh), 22px);
  flex-basis: clamp(11px, min(2.8vw, 2.8vh), 22px);
}
.app-tablet-mode .opponent-dice-live {
  min-height: 28px;
  padding: 2px 4px;
}
.app-tablet-mode .opponent-die {
  width: 25px;
  height: 25px;
}

/* Tablet online hoch: Der Wurf nimmt nur seine tatsächliche Höhe ein; das
   Brett skaliert in der verbleibenden Zeile vollständig bis Reihe 12. */
.app-tablet-mode.app-portrait #game-area {
  grid-template-rows: max-content minmax(0, 1fr);
}
.app-tablet-mode.app-portrait #main-player-board,
.app-tablet-mode.app-portrait #opponent-boards { align-self: stretch; }

/* Tablet online quer: kleinere Würfel-/Steuerungsspalte, größeres Brett. */

.app-tablet-mode.app-landscape .dice-item {
  width: 26px;
  height: 26px;
  padding: 2px;
}





/* Tablet Realmodus hoch: alles ist fixiert und vollständig sichtbar. */









/* Tablet Realmodus quer: Bedienbereich verbreitern und beide Würfelgruppen
   mit ihren Beschriftungen sauber untereinander anordnen. */









/* Tablet-Fix für V1.4.2 ---------------------------------------------------
   Dieser Block steht absichtlich zuletzt. Firefox Android meldet auf einigen
   Tablets telefonähnliche Viewportwerte; client.js setzt dafür die eigene
   Klasse app-tablet-layout. Desktop und Smartphone bleiben unberührt. */
html.app-tablet-layout {
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}
html.app-tablet-layout body {
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}
.app-tablet-layout body.in-game,
.app-tablet-layout body.in-game.mobile-opponent-page{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--app-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.app-tablet-layout body.in-game {
  padding: 3px !important;
}
.app-tablet-layout body.in-game .app-shell{
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Online: flacher Kopf und ein Spielbereich, der die Resthöhe exakt nutzt. */
.app-tablet-layout .game-header {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 34px !important;
  height: 34px;
  transform: none !important;
  grid-template-columns: max-content minmax(70px, 1fr) minmax(0, auto) 28px !important;
  grid-template-areas: "title name player menu" !important;
  gap: 4px 7px !important;
  padding: 3px 100px 3px 6px !important;
  border-radius: 0 !important;
}
.app-tablet-layout .game-header .game-title-heading {
  margin: 0 !important;
  font-size: .76rem !important;
  line-height: 1;
}
.app-tablet-layout .game-header .app-version { font-size: .5rem; }
.app-tablet-layout .game-name-row {
  height: 24px !important;
  min-height: 0 !important;
  overflow: hidden;
}
.app-tablet-layout #game-name-display,
.app-tablet-layout .game-name-input { font-size: .62rem !important; }
.app-tablet-layout .player-info {
  min-width: 0;
  max-width: none;
  flex-direction: row !important;
  justify-content: flex-end;
  gap: 4px !important;
  overflow: hidden;
  font-size: .56rem !important;
  white-space: nowrap;
}
.app-tablet-layout .player-info .role-info { display: inline !important; }
.app-tablet-layout .mobile-menu-button {
  width: var(--btn-icon-size, 28px) !important;
  height: var(--btn-icon-size, 28px) !important;
  padding: 4px !important;
}
.app-tablet-layout body.in-game .top-utility-buttons {
  top: 3px;
  right: 35px;
  gap: 3px;
}
.app-tablet-layout body.in-game .utility-button {
  width: 27px !important;
  height: 27px !important;
}
.app-tablet-layout #game-container,
.app-tablet-layout body.in-game.mobile-opponent-page #game-container {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  gap: 2px !important;
  padding-top: 36px !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
.app-tablet-layout .mobile-board-switch {
  height: 14px !important;
  min-height: 14px;
  font-size: .53rem !important;
  line-height: 1;
}
.app-tablet-layout #game-area,
.app-tablet-layout body.in-game.mobile-opponent-page #game-area {
  flex: 1 1 0 !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  gap: 4px !important;
  overflow: hidden !important;
}
.app-tablet-layout #control-panel {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  padding: 3px !important;
  overflow: hidden !important;
}

.app-tablet-layout .turn-actions {
  margin: 0 0 2px !important;
  gap: 4px !important;
}
.app-tablet-layout .icon-button {
  width: 32px !important;
  height: 32px !important;
  padding: 5px !important;
}
.app-tablet-layout .icon-button svg {
  width: var(--btn-icon-size, 20px) !important;
  height: var(--btn-icon-size, 20px) !important;
}
.app-tablet-layout #selection-area {
  margin: 0 !important;
  padding: 3px !important;
  gap: 3px !important;
}
.app-tablet-layout #selection-area[hidden] { display: none !important; }
.app-tablet-layout #dice-selection-container {
  margin: 0 !important;
  padding: 2px 3px !important;
  gap: 2px !important;
  min-width: 0;
  overflow: hidden !important;
}
.app-tablet-layout .dice-group {
  flex-wrap: nowrap !important;
  gap: 2px !important;
  min-width: 0;
}
.app-tablet-layout .dice-item {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px;
  padding: 2px !important;
}



/* Online-Bretter: zwölf echte flexible Zeilen statt einer festen Mindesthöhe. */
.app-tablet-layout #main-player-board,
.app-tablet-layout #opponent-boards,
.app-tablet-layout body.in-game.mobile-opponent-page #opponent-boards {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 3px !important;
  overflow: hidden !important;
}
.app-tablet-layout #main-player-board {
  display: flex;
  flex-direction: column;
}
.app-tablet-layout .player-board h2,
.app-tablet-layout .opponents-panel h2 {
  flex: 0 0 auto;
  margin: 0 0 2px !important;
  font-size: .65rem !important;
  line-height: 1;
}
.app-tablet-layout #board-rows,
.app-tablet-layout .opponent-board-rows,
.app-tablet-layout body.in-game.mobile-opponent-page .opponent-board-rows {
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  border-width: 5px 7px !important;
  padding: 0 2px 2px !important;
  overflow: hidden !important;
}
.app-tablet-layout .board-row {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
}
.app-tablet-layout .row-number {
  width: 17px !important;
  flex-basis: 17px !important;
  font-size: .53rem !important;
}
.app-tablet-layout .row-content { padding: 0 2px !important; }
.app-tablet-layout .bead-container { min-height: 0 !important; }
.app-tablet-layout .bead {
  width: clamp(10px, min(2.5vw, 2.55vh), 20px) !important;
  height: clamp(10px, min(2.5vw, 2.55vh), 20px) !important;
  flex-basis: clamp(10px, min(2.5vw, 2.55vh), 20px) !important;
}
.app-tablet-layout #opponent-boards {
  grid-template-columns: clamp(140px, 24%, 205px) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 3px 5px !important;
  align-items: stretch !important;
}
.app-tablet-layout .opponent-tabs {
  min-height: 0;
  max-height: 100%;
  gap: 3px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.app-tablet-layout .opponent-tab { padding: 4px 5px !important; }
.app-tablet-layout .opponent-view,
.app-tablet-layout .opponent-view-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
.app-tablet-layout .opponent-view-card {
  display: flex;
  flex-direction: column;
}
.app-tablet-layout .opponent-view-head {
  flex: 0 0 auto;
  padding: 2px 5px !important;
  font-size: .58rem !important;
}
.app-tablet-layout .opponent-dice-live {
  flex: 0 0 auto;
  min-height: 25px !important;
  padding: 2px 4px !important;
}
.app-tablet-layout .opponent-die {
  width: 22px !important;
  height: 22px !important;
}

/* Online hoch: Würfel und Kurzinfos liegen nebeneinander, deshalb schiebt ein
   neuer Wurf das Brett nicht mehr nach unten. */
.app-tablet-layout.app-portrait #game-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: max-content minmax(0, 1fr) !important;
  grid-template-areas: "controls" "board" !important;
}
.app-tablet-layout.app-portrait #selection-area {
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) !important;
  grid-template-areas: "dice info" !important;
  align-items: center;
}


/* Online quer: kleine Würfelspalte, maximales Brett; nichts wird gescrollt. */

.app-tablet-layout.app-landscape .game-header {
  grid-template-columns: max-content minmax(0, 1fr) auto 28px !important;
}




.app-tablet-layout.app-landscape .player-board h2,
.app-tablet-layout.app-landscape .opponents-panel h2 { display: none; }

.app-tablet-layout.app-landscape .opponent-heading { display: none; }

/* Realmodus: derselbe fixierte Viewport, ohne unnötigen Seiten-Scroll. */









/* Realmodus hoch: genug feste Höhe für Auswahlrahmen und Würfel. */






/* Realmodus quer: links bewusst breiter, Brett rechts schmaler. Die vier
   Knöpfe stehen in einer Reihe; Status und beide Würfelgruppen darunter. */
















/* V1.4.2: vollständig fließender Realmodus im Querformat ------------------
   Keine Geräte- oder Pixel-Breakpoints. Spalten skalieren in Bruchteilen,
   Bedienelemente mit Viewport-/Container-Einheiten und clamp(). */
@media (orientation: landscape) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  /* Aktueller Wurf oben, zur Seite gelegte Würfel als eigene Zeile darunter. */
  

  

  

  /* Sechs Würfel: drei Spalten und zwei Reihen. */
  

  

  

  

  

  
}

/* ========================================================================
   Abschliessende, getrennte Korrekturen fuer die aktuellen Mobilansichten
   ======================================================================== */

/* Tablet hoch: Es ist immer genau eine Brettseite sichtbar. Die bereits
   vorhandene Wischsteuerung schaltet mit .mobile-show-opponent um. */
@media (orientation: portrait) {
  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container #game-area #main-player-board {
    display: flex !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container #game-area #opponent-boards {
    display: none !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent #game-area #main-player-board {
    display: none !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent #game-area #opponent-boards {
    display: flex !important;
  }
}

/* Handy quer: Die zwölf Reihen behalten eine lesbare Mindesthöhe. Nur die
   beiden Brettflächen scrollen; das dreispaltige Grundlayout bleibt stehen. */
@media (orientation: landscape) {
  

  
}

/* Tablet: schmalere Statuszeile, etwas groessere eigene Wuerfel und kompakte
   Gegnerdetails. Smartphone- und Desktopwerte werden nicht veraendert. */
html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) {
  --online-status-height: clamp(1.65rem, 4dvh, 2rem);
  --online-status-font-size: clamp(.46rem, 1.05dvh, .62rem);
}



html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-progress {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-progress-bead {
  width: 72% !important;
  height: auto !important;
  max-width: .92rem !important;
  min-width: 0 !important;
  aspect-ratio: 1 !important;
  justify-self: center !important;
  font-size: clamp(.34rem, min(1vw, 1.25dvh), .48rem) !important;
}

html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-die {
  width: clamp(1.05rem, 3.6dvh, 1.4rem) !important;
  height: clamp(1.05rem, 3.6dvh, 1.4rem) !important;
  flex: 0 0 clamp(1.05rem, 3.6dvh, 1.4rem) !important;
}

html.app-mobile-mode[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #dice-selection-container {
  --online-mobile-die-size: clamp(1.7rem, min(6.45cqw, 4.8cqh), 2.2rem) !important;
}



html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
  width: var(--online-mobile-die-size) !important;
  height: var(--online-mobile-die-size) !important;
  flex: 0 0 var(--online-mobile-die-size) !important;
}

/* Desktop: Abwesenheitshinweis kompakt, einzeilig und etwas kleiner als der
   Spielername. */

/* V1.7.3: Emoji-Schloss mit klar erkennbarer, kompakter Button-Fläche. */
.spectator-lock-button,
.spectator-lock-button:hover,
.spectator-lock-button:focus,
.spectator-lock-button:active {
  width: 1.55em !important;
  min-width: 1.55em !important;
  height: 1.42em !important;
  min-height: 1.42em !important;
  margin-left: .38em !important;
  padding: .08em .14em !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: .34em !important;
  background: linear-gradient(180deg, #68747d 0%, #46515a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.3) !important;
}
.spectator-lock-button.host-controllable:hover { transform: translateY(-1px) !important; }
.spectator-lock-button.host-controllable:active { transform: translateY(1px) !important; }
.spectator-lock-button[hidden] { display: none !important; }

/* V1.5 – erweiterte Bedienungsanleitung -------------------------------
   Ausschliesslich Elemente innerhalb des Hilfefensters und die Urheberzeile.
   Spieloberflaeche und Spiellogik werden von diesen Klassen nicht beruehrt. */
.rules-dialog {
  width: min(980px, 100%);
}

.rules-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 14px;
}

.rules-column {
  min-width: 0;
}

.rules-column h3 {
  margin: 0;
}

.rules-column ul {
  margin-top: 10px;
}

.guide-control-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.guide-control-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  line-height: 1.3;
}
.guide-control-item.guide-real-item {
  grid-template-columns: 108px minmax(0, 1fr);
}
.guide-real-launch {
  width: 108px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  padding: 7px 8px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(180deg, #9b5dde 0%, #7131b6 100%);
  border: 1px solid #49305f;
  box-shadow: 0 3px 5px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.2);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.guide-real-status {
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.35em;
  width: 1.35em;
  height: 1.35em;
  min-width: 1.35em;
  min-height: 1.35em;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(76,175,80,.32);
  line-height: 1;
}

.guide-button.icon-button {
  box-sizing: border-box;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  pointer-events: none;
}
.guide-button.icon-button svg {
  width: 22px !important;
  height: 22px !important;
}

/* Dieselben Funktionsfarben wie die echten vier Spielfeld-Buttons. */
.guide-roll {
  --btn-face-hi: #a1e3ff;
  --btn-face-mid: #5ab8ee;
  --btn-face-low: #2d86bb;
  --btn-face-border: #245f82;
  --btn-glow: rgba(72,184,238,.48);
  color: #fff;
}
.guide-mode {
  --btn-face-hi: #cf9bff;
  --btn-face-mid: #984bf6;
  --btn-face-low: #6821c8;
  --btn-face-border: #5a1ca9;
  --btn-glow: rgba(152,75,246,.52);
}
.guide-confirm,
.guide-pair {
  --btn-face-hi: #5ae989;
  --btn-face-mid: #27b351;
  --btn-face-low: #1b7a37;
  --btn-face-border: #18662f;
  --btn-glow: rgba(39,179,81,.50);
}
.guide-end {
  --btn-face-hi: #f1967d;
  --btn-face-mid: #cb6045;
  --btn-face-low: #8d3726;
  --btn-face-border: #742e20;
  --btn-glow: rgba(203,96,69,.48);
}

.guide-button.guide-roll svg circle {
  fill: currentColor !important;
  stroke: none !important;
}
.guide-button.guide-roll svg rect {
  fill: none !important;
}
.guide-button.guide-roll svg {
  color: #fff !important;
  stroke: #fff !important;
}
.guide-button.guide-roll svg circle {
  fill: #fff !important;
}
/* Spielanleitung: Hamburger exakt wie der echte Menübutton. */
.guide-menu {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 8px;
  background: linear-gradient(180deg,#5c6760 0%,#3f4943 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.25);
}
.guide-menu svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f4f7f5;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Würfelfarbe und Hilfe benutzen direkt dieselbe Utility-Button-Haut wie im Spiel. */
.guide-dice-scheme.utility-button,
.guide-help.utility-button {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
  background: #4f5962;
  color: #e3e3e3;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.guide-dice-scheme.dice-scheme-button svg {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.guide-dice-scheme.dice-scheme-button svg rect {
  fill: var(--die-face);
  stroke: var(--die-edge);
}
.guide-dice-scheme.dice-scheme-button svg circle {
  fill: var(--die-pip);
  stroke: none;
}
.guide-help.utility-button {
  font-weight: 800;
  font-size: .8rem;
  line-height: 1;
  text-align: center;
}

.guide-install-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(220,232,224,.22);
}
.guide-install-section h3 {
  margin: 0 0 8px;
}
.guide-install-section p {
  margin: 0 0 9px;
}
.guide-install-section .guide-install-app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  margin-top: 3px;
}

.guide-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .rules-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ========================================================================
   FINAL Tablet: Hoch- und Querformat bewusst getrennt
   ======================================================================== */

/* Die Statuszeile bleibt auf Tablets nur eine kompakte Informationszeile. */
html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) {
  --online-status-height: clamp(1.2rem, 3dvh, 1.5rem);
  --online-status-font-size: clamp(.4rem, .86dvh, .54rem);
}



/* Tablet hoch: Die Tab-Spalte ist breit genug fuer deutlich groessere
   Fortschrittstropfen. */
@media (orientation: portrait) {
  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-progress {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: clamp(.04rem, .22cqw, .12rem) !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-progress-bead {
    box-sizing: border-box !important;
    width: 88% !important;
    height: auto !important;
    max-width: 1.35rem !important;
    min-width: 0 !important;
    aspect-ratio: 1 !important;
    justify-self: center !important;
    font-size: clamp(.46rem, min(1.65cqw, 1.4cqh), .68rem) !important;
  }
}

/* Tablet quer: Desktopartige Proportionen. Innerhalb der Holzrahmen gibt es
   keinen Scrollcontainer. Nur die komplette rechte Gegnersektion scrollt. */
@media (orientation: landscape) {
  

  

  

  

  

  

  

  

  

  

  

  

  
}

/* V1.4.2: vollständig fließender Onlinemodus für mobile Browser ----------
   Die Aufteilung hängt nur vom verfügbaren Raum und der Ausrichtung ab.
   Desktop ohne app-mobile-mode bleibt vollständig unverändert. */
.app-mobile-mode body.in-game,
.app-mobile-mode body.in-game.mobile-opponent-page {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--app-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  overscroll-behavior: none;
}

.app-mobile-mode body.in-game .app-shell {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Flacher schwarzer Kopf: Spielname wird im mobilen Spiel nicht doppelt
   gezeigt; Spielername und Rolle bleiben sichtbar. */
.app-mobile-mode body.in-game .game-header {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: clamp(2.25rem, 6dvh, 2.8rem) !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto clamp(1.7rem, 5dvh, 2rem) !important;
  grid-template-areas: "title player menu" !important;
  align-items: center !important;
  gap: clamp(.25rem, 1.2vw, .6rem) !important;
  padding: .2rem clamp(6.1rem, 26vw, 6.8rem) .2rem .5rem !important;
  border-radius: 0 !important;
}

.app-mobile-mode body.in-game .game-title-block { display: contents !important; }
.app-mobile-mode body.in-game .game-name-row { display: none !important; }
.app-mobile-mode body.in-game .game-header .game-title-heading {
  grid-area: title !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: clamp(.68rem, 2.5dvh, .95rem) !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app-mobile-mode body.in-game .game-header .app-version { font-size: .52em !important; }
.app-mobile-mode body.in-game .player-info {
  grid-area: player !important;
  min-width: 0 !important;
  max-width: 42vw !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(.2rem, 1vw, .45rem) !important;
  overflow: hidden !important;
  font-size: clamp(.5rem, 1.9dvh, .68rem) !important;
  white-space: nowrap !important;
}
.app-mobile-mode body.in-game .player-info > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.app-mobile-mode body.in-game .player-info .role-info { display: inline !important; }
.app-mobile-mode body.in-game .player-info .score-info { display: none !important; }
.app-mobile-mode body.in-game .mobile-menu-button {
  grid-area: menu !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  min-width: 0 !important;
  padding: .25rem !important;
}

.app-mobile-mode body.in-game .top-utility-buttons {
  top: clamp(.2rem, 1dvh, .35rem) !important;
  right: .35rem !important;
  gap: .2rem !important;
}
.app-mobile-mode body.in-game .utility-button {
  width: clamp(1.65rem, 5dvh, 2rem) !important;
  height: clamp(1.65rem, 5dvh, 2rem) !important;
}

.app-mobile-mode body.in-game #game-container,
.app-mobile-mode body.in-game.mobile-opponent-page #game-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(.12rem, .6dvh, .3rem) !important;
  padding: calc(var(--game-header-height, 2.8rem) + .15rem) .2rem .2rem !important;
  overflow: hidden !important;
}
.app-mobile-mode body.in-game .mobile-board-switch {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: auto auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  height: auto !important;
  min-height: clamp(1rem, 2.7dvh, 1.3rem) !important;
  gap: clamp(.35rem, 2vw, .8rem) !important;
  font-size: clamp(.5rem, 1.7dvh, .65rem) !important;
  line-height: 1 !important;
}
.app-mobile-mode body.in-game .mobile-board-switch .spectator-list {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: .08rem .2rem !important;
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: .18rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
}
.app-mobile-mode body.in-game .mobile-board-switch .spectator-list[hidden] {
  display: none !important;
}
.app-mobile-mode body.in-game .mobile-board-switch .spectator-label,
.app-mobile-mode body.in-game .mobile-board-switch .spectator-chip {
  flex: 0 0 auto !important;
  font-size: inherit !important;
}
.app-mobile-mode body.in-game .mobile-board-switch .spectator-chip {
  padding: .06rem .2rem !important;
  gap: .16rem !important;
}
.app-mobile-mode body.in-game .mobile-board-switch .spectator-name-button,
.app-mobile-mode body.in-game .mobile-board-switch .spectator-hand {
  font-size: inherit !important;
  line-height: inherit !important;
}
.app-mobile-mode body.in-game .mobile-board-switch .spectator-promote-button {
  min-height: 0 !important;
  padding: .05rem .18rem !important;
  font-size: inherit !important;
}

.app-mobile-mode body.in-game #game-area,
.app-mobile-mode body.in-game.mobile-opponent-page #game-area {
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: clamp(.15rem, .7dvh, .35rem) !important;
  overflow: hidden !important;
}

/* Kompakte Steuerung, deren Würfel automatisch mit der Panelbreite skalieren. */
.app-mobile-mode body.in-game #control-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: clamp(.2rem, .8vw, .4rem) !important;
  overflow: hidden !important;
  container-type: inline-size;
}

.app-mobile-mode body.in-game .turn-actions {
  margin: 0 0 .15rem !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(.2rem, 1.5cqw, .5rem) !important;
}
.app-mobile-mode body.in-game .turn-actions .icon-button {
  width: clamp(2rem, min(12cqw, 8cqh), 2.65rem) !important;
  height: clamp(2rem, min(12cqw, 8cqh), 2.65rem) !important;
  min-width: 0 !important;
  padding: clamp(.3rem, 1.2cqh, .5rem) !important;
}
.app-mobile-mode body.in-game #selection-area {
  min-width: 0 !important;
  margin: 0 !important;
  padding: clamp(.2rem, .8cqw, .4rem) !important;
  gap: clamp(.15rem, .8cqw, .35rem) !important;
  overflow: hidden !important;
}
.app-mobile-mode body.in-game #selection-area[hidden] { display: none !important; }
.app-mobile-mode body.in-game #dice-selection-container {
  min-width: 0 !important;
  margin: 0 !important;
  padding: .2rem !important;
  overflow: visible !important;
}
.app-mobile-mode body.in-game .dice-title { display: none !important; }
.app-mobile-mode body.in-game .dice-group {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  gap: clamp(.1rem, .7cqw, .3rem) !important;
}
.app-mobile-mode body.in-game .dice-item {
  width: var(--online-mobile-die-size) !important;
  height: var(--online-mobile-die-size) !important;
  min-width: 0 !important;
  flex: 0 0 var(--online-mobile-die-size) !important;
  padding: clamp(.15rem, .7cqw, .35rem) !important;
}



/* Eigenes und gegnerisches Brett nutzen immer die vollständige Resthöhe. */
.app-mobile-mode body.in-game #main-player-board,
.app-mobile-mode body.in-game #opponent-boards,
.app-mobile-mode body.in-game.mobile-opponent-page #opponent-boards {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(.18rem, .7vw, .35rem) !important;
  overflow: hidden !important;
}
.app-mobile-mode body.in-game #main-player-board {
  display: flex;
  flex-direction: column;
}
.app-mobile-mode body.in-game .player-board h2,
.app-mobile-mode body.in-game .opponents-panel h2 {
  flex: 0 0 auto !important;
  margin: 0 0 .1rem !important;
  font-size: clamp(.55rem, 1.9dvh, .72rem) !important;
  line-height: 1 !important;
}
.app-mobile-mode body.in-game #board-rows,
.app-mobile-mode body.in-game .opponent-board-rows,
.app-mobile-mode body.in-game.mobile-opponent-page .opponent-board-rows {
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding: 0 .15rem .15rem !important;
  overflow: hidden !important;
  container-type: size;
}
.app-mobile-mode body.in-game .board-row {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.app-mobile-mode body.in-game .row-number {
  width: clamp(1rem, 5cqw, 1.4rem) !important;
  flex-basis: clamp(1rem, 5cqw, 1.4rem) !important;
  font-size: clamp(.48rem, 2.4cqh, .68rem) !important;
}
.app-mobile-mode body.in-game .row-content { padding: 0 .12rem !important; }
.app-mobile-mode body.in-game .bead-container {
  min-height: 0 !important;
  gap: clamp(.04rem, .3cqw, .15rem) !important;
}
.app-mobile-mode body.in-game .bead {
  width: clamp(.65rem, min(4cqw, 4.8cqh), 1.5rem) !important;
  height: clamp(.65rem, min(4cqw, 4.8cqh), 1.5rem) !important;
  flex-basis: clamp(.65rem, min(4cqw, 4.8cqh), 1.5rem) !important;
}

.app-mobile-mode body.in-game .opponent-view,
.app-mobile-mode body.in-game .opponent-view-card {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
.app-mobile-mode body.in-game .opponent-view-card {
  display: flex !important;
  flex-direction: column !important;
}
.app-mobile-mode body.in-game .opponent-view-head {
  flex: 0 0 auto !important;
  padding: .12rem .35rem !important;
  font-size: clamp(.5rem, 1.8dvh, .65rem) !important;
}
.app-mobile-mode body.in-game .opponent-dice-live {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: .12rem .3rem !important;
}
.app-mobile-mode body.in-game .opponent-die {
  width: clamp(1.25rem, min(5vw, 5dvh), 1.8rem) !important;
  height: clamp(1.25rem, min(5vw, 5dvh), 1.8rem) !important;
}

/* Hochformat: Steuerung oben, das Brett erhält jede verbleibende Zeile. */
@media (orientation: portrait) {
  .app-mobile-mode body.in-game #game-area,
  .app-mobile-mode body.in-game.mobile-opponent-page #game-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "controls" "board" !important;
  }
  .app-mobile-mode body.in-game #control-panel {
    height: auto !important;
    align-self: start !important;
  }
  .app-mobile-mode body.in-game #selection-area {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    grid-template-areas: "dice info" !important;
    align-items: center !important;
  }
  .app-mobile-mode body.in-game #dice-selection-container {
    --online-mobile-die-size: clamp(1.3rem, 7.1vw, 1.9rem);
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .2rem !important;
  }
  
  

  /* Auf schmalen Hochformat-Brettern bleiben die Tropfen deutlich greifbar. */
  .app-mobile-mode body.in-game .bead {
    width: clamp(.82rem, min(5.2cqw, 5.4cqh), 1.7rem) !important;
    height: clamp(.82rem, min(5.2cqw, 5.4cqh), 1.7rem) !important;
    flex-basis: clamp(.82rem, min(5.2cqw, 5.4cqh), 1.7rem) !important;
  }

  /* Gegner-Tabs links, das ausgewählte Gegnerbrett dauerhaft rechts daneben. */
  .app-mobile-mode body.in-game #opponent-boards {
    display: none;
    grid-template-columns: minmax(4.4rem, 1fr) minmax(0, 4fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "opptabs oppview" !important;
    gap: .2rem !important;
  }
  .app-mobile-mode body.in-game .opponent-heading { display: none !important; }
  .app-mobile-mode body.in-game #game-container.mobile-show-opponent #opponent-boards {
    display: grid !important;
  }
  .app-mobile-mode body.in-game .opponent-tabs {
    grid-area: opptabs !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: .18rem !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .app-mobile-mode body.in-game .opponent-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: .22rem .3rem !important;
  }
  .app-mobile-mode body.in-game .opponent-view {
    grid-area: oppview !important;
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .app-mobile-mode body.in-game .opponent-view-card {
    display: flex !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .app-mobile-mode body.in-game .opponent-board-rows {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Querformat: kompakte Steuerung links, Brett rechts. */
@media (orientation: landscape) {
  
  
  
  
  
  
  .app-mobile-mode body.in-game .player-board h2,
  .app-mobile-mode body.in-game .opponents-panel h2 { display: none !important; }

  /* Gegnerauswahl links im Brettbereich, Gegnerbrett daneben. */
  
  
  .app-mobile-mode body.in-game .opponent-heading { display: none !important; }
  .app-mobile-mode body.in-game .opponent-tabs {
    grid-area: opptabs !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: .18rem !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  

  

  
  .app-mobile-mode body.in-game .opponent-tab {
    width: 100% !important;
    min-width: 0 !important;
    padding: .22rem .3rem !important;
  }
  .app-mobile-mode body.in-game .opponent-view { grid-area: oppview !important; }
}

/* Mobile Online-Gegnerbrett: Die Kartenhöhe darf nicht vom Inhalt berechnet
   werden. Firefox Android löst eine prozentuale Flex-Höhe innerhalb dieses
   Grid-Items sonst nur auf Kopf + Würfelzeile auf; die zwölf Brettreihen
   kollabieren dadurch zu einem schmalen Holzstreifen. */
.app-mobile-mode body.in-game #game-container.mobile-show-opponent .opponent-view {
  position: relative !important;
  align-self: stretch !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.app-mobile-mode body.in-game #game-container.mobile-show-opponent .opponent-view-card {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}
.app-mobile-mode body.in-game #game-container.mobile-show-opponent .opponent-board-rows {
  grid-row: 3 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

/* Breitere Gegner-Tabs mit allen zwölf Restmengen auf einer Zeile. Die
   Aufteilung bleibt proportional und passt sich ohne feste Gerätebreite an. */
.app-mobile-mode body.in-game #game-container.mobile-show-opponent #opponent-boards {
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) !important;
}
.app-mobile-mode body.in-game #game-container.mobile-show-opponent .opponent-progress {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(.04rem, .22vw, .12rem) !important;
  overflow: visible !important;
}
.app-mobile-mode body.in-game #game-container.mobile-show-opponent .opponent-progress-bead {
  width: 100% !important;
  height: auto !important;
  max-width: 1.55rem !important;
  min-width: 0 !important;
  aspect-ratio: 1 !important;
  justify-self: center !important;
  font-size: clamp(.38rem, min(1.55vw, 2.2dvh), .68rem) !important;
}
.app-mobile-mode body.in-game #game-container.mobile-show-opponent .opponent-away-label {
  grid-column: 1 / -1 !important;
}
.app-mobile-mode body.in-game #game-container.mobile-show-opponent .opponent-view .bead {
  width: clamp(.8rem, min(6cqw, 5.8cqh), 1.75rem) !important;
  height: clamp(.8rem, min(6cqw, 5.8cqh), 1.75rem) !important;
  flex-basis: clamp(.8rem, min(6cqw, 5.8cqh), 1.75rem) !important;
}

/* Nur Querformat: desktopähnliche Dreispaltenansicht. Eigenes Brett,
   Steuerung und Gegner bleiben gleichzeitig sichtbar. */
@media (orientation: landscape) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  /* Der Wischhinweis ist überflüssig, weil beide Bretter sichtbar sind.
     Falls Zuschauer vorhanden sind, bleibt nur deren Anzeige erhalten. */
  
  
  
}

/* Tablet quer: Die Gegnerseite scrollt als Ganzes. Das Gegnerbrett behält
   unabhängig von der Tab-Anzahl exakt die Höhe des eigenen Bretts. */
@media (orientation: landscape) {
  

  

  
}

/* Smartphone: Tabs stehen wieder über dem Brett. Die Gegnerseite scrollt
   vollständig, während das Brett unabhängig von der Spielerzahl seine volle
   verfügbare Höhe behält. */
.app-phone-mode body.in-game #opponent-boards {
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.app-phone-mode body.in-game #game-container.mobile-show-opponent #opponent-boards {
  display: flex !important;
}

.app-phone-mode body.in-game #opponent-boards .opponent-tabs {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

.app-phone-mode body.in-game #opponent-boards .opponent-view {
  order: 2 !important;
  flex: 0 0 100% !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

.app-phone-mode body.in-game #opponent-boards .opponent-view-card {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Smartphone: größere Tropfen, getrennt nach Ausrichtung, damit sie im
   schmaleren Querformat weiterhin vollständig auf die Stangen passen. */
@media (orientation: portrait) {
  .app-phone-mode body.in-game.mobile-opponent-page #game-area {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .app-phone-mode body.in-game.mobile-opponent-page #opponent-boards,
  .app-phone-mode body.in-game.mobile-opponent-page #game-container.mobile-show-opponent #opponent-boards {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .app-phone-mode body.in-game #main-player-board .bead,
  .app-phone-mode body.in-game #opponent-boards .opponent-view .bead {
    width: clamp(1.063rem, min(6.739cqw, 6.998cqh), 2.203rem) !important;
    height: clamp(1.063rem, min(6.739cqw, 6.998cqh), 2.203rem) !important;
    flex-basis: clamp(1.063rem, min(6.739cqw, 6.998cqh), 2.203rem) !important;
  }
}

@media (orientation: landscape) {
  
  
}

/* Gut lesbare Restmengen in den mobilen Gegner-Tabs. */
.app-mobile-mode body.in-game #opponent-boards .opponent-progress-bead,
.app-mobile-mode body.in-game #game-container.mobile-show-opponent #opponent-boards .opponent-progress-bead {
  font-size: clamp(.4rem, min(1.3vw, 1.8dvh), .62rem) !important;
}

/* Desktop: Die zwölf Fortschrittstropfen nutzen die volle Tab-Breite. */
html:not(.app-mobile-mode) .opponent-progress {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(2px, .25vw, 4px) !important;
}

html:not(.app-mobile-mode) .opponent-progress-bead {
  width: 100% !important;
  height: auto !important;
  max-width: 32px !important;
  min-width: 0 !important;
  aspect-ratio: 1 !important;
  justify-self: center !important;
  font-size: clamp(.72rem, .8vw, .9rem) !important;
}

/* Fließender Realmodus im Hochformat: Die Würfelfläche richtet sich nach
   ihrem Inhalt. So entsteht oberhalb kein leerer Block und Auswahlrahmen
   werden am unteren Rand nicht abgeschnitten. */
@media (orientation: portrait) {
  

  

  

  

  

  /* Bedienelemente und Status teilen sich eine flache Zeile. */
  

  

  

  

  

  

  

  

  

  

  
}

/* Strikt getrennte Online-Layouts. JavaScript setzt data-app-device und
   data-app-orientation unabhängig von der CSS-Kaskade. Dadurch verändern
   Smartphone-Regeln niemals Tablet-Größen und umgekehrt. */

/* Tablet quer: Die zwölf Tab-Tropfen bleiben sicher innerhalb der rechten
   Spalte, auch wenn Firefox den sichtbaren Bereich verkleinert. */




/* Tablet hoch: Das eigene Brett bekommt eine von Smartphone und Querformat
   unabhängige Tropfengröße. */
html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game #main-player-board .bead {
  width: clamp(.9rem, min(4.5cqw, 4.35cqh), 1.75rem) !important;
  height: clamp(.9rem, min(4.5cqw, 4.35cqh), 1.75rem) !important;
  flex-basis: clamp(.9rem, min(4.5cqw, 4.35cqh), 1.75rem) !important;
}

/* Smartphone hoch: Größere, weiterhin vollständig passende Tropfen auf dem
   eigenen und dem gegnerischen Brett. */
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game #main-player-board .bead,
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game #opponent-boards .opponent-view .bead {
  width: clamp(1.16rem, min(7.65cqw, 7.8cqh), 2.2rem) !important;
  height: clamp(1.16rem, min(7.65cqw, 7.8cqh), 2.2rem) !important;
  flex-basis: clamp(1.16rem, min(7.65cqw, 7.8cqh), 2.2rem) !important;
}

/* Smartphone – beide Ausrichtungen: gut lesbare Tab-Ziffern und größere
   Gegnerwürfel, ohne Tablet-Tabs zu beeinflussen. */
html[data-app-device="phone"] body.in-game #opponent-boards .opponent-progress-bead {
  box-sizing: border-box !important;
  width: 88% !important;
  height: auto !important;
  max-width: 1.35rem !important;
  min-width: 0 !important;
  flex: none !important;
  aspect-ratio: 1 !important;
  justify-self: center !important;
  padding: 1px !important;
  font-size: clamp(.66rem, min(2.65vw, 3dvh), .8rem) !important;
  line-height: 1 !important;
}

html[data-app-device="phone"] body.in-game #opponent-boards .opponent-die {
  width: clamp(1.9rem, min(8.4vw, 7.2dvh), 2.55rem) !important;
  height: clamp(1.9rem, min(8.4vw, 7.2dvh), 2.55rem) !important;
  flex: 0 0 clamp(1.9rem, min(8.4vw, 7.2dvh), 2.55rem) !important;
}

/* Smartphone quer: keine Tablet-Dreispaltenansicht. Links bleibt die
   Steuerung, rechts erscheint abhängig von der Wischseite genau ein Brett. */






















/* Tablet-Realmodus quer: Würfel-/Bedienbereich und Spielbrett teilen sich die
   verfügbare Breite exakt gleichmäßig. */






/* Tablet-Realmodus quer: exakt 25 Prozent größere Tropfen gegenüber der
   bisherigen responsiven Querformatgröße. */


/* Smartphone-Realmodus quer: links Kopf und Bedienung, rechts das über die
   volle Höhe laufende Spielbrett. Beide Spalten sind gleich breit. */








/* Aktueller Wurf und abgelegte Würfel bleiben als zwei Gruppen untereinander;
   innerhalb jeder Gruppe stehen bis zu sechs Würfel in genau einer Reihe. */




/* Realmodus Smartphone hoch: alle Bestandteile der bisherigen responsiven
   Tropfengröße werden exakt um fünf Prozent angehoben. */


/* Realmodus Smartphone quer: die sechs Würfel pro Reihe sind zehn Prozent
   größer; Hochformat und Tablet bleiben davon unberührt. */


/* Realmodus Tablet hoch: Tropfen zehn Prozent größer und der ungenutzte Raum
   unter den Würfeln wird dem Spielbrett zugeschlagen. */








/* Mobiler Online-Hinweis: Nur ein Host, der eine pausierte Partie tatsächlich
   fortsetzen kann, sieht das grüne Play-Symbol am Hamburger-Menü. */
.mobile-resume-indicator {
  display: none;
}

body.in-game #mobile-menu-button.resume-available {
  position: relative !important;
  scale: 1 !important;
  transform-origin: center center !important;
}


body.in-game #mobile-menu-button.resume-available .mobile-resume-indicator {
  position: absolute !important;
  right: -.28rem !important;
  bottom: -.28rem !important;
  z-index: 2;
  width: clamp(.9rem, 2.7dvh, 1.12rem);
  height: clamp(.9rem, 2.7dvh, 1.12rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .35);
  pointer-events: none;
}

body.in-game #mobile-menu-button.resume-available .mobile-resume-indicator svg {
  width: 68%;
  height: 68%;
  fill: currentColor;
  stroke: none;
}

/* Online: Der Statusbereich bleibt vier Textzeilen hoch. Zusammen mit den
   dauerhaft sichtbaren Würfelreihen verhindert das Layoutsprünge. */


/* Verblasste Würfel behalten die Farben des gewählten Würfelschemas. */
body.in-game:not(.real-game-mode) .inactive-dice-row {
  opacity: .38;
  filter: saturate(.72) brightness(.96);
  pointer-events: none;
}

body.in-game:not(.real-game-mode) .inactive-die {
  cursor: default;
}

/* Smartphone hoch: eigene Würfel und ihr Rahmen exakt zehn Prozent größer. */
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #dice-selection-container {
  --online-mobile-die-size: clamp(1.43rem, 7.81vw, 2.09rem);
}

html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #selection-area {
  min-height: calc(clamp(1.43rem, 7.81vw, 2.09rem) + .8rem) !important;
  overflow: visible !important;
}

/* Smartphone Online: Die Restzahl sitzt als eigenes Element in der Tab-Tropfen.
   Dadurch wird sie nicht mehr von älteren Tab-Schriftregeln verkleinert. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-tabs .opponent-progress-bead > .opponent-progress-value {
  display: block !important;
  max-width: calc(100% - 3px) !important;
  font-size: clamp(13px, min(3.7vw, 3.7dvh), 15px) !important;
  font-weight: 900 !important;
  line-height: .92 !important;
  letter-spacing: -.02em !important;
}

/* Online-Statusleiste: aus der mittleren Steuerung gelöst und dauerhaft am
   unteren Fensterrand sichtbar. Vier Textzeilen bleiben weiterhin möglich. */
body.in-game:not(.real-game-mode) {
  --online-status-font-size: clamp(.68rem, 1.8dvh, .9rem);
  --online-status-height: calc(clamp(3.8rem, 9dvh, 4.4rem) + env(safe-area-inset-bottom));
}

body.in-game:not(.real-game-mode) #game-container {
  padding-bottom: var(--online-status-height) !important;
}







/* Handy und Tablet: Der zusätzliche Modus-/Auswahlblock an den Würfeln fällt
   weg. Die vier Aktionssymbole zeigen den Modus bereits eindeutig an. */


html[data-app-device="phone"] body.in-game:not(.real-game-mode) #selection-area,
html[data-app-device="tablet"] body.in-game:not(.real-game-mode) #selection-area {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "dice" !important;
}

/* Nur Smartphone: Die sechs eigenen Würfel nutzen die frei gewordene Breite. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container {
  --online-mobile-die-size: clamp(2.15rem, 14cqw, 3.2rem);
  width: 100% !important;
  align-items: stretch !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-group {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-items: center !important;
  gap: clamp(.12rem, 1cqw, .4rem) !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
  width: var(--online-mobile-die-size) !important;
  height: var(--online-mobile-die-size) !important;
  flex-basis: var(--online-mobile-die-size) !important;
}

/* Sichere Smartphone-Fallbacks für Firefox: Selbst wenn eine alte Sitzung vor
   der korrigierten Geräteerkennung noch Tablet-Daten hielt, werden die
   Tab-Ziffern auf einem länglichen Telefon deutlich vergrößert. */
@media (orientation: portrait) and (max-aspect-ratio: 4/7),
       (orientation: landscape) and (min-aspect-ratio: 7/4) {
  .app-mobile-mode body.in-game:not(.real-game-mode) .opponent-tabs .opponent-progress-bead > .opponent-progress-value {
    display: block !important;
    max-width: calc(100% - 3px) !important;
    font-size: clamp(14px, min(4vw, 4dvh), 16px) !important;
    font-weight: 900 !important;
    line-height: .9 !important;
    letter-spacing: -.02em !important;
  }
}

/* Smartphone Online: Spielername, Rolle und Punktestand stehen kompakt in
   genau einer Zeile, beispielsweise "Andi HOST 12/84". */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-header {
  grid-template-columns: minmax(0, 1fr) auto clamp(1.7rem, 5dvh, 2rem) !important;
  padding-right: .4rem !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .player-info {
  max-width: 54vw !important;
  gap: clamp(.25rem, 1.4vw, .55rem) !important;
  overflow: visible !important;
  font-size: clamp(.58rem, 2dvh, .74rem) !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .player-info .role-info,
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .player-info .score-info {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .player-info-label {
  display: none !important;
}

html[data-app-device="phone"] body.in-game.spectator-mode:not(.real-game-mode) .player-info .score-info {
  display: none !important;
}

/* Smartphone Online: Die drei globalen Schalter sitzen rechts in der
   Umschaltzeile statt über dem Spiel zu schweben. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch {
  grid-template-columns: auto auto auto minmax(0, 1fr) auto !important;
  padding-inline: .2rem !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons {
  position: static !important;
  inset: auto !important;
  grid-column: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .22rem !important;
  margin: 0 !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons .utility-button {
  width: clamp(1.25rem, 4.2dvh, 1.55rem) !important;
  height: clamp(1.25rem, 4.2dvh, 1.55rem) !important;
  flex: 0 0 clamp(1.25rem, 4.2dvh, 1.55rem) !important;
  box-shadow: none !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons .theme-toggle-button svg,
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons .dice-scheme-button svg {
  width: 88% !important;
  height: 88% !important;
}


/* Smartphone Online: Es existieren immer höchstens sechs Würfel insgesamt.
   Nicht abgelegte Würfel stehen links, abgelegte rechts; zwischen beiden
   Gruppen bleibt ein sichtbarer Abstand. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container {
  --phone-own-die-size: clamp(2.2rem, calc((100cqw - 2rem) / 6), 4.16rem);
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.35rem, 2cqw, .7rem) !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-group {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.14rem, .8cqw, .32rem) !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
  width: var(--phone-own-die-size) !important;
  height: var(--phone-own-die-size) !important;
  flex: 0 0 var(--phone-own-die-size) !important;
}


/* Smartphone: Die Versionsnummer erhält eine eigene zweite Titelzeile. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-header .game-title-heading .app-version {
  display: block !important;
  width: max-content !important;
  margin: .12rem 0 0 !important;
  font-size: .48em !important;
  line-height: 1 !important;
}

/* Smartphone: Die Schalter sind normale Bestandteile der Umschaltzeile und
   besitzen keine schwebende Stapelreihenfolge mehr. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons {
  z-index: auto !important;
  isolation: auto !important;
  align-self: center !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch {
  min-height: clamp(1.55rem, 4.8dvh, 1.9rem) !important;
  overflow: visible !important;
}

/* Smartphone: Inaktive Zugtasten behalten ihre Funktionsfarbe, sind aber
   wesentlich blasser als die momentan nutzbaren Tasten. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions .icon-button:disabled {
  opacity: .32 !important;
  filter: saturate(.5) brightness(1.12) !important;
}

html[data-app-device="phone"] body.real-game-mode #real-game-container.real-layout #real-turn-actions .real-icon-button:disabled {
  opacity: .32 !important;
  filter: saturate(.5) brightness(1.12) !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions .icon-button:not(:disabled):not(.mode-single) {
  opacity: 1 !important;
  filter: none !important;
}

/* Online auf allen Geräten: Grün kennzeichnet einen aktiven Zug, Rot einen
   Zug ohne weitere Möglichkeit. Das ersetzt die bisherige gelbe Kontur. */
body.in-game:not(.real-game-mode) .current-player {
  outline: 3px solid #19a844;
  outline-offset: -3px;
  box-shadow: 0 0 0 1px rgba(25, 168, 68, .24), 0 0 .7rem rgba(25, 168, 68, .28);
}
body.in-game:not(.real-game-mode) #control-panel.turn-active {
  outline: 3px solid #19a844;
  outline-offset: -3px;
  box-shadow: 0 0 0 1px rgba(25, 168, 68, .24), 0 0 .7rem rgba(25, 168, 68, .28);
}

/* V1.9.12: obsolete own-turn-pulse generation removed. */

body.in-game:not(.real-game-mode) .turn-blocked,
body.in-game:not(.real-game-mode) #control-panel.turn-blocked {
  outline: 3px solid #d33a3a !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 1px rgba(211, 58, 58, .24), 0 0 .7rem rgba(211, 58, 58, .3) !important;
}

body.in-game:not(.real-game-mode) .opponent-tab.current-turn {
  box-shadow: inset 0 0 0 2px #19a844 !important;
}

body.in-game:not(.real-game-mode) .opponent-tab.current-turn.turn-blocked {
  box-shadow: inset 0 0 0 2px #d33a3a !important;
}

/* Sichtbare, aber vollständig inaktive Würfel in beiden Online-Bereichen. */
body.in-game:not(.real-game-mode) .inactive-dice-row {
  opacity: .45 !important;
  filter: saturate(.55) brightness(.96) !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ========================================================================
   Finale Geräteprofile für den Online-Modus

   Diese Regeln stehen bewusst am Dateiende. Jede Ansicht wird ausschließlich
   über die von JavaScript gesetzte Kombination aus Gerät UND Orientierung
   angesprochen. So bleiben Smartphone hoch, Smartphone quer, Tablet hoch und
   Tablet quer voneinander unabhängig.
   ======================================================================== */

/* Smartphone – beide Orientierungen: Die drei Hilfsschalter sind normale
   Elemente der Umschaltzeile. Insbesondere der Fragezeichenknopf besitzt keine
   alte schwebende Ebene mehr. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch,
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  transform: none !important;
  isolation: auto !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons .utility-button,
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons .help-button {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  transform: none !important;
  isolation: auto !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons {
  grid-column: 5 !important;
  align-self: center !important;
  justify-self: end !important;
  overflow: visible !important;
}

/* Smartphone quer: Steuerung links, genau ein per Wischen gewähltes Brett
   rechts. Die funktionierende Hochkantansicht wird von keinem dieser Selektoren
   erfasst. */
















/* Im schmalen Steuerungsbereich des Smartphone-Querformats werden Würfel
   bewusst kompakt gehalten. Die große Hochkant-Würfelvariable greift hier
   dadurch nicht mehr. */










/* Tablet hoch: ein Brett und die Steuerung untereinander. Eine eigene,
   begrenzte Würfelgröße verhindert jede Übernahme der Smartphone-Werte. */
html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #dice-selection-container {
  --online-mobile-die-size: clamp(1.35rem, min(5.1cqw, 3.8cqh), 1.75rem) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.18rem, .8cqw, .38rem) !important;
}

html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-group {
  width: auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: clamp(.12rem, .55cqw, .3rem) !important;
}

html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
  width: var(--online-mobile-die-size) !important;
  height: var(--online-mobile-die-size) !important;
  flex: 0 0 var(--online-mobile-die-size) !important;
}

/* Tablet quer: echtes dreispaltiges Layout wie auf dem Desktop. Eigenes Brett
   und Gegnerbereich sind gleich breit; Bedienung und Würfel liegen in der
   mittleren Spalte. Tabs stehen über dem Gegnerbrett und die Gegnerseite kann
   bei mehreren Spielern unabhängig scrollen. */


















/* In der dreispaltigen Tablet-Ansicht werden beide Bretter gleichzeitig
   gezeigt. Die Wischzeile bleibt nur sichtbar, wenn sie Zuschauer enthält. */






/* Firefox-Tablet-Fallback: dieselbe Dreispaltenstruktur wird zusätzlich über
   die synchron gesetzten Klassen abgesichert. Sie gilt ausschließlich für den
   Online-Modus auf Tablets im Querformat. */












/* Smartphone: Die Umschaltbeschriftung entfällt vollständig. Links stehen
   ausschließlich die Zuschauer mit Augensymbol, rechts in einer reservierten
   Spalte die drei Darstellungs-/Hilfsschalter. Dadurch kann nichts mehr
   übereinanderliegen. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(0, auto) !important;
  column-gap: clamp(.25rem, 1.4vw, .55rem) !important;
  align-items: center !important;
  overflow: hidden !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > span {
  display: none !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .spectator-list {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .spectator-list .spectator-label {
  display: none !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-board-switch > .top-utility-buttons {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: max-content !important;
  max-width: max-content !important;
  justify-self: end !important;
}

/* Zuschauer besitzen naturgemäß kein eigenes Brett und keine Zugsteuerung.
   Auf dem Tablet im Querformat erhalten sie deshalb eine vollständige
   Gegneransicht: Tabs links, ausgewähltes Brett rechts. Diese Sonderregel
   verhindert zugleich, dass leere Bedienelemente durch die Spielerregeln
   wieder eingeblendet werden. */










/* Der bisherige Textschalter existiert nicht mehr im HTML. Der Wischhinweis
   sitzt platzsparend rechts in der Überschrift des eigenen Spielbretts. */
.own-board-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.board-swipe-hint {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(1.35rem, 4.2dvh, 1.75rem);
  height: clamp(1.05rem, 3.4dvh, 1.4rem);
  color: #7719e8;
  opacity: .88;
}

.board-swipe-hint svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.board-swipe-hint .swipe-arrow,
.board-swipe-hint .swipe-hand {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) #main-player-board .board-swipe-hint,
html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #main-player-board .board-swipe-hint {
  display: inline-flex !important;
}

/* Im Tablet-Querformat stehen beide Seiten gleichzeitig nebeneinander; dort
   wäre ein Wischsymbol irreführend. */


/* Ohne Zuschauer enthält die ehemalige Umschaltzeile auf dem Tablet keinen
   sichtbaren Inhalt mehr und belegt folglich auch keinen Platz. */
html[data-app-device="tablet"] body.in-game:not(.real-game-mode) .mobile-board-switch:has(> .spectator-list[hidden]) {
  display: none !important;
}

/* ========================================================================
   Ausschließlich Tablet / Online
   ======================================================================== */

/* Kompaktere feste Statusleiste auf Tablets; Smartphone-Werte bleiben
   unangetastet. */
html[data-app-device="tablet"] body.in-game:not(.real-game-mode) {
  --online-status-height: clamp(2.45rem, 6.2dvh, 3.05rem);
  --online-status-font-size: clamp(.58rem, 1.45dvh, .74rem);
}



/* Tablet hoch: Die gesamte Gegnerseite ist der Scrollcontainer. Tabs bleiben
   oben, das Brett behält seine volle Höhe, und Reihe 12 kann oberhalb der
   Statusleiste vollständig erreicht werden. */
html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #opponent-boards,
html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent #opponent-boards {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-tabs {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-view {
  order: 2 !important;
  flex: 0 0 100% !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}


/* Eigene Würfel auf Tablets exakt 15 Prozent größer als die zuletzt
   festgelegten Tabletgrößen. */
html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #dice-selection-container {
  --online-mobile-die-size: clamp(1.5525rem, min(5.865cqw, 4.37cqh), 2.0125rem) !important;
}



html[data-app-device="tablet"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
  width: var(--online-mobile-die-size) !important;
  height: var(--online-mobile-die-size) !important;
  flex: 0 0 var(--online-mobile-die-size) !important;
}

/* Die von JavaScript gesetzte Querformatklasse bildet die letzte CSS-Barriere
   gegen ältere zweispaltige Tabletregeln. */






body.in-game:not(.real-game-mode) .inactive-dice-row .dice-item {
  opacity: 1 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ========================================================================
   Formbasiertes responsives Online-Layout

   Keine Geräte-, Modell-, UA- oder Pixelabfrage: Ausschließlich das aktuelle
   Seitenverhältnis und die Orientierung des tatsächlich sichtbaren Fensters
   entscheiden. Diese Regeln stehen als letzte Ebene hinter allen historischen
   Mobil-/Tablet-Regeln.
   ======================================================================== */

/* Kompaktes Querformat (typische Tablets): drei gleichzeitig sichtbare
   Spalten. Sehr breite Smartphone-Querformate liegen oberhalb von 5:3 und
   werden von dieser Regel nicht berührt. */
@media (orientation: landscape) and (max-aspect-ratio: 5/3) {
  

  

  

  

  

  

  

  body.in-game:not(.real-game-mode) {
    --online-status-height: clamp(2.45rem, 6.2dvh, 3.05rem);
    --online-status-font-size: clamp(.58rem, 1.45dvh, .74rem);
  }

  

  
}

/* Kompaktes Hochformat (typische Tablets): Gegnerseite scrollt vollständig,
   Statusleiste bleibt klein und die eigenen Würfel nutzen die verfügbare
   Breite. Schmale Smartphone-Hochformate liegen unterhalb von 3:5. */
@media (orientation: portrait) and (min-aspect-ratio: 3/5) {
  body.in-game:not(.real-game-mode) {
    --online-status-height: clamp(2.45rem, 6.2dvh, 3.05rem);
    --online-status-font-size: clamp(.58rem, 1.45dvh, .74rem);
  }

  

  body.in-game:not(.real-game-mode) #game-container #game-area #opponent-boards,
  body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent #game-area #opponent-boards {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  body.in-game:not(.real-game-mode) #game-container #game-area #opponent-boards .opponent-tabs {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.in-game:not(.real-game-mode) #game-container #game-area #opponent-boards .opponent-view {
    order: 2 !important;
    flex: 0 0 100% !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  body.in-game:not(.real-game-mode) #game-container #dice-selection-container {
    --online-mobile-die-size: clamp(1.5525rem, min(5.865cqw, 4.37cqh), 2.0125rem) !important;
  }

  body.in-game:not(.real-game-mode) #game-container #dice-selection-container .dice-item {
    width: var(--online-mobile-die-size) !important;
    height: var(--online-mobile-die-size) !important;
    flex: 0 0 var(--online-mobile-die-size) !important;
  }
}

/* ========================================================================
   Verbindliche Online-Aufteilung fuer mobile Geraete im Querformat

   Diese allerletzte Regel entscheidet nur anhand von zwei Dingen:
   1. Die Anwendung laeuft im mobilen Layout (.app-mobile-mode).
   2. Das sichtbare Browserfenster befindet sich im Querformat.

   Keine Tablet-, Smartphone-, Rollen-, Breiten- oder Seitenverhaeltnis-
   Abfrage darf die drei gleichzeitig sichtbaren Spalten verhindern.
   ======================================================================== */
@media (orientation: landscape) {
  

  

  

  

  

  
}

/* ========================================================================
   VERBINDLICHE TABLET-PROPORTIONEN: direkt vor der letzten Detailkaskade;
   zusaetzliche ID-Spezifitaet verhindert ein erneutes Ueberschreiben.
   ======================================================================== */

html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container {
  --online-status-height: clamp(1.2rem, 3dvh, 1.5rem);
  --online-status-font-size: clamp(.4rem, .86dvh, .54rem);
}



@media (orientation: portrait) {
  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container #opponent-boards .opponent-progress {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: clamp(.04rem, .22cqw, .12rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container #opponent-boards .opponent-progress-bead {
    box-sizing: border-box !important;
    width: 88% !important;
    height: auto !important;
    max-width: 1.35rem !important;
    min-width: 0 !important;
    aspect-ratio: 1 !important;
    justify-self: center !important;
    font-size: clamp(.46rem, min(1.65cqw, 1.4cqh), .68rem) !important;
  }
}

@media (orientation: landscape) {
  

  

  

  

  

  

  

  

  

  

  

  

  
}

/* ========================================================================
   FINAL: aktuelle Detailkorrekturen muessen nach allen historischen Regeln
   stehen, damit keine aeltere !important-Deklaration sie erneut aufhebt.
   ======================================================================== */

@media (orientation: portrait) {
  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container #game-area #main-player-board {
    display: flex !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container #game-area #opponent-boards {
    display: none !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent #game-area #main-player-board {
    display: none !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent #game-area #opponent-boards {
    display: flex !important;
  }
}

@media (orientation: landscape) {
  

  
}

html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) {
  --online-status-height: clamp(1.65rem, 4dvh, 2rem);
  --online-status-font-size: clamp(.46rem, 1.05dvh, .62rem);
}



html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-progress {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-progress-bead {
  width: 72% !important;
  height: auto !important;
  max-width: .92rem !important;
  min-width: 0 !important;
  aspect-ratio: 1 !important;
  justify-self: center !important;
  font-size: clamp(.34rem, min(1vw, 1.25dvh), .48rem) !important;
}

html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-die {
  width: clamp(1.05rem, 3.6dvh, 1.4rem) !important;
  height: clamp(1.05rem, 3.6dvh, 1.4rem) !important;
  flex: 0 0 clamp(1.05rem, 3.6dvh, 1.4rem) !important;
}

html.app-mobile-mode[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #dice-selection-container {
  --online-mobile-die-size: clamp(1.7rem, min(6.45cqw, 4.8cqh), 2.2rem) !important;
}



html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
  width: var(--online-mobile-die-size) !important;
  height: var(--online-mobile-die-size) !important;
  flex: 0 0 var(--online-mobile-die-size) !important;
}


/* V1.7.3: interne Schloss-Assets fuer Zuschauerzugang. */
.spectator-lock-emoji {
  display: block !important;
  width: 1.2em !important;
  height: 1.2em !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  vertical-align: -0.08em !important;
  pointer-events: none !important;
}
/* V2.0.233: Das Schloss ist ein echtes IMG. Der Zustand wird ueber src gesetzt,
   nicht mehr ueber mehrere CSS-background-image-Regeln. */

/* Schloss-Button: offen gruen, geschlossen rot. */
.spectator-lock-button.host-controllable.locked,
.spectator-lock-button.host-controllable.locked:hover,
.spectator-lock-button.host-controllable.locked:focus,
.spectator-lock-button.host-controllable.locked:active {
  background: linear-gradient(180deg, #ef6666 0%, #c42525 100%) !important;
  border-color: rgba(255,255,255,.55) !important;
}
.spectator-lock-button.host-controllable.unlocked,
.spectator-lock-button.host-controllable.unlocked:hover,
.spectator-lock-button.host-controllable.unlocked:focus,
.spectator-lock-button.host-controllable.unlocked:active {
  background: linear-gradient(180deg, #54d56d 0%, #168736 100%) !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* Mitspieler sehen nur den Schlosszustand, ohne Button-Darstellung. */
.spectator-lock-button:not(.host-controllable),
.spectator-lock-button:not(.host-controllable):hover,
.spectator-lock-button:not(.host-controllable):focus,
.spectator-lock-button:not(.host-controllable):active {
  width: 1.28em !important;
  min-width: 1.28em !important;
  height: 1.28em !important;
  min-height: 1.28em !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ========================================================================
   V1.7.3 Zuschauer – ausschließlich die bereits vorhandene Gegneransicht.
   Wichtig: Die normalen Spielerlayouts bleiben unverändert. Für Zuschauer
   werden nur eigenes Brett und Steuerung entfernt; die Gegner-Spalte behält
   pro Gerät exakt ihre normale Größe und Position.
   ======================================================================== */

/* Eigenes Brett, eigene Würfel/Steuerung und mobile Brett-Umschaltung existieren
   für Zuschauer nicht. Die hohe Selektor-Spezifität ist absichtlich nötig, weil
   mehrere historische Tablet-/Querformatregeln ebenfalls !important verwenden. */
html body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #main-player-board,
html body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #control-panel {
  display: none !important;
}

html body.in-game.spectator-mode:not(.real-game-mode) #game-container #mobile-board-switch {
  display: none !important;
}

html body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #opponent-boards,
html body.in-game.spectator-mode:not(.real-game-mode) #game-container.mobile-show-opponent #game-area #opponent-boards {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Desktop: exakt dieselben drei Spalten wie für einen aktiven Spieler.
   Die beiden ersten Spalten bleiben leer; die Gegner-Spalte behält daher
   dieselbe Breite wie im normalen Spiel und wird nicht auf Vollbreite gezogen. */
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area {
  display: grid !important;
  grid-template-columns: minmax(330px, 450px) minmax(260px, 380px) minmax(330px, 450px) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "own controls opponent" !important;
  justify-content: center !important;
  align-items: start !important;
}

html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #opponent-boards {
  grid-area: opponent !important;
  width: 100% !important;
  max-width: none !important;
}

/* Smartphone hoch: normale Gegnerseite eines aktiven Spielers, aber ohne
   Steuerungszeile. Wischen zurück zum eigenen Brett ist zusätzlich in JS gesperrt. */
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "controls" "board" !important;
  align-items: stretch !important;
}

html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #opponent-boards {
  grid-area: board !important;
  width: 100% !important;
  height: 100% !important;
}

/* Smartphone quer: die Gegneransicht bleibt exakt die rechte 66%-Spalte des
   normalen Spielerlayouts; die linke Steuerungsspalte bleibt leer. */




/* Tablet hoch: dieselbe einzelne Brett-Spalte wie beim aktiven Spieler. */
html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "controls" "board" !important;
  align-items: stretch !important;
}

html[data-app-device="tablet"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #opponent-boards {
  grid-area: board !important;
  width: 100% !important;
  height: 100% !important;
}

/* Tablet quer: exakt das bestehende 7:5:7-Dreispaltenlayout. Der Zuschauer
   sieht ausschließlich die rechte Gegner-Spalte in ihrer normalen Breite. */




/* Smartphone: Schloss direkt rechts neben dem Titel. Die bestehende zweite
   Versionszeile bleibt erhalten; nur das Schloss sitzt in der ersten Titelzeile. */
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-header .game-title-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  width: 100% !important;
  justify-content: stretch !important;
  align-items: center !important;
  column-gap: .24em !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-header .game-title-heading .app-version {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-header .game-title-heading .spectator-lock-button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  margin-left: 0 !important;
}


/* === merged: online-landscape.css === */
/*
 * Match84 V1.5
 * Eigenstaendiges mobiles Online-Querformat.
 *
 * Diese Datei wird nach style.css geladen und besitzt genau eine Aufgabe:
 * das dreispaltige Querformat ohne verschachtelte Scrollcontainer.
 * Hochformat, Desktop und Realmodus werden nicht angesprochen.
 */

@media (orientation: landscape) {
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container {
    --landscape-status-height: clamp(2.1rem, 6.8dvh, 2.6rem);
    box-sizing: border-box !important;
    padding-bottom: var(--landscape-status-height) !important;
  }

  

  

  

  /* Einziger Scrollcontainer des Gegnerbereichs: die komplette rechte Spalte. */
  

  /* Historische Telefon-/Hochformatregeln erzeugen einen unsichtbaren
     Abstandshalter am Ende des Gegnerbereichs. Im Querformat endet der
     Scrollinhalt exakt mit dem letzten echten Element. */
  

  /* Alte Tablet-Experimente weisen den Kindern noch benannte Grid-Bereiche
     wie opptabs/oppview zu. Ohne die damalige grid-template-areas-Definition
     erzeugt Firefox daraus implizit eine zweite Spalte. Alle echten Kinder
     werden deshalb auf die einzige Spalte des Gegnerbereichs zurueckgesetzt. */
  

  /* Alle Unterelemente liegen im normalen Dokumentfluss und scrollen niemals
     eigenstaendig. Insbesondere bleibt der Holzrahmen eine feste Einheit. */
  

  

  

  

  

  

  

  /* Eine alte Tablet-Regel vergibt jeder board-row eine Mindesthoehe. Zwölf
     solcher Mindesthoehen sind groesser als das Brett und wurden unten
     abgeschnitten. Im Gegnerbrett bestimmt deshalb allein das 12er-Grid die
     Reihenhoehe. */
  

  /* Die Tab-Inhalte koennen auch nach einem Reload niemals breiter als ihre
     Spalte werden. Zwölf gleich breite Rasterzellen ersetzen feste Breiten. */
  

  

  

  

  /* Desktopnahe, aber höhenadaptive Brettproportionen. */
  

  

  

  

  

  /* Gegnerwürfel bewusst kleiner als die eigenen Würfel. */
  

  

  

  

  /* Statushöhe wird direkt gesetzt; keine ältere Variable kann sie aufblähen. */
  
}


/* === merged: layout-stability.css === */
/*
 * Match84 V1.5
 * Eng begrenzte Stabilitaetskorrekturen fuer Lobby und Realmodus.
 * Diese Datei wird zuletzt geladen, damit alte allgemeine Querformatregeln
 * keine nicht verwandten Ansichten mehr ueberschreiben.
 */

/* Tablet-Lobby quer -------------------------------------------------------
   Firefox veraendert beim Ein-/Ausblenden seiner Bedienleisten die sichtbare
   Hoehe. Die Lobby benutzt hier deshalb nur breitebasierte/rem-Werte. Ein
   dauerhaft reservierter Scrollbalken verhindert zusaetzliche Breitenwechsel. */
@media (orientation: landscape) {
  html.app-mobile-mode[data-app-device="tablet"] {
    scrollbar-gutter: stable;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .lobby-panel {
    box-sizing: border-box !important;
    width: min(100%, 56rem) !important;
    max-width: 56rem !important;
    margin: .5rem auto 0 !important;
    padding: .95rem .8rem !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .lobby-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .6rem !important;
    width: 100% !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .real-game-launch,
  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .app-install-button {
    width: min(100%, 430px) !important;
    align-self: center !important;
  }
  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .app-install-button {
    box-sizing: border-box !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .online-game-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: min(100%, 430px) !important;
    align-self: center !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .online-game-actions input,
  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .online-game-actions button {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 2.45rem !important;
    padding: .55rem .8rem !important;
    font-size: .9rem !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .game-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: .7rem !important;
    align-items: center !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .game-card-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: .4rem !important;
  }

  html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .game-card-actions button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: .48rem .65rem !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
  }
}

/* Realmodus --------------------------------------------------------------
   Eine alte, allgemeine Querformatregel erzwingt 3 Spalten. Desktop und
   Tablet quer bekommen deshalb hier ihre eigene, eindeutige 6er-Reihe. */








/* Desktop: Der Abwesenheitstext ist das einzige Kind des sonst zwoelfspaltigen
   Fortschrittsrasters. Er belegt alle Spalten und bleibt dadurch vollstaendig
   innerhalb des Tabs. */

/* V1.7.3 – abschließende Zuschauer-/Schloss-Layoutkorrektur -----------------
   Diese Datei wird zuletzt geladen. Deshalb stehen die Regeln hier, damit die
   speziellen Querformatregeln aus online-landscape.css Zuschauer-Elemente
   nicht versehentlich wieder einblenden. */

/* Desktop-Zuschauer: Gegnerfeld in exakt normaler Gegnerbrett-Breite mittig. */
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area {
  display: grid !important;
  grid-template-columns: minmax(330px, 450px) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "opponent" !important;
  justify-content: center !important;
  align-items: start !important;
}

html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #main-player-board,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #control-panel {
  display: none !important;
}

html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area #opponent-boards {
  grid-area: opponent !important;
  width: 100% !important;
  max-width: 450px !important;
  justify-self: center !important;
}

/* Tablet quer: normale Gegnerbrett-Breite (7/19) beibehalten, aber mittig.
   6:7:6 zentriert dieselbe 7er-Spalte, die im Spielerlayout rechts steht. */
@media (orientation: landscape) {
  

  

  
}

/* Mobile (Telefon + Tablet): Schloss unmittelbar rechts vom Titel.
   Die Version bleibt darunter, sodass der vorhandene Kopf nicht breiter wird. */
html.app-mobile-mode body.in-game:not(.real-game-mode) .game-header .game-title-heading {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: .28em !important;
  row-gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html.app-mobile-mode body.in-game:not(.real-game-mode) .game-header .game-title-heading > .game-title-text {
  order: 1 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

html.app-mobile-mode body.in-game:not(.real-game-mode) .game-header .game-title-heading > .spectator-lock-button {
  order: 2 !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: center !important;
  margin: 0 0 0 .08em !important;
}

html.app-mobile-mode body.in-game:not(.real-game-mode) .game-header .game-title-heading > .app-version {
  order: 3 !important;
  flex: 0 0 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin: .08em 0 0 0 !important;
}




/* =========================================================
   Match84 unified cave theme (merged CSS)
   ========================================================= */
:root {
  --m84-bg: #252a27;
  --m84-bg-2: #3b423d;
  --m84-stone: #747b76;
  --m84-stone-2: #5b625e;
  --m84-stone-3: #8d9690;
  --m84-stone-soft: #9ba49e;
  --m84-surface: #7c857f;
  --m84-surface-2: #636c66;
  --m84-text: #f0f3ef;
  --m84-text-soft: #cbd6cc;
  --m84-cavity: #343b37;
  --m84-cavity-2: #242a27;
  --m84-glass: rgba(226, 238, 230, 0.12);
  --m84-glass-line: rgba(221, 235, 224, 0.82);
  --m84-board-gap: clamp(3px, .38vw, 6px);
  --m84-stack-h: clamp(200px, 34vh, 345px);
  --m84-reservoir-h: clamp(96px, 16vh, 170px);
  --m84-sphere-size: clamp(13px, 1.7vw, 23px);
}

:root[data-theme="dark"] {
  --m84-bg: #151a17;
  --m84-bg-2: #252c27;
  --m84-stone: #555e58;
  --m84-stone-2: #3e4741;
  --m84-stone-3: #68746c;
  --m84-stone-soft: #77837b;
  --m84-surface: #59645d;
  --m84-surface-2: #414b45;
  --m84-text: #eff4ef;
  --m84-text-soft: #c3d0c5;
  --m84-cavity: #29312c;
  --m84-cavity-2: #181e1a;
  --m84-glass: rgba(220, 236, 224, 0.08);
  --m84-glass-line: rgba(210, 228, 214, 0.68);
}

html, body {
  background:
    radial-gradient(circle at 50% -12%, rgba(155,187,160,.16), transparent 28%),
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.07), transparent 18%),
    radial-gradient(circle at 85% 12%, rgba(75,111,80,.12), transparent 20%),
    linear-gradient(180deg, var(--m84-bg-2), var(--m84-bg));
  color: var(--m84-text);
}

body {
  color: var(--m84-text);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 72px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(22px 40px at 3% 0, #242a27 70%, transparent 71%),
    radial-gradient(20px 38px at 12% 0, #303733 70%, transparent 71%),
    radial-gradient(26px 52px at 24% 0, #242a27 70%, transparent 71%),
    radial-gradient(18px 32px at 37% 0, #3a413d 70%, transparent 71%),
    radial-gradient(24px 44px at 51% 0, #242a27 70%, transparent 71%),
    radial-gradient(16px 29px at 63% 0, #303733 70%, transparent 71%),
    radial-gradient(22px 45px at 77% 0, #242a27 70%, transparent 71%),
    radial-gradient(20px 35px at 90% 0, #2c322f 70%, transparent 71%);
  opacity: .72;
}

.app-shell { position: relative; z-index: 1; }

.panel, .modal-overlay .panel, #selection-area, .opponent-tab, .opponent-view-card, .opponent-dice-live, .spectator-list, .spectator-chip, .game-header{
  color: var(--m84-text) !important;
  border: 2px solid rgba(78, 86, 81, .82) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.1)),
    linear-gradient(145deg, var(--m84-stone-soft), var(--m84-stone) 30%, var(--m84-stone-2));
  box-shadow:
    0 12px 25px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(64,72,67,.45);
}

.empty-state-message, .player-info, .opponent-view-head, .opponent-dice-title, .lobby-heading h2, .brand-block p, .game-name-row, .opponent-heading h2{
  color: var(--m84-text) !important;
}

.brand-block h1,
.game-header .game-title-heading {
  color: #eef2ef;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
}

.match84-brand {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: .14em;
  line-height: .8;
  vertical-align: middle;
  white-space: nowrap;
}
.match84-stack {
  display: grid;
  gap: .08em;
  align-content: center;
}
.match84-word {
  font-size: .56em;
  font-weight: 900;
  letter-spacing: .08em;
}
.match84-formula {
  font-size: .36em;
  font-weight: 850;
  letter-spacing: .04em;
  color: #ced8d1;
}
.match84-year {
  font-size: 1em;
  font-weight: 900;
  letter-spacing: -.045em;
  color: #ffb25d;
  text-shadow: 0 0 10px rgba(255,165,77,.38), 0 0 2px rgba(238,244,239,.9);
}
.app-version { color: #ced8d1 !important; }

.top-utility-buttons .utility-button,
#host-controls button,
#real-game-header-actions > button,
.real-game-launch,
.app-install-button,
.lobby-invite-button,
.online-game-actions button,
#create-pin-confirm,
#create-pin-cancel,
#host-pin-confirm,
#host-pin-cancel,
.create-pin-actions button,
.seat-picker-head .compact,
.seat-row-actions button,
.modal-head .compact,
.game-end-actions button,
.game-list button,
.resume-session-entry button {
  border-radius: 14px !important;
  border: 2px solid rgba(80, 89, 84, .95) !important;
  box-shadow:
    0 6px 10px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(72,81,76,.45) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.22);
}

#turn-actions{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
  width: 100%;
}
.icon-actions { justify-content: stretch !important; }
.turn-actions { margin-bottom: 12px; }
#turn-actions .icon-button{
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  border: var(--btn-shell-border, 1px) solid rgba(77, 87, 81, .95) !important;
  color: #f1f4f2 !important;
  box-shadow:
    0 0 var(--btn-glow-blur, 13px) var(--btn-glow),
    0 var(--btn-shadow-y, 8px) var(--btn-shadow-blur, 12px) rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -3px 0 rgba(0,0,0,.24) !important;
}
.icon-button svg{
  width: var(--btn-icon-size, 28px) !important;
  height: var(--btn-icon-size, 28px) !important;
  stroke-width: 2.3 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
#roll-dice-button{
  --btn-face-hi: #a1e3ff !important;
  --btn-face-mid: #5ab8ee !important;
  --btn-face-low: #2d86bb !important;
  --btn-face-border: #245f82 !important;
  --btn-glow: rgba(72,184,238,.48) !important;
}
#toggle-mode-button{
  --btn-face-hi: #cf9bff !important;
  --btn-face-mid: #984bf6 !important;
  --btn-face-low: #6821c8 !important;
  --btn-face-border: #5a1ca9 !important;
  --btn-glow: rgba(152,75,246,.52) !important;
}
#select-dice-button, #secure-pair-button{
  --btn-face-hi: #5ae989 !important;
  --btn-face-mid: #27b351 !important;
  --btn-face-low: #1b7a37 !important;
  --btn-face-border: #18662f !important;
  --btn-glow: rgba(39,179,81,.50) !important;
}
#end-turn-button{
  --btn-face-hi: #f1967d !important;
  --btn-face-mid: #cb6045 !important;
  --btn-face-low: #8d3726 !important;
  --btn-face-border: #742e20 !important;
  --btn-glow: rgba(203,96,69,.48) !important;
}
.icon-button:disabled{
  filter: grayscale(.24) brightness(.84);
  opacity: .8;
  box-shadow:
    0 5px 8px rgba(0,0,0,.24),
    0 2px 0 rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.24) !important;
}

#selection-area {
  margin-top: 10px !important;
  border-color: rgba(83, 93, 87, .95) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)),
    linear-gradient(145deg, #828b86, #68716c) !important;
}




/* Board layout */
html body.in-game:not(.real-game-mode) #board-rows,
html body.in-game:not(.real-game-mode) .opponent-board-rows,
html body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent .opponent-board-rows,
html body.in-game:not(.real-game-mode).mobile-opponent-page .opponent-board-rows {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--m84-board-gap) !important;
  padding: 8px 6px 10px !important;
  align-items: end !important;
  overflow: visible !important;
}

html body.in-game:not(.real-game-mode) .board-row.match84-shaft {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  /* Style-Aenderungen in einer Reihe muessen nicht das komplette 12-Spalten-
     Brett invalidieren. Layout/Paint bleiben unangetastet, damit Glow-Effekte
     weiterhin ausserhalb des Schachts sichtbar sein koennen. */
  contain: style;
}
html body.in-game:not(.real-game-mode) .match84-shaft .row-number {
  width: 100% !important;
  text-align: center !important;
  padding: 0 0 6px !important;
  color: var(--shaft-color) !important;
  font-size: clamp(.9rem, 1.2vw, 1.05rem) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(242,247,243,.45), 0 2px 3px rgba(0,0,0,.45);
}
html body.in-game:not(.real-game-mode) .match84-shaft .row-content.match84-shaft-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
html body.in-game:not(.real-game-mode) .match84-drop-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(7, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  height: var(--m84-stack-h) !important;
  min-height: 0 !important;
  padding: 10px 2px 8px !important;
  overflow: hidden !important;
  border: 3px solid rgba(83,93,87,.95) !important;
  border-radius: 20px 20px 14px 14px !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(137,171,143,.18), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 17% 83%, rgba(255,255,255,.025)),
    linear-gradient(180deg, var(--m84-shaft-bg), var(--m84-shaft-bg-2)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 0 0 2px rgba(141,158,147,.35),
    inset 0 -10px 16px rgba(0,0,0,.18),
    0 6px 12px rgba(0,0,0,.12) !important;
  position: relative;
}
html body.in-game:not(.real-game-mode) .match84-drop-stack::before {
  content: "";
  position: absolute;
  inset: 12px 10px 12px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(14.2857% - 1px),
      rgba(158,176,164,.18) calc(14.2857% - 1px),
      rgba(158,176,164,.18) 14.2857%);
  pointer-events: none;
}
html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop:not(.earned-drop-falling) {
  width: var(--m84-drop-w) !important;
  height: var(--m84-drop-h) !important;
  border-radius: 50% 50% 56% 56% / 34% 34% 68% 68% !important;
  clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  transform: none !important;
  border: 0 !important;
  background-image:
    radial-gradient(circle at 54% 51%, rgba(255,255,255,.15) 0 4%, rgba(255,255,255,.08) 8%, transparent 17%),
    radial-gradient(ellipse at 50% 23%, rgba(255,255,255,.26) 0 13%, rgba(255,255,255,.09) 22%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.10) 0 7%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.16) 14%, rgba(255,255,255,.06) 32%, rgba(255,255,255,.025) 50%, rgba(0,0,0,.04) 72%, rgba(0,0,0,.18) 100%) !important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.56),
    inset 0 13px 12px rgba(255,255,255,.06),
    inset -3px -5px 7px rgba(0,0,0,.20),
    inset 0 -2px 6px rgba(0,0,0,.10),
    0 2px 5px rgba(0,0,0,.32) !important;
  filter: saturate(1.10) contrast(1.04) brightness(1.06) drop-shadow(0 1px 1.6px rgba(0,0,0,.20)) !important;
}

html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 29% !important;
  height: 66% !important;
  left: 12% !important;
  top: 16% !important;
  border-radius: 76% 40% 68% 44% / 42% 34% 72% 60% !important;
  background: linear-gradient(156deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.86) 15%, rgba(255,255,255,.46) 43%, rgba(255,255,255,.16) 66%, transparent 85%) !important;
  filter: blur(.34px) !important;
  transform: rotate(14deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop::after {
  content: "" !important;
  position: absolute !important;
  width: 18% !important;
  height: 61% !important;
  right: 12% !important;
  top: 18% !important;
  border-radius: 38% 76% 52% 70% / 34% 46% 68% 60% !important;
  background: linear-gradient(204deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.58) 24%, rgba(255,255,255,.22) 54%, transparent 84%) !important;
  filter: blur(.34px) !important;
  transform: rotate(-12deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop.pending-bead {
  outline: 3px solid #ffe18f !important;
  outline-offset: 2px !important;
  box-shadow:
    inset 3px 3px 5px rgba(255,255,255,.46),
    0 0 10px rgba(255,214,111,.92),
    0 2px 5px rgba(0,0,0,.35) !important;
}

.match84-reservoir-wrap {
  gap: 5px !important;
}
.match84-reservoir {
  position: relative;
  width: 74% !important;
  height: var(--m84-reservoir-h) !important;
  border: 2px solid rgba(83,93,87,.95) !important;
  border-radius: 20px 20px 18px 18px !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(137,171,143,.18), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 17% 83%, rgba(255,255,255,.025)),
    linear-gradient(180deg, var(--m84-shaft-bg), var(--m84-shaft-bg-2)) !important;
  box-shadow: 0 5px 11px rgba(0,0,0,.24) !important;
  overflow: hidden;
}
.match84-reservoir::before,
.match84-reservoir::after {
  content: none !important;
  display: none !important;
}
.match84-water {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 12px 12px 14px 14px;
  opacity: 1;
  background-color: var(--shaft-color) !important;
  background-image:
    radial-gradient(ellipse at 52% 20%, rgba(255,255,255,.18) 0 12%, rgba(255,255,255,.06) 20%, transparent 38%),
    radial-gradient(ellipse at 52% 78%, rgba(255,255,255,.10) 0 6%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.11) 15%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.015) 50%, rgba(0,0,0,.05) 74%, rgba(0,0,0,.17) 100%) !important;
  box-shadow:
    inset 1px 2px 3px rgba(255,255,255,.40),
    inset -2px -4px 6px rgba(0,0,0,.18),
    inset 0 -2px 5px rgba(0,0,0,.09);
  transition: height .32s ease;
}
.match84-water::before {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  top: -3px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shaft-color) 82%, white 18%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12);
  opacity: 1;
}
.match84-water::after {
  content: "";
  position: absolute;
  left: 13%;
  top: 12%;
  width: 17%;
  height: 62%;
  border-radius: 74% 38% 66% 44% / 44% 34% 70% 58%;
  background: linear-gradient(156deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.50) 18%, rgba(255,255,255,.22) 46%, rgba(255,255,255,.07) 66%, transparent 84%);
  filter: blur(.32px);
  opacity: .72;
  pointer-events: none;
}
.match84-progress {
  color: var(--shaft-color);
  font-size: clamp(.68rem, .95vw, .9rem) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.match84-shaft.row-complete .match84-drop-stack {
  opacity: .36;
}
.match84-shaft.row-complete .match84-reservoir {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--shaft-color) 50%, transparent), 0 5px 11px rgba(0,0,0,.24) !important;
}

/* Opponent tabs */
.opponent-tabs { gap: 10px !important; }
.opponent-tab {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)),
    linear-gradient(145deg, #89918c, #6c746f) !important;
  color: var(--m84-text) !important;
}
.opponent-tab.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.05)),
    linear-gradient(145deg, #a7afa9, #737c76) !important;
  border-bottom-color: #9ad464 !important;
}
.opponent-tab.current-turn { box-shadow: inset 0 0 0 2px #f3d37d, 0 6px 10px rgba(0,0,0,.22) !important; }
.opponent-progress-bead {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(47,56,51,.66) !important;
  box-shadow: inset 2px 2px 3px rgba(255,255,255,.36), inset -2px -2px 3px rgba(0,0,0,.18) !important;
}
.opponent-progress-bead .opponent-progress-value,
.opponent-progress-bead { transform: none !important; }
.opponent-progress-bead.complete { opacity: .22 !important; }

#main-player-board,
#opponent-boards {
  min-height: 540px;
}
#main-player-board h2,
#opponent-boards h2 { color: #eef3ef !important; }

/* Inputs and lobby */
input, .game-name-input {
  background: rgba(61,70,65,.68) !important;
  border-color: rgba(222,233,226,.28) !important;
  color: #f1f5f2 !important;
}
input::placeholder { color: rgba(228,237,231,.7) !important; }

/* Responsive tuning */
@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --m84-stack-h: clamp(165px, 34vh, 230px);
    --m84-reservoir-h: clamp(74px, 12.6vh, 112px);
    --m84-sphere-size: clamp(10px, 3.2vw, 16px);
  }
  .game-header .game-title-heading .match84-brand { font-size: 1.36rem; }
  .brand-block h1 .match84-brand { font-size: 1.82rem; }
  #main-player-board, #opponent-boards { min-height: 460px; }
  .icon-button{ height: 48px !important; border-radius: 14px !important; }
  .icon-button svg{ width: var(--btn-icon-size, 24px) !important; height: var(--btn-icon-size, 24px) !important; }
}

@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --m84-stack-h: clamp(118px, 31vh, 175px);
    --m84-reservoir-h: clamp(54px, 11vh, 92px);
    --m84-sphere-size: clamp(10px, 1.25vw, 15px);
  }
  
}

html[data-app-device="tablet"] {
  --m84-stack-h: clamp(175px, 30vh, 270px);
  --m84-reservoir-h: clamp(84px, 13vh, 135px);
  --m84-sphere-size: clamp(12px, 1.8vw, 19px);
}

/* Keep spectator/mobile layout intact but ensure board grid stays visible */
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container #main-player-board #board-rows,
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container #opponent-boards .opponent-board-rows,
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container #game-area #opponent-boards .opponent-board-rows,
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.mobile-show-opponent #game-area #opponent-boards .opponent-board-rows {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  height: auto !important;
  overflow: visible !important;
}

/* Match84-Tropfen werden NICHT mehr von der alten Kugel-/Perlengroesse
   (.bead / --m84-sphere-size) ueberschrieben. Ihre Breite und Hoehe kommen
   ausschliesslich aus den Match84-Tropfenregeln weiter unten. */


/* =========================================================
   Match84 – final visual correction from supplied mockup
   Drops, dark board frame, organic cave UI. Visual only.
   ========================================================= */

:root {
  --m84-board-frame: #303633;
  --m84-board-frame-2: #1b211e;
  --m84-board-edge: #66736a;
  --m84-shaft-bg: #303a34;
  --m84-shaft-bg-2: #202722;
  --m84-button-edge: #4f5953;
  --m84-drop-w: clamp(15px, 1.7vw, 24px);
  --m84-drop-h: clamp(21px, 2.25vw, 32px);
}

/* The game board itself is deliberately NOT brown.  The cave ambience stays
   around it, while the playable frame becomes dark neutral stone/graphite. */
html body.in-game:not(.real-game-mode) #main-player-board,
html body.in-game:not(.real-game-mode) #opponent-boards,
html body.in-game:not(.real-game-mode) .opponent-view-card {
  background:
    radial-gradient(circle at 25% 0%, rgba(255,255,255,.045), transparent 32%),
    linear-gradient(160deg, var(--m84-board-frame), var(--m84-board-frame-2)) !important;
  border-color: var(--m84-board-edge) !important;
  color: #f4eadb !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 0 1px rgba(0,0,0,.32) !important;
}

html body.in-game:not(.real-game-mode) #main-player-board h2,
html body.in-game:not(.real-game-mode) #opponent-boards h2,
html body.in-game:not(.real-game-mode) .opponent-view-card h3 {
  color: #f5ead8 !important;
}

/* Tall recessed cave shafts inside the neutral board frame. */
html body.in-game:not(.real-game-mode) .match84-drop-stack {
  border: 2px solid #68766d !important;
  border-radius: 18px 18px 13px 13px !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(137,171,143,.18), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 17% 83%, rgba(255,255,255,.025)),
    linear-gradient(180deg, var(--m84-shaft-bg), var(--m84-shaft-bg-2)) !important;
  box-shadow:
    inset 4px 0 8px rgba(0,0,0,.24),
    inset -4px 0 8px rgba(0,0,0,.24),
    inset 0 2px 0 rgba(222,238,225,.08),
    0 3px 7px rgba(0,0,0,.24) !important;
}

/* Seven stable compartments: the remaining drops stay at their original
   positions and do not slide down. */
html body.in-game:not(.real-game-mode) .match84-drop-stack::before {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(14.2857% - 1px),
      rgba(151,177,157,.15) calc(14.2857% - 1px),
      rgba(151,177,157,.15) 14.2857%) !important;
}

/* Real teardrop silhouette instead of spheres. Pointed at the top, rounded
   underneath, with the glossy highlight seen in the concept artwork. */
html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop:not(.earned-drop-falling) {
  width: var(--m84-drop-w) !important;
  height: var(--m84-drop-h) !important;
  border-radius: 48% 48% 54% 54% / 35% 35% 66% 66% !important;
  clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  transform: none !important;
  border: 0 !important;
  background-image:
    radial-gradient(ellipse at 52% 21%, rgba(255,255,255,.18) 0 12%, rgba(255,255,255,.06) 20%, transparent 38%),
    radial-gradient(ellipse at 52% 78%, rgba(255,255,255,.12) 0 6%, rgba(255,255,255,.04) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.12) 15%, rgba(255,255,255,.05) 34%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.05) 74%, rgba(0,0,0,.16) 100%) !important;
  box-shadow:
    inset 1px 2px 3px rgba(255,255,255,.44),
    inset 0 10px 10px rgba(255,255,255,.05),
    inset -2px -4px 6px rgba(0,0,0,.18),
    inset 0 -2px 5px rgba(0,0,0,.09),
    0 2px 5px rgba(0,0,0,.32) !important;
  filter: saturate(1.08) contrast(1.03) brightness(1.03) drop-shadow(0 1px 1.5px rgba(0,0,0,.18));
}

html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 27% !important;
  height: 62% !important;
  left: 14% !important;
  top: 18% !important;
  border-radius: 74% 38% 66% 44% / 44% 34% 70% 58% !important;
  background: linear-gradient(156deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.76) 18%, rgba(255,255,255,.36) 46%, rgba(255,255,255,.12) 66%, transparent 84%) !important;
  filter: blur(.32px) !important;
  transform: rotate(14deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop::after {
  content: "" !important;
  position: absolute !important;
  width: 17% !important;
  height: 58% !important;
  right: 14% !important;
  top: 21% !important;
  border-radius: 38% 74% 50% 68% / 36% 46% 66% 58% !important;
  background: linear-gradient(204deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.48) 24%, rgba(255,255,255,.18) 52%, transparent 82%) !important;
  filter: blur(.34px) !important;
  transform: rotate(-13deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop.pending-bead {
  outline: 3px solid #ffd46e !important;
  outline-offset: 2px !important;
  filter: saturate(1.12) brightness(1.08) !important;
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.4),
    0 0 10px rgba(255,202,76,.9),
    0 2px 5px rgba(0,0,0,.38) !important;
}

/* Reservoirs use the same neutral dark material as the shafts. */
.match84-reservoir {
  width: 76% !important;
  border: 2px solid rgba(83,93,87,.95) !important;
  border-top-color: rgba(83,93,87,.95) !important;
  border-radius: 16px 16px 19px 19px !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(137,171,143,.18), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 17% 83%, rgba(255,255,255,.025)),
    linear-gradient(180deg, var(--m84-shaft-bg), var(--m84-shaft-bg-2)) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.3) !important;
}
.match84-reservoir::before,
.match84-reservoir::after {
  content: none !important;
  display: none !important;
}

/* Buttons: same four colours and the same icon-only principle as the concept,
   with neutral dark bezels rather than brown framing. */
#turn-actions .icon-button{
  border: var(--btn-shell-border, 1px) solid var(--btn-shell-edge) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--btn-shell-top) 0%, #464c52 18%, #353a40 48%, var(--btn-shell-bottom) 100%) !important;
  box-shadow:
    0 0 var(--btn-glow-blur, 11px) var(--btn-glow),
    0 var(--btn-shadow-y, 6px) var(--btn-shadow-blur, 11px) rgba(0,0,0,.34),
    0 2px 0 rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.3) !important;
}
#roll-dice-button{
  --btn-face-hi: #a1e3ff !important;
  --btn-face-mid: #5ab8ee !important;
  --btn-face-low: #2d86bb !important;
  --btn-face-border: #245f82 !important;
}
#toggle-mode-button{
  --btn-face-hi: #cf9bff !important;
  --btn-face-mid: #984bf6 !important;
  --btn-face-low: #6821c8 !important;
  --btn-face-border: #5a1ca9 !important;
}
#select-dice-button, #secure-pair-button{
  --btn-face-hi: #5ae989 !important;
  --btn-face-mid: #27b351 !important;
  --btn-face-low: #1b7a37 !important;
  --btn-face-border: #18662f !important;
}
#end-turn-button{
  --btn-face-hi: #f1967d !important;
  --btn-face-mid: #cb6045 !important;
  --btn-face-low: #8d3726 !important;
  --btn-face-border: #742e20 !important;
}

/* Distinct row labels remain readable; especially yellow now sits on dark
   graphite instead of beige. */
html body.in-game:not(.real-game-mode) .match84-shaft .row-number,
.match84-progress {
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
}

/* Tabs use the drop silhouette, but keep their numeric content readable. */
.opponent-progress-bead {
  border-radius: 48% 48% 54% 54% / 35% 35% 66% 66% !important;
  clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  border: 0 !important;
}
.opponent-progress-bead .opponent-progress-value {
  transform: none !important;
}

@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --m84-drop-w: clamp(10px, 3vw, 15px);
    --m84-drop-h: clamp(14px, 4vw, 21px);
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --m84-drop-w: clamp(9px, 1.2vw, 14px);
    --m84-drop-h: clamp(12px, 1.7vw, 19px);
  }
}


/* Match84 – Feinabstimmung: Grau + Moosgrün, breitere Desktop-Schächte,
   klar sichtbarer Wasserstand. Rein visuell. */
:root {
  --m84-moss: #718b72;
  --m84-moss-soft: #91a993;
}

html, body {
  background-image:
    radial-gradient(ellipse at 8% 8%, rgba(121,151,124,.14), transparent 25%),
    radial-gradient(ellipse at 90% 18%, rgba(101,132,105,.10), transparent 28%),
    linear-gradient(155deg, var(--m84-bg-2), var(--m84-bg)) !important;
}

.panel,
.modal-overlay .panel,
.game-header {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(174,203,178,.08), transparent 32%),
    linear-gradient(145deg, var(--m84-stone-soft), var(--m84-stone) 34%, var(--m84-stone-2)) !important;
  border-color: color-mix(in srgb, var(--m84-moss) 58%, #525b55) !important;
}

html body.in-game:not(.real-game-mode) #main-player-board,
html body.in-game:not(.real-game-mode) #opponent-boards,
html body.in-game:not(.real-game-mode) .opponent-view-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(134,168,140,.08), transparent 30%),
    linear-gradient(160deg, var(--m84-board-frame), var(--m84-board-frame-2)) !important;
  border-color: var(--m84-board-edge) !important;
}

html body.in-game:not(.real-game-mode) .match84-drop-stack {
  border-color: #68766d !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(137,171,143,.18), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 17% 83%, rgba(255,255,255,.025)),
    linear-gradient(180deg, var(--m84-shaft-bg), var(--m84-shaft-bg-2)) !important;
}

/* Flüssigkeit ist deckend wie die Tropfen; der Behälter selbst bleibt ohne Glas-Overlay. */
.match84-reservoir { isolation: isolate; }
.match84-water {
  display: block;
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  opacity: 1 !important;
  z-index: 1 !important;
  border-radius: 10px 10px 15px 15px !important;
  background-color: var(--shaft-color) !important;
  background-image:
    radial-gradient(ellipse at 52% 20%, rgba(255,255,255,.18) 0 12%, rgba(255,255,255,.06) 20%, transparent 38%),
    radial-gradient(ellipse at 52% 78%, rgba(255,255,255,.10) 0 6%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.11) 15%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.015) 50%, rgba(0,0,0,.05) 74%, rgba(0,0,0,.17) 100%) !important;
  box-shadow:
    inset 1px 2px 3px rgba(255,255,255,.40),
    inset -2px -4px 6px rgba(0,0,0,.18),
    inset 0 -2px 5px rgba(0,0,0,.09) !important;
}
.match84-water::before {
  height: 6px !important;
  top: -2px !important;
  background: color-mix(in srgb, var(--shaft-color) 82%, white 18%) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12) !important;
  opacity: 1 !important;
}
.match84-water::after {
  content: "" !important;
  position: absolute !important;
  left: 13% !important;
  top: 12% !important;
  width: 17% !important;
  height: 62% !important;
  border-radius: 74% 38% 66% 44% / 44% 34% 70% 58% !important;
  background: linear-gradient(156deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.50) 18%, rgba(255,255,255,.22) 46%, rgba(255,255,255,.07) 66%, transparent 84%) !important;
  filter: blur(.32px) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}
.match84-reservoir::before,
.match84-reservoir::after {
  content: none !important;
  display: none !important;
}

/* Auf Desktop gibt es genug Breite: eigene und gegnerische Bretter wachsen,
   die mittlere Bedien-Spalte bleibt kompakt. */
@media (min-width: 1050px) {
  body.in-game:not(.real-game-mode) .app-shell {
    width: min(1660px, 100%) !important;
  }
  body.in-game:not(.real-game-mode) #game-area {
    grid-template-columns: minmax(430px, 510px) minmax(250px, 320px) minmax(430px, 510px) !important;
    gap: 16px !important;
  }
  body.in-game:not(.real-game-mode) #main-player-board,
  body.in-game:not(.real-game-mode) #opponent-boards {
    padding-inline: 16px !important;
  }
  body.in-game:not(.real-game-mode) #board-rows,
  body.in-game:not(.real-game-mode) .opponent-board-rows {
    gap: clamp(4px, .42vw, 7px) !important;
  }
}

/* =========================================================
   Match84 – Layout/Palette refinement 2026-08-19
   Visual only: muted green board frame, smaller drops, wider desktop,
   single-row dice and flat grey opponent tabs.
   ========================================================= */

/* Light mode is deliberately lighter than dark mode, while retaining the
   grey/green cave character. */
:root:not([data-theme="dark"]) {
  --m84-bg: #707a74;
  --m84-bg-2: #929b95;
  --m84-stone: #aeb7b1;
  --m84-stone-2: #909a94;
  --m84-stone-3: #c1c8c3;
  --m84-stone-soft: #c8cfca;
  --m84-surface: #b5bdb8;
  --m84-surface-2: #9ea8a2;
  --m84-text: #1d2821;
  --m84-text-soft: #3d4d43;
  --m84-board-frame: #59645e;
  --m84-board-frame-2: #46514b;
  --m84-board-edge: #738477;
  --m84-shaft-bg: #46514b;
  --m84-shaft-bg-2: #354039;
  --m84-button-edge: #64736a;
}

:root[data-theme="dark"] {
  --m84-board-frame: #303733;
  --m84-board-frame-2: #1d231f;
  --m84-board-edge: #58665d;
  --m84-shaft-bg: #303a34;
  --m84-shaft-bg-2: #202722;
}

/* The old wooden frame belonged to the previous board. Replace it everywhere
   the Match84 board uses board-rows/match84-drop-board. */
html body.in-game:not(.real-game-mode) #board-rows.match84-drop-board,
html body.in-game:not(.real-game-mode) .opponent-board-rows.match84-drop-board,
html body.in-game:not(.real-game-mode) #board-rows,
html body.in-game:not(.real-game-mode) .opponent-board-rows {
  border: 7px solid #667a69 !important;
  border-left-width: 9px !important;
  border-right-width: 9px !important;
  border-radius: 12px !important;
  background: #3d4842 !important;
  box-shadow:
    inset 0 0 0 2px #8fa091,
    inset 0 0 14px rgba(31, 48, 37, .34),
    0 5px 12px rgba(0, 0, 0, .23) !important;
}

:root[data-theme="dark"] body.in-game:not(.real-game-mode) #board-rows.match84-drop-board,
:root[data-theme="dark"] body.in-game:not(.real-game-mode) .opponent-board-rows.match84-drop-board,
:root[data-theme="dark"] body.in-game:not(.real-game-mode) #board-rows,
:root[data-theme="dark"] body.in-game:not(.real-game-mode) .opponent-board-rows {
  border-color: #56685a !important;
  background: #222b26 !important;
  box-shadow:
    inset 0 0 0 2px #65776a,
    inset 0 0 14px rgba(0, 0, 0, .42),
    0 5px 12px rgba(0, 0, 0, .32) !important;
}

/* Smaller drops: enough air around each silhouette so no side is clipped. */
:root {
  --m84-drop-w: clamp(11px, 1.22vw, 18px);
  --m84-drop-h: clamp(16px, 1.68vw, 25px);
}

html body.in-game:not(.real-game-mode) .match84-drop-stack {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* Flat neutral opponent tabs, no brown gradient. */
.opponent-tab,
.opponent-tab:hover:not(:disabled),
.opponent-tab.active {
  background-image: none !important;
}

:root:not([data-theme="dark"]) .opponent-tab {
  background-color: #29312c !important;
  color: #edf3ee !important;
  border-color: #4d5952 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
:root:not([data-theme="dark"]) .opponent-tab:hover:not(:disabled) {
  background-color: #343d37 !important;
}
:root:not([data-theme="dark"]) .opponent-tab.active {
  background-color: #d0d6d2 !important;
  color: #18221c !important;
  border-color: #829287 !important;
  border-bottom-color: #6f8a72 !important;
}
:root:not([data-theme="dark"]) .opponent-tab-top small,
:root:not([data-theme="dark"]) .opponent-host-label {
  color: #435149 !important;
}

:root[data-theme="dark"] .opponent-tab {
  background-color: #252d28 !important;
  color: #edf3ee !important;
  border-color: #465149 !important;
}
:root[data-theme="dark"] .opponent-tab:hover:not(:disabled) {
  background-color: #303a34 !important;
}
:root[data-theme="dark"] .opponent-tab.active {
  background-color: #4b5850 !important;
  border-bottom-color: #7f9a82 !important;
}

/* Desktop: header and game content share exactly the same outer width.
   The control column is wide enough to keep six dice on one line. */
@media (min-width: 1200px) {
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) .app-shell {
    width: min(1640px, calc(100vw - 32px)) !important;
    max-width: none !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) .game-header {
    width: min(1640px, calc(100vw - 32px)) !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-area {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 350px) minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #main-player-board,
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #opponent-boards {
    width: 100% !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #control-panel {
    width: 100% !important;
    min-width: 330px !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #dice-selection-container {
    width: 100% !important;
    overflow: visible !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #dice-selection-container .dice-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #board-rows,
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) .opponent-board-rows {
    gap: clamp(5px, .45vw, 8px) !important;
  }
}

/* Phone/tablet drops also get a little more breathing room, but their layout
   structure is unchanged. */
@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --m84-drop-w: clamp(8px, 2.35vw, 12px);
    --m84-drop-h: clamp(11px, 3.25vw, 17px);
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --m84-drop-w: clamp(8px, 1vw, 12px);
    --m84-drop-h: clamp(11px, 1.45vw, 17px);
  }
}

html[data-app-device="tablet"] {
  --m84-drop-w: clamp(10px, 1.45vw, 15px);
  --m84-drop-h: clamp(14px, 1.95vw, 21px);
}


/* =========================================================
   Match84 – grey cleanup + progress barrier
   2026-08-19, purely visual except for the render-only barrier position.
   ========================================================= */

/* Any remaining cave surfaces are neutral grey with a restrained moss tint. */
body::before {
  background:
    radial-gradient(22px 40px at 3% 0, #252c28 70%, transparent 71%),
    radial-gradient(20px 38px at 12% 0, #343c37 70%, transparent 71%),
    radial-gradient(26px 52px at 24% 0, #282f2b 70%, transparent 71%),
    radial-gradient(18px 32px at 37% 0, #3a423d 70%, transparent 71%),
    radial-gradient(24px 44px at 51% 0, #29302c 70%, transparent 71%),
    radial-gradient(16px 29px at 63% 0, #343c37 70%, transparent 71%),
    radial-gradient(22px 45px at 77% 0, #272e2a 70%, transparent 71%),
    radial-gradient(20px 35px at 90% 0, #303733 70%, transparent 71%) !important;
}

#selection-area {
  border-color: #657069 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.06)),
    linear-gradient(145deg, #89928c, #6e7872) !important;
}
:root[data-theme="dark"] #selection-area {
  border-color: #4c5951 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12)),
    linear-gradient(145deg, #47524b, #323c36) !important;
}



/* Pending drops keep their brighter state and gain a narrow, soft halo in
   exactly the row colour. drop-shadow follows the teardrop silhouette. */
html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop.pending-bead {
  outline: 0 !important;
  filter:
    saturate(1.12)
    brightness(1.08)
    drop-shadow(0 0 1px var(--shaft-color))
    drop-shadow(0 0 2.5px var(--shaft-color)) !important;
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.40),
    inset -4px -5px 7px rgba(0,0,0,.20),
    0 2px 5px rgba(0,0,0,.34) !important;
}

/* Moving mechanical barrier. Its position is supplied by renderBoard() and
   includes both secured and currently pending drops. */
.match84-drop-barrier {
  position: absolute !important;
  left: 9% !important;
  right: 9% !important;
  top: auto !important;
  bottom: -1px !important;
  width: auto !important;
  height: 2px !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #95a39b !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.42), 0 0 2px rgba(170,194,178,.20) !important;
  pointer-events: none !important;
  z-index: 7 !important;
}
.match84-drop-barrier.barrier-at-top {
  top: -1px !important;
  bottom: auto !important;
}
.match84-drop-barrier::before,
.match84-drop-barrier::after {
  content: none !important;
  display: none !important;
}

/* A completed shaft keeps the final barrier fully visible at the top. */
html body.in-game:not(.real-game-mode) .match84-shaft.row-complete .match84-drop-stack {
  opacity: 1 !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(137,171,143,.12), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 17% 83%, rgba(255,255,255,.018)),
    linear-gradient(180deg, color-mix(in srgb, var(--m84-shaft-bg) 80%, #000 20%), color-mix(in srgb, var(--m84-shaft-bg-2) 84%, #000 16%)) !important;
}

/* =========================================================
   Match84 – light-mode surface refinement
   Header = board palette, neutral opponent UI, no faux stalactites.
   Visual only.
   ========================================================= */

/* Der Hellmodus wird bewusst heller und neutraler; der Dunkelmodus bleibt
   über seine eigenen Variablen unverändert. */
:root:not([data-theme="dark"]) {
  --m84-bg: #adb5b0;
  --m84-bg-2: #c5cbc7;
  --m84-stone: #c7ceca;
  --m84-stone-2: #aeb7b1;
  --m84-stone-3: #d9ddda;
  --m84-stone-soft: #d5dad7;
  --m84-surface: #cbd1cd;
  --m84-surface-2: #b7c0ba;
  --m84-text: #26312b;
  --m84-text-soft: #526058;
  --m84-board-frame: #7f8b84;
  --m84-board-frame-2: #69756e;
  --m84-board-edge: #879b8c;
  --m84-shaft-bg: #606d66;
  --m84-shaft-bg-2: #4f5c55;
  --m84-button-edge: #7c8a82;
}

:root:not([data-theme="dark"]) html,
:root:not([data-theme="dark"]) body {
  background-image:
    radial-gradient(ellipse at 10% 8%, rgba(142,168,146,.13), transparent 26%),
    radial-gradient(ellipse at 88% 18%, rgba(118,145,122,.09), transparent 29%),
    linear-gradient(155deg, var(--m84-bg-2), var(--m84-bg)) !important;
}

/* Die angedeuteten Tropfsteine am oberen Seitenrand entfallen komplett. */
body::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Der feste Kopfbalken verwendet exakt dieselbe Grundpalette wie die beiden
   Spielbretter statt eines separaten schwarzen Hintergrundes. */
body.in-game:not(.real-game-mode) .game-header {
  background:
    radial-gradient(circle at 18% 0%, rgba(134,168,140,.07), transparent 30%),
    linear-gradient(160deg, var(--m84-board-frame), var(--m84-board-frame-2)) !important;
  border-color: var(--m84-board-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 5px 12px rgba(0,0,0,.22) !important;
}

/* Im hellen Modus bleiben Titel/Spielerinfos auf dem mittleren Grau klar
   lesbar, ohne Sand-/Beigetöne. */
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .game-header,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .game-header .player-info,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .game-header .game-name-row {
  color: #eef1ef !important;
}

/* „Mitspieler“ bewusst neutral grau statt des alten sandfarbenen Bretttexts. */
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) #opponent-boards .opponent-heading h2 {
  color: #d9dedb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
}
:root[data-theme="dark"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-heading h2 {
  color: #cbd2ce !important;
}

/* Gegner-Würfelfeld: dasselbe ruhige Grau wie die Spieler-Steuerfläche,
   ohne Braun-/Sandstich. */
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-dice-live {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.035)),
    linear-gradient(145deg, #d0d6d2, #b9c2bc) !important;
  border-color: #8d9a92 !important;
  color: #27332c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32) !important;
}
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-dice-title,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-dice-live > small {
  color: #46534b !important;
}

/* Tabs: dunkle Schrift auf hellem Grau, auch für Nebentexte. */
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-tab {
  background-color: #c8cfcb !important;
  color: #243029 !important;
  border-color: #929e97 !important;
}
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-tab:hover:not(:disabled) {
  background-color: #d2d8d4 !important;
}
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-tab.active {
  background-color: #dce1de !important;
  color: #1d2922 !important;
  border-color: #94a199 !important;
  border-bottom-color: #718d76 !important;
}
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-tab-name,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-tab-top,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-tab-top strong {
  color: #243029 !important;
  text-shadow: none !important;
}
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-tab-top small,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-host-label {
  color: #4d5a52 !important;
  text-shadow: none !important;
}

/* Auch Karten-/Panel-Flächen im Hellmodus etwas heller, ohne die dunklen
   Schächte selbst so weit aufzuhellen, dass die Tropfen Kontrast verlieren. */
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) #control-panel,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) .opponent-view-card {
  border-color: #8a978f !important;
}

/* =========================================================
   Match84 – surface color alignment
   Visual only: selection/opponent active surfaces + board headings/panels.
   ========================================================= */
:root {
  --m84-selection-surface:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.06)),
    linear-gradient(145deg, #89928c, #6e7872);
  --m84-main-panel-surface:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.10)),
    linear-gradient(145deg, var(--m84-stone-soft), var(--m84-stone) 30%, var(--m84-stone-2));
}

:root[data-theme="dark"] {
  --m84-selection-surface:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12)),
    linear-gradient(145deg, #47524b, #323c36);
}

/* Selection area, active current-turn tab and opponent dice use one surface. */
#selection-area,
body.in-game:not(.real-game-mode) .opponent-tab.active.current-turn,
body.in-game:not(.real-game-mode) .opponent-dice-live {
  background: var(--m84-selection-surface) !important;
}

/* The active tab gets the same surface even if current-turn is applied separately. */
body.in-game:not(.real-game-mode) .opponent-tab.current-turn.active {
  background: var(--m84-selection-surface) !important;
}

/* Own/opponent board panels exactly match the control panel surface. */
body.in-game:not(.real-game-mode) #control-panel,
body.in-game:not(.real-game-mode) #main-player-board,
body.in-game:not(.real-game-mode) #opponent-boards {
  background: var(--m84-main-panel-surface) !important;
}

/* "Dein Spielbrett" and "Mitspieler" use the same heading colour. */
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) #main-player-board .own-board-heading,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) #main-player-board .own-board-heading > span:first-child,
:root:not([data-theme="dark"]) body.in-game:not(.real-game-mode) #opponent-boards .opponent-heading h2 {
  color: #d9dedb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.32) !important;
}

:root[data-theme="dark"] body.in-game:not(.real-game-mode) #main-player-board .own-board-heading,
:root[data-theme="dark"] body.in-game:not(.real-game-mode) #main-player-board .own-board-heading > span:first-child,
:root[data-theme="dark"] body.in-game:not(.real-game-mode) #opponent-boards .opponent-heading h2 {
  color: #cbd2ce !important;
}


/* =========================================================
   Match84 – DARK ONLY
   No light theme and no visual scheme switching in the UI.
   This final guard deliberately wins over historical light-theme rules.
   ========================================================= */
:root {
  color-scheme: dark;
  --m84-bg: #151a17;
  --m84-bg-2: #252c27;
  --m84-stone: #555e58;
  --m84-stone-2: #3e4741;
  --m84-stone-3: #68746c;
  --m84-stone-soft: #77837b;
  --m84-surface: #59645d;
  --m84-surface-2: #414b45;
  --m84-text: #eff4ef;
  --m84-text-soft: #c3d0c5;
  --m84-cavity: #29312c;
  --m84-cavity-2: #181e1a;
  --m84-glass: rgba(220, 236, 224, 0.08);
  --m84-glass-line: rgba(210, 228, 214, 0.68);
  --m84-selection-surface:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12)),
    linear-gradient(145deg, #47524b, #323c36);
  --m84-main-panel-surface:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.13)),
    linear-gradient(145deg, #4b554f, #343d38);
}

html,
body {
  background:
    radial-gradient(circle at 50% -12%, rgba(103,143,112,.11), transparent 30%),
    linear-gradient(180deg, var(--m84-bg-2), var(--m84-bg)) !important;
  color: var(--m84-text) !important;
}

/* No decorative pseudo-background from the former light/cave treatment. */
body::before {
  content: none !important;
  display: none !important;
}

body.in-game:not(.real-game-mode) .game-header,
body.in-game:not(.real-game-mode) #control-panel,
body.in-game:not(.real-game-mode) #main-player-board,
body.in-game:not(.real-game-mode) #opponent-boards,
body.in-game:not(.real-game-mode) .opponent-view-card,
body.in-game:not(.real-game-mode) .opponent-tab,
body.in-game:not(.real-game-mode) .opponent-dice-live,
#selection-area,
.lobby-panel,
.modal-overlay .panel {
  color: var(--m84-text) !important;
}

body.in-game:not(.real-game-mode) #control-panel,
body.in-game:not(.real-game-mode) #main-player-board,
body.in-game:not(.real-game-mode) #opponent-boards {
  background: var(--m84-main-panel-surface) !important;
  border-color: #596a60 !important;
}

body.in-game:not(.real-game-mode) .opponent-tab {
  background: #1d2420 !important;
  background-image: none !important;
  color: #e8eee9 !important;
  border-color: #465149 !important;
}
body.in-game:not(.real-game-mode) .opponent-tab:hover:not(:disabled) {
  background: #28312b !important;
  background-image: none !important;
}
body.in-game:not(.real-game-mode) .opponent-tab.active,
body.in-game:not(.real-game-mode) .opponent-tab.active.current-turn,
body.in-game:not(.real-game-mode) .opponent-tab.current-turn.active,
body.in-game:not(.real-game-mode) .opponent-dice-live,
#selection-area {
  background: var(--m84-selection-surface) !important;
  color: #edf3ee !important;
}

body.in-game:not(.real-game-mode) .opponent-tab-name,
body.in-game:not(.real-game-mode) .opponent-tab-top,
body.in-game:not(.real-game-mode) .opponent-tab-top strong,
body.in-game:not(.real-game-mode) #main-player-board .own-board-heading,
body.in-game:not(.real-game-mode) #main-player-board .own-board-heading > span:first-child,
body.in-game:not(.real-game-mode) #opponent-boards .opponent-heading h2 {
  color: #cbd2ce !important;
  text-shadow: none !important;
}
body.in-game:not(.real-game-mode) .opponent-tab-top small,
body.in-game:not(.real-game-mode) .opponent-host-label {
  color: #aab7ae !important;
}

/* =========================================================
   Match84 – fine tuning: action green, full-width reservoirs,
   narrow pending-drop highlight. Visual only.
   ========================================================= */

/* Ablegen/Haken: derselbe grüne 3D-Tastenstil wie im Realmodus. */
#select-dice-button,
#secure-pair-button{
  --btn-face-hi: #5ae989 !important;
  --btn-face-mid: #27b351 !important;
  --btn-face-low: #1b7a37 !important;
  --btn-face-border: #18662f !important;
}

/* Der Flüssigkeitsbehälter nutzt dieselbe volle Spaltenbreite wie der Schacht. */
.match84-reservoir-wrap {
  width: 100% !important;
}
.match84-reservoir {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Vorgemerkte Tropfen: deutlich heller, aber nur ein sehr schmaler,
   weicher Saum in der jeweiligen Tropfenfarbe. */
html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop.pending-bead {
  outline: 0 !important;
  filter:
    saturate(1.18)
    brightness(1.28)
    drop-shadow(0 0 .65px var(--shaft-color))
    drop-shadow(0 0 1.35px var(--shaft-color)) !important;
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.52),
    inset -4px -5px 7px rgba(0,0,0,.14),
    0 2px 4px rgba(0,0,0,.32) !important;
}

/* =========================================================
   Match84 – marker / reservoir / button edge correction
   Visual only. 2026-08-19
   ========================================================= */

/* Pending drops use clip-path. A normal outline is clipped/does not follow the
   silhouette reliably, so build a narrow colour-matched outer rim with
   1px directional drop-shadows plus a very small soft halo. */
html body.in-game:not(.real-game-mode) .match84-drop-stack .match84-drop.pending-bead {
  outline: 0 !important;
  filter:
    saturate(1.24)
    brightness(1.34)
    drop-shadow( 1px  0   0 var(--shaft-color))
    drop-shadow(-1px  0   0 var(--shaft-color))
    drop-shadow( 0    1px 0 var(--shaft-color))
    drop-shadow( 0   -1px 0 var(--shaft-color))
    drop-shadow( 0    0   1.15px var(--shaft-color)) !important;
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.56),
    inset -4px -5px 7px rgba(0,0,0,.12),
    0 2px 4px rgba(0,0,0,.32) !important;
}

/* Reservoir stays visually identical to the shaft material, without glass overlays. */
.match84-reservoir::before,
.match84-reservoir::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}
.match84-reservoir {
  border-color: rgba(83,93,87,.95) !important;
  border-top-color: rgba(83,93,87,.95) !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(137,171,143,.18), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 17% 83%, rgba(255,255,255,.025)),
    linear-gradient(180deg, var(--m84-shaft-bg), var(--m84-shaft-bg-2)) !important;
}

/* Darker bezels make the coloured action and utility buttons more clearly
   defined against the dark panels. */
:root {
  --m84-button-edge: #303a34;
}
#turn-actions .icon-button{
  border-color: var(--btn-shell-edge) !important;
}
.top-utility-buttons .utility-button,
#host-controls button{
  border-color: #303a34 !important;
}

/* =========================================================
   Match84 – sichtbarer Pending-Glow + Tab-Tropfen 0..7
   Brettlogik bleibt 7..0 verbleibende Tropfen.
   ========================================================= */

/* Der Tropfen selbst ist per clip-path beschnitten. Deshalb liegt der Glow
   auf einem äußeren Slot, der nicht geclippt wird. */
html body.in-game:not(.real-game-mode) .match84-drop-stack {
  overflow: visible !important;
}
html body.in-game:not(.real-game-mode) .match84-drop-slot {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 1 !important;
}
html body.in-game:not(.real-game-mode) .match84-drop-slot.pending-slot {
  z-index: 6 !important;
  filter:
    drop-shadow(0 0 1.5px var(--shaft-color))
    drop-shadow(0 0 4px var(--shaft-color))
    drop-shadow(0 0 7px color-mix(in srgb,var(--shaft-color) 78%,transparent)) !important;
}
html body.in-game:not(.real-game-mode) .match84-drop-slot.pending-slot::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--m84-drop-w) + 5px) !important;
  height: calc(var(--m84-drop-h) + 7px) !important;
  transform: translate(-50%, -50%) scale(1.03) !important;
  border-radius: 48% 48% 54% 54% / 35% 35% 66% 66% !important;
  clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  background: color-mix(in srgb, var(--shaft-color) 82%, white 18%) !important;
  opacity: .54 !important;
  filter: blur(2.2px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html body.in-game:not(.real-game-mode) .match84-drop-slot.pending-slot .match84-drop.pending-bead {
  position: relative !important;
  z-index: 2 !important;
  outline: 0 !important;
  filter: saturate(1.42) brightness(1.55) contrast(1.07) !important;
  box-shadow:
    inset 3px 4px 5px rgba(255,255,255,.72),
    inset -4px -5px 7px rgba(0,0,0,.08),
    0 0 2px rgba(255,255,255,.30) !important;
}

/* Gegner-Tabs: gleiche Tropfen-Silhouette und derselbe Glanz wie im Brett.
   Die Füllfarbe wird im Client in acht Zuständen von 0 bis 7 berechnet. */
body.in-game:not(.real-game-mode) .opponent-progress-bead {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  max-width: 25px !important;
  min-width: 0 !important;
  aspect-ratio: .72 !important;
  flex: 0 1 25px !important;
  border: 0 !important;
  border-radius: 48% 48% 54% 54% / 35% 35% 66% 66% !important;
  clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  background-image:
    linear-gradient(to bottom, transparent 0 68%, rgba(255,255,255,.08) 69.5%, rgba(255,255,255,.38) 71%, rgba(255,255,255,.10) 73%, transparent 76%),
    radial-gradient(ellipse at 50% 84%, rgba(255,255,255,.16) 0 5%, transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.025) 38%, transparent 57%, rgba(0,0,0,.12) 100%) !important;
  opacity: 1 !important;
  filter: none !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.55) !important;
  box-shadow:
    inset 2px 3px 4px rgba(255,255,255,.36),
    inset -3px -4px 5px rgba(0,0,0,.22),
    0 1px 3px rgba(0,0,0,.32) !important;
  overflow: hidden !important;
}
body.in-game:not(.real-game-mode) .opponent-progress-bead::before {
  content: "" !important;
  position: absolute !important;
  width: 24% !important;
  height: 54% !important;
  left: 17% !important;
  top: 24% !important;
  border-radius: 70% 38% 64% 46% / 46% 38% 68% 58% !important;
  background: linear-gradient(156deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.54) 23%, rgba(255,255,255,.22) 52%, transparent 84%) !important;
  filter: blur(.22px) !important;
  transform: rotate(15deg) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.in-game:not(.real-game-mode) .opponent-progress-bead .opponent-progress-value {
  position: relative !important;
  z-index: 2 !important;
  color: inherit !important;
  transform: translateY(1px) !important;
}
body.in-game:not(.real-game-mode) .opponent-progress-bead.complete {
  opacity: 1 !important;
  filter: none !important;
}

html.app-mobile-mode body.in-game:not(.real-game-mode) .opponent-progress-bead,
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-progress-bead {
  max-width: 20px !important;
  aspect-ratio: .72 !important;
}
html[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-tabs .opponent-progress-bead > .opponent-progress-value {
  font-size: clamp(10px, min(3vw, 3dvh), 13px) !important;
  line-height: 1 !important;
}

/* =========================================================
   Match84 – Realmodus = Online-Spiel ohne Gegner
   Zwei Spalten: eigenes Brett + vollständige Würfel-/Zugsteuerung.
   ========================================================= */



































/* Das reale Brett benutzt exakt dieselbe Match84-Darstellung wie das Online-Brett. */



















@media (max-width: 760px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

@media (min-width: 640px) and (max-width: 1049px) {
  
  
  
  
}

@media (orientation: landscape) and (max-height: 620px) {
  
  
  
  
}

/* Realmodus behält wie das Onlinespiel Würfelfarben + Hilfe erreichbar. */




@media (max-width: 760px) {
  
  
}

/* =========================================================
   Match84 – Realmodus layout mirror of Online mode
   Online-Aufbau minus Gegner: Header / Brett + Steuerung / Status.
   Diese Regeln stehen bewusst zuletzt und neutralisieren alte Realmodus-
   Layoutversuche, ohne die Realmodus-Würfel- oder Brettlogik anzufassen.
   ========================================================= */

/* Gleiche Außenbreite und derselbe normale Seitenfluss wie online. */




/* Header: dieselben Proportionen wie der Online-Kopf, aber ohne Host-Rollen. */











/* Exakt das Online-Raster, nur ohne dritte Gegner-Spalte. */









/* Buttons und Auswahlfeld behalten das Online-Design, ohne Sonderbreiten. */







/* Status ist ein echter Footer unter BEIDEN Spalten. */


/* Tablet: zwei Spalten wie online, nur kompakter. */






/* Telefon Hochformat: responsive untereinander; Querformat bleibt zweispaltig. */



















/* Mobiles Menü wie beim Online-Header, ohne den Header selbst umzubauen. */






/* =========================================================
   Match84 – final naming + Realmodus parity
   ========================================================= */

/* Final logo: no 12 x 7 line; Match and '84 sit on one baseline. */
.match84-brand {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: baseline !important;
  column-gap: .045em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.match84-word {
  font-size: 1em !important;
  font-weight: 900 !important;
  letter-spacing: .015em !important;
}
.match84-formula { display: none !important; }
.match84-year {
  font-size: 1em !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  color: #a96cff !important;
  text-shadow: 0 0 9px rgba(169,108,255,.34), 0 1px 2px rgba(0,0,0,.82) !important;
}

/* Lobby: Brettspiel und installierbare/installierte Match84-App in Lila. */
button.real-game-launch,
button.app-install-button.is-installable,
button.app-install-button.is-installed {
  background: linear-gradient(180deg, #9b5dde 0%, #7131b6 100%) !important;
  border-color: #49305f !important;
  color: #fff !important;
}
button.real-game-launch:hover:not(:disabled),
button.app-install-button.is-installable:hover:not(:disabled) {
  background: linear-gradient(180deg, #a96ceb 0%, #7b3ac2 100%) !important;
  border-color: #513469 !important;
}
button.app-install-button.is-unavailable {
  background: #c5cbd0 !important;
  border-color: #9ca4a9 !important;
  color: #596169 !important;
  opacity: .72 !important;
  box-shadow: none !important;
}
button.app-install-button.is-installed {
  opacity: .68 !important;
  filter: saturate(.58) grayscale(.18) !important;
  cursor: default !important;
  box-shadow: none !important;
}
button.app-install-button.is-installing {
  background: linear-gradient(180deg, #8c55c8 0%, #66309c 100%) !important;
  border-color: #49305f !important;
  color: #fff !important;
  opacity: .82 !important;
  cursor: progress !important;
}
.app-install-hourglass {
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.35em;
  width: 1.35em;
  height: 1.35em;
  min-width: 1.35em;
  min-height: 1.35em;
  line-height: 1;
  font-size: 1.02em;
  animation: m84-install-hourglass 1.1s ease-in-out infinite;
}
@keyframes m84-install-hourglass {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(.92); }
}
.app-install-check {
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.35em;
  width: 1.35em;
  height: 1.35em;
  min-width: 1.35em;
  min-height: 1.35em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(76,175,80,.32);
  color: #fff;
  line-height: 1;
}

/* Real board uses the same barrier layering as the online board. The old
   Realmodus override put it above the drops, which exposed a grey bar when a
   row completed. A completed row needs no moving barrier at all. */




/* =========================================================
   Match84 – layout final: boards | tabs | board
   Desktop + landscape: equal boards, tabs in the middle.
   Online dice/actions live in the header. Phone portrait stays paged.
   ========================================================= */

/* Header gameplay controls: dice on the left, actions on the right. */
body.in-game:not(.real-game-mode) .game-header {
  grid-template-columns: minmax(175px, auto) minmax(390px, 1fr) auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 82px !important;
  padding: 10px 92px 10px 12px !important;
}
body.in-game:not(.real-game-mode) #control-panel.header-control-panel {
  grid-area: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-align: left !important;
}
body.in-game:not(.real-game-mode) #control-panel.header-control-panel.turn-active:not(.personal-turn-pulse):not(.personal-turn-static),
body.in-game:not(.real-game-mode) #control-panel.header-control-panel.turn-blocked:not(.personal-turn-pulse):not(.personal-turn-static) {
  outline: none !important;
  box-shadow: none !important;
}
body.in-game:not(.real-game-mode) #selection-area {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border: 1px solid #303a34 !important;
  border-radius: 10px !important;
  background: rgba(20, 26, 22, .52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.in-game:not(.real-game-mode) #selection-area[hidden] {
  display: block !important;
  opacity: .34 !important;
}
body.in-game:not(.real-game-mode) #dice-selection-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.in-game:not(.real-game-mode) #dice-selection-container .dice-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: auto !important;
  margin: 0 !important;
}
body.in-game:not(.real-game-mode) #dice-selection-container .secured-dice-group {
  margin-left: 2px !important;
}
body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
}
body.in-game:not(.real-game-mode) #turn-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
}
body.in-game:not(.real-game-mode) #turn-actions .icon-button {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 8px !important;
  border-radius: 12px !important;
}
body.in-game:not(.real-game-mode) #turn-actions .icon-button svg {
  width: var(--btn-icon-size, 25px) !important;
  height: var(--btn-icon-size, 25px) !important;
}

/* Desktop and all landscape layouts: own board | opponent tabs | opponent board. */
@media (min-width: 760px), (orientation: landscape) {
  
  
  
  
  

  
  
  
  
  
  
  

  /* The two actual board panels are intentionally symmetric. */
  
  
  
  

  /* Opponent board drops slightly smaller than own board drops. */
  
}

/* Tab drop figures: constant normal weight; number sits slightly lower. */
body.in-game:not(.real-game-mode) .opponent-progress-bead,
body.in-game:not(.real-game-mode) .opponent-progress-bead .opponent-progress-value {
  font-weight: 600 !important;
}
body.in-game:not(.real-game-mode) .opponent-progress-bead .opponent-progress-value {
  transform: translateY(2.5px) !important;
  line-height: 1 !important;
}

/* Compact header for tablet/phone landscape, same structure. */
@media (orientation: landscape) and (max-height: 720px) {
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item.selected {
    padding: 2px !important;
  }
  body.in-game:not(.real-game-mode) .game-header {
    grid-template-columns: minmax(125px, auto) minmax(330px, 1fr) auto !important;
    gap: 7px !important;
    min-height: 62px !important;
    padding: 6px 78px 6px 8px !important;
  }
  body.in-game:not(.real-game-mode) .game-header .player-info {
    display: none !important;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* Phone portrait: controls remain in the header, pages can grow and scroll.
   No fixed footer means the full board can extend to its natural bottom. */
@media (orientation: portrait) and (max-width: 759px) {
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title menu"
      "controls controls" !important;
    gap: 5px 7px !important;
    min-height: 0 !important;
    padding: 6px 8px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-title-block {
    grid-area: title !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #control-panel.header-control-panel {
    grid-area: controls !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .player-info {
    display: none !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .mobile-menu-button {
    grid-area: menu !important;
    position: static !important;
    transform: none !important;
    align-self: start !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #selection-area {
    padding: 3px 4px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container,
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-group {
    gap: 2px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
    flex-basis: clamp(25px, 7vw, 30px) !important;
    width: clamp(25px, 7vw, 30px) !important;
    height: clamp(25px, 7vw, 30px) !important;
    padding: 3px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions {
    gap: 3px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions .icon-button {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 5px !important;
    border-width: var(--btn-shell-border, 1px) !important;
    border-radius: 9px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions .icon-button svg {
    width: var(--btn-icon-size, 19px) !important;
    height: var(--btn-icon-size, 19px) !important;
  }

  /* V1.8.38: Die frühere Phone-Portrait-Umschaltung wurde entfernt.
     #game-area sowie beide Seiten werden ausschließlich im autoritativen
     V1.8.38-Block am Dateiende strukturiert; hier kein display:none mehr. */
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-tabs-column {
    width: 100% !important;
    margin-bottom: 5px !important;
    padding: 5px !important;
    background: var(--m84-main-panel-surface) !important;
    border-color: #596a60 !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-tabs-column .opponent-heading {
    display: none !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-tabs-column .opponent-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 2px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-tabs-column .opponent-tab {
    flex: 0 0 min(72vw, 230px) !important;
    width: min(72vw, 230px) !important;
    padding: 5px 6px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-tabs-column .opponent-progress {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-tabs-column .opponent-progress-bead {
    max-width: 16px !important;
  }

  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #main-player-board,
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-boards,
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-view,
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-view-card,
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #board-rows,
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-board-rows {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #main-player-board,
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-boards {
    min-height: calc(var(--m84-stack-h) + var(--m84-reservoir-h) + 118px) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Explicit centering of every drop inside its shaft on narrow portrait screens. */
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-drop-stack {
    justify-items: center !important;
    align-items: center !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-drop-slot {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  html[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-drop {
    margin: 0 auto !important;
    justify-self: center !important;
  }
}

/* Real mode: the two global utility controls are physically inside its header. */






/* =========================================================
   Match84 – final layout precedence fix
   This block intentionally uses the full live DOM path so legacy responsive
   rules cannot re-introduce the former center-control / right-tab layout.
   ========================================================= */

/* Desktop header layout is defined exclusively in ONLINE LAYOUT V3 below. */
@media (min-width: 760px) {
  /* Equal board columns with the opponent tabs as a dedicated narrow middle column. */
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-container > #game-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 12vw, 195px) minmax(0, 1fr) !important;
    grid-template-areas: "own tabs opponent" !important;
    grid-template-rows: minmax(0, auto) !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-container > #game-area > #main-player-board {
    grid-area: own !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-container > #game-area > #opponent-tabs-column {
    grid-area: tabs !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-container > #game-area > #opponent-boards {
    grid-area: opponent !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-container > #game-area > #main-player-board,
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-container > #game-area > #opponent-boards {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 540px !important;
  }
}

/* Landscape phones/tablets: same board | tabs | board structure, compact header. */
@media (orientation: landscape) and (max-height: 720px) {
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container > .game-header {
    display: grid !important;
    grid-template-columns: minmax(118px, auto) minmax(355px, 1fr) auto !important;
    grid-template-areas: "title controls menu" !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 62px !important;
    height: auto !important;
    padding: 6px 76px 6px 8px !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container > .game-header > .game-title-block { grid-area: title !important; }
  
  
  
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container > .game-header > #player-info,
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container > .game-header > #host-controls { display: none !important; }
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container > .game-header > #mobile-menu-button {
    grid-area: menu !important;
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }

  
  
  
  
  
}

/* Phone portrait: natural page height so row 12 / reservoirs can never be clipped. */
@media (orientation: portrait) and (max-width: 759px) {
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    padding: calc(var(--game-header-height, 76px) + 4px) 3px max(20px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title menu" "controls controls" !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 5px 7px !important;
    padding: 6px 8px !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header > .game-title-block { grid-area: title !important; }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header > #control-panel.header-control-panel {
    grid-area: controls !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "dice buttons" !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header #selection-area { grid-area: dice !important; }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header #turn-actions { grid-area: buttons !important; }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header > #player-info,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header > #host-controls { display: none !important; }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header > #mobile-menu-button {
    grid-area: menu !important;
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    margin-right: 68px !important; /* room for dice-scheme + help utilities */
  }

  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area > #main-player-board,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area > #opponent-boards,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area .opponent-view,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area .opponent-view-card,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area #board-rows,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area .opponent-board-rows {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Center the narrow drop exactly in the shaft, independent of legacy bead offsets. */
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container .match84-drop-stack {
    justify-items: center !important;
    align-items: center !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container .match84-drop-slot {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container .match84-drop {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    transform-origin: center center !important;
  }
}

/* Der Kopf des ausgewählten Gegners bleibt sichtbar: Name + Tropfenstand
   gehören direkt über das rechte Spielbrett. */
body.in-game:not(.real-game-mode) #opponent-boards .opponent-view-head {
  display: flex !important;
}

@media (orientation: landscape) and (max-height: 720px) {
  
  
}

@media (orientation: portrait) and (max-width: 759px) {
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header > #mobile-menu-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 5px !important;
    align-self: start !important;
    justify-self: end !important;
    margin: 0 68px 0 0 !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header > .game-title-block {
    display: block !important;
    min-width: 0 !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area > #main-player-board,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > #game-area > #opponent-boards {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #board-rows.match84-drop-board,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-board-rows.match84-drop-board {
    height: auto !important;
    min-height: calc(var(--m84-stack-h) + var(--m84-reservoir-h) + 58px) !important;
    grid-template-rows: minmax(calc(var(--m84-stack-h) + var(--m84-reservoir-h) + 40px), auto) !important;
    align-items: start !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #board-rows.match84-drop-board > .match84-shaft,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-board-rows.match84-drop-board > .match84-shaft {
    height: auto !important;
    min-height: calc(var(--m84-stack-h) + var(--m84-reservoir-h) + 40px) !important;
    align-self: start !important;
  }
}

/* On very low landscape viewports the live opponent dice would consume exactly
   the height needed by the reservoirs. The selected opponent and progress stay
   visible in the middle tab, while both boards retain equal full height. */
@media (orientation: landscape) and (max-height: 480px) {
  
  
  
}

/* Progress digits in opponent-tab drops keep one constant normal weight. */
body.in-game:not(.real-game-mode) #opponent-tabs-column .opponent-progress-bead,
body.in-game:not(.real-game-mode) #opponent-tabs-column .opponent-progress-value {
  font-weight: 400 !important;
}

/* Keep the opponent's live dice visible in mobile landscape. Both boards use
   the same compact vertical board geometry so the extra dice row still fits. */
@media (orientation: landscape) and (max-height: 480px) {
  
  
  
  
}

/* =========================================================
   Match84 – Smartphone portrait final order
   Header -> actions -> dice -> board; own -> tabs -> opponent by swipe.
   Desktop and landscape intentionally remain untouched.
   ========================================================= */
@media (orientation: portrait) and (max-width: 759px) {
  /* Keep the whole app inside the visible phone viewport. */
  html.app-mobile-mode[data-app-device="phone"] body.in-game {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--app-viewport-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: calc(var(--game-header-height, 8.9rem) + 4px) 4px 4px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  /* Top row: title + lock | name + drop count | hamburger.
     The gameplay controls occupy two rows directly below it. */
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #game-container > .game-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 34px !important;
    grid-template-areas:
      "title player menu"
      "controls controls controls" !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 5px 7px !important;
    padding: max(5px, env(safe-area-inset-top)) 7px 6px !important;
    border-radius: 0 !important;
    z-index: 1200 !important;
  }

  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-title-block {
    grid-area: title !important;
    display: block !important;
    min-width: 0 !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-title-block .game-title-heading {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: clamp(.82rem, 3.7vw, 1.02rem) !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-title-block .app-version,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .game-name-row {
    display: none !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .spectator-lock-button {
    flex: 0 0 auto !important;
    margin-left: 2px !important;
  }

  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #player-info {
    grid-area: player !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    max-width: 44vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: clamp(.62rem, 2.8vw, .76rem) !important;
    white-space: nowrap !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #player-info > span:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #player-info .role-info {
    display: none !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #player-info .score-info {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #player-info .player-info-label {
    display: none !important;
  }

  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #mobile-menu-button {
    grid-area: menu !important;
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 5px !important;
    justify-self: end !important;
  }

  /* Two full-width control rows: actions first, dice second. */
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #control-panel.header-control-panel {
    grid-area: controls !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "buttons"
      "dice" !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions {
    grid-area: buttons !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions .icon-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: clamp(38px, 10vw, 44px) !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #turn-actions .icon-button svg {
    width: var(--btn-icon-size, 24px) !important;
    height: var(--btn-icon-size, 24px) !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #selection-area,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #selection-area[hidden] {
    grid-area: dice !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-group {
    display: contents !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #dice-selection-container .dice-item {
    width: clamp(34px, 10.7vw, 46px) !important;
    height: clamp(34px, 10.7vw, 46px) !important;
    min-width: 0 !important;
    max-width: 46px !important;
    flex: none !important;
    padding: 4px !important;
  }

  /* The old mobile switch row is no longer part of the portrait sequence. */
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #mobile-board-switch {
    display: none !important;
  }

  /* Utilities live inside the hamburger menu on a phone. */
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #host-controls > .top-utility-buttons{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 4px 0 0 !important;
    z-index: auto !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #host-controls > .top-utility-buttons .utility-button{
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  /* V1.8.38: Alter Drei-Seiten-/Display-Umschaltblock entfernt.
     Die Seitenstruktur wird ausschließlich im autoritativen V1.8.38-Block definiert. */

  /* Compact but complete board geometry: all 12 shafts, reservoirs and
     progress numbers remain inside the visible page. */
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #main-player-board,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #opponent-boards {
    --m84-stack-h: clamp(155px, 29dvh, 230px) !important;
    --m84-reservoir-h: clamp(48px, 8.8dvh, 76px) !important;
    --m84-drop-w: clamp(7px, 2.35vw, 10px) !important;
    --m84-drop-h: clamp(10px, 3.15vw, 14px) !important;
    --m84-board-gap: clamp(2px, .65vw, 4px) !important;
    padding: 4px !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #main-player-board .own-board-heading {
    flex: 0 0 auto !important;
    margin: 0 0 3px !important;
    font-size: .68rem !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) #board-rows.match84-drop-board,
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .opponent-board-rows.match84-drop-board {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 5px 3px 6px !important;
    overflow: hidden !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .board-row.match84-shaft {
    align-self: center !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-shaft .row-number {
    padding-bottom: 3px !important;
    font-size: clamp(.62rem, 2.5vw, .78rem) !important;
    text-align: center !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-shaft .row-content.match84-shaft-content {
    gap: 4px !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-drop-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(7, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 5px 2px 4px !important;
    overflow: visible !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-drop-slot {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-drop {
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-reservoir-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-reservoir {
    width: 100% !important;
    max-width: none !important;
  }
  html.app-mobile-mode[data-app-device="phone"] body.in-game:not(.real-game-mode) .match84-progress {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: clamp(.52rem, 2.15vw, .68rem) !important;
    line-height: 1 !important;
  }

  /* ---------- Real mode: same portrait sequence, without opponent pages. ---------- */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ========================================================================
   Match84 – definitive layout layer
   Desktop controls + spectator layouts + phone portrait are consolidated here.
   ======================================================================== */

/* Game-designed confirmation dialog used by join approvals and leave actions. */
.action-confirm-dialog {
  width: min(430px, 100%);
}
.action-confirm-dialog #action-confirm-message {
  min-height: 2.6em;
}
#action-confirm-ok.danger {
  background: linear-gradient(180deg, #c84a4a 0%, #a93636 100%) !important;
  border-color: #8b2f2f !important;
  color: #fff !important;
}
#action-confirm-ok.danger:hover:not(:disabled) {
  background: linear-gradient(180deg, #d96862 0%, #c84a4a 100%) !important;
}

#action-confirm-ok.success {
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%) !important;
  border-color: #327a36 !important;
  color: #fff !important;
}
#action-confirm-ok.success:hover:not(:disabled) {
  background: linear-gradient(180deg, #5bc460 0%, #49a44e 100%) !important;
}

#action-confirm-ok.leave-stay {
  background: linear-gradient(180deg, #4caf50 0%, #3e9142 100%) !important;
  color: #fff !important;
}
#action-confirm-ok.leave-stay:hover:not(:disabled) {
  background: linear-gradient(180deg, #61be65 0%, #4caf50 100%) !important;
}
#action-confirm-cancel.leave-confirm {
  background: linear-gradient(180deg, #c84a4a 0%, #a93636 100%) !important;
  color: #fff !important;
}
#action-confirm-cancel.leave-confirm:hover:not(:disabled) {
  background: linear-gradient(180deg, #d96862 0%, #c84a4a 100%) !important;
}

/* Spectators never get their own gameplay controls or a live dice strip. */
body.in-game.spectator-mode:not(.real-game-mode) #control-panel,
body.in-game.spectator-mode:not(.real-game-mode) #opponent-boards .opponent-dice-live {
  display: none !important;
}

/* Desktop: make the own dice field only as wide as its six dice and keep the
   four actions immediately beside it. */
@media (min-width: 760px) {
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: center !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 6px !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header #selection-area,
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header #dice-selection-container {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header #turn-actions {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }

  /* Spectator desktop: compact two-column unit, centered as one block. */
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container > #game-area {
    display: grid !important;
    grid-template-columns: clamp(175px, 18vw, 225px) minmax(480px, 620px) !important;
    grid-template-areas: "tabs opponent" !important;
    grid-template-rows: minmax(540px, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: min(900px, calc(100vw - 32px)) !important;
    max-width: 900px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #main-player-board {
    display: none !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #opponent-tabs-column {
    grid-area: tabs !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #opponent-tabs-column .opponent-tabs {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #opponent-boards {
    grid-area: opponent !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 540px !important;
    max-width: none !important;
    overflow: hidden !important;
  }
}

/* ------------------------------------------------------------------------
   PHONE PORTRAIT
   Player: Header -> 4 actions -> 6 dice -> two horizontal board columns.
   Column 1 = own board. Column 2 = opponent tabs ABOVE opponent board.
   Spectator: no controls; opponent tabs ABOVE board on one visible column.
   ------------------------------------------------------------------------ */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--app-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 4px !important;
  padding: calc(var(--game-header-height, 46px) + 4px) 4px max(4px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

/* Compact fixed phone header: title/lock | name/score | hamburger. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container > .game-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 34px !important;
  grid-template-areas: "title player menu" !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  gap: 6px !important;
  padding: max(5px, env(safe-area-inset-top)) 7px 5px !important;
  border-radius: 0 !important;
  z-index: 1200 !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container > .game-header > .game-title-block {
  grid-area: title !important;
  min-width: 0 !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container > .game-header .game-title-block .game-title-heading {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  font-size: clamp(.82rem, 3.7vw, 1.02rem) !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container > .game-header .app-version,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container > .game-header .game-name-row {
  display: none !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #player-info {
  grid-area: player !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  min-width: 0 !important;
  max-width: 45vw !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: clamp(.62rem, 2.8vw, .76rem) !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #player-info > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #player-info .role-info,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #player-info .player-info-label {
  display: none !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #player-info .score-info {
  display: inline-flex !important;
  flex: 0 0 auto !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #mobile-menu-button {
  grid-area: menu !important;
  display: inline-flex !important;
  position: static !important;
  transform: none !important;
  justify-self: end !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 5px !important;
}

/* Phone hamburger: every item is the same width/height. Dice scheme badge stays
   anchored to the dice-scheme button instead of the menu edge. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container > .game-header > #host-controls {
  display: none !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container > .game-header.mobile-menu-open > #host-controls {
  display: flex !important;
  position: absolute !important;
  top: calc(100% + 5px) !important;
  right: 4px !important;
  left: auto !important;
  z-index: 1400 !important;
  width: min(230px, calc(100vw - 16px)) !important;
  padding: 8px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  border: 1px solid #596a60 !important;
  border-radius: 9px !important;
  background: var(--m84-main-panel-surface) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.46) !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls > button,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls > .top-utility-buttons > .utility-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls > .top-utility-buttons > .utility-button {
  flex: 1 1 0 !important;
  width: calc(50% - 3px) !important;
  min-width: 0 !important;
  max-width: none !important;
  display: inline-flex !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls > .top-utility-buttons {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 6px !important;
  justify-content: stretch !important;
  align-items: center !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls .dice-scheme-button {
  position: relative !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls .dice-scheme-button svg {
  width: 25px !important;
  height: 25px !important;
  flex-basis: 25px !important;
  stroke-width: 1.95 !important;
}
/* Spectator phone menu: leave + Hilfsmodus; the tutorial button controls the spectator live explanation mode. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #host-controls > button:not(#leave-game-button):not(#tutorial-mode-button) {
  display: none !important;
}

/* Player control block under header: row 1 actions, row 2 dice. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > #control-panel.header-control-panel {
  order: 1 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "buttons" "dice" !important;
  grid-template-rows: auto auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #turn-actions {
  grid-area: buttons !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 6px !important;
  margin: 0 !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #turn-actions .icon-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(38px, 10vw, 44px) !important;
  padding: 6px !important;
  border-radius: 10px !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #selection-area,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #selection-area[hidden] {
  grid-area: dice !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 4px !important;
  opacity: 1 !important;
  overflow: visible !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #dice-selection-container {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #dice-selection-container .dice-group {
  display: contents !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #dice-selection-container .dice-item {
  width: clamp(34px, 10.7vw, 46px) !important;
  height: clamp(34px, 10.7vw, 46px) !important;
  min-width: 0 !important;
  max-width: 46px !important;
  flex: none !important;
  padding: 4px !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #mobile-board-switch {
  display: none !important;
}

/* V1.8.38: Verwaister Vor-Wrapper-Block entfernt. Die dortigen Selektoren
   erwarteten main-player-board/opponent-tabs-column/opponent-boards als direkte
   Kinder von #game-area; seit online-page-stack existiert diese DOM-Struktur nicht mehr. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode):not(.spectator-mode) #opponent-boards .opponent-dice-live {
  display: flex !important;
  flex: 0 0 auto !important;
  padding: 3px 5px !important;
  margin: 0 0 3px !important;
}

/* V1.8.38: Verwaiste direkte #game-area-Kindselektoren entfernt. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #board-rows.match84-drop-board,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .opponent-board-rows.match84-drop-board {
  flex: 1 1 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 3px 5px !important;
  overflow: hidden !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .board-row.match84-shaft {
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-shaft .row-number {
  flex: 0 0 auto !important;
  padding: 0 0 2px !important;
  text-align: center !important;
  font-size: clamp(.58rem, 2.35vw, .74rem) !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-shaft .row-content.match84-shaft-content {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  gap: 3px !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-drop-stack {
  flex: 1 1 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 3px 1px 2px !important;
  overflow: visible !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-drop-slot {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  transform: none !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-drop {
  margin: 0 auto !important;
  justify-self: center !important;
  align-self: center !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-reservoir-wrap {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 2px !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-reservoir {
  width: 100% !important;
  max-width: none !important;
  height: clamp(46px, 7.8dvh, 68px) !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) .match84-progress {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(.48rem, 1.95vw, .64rem) !important;
  line-height: 1 !important;
}

/* Spectator phone portrait: one visible column, tabs directly above board.
   There is no own board, no action row and no dice row. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container {
  gap: 0 !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container > #game-area,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container.mobile-show-opponent > #game-area {
  grid-template-columns: 100% !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  transform: none !important;
  overflow: hidden !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container > #game-area > #main-player-board {
  display: none !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container > #game-area > #opponent-tabs-column {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-height: 150px !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container > #game-area > #opponent-boards {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  min-height: 0 !important;
}

/* ------------------------------------------------------------------------
   REAL MODE PHONE PORTRAIT – same vertical rhythm: actions, dice, full board.
   ------------------------------------------------------------------------ */























/* Real-mode hamburger uses the same equal-sized menu buttons. */








/* ========================================================================
   Match84 – final conflict guards for spectator/menu layout
   These selectors intentionally outrank legacy mobile rules above.
   ======================================================================== */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container > #control-panel.header-control-panel,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #selection-area,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #turn-actions,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #dice-selection-container,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game.spectator-mode:not(.real-game-mode) #game-container #opponent-boards .opponent-dice-live {
  display: none !important;
}

html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container > .game-header > #control-panel.header-control-panel,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #selection-area,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #turn-actions,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #dice-selection-container,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #opponent-boards .opponent-dice-live {
  display: none !important;
}

/* Every phone hamburger item uses the same actual button box. */
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls > button,
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls > .top-utility-buttons > .utility-button{
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 5px 10px !important;
  justify-content: center !important;
  align-items: center !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls > .top-utility-buttons > .utility-button{
  flex: 1 1 0 !important;
  width: calc(50% - 3px) !important;
  min-width: 0 !important;
  max-width: none !important;
  display: inline-flex !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls .dice-scheme-button{
  position: relative !important;
}
html.app-mobile-mode[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #host-controls .dice-scheme-button svg{
  width: 25px !important;
  height: 25px !important;
  flex-basis: 25px !important;
  stroke-width: 1.95 !important;
}

/* Desktop spectator: override the old 450px single-board spectator rule.
   Tabs and board must occupy their two grid columns directly next to each other. */
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #control-panel.header-control-panel,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #selection-area,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #turn-actions,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #dice-selection-container,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #opponent-boards .opponent-dice-live {
  display: none !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area > #opponent-tabs-column {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode) #game-container #game-area > #opponent-boards {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* Desktop player: legacy grid rules used to stretch the dice selection across
   the header. Keep dice and the four action buttons as one compact inline unit. */
@media (min-width: 760px) {
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel {
    display: inline-flex !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: center !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel > #selection-area {
    display: block !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel > #selection-area[hidden] {
    display: none !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel #dice-selection-container,
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel #dice-selection-container .dice-group {
    display: flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel > #turn-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
@media (min-width: 760px) {
  html:not(.app-mobile-mode) body.in-game:not(.real-game-mode):not(.spectator-mode) #game-container > .game-header > #control-panel.header-control-panel {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
}


/* r17: Alte Online-Querformatregeln wurden entfernt. Ab hier ist V3 die einzige Querformatstruktur. */
/* ========================================================================
   V1.7.3 – ONLINE LAYOUT V3
   ------------------------------------------------------------------------
   Isolierte Online-Struktur. Der alte V2-Layer wurde bewusst entfernt.
   Alle folgenden Regeln gelten ausschließlich für .online-layout-v3.
   Realmodus-Regeln werden nicht berührt.
   ======================================================================== */

/* ---------- Gemeinsame Online-Grundstruktur ---------- */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 * {
  min-width: 0;
}

body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #game-area {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #game-area > .online-page-stack {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Auf Mobilgeräten bleiben der eigene Spielername und der erspielte Tropfenstand
   grundsätzlich sichtbar. Gerätespezifische Header-Regeln dürfen diese beiden
   Angaben nicht mehr ausblenden. */
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #player-info {
  display: flex !important;
}
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #player-info .score-info {
  display: inline-flex !important;
}
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #player-info .role-info {
  display: none !important;
}

/* Eigene und fremde Brett-Panels benutzen exakt dieselbe Geometrie. */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  border-width: 1px !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board > .own-board-heading,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-view-head {
  flex: 0 0 auto !important;
  min-height: 27px !important;
  margin: 0 0 4px !important;
  padding: 2px 4px !important;
  font-size: clamp(.72rem, 1.05vw, 1rem) !important;
}

body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-view,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-view-card {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Das eigentliche Brett füllt den Panelrahmen vollständig. */
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board #board-rows.match84-drop-board,
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-board-rows.match84-drop-board {
  display: grid !important;
  flex: 1 1 0 !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: var(--fit-board-gap, clamp(1px, .28vw, 4px)) !important;
  margin: 0 !important;
  padding: 5px 4px 6px !important;
  border: 2px solid #6f8374 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(202,221,208,.18) !important;
}

:root[data-theme="dark"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #board-rows.match84-drop-board,
:root[data-theme="dark"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .opponent-board-rows.match84-drop-board {
  border-color: #566c5d !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .board-row.match84-shaft {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-shaft .row-number {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 3px !important;
  text-align: center !important;
  font-size: var(--fit-number-size, clamp(.58rem, .82vw, .88rem)) !important;
  line-height: 1 !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-shaft .row-content.match84-shaft-content {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: var(--fit-content-gap, clamp(3px, .55dvh, 7px)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Schacht und Reservoir teilen sich die verfügbare Höhe statt mit alten,
   geräteabhängigen Fixhöhen mitten im Panel zu enden. */
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack {
  display: grid !important;
  flex: 1 1 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(7, minmax(0, 1fr)) minmax(0, 1.15fr) !important;
  place-items: center !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(3px, .6dvh, 8px) 1px !important;
  border-width: 2px !important;
  border-radius: clamp(7px, 1vw, 14px) !important;
  overflow: hidden !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack::before {
  content: none !important;
  display: none !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-slot {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-slot {
  position: relative !important;
}
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-slot:not(:nth-child(7))::after {
  content: "" !important;
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: 0 !important;
  height: 1px !important;
  background: rgba(151,177,157,.15) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Tropfen werden relativ zur realen Schachtbreite skaliert und dadurch immer
   mittig gehalten. Keine geräteabhängigen Pixelbreiten mehr. */
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack .match84-drop {
  width: var(--fit-drop-w, 72%) !important;
  height: var(--fit-drop-h, auto) !important;
  aspect-ratio: .72 / 1 !important;
  max-width: none !important;
  max-height: none !important;
  margin: auto !important;
  justify-self: center !important;
  align-self: center !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-slot.pending-slot::before {
  left: 50% !important;
  top: 50% !important;
  width: var(--fit-drop-w,72%) !important;
  height: var(--fit-drop-h,auto) !important;
  transform: translate(-50%, -50%) !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-reservoir-wrap {
  display: flex !important;
  flex: 0 0 var(--fit-reservoir-basis, 20%) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 2px !important;
  margin: 0 !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-reservoir {
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-width: 1px !important;
  border-radius: 2px 2px 6px 6px !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-water {
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  width: auto !important;
  border-radius: 1px 1px 4px 4px !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-water::before {
  left: -1% !important;
  right: -1% !important;
  top: -2px !important;
  height: 5px !important;
  border-radius: 50% !important;
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-progress {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: clamp(.52rem, .7vw, .78rem) !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Die Gegnerwürfel existieren ausschließlich im Tab des aktiven Spielers. */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-dice-live {
  display: none !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 5px 0 0 !important;
  padding: 5px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(230,238,233,.24) !important;
  background: transparent !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-dice-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  place-items: center !important;
  width: 100% !important;
  gap: 3px !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-die {
  width: min(88%, 38px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  padding: 3px !important;
}

/* ---------- Desktop: komplette Online-Ansicht passt in den Viewport ---------- */
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) .app-shell {
  height: calc(100dvh - 32px) !important;
  min-height: 0 !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ---------- Desktop: drei Spalten; Höhe kommt aus dem Restplatz ---------- */
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #game-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .84fr) minmax(0, 1.08fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "own controls opponent"
    "own tabs opponent" !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 10px !important;
  overflow: hidden !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #game-area > .online-page-stack {
  display: contents !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-scroll-content {
  display: contents !important;
}
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board { grid-area: own !important; }
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #control-panel { grid-area: controls !important; }
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column { grid-area: tabs !important; }
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards { grid-area: opponent !important; }

html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board,
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards {
  height: 100% !important;
  min-height: 0 !important;
}

/* Zuschauer verwenden auf Desktop exakt dieselbe Geometrie wie Spieler.
   Nur das eigene Spielbrett fehlt sichtbar. Die vollständige aktuelle DOM-Kette
   ist hier absichtlich angegeben, weil ältere Zuschauerregeln mit zusätzlichen
   IDs sonst weiterhin max-width/display auf Tabs, Steuerplatz und Gegnerbrett
   erzwingen würden. */
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .84fr) minmax(0, 1.08fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    ". controls opponent"
    ". tabs opponent" !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 10px !important;
  overflow: hidden !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #own-page-stack {
  display: contents !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #own-page-stack > #main-player-board {
  display: none !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #own-page-stack > #control-panel {
  grid-area: controls !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "actions" "dice" !important;
  align-content: start !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #opponent-page-stack,
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #opponent-page-stack > #opponent-scroll-content {
  display: contents !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #opponent-page-stack > #opponent-scroll-content > #opponent-tabs-column {
  grid-area: tabs !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
}
html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #opponent-page-stack > #opponent-scroll-content > #opponent-boards {
  grid-area: opponent !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
  overflow: hidden !important;
}

/* Steuerzone in der mittleren Spalte. */
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #control-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "actions" "dice" !important;
  align-content: start !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
}
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #turn-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  place-items: center !important;
  width: 100% !important;
  gap: 5px !important;
  margin: 0 !important;
}
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #turn-actions > .icon-button:not([hidden]) {
  display: inline-flex !important;
  width: min(100%, 52px) !important;
  height: 48px !important;
  padding: 7px !important;
}
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #selection-area {
  grid-area: dice !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px !important;
  border-width: 1px !important;
}
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  place-items: center !important;
  width: 100% !important;
  gap: 3px !important;
  margin: 0 !important;
}
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container .dice-group {
  display: contents !important;
}
html[data-app-device="desktop"] body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container .dice-item {
  width: min(88%, 42px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  padding: 4px !important;
}

/* Tabs in der mittleren Spalte immer untereinander. */
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tabs {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) max-content !important;
  place-items: center !important;
  width: 100% !important;
  gap: 1px !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > .opponent-tab-score {
  display: none !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress > .opponent-progress-score {
  display: inline-block !important;
  grid-column: 13 !important;
  justify-self: end !important;
  align-self: center !important;
  margin-left: 5px !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
  width: min(94%, 26px) !important;
  max-width: 26px !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  flex: none !important;
}

/* ---------- Mobile quer: dieselbe Dreispaltenstruktur wie Desktop ----------
   Smartphone und Tablet verwenden im Querformat dasselbe Online-Raster:
   eigenes Brett | Steuerung + Mitspieler | Gegnerbrett. Nur der Kopf bleibt
   mobil und benutzt das Hamburger-Menü. Damit existiert für Querformat kein
   separates Phone-/Tablet-Layout mehr. */
@media (orientation: landscape) {
html.app-mobile-mode body.in-game:not(.real-game-mode) .app-shell {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: 100% !important;
  height: var(--app-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  gap: 4px !important;
  padding: 0 4px 4px !important;
  overflow: hidden !important;
}

/* Mobiler Kopf: Titel | eigener Spieler + Tropfen | Hamburger. */
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header {
  display: grid !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  grid-template-columns: minmax(0, 1fr) minmax(100px, auto) 34px !important;
  grid-template-areas: "title player menu" !important;
  align-items: center !important;
  gap: 7px !important;
  padding: max(5px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 5px max(7px, env(safe-area-inset-left)) !important;
  border-radius: 0 !important;
  z-index: 1200 !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header > .game-title-block {
  grid-area: title !important;
  display: block !important;
  min-width: 0 !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header .game-title-block .game-title-heading {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  font-size: clamp(.82rem, 3dvh, 1rem) !important;
  white-space: nowrap !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header .app-version {
  display: none !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header .header-game-name {
  display:flex !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #player-info {
  grid-area: player !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 42vw !important;
  overflow: hidden !important;
  font-size: clamp(.64rem, 2.2dvh, .78rem) !important;
  white-space: nowrap !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #player-info > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #player-info .role-info,
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #player-info .player-info-label {
  display: none !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode):not(.spectator-mode)
#game-container.online-layout-v3 > .game-header #player-info .score-info {
  display: inline-flex !important;
  flex: 0 0 auto !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header #mobile-menu-button {
  grid-area: menu !important;
  display: inline-flex !important;
  position: static !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px !important;
  justify-self: end !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header .spectator-lock-button {
  width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important; margin:0 !important; padding:3px !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header > #host-controls {
  display: none !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header.mobile-menu-open > #host-controls {
  display: flex !important;
  position: absolute !important;
  top: calc(100% + 5px) !important;
  right: max(5px, env(safe-area-inset-right)) !important;
  width: min(270px, calc(100vw - 10px)) !important;
  padding: 9px !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  z-index: 1300 !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #mobile-board-switch {
  display: none !important;
}

/* Inhalt exakt wie Desktop: drei Spalten, Brettspalten etwas breiter als Mitte. */
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .84fr) minmax(0, 1.08fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "own controls opponent"
    "own tabs opponent" !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 5px !important;
  overflow: hidden !important;
  transform: none !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > .online-page-stack,
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-scroll-content {
  display: contents !important;
}
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board { grid-area: own !important; }
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #control-panel { grid-area: controls !important; }
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column { grid-area: tabs !important; }
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards { grid-area: opponent !important; }
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board,
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Mittlerer Steuerbereich: nur Struktur. Die eigentliche Button-/Würfelgeometrie
   wird einmalig im r21-Querformatblock weiter unten aus der gemessenen Fläche gesetzt. */
html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #control-panel {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-areas:"actions" "dice" !important;
  align-content:stretch !important;
  align-items:stretch !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
}

/* Mitspielerbereich wie Desktop: Tabs untereinander und intern scrollbar. */
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px !important;
  overflow: hidden !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tabs {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html[data-app-device="phone"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column > .spectator-list {
  font-size: .72rem !important;
  line-height: 1 !important;
  gap: .18rem !important;
  padding: 3px 4px !important;
}
html[data-app-device="phone"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column > .spectator-list .spectator-label,
html[data-app-device="phone"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column > .spectator-list .spectator-chip,
html[data-app-device="phone"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column > .spectator-list .spectator-promote-button {
  font-size: inherit !important;
  line-height: inherit !important;
}
html[data-app-device="phone"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column > .spectator-list .spectator-chip {
  padding: 2px 4px !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 5px !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  place-items: center !important;
  width: 100% !important;
  gap: 1px !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
  width: min(92%, 18px) !important;
  max-width: 18px !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  flex: none !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead > .opponent-progress-value {
  font-size: .72em !important;
  line-height: 1 !important;
  transform: none !important;
}

/* Zuschauer behalten – wie Desktop – Mitte + rechtes Brett. */
html.app-mobile-mode body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 > #game-area {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .84fr) minmax(0, 1.08fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: ". tabs opponent" !important;
}
html.app-mobile-mode body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 #own-page-stack { display: none !important; }
html.app-mobile-mode body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-page-stack { display: contents !important; }
html.app-mobile-mode body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column { grid-area: tabs !important; }
html.app-mobile-mode body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards {
  grid-area: opponent !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
}

/* Abgelegte/gesicherte Würfel bleiben auch im aktiven Zug sichtbar grau. */
body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3
#dice-selection-container.own-dice-active .dice-item.secured {
  opacity: .40 !important;
  filter: grayscale(.78) saturate(.30) brightness(.84) !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ---------- Mobil hochkant: zwei echte Wischseiten ---------- */
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) {
  padding: 0 !important;
  overflow: hidden !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) .app-shell {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--game-header-height, 44px) minmax(0, 1fr) !important;
  width: 100% !important;
  height: var(--app-viewport-height, 100dvh) !important;
  min-height: 0 !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 3px max(3px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}
/* Der mobile Online-Header wird ausschließlich im aktiven r21-Headerblock definiert. */


html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #game-area {
  display: grid !important;
  flex: 1 1 0 !important;
  grid-template-columns: 100% 100% !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  transform: none !important;
  transition: none !important;
  touch-action: pan-y !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3.mobile-show-opponent > #game-area {
  transform: none !important;
}

html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #own-page-stack,
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-page-stack {
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 4px !important;
  padding: 0 !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #own-page-stack { grid-column: 1 !important; overflow: hidden !important; }
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-page-stack { grid-column: 2 !important; overflow-x: hidden !important; overflow-y: auto !important; }

/* Aktiver Spieler: Aktionen und Würfel sind eine feste Zone oberhalb des
   eigenen Bretts und können nicht mehr durch Zuschauer-/Legacy-Regeln verschwinden. */
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #control-panel {
  display: grid !important;
  flex: 0 0 auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: "actions" "dice" !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px !important;
  border-width: 1px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #turn-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 4px !important;
  margin: 0 !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #turn-actions > .icon-button:not([hidden]) {
  display: inline-flex !important;
  width: min(100%, 44px) !important;
  height: 40px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #selection-area {
  grid-area: dice !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 3px !important;
  border-width: 1px !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #selection-area[hidden] {
  display: none !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 3px !important;
  margin: 0 !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container .dice-group {
  display: contents !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container .dice-item {
  width: min(88%, 43px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  padding: 4px !important;
}

html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board {
  display: flex !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px !important;
}
html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board > .own-board-heading {
  min-height: 22px !important;
  margin-bottom: 2px !important;
  padding: 1px 3px !important;
  font-size: .72rem !important;
}

/* Gegnerseite: Tabs strikt untereinander, darunter ein Brett in derselben
   Breite. Bei vielen Spielern scrollt die gesamte Gegnerseite vertikal. */
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 4px !important;
  overflow: visible !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tabs {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  place-items: center !important;
  width: 100% !important;
  gap: 2px !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
  width: min(90%, 22px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  flex: none !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-die {
  width: min(88%, 43px) !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: var(--online-peer-board-height, calc(var(--app-viewport-height, 100dvh) - var(--game-header-height, 44px) - 8px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px !important;
  overflow: hidden !important;
}

/* Mobil hochkant: Tropfenmaße kommen ausschließlich aus dem ResizeObserver. */

html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-reservoir-wrap {
  flex-basis: var(--fit-reservoir-basis, 18%) !important;
}

/* Zuschauer auf Phone: nur die Gegnerseite, keine leere Spieler-Seite. */
html.app-mobile-mode.app-portrait body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 > #game-area {
  display: block !important;
  transform: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html.app-mobile-mode.app-portrait body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 #own-page-stack {
  display: none !important;
}
html.app-mobile-mode.app-portrait body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-page-stack {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  gap: 4px !important;
}

/* Safety guards: Ein Online-Steuerblock gehört ausschließlich in die feste
   own-page-stack-Struktur. Alte Header-Reparenting-Regeln dürfen nicht greifen. */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header > #control-panel,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #control-panel {
  display: none !important;
}


/* Eigene Würfel: auf allen Online-Ansichten grau, bis im eigenen Zug wirklich
   gewürfelt wurde. Die Regel liegt jetzt im einzigen aktiven Online-Layout. */
body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3
#dice-selection-container.own-dice-inactive .dice-item,
body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3
#dice-selection-container .inactive-die {
  opacity: .34 !important;
  filter: grayscale(.72) saturate(.32) brightness(.84) !important;
  pointer-events: none !important;
  cursor: default !important;
}
body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3
#dice-selection-container.own-dice-active .dice-item:not(.inactive-die):not(.secured) {
  opacity: 1 !important;
  filter: none !important;
}

/* Mobil hochkant: genau ein vertikaler Gegner-Scrollcontainer. Auch diese
   Struktur hängt nur an Orientierung + mobilem Eingabemodus, nicht an Phone/
   Tablet oder einer Pixelbreite. */
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-page-stack {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  touch-action: pan-y !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-scroll-content {
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  gap: 4px !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-scroll-content > #opponent-tabs-column {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-scroll-content > #opponent-boards {
  display: flex !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-scroll-content > #opponent-tabs-column,
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-scroll-content #opponent-tabs {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ========================================================================
   V1.7.3 – ONLINE LAYOUT V3 / FINAL ISOLATION GUARDS
   Volle DOM-Kette nur dort, wo historische Regeln mehrere IDs verwenden.
   ======================================================================== */

/* Desktop-Zuschauer: keine alte 900px-Begrenzung mehr. Die Inhalte bleiben
   in der mittleren und rechten Drittelspalte der normalen Desktopbreite. */
html[data-app-device="desktop"] body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
html[data-app-device="desktop"] body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area > #opponent-page-stack > #opponent-boards {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* Querformat nutzt ausschließlich die gemeinsame Desktop-Geometrie; keine Tablet-Sonderregeln. */
/* Phone hoch: die alten aus --m84-stack-h berechneten Mindesthöhen waren die
   Ursache für das zusammengeschrumpfte Spielfeld im großen Rahmen. */
html.app-mobile-mode.app-portrait
body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area #main-player-board > #board-rows.match84-drop-board,
html.app-mobile-mode.app-portrait
body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area #opponent-boards .opponent-board-rows.match84-drop-board {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 0 !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
html.app-mobile-mode.app-portrait
body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area #main-player-board > #board-rows.match84-drop-board > .board-row.match84-shaft,
html.app-mobile-mode.app-portrait
body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area #opponent-boards .opponent-board-rows.match84-drop-board > .board-row.match84-shaft {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
}
html.app-mobile-mode.app-portrait
body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area #main-player-board > #board-rows .match84-shaft-content,
html.app-mobile-mode.app-portrait
body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area #opponent-boards .opponent-board-rows .match84-shaft-content {
  display: flex !important;
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Tropfengröße wird kontinuierlich aus der realen Brettfläche berechnet. */


/* ========================================================================
   V1.7.3-r23 – aktive Kopf-/Steuer-/Brettgeometrie
   ======================================================================== */

:root {
  --m84-purple: #8f4fd6;
  --m84-purple-hi: #c697ff;
  --m84-purple-mid: #9654df;
  --m84-purple-lo: #56207f;
}

/* Match84-Logo: die 84 sitzt in einem plastischen lila Tropfen. */
.match84-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: .20em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.match84-word {
  font-size: 1em !important;
  font-weight: 900 !important;
  letter-spacing: .012em !important;
}
.match84-year {
  display: inline-grid !important;
  place-items: center !important;
  width: 1.50em !important;
  height: 1.78em !important;
  padding-top: .14em !important;
  flex: 0 0 auto !important;
  font-size: .64em !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 35% 27%, rgba(255,255,255,.92) 0 7%, rgba(255,255,255,.30) 8% 18%, transparent 20%),
    radial-gradient(ellipse at 32% 25%, rgba(224,192,255,.52), transparent 35%),
    linear-gradient(145deg, var(--m84-purple-hi) 0%, var(--m84-purple-mid) 42%, var(--m84-purple) 62%, var(--m84-purple-lo) 100%) !important;
  clip-path: polygon(50% 0%, 68% 20%, 84% 41%, 95% 60%, 100% 73%, 95% 86%, 82% 96%, 65% 100%, 35% 100%, 18% 96%, 5% 86%, 0% 73%, 5% 60%, 16% 41%, 32% 20%) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.22) !important;
  filter:
    drop-shadow(0 3px 1px rgba(0,0,0,.58))
    drop-shadow(0 0 4px rgba(191,126,255,.48))
    drop-shadow(-1px -1px 0 rgba(255,255,255,.12)) !important;
}

/* Gesamt-Tropfenstand im Header. */
body:not(.spectator-mode) .score-info { display:inline-flex !important; align-items:center !important; }
body.in-game.spectator-mode:not(.real-game-mode) #player-info .score-info,
body.in-game.spectator-mode:not(.real-game-mode) #player-info .score-drop {
  display: none !important;
}
.score-drop {
  display:inline-grid !important;
  place-items:center !important;
  width:38px !important;
  height:53px !important;
  padding:8px 3px 0 !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
  color:#fff !important;
  background-color:#7719e8 !important;
  background-image:
    radial-gradient(circle at 54% 51%, rgba(255,255,255,.15) 0 4%, rgba(255,255,255,.08) 8%, transparent 17%),
    radial-gradient(ellipse at 50% 23%, rgba(255,255,255,.26) 0 13%, rgba(255,255,255,.09) 22%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.10) 0 7%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.16) 14%, rgba(255,255,255,.06) 32%, rgba(255,255,255,.025) 50%, rgba(0,0,0,.04) 72%, rgba(0,0,0,.18) 100%) !important;
  border:0 !important;
  border-radius:50% 50% 56% 56% / 34% 34% 68% 68% !important;
  clip-path:none !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size:100% 100% !important;
  -webkit-mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size:100% 100% !important;
  mask-repeat:no-repeat !important;
  mask-position:center !important;
  font-size:.92rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.56),
    inset 0 13px 12px rgba(255,255,255,.06),
    inset -3px -5px 7px rgba(0,0,0,.20),
    inset 0 -2px 6px rgba(0,0,0,.10),
    0 2px 5px rgba(0,0,0,.32) !important;
  filter:saturate(1.10) contrast(1.04) brightness(1.06) drop-shadow(0 1px 1.6px rgba(0,0,0,.20)) !important;
}
.score-drop strong { color:inherit !important; font:inherit !important; }

/* Online-Header: eine echte Zeile im normalen Layoutfluss.
   Links Logo+Schloss | Mitte Spielname | rechts Spieler+Score+Hamburger. */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  grid-template-areas: "title name right" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(6px, 1vw, 16px) !important;
  row-gap: 0 !important;
  width: 100% !important;
  height: clamp(50px, 7dvh, 62px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 5px clamp(7px, .8vw, 12px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 1200 !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header > .game-title-block {
  grid-area: title !important;
  display: flex !important;
  align-items: center !important;
  justify-self: start !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: visible !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .game-title-block .game-title-heading {
  display: flex !important;
  align-items: center !important;
  gap: clamp(4px, .5vw, 8px) !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .match84-header-logo {
  display: block !important;
  width: auto !important;
  height: min(92%, 62px) !important;
  max-width: min(250px, 30vw) !important;
  object-fit: contain !important;
  flex: 0 1 auto !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .match84-header-logo-drop {
  display: none !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .header-game-name {
  grid-area: name !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header #game-name-display {
  display: block !important;
  max-width: 32vw !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #eef4f0 !important;
  white-space: nowrap !important;
  font-size: clamp(.82rem, 1.25vw, 1.22rem) !important;
  text-align: center !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .game-name-input {
  width: min(32vw, 420px) !important;
  min-width: 0 !important;
  height: min(68%, 36px) !important;
  padding-block: 3px !important;
  text-align: center !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .header-game-name:has(.game-name-input:not([hidden])) #game-name-display {
  display: none !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header > .header-right-cluster {
  grid-area: right !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: stretch !important;
  gap: clamp(4px, .55vw, 8px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(4px, .45vw, 7px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(.76rem, 1vw, 1rem) !important;
  white-space: nowrap !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info #my-name {
  font-size: 1.08em !important;
  font-weight: 800 !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info .role-info,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info .player-info-label { display: none !important; }
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info .score-drop {
  width: 38px !important;
  height: 53px !important;
  padding: 8px 3px 0 !important;
  font-size: .92rem !important;
  overflow: visible !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .desktop-header-version { display: none !important; }
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .mobile-menu-version {
  display: block !important;
  order: 999 !important;
  width: 100% !important;
  margin-top: 3px !important;
  padding: 7px 3px 2px !important;
  border-top: 1px solid rgba(220,232,224,.22) !important;
  text-align: right !important;
  font-size: .70rem !important;
  color: #c7cfca !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .spectator-lock-button,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: clamp(32px, 4.4dvh, 38px) !important;
  min-width: clamp(32px, 4.4dvh, 38px) !important;
  height: clamp(32px, 4.4dvh, 38px) !important;
  min-height: clamp(32px, 4.4dvh, 38px) !important;
  margin: 0 !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 8px !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .spectator-lock-button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.25) !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.25);
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button:hover,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header.mobile-menu-open #mobile-menu-button {
  background: linear-gradient(180deg,#5c6760 0%,#3f4943 100%) !important;
  transform: none;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .spectator-lock-button { padding: 3px !important; font-size: 1.32rem !important; }
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .spectator-lock-button .spectator-lock-emoji { font-size: 1em !important; }
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button svg { width: 100% !important; height: 100% !important; stroke: #f4f7f5 !important; }
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header > #host-controls { display: none !important; }
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header.mobile-menu-open > #host-controls {
  display: flex !important;
  position: absolute !important;
  top: calc(100% + 5px) !important;
  right: 0 !important;
  width: min(285px, calc(100vw - 12px)) !important;
  max-height: min(72dvh, 520px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 9px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  border: 1px solid #596169 !important;
  border-radius: 9px !important;
  background: #30363b !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.42) !important;
  z-index: 1500 !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #host-controls > .top-utility-buttons {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  margin: 0 0 2px !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #host-controls > .top-utility-buttons .dice-scheme-button svg {
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
  stroke-width: 1.95 !important;
}

/* Brettüberschriften und Gegnerkopf verwenden dieselbe ruhige graue Typografie. */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board > .own-board-heading,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-heading h2,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-view-head {
  color:#cbd2ce !important;
  text-shadow:none !important;
  font-size:clamp(.72rem,1.05vw,.96rem) !important;
  font-weight:800 !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column .opponent-heading h2 {
  margin:0 0 4px !important;
  line-height:1.1 !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-view-head {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-sizing:border-box !important;
  flex:0 0 30px !important;
  min-height:30px !important;
  margin:0 0 4px !important;
  padding:2px 4px !important;
  gap:6px !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-view-head > strong,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-view-meta,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards .opponent-score-text {
  color:inherit !important;
}
.opponent-view-meta { display:inline-flex !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; }
.opponent-score-text { display:inline-block !important; width:auto !important; height:auto !important; padding:0 !important; background:none !important; clip-path:none !important; filter:none !important; color:inherit !important; font:inherit !important; font-weight:850 !important; line-height:1 !important; text-shadow:none !important; }
.opponent-view-away { color:var(--muted) !important; font-size:.67rem !important; }

/* Wischhinweis: gleiche Farbe wie die Überschrift; nur im Hochformat sichtbar. */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .own-board-heading .board-swipe-hint {
  color:inherit !important;
}
@media (orientation:portrait) {
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 .own-board-heading .board-swipe-hint {
    display:inline-flex !important;
  }
}
@media (orientation:landscape) {
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .board-swipe-hint {
    display:none !important;
  }
}

/* Mobiler Header: dieselben drei Gruppen in exakt einer Zeile.
   Die Regel besitzt absichtlich dieselbe/höhere Spezifität wie alte Portraitregeln. */
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  grid-template-areas: "title name right" !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  height: clamp(44px, 6.2dvh, 52px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: max(3px, env(safe-area-inset-top)) 5px 3px !important;
  gap: 4px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  z-index: 1200 !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .game-title-block .game-title-heading {
  min-width: 0 !important;
  height: 100% !important;
  gap: 3px !important;
}
/* Nur Handy hochkant: Spieltitel mittig im freien Raum zwischen Schloss und Spielername. */
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header > .header-game-name {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header #game-name-display {
  max-width: 100% !important;
}
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .game-title-block .game-title-heading {
  flex-flow: row nowrap !important;
}
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .match84-header-logo-full {
  display: none !important;
}
html[data-app-device="phone"][data-app-orientation="portrait"] body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .match84-header-logo-drop {
  display: block !important;
  width: auto !important;
  height: min(94%, 46px) !important;
  max-width: 48px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .match84-header-logo {
  width: auto !important;
  height: min(88%, 44px) !important;
  max-width: min(146px, 32vw) !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .header-game-name {
  display: flex !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header #game-name-display {
  display: block !important;
  max-width: 28vw !important;
  font-size: clamp(.58rem, 2dvh, .76rem) !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header .game-name-input {
  width: min(28vw, 190px) !important;
  height: 70% !important;
  min-width: 0 !important;
  padding: 2px 5px !important;
  font-size: clamp(.58rem, 2dvh, .76rem) !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header > .header-right-cluster {
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 3px !important;
  overflow: visible !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info {
  min-width: 0 !important;
  max-width: min(30vw, 150px) !important;
  gap: 3px !important;
  overflow: hidden !important;
  font-size: clamp(.56rem, 1.9dvh, .70rem) !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info > span:first-child {
  /* Name + optional avatar must have enough room for short player names.
     16vw clipped e.g. "Andi" to "And" on some phones. */
  max-width: min(24vw, 130px) !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info #my-name {
  display: inline-block !important;
  min-width: 4ch !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info .score-drop {
  width: 25px !important;
  height: 29px !important;
  padding-top: 2px !important;
  font-size: .76rem !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button,
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .spectator-lock-button {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 4px !important;
  border-radius: 7px !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .spectator-lock-button {
  padding: 3px !important;
  overflow: visible !important;
}
html[data-app-device="phone"] body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header .spectator-lock-button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 31px !important;
}
html[data-app-device="phone"] body.in-game.spectator-mode:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header .spectator-lock-button .spectator-lock-emoji {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background-position: center !important;
  background-size: contain !important;
}
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > .game-header.mobile-menu-open > #host-controls {
  right: max(2px, env(safe-area-inset-right)) !important;
  width: min(270px, calc(100vw - 6px)) !important;
}

/* Auf Mobilgeräten steht rechts am Gegnerbrett nur die Zahl, ohne Tropfensilhouette. */
html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .opponent-score-text {
  display:inline-block !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  background:none !important;
  clip-path:none !important;
  filter:none !important;
  color:inherit !important;
  text-shadow:none !important;
  font-size:clamp(.66rem,2.2dvh,.80rem) !important;
  font-weight:850 !important;
}

/* Querformat: exakt dieselben Proportionen auf Desktop, Tablet und Handy.
   Keine Geräteklasse und keine Pixel-Schwelle beeinflusst Spalten oder Steuergrößen. */
@media (orientation: landscape) {
  body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #game-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .84fr) minmax(0, 1.08fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "own controls opponent" "own tabs opponent" !important;
    align-items: stretch !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.in-game:not(.real-game-mode) #game-container.online-layout-v3 > #game-area > .online-page-stack,
  body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #opponent-scroll-content {
    display: contents !important;
  }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board { grid-area: own !important; }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #control-panel { grid-area: controls !important; }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column { grid-area: tabs !important; }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-boards { grid-area: opponent !important; }

  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #control-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: var(--m84-button-size, 34px) var(--m84-die-size, 30px) !important;
    grid-template-areas: "actions" "dice" !important;
    align-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: var(--m84-control-panel-height, auto) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: var(--m84-control-row-gap, 3px) !important;
    margin: 0 !important;
    padding: var(--m84-control-panel-pad, 4px) !important;
    border-width: 1px !important;
    border-radius: var(--m84-control-radius, 6px) !important;
    overflow: visible !important;
  }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #turn-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(4, var(--m84-button-size, 34px)) !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #turn-actions > .icon-button:not([hidden]) {
    width: var(--m84-button-size, 34px) !important;
    min-width: var(--m84-button-size, 34px) !important;
    height: var(--m84-button-size, 34px) !important;
    min-height: var(--m84-button-size, 34px) !important;
    max-height: none !important;
    padding: calc(var(--m84-button-size, 34px) * .10) !important;
    border-width: var(--btn-shell-border, 1px) !important;
    border-radius: var(--m84-control-radius, 5px) !important;
  }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #selection-area {
    grid-area: dice !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1px 3px !important;
    border-width: 1px !important;
    border-radius: var(--m84-control-radius, 5px) !important;
    overflow: visible !important;
  }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container {
    display: grid !important;
    grid-template-columns: repeat(6, var(--m84-die-size, 30px)) !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container .dice-group { display: contents !important; }
  body.in-game.player-mode:not(.real-game-mode) #game-container.online-layout-v3 #dice-selection-container .dice-item {
    width: var(--m84-die-size, 30px) !important;
    min-width: var(--m84-die-size, 30px) !important;
    height: var(--m84-die-size, 30px) !important;
    min-height: var(--m84-die-size, 30px) !important;
    max-height: none !important;
    padding: calc(var(--m84-die-size, 30px) * .07) !important;
    border-radius: var(--m84-control-radius, 5px) !important;
    align-self: center !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #main-player-board > .own-board-heading {
    display: flex !important;
    visibility: visible !important;
    min-height: 22px !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .board-swipe-hint { display: none !important; }

  /* Desktop-Zuschauer: gleiche Drei-Spalten-Geometrie wie Spieler, aber ohne
     eigene Brettspalte und ohne leere Steuerzeile oberhalb der Tabs. */
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .84fr) minmax(0, 1.08fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: ". tabs opponent" !important;
    align-items: stretch !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack {
    display: none !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack,
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack > #opponent-scroll-content {
    display: contents !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area #opponent-tabs-column {
    grid-area: tabs !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  html:not(.app-mobile-mode) body.in-game.spectator-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area #opponent-boards {
    grid-area: opponent !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
  }
}

/* Tropfen sicher horizontal zentrieren. */
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-slot { justify-items:center !important; align-items:center !important; }
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack .match84-drop:not(.earned-drop-falling) {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  margin:0 !important;
  justify-self:auto !important;
  align-self:auto !important;
  transform:translate(-50%,-50%) !important;
}
html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-slot.pending-slot::before {
  left:50% !important;
  right:auto !important;
  transform:translate(-50%,-50%) !important;
}

html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-progress {
  font-size:clamp(.72rem,.88vw,1rem) !important;
  font-weight:800 !important;
}

/* Browser-[hidden] behält Vorrang. */
#game-container.online-layout-v3 #game-name-display[hidden],
#game-container.online-layout-v3 #game-name-input[hidden] { display:none !important; }
#game-container.online-layout-v3 .header-game-name:has(#game-name-input:not([hidden])) #game-name-display { display:none !important; }


/* V1.7.4 – Ladebildschirm, Browser-Hinweis und rote Fehlermeldungen */
.app-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px);
  background: #050506;
  backdrop-filter: none;
}
.app-preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
/* V2.0.52 – NoScript-Fallback nutzt denselben Ladebildschirm mit Hinweisblase. */
.app-noscript-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
}
.app-noscript-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.app-noscript-message {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translate(-50%, -50%);
  width: min(680px, 82%);
  box-sizing: border-box;
  padding: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 34px);
  border-radius: 28px;
  background: linear-gradient(180deg, #8447dd 0%, #6530b6 100%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 12px 38px rgba(30,8,62,.52), inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.app-noscript-message strong {
  display: block;
  margin-bottom: .35em;
  font-size: 1.12em;
}
.app-preloader-stage {
  position: relative;
  width: min(1120px, 96vw);
  aspect-ratio: 16 / 9;
}
.app-preloader-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .45s ease;
}
.app-preloader-image.is-ready {
  opacity: 1;
}
.app-preloader-progress-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 62vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .45s ease;
}
.app-preloader-progress-wrap.is-ready {
  opacity: 1;
}
.app-preloader-progress-track {
  width: 100%;
  height: clamp(12px, 1.7vw, 16px);
  border-radius: 999px;
  background: rgba(10, 11, 18, .82);
  border: 1px solid rgba(244, 240, 255, .26);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 18px rgba(0,0,0,.45);
}
.app-preloader-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f35d8 0%, #9d63ff 50%, #c8a7ff 100%);
  box-shadow: 0 0 14px rgba(174, 109, 255, .85);
  transition: width .16s linear;
}
.app-preloader-progress-text {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .08em;
  color: #f1ebff;
  text-shadow: 0 2px 10px rgba(0,0,0,.68);
}
@media (max-width: 700px) {
  .app-preloader-progress-wrap { width: min(300px, 74vw); gap: 8px; }
  .app-preloader-image { border-radius: 16px; }
}
@media (orientation: portrait) and (max-width: 1024px) {
  .app-preloader { padding: 0; }
  .app-preloader-stage {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
  .app-preloader-image {
    border-radius: 0;
    object-fit: cover;
    object-position: center center;
    box-shadow: none;
  }
  .app-noscript-image { border-radius: 0; box-shadow: none; }
  .app-noscript-message { top: 22%; width: min(88%, 520px); border-radius: 24px; }
  .app-preloader-progress-wrap {
    top: 56%;
    width: min(320px, 76vw);
  }
}


/* V1.7.8 – Während des Ladens ist ausschließlich das Startbild sichtbar.
   Erst bei 100 % wird die eigentliche Lobby weich eingeblendet. */
body.app-loading {
  padding: 0 !important;
  background: #050506 !important;
  overflow: hidden !important;
}
body.app-loading > :not(#app-preloader):not(script) {
  visibility: hidden !important;
  opacity: 0 !important;
}
body.app-ready:not(.in-game) > .top-utility-buttons,
body.app-ready:not(.in-game) > .app-shell {
  animation: match84-lobby-reveal .42s ease-out both;
}
@keyframes match84-lobby-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* Ungültige Würfelauswahl: zwei langsame rote Pulse statt schnellen Blinkens.
   Der rote Hinweis liegt als halbtransparente Fläche ÜBER dem vorhandenen
   Hintergrund und kann deshalb weder vom grünen Zugrahmen noch von den
   Realmodus-Hintergrundregeln überschrieben werden. */
@keyframes m84-invalid-red-pulse {
  0%, 50%, 100% { opacity: 0; }
  22%, 72% { opacity: 1; }
}

/* V2.0.233 – Leere Reihe: exakt dieselbe Ein-/Ausblendkurve wie die rote
   Würfelrückmeldung. So starten Würfel und Reihe gleichzeitig bei opacity 0,
   erreichen dieselben Peaks und enden gemeinsam ohne sichtbaren Vorsprung. */
@keyframes m84-invalid-shaft-red-pulse {
  0%, 50%, 100% { opacity: 0; }
  22%, 72% { opacity: 1; }
}

#selection-area.selection-invalid-flash,
#real-selection-area.selection-invalid-flash,
.opponent-dice-live.selection-invalid-flash,
.match84-shaft.shaft-invalid-flash,
.real-match84-shaft.shaft-invalid-flash {
  position: relative !important;
  isolation: isolate;
}

#selection-area.selection-invalid-flash::after,
#real-selection-area.selection-invalid-flash::after,
.opponent-dice-live.selection-invalid-flash::after,
.match84-shaft.shaft-invalid-flash::after,
.real-match84-shaft.shaft-invalid-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  background: rgba(220, 42, 42, .30);
  box-shadow:
    inset 0 0 0 3px rgba(225, 55, 55, .94),
    0 0 .9rem rgba(225, 55, 55, .48);
  animation: m84-invalid-red-pulse 1.55s ease-in-out 1;
}

/* Der leere Schacht soll als Fläche erkennbar rot pulsieren, nicht nur am Rand. */
.match84-shaft.shaft-invalid-flash::after,
.real-match84-shaft.shaft-invalid-flash::after {
  background: rgba(220, 42, 42, .38);
  box-shadow:
    inset 0 0 0 3px rgba(225, 55, 55, .96),
    inset 0 0 1.3rem rgba(225, 55, 55, .32),
    0 0 1rem rgba(225, 55, 55, .44);
  animation: m84-invalid-shaft-red-pulse 1.55s ease-in-out 1;
}

/* Im Würfelfeld ist die Fläche etwas transparenter, damit die Würfel sichtbar bleiben. */
#selection-area.selection-invalid-flash::after,
#real-selection-area.selection-invalid-flash::after,
.opponent-dice-live.selection-invalid-flash::after {
  background: rgba(220, 42, 42, .24);
}


/* V1.7.10 – E-Mail-Adressen erst nach bewusster Nutzeraktion sichtbar. */
.email-reveal-button {
  display: inline;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  box-shadow: none;
}
.email-reveal-button:hover,
.email-reveal-button:focus-visible {
  background: none;
  transform: none;
  text-decoration-thickness: 2px;
}
.revealed-email {
  overflow-wrap: anywhere;
}



/* V1.9.5 – Ein einziger globaler Chrome-Compositor-Layer.
   Bewegte Online-Elemente liegen nicht mehr in Board-/Scroll-/Grid-Kontexten. */
body.in-game:not(.real-game-mode) > .m84-global-animation-stage {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9990 !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate !important;
  transform: translate3d(0,0,0) !important;
  backface-visibility: hidden !important;
}
body.in-game:not(.real-game-mode) > .m84-global-animation-stage .m84-engine-global-drop {
  box-sizing: border-box !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 48% 48% 54% 54% / 35% 35% 66% 66% !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E") !important;
  mask-size: 100% 100% !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  background-image:
    radial-gradient(ellipse at 52% 21%, rgba(255,255,255,.18) 0 12%, rgba(255,255,255,.06) 20%, transparent 38%),
    radial-gradient(ellipse at 52% 78%, rgba(255,255,255,.12) 0 6%, rgba(255,255,255,.04) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.12) 15%, rgba(255,255,255,.05) 34%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.05) 74%, rgba(0,0,0,.16) 100%) !important;
  box-shadow:
    inset 1px 2px 3px rgba(255,255,255,.44),
    inset 0 10px 10px rgba(255,255,255,.05),
    inset -2px -4px 6px rgba(0,0,0,.18),
    inset 0 -2px 5px rgba(0,0,0,.09),
    0 2px 5px rgba(0,0,0,.32) !important;
  filter: none !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  animation: none !important;
  transition: none !important;
}
body.in-game:not(.real-game-mode) > .m84-global-animation-stage .m84-engine-global-drop::before,
body.in-game:not(.real-game-mode) > .m84-global-animation-stage .m84-engine-global-drop::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 2 !important;
  filter: none !important;
}
body.in-game:not(.real-game-mode) > .m84-global-animation-stage .m84-engine-global-drop::before {
  width: 27% !important; height: 62% !important; left: 14% !important; top: 18% !important;
  border-radius: 74% 38% 66% 44% / 44% 34% 70% 58% !important;
  background: linear-gradient(156deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.76) 18%, rgba(255,255,255,.36) 46%, rgba(255,255,255,.12) 66%, transparent 84%) !important;
  transform: rotate(14deg) !important;
}
body.in-game:not(.real-game-mode) > .m84-global-animation-stage .m84-engine-global-drop::after {
  width: 17% !important; height: 58% !important; right: 14% !important; top: 21% !important;
  border-radius: 38% 74% 50% 68% / 36% 46% 66% 58% !important;
  background: linear-gradient(204deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.48) 24%, rgba(255,255,255,.18) 52%, transparent 82%) !important;
  transform: rotate(-13deg) !important;
}

/* V1.9.2: FLIP-Klon des tatsächlich sichtbaren Brett-Tropfens. Der Klon
   besitzt dieselbe Glas-/Tropfenoptik, liegt aber vollständig außerhalb des
   Grid/Flex-Brettbaums und animiert ausschließlich transform/opacity. */
body.in-game:not(.real-game-mode) .m84-engine-falling-drop {
  position: absolute;
  display: block;
  z-index: 3;
  margin: 0;
  padding: 0;
  pointer-events: none;
  border: 0;
  border-radius: 50% 50% 56% 56% / 34% 34% 68% 68%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 139'%3E%3Cpath fill='black' d='M50 0 C46 12 39 24 31 38 C22 53 11 69 10 91 C9 118 28 139 50 139 C72 139 91 118 90 91 C89 69 78 53 69 38 C61 24 54 12 50 0 Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  background-image:
    radial-gradient(circle at 54% 51%, rgba(255,255,255,.15) 0 4%, rgba(255,255,255,.08) 8%, transparent 17%),
    radial-gradient(ellipse at 50% 23%, rgba(255,255,255,.26) 0 13%, rgba(255,255,255,.09) 22%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.10) 0 7%, rgba(255,255,255,.03) 14%, transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.16) 14%, rgba(255,255,255,.06) 32%, rgba(255,255,255,.025) 50%, rgba(0,0,0,.04) 72%, rgba(0,0,0,.18) 100%);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.56),
    inset 0 13px 12px rgba(255,255,255,.06),
    inset -3px -5px 7px rgba(0,0,0,.20),
    inset 0 -2px 6px rgba(0,0,0,.10),
    0 2px 5px rgba(0,0,0,.32);
  opacity: 1;
  transform: translate3d(0,0,0);
  transform-origin: 50% 72%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
body.in-game:not(.real-game-mode) .m84-engine-falling-drop::before,
body.in-game:not(.real-game-mode) .m84-engine-falling-drop::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
body.in-game:not(.real-game-mode) .m84-engine-falling-drop::before {
  width: 29%; height: 66%; left: 12%; top: 16%;
  border-radius: 76% 40% 68% 44% / 42% 34% 72% 60%;
  background: linear-gradient(156deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.86) 15%, rgba(255,255,255,.46) 43%, rgba(255,255,255,.16) 66%, transparent 85%);
  transform: rotate(14deg);
}
body.in-game:not(.real-game-mode) .m84-engine-falling-drop::after {
  width: 18%; height: 61%; right: 12%; top: 18%;
  border-radius: 38% 76% 52% 70% / 34% 46% 68% 60%;
  background: linear-gradient(204deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.58) 24%, rgba(255,255,255,.22) 54%, transparent 84%);
  transform: rotate(-12deg);
}
html.browser-chromium body.in-game:not(.real-game-mode) .m84-engine-falling-drop {
  filter: none !important;
}
body.in-game:not(.real-game-mode) .m84-engine-row-celebration {
  position: absolute;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
  border-radius: 18px;
  transform: translate3d(var(--m84-swipe-x, 0px),0,0);
}
body.in-game:not(.real-game-mode) .m84-engine-row-sweep {
  position: absolute;
  z-index: 2;
  left: -18%;
  right: -18%;
  top: -18%;
  height: 42%;
  border-radius: 45%;
  opacity: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.98) 0%,
      color-mix(in srgb, var(--shaft-color) 72%, white 28%) 15%,
      color-mix(in srgb, var(--shaft-color) 92%, white 8%) 42%,
      color-mix(in srgb, var(--shaft-color) 55%, transparent 45%) 66%,
      transparent 82%);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--shaft-color) 72%, transparent 28%),
    0 0 26px color-mix(in srgb, var(--shaft-color) 58%, transparent 42%);
  will-change: transform, opacity;
  transform: translateZ(0);
}
body.in-game:not(.real-game-mode) .m84-engine-row-flash {
  position: absolute;
  z-index: 1;
  inset: 0 -8%;
  border-radius: 18px;
  opacity: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--shaft-color) 42%, transparent 58%),
      color-mix(in srgb, var(--shaft-color) 18%, transparent 82%) 45%,
      color-mix(in srgb, var(--shaft-color) 38%, transparent 62%));
  box-shadow:
    0 0 18px color-mix(in srgb, var(--shaft-color) 72%, transparent 28%),
    inset 0 0 18px color-mix(in srgb, var(--shaft-color) 68%, transparent 32%);
  will-change: opacity;
}


/* V2.0.48 – Perfekte Sieben: Der normale Reihen-Schweif geht ohne Pause
   in eine bildschirmweite Fontaene ueber. Die Effekt-Ebene liegt bereits fixed
   ueber dem gesamten Viewport; Ursprung bleibt der jeweilige Schacht. */
body.in-game .m84-perfect-seven-fountain {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}
body.in-game .m84-perfect-seven-jet {
  position: absolute;
  left: var(--origin-x);
  top: var(--origin-y);
  width: clamp(18px, 2.2vw, 34px);
  height: min(54vh, 410px);
  border-radius: 50% 50% 42% 42%;
  opacity: 0;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.98) 14%,
    color-mix(in srgb, var(--shaft-color) 58%, white 42%) 38%,
    color-mix(in srgb, var(--shaft-color) 88%, transparent 12%) 72%,
    transparent 100%);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--shaft-color) 82%, transparent 18%));
  will-change: transform, opacity;
}
body.in-game .m84-perfect-seven-ring {
  position: absolute;
  left: var(--origin-x);
  top: calc(var(--origin-y) - min(34vh, 260px));
  width: clamp(42px, 6vw, 86px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(2px, .28vw, 5px) solid color-mix(in srgb, var(--shaft-color) 55%, white 45%);
  box-shadow:
    0 0 18px rgba(255,255,255,.85),
    0 0 34px color-mix(in srgb, var(--shaft-color) 78%, transparent 22%);
  opacity: 0;
  will-change: transform, opacity;
}
body.in-game .m84-perfect-seven-star {
  position: absolute;
  left: var(--origin-x);
  top: calc(var(--origin-y) - min(34vh, 260px));
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  font-size: clamp(20px, 2.8vw, 42px);
  font-weight: 900;
  color: color-mix(in srgb, var(--shaft-color) 50%, white 50%);
  text-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 16px color-mix(in srgb, var(--shaft-color) 86%, transparent 14%),
    0 0 28px color-mix(in srgb, var(--shaft-color) 62%, transparent 38%);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  body.in-game:not(.real-game-mode) .m84-perfect-seven-jet,
  body.in-game:not(.real-game-mode) .m84-perfect-seven-ring,
  body.in-game .m84-perfect-seven-star {
    display: none !important;
  }
}

/* Online-Würfel: V1.9.1 bewegt ausschließlich den bestehenden Würfel per
   Web Animations API. Augen/Pips bleiben vollständig im gewählten Würfelschema;
   keine zusätzliche Pseudo-Pip-Ebene und keine Farbänderung während des Rollens. */
body.in-game:not(.real-game-mode) .dice-item.m84-engine-rolling-die,
body.in-game:not(.real-game-mode) .opponent-die.m84-engine-rolling-die {
  position: relative;
  pointer-events: none !important;
}

/* V1.7.19 – deutlicher Reihenabschluss + fallende erspielte Tropfen */
#real-game-container.real-layout .real-match84-shaft.real-row-celebration {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}

/* Heller Farbschein läuft einmal durch den kompletten Schacht. */
#real-game-container.real-layout .real-match84-shaft.real-row-celebration::before {
  content: "";
  position: absolute;
  z-index: 20;
  left: -18%;
  right: -18%;
  top: -18%;
  height: 42%;
  pointer-events: none;
  border-radius: 45%;
  opacity: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.98) 0%,
      color-mix(in srgb, var(--shaft-color) 72%, white 28%) 15%,
      color-mix(in srgb, var(--shaft-color) 92%, white 8%) 42%,
      color-mix(in srgb, var(--shaft-color) 55%, transparent 45%) 66%,
      transparent 82%);
  filter:
    brightness(1.65)
    saturate(1.45)
    drop-shadow(0 0 12px var(--shaft-color))
    drop-shadow(0 0 24px var(--shaft-color))
    drop-shadow(0 0 38px var(--shaft-color));
  mix-blend-mode: screen;
  animation: m84FullShaftSweep 1.55s cubic-bezier(.18,.72,.22,1) forwards;
}

/* Der komplette Schacht bekommt währenddessen einen kräftigen Farb-Flash. */
#real-game-container.real-layout .real-match84-shaft.real-row-celebration::after {
  content: "";
  position: absolute;
  z-index: 18;
  inset: 0 -8%;
  pointer-events: none;
  border-radius: 18px;
  opacity: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--shaft-color) 42%, transparent 58%),
      color-mix(in srgb, var(--shaft-color) 18%, transparent 82%) 45%,
      color-mix(in srgb, var(--shaft-color) 38%, transparent 62%));
  box-shadow:
    0 0 18px color-mix(in srgb, var(--shaft-color) 72%, transparent 28%),
    inset 0 0 18px color-mix(in srgb, var(--shaft-color) 68%, transparent 32%);
  mix-blend-mode: screen;
  animation: m84FullShaftFlash 1.55s ease-out forwards;
}

#real-game-container.real-layout .real-match84-shaft.real-row-celebration .real-match84-drop-stack,
#real-game-container.real-layout .real-match84-shaft.real-row-celebration .real-match84-reservoir {
  animation: m84CompletedShaftBrightness 1.55s ease-out forwards;
}

@keyframes m84FullShaftSweep {
  0%   { opacity: 0; transform: translateY(-28%) scaleY(.62); }
  10%  { opacity: .98; }
  46%  { opacity: 1; transform: translateY(118%) scaleY(1.06); }
  82%  { opacity: .95; transform: translateY(248%) scaleY(.92); }
  100% { opacity: 0; transform: translateY(300%) scaleY(.72); }
}
@keyframes m84FullShaftFlash {
  0%   { opacity: 0; }
  12%  { opacity: .35; }
  42%  { opacity: .78; }
  72%  { opacity: .34; }
  100% { opacity: 0; }
}
@keyframes m84CompletedShaftBrightness {
  0%   { filter: brightness(1) saturate(1); }
  28%  { filter: brightness(1.38) saturate(1.38) drop-shadow(0 0 9px var(--shaft-color)); }
  54%  { filter: brightness(1.75) saturate(1.55) drop-shadow(0 0 19px var(--shaft-color)); }
  100% { filter: brightness(1) saturate(1); }
}

/* Bei jedem tatsächlich gesicherten Tropfen fällt ein Tropfen von oben
   durch den Schacht in den Auffangbehälter. */
#real-game-container.real-layout .real-match84-shaft .real-match84-shaft-content {
  position: relative !important;
  overflow: visible !important;
}
/* V1.7.23 – erspielte Tropfen fallen in Originalgröße aus dem Schacht */
#real-game-container.real-layout .real-match84-drop-slot.real-falling-slot {
  z-index: 12 !important;
}
#real-game-container.real-layout .real-match84-drop.real-earned-drop-falling {
  position: relative !important;
  z-index: 18 !important;
  pointer-events: none !important;
  transform-origin: 50% 72% !important;
  filter: saturate(1.28) brightness(1.18) drop-shadow(0 0 7px var(--shaft-color)) drop-shadow(0 3px 5px rgba(0,0,0,.35)) !important;
  animation: m84FullSizedDropFall var(--fall-duration, .30s) cubic-bezier(.24,.34,.72,.82) forwards !important;
  animation-delay: calc(var(--fall-index, 0) * var(--fall-stagger, .08s) - var(--fall-elapsed, 0s)) !important;
}
#real-game-container.real-layout .real-match84-water.earned-water-rise {
  animation: m84ReservoirDelayedRise .46s ease-out forwards !important;
  animation-delay: var(--water-delay, .72s) !important;
}
@keyframes m84FullSizedDropFall {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1) rotate(0deg);
  }
  32% {
    opacity: 1;
    transform: translate3d(0, var(--fall-distance-22, 57.2%), 0) scale(1.01) rotate(1deg);
  }
  66% {
    opacity: 1;
    transform: translate3d(0, var(--fall-distance-68, 176.8%), 0) scale(1) rotate(-1deg);
  }
  88% {
    opacity: 1;
    transform: translate3d(0, var(--fall-distance, 260%), 0) scale(1) rotate(0deg);
  }
  96% {
    opacity: 1;
    transform: translate3d(0, var(--fall-distance-132, 343.2%), 0) scale(1.03,.94) rotate(0deg);
  }
  99% {
    opacity: 1;
    transform: translate3d(0, var(--fall-distance-145, 377%), 0) scale(1.12,.70) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, var(--fall-distance-145, 377%), 0) scale(.74,.38) rotate(0deg);
  }
}
@keyframes m84ReservoirDelayedRise {
  0% { height: var(--water-start, 0%); }
  100% { height: var(--water-end, 0%); }
}

/* V1.8.7 – PWA-Performance: Im Standalone-Modus werden ausschließlich
   kompositorfreundliche Eigenschaften animiert. Die statische Darstellung
   bleibt unverändert; teure Filter- und Layout-Neuberechnungen entfallen
   während der kurzen Spielanimationen. */
@keyframes m84ReservoirDelayedRiseGpu {
  0% { transform: scaleY(var(--water-scale-start, 0)); }
  100% { transform: scaleY(1); }
}

@media (display-mode: standalone) {
  #real-game-container.real-layout .real-match84-drop.real-earned-drop-falling {
    filter: none !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    isolation: isolate;
    contain: layout style;
  }
  #real-game-container.real-layout .real-match84-drop.real-earned-drop-falling::before,
  #real-game-container.real-layout .real-match84-drop.real-earned-drop-falling::after {
    filter: none !important;
  }

  #real-game-container.real-layout .real-match84-water.earned-water-rise {
    transition: none !important;
    transform-origin: 50% 100%;
    will-change: transform;
    animation-name: m84ReservoirDelayedRiseGpu !important;
  }

  #real-game-container.real-layout .real-match84-shaft.real-row-celebration .real-match84-drop-stack,
  #real-game-container.real-layout .real-match84-shaft.real-row-celebration .real-match84-reservoir {
    animation: none !important;
  }

  #real-game-container.real-layout .real-match84-shaft.real-row-celebration::before {
    filter: none;
    mix-blend-mode: normal;
    will-change: transform, opacity;
  }

  #real-game-container.real-layout .real-match84-shaft.real-row-celebration::after {
    mix-blend-mode: normal;
    box-shadow: 0 0 10px color-mix(in srgb, var(--shaft-color) 55%, transparent 45%);
    will-change: opacity;
  }
}

html body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack.drop-stack-falling,
#real-game-container.real-layout .real-match84-drop-stack.drop-stack-falling {
  overflow: visible !important;
}

/* Fortsetzen-Hinweis: ausschließlich der echte Hamburger-Button pulsiert.
   Keine Pseudoelemente hinter dem Button, damit auf Tablet niemals der Header
   oder ein größerer Container grün aufleuchtet. */
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button.resume-pulse {
  position: relative !important;
  isolation: auto !important;
  overflow: visible !important;
  background: linear-gradient(180deg,#4caf50 0%,#3e9142 100%) !important;
  border-color: #2f7533 !important;
  animation: match84HostResumeButtonOnly 1.18s ease-in-out infinite !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button.resume-pulse::before,
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button.resume-pulse::after {
  content: none !important;
  display: none !important;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button.resume-pulse > svg {
  position: relative;
  z-index: 1;
}
body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #mobile-menu-button.resume-pulse > .mobile-resume-indicator {
  position: absolute !important;
  right: -.28rem !important;
  bottom: -.28rem !important;
  z-index: 2 !important;
  width: clamp(.9rem,2.7dvh,1.12rem) !important;
  height: clamp(.9rem,2.7dvh,1.12rem) !important;
  flex: 0 0 auto !important;
  background: var(--green) !important;
  border-color: #fff !important;
  box-shadow:
    0 .12rem .3rem rgba(0,0,0,.35),
    0 0 .45rem rgba(76,175,80,.82),
    0 0 1rem rgba(76,175,80,.62) !important;
}
@keyframes match84HostResumeButtonOnly {
  0%,100% {
    filter: brightness(1) drop-shadow(0 0 .20rem rgba(76,175,80,.30));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 2px 5px rgba(0,0,0,.25),
      0 0 .38rem rgba(76,175,80,.34),
      0 0 .78rem rgba(76,175,80,.16);
  }
  50% {
    filter: brightness(1.10) drop-shadow(0 0 .58rem rgba(76,175,80,.88));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 3px 8px rgba(0,0,0,.28),
      0 0 .95rem rgba(76,175,80,.92),
      0 0 1.45rem rgba(76,175,80,.58);
  }
}

/* Große Swipe-Fläche nur während der echten Fingerbewegung als Compositor-Layer
   behandeln. Permanentes will-change auf dem kompletten Spielbereich belastet
   Chrome auf Android bei den komplexen Brettern unnötig. */
html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > #game-area.mobile-board-swipe-active {
  will-change: transform;
  backface-visibility: hidden;
}

/* V1.9.12 – obsolete own-turn-pulse animation removed; personal-turn-pulse is authoritative. */

/* =========================================================
   V1.8.11 – Chromium mobile raster performance
   Chrome/Android rastert CSS filter + SVG mask + Blur auf vielen kleinen
   Elementen deutlich teurer als Firefox. Die Tropfenform, Farbverläufe und
   3D-Inset-Shadows bleiben identisch; nur redundante Filterpasses entfallen.
   ========================================================= */
html.browser-chromium body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack .match84-drop:not(.pending-bead) {
  filter: none !important;
}
html.browser-chromium body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack .match84-drop::before,
html.browser-chromium body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-stack .match84-drop::after,
html.browser-chromium body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-water::after {
  filter: none !important;
}
/* Pending-Tropfen brauchen ihre farbige Markierung, aber nicht mehrere
   übereinanderliegende Filterketten auf Drop UND Slot. Der Slot erzeugt den Glow. */
html.browser-chromium body.in-game:not(.real-game-mode) #game-container.online-layout-v3 .match84-drop-slot.pending-slot .match84-drop.pending-bead {
  filter: none !important;
}
/* Große Bretter nicht permanent als Texture-Layer erzwingen. Chrome darf die
   statischen Inhalte normal raster-cache'n; Layer-Promotion erfolgt nur bei
   tatsächlich bewegten Elementen. */
html.browser-chromium body.in-game:not(.real-game-mode) #board-rows,
html.browser-chromium body.in-game:not(.real-game-mode) .opponent-board-rows {
  will-change: auto !important;
  backface-visibility: visible !important;
}



/* V1.9.12: obsolete own-turn-pulse / active-turn-pulse generations removed.
   Online uses only personal-turn-pulse / personal-turn-static. */

/* =========================================================
   V1.8.14 – Chrome/Android Eingabe- und Animationsentlastung
   ========================================================= */
/* Chrome darf beim Antippen keine eigene hellblaue Tap-Fläche über die
   Match84-Grafik legen. touch-action: manipulation hält die Reaktion direkt. */
html.browser-chromium button,
html.browser-chromium .dice-item,
html.browser-chromium .opponent-tab,
html.browser-chromium [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation;
}

/* Match84 V2.0.16 – robuste Touch-Trefferflaechen fuer die eigentlichen Spieltasten.
   Im Querformat brauchen die vier Zugtasten selbst weder Scrollen noch Wischen.
   touch-action:none verhindert deshalb, dass ein minimaler Fingerweg den Click
   als Browser-Geste verwirft. Die sichtbaren Kunststoff-/SVG-Ebenen bleiben
   rein dekorativ, damit immer das Button-Element selbst das Pointer-Ziel ist. */
#turn-actions > .icon-button,
#real-turn-actions > .real-icon-button {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
#turn-actions > .icon-button::before,
#turn-actions > .icon-button::after,
#turn-actions > .icon-button > svg,
#turn-actions > .icon-button > svg *,
#real-turn-actions > .real-icon-button::before,
#real-turn-actions > .real-icon-button::after,
#real-turn-actions > .real-icon-button > svg,
#real-turn-actions > .real-icon-button > svg * {
  pointer-events: none !important;
}
html.browser-chromium body.in-game:not(.real-game-mode) #turn-actions .icon-button {
  transition: none !important;
}


/* V2.1.1 – Brettspiel-Touch: Würfel reagieren bereits beim Finger-down.
   Deshalb keine Browser-Tap-/Zoom-Geste auf der Würfelflaeche beginnen lassen. */
html.app-mobile-mode body.real-game-mode .real-dice-item {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
html.app-mobile-mode body.real-game-mode .real-dice-item > *,
html.app-mobile-mode body.real-game-mode #real-turn-actions > .real-icon-button::before,
html.app-mobile-mode body.real-game-mode #real-turn-actions > .real-icon-button::after,
html.app-mobile-mode body.real-game-mode #real-turn-actions > .real-icon-button > svg,
html.app-mobile-mode body.real-game-mode #real-turn-actions > .real-icon-button > svg * {
  pointer-events: none !important;
}

/* V1.9.12 – Online verwendet ausschließlich personal-turn-pulse. */

/* =========================================================
   V1.8.18 – gemeinsamer Zugpuls + einmaliger Reihenabschluss
   ========================================================= */
/* Während des eigenen Zugpulses werden Rahmen und Glow als dieselbe Ebene
   ein-/ausgeblendet. Das ist auf Brett und Würfelfeld identisch. Das eigene
   Board darf für die kurze Pulsphase den äußeren Glow nicht abschneiden. */
body.in-game:not(.real-game-mode) #main-player-board.personal-turn-pulse,
body.in-game:not(.real-game-mode) #control-panel.personal-turn-pulse,
body.in-game:not(.real-game-mode) #control-panel.header-control-panel.personal-turn-pulse {
  position: relative !important;
  overflow: visible !important;
  outline: none !important;
  animation: none !important;
}

body.in-game:not(.real-game-mode) #main-player-board.personal-turn-pulse::after,
body.in-game:not(.real-game-mode) #control-panel.personal-turn-pulse::after,
body.in-game:not(.real-game-mode) #control-panel.header-control-panel.personal-turn-pulse::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 60 !important;
  inset: -2px !important;
  border: 3px solid #19a844 !important;
  border-radius: inherit !important;
  box-sizing: border-box !important;
  opacity: .08;
  box-shadow:
    inset 0 0 .82rem rgba(25,168,68,.82),
    inset 0 0 1.62rem rgba(76,175,80,.42),
    0 0 .92rem rgba(25,168,68,.94),
    0 0 1.78rem rgba(76,175,80,.62) !important;
  animation: m84-personal-turn-layer-pulse 1.18s ease-in-out infinite alternate !important;
  will-change: opacity;
}

@keyframes m84-personal-turn-layer-pulse {
  from { opacity: .08; }
  to   { opacity: 1; }
}

/* Nach dem ersten Wurf verschwindet die Puls-Ebene vollständig; nur der
   statische grüne Rahmen bleibt wie vorgesehen stehen. */
body.in-game:not(.real-game-mode) #main-player-board.personal-turn-static::after,
body.in-game:not(.real-game-mode) #control-panel.personal-turn-static::after,
body.in-game:not(.real-game-mode) #control-panel.header-control-panel.personal-turn-static::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* =========================================================
   V1.8.21 – Chrome Pending-Helligkeit + einmalige Reservoir-Animation
   ========================================================= */
/* Die Chrome-Rasteroptimierung deaktiviert Filter auf Pending-Tropfen. Damit
   die Auswahl trotzdem genauso deutlich heller wie am Desktop erscheint,
   wird die tatsächliche Tropfenfarbe ohne Filter direkt aufgehellt. */
html.browser-chromium body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 .match84-drop-slot.pending-slot .match84-drop.pending-bead {
  background-color: color-mix(in srgb, var(--shaft-color) 68%, white 32%) !important;
  box-shadow:
    inset 4px 5px 6px rgba(255,255,255,.76),
    inset -3px -4px 6px rgba(0,0,0,.08),
    0 0 2px rgba(255,255,255,.34) !important;
}

/* V1.8.23: Browser darf vertikal scrollen, horizontale Gesten gehoeren Match84.
   Dadurch muss die Engine beim ersten horizontalen Fingerweg nicht erst lange
   zwischen Seiten-Scroll und Spiel-Swipe arbitrieren. */
@media (orientation: portrait) {
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #own-page-stack,
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-page-stack {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }
}





/* =========================================================
   V1.8.38 – EINHEITLICHE Phone-Portrait-Seitenarchitektur
   ---------------------------------------------------------
   #game-area ist das Sichtfenster. own/opponent bleiben dauerhaft als zwei
   volle Seiten nebeneinander vorhanden. Keine display:none-Umschaltung,
   kein left/margin-left-Endzustand und kein transformierter Gesamt-Track.
   Die bestehende Wischlogik verändert ausschließlich scrollLeft.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 {
    overflow: hidden !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area,
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3.mobile-show-opponent > #game-area {
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    transition: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-y !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area::-webkit-scrollbar {
    display: none !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack,
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack,
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3.mobile-show-opponent > #game-area > #own-page-stack,
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3.mobile-show-opponent > #game-area > #opponent-page-stack {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack {
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack {
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack > #opponent-scroll-content {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Historische Phone-Regeln dürfen in Portrait keinerlei Seite mehr aus dem
     Layout nehmen. mobile-show-opponent ist nur noch logischer Seitenzustand. */
  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area #main-player-board {
    display: block !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area #opponent-tabs-column {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area #opponent-boards {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }

  html.app-mobile-mode body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area.mobile-board-swipe-active {
    transform: none !important;
    left: auto !important;
  }
}

/* =========================================================
   V1.8.41 – Phone Portrait: echte Resthoehen + Einzeilen-Tabs
   ---------------------------------------------------------
   - Der feste Header bekommt eine explizite Grid-Zeile; kein zusaetzlicher
     PWA-Padding-Abzug mehr. Browser und Standalone rechnen identisch.
   - Eigenes und Gegnerbrett fuellen jeweils exakt ihre reale Resthoehe.
   - Keine gekoppelte --online-peer-board-height mehr im Portrait.
   - Mitspieler bleiben in genau einer Zeile. Live-Wuerfel nutzen eine eigene
     elastische Spalte; ohne Live-Wuerfel bekommt der Fortschritt diese Breite.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 {
    grid-template-rows: var(--game-header-height, 44px) minmax(0, 1fr) !important;
    padding: 0 3px max(3px, env(safe-area-inset-bottom)) !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area {
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack {
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board {
    display: flex !important;
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 3px !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-scroll-content {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1px 2px 2px !important;
    overflow: visible !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tabs {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    display: grid !important;
    grid-template-columns:
      minmax(42px, .72fr)
      minmax(112px, 1.65fr)
      minmax(82px, 1.20fr)
      auto
      auto !important;
    grid-template-rows: minmax(22px, auto) !important;
    align-items: center !important;
    column-gap: 3px !important;
    row-gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 24px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 2px 3px !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 2px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: .62rem !important;
    line-height: 1 !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-label {
    font-size: .46rem !important;
    line-height: 1 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 1px !important;
    margin: 0 !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:not(:has(.opponent-tab-dice)) .opponent-progress {
    /* Gleiche dynamische Breite wie beim aktiven Gegner mit Live-Wuerfeln.
       Die Score-Spalte bleibt dadurch immer frei. */
    grid-column: 2 !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
    width: min(100%, 14px) !important;
    max-width: 14px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    font-size: .48rem !important;
    border-width: 1px !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-value {
    font-size: inherit !important;
    line-height: 1 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    grid-column: 4 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: .54rem !important;
    line-height: 1 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    grid-column: 5 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 2px 3px !important;
    font-size: .50rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-icon {
    width: 8px !important;
    height: 8px !important;
  }

  /* Live-Wuerfel bleiben in derselben Tab-Zeile und nutzen die komplette
     dritte Spalte. Alte zweite-Zeile-/Border-Regeln werden neutralisiert. */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-dice-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-die {
    width: min(96%, 24px) !important;
    max-width: 24px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    padding: 2px !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   V1.8.41 – Phone Portrait: volle Bretthoehe + Live-Wuerfelzeile
   ---------------------------------------------------------
   - Kein sichtbarer Safe-Area-/Bottom-Padding-Streifen innerhalb des
     Spielfeld-Viewports. Beide Seiten nutzen die volle Resthoehe.
   - Die eigentlichen Match84-Bretter sind Flex-Restflaechen und nicht mehr
     100% hoch zusaetzlich zu ihrer jeweiligen Ueberschrift.
   - Nur der Tab des aktuell wuerfelnden Spielers bekommt eine zweite Zeile.
     Die 6 Live-Wuerfel nutzen dort die komplette Tabbreite.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 {
    padding-bottom: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards {
    min-height: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > #board-rows.match84-drop-board,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards .opponent-board-rows.match84-drop-board {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Normale Tabs bleiben exakt eine Zeile. */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    grid-template-columns: minmax(44px,.78fr) minmax(0,2.6fr) auto auto !important;
    grid-template-rows: minmax(22px, auto) !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  /* Nur der aktive Live-Tab erhaelt eine zweite, vollbreite Wuerfelzeile. */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:has(.opponent-tab-dice.opponent-dice-live) {
    grid-template-rows: minmax(22px, auto) auto !important;
    row-gap: 3px !important;
    padding-bottom: 4px !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live .opponent-dice-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 3px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live .opponent-die {
    width: min(88%, 43px) !important;
    max-width: 43px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: clamp(2px, .7vw, 4px) !important;
  }
}



/* =========================================================
   V1.8.42 – PWA-Viewport wirklich voll nutzen + dynamische Tab-Tropfen
   -------------------------------------------------------------------
   - Der Portrait-Container reserviert unten keinerlei Safe-Area-/Padding-Zone.
     Die installierte PWA liefert die echte Layout-Hoehe aus client.js.
   - Beide Wischseiten und ihre Brett-Panels fuellen die komplette zweite
     Grid-Zeile bis zur Unterkante.
   - Die 12 Fortschrittstropfen teilen sich ausschliesslich den wirklich
     verfuegbaren Raum. Keine feste Mindestbreite, kein Ueberlagern des Scores.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 {
    box-sizing: border-box !important;
    height: var(--app-viewport-height, 100dvh) !important;
    min-height: var(--app-viewport-height, 100dvh) !important;
    max-height: var(--app-viewport-height, 100dvh) !important;
    padding: 0 3px !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack {
    min-height: 0 !important;
    max-height: none !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    grid-template-columns: minmax(0,.78fr) minmax(0,3.35fr) max-content max-content !important;
    column-gap: clamp(1px, .42vw, 3px) !important;
    min-width: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: clamp(0px, .22vw, 2px) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
    width: 86% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    white-space: nowrap !important;
    min-width: max-content !important;
  }
}


/* =========================================================
   V1.8.44 – Portrait: eindeutige Flex-Resthoehen + dynamische Tab-Tropfen
   -----------------------------------------------------------------------
   Der mobile Altbestand enthaelt noch height:100%-Regeln fuer Brett-Panels.
   Im aktuellen Flex-Aufbau duerfen diese intrinsischen Hoehen nicht in die
   Resthoehenberechnung eingreifen. height:0 + flex:1 zwingt die Bretter exakt
   in den vom Parent zugewiesenen Restplatz. Keine untere Reserve im Viewport.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 {
    box-sizing: border-box !important;
    grid-template-rows: var(--game-header-height, 44px) minmax(0, 1fr) !important;
    height: var(--app-viewport-height, 100dvh) !important;
    min-height: var(--app-viewport-height, 100dvh) !important;
    max-height: var(--app-viewport-height, 100dvh) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area {
    grid-row: 2 !important;
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #opponent-page-stack {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack > #control-panel {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > .own-board-heading {
    flex: 0 0 auto !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > #board-rows.match84-drop-board {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-page-stack,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-scroll-content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-scroll-content {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column {
    flex: 0 0 auto !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards .opponent-view,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards .opponent-view-card {
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards .opponent-board-rows.match84-drop-board {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* Tab: Name und feste Aktionen bekommen nur ihren benoetigten Raum. Die
     Tropfen teilen sich den gesamten flexiblen Rest und schrumpfen automatisch
     auf 12 gleich breite Zellen. Dadurch koennen Score/Host nichts ueberlagern. */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    grid-template-columns: minmax(0, .72fr) minmax(0, 2.8fr) max-content max-content !important;
    column-gap: clamp(0px, .3vw, 2px) !important;
    min-width: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
    box-sizing: border-box !important;
    width: 82% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
  }

  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    justify-self: end !important;
  }
}


/* =========================================================
   V1.8.44 – Portrait: innere Brettgeometrie
   -------------------------------------------------------------------
   Der Schacht bestand noch aus Reihennummer + row-content mit height:100%.
   Dadurch war der innere Inhalt höher als sein sichtbarer Schacht und die
   Reservoirs wurden unten abgeschnitten. Jetzt wird nur die reale Resthöhe
   per Flex verteilt. Border/Padding des Bretts zählen durch border-box in
   seine zugewiesene Höhe hinein.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > #board-rows.match84-drop-board,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-boards .opponent-board-rows.match84-drop-board {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 .board-row.match84-shaft {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 .board-row.match84-shaft > .row-number {
    flex: 0 0 auto !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 .board-row.match84-shaft > .row-content.match84-shaft-content {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  }

/* =========================================================
   V1.8.46 – Portrait: Reservoir strikt im Wrapper
   ---------------------------------------------------------------------------
   - Der Reservoir-Wrapper bekommt seine Höhe dynamisch aus dem Board-Fit.
     Der eigentliche Behälter darf diese Höhe nicht mehr mit einer alten
     clamp()-Fixhöhe überschreiten; Fortschritt + Behälter teilen sich den
     vorhandenen Platz per Flex.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 .match84-reservoir-wrap {
    box-sizing: border-box !important;
    flex: 0 0 var(--fit-reservoir-basis, 18%) !important;
    height: var(--fit-reservoir-basis, 18%) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 .match84-reservoir-wrap > .match84-reservoir {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 .match84-reservoir-wrap > .match84-progress {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

}

/* =========================================================
   V1.8.48 – Portrait: eindeutige eigene Höhenkette
   ----------------------------------------------------------------
   WICHTIG: height:0 + flex:1 funktioniert nur zuverlässig, wenn die
   Flex-Kinder border-box sind. Der Drop-Stack hatte trotz height:0 noch
   Padding + Border im content-box-Modell; diese Zusatzhöhe drückte das
   Reservoir unter die verfügbare Schachthöhe und wurde unten geclippt.
   ========================================================= */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > #board-rows.match84-drop-board,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > #board-rows.match84-drop-board > .board-row.match84-shaft,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .row-content.match84-shaft-content,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .match84-drop-stack,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .match84-reservoir-wrap,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .match84-reservoir {
    box-sizing: border-box !important;
    min-height: 0 !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack > #control-panel,
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack > #main-player-board {
    grid-area: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #control-panel {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 > #game-area > #own-page-stack > #main-player-board {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > .own-board-heading {
    flex: 0 0 auto !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > #board-rows.match84-drop-board {
    display: grid !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board > #board-rows.match84-drop-board > .board-row.match84-shaft {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .row-content.match84-shaft-content {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* Kritischer Fix: Padding und Border des Schachts zählen IN seine Flexhöhe. */
  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .match84-drop-stack {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .match84-reservoir-wrap {
    flex: 0 0 var(--fit-reservoir-basis, 18%) !important;
    height: var(--fit-reservoir-basis, 18%) !important;
    max-height: var(--fit-reservoir-basis, 18%) !important;
    overflow: hidden !important;
  }

  html.app-mobile-mode.app-portrait body.in-game.player-mode:not(.real-game-mode)
  #game-container.online-layout-v3 #main-player-board .match84-reservoir {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

}



/* =========================================================
   V2.0.1 – production static-drop canvas (Online + Brettspielmodus)
   Stationary board drops are painted once into one canvas per shaft.
   Pending/glowing and falling drops remain live DOM elements above it.
   ========================================================= */
html body.in-game:not(.real-game-mode) .match84-drop-stack > .match84-drop-slot {
  z-index: 2 !important;
}
html body.in-game:not(.real-game-mode) .match84-drop-stack > .m84-static-drop-canvas-layer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 1 !important;
  max-width: none !important;
  max-height: none !important;
}

html body.in-game:not(.real-game-mode)
  .m84-static-canvas-ready .match84-drop-stack > .match84-drop-slot > .match84-drop:not(.pending-bead):not(.earned-drop-falling) {
  visibility: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html body.in-game:not(.real-game-mode)
  .m84-static-canvas-ready .match84-drop-stack > .match84-drop-slot > .match84-drop:not(.pending-bead):not(.earned-drop-falling)::before,
html body.in-game:not(.real-game-mode)
  .m84-static-canvas-ready .match84-drop-stack > .match84-drop-slot > .match84-drop:not(.pending-bead):not(.earned-drop-falling)::after {
  content: none !important;
  display: none !important;
  filter: none !important;
}


/* Brettspielmodus/Realmodus: dieselbe statische Canvas-Architektur wie online. */
html body.in-game.real-game-mode .real-match84-drop-stack > .real-match84-drop-slot {
  z-index: 2 !important;
}
html body.in-game.real-game-mode .real-match84-drop-stack > .m84-static-drop-canvas-layer {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 1 !important;
  max-width: none !important;
  max-height: none !important;
}
html body.in-game.real-game-mode
  .real-match84-drop-stack > .real-match84-drop-slot > .real-match84-drop:not(.real-pending-bead):not(.real-earned-drop-falling) {
  visibility: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html body.in-game.real-game-mode
  .real-match84-drop-stack > .real-match84-drop-slot > .real-match84-drop:not(.real-pending-bead):not(.real-earned-drop-falling)::before,
html body.in-game.real-game-mode
  .real-match84-drop-stack > .real-match84-drop-slot > .real-match84-drop:not(.real-pending-bead):not(.real-earned-drop-falling)::after {
  content: none !important;
  display: none !important;
  filter: none !important;
}

/* Match84 V2.0.1 – Hilfsmodus: eine einzige, vorgerenderte Sprechblase wird
   zustandsabhängig wiederverwendet. Sie ist lila, verschiebbar und zeigt mit
   einer Spitze auf das aktuell erklärte Bedienelement. */
.guide-tutorial-mode {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin: 0 0 8px;
  border: 1px solid rgba(151,177,157,.42);
  border-radius: 12px;
  background: rgba(88,108,94,.18);
}
.guide-tutorial-mode button,
.tutorial-menu-button { white-space: nowrap; }
/* Match84 V2.0.16 – Hilfsmodus im Spielmenue in der Match84-Lila-Farbwelt. */
.tutorial-menu-button {
  background: linear-gradient(180deg, #9b5dde 0%, #7131b6 100%) !important;
  border-color: #49305f !important;
  color: #fff !important;
}
.tutorial-menu-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #a96ceb 0%, #7b3ac2 100%) !important;
  border-color: #513469 !important;
}

.tutorial-guide-button.is-active,
.tutorial-menu-button.is-active {
  box-shadow: inset 0 0 0 2px rgba(132,224,155,.72), 0 0 8px rgba(95,210,126,.24) !important;
}
.tutorial-mode-indicator {
  position: fixed;
  left: var(--tutorial-indicator-left, auto);
  right: var(--tutorial-indicator-right, max(10px, env(safe-area-inset-right)));
  top: var(--tutorial-indicator-top, calc(max(10px, env(safe-area-inset-top)) + 54px));
  z-index: 12020;
  width: var(--tutorial-indicator-size, 30px);
  height: var(--tutorial-indicator-size, 30px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(151,84,255,.98), rgba(104,37,213,.98));
  border: 2px solid rgba(239,229,255,.96);
  box-shadow: 0 4px 12px rgba(0,0,0,.32);
  pointer-events: none;
}
.tutorial-mode-indicator[hidden],
.tutorial-hint[hidden] { display: none !important; }
.tutorial-hint {
  position: fixed;
  z-index: 12030;
  box-sizing: border-box;
  max-width: min(360px, calc(100vw - 16px));
  min-width: min(220px, calc(100vw - 16px));
  padding: 12px 14px;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(148,76,255,.98), rgba(109,43,222,.98));
  border: 1px solid rgba(244,236,255,.92);
  box-shadow: 0 8px 22px rgba(39,18,86,.38);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.38;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  contain: layout style;
}
.tutorial-hint.is-dragging { cursor: grabbing; }
.tutorial-hint::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, rgba(148,76,255,.98), rgba(109,43,222,.98));
}
.tutorial-hint[data-placement="center"]::after {
  display: none;
}
.tutorial-hint[data-placement="top"]::after,
.tutorial-hint:not([data-placement])::after {
  left: clamp(18px, var(--tutorial-arrow-x, 50%), calc(100% - 18px));
  bottom: -12px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
}
.tutorial-hint[data-placement="bottom"]::after {
  left: clamp(18px, var(--tutorial-arrow-x, 50%), calc(100% - 18px));
  top: -12px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transform: translateX(-50%);
}
.tutorial-hint[data-placement="left"]::after {
  right: -12px;
  top: clamp(18px, var(--tutorial-arrow-y, 50%), calc(100% - 18px));
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  transform: translateY(-50%);
}
.tutorial-hint[data-placement="right"]::after {
  left: -12px;
  top: clamp(18px, var(--tutorial-arrow-y, 50%), calc(100% - 18px));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .guide-tutorial-mode { align-items: stretch; flex-direction: column; }
  .guide-tutorial-mode button { width: 100%; }
  .tutorial-mode-indicator:not(.is-in-header) { top: calc(max(8px, env(safe-area-inset-top)) + 46px); }
}

/* Match84 V2.0.1 – kompakter Wartehinweis und unabhängige Rollen-Hinweise. */
.tutorial-hint.tutorial-waiting-hint {
  min-width: 0;
  text-align: center;
  padding: 10px 14px;
}
.tutorial-aux-hint {
  min-width: 0;
  max-width: min(290px, calc(100vw - 16px));
  pointer-events: none;
}


/* Match84 V2.0.1 – zeitlich begrenzte HOST-Hilfe und Hilfsmodus-Hinweis beim Betreten des Spielraums. */
#tutorial-host-transfer-hint {
  opacity: 0;
  transition: opacity .28s ease;
}
#tutorial-host-transfer-hint.is-visible { opacity: 1; }
.tutorial-mode-promo-hint {
  opacity: 0;
  transition: opacity .32s ease;
  pointer-events: none;
  cursor: default;
  width: min(280px, calc(100vw - 16px));
  min-width: 0;
  text-align: center;
}
.tutorial-mode-promo-hint.is-visible { opacity: 1; }

/* Match84 V2.0.1 – aktiver Hilfsmodus-Indikator als Overlay an der oberen
   Headerkante. Er nimmt keinen Layoutplatz ein und verschiebt keine Elemente. */
.tutorial-mode-indicator.is-in-header {
  --tutorial-indicator-size: 24px;
  right: auto;
  font-size: 15px;
  border-width: 2px;
  box-shadow: 0 3px 9px rgba(0,0,0,.32);
}

/* Match84 V2.0.1 – Tutorial im Handy-Hochkantmodus: kompaktere Blasen,
   damit die geschützte Bedienzone aus Würfeln und Buttons frei bleibt. */
@media (max-width: 600px) and (orientation: portrait) {
  .tutorial-hint:not(.tutorial-waiting-hint) {
    max-width: min(260px, calc(100vw - 24px));
    min-width: min(180px, calc(100vw - 24px));
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.32;
  }
}

/* Match84 V2.0.1 – optionale Account-/Spielclub-Oberfläche.
   Bewusst ohne Filter, Backdrop-Filter oder animierte Dekorationen: Die Account-UI
   wird nur bei Bedarf gerendert und berührt den Board-/Canvas-Pfad nicht. */
.lobby-account-row { display:flex; justify-content:center; margin-top:10px; }
.account-lobby-button { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 12px; border-radius:999px; }
.account-lobby-button.account-has-notice,
#account-menu-button.account-has-notice { position:relative; }
.account-lobby-button.account-has-notice::after,
#account-menu-button.account-has-notice::after { content:""; position:absolute; top:3px; right:3px; width:10px; height:10px; border-radius:50%; background:#d93838; border:2px solid #fff; box-sizing:content-box; }
#account-menu-button { background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important; border-color:#3e9142 !important; color:#fff !important; }
#account-menu-button:hover:not(:disabled) { background:linear-gradient(180deg,#6bd16f 0%,#55bb5a 100%) !important; border-color:#3e9142 !important; }
.account-mini-avatar { width:24px; height:24px; display:inline-grid; place-items:center; flex:0 0 24px; }
.account-mini-avatar-image,
.player-account-avatar-image,
.opponent-account-avatar,
.spectator-account-avatar,
.account-list-avatar,
.account-profile-avatar { display:block; object-fit:cover; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:#2b2438; }
.account-mini-avatar-image { width:24px; height:24px; font-size:12px; }
.account-avatar-fallback,
.player-account-avatar-fallback { display:grid; place-items:center; border-radius:50%; background:#6f3fc4; color:#fff; font-weight:800; }

.account-modal { z-index:4600; }
.account-dialog { width:min(920px, calc(100vw - 28px)); height:min(820px, calc(100vh - 28px)); height:min(820px, calc(100dvh - 28px)); max-height:calc(100dvh - 28px); overflow:hidden; padding:18px; display:flex; flex-direction:column; box-sizing:border-box; }
.account-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; flex:0 0 auto; }
.account-dialog-head h2 { margin:2px 0 0; }
.account-kicker { color:#fff; }
.account-spielclub-kicker { color:#a674ff; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.account-message { margin:8px 0 12px; padding:9px 11px; border-radius:10px; background:#4caf50; border:1px solid #3e9142; color:#fff; font-weight:800; }
.account-message.error { background:#c84a4a; border-color:#a43a36; color:#fff; }

#account-content { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; }
#account-content:has(> .account-tab-scroll) { overflow:hidden; display:flex; flex-direction:column; overscroll-behavior:auto; scrollbar-gutter:auto; }
.account-tabs { display:flex; gap:6px; margin-bottom:10px; overflow-x:auto; scrollbar-width:none; position:relative; z-index:12; padding:0; background:transparent; box-shadow:none; flex:0 0 auto; }
.account-tab-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; padding-top:2px; }
.account-tabs::-webkit-scrollbar { display:none; }
.account-tabs button { flex:1 0 auto; min-width:104px; }
.account-tabs button.active { background:#7342c5; color:#fff; border-color:#9367df; pointer-events:none; cursor:default; transform:none; opacity:1; }
.account-tabs button.active:hover { background:#7342c5 !important; color:#fff !important; border-color:#9367df !important; transform:none !important; }

/* V2.0.60 – persistente Freundschaftsanfragen auch nach erneutem Seitenbesuch sichtbar. */
.account-friend-request-section {
  border: 2px solid rgba(217, 56, 56, .32);
  background: rgba(217, 56, 56, .055);
}
.account-friend-request-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.account-friend-request-heading h3 { margin: 0; }
.account-friend-request-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #d93838;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.account-friend-request-hint {
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 700;
}

.account-tabs button.account-tab-has-notice { position:relative; overflow:visible; }
.account-tabs button.account-tab-has-notice::after { content:""; position:absolute; top:4px; right:7px; width:9px; height:9px; border-radius:50%; background:#d93838; border:2px solid #fff; box-sizing:content-box; }

.account-notification-backdrop { z-index:6200; }
.account-notification-dialog { width:min(420px, 100%); box-sizing:border-box; }
.account-notification-dialog > p { margin-bottom:18px; }
.account-notification-actions { margin-top:18px; }
.account-notification-actions button {
  border:1px solid transparent;
  box-shadow:0 3px 0 rgba(0,0,0,.28),0 5px 9px rgba(0,0,0,.14);
}
.account-notification-actions button[data-friend-popup-accept],
.account-notification-actions button[data-game-invite-join] {
  background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important;
  border-color:#3e9142 !important;
  color:#fff !important;
  box-shadow:0 3px 0 #357d39,0 5px 9px rgba(0,0,0,.14) !important;
}
.account-notification-actions button.account-notification-later[data-friend-popup-later] {
  background:linear-gradient(180deg,#f3b84c 0%,#e89b19 100%) !important;
  border-color:#c87f0f !important;
  color:#fff !important;
  box-shadow:0 3px 0 #aa6c0d,0 5px 9px rgba(0,0,0,.14) !important;
}
.account-notification-actions button[data-friend-popup-decline],
.account-notification-actions button[data-game-invite-decline] {
  background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important;
  border-color:#a43a36 !important;
  color:#fff !important;
  box-shadow:0 3px 0 #8d2e2e,0 5px 9px rgba(0,0,0,.14) !important;
}
.account-notification-actions button:active:not(:disabled) {
  transform:translateY(2px) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.12) !important;
}
.account-notification-actions button.account-notification-later[data-friend-popup-later]:hover:not(:disabled),
.account-notification-actions button.account-notification-later[data-friend-popup-later]:focus-visible {
  background:linear-gradient(180deg,#ffd06f 0%,#f3a829 100%) !important;
  border-color:#c87f0f !important;
  color:#fff !important;
}


.account-row-actions .account-friend-invite-button {
  background:linear-gradient(180deg,#8d5ad8 0%,#7342c5 100%) !important;
  border-color:#5f32aa !important;
  color:#fff !important;
  box-shadow:none !important;
}
.account-row-actions .account-friend-remove-button {
  background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important;
  border-color:#a43a36 !important;
  color:#fff !important;
  box-shadow:none !important;
}
.account-row-actions .account-friend-invite-button:active:not(:disabled),
.account-row-actions .account-friend-remove-button:active:not(:disabled) {
  transform:none !important;
  box-shadow:none !important;
}

.account-spielclub-open-button,
.account-notification-actions button[data-spielclub-notice-open] {
  background:linear-gradient(180deg,#8d5ad8 0%,#7342c5 100%) !important;
  border-color:#5f32aa !important;
  color:#fff !important;
}
.account-spielclub-open-button { box-shadow:none !important; }
.account-notification-actions button[data-spielclub-notice-open] { box-shadow:0 3px 0 #512a91,0 5px 9px rgba(0,0,0,.14) !important; }
.account-spielclub-open-button:active:not(:disabled),
.account-notification-actions button[data-spielclub-notice-open]:active:not(:disabled) {
  transform:translateY(2px) !important;
}
.account-spielclub-open-button:active:not(:disabled) { box-shadow:none !important; }
.account-notification-actions button[data-spielclub-notice-open]:active:not(:disabled) { box-shadow:0 1px 0 #512a91,0 2px 4px rgba(0,0,0,.12) !important; }
.account-notification-actions button[data-spielclub-notice-close] {
  background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important;
  border-color:#a43a36 !important;
  color:#fff !important;
  box-shadow:0 3px 0 #8d2e2e,0 5px 9px rgba(0,0,0,.14) !important;
}

.account-title-row { display:flex; align-items:center; gap:8px; }
.account-help-button { width:28px; height:28px; min-width:28px; padding:0; border-radius:50%; display:inline-grid; place-items:center; background:#7342c5 !important; border:1px solid #9367df !important; color:#fff !important; font-weight:900; line-height:1; }
.account-help-button:hover { background:#8350d1 !important; border-color:#a47be3 !important; transform:none !important; }
.account-guide-page-head { display:flex; justify-content:flex-end; margin-bottom:2px; }
@media (max-width: 520px) and (orientation: portrait) {
  .account-title-row { gap:6px; }
  .account-help-button { width:26px; height:26px; min-width:26px; }
}
/* Match84 V2.0.16 – Account-Anleitung über Fragezeichen in der Profil-Kopfzeile. */
.account-guide { display:grid; gap:12px; }
.account-guide .account-section { margin:0; }
.account-guide-intro p, .account-guide .account-section > p { margin:6px 0 0; line-height:1.45; }
.account-guide-list { margin:8px 0 0; padding-left:1.2rem; display:grid; gap:7px; line-height:1.42; }
.account-guide-list li { padding-left:2px; }
@media (max-width: 520px) and (orientation: portrait) {
  .account-guide { gap:10px; }
  .account-guide-list { gap:6px; padding-left:1.1rem; }
}
.account-auth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.account-login-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.account-login-actions > button { flex:1 1 150px; }
.account-login-message { margin:8px 0 0; min-height:44px; box-sizing:border-box; }
#account-login-message[hidden] { display:block !important; visibility:hidden; }
.account-section,
.account-profile-card,
.account-spielclub-card { border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035); border-radius:14px; padding:14px; }
.account-spielclub-nudge-dot { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:#d93838; border:2px solid #fff; box-sizing:content-box; }
.account-spielclub-call-button { width:36px; min-width:36px; max-width:36px; height:36px; min-height:36px; padding:0; display:inline-grid; place-items:center; border-radius:9px; background:linear-gradient(180deg,#9b5dde 0%,#7131b6 100%) !important; border:1px solid #49305f !important; color:#fff !important; font-weight:800; }
.account-spielclub-call-button:hover:not(:disabled) { background:linear-gradient(180deg,#ad75eb 0%,#8350d1 100%) !important; border-color:#65408a !important; transform:none !important; }
.account-spielclub-call-button:disabled { opacity:.42; cursor:default; box-shadow:none !important; }
.account-spielclub-call-text { display:none; }
.account-spielclub-call-icon { display:block; font-size:1rem; line-height:1; }
.account-section h3,
.account-spielclub-card h3 { margin:0 0 10px; }
.account-section label,
.account-profile-form label { display:grid; gap:5px; margin:0 0 10px; color:var(--muted, #9ca39f); font-size:.84rem; }
.account-section input,
.account-section select,
.account-profile-form input { width:100%; box-sizing:border-box; }
.account-note { color:var(--muted, #929994); font-size:.82rem; margin:12px 2px 0; }
.account-verification-card { max-width:620px; margin:0 auto 14px; }
.account-verification-card > p { color:var(--muted, #9ca39f); }
.account-verification-card strong { color:inherit; }
.account-code-input { font-size:1.4rem; font-weight:800; letter-spacing:.18em; text-align:center; font-variant-numeric:tabular-nums; }
.account-verification-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.account-profile-card { display:grid; grid-template-columns:154px minmax(0,1fr); gap:18px; align-items:start; }
.account-profile-avatar-wrap { display:grid; justify-items:center; gap:9px; }
.account-profile-avatar { width:112px; height:112px; font-size:38px; }
.account-avatar-upload { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); font-size:.78rem; }
.account-password-page-button { width:100%; }
.account-password-page { display:grid; gap:16px; }
.account-password-page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-password-page-head h3 { margin:0; }
.account-password-page-form { display:grid; gap:12px; }
.account-password-page-form label { display:grid; gap:6px; }
.account-password-page-form input:disabled { opacity:.55; cursor:not-allowed; }
.account-profile-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.account-profile-form label { margin:0; }
.account-profile-save-button:disabled { opacity:.48; filter:saturate(.25); cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.account-email-row { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin:0 0 10px; }
.account-email-row span { color:var(--muted, #9ca39f); font-size:.78rem; }
.account-email-row strong { overflow-wrap:anywhere; font-size:.86rem; }
.account-delete-button { margin-left:auto; padding:6px 10px; min-height:30px; background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important; border-color:#a43a36 !important; color:#fff !important; box-shadow:0 3px 0 #8d2e2e,0 5px 9px rgba(0,0,0,.14) !important; }
.account-delete-button:hover:not(:disabled),
.account-delete-button:focus-visible { background:linear-gradient(180deg,#e87872 0%,#d4524c 100%) !important; border-color:#a43a36 !important; color:#fff !important; }
.account-delete-button:active:not(:disabled) { transform:translateY(2px) !important; box-shadow:0 1px 0 #8d2e2e,0 2px 4px rgba(0,0,0,.12) !important; }
.account-delete-dialog > p { line-height:1.45; }
.account-delete-password { display:grid; gap:6px; margin-top:14px; color:var(--muted, #9ca39f); font-size:.84rem; }
.account-delete-password input { width:100%; box-sizing:border-box; }
.account-delete-error { margin:10px 0 0 !important; padding:8px 10px; border-radius:9px; background:#c84a4a; border:1px solid #a43a36; color:#fff; font-weight:800; }
.account-delete-actions button[data-account-delete-confirm] { background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important; border-color:#a43a36 !important; color:#fff !important; box-shadow:0 3px 0 #8d2e2e,0 5px 9px rgba(0,0,0,.14) !important; }
.account-delete-actions button[data-account-delete-confirm]:active:not(:disabled) { transform:translateY(2px) !important; box-shadow:0 1px 0 #8d2e2e,0 2px 4px rgba(0,0,0,.12) !important; }
.account-friend-code { display:flex; align-items:center; gap:8px; margin:12px 0; flex-wrap:wrap; }
.account-friend-code span { color:var(--muted, #9ca39f); }
.account-friend-code strong { letter-spacing:.08em; }
.account-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.account-stat-grid > div { padding:10px; text-align:center; border-radius:11px; background:rgba(112,66,197,.11); }
.account-push-setting { display:inline-flex; align-items:center; justify-content:flex-start; gap:10px; width:max-content; max-width:100%; margin:8px 0 12px; color:var(--muted, #9ca39f); font-size:.84rem; }
.account-switch-wrap { display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.account-switch-wrap input { position:absolute; opacity:0; pointer-events:none; }
.account-switch { position:relative; width:42px; height:23px; border-radius:999px; background:#6f6b72; transition:background .18s ease; }
.account-switch::after { content:""; position:absolute; width:17px; height:17px; top:3px; left:3px; border-radius:50%; background:#fff; transition:transform .18s ease; }
.account-switch-wrap input:checked + .account-switch { background:#6f3fc4; }
.account-switch-wrap input:checked + .account-switch::after { transform:translateX(19px); }
.account-switch-wrap input:disabled + .account-switch { opacity:.55; }
.account-friend-email-row { margin-top:8px; }
.account-profile-stats-wrap { display:grid; gap:8px; }
.account-profile-stats-reset { justify-self:end; }
.account-stat-grid strong { display:block; font-size:1.2rem; }
.account-stat-grid span { display:block; color:var(--muted, #9ca39f); font-size:.72rem; }
.account-live-status { margin-top:10px; padding:10px 11px; border-radius:11px; background:rgba(112,66,197,.08); border:1px solid rgba(112,66,197,.16); }
.account-live-status-head { display:flex; align-items:center; gap:7px; min-width:0; }
.account-live-status-head > span:last-child { margin-left:auto; color:var(--muted, #9ca39f); font-size:.74rem; text-align:right; }
.account-live-dot { width:8px; height:8px; border-radius:50%; background:#727974; flex:0 0 auto; }
.account-live-dot.online { background:#68c982; }
.account-live-loading { color:var(--muted, #9ca39f); font-size:.78rem; }
.account-live-games { display:grid; gap:6px; margin-top:9px; }
.account-live-game { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; padding-top:7px; border-top:1px solid rgba(255,255,255,.06); }
.account-live-game > div { min-width:0; display:grid; }
.account-live-game strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-live-game span { color:var(--muted, #9ca39f); font-size:.7rem; }
.account-live-game b { flex:0 0 auto; font-size:.72rem; font-weight:600; color:#b79ae9; }
.account-password-section { margin-top:12px; }
.account-password-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:8px; align-items:end; }
.account-password-form label { margin:0; }
.account-session-actions { margin-top:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.account-session-actions h3 { flex-basis:100%; }
.account-inline-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.account-person-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:9px; align-items:center; min-height:46px; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.account-person-row:last-child { border-bottom:0; }
.account-list-avatar { width:40px; height:40px; font-size:17px; }
.account-person-title-line { display:flex; align-items:center; gap:8px; min-width:0; }
.account-person-title-line > strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-person-name { min-width:0; display:grid; line-height:1.12; }
.account-person-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.96rem; }
.account-person-name span { font-size:.76rem; color:#7d8580; }
.account-person-name span.online { color:#68c982; }
.account-person-name span.playing { color:#a970ff; }
.account-row-actions { display:flex; gap:4px; align-items:center; flex-wrap:nowrap; justify-content:flex-end; }
.account-row-actions button { padding:6px 10px; min-height:34px; font-size:.82rem; }
.account-loading { padding:28px; text-align:center; color:var(--muted, #9ca39f); }
.account-spielclub-list { display:grid; gap:12px; margin-top:12px; }
.account-spielclub-head { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.account-spielclub-head-status { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.account-spielclub-head-status .badge { white-space:nowrap; }
.account-spielclub-member-score { margin-left:auto; padding-left:8px; white-space:nowrap; color:var(--muted, #929994) !important; font-size:.7rem !important; font-weight:700; }
.account-spielclub-title-block { min-width:0; }
.account-spielclub-title-row { display:flex; align-items:center; gap:8px; min-width:0; }
.account-spielclub-head h3 { margin:2px 0 0; min-width:0; }
.account-spielclub-current-players { margin:5px 0 0; color:var(--muted, #929994); font-size:.9rem; line-height:1.35; }
.account-spielclub-current-players strong { color:inherit; }
.account-spielclub-stats-button { width:30px; height:30px; min-width:30px; padding:5px; display:grid; place-items:center; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.16) !important; color:var(--ink) !important; box-shadow:none !important; }
.account-spielclub-stats-button:hover:not(:disabled) { background:rgba(255,255,255,.15) !important; border-color:rgba(255,255,255,.24) !important; transform:none !important; }
.account-spielclub-stats-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.account-owner-badge { padding:5px 8px; border-radius:999px; background:#6f3fc4; color:#fff; font-size:.78rem; font-weight:800; }
.account-spielclub-members { margin-top:8px; }
.account-spielclub-guest-divider-line { height:1px; background:rgba(90,70,110,.22); margin:8px 4px 6px; }
.account-spielclub-guest-heading { margin:0 8px 3px; color:var(--muted, #929994); font-size:.84rem; font-weight:800; }
.account-spielclub-guests { display:grid; gap:4px; }
.account-spielclub-guest-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:8px; }
.account-spielclub-guest-name { min-width:0; display:flex; align-items:center; gap:4px; }
.account-spielclub-guest-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-spielclub-guest-name .account-spielclub-member-score { margin-left:0; padding-left:0; }

.account-spielclub-management { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.09); }
.account-spielclub-management-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:8px; width:100%; }
.account-spielclub-management-row > button,
.account-spielclub-invite-buttons > button { width:100%; min-width:0; min-height:42px; padding-left:10px; padding-right:10px; box-sizing:border-box; font-size:.84rem; line-height:1.15; white-space:normal; }
.account-spielclub-management-row .account-spielclub-delete { margin-left:0; }
.account-spielclub-invite-group { grid-column:span 2; display:grid; grid-template-rows:auto auto; gap:4px; min-width:0; }
.account-spielclub-invite-label { text-align:center; font-size:.82rem; line-height:1; opacity:.82; }
.account-spielclub-invite-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; }
.account-spielclub-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.account-friend-picker-backdrop { position:fixed; inset:0; z-index:12050; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.5); }
.account-friend-picker { width:min(520px, 100%); max-height:min(680px, calc(100dvh - 32px)); overflow:auto; }
.account-club-picker-dialog { box-sizing:border-box; }
.account-friend-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.account-friend-picker-head h3 { margin:2px 0 0; }
.account-friend-picker-close { font-size:1.4rem; line-height:1; }
.account-friend-picker-list { display:grid; gap:4px; }
.account-friend-picker-row { display:grid; grid-template-columns:auto 26px minmax(0,1fr) auto; align-items:center; column-gap:12px; row-gap:0; min-height:34px; margin:0; padding:5px 10px; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.create-pin-dialog label.account-friend-picker-row { display:grid; grid-template-columns:auto 26px minmax(0,1fr) auto; align-items:center; column-gap:12px; row-gap:0; margin:0; padding:5px 10px; }
.create-pin-dialog label.account-friend-picker-row > input,
.create-pin-dialog label.account-friend-picker-row > .account-list-avatar,
.create-pin-dialog label.account-friend-picker-row > .account-friend-picker-name,
.create-pin-dialog label.account-friend-picker-row > .account-friend-picker-status { margin:0; align-self:center; }
.account-friend-picker-row input { width:auto; margin:0; }
.account-friend-picker-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-friend-picker-status { justify-self:end; white-space:nowrap; color:var(--muted, #929994); }
.account-friend-picker-status.online { color:#68c982; }
.account-friend-picker-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:14px; }
.account-picker-add-button { background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important; border-color:#3e9142 !important; color:#fff !important; box-shadow:0 3px 0 #357d39,0 5px 9px rgba(0,0,0,.14) !important; }
.account-picker-close-button { background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important; border-color:#a43a36 !important; color:#fff !important; box-shadow:0 3px 0 #8d2e2e,0 5px 9px rgba(0,0,0,.14) !important; }
.account-picker-add-button:active:not(:disabled), .account-picker-close-button:active:not(:disabled) { transform:translateY(2px) !important; box-shadow:0 1px 0 rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.12) !important; }
.account-picker-close-button:hover:not(:disabled) { background:linear-gradient(180deg,#e77872 0%,#d0524d 100%) !important; border-color:#a43a36 !important; }
.account-friend-picker-empty { margin:4px 0 0; }
.account-friend-picker-row .account-list-avatar { width:30px; height:30px; }
.account-friend-picker-row strong { font-size:.82rem; line-height:1.1; }
.account-friend-picker-status { font-size:.66rem; line-height:1.05; }
.account-notification-dialog { position:relative; }
.account-notification-close { position:absolute; top:8px; right:8px; }
.account-spielclub-invite-actions [data-spielclub-invite-accept],
.account-spielclub-invite-row [data-accept="1"] { background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important; border-color:#3e9142 !important; color:#fff !important; }
.account-spielclub-invite-actions [data-spielclub-invite-decline],
.account-spielclub-invite-row [data-accept="0"] { background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important; border-color:#a43a36 !important; color:#fff !important; }
.account-spielclub-invite-section { display:grid; gap:4px; }
.account-spielclub-invite-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:5px 0; border-top:1px solid rgba(255,255,255,.06); }
.account-spielclub-invite-row > div:first-child { display:grid; min-width:0; }
.account-spielclub-invite-row small { color:var(--muted,#929994); font-size:.68rem; }
.account-spielclub-stats-dialog {
  width:min(760px, 100%);
  box-sizing:border-box;
  background:var(--panel-bg, #211d29);
  border:1px solid var(--line, rgba(255,255,255,.14));
  box-shadow:0 16px 46px rgba(0,0,0,.42);
}
.account-spielclub-stats-table-wrap { overflow:auto; }
.account-spielclub-stats-table { width:100%; border-collapse:collapse; min-width:560px; font-size:.84rem; }
.account-spielclub-stats-table th, .account-spielclub-stats-table td { padding:9px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.account-spielclub-stats-table th:not(:first-child), .account-spielclub-stats-table td:not(:first-child) { text-align:right; }
.account-spielclub-stats-table thead th { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; }
.account-spielclub-guest-stats .account-spielclub-guest-divider th { padding-top:16px; border-top:1px solid var(--line); border-bottom:0; color:var(--muted); text-align:left; text-transform:none; letter-spacing:0; font-size:.78rem; }

.my-name-with-avatar { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.player-account-avatar { display:inline-grid; width:26px; height:26px; flex:0 0 26px; }
.player-account-avatar[hidden] { display:none; }
.player-account-avatar-image { width:26px; height:26px; font-size:12px; }
.opponent-account-avatar { width:30px; height:30px; flex:0 0 30px; font-size:13px; align-self:center; }
.spectator-account-avatar { width:18px; height:18px; flex:0 0 18px; font-size:9px; }
.opponent-tab-name { align-items:center; }
.spectator-chip { align-items:center; }


/* V2.0.16 – In der Lobby ersetzt das Profil den vorhandenen Lobby-Inhalt.
   Der Lobby-Container selbst bleibt der einzige Rahmen; im Spiel bleibt die Account-UI ein Overlay. */
#start-screen.account-view-active {
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
#start-screen.account-view-active > :not(#account-modal) { display:none !important; }
#start-screen > .account-modal.account-lobby-replacement {
  position:static;
  inset:auto;
  z-index:auto;
  display:block;
  width:100%;
  min-width:0;
  padding:0;
  background:transparent;
}
#start-screen > .account-modal.account-lobby-replacement > .account-dialog {
  width:100%;
  height:min(720px, calc(100dvh - 104px));
  max-height:min(720px, calc(100dvh - 104px));
  min-height:min(560px, calc(100dvh - 104px));
  padding:0;
  border:0 !important;
  border-radius:0;
  box-shadow:none !important;
  background:transparent !important;
}
#start-screen > .account-modal.account-lobby-replacement .account-dialog-head {
  margin-bottom:14px;
}
#start-screen > .account-modal.account-lobby-replacement .account-section,
#start-screen > .account-modal.account-lobby-replacement .account-profile-card,
#start-screen > .account-modal.account-lobby-replacement .account-spielclub-card {
  background:var(--surface-soft);
  border-color:var(--line);
}

.account-modal:not(.account-lobby-replacement) > .account-dialog {
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  box-shadow:var(--shadow) !important;
}
.account-modal:not(.account-lobby-replacement) .account-section,
.account-modal:not(.account-lobby-replacement) .account-profile-card,
.account-modal:not(.account-lobby-replacement) .account-spielclub-card {
  background:var(--surface-soft);
  border-color:var(--line);
}

@media (orientation: portrait) and (max-width: 680px) {
  #start-screen.account-view-active {
    margin-top:max(8px, env(safe-area-inset-top));
  }
  #start-screen > .account-modal.account-lobby-replacement > .account-dialog {
    height:calc(100dvh - 44px);
    max-height:calc(100dvh - 44px);
    min-height:0;
  }
}

@media (max-width: 680px) {
  .account-dialog { width:calc(100vw - 16px); height:calc(100vh - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); padding:12px; }
  .account-auth-grid { grid-template-columns:1fr; }
  .account-profile-card { grid-template-columns:1fr; gap:12px; }
  .account-profile-avatar { width:88px; height:88px; }
  .account-profile-form { grid-template-columns:minmax(0,1fr) auto; }
  .account-delete-button { margin-left:0; width:100%; flex-basis:100%; }
  .account-password-form { grid-template-columns:1fr; }
  .account-person-row { grid-template-columns:34px minmax(0,1fr) auto; gap:6px; min-height:40px; padding:2px 0; }
  .account-list-avatar { width:34px; height:34px; font-size:15px; }
  .account-person-name strong { font-size:.84rem; }
  .account-person-name span { font-size:.64rem; }
  .account-row-actions { grid-column:auto; justify-content:flex-end; }
  .account-row-actions button { padding:4px 7px; min-height:26px; font-size:.7rem; }
  .account-spielclub-current-players { font-size:.78rem; }
  .account-owner-badge { padding:4px 7px; font-size:.68rem; }
  .account-spielclub-guest-heading { font-size:.72rem; }
  .account-spielclub-in-round { padding:2px 6px; font-size:.62rem !important; }
  .account-inline-form { grid-template-columns:1fr; }
  .account-spielclub-management-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .account-spielclub-management-row > button,
  .account-spielclub-invite-buttons > button { min-width:0; min-height:36px; padding:5px 4px; font-size:.68rem; line-height:1.08; }
  .account-spielclub-invite-group { gap:3px; }
  .account-spielclub-invite-label { font-size:.64rem; }
  .account-spielclub-invite-buttons { gap:5px; }
  .account-verification-actions { display:grid; grid-template-columns:1fr; }
}

@media (orientation: portrait) and (max-width: 520px) {
  .opponent-account-avatar { width:30px; height:30px; flex-basis:30px; }
  .spectator-account-avatar { width:16px; height:16px; flex-basis:16px; }
  .player-account-avatar,
  .player-account-avatar-image { width:31px; height:31px; flex-basis:31px; }
}

/* Match84 V2.0.16 – einheitliche Account-Unterseiten und Fenstersteuerung. */
.account-window-close {
  flex:0 0 auto;
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:7px;
  background:rgba(255,255,255,.08) !important;
  color:#c8ceca !important;
  font:500 22px/1 system-ui,sans-serif;
  box-shadow:none !important;
  transform:none !important;
}
.account-window-close:hover,
.account-window-close:focus-visible {
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
  box-shadow:none !important;
  transform:none !important;
}
.account-page-back {
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#d3d8d5 !important;
}
.account-page-back:hover {
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
  transform:none !important;
}
.account-password-page {
  width:100%;
  justify-items:center;
}
.account-password-page-head {
  width:min(100%, 460px);
}
.account-password-page-form {
  width:min(100%, 460px);
}
.account-password-page-form > button[type="submit"] {
  width:100%;
}
.account-verification-card {
  width:min(100%, 460px);
  box-sizing:border-box;
  justify-self:center;
}
.account-verification-card form {
  width:100%;
}
.account-verification-actions {
  width:100%;
}
.account-verification-actions > button {
  width:100%;
}
@media (max-width: 520px) and (orientation: portrait) {
  .account-window-close { width:28px; height:28px; min-width:28px; font-size:20px; }
  .account-password-page-head,
  .account-password-page-form,
  .account-verification-card { width:100%; max-width:100%; }
}

/* Match84 V2.0.42 – Profil auf schmalen Hochkant-Handys. */
body.account-lobby-profile-open .top-utility-buttons {
  display:none !important;
}
@media (orientation: portrait) and (max-width: 520px) {
  .account-tabs {
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    overflow:visible;
    margin-bottom:12px;
  }
  .account-tabs button {
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .account-stat-grid {
    grid-template-columns:1fr;
    gap:7px;
  }
  .account-stat-grid > div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
  }
  .account-stat-grid strong,
  .account-stat-grid span {
    display:block;
  }
  .account-stat-grid strong { order:2; }
  .account-stat-grid span { order:1; font-size:.82rem; }

  .account-spielclub-stats-dialog {
    width:100%;
    max-width:100%;
  }
  .account-spielclub-stats-table-wrap { overflow:visible; }
  .account-spielclub-stats-table,
  .account-spielclub-stats-table thead,
  .account-spielclub-stats-table tbody,
  .account-spielclub-stats-table tr,
  .account-spielclub-stats-table th,
  .account-spielclub-stats-table td {
    display:block;
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .account-spielclub-stats-table { min-width:0; }
  .account-spielclub-stats-table thead { display:none; }
  .account-spielclub-stats-table tr {
    margin:0 0 10px;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:11px;
    background:rgba(112,66,197,.07);
  }
  .account-spielclub-stats-table td {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    padding:5px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    text-align:right !important;
    white-space:normal;
  }
  .account-spielclub-stats-table td:last-child { border-bottom:0; }
  .account-spielclub-stats-table td::before {
    color:var(--muted);
    font-size:.74rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    text-align:left;
  }
  .account-spielclub-stats-table td:nth-child(1)::before { content:"Spieler"; }
  .account-spielclub-stats-table td:nth-child(2)::before { content:"Runden"; }
  .account-spielclub-stats-table td:nth-child(3)::before { content:"Siege"; }
  .account-spielclub-stats-table td:nth-child(4)::before { content:"2. Platz"; }
  .account-spielclub-stats-table td:nth-child(5)::before { content:"3. Platz"; }
  .account-spielclub-stats-table td:nth-child(6)::before { content:"4. Platz"; }
  .account-spielclub-stats-table td:nth-child(7)::before { content:"5. Platz"; }
  .account-spielclub-stats-table td:nth-child(8)::before { content:"Siegquote"; }
  .account-spielclub-guest-stats .account-spielclub-guest-divider {
    padding:0;
    border:0;
    background:transparent;
  }
  .account-spielclub-guest-stats .account-spielclub-guest-divider th {
    display:block;
    padding:14px 0 7px;
    border-top:1px solid var(--line);
    text-align:left;
  }
}


/* Match84 V2.0.19 – Lobby-Namensdialog und Account-Feinschliff. */
.player-name-dialog input {
  letter-spacing: normal;
  text-align: left;
  font-size: 1rem;
  box-sizing: border-box;
}
#player-name-confirm { background:linear-gradient(180deg,#4caf50 0%,#3e9142 100%) !important; border-color:#2f7533 !important; }
#player-name-cancel { background:linear-gradient(180deg,#e05b5b 0%,#b53f3f 100%) !important; border-color:#8f3030 !important; color:#fff !important; }
#player-name-cancel:hover:not(:disabled) { background:linear-gradient(180deg,#ed6d6d 0%,#cb4848 100%) !important; border-color:#a63737 !important; }
button.real-game-launch {
  background:linear-gradient(180deg,#4f8fd8 0%,#316bb0 100%) !important;
  border-color:#28588f !important;
  color:#fff !important;
}
button.real-game-launch:hover:not(:disabled) {
  background:linear-gradient(180deg,#63a0e5 0%,#3c79c4 100%) !important;
  border-color:#3269a7 !important;
}
.account-page-back {
  background:linear-gradient(180deg,#4caf50 0%,#3e9142 100%) !important;
  border-color:#2f7533 !important;
  color:#fff !important;
}
.account-page-back:hover:not(:disabled) {
  background:linear-gradient(180deg,#61be65 0%,#4caf50 100%) !important;
  border-color:#3d8a42 !important;
  color:#fff !important;
}
.account-password-page-form > button[type="submit"] {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
}
.account-password-page-form input { box-sizing:border-box; }
.online-game-actions { width:min(100%,430px); }
.online-game-actions > button { width:100%; }

/* Match84 V2.0.19 – Lobby-Fix und Account-Feinschliff. */
.account-password-page-form {
  justify-items:center;
}
.account-password-page-form > label,
.account-password-page-form > button[type="submit"] {
  width:min(100%, 380px);
  max-width:380px;
  box-sizing:border-box;
}
.account-password-page-form > label > input {
  width:100%;
  box-sizing:border-box;
}
.account-profile-logout {
  width:100%;
  box-sizing:border-box;
}

/* Match84 V2.0.19 – Account-Farben, lokale Hinweise und Spielclub-Aktionen. */
#account-menu-button {
  background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important;
  border-color:#3e9142 !important;
  color:#fff !important;
}
#account-menu-button:hover:not(:disabled) {
  background:linear-gradient(180deg,#6bd16f 0%,#55bb5a 100%) !important;
  border-color:#3e9142 !important;
}
#spielclub-invite-menu-button,
#guest-invite-menu-button {
  background:linear-gradient(180deg,#e47fbd 0%,#d84fa7 100%) !important;
  border-color:#b83b8a !important;
  color:#fff !important;
}
#spielclub-invite-menu-button:hover:not(:disabled),
#guest-invite-menu-button:hover:not(:disabled) {
  background:linear-gradient(180deg,#eb93c9 0%,#df62b3 100%) !important;
  border-color:#b83b8a !important;
}
.account-tabs button:not(.active):not(:disabled) {
  background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important;
  border-color:#3e9142 !important;
  color:#fff !important;
  box-shadow:0 3px 0 #357d39,0 5px 9px rgba(0,0,0,.14);
}
.account-tabs button:not(.active):not(:disabled):hover {
  background:linear-gradient(180deg,#6bd16f 0%,#55bb5a 100%) !important;
  border-color:#3e9142 !important;
}
.account-tabs button.active,
.account-tabs button.active:hover {
  background:linear-gradient(180deg,#76658f 0%,#625373 100%) !important;
  border-color:#817292 !important;
  color:#d8d1e0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform:none !important;
  opacity:.78 !important;
  filter:saturate(.62);
}
#account-logout,
.account-spielclub-delete {
  background:linear-gradient(180deg,#c84a4a 0%,#a93636 100%) !important;
  border-color:#8d2e2e !important;
  color:#fff !important;
}
#account-logout:hover:not(:disabled),
.account-spielclub-delete:hover:not(:disabled) {
  background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important;
  border-color:#a43a36 !important;
}
.account-context-message {
  margin:14px 0 0;
  flex:0 0 auto;
}
.account-password-page-form > label,
.account-password-page-form > button[type="submit"] {
  width:min(100%,340px) !important;
  max-width:340px !important;
  box-sizing:border-box !important;
}
.account-password-page-form > label > input {
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* V2.0.19 – Passwortformular exakt gleich breit. */
.account-password-page-form { width:min(100%,340px) !important; max-width:340px !important; justify-items:stretch !important; }
.account-password-page-form > label,
.account-password-page-form > button[type="submit"] { width:100% !important; max-width:none !important; margin:0 !important; box-sizing:border-box !important; }
.account-password-page-form > label > input { display:block; width:100% !important; box-sizing:border-box !important; }
.account-context-message { height:58px; min-height:58px; box-sizing:border-box; display:flex; align-items:center; overflow:auto; }
.account-context-message.empty { visibility:hidden; }
.opponent-tab.round-inactive { opacity:.62; }

/* Match84 V2.0.60 – getrennte Brettspiel-/Offline-Aktion ---------------- */
.real-game-launch-group {
  width: min(100%, 430px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: stretch;
}
.real-game-launch-group .real-game-launch {
  width: 100%;
  min-width: 0;
}
.real-game-offline-action {
  width: 58px;
  min-width: 58px;
  padding-inline: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #4f8fd8 0%, #316bb0 100%) !important;
  border-color: #28588f !important;
  color: #fff !important;
}
.real-game-offline-action:hover:not(:disabled) {
  background: linear-gradient(180deg, #63a0e5 0%, #3c79c4 100%) !important;
  border-color: #3269a7 !important;
}
.real-game-offline-action.is-ready {
  opacity: 1;
  filter: none;
}
.real-game-offline-action .real-game-offline-check {
  margin: 0;
}
.real-game-offline-check.is-update {
  font-size: 1.02em;
}

html.app-mobile-mode[data-app-device="tablet"] body:not(.in-game):not(.real-game-mode) .real-game-launch-group {
  width: min(100%, 430px) !important;
  align-self: center !important;
}

/* Tablet-Spielmenü: Startbutton exakt so breit wie die übrigen Menübuttons. */
html.app-mobile-mode[data-app-device="tablet"] body.in-game:not(.real-game-mode) #host-controls > button:not([hidden]) {
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* Match84 V2.0.66 – Mobile: Gewinnerdialog und Spielmenü viewport-sicher. */
/* Smartphone und Tablet werden für diese beiden Schutzregeln bewusst nicht
   unterschieden. Der Overlay selbst scrollt, damit ein hoher Gewinnerdialog
   auch bei vergrößerter Systemdarstellung vollständig erreichbar bleibt. */
html.app-mobile-mode .game-end-overlay {
  display: block;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--app-viewport-height, 100dvh) !important;
  max-height: var(--app-viewport-height, 100dvh) !important;
  box-sizing: border-box !important;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
html.app-mobile-mode .game-end-overlay[hidden] {
  display: none !important;
}
html.app-mobile-mode .game-end-dialog {
  width: min(760px, 100%) !important;
  max-height: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Das echte Hamburgermenü ist #host-controls. Es wird auf allen mobilen
   Geräten direkt unter dem Header im sichtbaren Viewport verankert und kann
   bei geringer Höhe intern scrollen. */
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header.mobile-menu-open > #host-controls {
  position: fixed !important;
  top: calc(var(--game-header-height, 44px) + max(5px, env(safe-area-inset-top)) + 6px) !important;
  right: max(5px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  width: min(270px, calc(100vw - 10px)) !important;
  max-height: calc(var(--app-viewport-height, 100dvh) - var(--game-header-height, 44px) - max(15px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}


/* Wenn das mobile Spielmenue geoeffnet ist, werden globale Statusblasen
   voruebergehend ausgeblendet. Der Header selbst bleibt in seinem normalen
   Layer; nur das Menue liegt innerhalb des Headers oben. So kann der Header
   nicht mehr Teile des aufgeklappten Menues ueberdecken. */
html.app-mobile-mode body.mobile-menu-active #status-bubble {
  visibility: hidden !important;
  pointer-events: none !important;
}
html.app-mobile-mode body.mobile-menu-active
#game-container.online-layout-v3 > .game-header.mobile-menu-open > #host-controls {
  z-index: 5000 !important;
}


/* Match84 V2.0.66 – Mobile Lobbybreiten und kompaktes Spielmenü. */
/* Die pauschale Mobile-Regel weiter oben setzt alle Lobbybuttons auf 100 %.
   Für die drei primären Aktionen wird hier bewusst wieder dieselbe Außenbreite
   verwendet – unabhängig von einer Tablet-/Phone-Erkennung. */
html.app-mobile-mode body:not(.in-game):not(.real-game-mode) .online-game-actions,
html.app-mobile-mode body:not(.in-game):not(.real-game-mode) .real-game-launch-group,
html.app-mobile-mode body:not(.in-game):not(.real-game-mode) .app-install-button {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  align-self: center !important;
  box-sizing: border-box !important;
}
html.app-mobile-mode body:not(.in-game):not(.real-game-mode) .online-game-actions > button,
html.app-mobile-mode body:not(.in-game):not(.real-game-mode) .real-game-launch-group > button {
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Mobiles Querformat: kompaktes zweispaltiges Spielmenue. Alle sichtbaren
   Aktionen erhalten dieselbe Buttonflaeche. So passen auch Host-Menues mit
   vielen Aktionen ohne Scrollen in die geringe Displayhoehe. */
html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 > .game-header.mobile-menu-open > #host-controls {
  position: fixed !important;
  top: calc(var(--game-header-height, 44px) + max(4px, env(safe-area-inset-top)) + 4px) !important;
  right: max(5px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: minmax(34px, auto) !important;
  width: min(350px, calc(100vw - 12px)) !important;
  min-width: min(310px, calc(100vw - 12px)) !important;
  max-width: calc(100vw - 12px) !important;
  height: auto !important;
  max-height: calc(100dvh - var(--game-header-height, 44px) - max(12px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
  padding: 8px !important;
  gap: 5px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}
html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #host-controls > button:not([hidden]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 5px 8px !important;
  font-size: .74rem !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: center !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}
html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #host-controls > .mobile-menu-version {
  display: flex !important;
  grid-column: 2 !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border-top: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
  font-size: .70rem !important;
  line-height: 1.1 !important;
  text-align: right !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Match84 V2.0.270 – Brettspielmenü mobil quer wie das Online-Menü:
   zwei gleich breite Spalten; die Versionsnummer nutzt das freie Feld rechts unten. */
html.app-mobile-mode.app-landscape body.real-game-mode
#real-game-container.real-layout > .real-layout-header.mobile-menu-open > #real-game-header-actions {
  position: fixed !important;
  top: calc(var(--game-header-height, 44px) + max(4px, env(safe-area-inset-top)) + 4px) !important;
  right: max(5px, env(safe-area-inset-right)) !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: minmax(34px, auto) !important;
  width: min(350px, calc(100vw - 12px)) !important;
  min-width: min(310px, calc(100vw - 12px)) !important;
  max-width: calc(100vw - 12px) !important;
  height: auto !important;
  max-height: calc(100dvh - var(--game-header-height, 44px) - max(12px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
  padding: 8px !important;
  gap: 5px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}
html.app-mobile-mode.app-landscape body.real-game-mode
#real-game-container.real-layout #real-game-header-actions > button:not([hidden]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 5px 8px !important;
  font-size: .74rem !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  text-align: center !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}
html.app-mobile-mode.app-landscape body.real-game-mode
#real-game-container.real-layout #real-game-header-actions > .real-menu-version {
  display: flex !important;
  grid-column: 2 !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border-top: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
  font-size: .70rem !important;
  line-height: 1.1 !important;
  text-align: right !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Match84 V2.0.67 – Brettspiel-Updatebutton nutzt dieselbe blaue Farbgebung wie der Brettspielbutton. */

/* Match84 V2.0.68 – deaktivierter Brettspiel-Updatebutton sichtbar ausgegraut. */
.real-game-offline-action:disabled {
  background: linear-gradient(180deg, #9aa3a8 0%, #747d82 100%) !important;
  border-color: #687075 !important;
  color: #eef1f2 !important;
  opacity: .72 !important;
  filter: saturate(.35) !important;
  cursor: default !important;
}

/* Match84 V2.0.87 – Spielclub-Kalender und robuste mobile Würfelauswahl. */
.account-spielclub-calendar-button {
  width:30px;
  height:30px;
  min-width:30px;
  padding:5px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}
.account-spielclub-calendar-button:hover:not(:disabled) {
  background:rgba(255,255,255,.15) !important;
  border-color:rgba(255,255,255,.24) !important;
  transform:none !important;
}
.account-spielclub-calendar-button.has-event {
  background:#6f3fc4 !important;
  border-color:#9b76df !important;
  color:#fff !important;
  box-shadow:0 0 0 2px rgba(111,63,196,.18) !important;
}
.account-spielclub-calendar-button svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.account-calendar-dialog { width:min(620px, calc(100vw - 24px)); max-height:min(88vh, 720px); overflow:auto; }
.account-calendar-events { display:grid; gap:8px; margin:10px 0 16px; }
.account-calendar-event { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.035); }
.account-calendar-event > div { min-width:0; display:grid; gap:3px; }
.account-calendar-event small { color:var(--muted); line-height:1.3; }
.account-calendar-form { border-top:1px solid var(--line); padding-top:14px; }
.account-calendar-form h4 { margin:0 0 10px; }
.account-calendar-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.account-calendar-grid label { display:grid; gap:5px; min-width:0; font-size:.82rem; font-weight:700; color:var(--muted); }
.account-calendar-grid input,
.account-calendar-grid select { width:100%; min-width:0; box-sizing:border-box; }
.account-calendar-check { display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:.86rem; }
.account-calendar-check input { margin-top:2px; }

/* Die sichtbaren Würfel sind auf mobilen Geräten echte Bedienflächen. Sie
   dürfen nicht vom horizontalen Brett-Swipe oder einer minimalen Browser-Geste
   geschluckt werden. */
html.app-mobile-mode body.in-game:not(.real-game-mode) #dice-selection-container.own-dice-active .dice-item:not(.inactive-die):not(.secured) {
  touch-action:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

@media (max-width: 680px) {
  .account-calendar-dialog { width:min(96vw, 620px); max-height:88vh; }
  .account-calendar-grid { grid-template-columns:1fr; }
  .account-calendar-event { align-items:flex-start; }
}



/* Match84 V2.0.87 – Spielclub-Freundepicker horizontal und Profilreiter ohne Hintergrundfeld. */
.create-pin-dialog.account-club-picker-dialog label.account-friend-picker-row {
  display:grid !important;
  grid-template-columns:auto 26px minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:0 !important;
  padding:5px 10px !important;
}
.create-pin-dialog.account-club-picker-dialog .account-friend-picker-row > input,
.create-pin-dialog.account-club-picker-dialog .account-friend-picker-row > .account-list-avatar,
.create-pin-dialog.account-club-picker-dialog .account-friend-picker-row > .account-friend-picker-name,
.create-pin-dialog.account-club-picker-dialog .account-friend-picker-row > .account-friend-picker-status {
  margin:0 !important;
}
.create-pin-dialog.account-club-picker-dialog .account-friend-picker-name { margin-right:4px !important; }
.create-pin-dialog.account-club-picker-dialog .account-friend-picker-status { margin-left:4px !important; }
.account-tabs { background:transparent !important; box-shadow:none !important; }


/* Match84 V2.0.87 – vorübergehende Abwesenheit im Online-Spiel. */
#temporary-away-menu-button,
.temporary-away-toggle {
  background: linear-gradient(180deg,#ffffff 0%,#ececec 100%) !important;
  border-color: #b8b8b8 !important;
  color: #222 !important;
}
#temporary-away-menu-button.is-present-action,
.temporary-away-toggle.is-present-action,
.temporary-away-ok {
  background: linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important;
  border-color: #3e9142 !important;
  color: #fff !important;
}
.temporary-away-dialog { position: relative; max-width: 430px; }
.temporary-away-message-label { display: grid; gap: 7px; text-align: left; }
.temporary-away-message-label textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 82px; }
.temporary-away-error { color: #b82020; font-weight: 700; margin-top: 8px; }
.temporary-away-toggle { width: 100%; margin-top: 14px; }
.opponent-tab.temporarily-away { border-style: dashed !important; }
.opponent-tab.temporarily-away .opponent-away-label { font-weight: 800; }

/* V2.0.87: Spielclub-Kopf im Hochkantmodus ohne Überlagerungen. */
.account-spielclub-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
}
.account-spielclub-title-block { min-width:0; }
.account-spielclub-title-block h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-spielclub-head-tools { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.account-spielclub-head-status { min-width:0; }
.account-spielclub-member-score { margin-left:2px; padding-left:0; color:inherit !important; font-size:inherit !important; font-weight:800; }
.account-spielclub-in-round { margin-left:7px; padding:3px 7px; border-radius:999px; background:rgba(76,166,99,.18); color:#78d28d !important; font-size:.76rem !important; font-weight:800; white-space:nowrap; }
@media (max-width: 520px) {
  .account-spielclub-head { grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  .account-spielclub-head-tools { grid-column:2; grid-row:1; }
  .account-spielclub-head-status { grid-column:1 / -1; grid-row:2; justify-content:flex-end; }
}

/* V2.0.87: Abwesenheit blockiert sichtbar den eigenen Steuer-/Würfelbereich. */
#control-panel { position:relative; }
.temporary-away-control-shield {
  position:absolute;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  pointer-events:auto;
  border-radius:inherit;
  background:rgba(12,10,18,.20);
}
.temporary-away-control-hint {
  background:linear-gradient(180deg, rgba(148,76,255,.98), rgba(109,43,222,.98));
  border:1px solid rgba(244,236,255,.92);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.temporary-away-control-hint {
  padding:9px 14px;
  border-radius:10px;
  font-weight:800;
  text-align:center;
  display:grid;
  gap:8px;
  justify-items:center;
}
.temporary-away-control-resume {
  min-width:118px;
  margin:0;
  padding:7px 14px;
  background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important;
  border-color:#3e9142 !important;
  color:#fff !important;
}
.temporary-away-dialog > .modal-close-x { color:inherit; background:transparent; box-shadow:none; }
.temporary-away-dialog #temporary-away-title { text-align:left; padding-right:38px; }
.temporary-away-turn-bubble {
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  gap:6px;
  text-align:center;
  pointer-events:none;
}
.temporary-away-notice-title { display:block; font-size:1.05em; }
.temporary-away-notice-message { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-weight:700; }

.account-spielclub-members .account-person-title-line { gap:3px; }
.temporary-away-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.temporary-away-dialog-head h2 { margin:0; text-align:left; }
.temporary-away-dialog-head .account-window-close { flex:0 0 auto; }

/* Match84 V2.0.111 – Clubspielstatistik */
.account-stats-reset-button,
.account-stats-reset-yes {
  background: #2f9e55 !important;
  border-color: #268648 !important;
  color: #fff !important;
}
.account-stats-reset-no {
  background: #c83b45 !important;
  border-color: #a92f38 !important;
  color: #fff !important;
}
.account-stats-reset-dialog {
  width: min(360px, calc(100vw - 32px));
  text-align: center;
}
.account-stats-main-actions {
  justify-content: flex-start;
}

/* Match84 V2.0.111 – Spielaktivität in der Freundesliste. */
.account-friend-game-bubbles {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:3px;
  min-width:0;
}
.account-person-name .account-friend-game-bubble {
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:2px 7px;
  border-radius:999px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.64rem;
  line-height:1.2;
  font-weight:800;
  border:1px solid transparent;
}
.account-person-name .account-friend-game-bubble.is-active.is-club {
  background:rgba(111,63,196,.24);
  border-color:rgba(147,103,223,.5);
  color:#d2bbff;
}
.account-person-name .account-friend-game-bubble.is-active.is-normal {
  background:rgba(43,154,89,.24);
  border-color:rgba(69,184,111,.5);
  color:#baf0cc;
}
.account-person-name .account-friend-game-bubble.is-inactive {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.13);
  color:var(--muted,#929994);
}
.account-person-name .account-friend-game-bubble.is-club::before {
  content:'◆';
  margin-right:4px;
  font-size:.54rem;
}
.account-person-name .account-friend-game-bubble.is-normal::before {
  content:'●';
  margin-right:4px;
  font-size:.52rem;
}

/* V2.0.117: Spielclubname nur in der Clubspielliste bearbeiten */
.account-spielclub-rename-button {
  min-width: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.account-spielclub-rename-dialog { max-width: 430px; }
.account-spielclub-rename-dialog input { width: 100%; box-sizing: border-box; }
.account-spielclub-rename-save { background: #1f9d55; color: #fff; }
.account-spielclub-rename-save:disabled { background: #b8b8b8; color: #666; cursor: default; opacity: .9; }
.account-spielclub-rename-cancel { background: #c93434; color: #fff; }

/* V2.0.117: Bearbeiten-Button direkt neben dem Clubnamen */
.account-spielclub-title-row { display:flex; align-items:center; gap:6px; min-width:0; }
.account-spielclub-title-row h3 { margin:0; min-width:0; }
.account-spielclub-title-row .account-spielclub-rename-button { flex:0 0 auto; }

/* V2.0.121 – E-Mail-Einladung fuer Clubspiele */
.account-spielclub-email-dialog { max-width:430px; }
.account-spielclub-email-dialog label { display:grid; gap:6px; }
.account-spielclub-email-dialog input { width:100%; box-sizing:border-box; }
.account-spielclub-email-send { background:#1f9d55 !important; color:#fff !important; }
.account-spielclub-email-send:disabled { background:#b8b8b8 !important; color:#666 !important; cursor:default; opacity:.9; box-shadow:none !important; }
.account-spielclub-email-cancel { background:#c93434 !important; color:#fff !important; }

/* Match84 V2.0.125 – kompakte Clubspiel-Aktionen im mobilen Hochkantmodus. */
.account-spielclub-invite-icon {
  display:none;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

@media (orientation: portrait) and (max-width: 520px) {
  .account-spielclub-management-row {
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:6px;
    align-items:end;
  }
  .account-spielclub-invite-group {
    grid-column:auto;
    justify-items:center;
  }
  .account-spielclub-invite-buttons {
    display:flex;
    gap:5px;
    justify-content:center;
  }
  .account-spielclub-invite-buttons > .account-spielclub-invite-button {
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px;
    min-height:36px;
    padding:0 !important;
    display:grid;
    place-items:center;
    flex:0 0 36px;
  }
  .account-spielclub-invite-text { display:none; }
  .account-spielclub-invite-icon { display:block; }

  .account-spielclub-actions {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .account-spielclub-actions > button {
    width:auto !important;
    min-width:0 !important;
    min-height:36px;
    padding:5px 8px !important;
    font-size:.68rem;
    line-height:1.08;
    flex:0 0 auto;
  }
}

/* Match84 V2.0.135 – einheitliche Symbolbuttons fuer Clubspiel-Aktionen im mobilen Hochkantmodus. */
.account-spielclub-action-icon {
  display:none;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

@media (orientation: portrait) and (max-width: 520px) {
  .account-spielclub-management-row {
    grid-template-columns:36px auto 36px;
    justify-content:space-between;
  }
  .account-spielclub-management-row > .account-spielclub-action-button,
  .account-spielclub-actions > .account-spielclub-action-button {
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px;
    min-height:36px;
    padding:0 !important;
    display:grid;
    place-items:center;
    flex:0 0 36px;
  }
  .account-spielclub-action-text { display:none; }
  .account-spielclub-action-icon { display:block; }
  .account-spielclub-actions {
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
}

/* Match84 V2.0.155 – Spiel-Bubbles in der mobilen Freundesliste unter den Aktionen. */
@media (orientation: portrait) and (max-width: 520px) {
  .account-person-row:has(.account-friend-game-bubbles) {
    align-items:start;
  }
  .account-person-row:has(.account-friend-game-bubbles) .account-person-name {
    grid-column:2 / 4;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    min-width:0;
  }
  .account-person-row:has(.account-friend-game-bubbles) .account-person-title-line,
  .account-person-row:has(.account-friend-game-bubbles) .account-person-name > span:not(.account-friend-game-bubble) {
    grid-column:1;
    min-width:0;
  }
  .account-person-row:has(.account-friend-game-bubbles) .account-row-actions {
    grid-column:3;
    grid-row:1;
    align-self:start;
    position:relative;
    z-index:1;
  }
  .account-person-row:has(.account-friend-game-bubbles) .account-friend-game-bubbles {
    grid-column:1 / 3;
    width:100%;
    margin-top:7px;
    padding-top:2px;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
  }
  .account-person-row:has(.account-friend-game-bubbles) .account-friend-game-bubble {
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }
}

/* Match84 V2.0.155 – Nicht-Admin-Clubrundenaktionen an Admin-Buttons angleichen. */
.account-spielclub-actions > .account-spielclub-action-button {
  min-height:38px;
  padding-left:8px;
  padding-right:8px;
  box-sizing:border-box;
  font-size:.76rem;
  line-height:1.15;
}
.account-spielclub-leave-button {
  background:linear-gradient(180deg,#c84a4a 0%,#a93636 100%) !important;
  border-color:#8d2e2e !important;
  color:#fff !important;
  box-shadow:none !important;
}
.account-spielclub-leave-button:hover:not(:disabled) {
  background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important;
  border-color:#a43a36 !important;
}
.account-spielclub-leave-button:active:not(:disabled) {
  box-shadow:none !important;
}

/* Match84 V2.0.155 – Menü/Profil optisch vereinheitlichen. */
/* Keine 3D-/Drop-Shadows an Menü- und Profilbuttons. Spielbrett-Buttons bleiben unberührt. */
#host-controls button,
#real-game-header-actions > button,
#account-modal button,
body > .modal-overlay[class*="account-"] button {
  box-shadow:none !important;
}
#host-controls button:active:not(:disabled),
#real-game-header-actions > button:active:not(:disabled),
#account-modal button:active:not(:disabled),
body > .modal-overlay[class*="account-"] button:active:not(:disabled) {
  box-shadow:none !important;
  transform:none !important;
}

/* Rote Menü-/Profilaktionen benutzen überall denselben Rotton. */
#leave-game-button,
#real-back-button,
#account-logout,
#account-modal .danger,
#account-modal .secondary,
#account-modal .account-delete-button,
#account-modal .account-spielclub-delete,
#account-modal .account-spielclub-leave-button,
#account-modal .account-picker-close-button,
#account-modal .account-spielclub-rename-cancel,
#account-modal .account-spielclub-email-cancel,
#account-modal .account-stats-reset-no,
body > .modal-overlay[class*="account-"] .danger,
body > .modal-overlay[class*="account-"] .secondary,
body > .modal-overlay[class*="account-"] .account-picker-close-button,
body > .modal-overlay[class*="account-"] .account-spielclub-rename-cancel,
body > .modal-overlay[class*="account-"] .account-spielclub-email-cancel,
body > .modal-overlay[class*="account-"] .account-stats-reset-no,
body > .modal-overlay[class*="account-"] [data-account-delete-confirm] {
  background:linear-gradient(180deg,#c84a4a 0%,#a93636 100%) !important;
  border-color:#8d2e2e !important;
  color:#fff !important;
  box-shadow:none !important;
}
#leave-game-button:hover:not(:disabled),
#real-back-button:hover:not(:disabled),
#account-logout:hover:not(:disabled),
#account-modal .danger:hover:not(:disabled),
#account-modal .secondary:hover:not(:disabled),
#account-modal .account-delete-button:hover:not(:disabled),
#account-modal .account-spielclub-delete:hover:not(:disabled),
#account-modal .account-spielclub-leave-button:hover:not(:disabled),
#account-modal .account-picker-close-button:hover:not(:disabled),
#account-modal .account-spielclub-rename-cancel:hover:not(:disabled),
#account-modal .account-spielclub-email-cancel:hover:not(:disabled),
#account-modal .account-stats-reset-no:hover:not(:disabled),
body > .modal-overlay[class*="account-"] .danger:hover:not(:disabled),
body > .modal-overlay[class*="account-"] .secondary:hover:not(:disabled),
body > .modal-overlay[class*="account-"] .account-picker-close-button:hover:not(:disabled),
body > .modal-overlay[class*="account-"] [data-account-delete-confirm]:hover:not(:disabled) {
  background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important;
  border-color:#a43a36 !important;
}

/* Disabled-Menübuttons behalten ihren Farbton: dunkler + deutlich weniger gesättigt. */
#host-controls #host-start-button:disabled,
#host-controls #host-end-button:disabled,
#real-game-header-actions .pause:disabled {
  background:linear-gradient(180deg,#41627f 0%,#354d62 100%) !important;
  border-color:#354858 !important;
  color:#d7e0e7 !important;
}
#host-controls #host-reset-button:disabled,
#real-game-header-actions #real-reset-button:disabled {
  background:linear-gradient(180deg,#806c48 0%,#665438 100%) !important;
  border-color:#5b4b34 !important;
  color:#eee6d8 !important;
}
#host-controls #spielclub-invite-menu-button:disabled,
#host-controls #guest-invite-menu-button:disabled {
  background:linear-gradient(180deg,#875e77 0%,#704b63 100%) !important;
  border-color:#644557 !important;
  color:#eee2e9 !important;
}
#host-controls #account-menu-button:disabled,
#account-modal button.primary:disabled,
#account-modal .account-spielclub-open-button:disabled,
#account-modal .account-spielclub-invite-button:disabled,
#account-modal .account-profile-save-button:disabled,
#account-modal .account-picker-add-button:disabled,
#account-modal .account-spielclub-email-send:disabled,
body > .modal-overlay[class*="account-"] button.primary:disabled,
body > .modal-overlay[class*="account-"] .account-picker-add-button:disabled,
body > .modal-overlay[class*="account-"] .account-spielclub-email-send:disabled {
  background:linear-gradient(180deg,#4d714f 0%,#405e42 100%) !important;
  border-color:#3b533c !important;
  color:#dbe5dc !important;
  opacity:.78 !important;
  filter:saturate(.45) !important;
}
#host-controls #tutorial-mode-button:disabled,
#real-game-header-actions .tutorial-menu-button:disabled,
#account-modal .account-tabs button:disabled,
#account-modal .account-tabs button.active {
  background:linear-gradient(180deg,#655876 0%,#554a64 100%) !important;
  border-color:#5c5267 !important;
  color:#ded9e4 !important;
  opacity:.78 !important;
  filter:saturate(.45) !important;
}
#host-controls #temporary-away-menu-button:disabled,
#real-game-header-actions .temporary-away-toggle:disabled {
  background:linear-gradient(180deg,#b5b5b5 0%,#999 100%) !important;
  border-color:#858585 !important;
  color:#333 !important;
  opacity:.8 !important;
  filter:saturate(.25) !important;
}
#host-controls #leave-game-button:disabled,
#real-game-header-actions #real-back-button:disabled,
#account-modal .danger:disabled,
#account-modal .secondary:disabled,
#account-modal .account-spielclub-delete:disabled,
#account-modal .account-spielclub-leave-button:disabled,
body > .modal-overlay[class*="account-"] .danger:disabled,
body > .modal-overlay[class*="account-"] .secondary:disabled {
  background:linear-gradient(180deg,#754e4e 0%,#614040 100%) !important;
  border-color:#583b3b !important;
  color:#eadede !important;
  opacity:.78 !important;
  filter:saturate(.45) !important;
}

/* Match84 V2.0.155 – Menü-/Profilfarben, Lobby-Schatten und Desktop-Avatar vereinheitlichen. */
/* Einheitliches Grün für alle grünen Menü-/Profil-/Lobbyaktionen. */
#start-screen .online-game-actions button,
#start-screen .game-list button.lobby-resume-button,
#start-screen .lobby-filter-button.active,
#start-screen .lobby-filter-button.active:hover:not(:disabled),
#start-screen .account-lobby-button,
#account-menu-button,
#account-modal button.primary,
#account-modal .account-picker-add-button,
#account-modal .account-profile-save-button,
#account-modal .account-stats-reset-button,
#account-modal .account-stats-reset-yes,
#account-modal .account-spielclub-email-send,
#account-modal .account-spielclub-invite-row [data-accept="1"],
body > .modal-overlay[class*="account-"] button.primary,
body > .modal-overlay[class*="account-"] .account-picker-add-button,
body > .modal-overlay[class*="account-"] .account-stats-reset-button,
body > .modal-overlay[class*="account-"] .account-stats-reset-yes,
body > .modal-overlay[class*="account-"] .account-spielclub-email-send {
  background:linear-gradient(180deg,#4caf50 0%,#3e9142 100%) !important;
  border-color:#2f7533 !important;
  color:#fff !important;
}
#start-screen .online-game-actions button:hover:not(:disabled),
#start-screen .game-list button.lobby-resume-button:hover:not(:disabled),
#start-screen .account-lobby-button:hover:not(:disabled),
#account-menu-button:hover:not(:disabled),
#account-modal button.primary:hover:not(:disabled),
#account-modal .account-picker-add-button:hover:not(:disabled),
#account-modal .account-profile-save-button:hover:not(:disabled),
#account-modal .account-stats-reset-button:hover:not(:disabled),
#account-modal .account-stats-reset-yes:hover:not(:disabled),
#account-modal .account-spielclub-email-send:hover:not(:disabled),
body > .modal-overlay[class*="account-"] button.primary:hover:not(:disabled),
body > .modal-overlay[class*="account-"] .account-picker-add-button:hover:not(:disabled),
body > .modal-overlay[class*="account-"] .account-stats-reset-button:hover:not(:disabled),
body > .modal-overlay[class*="account-"] .account-stats-reset-yes:hover:not(:disabled),
body > .modal-overlay[class*="account-"] .account-spielclub-email-send:hover:not(:disabled) {
  background:linear-gradient(180deg,#61be65 0%,#4caf50 100%) !important;
  border-color:#3d8a42 !important;
}

/* In der Lobby keine Button-Schatten. */
#start-screen button,
#start-screen button:hover:not(:disabled),
#start-screen button:active:not(:disabled) {
  box-shadow:none !important;
}

/* Eigenes Profilbild im Desktop-Spielkopf auf dieselbe Größe wie mobil bringen. */
body.in-game .player-account-avatar,
body.in-game .player-account-avatar-image {
  width:31px;
  height:31px;
  flex-basis:31px;
}


/* Match84 V2.0.155 – Avatar-/Score-Verhältnis Desktop/Mobil angleichen. */
/* Desktop: eigenes Profilbild größer, Score-Tropfen etwas kleiner. */
@media (min-width: 521px) {
  body.in-game .player-account-avatar,
  body.in-game .player-account-avatar-image {
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }

  body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info .score-drop {
    width:34px !important;
    height:47px !important;
    padding:7px 3px 0 !important;
    font-size:.88rem !important;
  }

  /* Profil-Listen Desktop: dieselbe Lesbarkeit und Buttongröße wie im oberen Bereich. */
  .account-person-row {
    grid-template-columns:44px minmax(0,1fr) auto !important;
    min-height:52px;
    gap:10px;
  }
  .account-list-avatar {
    width:44px !important;
    height:44px !important;
    font-size:18px;
  }
  .account-person-name strong,
  .account-spielclub-guest-row strong {
    font-size:1rem;
  }
  .account-person-name span,
  .account-spielclub-guest-heading,
  .account-spielclub-current-players {
    font-size:.84rem;
  }
  .account-row-actions button,
  .account-spielclub-watch-button,
  .account-spielclub-management-row > button,
  .account-spielclub-invite-buttons > button,
  .account-spielclub-actions > button {
    min-height:42px;
    padding:9px 12px;
    font-size:1rem !important;
    line-height:1.15;
  }
  .account-row-actions .danger.subtle,
  .account-spielclub-guests .danger.subtle {
    min-height:42px;
    padding:9px 12px;
    font-size:1rem !important;
  }
  .account-spielclub-call-button {
    width:42px;
    min-width:42px;
    max-width:42px;
    height:42px;
    min-height:42px;
    padding:0;
  }
  .account-spielclub-call-icon { font-size:1.2rem; }
  .account-spielclub-action-text,
  .account-spielclub-invite-text {
    font-size:inherit;
  }
  .account-spielclub-invite-label {
    font-size:.9rem;
  }
  .account-spielclub-in-round,
  .account-owner-badge {
    font-size:.84rem !important;
  }
}

/* Mobil: Avatar bleibt unverändert, Score-Tropfen etwas größer. */
html.app-mobile-mode:is(.app-portrait,.app-landscape) body.in-game:not(.real-game-mode) #game-container.online-layout-v3 #player-info .score-drop {
  width:28px !important;
  height:34px !important;
  padding-top:3px !important;
  font-size:.78rem !important;
}

/* Match84 V2.0.155 – mehrere Hilfsblasen dürfen zeitgleich sichtbar bleiben.
   Historische Hinweise sind reine Leseblasen und blockieren keine Eingaben. */
.tutorial-history-hint {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  opacity: .96;
}
.tutorial-history-hint.is-dragging { cursor: grabbing; }


/* Match84 V2.0.155 – Profil und Popups muessen jeden Spiel-/Animationslayer vollstaendig ueberdecken. */
body > .modal-overlay,
body > .seat-picker,
#account-modal.account-modal,
.account-modal,
.account-notification-backdrop,
.account-friend-picker-backdrop {
  z-index: 30000 !important;
}

/* Match84 V2.0.155 – Hilfsblasen gehoeren ausschliesslich auf die aktive Spielflaeche. */
body:not(.in-game) > .tutorial-hint,
body:has(> .modal-overlay:not([hidden])) > .tutorial-hint,
body:has(> .seat-picker:not([hidden])) > .tutorial-hint {
  display: none !important;
}

/* Match84 V2.0.155 – Zuschauer-Hilfsmodus breit: eine gemeinsame Verlaufblase
   in der freien linken Spielspalte. Neueste Meldung oben, keine Pfeile. */
body.in-game.spectator-mode .tutorial-hint.tutorial-spectator-feed {
  min-width: 0 !important;
  max-width: none !important;
  pointer-events: auto;
  cursor: default;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
  padding: 12px 14px !important;
}
body.in-game.spectator-mode .tutorial-hint.tutorial-spectator-feed::after {
  display: none !important;
}
.tutorial-spectator-feed .tutorial-hint-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tutorial-spectator-feed-line {
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.23);
  line-height: 1.38;
}
.tutorial-spectator-feed-line:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.tutorial-spectator-feed-line.is-current {
  font-weight: 700;
}


/* V2.0.233 – Brettspielmodus: Eine bereits leere Reihe muss beim Versuch,
   passende Würfel darauf abzulegen, genauso eindeutig rot pulsieren wie im
   Onlinemodus. Die höhere Spezifität hält die Rückmeldung über dem speziellen
   Realmodus-Layout (inkl. leerem Schacht/Canvas-Darstellung) sichtbar. */
#real-game-container.real-layout .real-match84-shaft.shaft-invalid-flash {
  position: relative !important;
  isolation: isolate !important;
}
#real-game-container.real-layout .real-match84-shaft.shaft-invalid-flash::after {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 100 !important;
  opacity: 0;
  /* Exakt dieselben Werte wie Online- und Zuschaueransicht. */
  background: rgba(220, 42, 42, .38) !important;
  box-shadow:
    inset 0 0 0 3px rgba(225, 55, 55, .96),
    inset 0 0 1.3rem rgba(225, 55, 55, .32),
    0 0 1rem rgba(225, 55, 55, .44) !important;
  animation: m84-invalid-shaft-red-pulse 1.55s ease-in-out 1 !important;
}


/* Match84 V2.0.233 – Spielclub: Entfernen-Schaltflächen bilden rechts eine feste Kante. */
.account-spielclub-members .account-person-row > .account-row-actions,
.account-spielclub-guests .account-spielclub-guest-row > .account-row-actions {
  justify-self:end;
  margin-left:auto;
  justify-content:flex-end;
}
.account-spielclub-guests .account-spielclub-guest-row {
  width:100%;
  box-sizing:border-box;
  padding-left:0;
  padding-right:0;
}


/* V2.0.233 – Clubstatus, Zusehen und Aussetzen. */
.account-spielclub-watch-button {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  flex:0 0 auto; min-height:28px; padding:3px 8px; border-radius:999px;
  background:linear-gradient(180deg,#9b5dde 0%,#7131b6 100%) !important; color:#fff !important;
  border:1px solid #49305f !important; font-size:.7rem; font-weight:800; box-shadow:none !important;
}
.account-spielclub-watch-button:hover:not(:disabled) {
  background:linear-gradient(180deg,#a96ceb 0%,#7b3ac2 100%) !important;
  border-color:#513469 !important; color:#fff !important; transform:none !important;
}
.account-spielclub-watch-icon { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.account-spielclub-watch-button:disabled { opacity:.45; cursor:default; }
.host-sitout-button {
  display:inline-flex; align-items:center; justify-content:center; padding:2px 7px;
  margin-left:4px; border-radius:999px; background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%);
  color:#fff; font-size:.68rem; font-weight:800; line-height:1.4; cursor:pointer; user-select:none;
}
.host-sitout-button.disabled { opacity:.55; pointer-events:none; }
.temporary-away-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.temporary-away-actions .temporary-away-toggle { margin-top:0; }
.temporary-away-sitout { width:100%; background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important; border-color:#3e9142 !important; color:#fff !important; }
@media (max-width:520px) and (orientation:portrait) {
  .account-spielclub-watch-button { width:28px; height:28px; min-height:28px; padding:0; }
  .account-spielclub-watch-text { display:none; }
  .account-spielclub-watch-icon { width:18px; height:18px; }
}


/* Match84 V2.0.233 – Club-Zuschauer/Aussetzer leben in derselben Mitspieler-Tabelle. */
.opponent-observer-label {
  display:inline-flex; align-items:center; gap:2px; margin-left:4px;
  padding:1px 5px; border-radius:999px; background:rgba(140,76,210,.18);
  color:#b98aef; font-size:.62rem; font-weight:800; white-space:nowrap;
}
html.app-mobile-mode body.in-game.spectator-mode:not(.real-game-mode) #game-container.online-layout-v3 #opponent-tabs-column {
  display:flex !important;
  visibility:visible !important;
}


/* Match84 V2.0.233 – Bestätigungsdialog muss über dynamischen Abwesenheitsdialogen liegen. */
#action-confirm-modal.above-dynamic-modal { z-index: 31000 !important; }

/* V2.0.233 – Host-Aktion „Aussetzen“ im Tab bewusst neutral/weiß. */
.host-sitout-button {
  background:linear-gradient(180deg,#ffffff 0%,#ececec 100%) !important;
  border:1px solid #b8b8b8 !important;
  color:#222 !important;
  box-shadow:none !important;
}
.host-sitout-button:hover:not(.disabled) {
  background:linear-gradient(180deg,#ffffff 0%,#e4e4e4 100%) !important;
  border-color:#aaa !important;
  color:#111 !important;
  transform:none !important;
}

/* V2.0.233 – Desktop-Tabs verwenden wieder ausschließlich den etablierten
   Flex-/Scroll-Block weiter oben. Keine nachträgliche Club-Sonderregel darf
   dessen Größenberechnung überschreiben. Inaktive Clubplätze bleiben normale
   Tabs und werden allein durch die gemeinsame Tab-Renderlogik dargestellt. */

/* V2.0.233 – dritte Abstimmungsoption „Aussetzen“. */
#sit-out-after-game-button.vote-selected {
  background:linear-gradient(180deg,#ffffff 0%,#e8e8e8 100%) !important;
  border-color:#9d9d9d !important;
  color:#222 !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.16) !important;
}

/* Match84 V2.0.233 – Club-Aussetzer: eigene persistente Hinweisblase mit Wiedereinstieg. */
.club-sitout-notice {
  position:fixed;
  left:50%;
  bottom:max(18px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:14500;
  width:min(420px, calc(100vw - 24px));
  box-sizing:border-box;
  display:grid;
  gap:9px;
  padding:11px 14px;
  border:1px solid rgba(244,236,255,.92);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(148,76,255,.98), rgba(109,43,222,.98));
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  text-align:center;
  font-weight:800;
}
.club-sitout-notice[hidden] { display:none !important; }
.club-sitout-continue-button {
  justify-self:center;
  min-width:120px;
  background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important;
  border-color:#3e9142 !important;
  color:#fff !important;
}
.club-sitout-continue-button[hidden] { display:none !important; }
.game-end-vote-row.vote-inactive .game-end-vote-state { color:#9a9a9a !important; opacity:.8; }
.game-end-vote-row.vote-inactive .game-end-vote-name { color:var(--muted,#929994); }

/* V2.0.233 – Hochkant: Clubkopf zweizeilig: Name/Zusehen/Bearbeiten, darunter Statistik/Kalender/Status/Admin. */
@media (max-width:520px) and (orientation:portrait) {
  .account-spielclub-head {
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    row-gap:7px !important;
  }
  .account-spielclub-title-block {
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }
  .account-spielclub-head-tools {
    grid-column:1 !important;
    grid-row:2 !important;
    justify-content:flex-start !important;
  }
  .account-spielclub-head-status {
    grid-column:2 !important;
    grid-row:2 !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
  }
}

/* V2.0.233 – Hand-Symbol in der Spielanleitung wie die Zuschauer-Markierung. */
.guide-hand-icon {
  display: inline-block;
  margin: 0 .12em;
  vertical-align: -0.08em;
  line-height: 1;
  font-size: 1.05em;
}

/* Match84 V2.0.233 – Bedienungsanleitung kompakt und optisch vereinheitlicht. */
.rules-content {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 22px !important;
}
.rules-column {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.rules-column > h3 {
  margin: 0 0 14px !important;
  font-size: 1.28rem;
  line-height: 1.15;
}
.guide-technical-section {
  font-size: 1rem;
}
.guide-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 18px;
}
.guide-mode-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.14);
}
.guide-mode-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.09);
  font-size: 1.45rem;
}
.guide-mode-card h4,
.guide-compact-info h4 {
  margin: 0 0 5px;
  font-size: 1.02rem;
}
.guide-mode-card p,
.guide-compact-info p {
  margin: 0;
  line-height: 1.38;
}
.guide-control-list-short {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
}
.guide-control-list-short .guide-control-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.guide-compact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.guide-compact-info {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.guide-compact-info .guide-install-app-button {
  margin-top: 10px;
}
@media (max-width: 760px) {
  .rules-column { padding: 15px 14px; }
  .rules-column > h3 { font-size: 1.2rem; }
  .guide-mode-grid,
  .guide-control-list-short,
  .guide-compact-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-mode-card { grid-template-columns: 42px minmax(0, 1fr); }
}

/* Match84 V2.0.233 – Abstimmung: „Aussetzen“ neutral wie „Abwesend“ statt .secondary-rot. */
#sit-out-after-game-button {
  background: linear-gradient(180deg,#ffffff 0%,#ececec 100%) !important;
  border: 1px solid #b8b8b8 !important;
  color: #222 !important;
  box-shadow: none !important;
}
#sit-out-after-game-button:hover:not(:disabled):not(.vote-selected) {
  background: linear-gradient(180deg,#ffffff 0%,#e2e2e2 100%) !important;
  border-color: #a8a8a8 !important;
  color: #111 !important;
  transform: translateY(-1px);
}
#sit-out-after-game-button:active:not(:disabled),
#sit-out-after-game-button.vote-selected {
  background: linear-gradient(180deg,#e7e7e7 0%,#ffffff 100%) !important;
  border-color: #9d9d9d !important;
  color: #222 !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.16) !important;
  transform: translateY(1px);
}

/* Match84 V2.0.233 – Mobile Gegenspieler-Tabs: klare 3-Zeilen-Struktur.
   Desktop bleibt unverändert. */
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto auto auto !important;
  column-gap:6px !important;
  row-gap:4px !important;
  align-items:center !important;
  min-width:0 !important;
  padding:5px 7px !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top {
  display:contents !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:.72rem !important;
  line-height:1.15 !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name strong {
  flex:0 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-account-avatar {
  flex:0 0 auto !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-host-label {
  flex:0 0 auto !important;
  font-size:.62rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  overflow:hidden !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
  grid-column:2 !important;
  grid-row:2 !important;
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 !important;
  font-size:.68rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button,
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
  grid-row:3 !important;
  margin:0 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  padding:3px 7px !important;
  font-size:.62rem !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button {
  grid-column:1 !important;
  justify-self:start !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
  grid-column:2 !important;
  justify-self:end !important;
}
html.app-mobile-mode body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .host-transfer-icon {
  width:10px !important;
  height:10px !important;
  flex:0 0 auto !important;
}

/* Hochkant: etwas mehr Raum für Namen und Bedienelemente. */
@media (orientation:portrait) {
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    row-gap:4px !important;
    padding:5px 7px !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
    font-size:.74rem !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-label {
    font-size:.64rem !important;
  }
}

/* Querformat: gleiche 3 Zeilen, kompakter damit Score und Buttons im Rahmen bleiben. */
@media (orientation:landscape) {
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    row-gap:2px !important;
    column-gap:4px !important;
    padding:3px 5px !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
    font-size:.66rem !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-label,
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    font-size:.58rem !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button,
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    padding:2px 5px !important;
    font-size:.56rem !important;
  }
}


/* Match84 V2.0.233 – Mobile Gegner-Tabs: echte 3-Zeilen-Struktur.
   Dieser Block ersetzt die fehlerhaft als Text mit \n gespeicherten Regeln aus 2.0.233.
   Desktop bleibt unverändert. */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top {
    display: contents !important;
  }
  /* Zeile 1: Profilbild + Name + Host-Rolle */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name strong {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-label {
    flex: 0 0 auto !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  /* Zeile 2: Tropfen moeglichst breit + Score rechts */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
    width: 100% !important;
    max-width: 24px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: .72 !important;
    justify-self: stretch !important;
    font-size: .58rem !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: max-content !important;
    font-size: .70rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  /* Zeile 3: Host links, Aussetzen rechts */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button,
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 3px 8px !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  /* Zeile 4: Live-Wuerfel + Trennlinie ueber volle Tabbreite */
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 6px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(230,238,233,.24) !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-dice-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    place-items: center !important;
  }
  html.app-mobile-mode.app-portrait body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-die {
    width: min(92%, 43px) !important;
    max-width: 43px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    padding: 3px !important;
  }
}

@media (orientation: landscape) {
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 6px !important;
    row-gap: 3px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top { display: contents !important; }
  /* Zeile 1: Profilbild/Name/Host + Score rechts */
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: .70rem !important;
    line-height: 1.1 !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name strong {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-label {
    flex: 0 0 auto !important;
    font-size: .60rem !important;
    white-space: nowrap !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: max-content !important;
    font-size: .64rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  /* Zeile 2: 12 Tropfen gleichmaessig ueber die volle Breite */
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: .72 !important;
    justify-self: stretch !important;
    font-size: .58rem !important;
  }
  /* Zeile 3: Host links, Aussetzen rechts */
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button,
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 2px 6px !important;
    font-size: .60rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
  /* Zeile 4: Wuerfel wieder gross und Trennlinie ueber volle Breite */
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 5px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(230,238,233,.24) !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-dice-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    place-items: center !important;
  }
  html.app-mobile-mode.app-landscape body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-die {
    width: min(92%, 40px) !important;
    max-width: 40px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    padding: 3px !important;
  }
}


/* Match84 V2.0.233 – Mobile Gegner-Tabs: finale Geometrie ohne Sonderfall fuer normale Tabs.
   Der historische :not(:has(.opponent-tab-dice))-Selektor hatte hoehere Spezifitaet
   und drueckte NUR Tabs ohne Live-Wuerfel zurueck in die alte Ein-Zeilen-Struktur. */
@media (orientation: portrait) {
  html.app-mobile-mode.app-portrait[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top {
    display: contents !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: .78rem !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name strong {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Zeile 2 gilt ausdruecklich auch fuer Tabs OHNE Live-Wuerfel. */
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab .opponent-progress,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:not(:has(.opponent-tab-dice.opponent-dice-live)) .opponent-progress {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    place-items: center stretch !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress:has(.opponent-away-label) {
    display: block !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: stretch !important;
    font-size: .60rem !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: max-content !important;
    font-size: .70rem !important;
    white-space: nowrap !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button {
    grid-column: 1 !important; grid-row: 3 !important; justify-self: start !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    grid-column: 2 !important; grid-row: 3 !important; justify-self: end !important;
  }
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
    grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100% !important;
    margin: 3px 0 0 !important; padding: 6px 0 0 !important;
    border: 0 !important; border-top: 1px solid rgba(230,238,233,.24) !important;
  }
}

@media (orientation: landscape) {
  /* Tropfen nicht mehr schmal/tall: alle 12 teilen sich die volle Zeile gleichmaessig. */
  html.app-mobile-mode[data-app-orientation="landscape"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
  html.app-mobile-mode[data-app-orientation="landscape"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-progress-bead {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: stretch !important;
    font-size: .62rem !important;
  }
  /* Live-Wuerfel und Trennlinie nutzen die komplette vierte Zeile. */
  html.app-mobile-mode[data-app-orientation="landscape"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 0 !important;
    padding: 6px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(230,238,233,.28) !important;
  }
  html.app-mobile-mode[data-app-orientation="landscape"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-dice-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    place-items: center !important;
  }
  html.app-mobile-mode[data-app-orientation="landscape"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice .opponent-die {
    width: 100% !important;
    max-width: 48px !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 3px !important;
  }
}


/* Match84 V2.0.233 – Portrait Host-Tabs: gleiche obere Zeilen wie Nicht-Host.
   Host-/Aussetzen-Buttons bilden nur eine zusätzliche dritte Zeile und beeinflussen
   weder Tropfenbreite noch Score-Spalte. */
@media (orientation: portrait) {
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto auto auto !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-name {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab .opponent-progress,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:not(:has(.opponent-tab-dice.opponent-dice-live)) .opponent-progress {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 2px !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    min-width: max-content !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-transfer-button,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .spectator-promote-button {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-sitout-button,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .host-remove-player-button {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-dice.opponent-dice-live {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}


/* Match84 V2.0.233 – Portrait: Host-Aktionen duerfen die Tropfenzeile nicht verengen.
   Der Action-Container ist ausserhalb der mobilen Darstellung layout-neutral; im
   Hochkantmodus bildet er ausschliesslich eine eigene volle dritte Zeile. */
.opponent-host-actions {
  display: contents;
}

@media (orientation: portrait) {
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab-top > .opponent-host-actions {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-actions > .host-transfer-button,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-actions > .spectator-promote-button {
    margin-right: auto !important;
    justify-self: auto !important;
  }

  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-actions > .host-sitout-button,
  html.app-mobile-mode[data-app-orientation="portrait"] body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-host-actions > .host-remove-player-button {
    margin-left: auto !important;
    justify-self: auto !important;
  }
}

/* Match84 V2.0.270 – Mobile Gegner-Tabs: Status bei abwesenden Spielern
   einheitlich links unter dem Spielernamen; Entfernen-X bleibt rechts.
   Host-/Aussetzen-Elemente und normale aktive Tabs bleiben unveraendert. */
@media (orientation: portrait), (orientation: landscape) {
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 7px !important;
    row-gap: 2px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 7px !important;
    position: relative !important;
  }

  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive > .opponent-tab-top {
    display: contents !important;
  }

  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive .opponent-tab-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive .opponent-tab-name strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive > .opponent-progress {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    text-align: left !important;
    z-index: auto !important;
  }

  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive > .opponent-progress > .opponent-away-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
  }

  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive .opponent-host-actions {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive .opponent-host-actions > .host-remove-player-button {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
    justify-self: auto !important;
    margin: 0 !important;
  }

  html.app-mobile-mode body.in-game:not(.real-game-mode)
  #game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.round-inactive > .opponent-tab-dice.opponent-dice-live {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }
}

/* Match84 V2.0.233 – Spielclub-Admin für Nichtadmins direkt hinter dem Admin-Namen. */
.account-member-admin-badge {
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#6f3fc4;
  color:#fff !important;
  font-size:.62rem !important;
  line-height:1.1;
  font-weight:800;
  white-space:nowrap;
  flex:0 0 auto;
}

/* Match84 V2.0.233 – Mitgliedersuche nutzt das bestehende Freunde-einladen-Popup. */
.account-friend-search-row {
  grid-template-columns:auto minmax(0,1fr) !important;
}
.account-friend-search-row .account-friend-picker-name {
  justify-self:start;
}

/* Match84 V2.0.233 – Desktop Freunde: Mitgliedersuche und Freundescode verwenden
   gleich breite Aktionsbuttons. Mobile bleibt mit der bestehenden Einspaltenregel unverändert. */
@media (min-width:681px) {
  #account-modal .account-member-search .account-inline-form,
  #account-modal .account-friend-add .account-inline-form {
    grid-template-columns:minmax(0,1fr) 104px;
  }
  #account-modal .account-member-search .account-inline-form > button,
  #account-modal .account-friend-add .account-inline-form > button {
    width:104px;
    min-width:104px;
    box-sizing:border-box;
  }
}


/* Match84 V2.0.233 – Mobile Clubtabs verwenden fuer getrennte Spieler exakt
   dieselbe kompakte Ein-Zeilen-Geometrie wie andere nicht verfuegbare Spieler.
   Die Geometrie selbst bleibt unveraendert; der Client setzt round-inactive nun
   auch bei connected=false, damit "Spieler weg" nicht in der Progress-Spalte landet. */

/* Match84 V2.0.233 – persistente Club-Beitrittsanfragen und Bestätigungsdialoge. */
.account-spielclub-pending-joins {
  display:grid;
  gap:8px;
  margin:10px 0 4px;
}
.account-spielclub-pending-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(123,63,190,.35);
  border-radius:10px;
  background:rgba(123,63,190,.07);
}
.account-spielclub-pending-row > span { min-width:0; }
.account-spielclub-pending-row button { flex:0 0 auto; }
.account-confirm-actions .account-confirm-ok {
  background:#2f9e44 !important;
  color:#fff !important;
}
.account-confirm-actions .account-confirm-cancel {
  background:#c92a2a !important;
  color:#fff !important;
}


/* Match84 V2.0.233 – Abbrechen in neuen Club-Bestaetigungsdialogen sicher rot. */
body > .modal-overlay.account-notification-backdrop .account-confirm-actions button.account-confirm-cancel,
body > .modal-overlay.account-notification-backdrop button[data-account-confirm-cancel] {
  background:linear-gradient(180deg,#d96862 0%,#c84a4a 100%) !important;
  border-color:#a43a36 !important;
  color:#fff !important;
  box-shadow:0 3px 0 #8d2e2e,0 5px 9px rgba(0,0,0,.14) !important;
}
body > .modal-overlay.account-notification-backdrop .account-confirm-actions button.account-confirm-cancel:hover:not(:disabled),
body > .modal-overlay.account-notification-backdrop button[data-account-confirm-cancel]:hover:not(:disabled) {
  background:linear-gradient(180deg,#df746e 0%,#cf5454 100%) !important;
  border-color:#a43a36 !important;
}
body > .modal-overlay.account-notification-backdrop .account-confirm-actions button.account-confirm-cancel:active:not(:disabled),
body > .modal-overlay.account-notification-backdrop button[data-account-confirm-cancel]:active:not(:disabled) {
  transform:translateY(2px) !important;
  box-shadow:0 1px 0 #8d2e2e,0 2px 4px rgba(0,0,0,.12) !important;
}

/* Match84 V2.0.233 – Sortierbuttons: Kopfzeilen und Abstaende korrigiert. */
.account-list-heading {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:10px !important;
  width:100% !important;
  margin:0 0 10px !important;
}
.account-list-heading h3 {
  margin:0 !important;
  min-width:0 !important;
  grid-column:1 !important;
}
.account-list-heading .account-sort-button {
  grid-column:2 !important;
  justify-self:end !important;
  margin:0 !important;
}
.account-list-sortbar {
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  width:100% !important;
  min-height:30px !important;
  margin:12px 0 7px !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
#account-modal .account-sort-button,
.list-sort-button {
  width:54px !important;
  min-width:54px !important;
  height:29px !important;
  min-height:29px !important;
  padding:2px 7px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9px !important;
  font-size:.72rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.02em;
  white-space:nowrap;
  background:var(--surface-soft) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
  transform:none !important;
}
#account-modal .account-sort-button:hover:not(:disabled),
.list-sort-button:hover:not(:disabled) {
  background:var(--surface) !important;
  border-color:#8b63cb !important;
  color:var(--ink) !important;
  transform:none !important;
}
.lobby-heading .lobby-sort-button {
  margin:0 0 0 auto !important;
  flex:0 0 auto !important;
}
@media (max-width:680px) {
  #account-modal .account-sort-button,
  .list-sort-button {
    width:50px !important;
    min-width:50px !important;
    height:27px !important;
    min-height:27px !important;
    padding:2px 5px !important;
    font-size:.68rem !important;
  }
  .account-list-heading {
    grid-template-columns:minmax(0,1fr) 50px !important;
  }
  .account-list-sortbar {
    margin-top:12px !important;
    margin-right:0 !important;
  }
}

/* Match84 V2.0.233 – Profilkopf mobil hochkant: Hilfe direkt hinter der letzten Titelzeile. */
@media (max-width:680px) and (orientation:portrait) {
  .account-dialog-head > div:first-child { min-width:0; width:auto; max-width:calc(100% - 48px); }
  .account-title-row {
    display:inline-flex !important;
    width:auto !important;
    max-width:100%;
    align-items:flex-end !important;
    justify-content:flex-start;
    gap:8px;
  }
  .account-title-row h2 {
    flex:0 0 auto !important;
    width:min-content !important;
    min-width:min-content !important;
    max-width:none !important;
    margin-right:0 !important;
  }
  .account-title-row .account-help-button {
    flex:0 0 26px;
    margin:0 0 2px 0 !important;
  }
}

/* V2.0.237 – optionale Rundenregel Restwürfel mitnehmen */
.round-rule-menu-button.is-active{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);font-weight:700}
.round-rule-menu-button.is-active::before{content:'✓ ';font-weight:900}
.round-rule-menu-button:disabled{opacity:.48;cursor:not-allowed}
.guide-round-rule{display:flex;align-items:center;gap:12px;margin:12px 0 16px;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:12px}
.guide-rule-toggle{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:8px 12px;border-radius:9px;background:linear-gradient(#39a65a,#23853f);color:#fff;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 5px rgba(0,0,0,.25)}
@media(max-width:600px){.guide-round-rule{align-items:flex-start;flex-direction:column}.guide-rule-toggle{white-space:normal}}


/* Match84 V2.0.257 – Admin-Reset direkt in der Clubspielliste. */
.account-spielclub-reset-button {
  border-color:#c87918 !important;
  background:linear-gradient(#e99a32,#bd6c12) !important;
  color:#fff !important;
  font-weight:800;
}
.account-spielclub-reset-button:hover:not(:disabled) {
  background:linear-gradient(#f0a948,#ca7619) !important;
}
.account-spielclub-head-status .account-spielclub-reset-button {
  min-height:30px;
  padding:5px 9px;
}
@media (orientation: portrait) and (max-width:520px) {
  .account-spielclub-head-status .account-spielclub-reset-button {
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px;
    min-height:32px;
    padding:0 !important;
    display:grid;
    place-items:center;
  }
  .account-spielclub-head-status .account-spielclub-reset-button .account-spielclub-action-text { display:none; }
  .account-spielclub-head-status .account-spielclub-reset-button .account-spielclub-action-icon { display:block; }
}

/* V2.0.264: Lobby wieder spieltypisch kompakt.
   Oben nur Logo, kleine Version und der urspruengliche Lobby-Hinweis. */
.brand-block h1 {
  flex-wrap: nowrap;
}
.brand-block h1 .app-version {
  margin-left: 2px;
  font-size: .68rem;
  line-height: 1;
  align-self: center;
  white-space: nowrap;
}

.lobby-about {
  max-width: 760px;
  margin: 22px auto 8px;
  padding: 0 12px;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
.lobby-about h2 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
}
.lobby-about p { margin: 0; }

@media (max-width: 760px) {
  .brand-block { margin-bottom: 12px; }
  .brand-block h1 { margin-bottom: 5px; gap: 3px; }
  .brand-block-logo { max-width: min(78vw, 420px); }
  .brand-block h1 .app-version {
    font-size: .60rem;
    margin-left: 2px;
  }
  .lobby-about {
    margin-top: 18px;
    font-size: .72rem;
  }
}

/* Match84 V2.1.1 – Brettspiel-Menüs vereinheitlichen ------------------- */
#real-round-restart-button,
#local-board-round-restart-button {
  background: linear-gradient(180deg, #2878d0 0%, #1f62ad 100%) !important;
  border-color: #1d5798 !important;
  color: #fff !important;
}
#real-round-restart-button:hover:not(:disabled),
#local-board-round-restart-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #4c93df 0%, #2878d0 100%) !important;
}

#real-offline-delete-button,
#local-board-offline-delete-button {
  background: linear-gradient(180deg, #20aeb8 0%, #16858d 100%) !important;
  border-color: #13757c !important;
  color: #fff !important;
}
#real-offline-delete-button:hover:not(:disabled),
#local-board-offline-delete-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #43c4cd 0%, #20aeb8 100%) !important;
}

#real-sitout-button,
#local-board-sitout-button {
  background: linear-gradient(180deg, #ffffff 0%, #e8edf0 100%) !important;
  border-color: #aeb8be !important;
  color: #000 !important;
}
#real-sitout-button:hover:not(:disabled),
#local-board-sitout-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f7 100%) !important;
  border-color: #8e9aa1 !important;
}
#real-sitout-button:disabled {
  background: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%) !important;
  border-color: #c7c7c7 !important;
  color: #858585 !important;
  opacity: .78 !important;
  filter: none !important;
  cursor: not-allowed !important;
}

.local-player-history {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.12);
}
.local-player-history[hidden] { display: none !important; }
.local-player-history-title {
  margin: 0 0 7px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--muted);
}
.local-player-history-list {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.local-player-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.local-player-history-name {
  min-width: 0;
  padding: 7px 10px !important;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #edf1f3 100%) !important;
  border-color: #b7c0c5 !important;
  color: #111 !important;
}
.local-player-history-delete {
  width: 38px;
  min-width: 38px;
  padding: 7px 0 !important;
  background: linear-gradient(180deg, #e85b5b 0%, #c93434 100%) !important;
  border-color: #aa2828 !important;
  color: #fff !important;
  font-size: 1rem;
  line-height: 1.1;
}
.local-player-history-delete:hover:not(:disabled) {
  background: linear-gradient(180deg, #ef7070 0%, #d94040 100%) !important;
}

body.local-board-multiplayer-mode #spectator-lock-button {
  display: none !important;
}

.local-board-sitout-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.local-board-sitout-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #c9d0d5;
  border-radius: 8px;
  background: #f7f9fa;
  color: #000 !important;
  box-sizing: border-box;
  cursor: pointer;
}

.local-board-sitout-option > span {
  color: #000 !important;
}
.local-board-sitout-option input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 0;
  accent-color: #2878d0;
}

.local-board-sitout-option.is-next-round {
  cursor: pointer;
}
.local-board-sitout-option.is-next-round small {
  margin-left: auto;
  color: #7c858b;
  font-size: .75rem;
  font-weight: 700;
}
.local-board-sitout-status {
  display: block;
  margin-top: 1px;
  font-size: .67rem;
  line-height: 1;
  font-weight: 700;
  color: #7c858b;
}


/* V2.1.1: Im lokalen Multiplayer-Brettspiel gibt es keine Zuschauer. */
body.local-board-multiplayer-mode #spectator-lock-button {
  display: none !important;
}

/* Match84 V2.1.1 – Vibrationsschalter in den Spieloptionen ---------------- */
.vibration-button {
  position: relative;
}
.vibration-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vibration-button .vibration-off-line {
  display: none;
  stroke-width: 2.5;
}
.vibration-button.is-off .vibration-off-line,
.vibration-button:disabled .vibration-off-line {
  display: block;
}
.vibration-button:disabled {
  opacity: .48;
  cursor: default;
}


/* Match84 V2.1.1 – Profilfenster mobil: Titel sauber untereinander,
   Pinch-Zoom nur im Profil unterbinden und bei Drehung an den sichtbaren
   Browser-Viewport anpassen. Das restliche Spiel bleibt unverändert. */
body.account-modal-open #account-modal,
body.account-lobby-profile-open #account-modal,
body.account-modal-open #account-modal .account-dialog,
body.account-lobby-profile-open #account-modal .account-dialog,
body.account-modal-open #account-modal #account-content,
body.account-lobby-profile-open #account-modal #account-content {
  touch-action: pan-x pan-y;
}

@media (max-width: 680px) {
  #account-modal .account-dialog-head > div:first-child {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  #account-modal .account-kicker {
    display:block !important;
    width:100% !important;
  }
  #account-modal .account-title-row {
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
  }

  body.account-modal-open #account-modal:not(.account-lobby-replacement) {
    padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  body.account-modal-open #account-modal:not(.account-lobby-replacement) > .account-dialog {
    width:min(calc(var(--account-visual-width, 100vw) - 16px), 920px) !important;
    height:min(calc(var(--account-visual-height, 100dvh) - 16px), 820px) !important;
    max-width:calc(var(--account-visual-width, 100vw) - 16px) !important;
    max-height:calc(var(--account-visual-height, 100dvh) - 16px) !important;
    min-height:0 !important;
  }

  body.account-lobby-profile-open #start-screen > #account-modal.account-lobby-replacement > .account-dialog {
    width:100% !important;
    max-width:100% !important;
    height:max(0px, calc(var(--account-visual-height, 100dvh) - 44px)) !important;
    max-height:max(0px, calc(var(--account-visual-height, 100dvh) - 44px)) !important;
    min-height:0 !important;
  }
}

@media (max-width:680px) and (orientation:portrait) {
  #account-modal .account-dialog-head > div:first-child {
    width:calc(100% - 48px) !important;
    max-width:calc(100% - 48px) !important;
  }
  #account-modal .account-title-row h2 {
    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 34px) !important;
    white-space:normal !important;
  }
}


/* Match84 V2.1.1 – Signalton parallel zum Vibrationshinweis ---------------- */
.sound-button {
  position: relative;
}
.sound-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound-button .sound-speaker {
  fill: currentColor;
  stroke: currentColor;
}
.sound-button .sound-off-line {
  display: none;
  fill: none;
  stroke-width: 2.5;
}
.sound-button.is-off .sound-off-line,
.sound-button:disabled .sound-off-line {
  display: block;
}
.sound-button:disabled {
  opacity: .48;
  cursor: default;
}


/* Match84 V2.1.1 – Desktop Online-Tabs: kein generischer Button-Hover-Shift.
   Die globale Buttonregel transformiert normale Buttons auf :hover. Bei den
   scrollenden Gegner-Tabs konnte Firefox dadurch eine eigene Compositing-Ebene
   mit Resten von Rahmen/Profilbild hinter dem Folgetab stehen lassen. */
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab,
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:hover:not(:disabled),
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:active:not(:disabled) {
  transform: none !important;
  overflow: hidden !important;
  will-change: auto !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease !important;
}


/* Match84 V2.1.1 – Firefox/Desktop: Gegner-Tabs sind keine schwebenden
   Standardbuttons. Im Wartezustand darf Hover weder Layout noch Compositing
   ändern; jeder Tab malt ausschließlich innerhalb seiner eigenen Fläche. */
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab {
  position: relative !important;
  contain: paint !important;
  isolation: isolate !important;
  transition: none !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:hover:not(:disabled) {
  transform: none !important;
  filter: none !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab:not(.active):hover:not(:disabled) {
  background: #1d2420 !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-tab.active:hover:not(:disabled) {
  background: var(--m84-selection-surface) !important;
}
html[data-app-device="desktop"] body.in-game:not(.real-game-mode)
#game-container.online-layout-v3 #opponent-tabs-column .opponent-account-avatar {
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}

/* V2.1.1 – Desktop/Firefox: Gegner-Tabs als vollständig isolierte Paint-Flächen.
   Verhindert, dass Avatar/Rahmen eines angeklickten Offline-Tabs in den darunterliegenden
   Tab hinein gecacht/komponiert werden. */
html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #opponent-tabs .opponent-tab {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
  transform: none !important;
  transition: background-color .12s ease, border-color .12s ease !important;
  z-index: 0 !important;
}
html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #opponent-tabs .opponent-tab.active {
  z-index: 1 !important;
}
html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #opponent-tabs .opponent-account-avatar {
  position: relative !important;
  z-index: 0 !important;
}

/* V2.1.1 – Offline/ausgesetzte Desktop-Tabs nicht als halbtransparente
   Compositing-Layer rendern. Firefox konnte beim Aktivieren eines solchen Tabs
   Avatar/Rahmenreste in den darunterliegenden Tab uebernehmen. */
html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #opponent-tabs .opponent-tab.offline,
html:not(.app-mobile-mode) body.in-game:not(.real-game-mode) #opponent-tabs .opponent-tab.round-inactive {
  opacity: 1 !important;
}


/* Match84 V2.1.1 – lokale Multiplayer-Namensauswahl */
.local-player-clear-all {
  width: 100%;
  margin-top: 8px;
}
.local-player-name-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.local-player-name-input-row input {
  min-width: 0;
  width: 100%;
}
.local-player-name-field-delete {
  width: 38px;
  min-width: 38px;
  padding: 7px 0 !important;
  background: linear-gradient(180deg, #e85b5b 0%, #c93434 100%) !important;
  border-color: #aa2828 !important;
  color: #fff !important;
  font-size: 1rem;
  line-height: 1.1;
}
.local-player-name-field-delete:hover:not(:disabled) {
  background: linear-gradient(180deg, #ef7070 0%, #d94040 100%) !important;
}

/* V2.1.1 – Sprachwahl und echte Rundenpause */
.language-button{gap:0;min-width:48px;padding-inline:0;justify-content:center!important;text-align:center}
.language-button .language-flag{display:block;width:100%;font-size:1.15rem;line-height:1;text-align:center}
.language-button .language-code{font-size:.65rem;font-weight:900;letter-spacing:.03em}
.game-pause-overlay{position:fixed;z-index:1400;left:0;right:0;top:var(--game-header-height,64px);bottom:0;display:grid;place-items:center;padding:18px;background:transparent;backdrop-filter:none;pointer-events:none}
.game-pause-overlay[hidden]{display:none!important}
.game-pause-card{min-width:min(340px,calc(100vw - 32px));display:grid;pointer-events:auto;justify-items:center;gap:10px;padding:9px 14px;border:1px solid rgba(244,236,255,.92);border-radius:10px;background:linear-gradient(180deg,rgba(148,76,255,.98),rgba(109,43,222,.98));box-shadow:0 8px 24px rgba(0,0,0,.28);color:#fff;text-align:center;font-weight:800}
.game-pause-title{font-size:1.15rem}
.game-pause-all-ready{padding:7px 11px;border:1px solid rgba(255,255,255,.5);border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font-weight:900}
.game-pause-all-ready[hidden]{display:none!important}
.game-pause-ready,.game-pause-resume{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:118px;margin:0;padding:7px 14px;border:1px solid #3e9142;border-radius:8px;background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%)!important;color:#fff!important;font-weight:900}
.game-pause-ready.is-active{background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%)!important;border-color:#3e9142!important;color:#fff!important;box-shadow:none}
.pause-ready-hand{margin-left:4px;color:#e0b61f;filter:saturate(1.2)}
body.host-paused-game #game-area{pointer-events:none}
body.host-paused-game #game-header{pointer-events:auto}
@media (max-width:760px){.language-button .language-code{display:none}.language-button{min-width:42px}}

/* V2.1.26 – Profilreiterfarben und bedienbares Menü während Host-Pause */
.account-tabs button[data-tab="profile"]:not(:disabled),
.account-tabs button[data-tab="profile"].active {
  background:linear-gradient(180deg,#5bc660 0%,#4caf50 100%) !important;
  border-color:#3e9142 !important; color:#fff !important;
}
.account-tabs button[data-tab="friends"]:not(:disabled),
.account-tabs button[data-tab="friends"].active {
  background:linear-gradient(180deg,#e47fbd 0%,#d84fa7 100%) !important;
  border-color:#b83b8a !important; color:#fff !important;
}
.account-tabs button[data-tab="spielclubs"]:not(:disabled),
.account-tabs button[data-tab="spielclubs"].active {
  background:linear-gradient(180deg,#8f61d8 0%,#7342c5 100%) !important;
  border-color:#6034a8 !important; color:#fff !important;
}
.account-tabs button.active { opacity:.86 !important; filter:saturate(.72) !important; }
body.host-paused-game .game-header { position:relative; z-index:1505 !important; pointer-events:auto !important; }
body.host-paused-game .game-header .header-actions { position:relative; z-index:1506 !important; pointer-events:auto !important; }
body.host-paused-game .game-header .mobile-menu-button { position:relative; z-index:1507 !important; pointer-events:auto !important; }


/* V2.1.26 – Pause-Hinweis darf das mobile Spielmenü nicht blockieren. */
html.app-mobile-mode[data-app-orientation="portrait"] body.pause-overlay-host .game-pause-overlay {
  display:none !important;
}
html.app-mobile-mode.app-landscape .game-pause-overlay,
html.app-mobile-mode[data-app-orientation="landscape"] .game-pause-overlay {
  place-items:center start !important;
  padding-left:max(10px, env(safe-area-inset-left)) !important;
  padding-right:calc(min(285px, 42vw) + max(10px, env(safe-area-inset-right))) !important;
}
html.app-mobile-mode.app-landscape .game-pause-card,
html.app-mobile-mode[data-app-orientation="landscape"] .game-pause-card {
  min-width:min(310px, calc(58vw - 24px)) !important;
  max-width:min(340px, calc(58vw - 24px)) !important;
}
/* Im geöffneten Hamburger-Menü bleibt die Utility-Zeile vollständig klickbar. */
html.app-mobile-mode body.mobile-menu-active #game-pause-overlay {
  pointer-events:none !important;
}
html.app-mobile-mode body.mobile-menu-active #game-pause-overlay .game-pause-card {
  pointer-events:none !important;
}
/* Flagge im Sprachbutton unabhängig von der Menübreite exakt zentrieren. */
#language-button {
  justify-content:center !important;
  align-items:center !important;
}
#language-button .language-flag {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  margin:0 !important;
}

/* V2.1.26 – Profilreiter: passende Hoverfarben je Reiter */
.account-tabs button[data-tab="profile"]:not(.active):not(:disabled):hover {
  background:linear-gradient(180deg,#6bd16f 0%,#55bb5a 100%) !important;
  border-color:#3e9142 !important;
}
.account-tabs button[data-tab="friends"]:not(.active):not(:disabled):hover {
  background:linear-gradient(180deg,#eb93c9 0%,#df62b3 100%) !important;
  border-color:#b83b8a !important;
}
.account-tabs button[data-tab="spielclubs"]:not(.active):not(:disabled):hover {
  background:linear-gradient(180deg,#9d72e0 0%,#8154cf 100%) !important;
  border-color:#6034a8 !important;
}


/* Match84 V2.1.26 – Lobby: Account-Hinweis und allgemeines Freunde-Einladen. */
#start-screen .lobby-account-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
#start-screen .lobby-account-context {
  line-height:1.3;
}
#start-screen .lobby-invite-button {
  width:min(100%,430px);
  padding:9px 13px;
  border-radius:14px !important;
  border:2px solid #b83b8a !important;
  box-shadow:none !important;
  text-shadow:0 1px 1px rgba(0,0,0,.22);
  background:linear-gradient(180deg,#e47fbd 0%,#d84fa7 100%) !important;
  color:#fff !important;
}
#start-screen .lobby-invite-button:hover:not(:disabled) {
  background:linear-gradient(180deg,#eb93c9 0%,#df62b3 100%) !important;
  border-color:#b83b8a !important;
}
@media (max-width:560px) {
  #start-screen .lobby-account-row {
    flex-direction:column;
    gap:7px;
  }
  #start-screen .lobby-account-context {
    text-align:center;
  }
  #start-screen .lobby-invite-button {
    width:100%;
    max-width:none;
  }
}