/* «Салун мертвецов»: тёплое дерево, закат, латунь. Основа панели и окон — общая с Кракеном (kraken.css). */

.saloon .sl-stage { padding-top: 12px; }
.sl-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.sl-top > .sl-plaque:last-child { justify-self: end; }
.sl-plaque {
  display: flex; flex-direction: column; align-items: center; min-width: 120px; max-width: 180px;
  padding: 5px 12px 7px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(30, 14, 6, .55), rgba(8, 3, 1, .8)), url(../textures/wood-dark.jpg) center / 200px;
  border: 1px solid rgba(150, 100, 60, .6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 210, 160, .12);
  font-family: Oswald, var(--font); text-shadow: 0 2px 3px rgba(0, 0, 0, .8);
  position: relative;
}
.sl-plaque::before, .sl-plaque::after {
  content: ''; position: absolute; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #6e675c; box-shadow: 0 0 0 1px #120804;
}
.sl-plaque::before { left: 6px; }
.sl-plaque::after { right: 6px; }
.sl-plaque span { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #c79a6a; }
.sl-plaque b { font-size: 21px; font-weight: 600; color: #efe0c8; font-variant-numeric: tabular-nums; line-height: 1.15; }

.sl-logo { text-align: center; line-height: 1; display: flex; flex-direction: column; align-items: center; }
.sl-logo-title, .sl-logo-sub {
  font-family: "Ruslan Display", Rubik, serif;
  background: linear-gradient(180deg, #efe0c8 0%, #c98a4a 50%, #6e2a0c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 20px rgba(200, 60, 20, .35));
}
.sl-logo-title { font-size: 52px; letter-spacing: .04em; }
.sl-logo-sub { font-size: 26px; letter-spacing: .12em; margin-top: 4px; }
.sl-logo:has(.sl-duel:not([hidden])) .sl-logo-sub { display: none; }

.sl-duel {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(200, 70, 30, .7); background: linear-gradient(180deg, rgba(36, 8, 4, .94), rgba(10, 2, 1, .96));
  box-shadow: 0 0 22px rgba(200, 60, 20, .3); font-family: Oswald, var(--font);
}
.sl-duel > div:not(.sl-hats) { display: flex; flex-direction: column; align-items: center; }
.sl-duel span { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #c99070; }
.sl-duel b { font-size: 17px; font-weight: 600; color: #efe0c8; line-height: 1.1; }
.sl-hats { display: flex; gap: 2px; }
.sl-hats img { width: 30px; height: 30px; display: block; border-radius: 50%; transition: filter .3s, opacity .3s, transform .3s; }
.sl-hats img.lost { filter: grayscale(1) brightness(.5); opacity: .45; transform: rotate(-20deg) translateY(4px); }

#sl-reels { width: 100%; max-width: 690px; aspect-ratio: 686 / 434; display: block; }
.sl-msg { color: #e8d8bc; text-shadow: 0 2px 6px #000, 0 0 14px rgba(200, 80, 30, .35); }

.sl-bar { border-top-color: rgba(150, 100, 60, .5); background: linear-gradient(180deg, rgba(20, 8, 3, .82), rgba(6, 2, 1, .94)), url(../textures/leather.jpg) center / 280px; }
.sl-bar .kr-stat span { color: #a8805c; }
.sl-bar .kr-stat b { color: #efe0c8; }
.sl-bar .kr-bet > button { background: radial-gradient(circle at 40% 35%, #4a3020, #140804); color: #e8cfa8; border-color: rgba(150, 100, 60, .55); }
.sl-spin {
  background: radial-gradient(circle at 38% 32%, #3a2e26, #120a06 60%, #050201);
  border-color: #6e4a2a; color: #e8c9a0;
  box-shadow: 0 0 0 2px #050201, 0 0 26px rgba(220, 80, 20, .4), inset 0 0 18px rgba(220, 80, 20, .2);
}
.sl-buy { background: radial-gradient(circle at 35% 30%, #c9a07a, #6e4a2a 50%, #2a1408); color: #140804; border-color: #140804; }
.saloon .kr-small { color: #e0cba8; border-color: rgba(150, 100, 60, .4); }
.saloon .kr-small.on { background: linear-gradient(180deg, #8a3a14, #4a1a06); border-color: #c9703a; color: #f3e0c8; }

.saloon-modal .kr-dialog { border-color: rgba(150, 100, 60, .7); background: linear-gradient(180deg, rgba(30, 12, 5, .96), rgba(8, 3, 1, .98)), url(../textures/wood-dark.jpg) center / 300px; }
.saloon-modal .kr-dialog h3 { font-family: "Ruslan Display", Georgia, serif; color: #d9a06a; }
.saloon-modal .kr-buy-card.fs { background: linear-gradient(180deg, rgba(90, 20, 6, .9), rgba(20, 4, 1, .95)); border-color: rgba(220, 90, 40, .6); }
.saloon-modal .kr-buy-card.hw { background: linear-gradient(180deg, rgba(90, 60, 30, .9), rgba(24, 14, 6, .95)); border-color: rgba(220, 180, 120, .5); }
.saloon-modal .kr-buy-card.fs .action { background: linear-gradient(180deg, #b8501f, #6e2408 60%, #3a1004); color: #f3e0c8; }
.saloon-modal .kr-buy-card.hw .action { background: linear-gradient(180deg, #c9a07a, #6e4a2a 60%, #2a1408); color: #f3e0c8; }
.saloon-modal .kr-pay { background: rgba(0, 0, 0, .3); }

@media (max-width: 700px) {
  .sl-logo-title { font-size: 38px; }
  .sl-logo-sub { font-size: 19px; }
  .sl-plaque { min-width: 0; padding: 4px 8px 6px; }
  .sl-plaque b { font-size: 15px; }
  .sl-plaque span { font-size: 8px; }
}
@media (max-width: 480px) {
  .sl-logo-title { font-size: 28px; }
  .sl-logo-sub { font-size: 14px; }
  .sl-hats img { width: 22px; height: 22px; }
}