/* Fælles ABCPLAY-design. Denne fil styrer rammen og almindelige knapper, aldrig kort eller pokerbordets geometri. */
body.abc-game {
  --abc-gold: #edcf8a;
  --abc-text: #f6f5e9;
  --abc-muted: #bfd3c6;
  --abc-panel: #ffffff08;
  --abc-line: #ffffff1c;
  --abc-radius: 20px;
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 55% 0, #225d47 0, transparent 65%), #0c2821;
  color: var(--abc-text);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  color-scheme: dark;
}
.abc-game *,
.abc-game *::before,
.abc-game *::after {
  box-sizing: border-box;
}
.abc-game [hidden],
.abc-game .hidden {
  display: none !important;
}
.abc-game main.abc-game-main {
  width: min(1160px, 100%);
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px;
  min-width: 0;
}
.abc-game .abc-game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  min-height: 38px;
}
.abc-game .abc-brand {
  display: inline-block;
  flex: none;
  margin: 0;
  padding: 0;
  color: #f7f3df;
  text-decoration: none;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -1px;
  line-height: 1.2;
}
.abc-game .abc-brand span {
  color: var(--abc-gold);
  font-size: inherit;
}
.abc-game .abc-game-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
.abc-game .abc-game-modes a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid transparent;
  color: #bfd3c6;
  background: none;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.abc-game .abc-game-modes a[aria-current] {
  background: #ffffff10;
  border-color: #ffffff10;
  color: var(--abc-gold);
}
.abc-game .abc-game-modes a:hover {
  background: #ffffff09;
}
.abc-game .abc-game-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 30px 0 24px;
}
.abc-game .abc-eyebrow {
  margin: 0 0 7px;
  color: var(--abc-gold);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
}
.abc-game .abc-game-heading {
  min-width: 0;
}
.abc-game .abc-game-intro h1 {
  margin: 0;
  color: #f6f5e9;
  font-family: Georgia, serif;
  font-size: clamp(34px, 4.5vw, 46px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.12;
}
.abc-game .abc-game-description {
  margin: 11px 0 0;
  color: var(--abc-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 620px;
}
.abc-game .abc-game-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 50%;
}
.abc-game .abc-game-tools:empty {
  display: none;
}
.abc-game .abc-game-content {
  min-width: 0;
}
.abc-game .abc-lobby-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 0;
}
.abc-game .abc-lobby-block {
  min-width: 0;
}
/* Startformularer: felter over knapper og samme bundlinje i de to Yatzy-kolonner. */
.abc-game .abc-start-lobby .abc-lobby-block {
  display: flex;
  flex-direction: column;
}
.abc-game .abc-start-lobby .abc-lobby-block .form,
.abc-game--sorteper #menu .abc-start-fields,
.abc-game--sorteper #menu .abc-start-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}
.abc-game .abc-start-lobby .form {
  margin-top: auto;
}
.abc-game .abc-start-lobby .form > button {
  grid-column: 1 / -1;
}
.abc-game .abc-start-lobby label,
.abc-game--sorteper #menu label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.abc-game .abc-start-lobby :is(input, select),
.abc-game--sorteper #menu :is(input, select) {
  width: 100%;
  max-width: none;
  min-height: 48px;
  margin: 0;
}
.abc-game .abc-start-lobby .form > button,
.abc-game--sorteper #menu .abc-button {
  width: 100%;
  min-height: 48px;
}
.abc-game--sorteper #menu {
  max-width: 760px;
  margin: 0 auto;
}
.abc-game--sorteper #menu .options {
  gap: 20px;
  margin-top: 0;
}
.abc-game--sorteper #menu .abc-start-description {
  margin: 0;
  color: var(--abc-muted);
  font-size: 14px;
  line-height: 1.65;
}
@media (max-width: 600px) {
  .abc-game--sorteper #menu .abc-start-fields,
  .abc-game--sorteper #menu .abc-start-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}
@media (max-width: 380px) {
  .abc-game .abc-start-lobby .abc-lobby-block .form {
    grid-template-columns: minmax(0, 1fr);
  }
}
.abc-game .abc-lobby-block > h2 {
  margin: 0 0 14px;
  font-size: 22px;
}
.abc-game .abc-lobby-block > p {
  color: #bfd3c6;
  font-size: 14px;
  line-height: 1.6;
}
.abc-game .abc-lobby-block .form,
.abc-game .abc-lobby-block .lobby-row {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.abc-game--yatzy[data-mode="solo"] #lobby {
  grid-template-columns: 1fr;
}
.abc-game--uno #app:has(#create) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.abc-game--uno #app:has(#create) > .panel {
  margin-top: 0;
}
.abc-game .abc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  height: auto;
  width: auto;
  max-width: 100%;
  border: 1px solid #ffffff2b;
  border-radius: 12px;
  padding: 11px 18px;
  margin: 0;
  background: #38644f;
  color: #fff5df;
  box-shadow: none;
  text-shadow: none;
  font:
    750 14px/1.25 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
  filter: none;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.abc-game .abc-button[data-abc-role="primary"] {
  background: var(--abc-gold);
  border-color: var(--abc-gold);
  color: #17372b;
}
.abc-game .abc-button[data-abc-role="quiet"] {
  background: #ffffff08;
  border-color: #ffffff20;
  color: #decda5;
}
.abc-game .abc-button[data-abc-role="danger"] {
  background: #a6434224;
  border-color: #e4847555;
  color: #ffd2c8;
}
.abc-game .abc-button:hover:not(:disabled) {
  background: #45745e;
  border-color: #ffffff50;
  filter: none;
  transform: none;
}
.abc-game .abc-button[data-abc-role="primary"]:hover:not(:disabled) {
  background: #ffe3a6;
  border-color: #ffe3a6;
}
.abc-game .abc-button[data-abc-role="quiet"]:hover:not(:disabled) {
  background: #ffffff14;
}
.abc-game .abc-button[data-abc-role="danger"]:hover:not(:disabled) {
  background: #a6434240;
}
.abc-game .abc-button:disabled {
  opacity: 0.42;
  cursor: default;
}
.abc-game :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid #f6d996;
  outline-offset: 4px;
}
.abc-game :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 44px;
  max-width: 100%;
  min-width: 0;
  padding: 11px 12px;
  margin: 6px 0;
  border: 1px solid #ffffff30;
  background: #12392e;
  color: #fff6e6;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
}
.abc-game input[type="checkbox"],
.abc-game input[type="radio"] {
  accent-color: var(--abc-gold);
}
.abc-game label {
  color: #ccded1;
  font-size: 13px;
  line-height: 1.5;
}
.abc-game label input,
.abc-game label select {
  display: block;
}
.abc-game label input[type="checkbox"],
.abc-game label input[type="radio"] {
  display: inline-block;
}
.abc-game :is(.panel, .lobby-panel) {
  background: var(--abc-panel);
  border: 1px solid var(--abc-line);
  border-radius: var(--abc-radius);
  padding: 22px;
  box-shadow: none;
}
.abc-game .panel {
  margin: 14px 0;
}
.abc-game :is(.panel, .lobby-panel) > :is(h2, h3):first-child {
  margin-top: 0;
  color: #f6f5e9;
  font-weight: 600;
}
.abc-game :is(.panel, .lobby-panel) > p {
  color: var(--abc-muted);
  line-height: 1.65;
}
.abc-game :is(.controls, .actions, .form, .lobby-row, .choices, .mode-choices) {
  gap: 12px;
  flex-wrap: wrap;
}
.abc-game :is(.controls, .actions, .choices, .mode-choices) {
  align-items: center;
}
.abc-game :is(#status, #message, #msg):not(:empty) {
  color: #e5eddf;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  background: #ffffff08;
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.6;
}
.abc-game :is(#status, #message, #msg, #error, #setup):empty {
  display: none;
}
.abc-game #error {
  color: #ffd1c8;
  line-height: 1.6;
}
.abc-game #setup {
  margin-top: 0;
}
.abc-game :is(.room-code, #room-code) {
  color: var(--abc-gold);
}
.abc-game :is(.muted, .hint, .rules, .board-caption) {
  color: #b8cebf;
}

/* Samme kompakte spilleroversigt som Ludo. Pokerbordets sæder er undtaget. */
.abc-game:not(.abc-game--poker) :is(.players, .player-grid, .opponents) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.abc-game:not(.abc-game--poker) :is(.player, .player-box, .opponent) {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff08;
  font-size: 13px;
}
.abc-game:not(.abc-game--poker) :is(.player, .player-box, .opponent) p {
  margin: 5px 0;
  color: #bfd3c6;
  font-size: 12px;
}
.abc-game :is(.multiplayer-choice, .uno-multiplayer-option, .mode-multi) {
  display: none !important;
}
/* 31 og 7-Kabale starter nu i et panel under fælles top, så navigationen altid er synlig. */
.abc-game #overlay.abc-start-panel {
  position: static;
  inset: auto;
  display: block;
  background: none;
  padding: 0;
  margin: 0 0 22px;
  z-index: auto;
}
.abc-game #overlay.abc-start-panel[hidden] {
  display: none;
}
.abc-game .abc-start-panel > .dialog {
  width: 100%;
  max-width: none;
  text-align: left;
  background: var(--abc-panel);
  border: 1px solid var(--abc-line);
  border-radius: 20px;
  padding: 24px;
  color: var(--abc-text);
}
.abc-game.abc-awaiting-start .abc-game-content {
  display: none;
}
.abc-game :is(.abc-help-dialog, .overlay > .dialog) {
  background: #173e31;
  border: 1px solid #6b886e;
  color: #eff4e8;
  border-radius: 18px;
  box-shadow: 0 20px 65px #0008;
}
.abc-game .abc-help-dialog :is(h2, h3) {
  color: #f3dfb2;
}
.abc-game .abc-help-dialog p {
  color: #d0e1d5;
}
.abc-game .abc-help-close {
  color: #f3dfb2;
  background: #ffffff12;
}
.abc-game .abc-help-dialog .abc-help-ok {
  background: var(--abc-gold);
  color: #17372b;
}
.abc-game :is(#modal .dialog, #overlay .dialog) a {
  color: var(--abc-gold);
}
.abc-game .abc-game-content > footer {
  margin: 24px 0 0;
  color: #b8cebf;
  font-size: 12px;
  line-height: 1.7;
}
.abc-game--sorteper #menu > .mode {
  display: none;
}
.abc-game--ludo .setup {
  margin: 0 auto 20px;
  max-width: none;
}
.abc-game--ludo .game-controls {
  margin-top: 0;
}
.abc-game--ludo #leave {
  white-space: nowrap;
}
.abc-game--yatzy .abc-game-content > .panel:first-child {
  margin-top: 0;
}
@media (max-width: 800px) {
  .abc-game .abc-game-intro {
    align-items: flex-start;
  }
  .abc-game .abc-game-tools {
    max-width: 45%;
  }
  .abc-game :is(.panel, .lobby-panel) {
    padding: 18px;
  }
}
@media (max-width: 600px) {
  .abc-game .abc-lobby-layout,
  .abc-game--uno #app:has(#create) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .abc-game main.abc-game-main {
    padding: 16px 12px;
  }
  .abc-game .abc-game-header {
    gap: 12px;
  }
  .abc-game .abc-brand {
    font-size: 21px;
  }
  .abc-game .abc-game-modes {
    gap: 4px;
  }
  .abc-game .abc-game-modes a {
    padding: 8px 10px;
    font-size: 12px;
    min-height: 40px;
  }
  .abc-game .abc-game-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 24px 0 20px;
  }
  .abc-game .abc-game-intro h1 {
    font-size: 34px;
  }
  .abc-game .abc-game-description {
    font-size: 13px;
    margin-top: 8px;
  }
  .abc-game .abc-game-tools {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    gap: 8px;
  }
  .abc-game .abc-button {
    font-size: 13px;
    padding: 10px 14px;
  }
  .abc-game :is(.controls, .actions, .form, .lobby-row, .choices) {
    gap: 10px;
  }
  .abc-game .abc-start-panel > .dialog {
    padding: 20px;
  }
}
@media (max-width: 355px) {
  .abc-game .abc-game-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .abc-game .abc-game-modes {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .abc-game .abc-button {
    transition: none;
  }
}