/* PUDDLE — slots lobby (self-contained, loaded after ui.css) */
.sl-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.sl-tools .home-search { position: relative; display: block; flex: 1 1 260px; max-width: 480px; margin: 0; }
.sl-tools .home-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--text-2, #557086); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.sl-tools .home-search input { width: 100%; height: 44px; padding: 0 14px 0 44px; background: var(--bg-2, #2f4553); border: 2px solid transparent; border-radius: 8px; color: #fff; font: inherit; font-size: 14px; font-weight: 500; outline: none; }
.sl-tools .home-search input:focus { border-color: var(--ice, #64d2ff); }
.sl-tools .g-select { flex: 0 0 auto; width: 210px; height: 44px; padding: 0 12px; background: var(--bg-2, #2f4553); border: 2px solid transparent; border-radius: 8px; color: #fff; font: inherit; font-size: 14px; font-weight: 500; }

/* every tile is exactly the same size: fixed-ratio art box, image cropped to fill it */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 14px; align-items: start; }
.sl-card { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; min-width: 0; cursor: pointer; color: #fff; }
.sl-card:focus-visible { outline: 2px solid var(--ice, #64d2ff); outline-offset: 3px; border-radius: 10px; }
.sl-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--bg-1, #1a2c38); transition: transform .15s ease, box-shadow .15s ease; }
.sl-card:hover .sl-thumb { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
.sl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
.sl-thumb img.sl-fg { object-fit: contain; z-index: 1; }
.sl-thumb img.sl-bg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); max-width: none; object-fit: cover; filter: blur(14px) brightness(.7); transform: scale(1.1); }
.sl-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: var(--text-2, #557086); }
.sl-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 8px; font-size: 12px; font-weight: 700; text-align: center; background: linear-gradient(transparent, rgba(15, 33, 46, .92)); }
.sl-live { display: flex; align-items: center; gap: 6px; padding: 0 2px; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--text-1, #b1bad3); background: none; }
.sl-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green, #00e701); flex: none; }
.sl-live.idle { color: var(--text-2, #557086); font-weight: 500; }
.sl-live.idle i { display: none; }
.sl-live span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
#slotRes { margin-top: 22px; }
#slotRes h3 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.pg-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pg-title { flex: 1; min-width: 0; font-weight: 700; font-size: 18px; }
.pg-bal { background: var(--bg-1, #1a2c38); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-1, #b1bad3); }
.pg-bal b { margin-left: 6px; color: #fff; }
.pg-frame { position: relative; height: min(82vh, 780px); min-height: 520px; background: var(--bg-1, #1a2c38); border-radius: 8px; overflow: hidden; }
.pg-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0f212e; }
.pg-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--text-1, #b1bad3); pointer-events: none; }
.pg-loading[hidden] { display: none; }
@media (max-width: 700px) {
    .sl-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
    .sl-tools .home-search, .sl-tools .g-select { flex: 1 1 100%; width: 100%; max-width: none; }
    .pg-frame { height: calc(100vh - 150px); min-height: 480px; }
}
@media (max-width: 420px) { .sl-grid { grid-template-columns: repeat(2, 1fr); } }
/* skeleton placeholder cards (use .skel from ui.css) */
.sl-card.sl-skel { cursor: default; pointer-events: none; }
.sl-skel .sl-thumb { background: var(--bg-2, #2f4553); }
.sl-skel .sl-thumb.skel { border-radius: 10px; }
.sl-skel .skel-line { width: 60%; margin: 2px 2px 0; }