/* Cribbage adapter for the Baba's Game Room collection theme.
   Classic preserves the deployed board, cards, menus, and saved preferences. */

:root {
  --baba-felt: #1c6946;
  --baba-deep-felt: #10432f;
  --baba-walnut: #74401f;
  --baba-dark-walnut: #3b2115;
  --baba-paper: #f5ecd8;
  --baba-deep-paper: #e3d4b7;
  --baba-ink: #252a28;
  --baba-blue: #1d568d;
  --baba-gold: #d3aa53;
  --baba-red: #a83e3b;
  --baba-focus: #f0c96d;
}

.baba-game-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 5px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
  color: #fff;
  background: rgba(0, 0, 0, .76);
  border-bottom: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .34);
  box-sizing: border-box;
}

.baba-game-bar #menu_button {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .54);
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  box-sizing: border-box;
}

.baba-game-bar #menu_button img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.baba-game-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #fff;
  font: 700 16px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.baba-title-art {
  display: none;
  width: 54px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .32);
}

.baba-theme-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 7px;
  background: rgba(0, 0, 0, .56);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  flex: 0 0 auto;
}

.baba-theme-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .54);
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 700 12px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16);
}

.baba-theme-button:hover,
.baba-game-bar #menu_button:hover {
  background: rgba(255, 255, 255, .22);
}

.baba-theme-button:active,
.baba-game-bar #menu_button:active {
  transform: translateY(1px);
}

.baba-theme-icon {
  color: #ffd66d;
  font-size: 15px;
}

.baba-theme-button:focus-visible,
.baba-game-bar #menu_button:focus-visible,
html[data-baba-skin="game-room"] button:focus-visible,
html[data-baba-skin="game-room"] a:focus-visible,
html[data-baba-skin="game-room"] input:focus-visible {
  outline: 3px solid var(--baba-focus);
  outline-offset: 2px;
}

/* Classic + dark intentionally alters only the new collection chrome. */
html[data-baba-skin="classic"][data-baba-mode="dark"] .baba-game-bar {
  background: rgba(10, 12, 14, .92);
  border-bottom-color: #5b6167;
}

/* ---------- Game Room skin ---------- */
html[data-baba-skin="game-room"] {
  color: #fff4da;
  background-color: var(--baba-deep-felt) !important;
  background-image:
    radial-gradient(ellipse at 50% 43%, rgba(53, 138, 91, .38) 0%, transparent 52%),
    repeating-linear-gradient(32deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #237b52 0%, var(--baba-felt) 48%, var(--baba-deep-felt) 100%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

html[data-baba-skin="game-room"] .baba-game-bar {
  isolation: isolate;
  color: #fff4da;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 24%, rgba(0, 0, 0, .08)),
    linear-gradient(180deg, #84502c 0%, var(--baba-walnut) 48%, #522f1d 100%);
  border-bottom: 2px solid var(--baba-dark-walnut);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .2);
}

html[data-baba-skin="game-room"] .baba-game-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(96deg, transparent 0 19px, rgba(42, 20, 10, .28) 20px 21px, transparent 22px 38px);
}

html[data-baba-skin="game-room"] .baba-title-art {
  display: block;
}

html[data-baba-skin="game-room"] .baba-game-identity {
  color: #fff4da;
}

html[data-baba-skin="game-room"] .baba-game-bar #menu_button,
html[data-baba-skin="game-room"] .baba-theme-button {
  border-color: #4b2919;
  background: linear-gradient(180deg, #fff6df 0%, var(--baba-deep-paper) 100%);
  color: var(--baba-ink);
  text-shadow: none;
  box-shadow: 0 2px 0 #3b2115, inset 0 1px #fff;
}

html[data-baba-skin="game-room"] .baba-theme-controls {
  border-color: rgba(44, 23, 12, .72);
  background: rgba(54, 28, 14, .46);
  box-shadow: inset 0 1px rgba(255, 255, 255, .11);
}

html[data-baba-skin="game-room"] .baba-game-bar #menu_button:hover,
html[data-baba-skin="game-room"] .baba-theme-button:hover {
  background: linear-gradient(180deg, #fffaf0 0%, #eadcbd 100%);
}

html[data-baba-skin="game-room"] .baba-theme-icon {
  color: var(--baba-blue);
}

html[data-baba-skin="game-room"] .t1,
html[data-baba-skin="game-room"] .t2 {
  color: #fff4da;
  text-shadow: 4px 3px rgba(46, 26, 15, .58);
}

html[data-baba-skin="game-room"] .t2 {
  color: #ebc66f;
  letter-spacing: .08em;
}

html[data-baba-skin="game-room"] .menu_view,
html[data-baba-skin="game-room"] #HandScoreView,
html[data-baba-skin="game-room"] #ManualCount,
html[data-baba-skin="game-room"] #SuboptimalWarning,
html[data-baba-skin="game-room"] #GameOverView,
html[data-baba-skin="game-room"] #PeggingCountCard,
html[data-baba-skin="game-room"] #computer_says_go_card,
html[data-baba-skin="game-room"] #player_says_go_card,
html[data-baba-skin="game-room"] #no_hint_view_card,
html[data-baba-skin="game-room"] #allcounted {
  color: var(--baba-ink);
  background:
    repeating-linear-gradient(0deg, rgba(83, 60, 28, .018) 0 1px, transparent 1px 4px),
    var(--baba-paper);
  border-color: var(--baba-dark-walnut);
  box-shadow: 14px 14px 0 rgba(42, 24, 13, .44), inset 0 0 0 1px rgba(255, 255, 255, .46);
}

html[data-baba-skin="game-room"] .menu_card_title,
html[data-baba-skin="game-room"] #discard_analyzer_title,
html[data-baba-skin="game-room"] #HandScoreTitle {
  color: var(--baba-walnut);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

html[data-baba-skin="game-room"] body button:not(.baba-theme-button):not(#menu_button):not(#menu_statistics_reset_button) {
  border-color: #5b3822 !important;
  background: linear-gradient(180deg, #fff8e7 0%, var(--baba-deep-paper) 100%) !important;
  color: var(--baba-ink) !important;
  text-shadow: none !important;
  box-shadow: 0 3px 0 #4b2b1b, inset 0 1px #fff;
}

html[data-baba-skin="game-room"] body button:not(.baba-theme-button):not(#menu_button):not(#menu_statistics_reset_button):hover {
  background: linear-gradient(180deg, #fffdf6 0%, #eadcbd 100%) !important;
}

html[data-baba-skin="game-room"] body .close_button {
  border-color: #4b2919 !important;
  background: linear-gradient(180deg, #b14e48 0%, var(--baba-red) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 0 #632522, inset 0 1px rgba(255, 255, 255, .3);
}

html[data-baba-skin="game-room"] #menu_statistics_reset_button {
  border-color: #672925;
  background: var(--baba-red);
  color: #fff;
  box-shadow: 0 3px 0 #632522, inset 0 1px rgba(255, 255, 255, .25);
}

html[data-baba-skin="game-room"] a,
html[data-baba-skin="game-room"] #menu_start_a_game_difficulties_link {
  color: var(--baba-blue);
}

html[data-baba-skin="game-room"] .cardFront,
html[data-baba-skin="game-room"] .cardBack {
  border: 1px solid #c6b58e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

html[data-baba-skin="game-room"] .cardShadow {
  background: rgba(31, 19, 10, .48);
}

html[data-baba-skin="game-room"] #scoreboard {
  filter: drop-shadow(0 5px 8px rgba(31, 18, 8, .34));
}

html[data-baba-skin="game-room"] #crib_region {
  color: #fff4da;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .42));
}

html[data-baba-skin="game-room"] .crib_region_border {
  background: #f5ecd8;
}

/* Game Room dark keeps cards and the physical board bright, while dimming
   felt, walnut chrome, and paper UI surfaces. */
html[data-baba-skin="game-room"][data-baba-mode="dark"] {
  --baba-paper: #302d28;
  --baba-deep-paper: #24221e;
  --baba-ink: #f4ead5;
  background-color: #092d21 !important;
  background-image:
    radial-gradient(ellipse at 50% 43%, rgba(39, 112, 75, .28) 0%, transparent 52%),
    repeating-linear-gradient(32deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #15563a 0%, #124a34 48%, #092d21 100%) !important;
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .baba-game-bar {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .04), transparent 24%, rgba(0, 0, 0, .14)),
    linear-gradient(180deg, #57351f 0%, #432719 55%, #2b1911 100%);
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .baba-game-bar #menu_button,
html[data-baba-skin="game-room"][data-baba-mode="dark"] .baba-theme-button,
html[data-baba-skin="game-room"][data-baba-mode="dark"] body button:not(.baba-theme-button):not(#menu_button):not(#menu_statistics_reset_button) {
  color: #f4ead5 !important;
  background: linear-gradient(180deg, #4a453c 0%, #302d28 100%) !important;
  border-color: #987146 !important;
  box-shadow: 0 3px 0 #1b110b, inset 0 1px rgba(255, 255, 255, .14);
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .menu_card_title,
html[data-baba-skin="game-room"][data-baba-mode="dark"] #discard_analyzer_title,
html[data-baba-skin="game-room"][data-baba-mode="dark"] #HandScoreTitle {
  color: #e3bf6a;
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] a,
html[data-baba-skin="game-room"][data-baba-mode="dark"] #menu_start_a_game_difficulties_link {
  color: #93bce5;
}

@media (max-width: 480px) {
  .baba-game-bar {
    gap: 5px;
    padding-inline: 5px;
  }

  .baba-game-identity {
    font-size: 14px;
  }

  .baba-title-art {
    display: none !important;
  }

  .baba-theme-controls {
    gap: 4px;
  }

  .baba-theme-button {
    gap: 4px;
    padding-inline: 7px;
  }

  .t1 { font-size: 40pt; }
  .t2 { font-size: 22pt; }

  .menu_view {
    transform: translate(-50%, -50%) scale(.9);
  }
}

@media (max-width: 420px) {
  .menu_view {
    transform: translate(-50%, -50%) scale(.82);
  }
}

@media (max-width: 350px) {
  .baba-game-identity { font-size: 13px; }

  .t1 { font-size: 34pt; }
  .t2 { font-size: 20pt; }

  .menu_view {
    transform: translate(-50%, -50%) scale(.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .baba-theme-button,
  .baba-game-bar #menu_button,
  html[data-baba-skin="game-room"] button {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .baba-game-bar,
  .baba-theme-button,
  .baba-game-bar #menu_button,
  .menu_view,
  button {
    border: 1px solid ButtonText;
  }

  .baba-theme-button:focus-visible,
  .baba-game-bar #menu_button:focus-visible,
  button:focus-visible {
    outline-color: Highlight;
  }
}