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

.yokai .yk-stage { padding-top: 12px; }
.yk-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.yk-top > .yk-plaque:last-child { justify-self: end; }
.yk-plaque {
  display: flex; flex-direction: column; align-items: center; min-width: 120px; max-width: 180px;
  padding: 5px 12px 7px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(14, 10, 22, .78), rgba(4, 3, 10, .9)), url(../textures/paper.jpg) center / 220px;
  border: 1px solid rgba(201, 161, 74, .55);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .65), inset 0 0 0 3px rgba(160, 40, 24, .45);
  font-family: Oswald, var(--font); text-shadow: 0 2px 3px rgba(0, 0, 0, .8);
}
.yk-plaque span { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #e0a080; }
.yk-plaque b { font-size: 21px; font-weight: 600; color: #f0e6d0; font-variant-numeric: tabular-nums; line-height: 1.15; }

.yk-logo { text-align: center; line-height: 1; display: flex; flex-direction: column; align-items: center; }
.yk-logo-title, .yk-logo-sub {
  font-family: "Cormorant SC", Georgia, serif; font-weight: 700;
  background: linear-gradient(180deg, #fff6dc 0%, #f0a060 50%, #c23b22 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 22px rgba(127, 224, 208, .3));
}
.yk-logo-title { font-size: 50px; letter-spacing: .06em; }
.yk-logo-sub { font-size: 22px; letter-spacing: .3em; margin-top: 2px; background: linear-gradient(180deg, #e8fff8, #7fe0d0 60%, #2a7a70); -webkit-background-clip: text; background-clip: text; }
.yk-logo:has(.yk-night:not([hidden])) .yk-logo-sub { display: none; }

.yk-night {
  display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 4px 14px; border-radius: 999px;
  border: 1px solid rgba(194, 59, 34, .75); background: linear-gradient(180deg, rgba(40, 6, 14, .94), rgba(10, 2, 6, .96));
  box-shadow: 0 0 22px rgba(194, 59, 34, .35), 0 0 30px rgba(127, 224, 208, .15) inset; font-family: Oswald, var(--font);
}
.yk-night > div { display: flex; flex-direction: column; align-items: center; }
.yk-night span { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #e0a080; }
.yk-night b { font-size: 17px; font-weight: 600; color: #f0e6d0; line-height: 1.1; }

#yk-reels { width: 100%; max-width: 640px; aspect-ratio: 616 / 504; display: block; }
.yk-msg { color: #f0e6d0; text-shadow: 0 2px 6px #000, 0 0 14px rgba(127, 224, 208, .35); }

.yk-bar { border-top-color: rgba(201, 161, 74, .45); background: linear-gradient(180deg, rgba(10, 8, 22, .88), rgba(4, 3, 10, .96)), url(../textures/paper.jpg) center / 260px; }
.yk-bar .kr-stat span { color: #c8a0a0; }
.yk-bar .kr-stat b { color: #f0e6d0; }
.yk-bar .kr-bet > button { background: radial-gradient(circle at 40% 35%, #2a1a30, #08040e); color: #f0d8c0; border-color: rgba(201, 161, 74, .5); }
.yk-spin {
  background: radial-gradient(circle at 38% 32%, #3a1a24, #12060c 60%, #050206);
  border-color: #c23b22; color: #f0d8c0;
  box-shadow: 0 0 0 2px #050206, 0 0 26px rgba(194, 59, 34, .45), inset 0 0 18px rgba(127, 224, 208, .18);
}
.yk-buy { background: radial-gradient(circle at 35% 30%, #f07a5a, #c23b22 50%, #4a0a06); color: #fff6e8; border-color: #140608; }
.yokai .kr-small { color: #f0d8c0; border-color: rgba(201, 161, 74, .4); }
.yokai .kr-small.on { background: linear-gradient(180deg, #a02818, #4a0a06); border-color: #e0603a; color: #fff6e8; }

.yokai-modal .kr-dialog { border-color: rgba(201, 161, 74, .7); background: linear-gradient(180deg, rgba(14, 10, 24, .96), rgba(4, 3, 10, .98)), url(../textures/paper.jpg) center / 300px; }
.yokai-modal .kr-dialog h3 { font-family: "Cormorant SC", Georgia, serif; color: #f0a060; }
.yokai-modal .kr-buy-card.fs { background: linear-gradient(180deg, rgba(110, 20, 14, .9), rgba(24, 4, 6, .95)); border-color: rgba(224, 96, 58, .6); }
.yokai-modal .kr-buy-card.fs .action { background: linear-gradient(180deg, #e0603a, #a02818 60%, #4a0a06); color: #fff6e8; }
.yokai-modal .kr-pay { background: rgba(0, 0, 0, .3); }

/* Карточка на главной зала. */
.slot-yokai {
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(255, 250, 240, .18), transparent 55%),
    radial-gradient(70% 90% at 15% 60%, rgba(127, 224, 208, .16), transparent 60%),
    linear-gradient(170deg, #121a40, #0b1026 55%, #3a0a16);
  border-color: rgba(194, 59, 34, .55);
}
.slot-yokai .home-window { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .6), inset 0 0 18px rgba(0, 0, 0, .7), 0 0 0 3px rgba(194, 59, 34, .65); }
.slot-yokai .home-name {
  font-family: "Cormorant SC", Georgia, serif;
  background: linear-gradient(180deg, #fff6dc, #f0a060 55%, #c23b22);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slot-yokai .home-sub { font-family: "Cormorant SC", Georgia, serif; color: #7fe0d0; }

@media (max-width: 700px) {
  .yk-logo-title { font-size: 36px; }
  .yk-logo-sub { font-size: 17px; }
  .yk-plaque { min-width: 0; padding: 4px 8px 6px; }
  .yk-plaque b { font-size: 15px; }
  .yk-plaque span { font-size: 8px; }
}
@media (max-width: 480px) {
  .yk-logo-title { font-size: 26px; }
  .yk-logo-sub { font-size: 13px; }
}