:root {
  color-scheme: dark;
  --room-gold: #f5c96a;
  --room-violet: #c586ff;
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
  margin: 0;
  color: #fff8ea;
  background: #08030d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.slot-room {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding: clamp(1rem, 4vw, 3rem);
  isolation: isolate;
  background: url("assets/images/slot-room/kot-slot-room.png") center / cover no-repeat;
}

.slot-room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 0, 8, .04) 25%, rgba(3, 0, 8, .42) 92%);
}

.slot-room__home,
.slot-room__store {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .65rem .85rem;
  border: 1px solid rgba(245, 201, 106, .55);
  border-radius: .4rem;
  background: rgba(7, 2, 13, .82);
  color: #fff8ea;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.slot-room__store {
  left: auto;
  right: 1rem;
}

.slot-room__content {
  width: min(1100px, 100%);
  margin: 0 auto;
  text-align: center;
}

.slot-room__eyebrow {
  margin: 0 0 .35rem;
  color: var(--room-gold);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.slot-room h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: .95;
  text-shadow: 0 3px 20px #000;
}

.slot-room__intro {
  margin: .65rem auto 1rem;
  color: rgba(255, 248, 234, .82);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
}

.slot-room__machines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 4vw, 4rem);
  align-items: end;
}

.room-machine {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 13rem;
  padding: .35rem;
  border: 0;
  background: transparent;
  color: #fff8ea;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  opacity: .28;
  transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
}

.room-machine:hover,
.room-machine:focus-visible {
  transform: translateY(-10px) scale(1.13);
  outline: none;
  opacity: 1;
  filter: drop-shadow(0 0 22px rgba(92,255,120,.4));
}

.room-machine img {
  width: 100%;
  height: 10rem;
  object-fit: contain;
}

.room-machine span,
.room-machine strong,
.room-machine small { display: block; }

.room-machine span {
  color: var(--room-gold);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.room-machine strong {
  margin: .2rem 0;
  color: #66ff7a;
  font-family: "Cascadia Mono", "Lucida Console", monospace;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.room-machine strong::after { content: "_"; animation: roomCursor .8s steps(1,end) infinite; }
@keyframes roomCursor { 50% { opacity: 0; } }

.room-machine small { color: rgba(255, 248, 234, .7); }

@media (max-width: 720px) {
  .slot-room { background-position: center top; }
  .slot-room__machines { grid-template-columns: 1fr; }
  .room-machine { min-height: 6.5rem; }
}