/* Hearts adapter for the Baba's Game Room collection theme.
   The original XP-inspired presentation remains intact under Classic. */

: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;
}

/* The appearance controls are the one intentional addition to Classic. */
.titlebar {
  min-height: 52px;
  height: 52px;
  gap: 8px;
  padding: 4px 8px;
}

.title-left {
  flex: 0 0 auto;
  padding-left: 0;
}

.menubar {
  min-width: 0;
  margin-left: 6px;
}

.menu-btn {
  min-height: 44px;
  padding: 5px 9px;
}

.baba-title-art {
  display: none;
  width: 54px;
  height: 36px;
  margin: 0 2px;
  border: 1px solid rgba(255, 255, 255, .48);
  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(151, 190, 238, .62);
  border-radius: 7px;
  background: rgba(5, 32, 87, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .13);
  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, .55);
  border-radius: 5px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 700 12px/1 "Tahoma", "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .18);
}

.baba-theme-button:hover {
  background: rgba(255, 255, 255, .24);
}

.baba-theme-button:active {
  transform: translateY(1px);
}

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

.baba-theme-button:focus-visible,
.menu-btn:focus-visible,
.pass-btn:focus-visible,
.btn:focus-visible,
.player-hand .card:focus-visible {
  outline: 3px solid var(--baba-focus);
  outline-offset: 2px;
}

/* Classic + dark only changes the surrounding window chrome. */
html[data-baba-skin="classic"][data-baba-mode="dark"] body {
  background: #172f52;
}

html[data-baba-skin="classic"][data-baba-mode="dark"] .titlebar {
  background: linear-gradient(180deg, #173d77 0%, #071d45 100%);
}

html[data-baba-skin="classic"][data-baba-mode="dark"] .statusbar {
  color: #f1f3f5;
  background: #262a2e;
  border-top-color: #4b5157;
  box-shadow: inset 1px 1px 0 #151719;
}

/* ---------- Game Room skin ---------- */
html[data-baba-skin="game-room"] body {
  background:
    radial-gradient(circle at 50% -20%, rgba(214, 170, 91, .18), transparent 44%),
    var(--baba-dark-walnut);
}

html[data-baba-skin="game-room"] .titlebar {
  position: relative;
  isolation: isolate;
  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 8px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .2);
}

html[data-baba-skin="game-room"] .titlebar::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"] .title-text {
  font: 700 17px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .02em;
  color: #fff4da;
}

html[data-baba-skin="game-room"] .suit-mini.red {
  color: #f6b1a3;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}

html[data-baba-skin="game-room"] .menu-btn {
  border: 1px solid transparent;
  color: #fff4da;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}

html[data-baba-skin="game-room"] .menu-btn:hover {
  border-color: rgba(255, 244, 218, .42);
  background: rgba(38, 19, 10, .24);
}

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-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"] .window-controls {
  display: none;
}

html[data-baba-skin="game-room"] .table {
  background:
    radial-gradient(ellipse at 50% 43%, rgba(58, 145, 97, .34) 0%, transparent 49%),
    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%);
  box-shadow: inset 0 0 120px rgba(3, 31, 20, .48), inset 0 0 0 4px rgba(29, 73, 52, .65);
}

html[data-baba-skin="game-room"] .nameplate {
  color: #fff4da;
  background: rgba(35, 20, 12, .52);
  border: 1px solid rgba(227, 212, 183, .32);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 2px 3px rgba(0, 0, 0, .2);
}

html[data-baba-skin="game-room"] .nameplate.active {
  color: #38250c;
  background: #e6c46d;
  border-color: #8a641b;
  box-shadow: 0 0 0 2px rgba(245, 218, 140, .35), 0 3px 8px rgba(0, 0, 0, .28);
}

html[data-baba-skin="game-room"] .card,
html[data-baba-skin="game-room"] .card-back {
  border-color: #c8b994;
  box-shadow: 0 2px 0 rgba(51, 35, 17, .48), 0 5px 10px rgba(0, 0, 0, .2);
}

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

html[data-baba-skin="game-room"] .card-back {
  border: 3px solid #f5ecd8;
  background:
    linear-gradient(45deg, transparent 42%, rgba(245, 236, 216, .34) 43% 48%, transparent 49% 100%),
    linear-gradient(-45deg, transparent 42%, rgba(245, 236, 216, .28) 43% 48%, transparent 49% 100%),
    var(--baba-blue);
  background-size: 12px 12px;
  box-shadow: 0 2px 0 rgba(51, 35, 17, .48), 0 5px 10px rgba(0, 0, 0, .2), inset 0 0 0 2px #153f69;
}

html[data-baba-skin="game-room"] .center-msg {
  color: #fff4da;
  font-family: Georgia, "Times New Roman", serif;
}

html[data-baba-skin="game-room"] .pass-btn,
html[data-baba-skin="game-room"] .btn {
  min-height: 44px;
  border-color: #4b2919;
  background: linear-gradient(180deg, #fff8e7 0%, var(--baba-deep-paper) 100%);
  color: var(--baba-ink);
  box-shadow: 0 3px 0 #4b2b1b, inset 0 1px #fff;
}

html[data-baba-skin="game-room"] .pass-btn:hover,
html[data-baba-skin="game-room"] .btn:hover {
  background: linear-gradient(180deg, #fffdf6 0%, #eadcbd 100%);
}

html[data-baba-skin="game-room"] .statusbar {
  height: 28px;
  color: var(--baba-ink);
  background:
    repeating-linear-gradient(0deg, rgba(83, 60, 28, .018) 0 1px, transparent 1px 4px),
    var(--baba-paper);
  border-top: 2px solid #a88758;
  box-shadow: inset 0 1px #fff9eb;
}

html[data-baba-skin="game-room"] .dialog {
  color: var(--baba-ink);
  background: var(--baba-paper);
  border: 2px solid var(--baba-dark-walnut);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 10px 30px rgba(29, 15, 8, .55), inset 0 0 0 1px rgba(255, 255, 255, .42);
}

html[data-baba-skin="game-room"] .dialog-title {
  color: #fff4da;
  background: linear-gradient(180deg, #80502e, var(--baba-walnut) 58%, #4f2d1b);
}

html[data-baba-skin="game-room"] .dialog-body {
  color: var(--baba-ink);
}

html[data-baba-skin="game-room"] .dialog-buttons {
  background: var(--baba-deep-paper);
  border-top-color: #bda77e;
}

html[data-baba-skin="game-room"] .help-body h3,
html[data-baba-skin="game-room"] .score-table tr.you-row td.name-cell {
  color: var(--baba-blue);
}

html[data-baba-skin="game-room"] .score-table th {
  background: #d7c6a3;
}

html[data-baba-skin="game-room"] .score-table th,
html[data-baba-skin="game-room"] .score-table td {
  border-color: #a58e67;
}

html[data-baba-skin="game-room"] .text-input {
  color: var(--baba-ink);
  background: #fffdf6;
  border-color: #8d7450;
}

/* Game Room dark keeps cards bright while making the surrounding materials
   comfortable in low light. */
html[data-baba-skin="game-room"][data-baba-mode="dark"] body {
  --baba-paper: #302d28;
  --baba-deep-paper: #24221e;
  --baba-ink: #f4ead5;
  background: #1d110c;
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .titlebar {
  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"] .table {
  background:
    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%);
}

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

html[data-baba-skin="game-room"][data-baba-mode="dark"] .statusbar,
html[data-baba-skin="game-room"][data-baba-mode="dark"] .dialog,
html[data-baba-skin="game-room"][data-baba-mode="dark"] .dialog-buttons {
  color: #f4ead5;
  border-color: #7e5c37;
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .dialog-body {
  color: #f4ead5;
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .score-table th {
  color: #f4ead5;
  background: #484138;
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .score-table tr.leader td {
  background: #294735;
}

html[data-baba-skin="game-room"][data-baba-mode="dark"] .dialog-note {
  color: #cfc4ae;
}

@media (max-width: 860px) {
  .window-controls { display: none; }
}

@media (max-width: 720px) {
  .titlebar {
    height: auto;
    min-height: 98px;
    flex-wrap: wrap;
    align-content: center;
    gap: 3px 8px;
    padding: 4px 7px;
  }

  .menubar {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }

  .menu-btn {
    min-height: 38px;
    padding: 4px 9px;
  }

  .baba-theme-controls {
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .baba-title-art { display: none !important; }
  .baba-theme-button { padding-inline: 8px; }
  .title-text { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .baba-theme-button,
  .menu-btn,
  .pass-btn,
  .btn {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .baba-theme-button,
  .menu-btn,
  .pass-btn,
  .btn,
  .nameplate,
  .dialog {
    border: 1px solid ButtonText;
  }

  .baba-theme-button:focus-visible,
  .menu-btn:focus-visible,
  .pass-btn:focus-visible,
  .btn:focus-visible {
    outline-color: Highlight;
  }
}