:root {
  --bg: #080910;
  --felt: #0b3a2a;
  --paper: rgba(16, 14, 22, .78);
  --ink: #f7f1e4;
  --muted: #b7ab96;
  --line: rgba(231, 197, 106, .22);
  --gold: #e7c56a;
  --gold-deep: #a9782d;
  --ruby: #a06be0;
  --green: #1f9d5a;
  --green-deep: #0e6b3a;
  --danger: #ff8d8d;
  --shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --radius: 22px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Heebo, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 480px at 100% -10%, rgba(124, 92, 255, .20), transparent 55%),
    radial-gradient(820px 520px at -10% 110%, rgba(16, 62, 110, .50), transparent 60%),
    radial-gradient(600px 320px at 50% -20%, rgba(231, 197, 106, .16), transparent 50%),
    var(--bg);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.hidden { display: none !important; }

.scene { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; display: none; }
body.is-login .scene, body.app-player .scene { display: block; }
body.app-player .scene-pin, body.app-player .wheel { display: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .85; }
.glow.g1 { width: 420px; height: 420px; background: rgba(124, 92, 255, .30); top: -80px; left: -60px; }
.glow.g2 { width: 520px; height: 520px; background: rgba(26, 70, 128, .32); bottom: -160px; right: -80px; }
.glow.g3 { width: 280px; height: 280px; background: rgba(231, 197, 106, .16); top: 18%; right: 22%; }
.wheel {
  position: absolute; width: 540px; height: 540px; border-radius: 50%;
  left: -180px; bottom: -180px; opacity: .35;
  background:
    repeating-conic-gradient(from 0deg, #141428 0 12deg, #f0c25e 12deg 16deg, #4c3a8c 16deg 28deg, #f0c25e 28deg 32deg);
  box-shadow: inset 0 0 0 28px rgba(7, 6, 12, .65), 0 0 0 10px rgba(231, 197, 106, .35);
  animation: spin 48s linear infinite;
}
.scene-pin { position: absolute; width: 150px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.scene-pin.a { top: 8%; left: 7%; animation: float 7s ease-in-out infinite; }
.scene-pin.b { bottom: 8%; right: 6%; width: 120px; transform: scaleX(-1); animation: float 8s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.boot {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 14px;
  background: radial-gradient(500px 240px at 50% 40%, rgba(231, 197, 106, .16), transparent 70%), #07060c;
}
.boot img { width: 120px; }
.boot-word { font-family: Cinzel, Heebo, serif; font-size: 28px; letter-spacing: .18em; }
.boot-word span { color: var(--gold); }
.boot-bar { width: 160px; height: 3px; border-radius: 99px; background: rgba(231, 197, 106, .18); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); animation: load 1s ease-in-out infinite; }
@keyframes load { 50% { transform: translateX(160%); } }

#app { position: relative; z-index: 1; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 72px 16px 28px; }
.marquee {
  position: fixed; top: 0; inset-inline: 0; height: 42px; overflow: hidden; direction: ltr;
  background: linear-gradient(90deg, #140c08, #3a2412 40%, #140c08);
  border-bottom: 1px solid rgba(231, 197, 106, .35); z-index: 5;
}
.marquee-track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.marquee span {
  flex: none; display: flex; align-items: center; height: 42px; padding-inline: 8px;
  font-weight: 700; letter-spacing: .12em; color: var(--gold); white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }
.login-card {
  width: min(480px, 100%);
  background:
    linear-gradient(180deg, rgba(28, 22, 16, .92), rgba(10, 9, 14, .92));
  border: 1px solid rgba(231, 197, 106, .45);
  border-radius: 28px;
  box-shadow: 0 0 0 8px rgba(231, 197, 106, .06), var(--shadow);
  padding: 28px 28px 26px;
  text-align: center;
  backdrop-filter: blur(16px);
}
.crest {
  width: 108px; height: 108px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #fff, #f3d48a 42%, #8a5a22);
  box-shadow: 0 0 0 6px rgba(231, 197, 106, .2), 0 16px 30px rgba(0, 0, 0, .35);
}
.crest img { width: 86px; }
.eyebrow { color: var(--gold); letter-spacing: .28em; font-size: 12px; font-weight: 700; }
.word { font-family: Cinzel, Heebo, serif; font-weight: 700; letter-spacing: .14em; margin: 6px 0 0; font-size: 34px; }
.word span { color: var(--gold); }
.sub { color: var(--muted); margin: 8px 0 22px; }
.stack { display: grid; gap: 12px; text-align: right; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
input, select, textarea {
  height: 54px; border-radius: 14px; border: 1px solid rgba(231, 197, 106, .28);
  background: rgba(8, 7, 12, .72); padding: 0 14px; outline: none; color: var(--ink);
}
textarea { height: auto; padding: 12px 14px; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(231, 197, 106, .15); }
.ltr { direction: ltr; text-align: right; }

a.btn { display: inline-flex; align-items: center; width: fit-content; text-decoration: none; }
.btn {
  height: 52px; border: 0; border-radius: 14px; padding: 0 18px;
  background: linear-gradient(180deg, #2bb56a, #147844); color: white; font-weight: 800;
  box-shadow: 0 10px 24px rgba(16, 90, 48, .35);
}
.btn.gold {
  background: linear-gradient(180deg, #f3d98a, #c9963a 55%, #8d5e1d);
  color: #1a1208; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: 0 10px 24px rgba(160, 110, 30, .35);
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid rgba(231, 197, 106, .28); }
.btn.danger { color: var(--danger); }
.panic-card { border-color: #8d2a2a; }
.panic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.panic-grid article { background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px; }
.panic-grid img { width: 100%; margin-top: 8px; border-radius: 8px; background: #111; }
.btn.small { height: 42px; border-radius: 12px; font-size: 14px; }
.btn:disabled { opacity: .6; cursor: wait; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .btn { flex: 1; }

.kiosk { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.kbar-actions { display: flex; gap: 8px; }
.kbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(12, 10, 16, .94), rgba(12, 10, 16, .78));
  border-bottom: 1px solid rgba(231, 197, 106, .28);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; }
.brand img { width: 46px; }
.brand strong { font-family: Cinzel, Heebo, serif; letter-spacing: .12em; font-size: 18px; }
.brand strong span { color: var(--gold); }
.station-badge, .clock {
  display: grid; justify-items: center; line-height: 1;
  min-width: 72px; padding: 6px 10px; border-radius: 14px;
  border: 1px solid rgba(231, 197, 106, .28);
  background: rgba(231, 197, 106, .06);
}
.station-badge span, .clock { font-size: 11px; color: var(--gold); letter-spacing: .08em; }
.station-badge b { font-family: Cinzel, Heebo, serif; font-size: 26px; }
.clock { font-family: Cinzel, Heebo, serif; font-size: 22px; align-content: center; min-height: 52px; }
.spacer { flex: 1; }
.pill {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #f6e2a8, #c9963a);
  color: #1a1208; border-radius: 999px; padding: 8px 16px;
  box-shadow: 0 8px 20px rgba(160, 110, 30, .28); font-weight: 800;
}
.pill span { font-size: 12px; opacity: .75; }
.pill b { font-size: 22px; }
.pill.mini { padding: 6px 12px; }
.pill.mini b, .pill.mini { font-size: 16px; }
.pill.ping, [data-live-balance].ping, .money.ping, [data-field="balance"].ping, #stat-room.ping { animation: ping .45s ease; }
@keyframes ping { 40% { transform: scale(1.05); } }
.who-line { display: grid; line-height: 1.15; text-align: right; }
.who-line small { color: var(--muted); font-weight: 500; }

.kiosk-body { display: grid; grid-template-columns: 168px 1fr; min-height: 0; }
.rail {
  position: sticky; top: 74px; align-self: start;
  display: grid; gap: 8px; padding: 14px 10px 24px 12px;
  max-height: calc(100vh - 74px); overflow: auto;
}
.rail-btn {
  appearance: none;
  text-align: right; border-radius: 16px; padding: 12px 12px 10px;
  border: 1px solid rgba(231, 197, 106, .4);
  background-color: #1a140e;
  background-image: linear-gradient(180deg, #2c2418, #120f0c);
  color: #fff6df;
  display: grid; gap: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 180, .18);
}
.rail-btn b { font-size: 16px; }
.rail-btn small { color: var(--muted); font-size: 12px; }
.rail-btn.on {
  background: linear-gradient(180deg, rgba(243, 217, 138, .95), rgba(176, 122, 42, .95));
  color: #1a1208; border-color: transparent;
  box-shadow: 0 10px 22px rgba(160, 110, 30, .28);
}
.rail-btn.on small { color: rgba(26, 18, 8, .7); }
.floor { padding: 8px 18px 28px 8px; min-width: 0; }
.filters { display: flex; gap: 10px; align-items: center; margin: 8px 0 14px; }
body.app-player:not(.compact) .filters { display: none; }
.search { flex: 1; }
.providers { width: min(220px, 40%); }

.welcome {
  display: flex; justify-content: space-between; gap: 16px; align-items: end;
  margin: 8px 0 16px; padding: 8px 4px 0;
}
.welcome h1 { margin: 4px 0; font-size: 40px; font-weight: 800; }
.welcome p { margin: 0; color: var(--muted); }
.welcome-balance {
  min-width: 220px; padding: 16px 18px; border-radius: 20px;
  background: linear-gradient(160deg, #2a2114, #12100f);
  border: 1px solid rgba(231, 197, 106, .45);
}
.welcome-balance span { color: var(--gold); font-size: 13px; }
.welcome-balance b { display: block; font-size: 32px; margin-top: 4px; }

.floor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(156px, 18vh);
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(231, 197, 106, .14), transparent 60%),
    linear-gradient(180deg, rgba(10, 72, 48, .72), rgba(6, 28, 20, .55));
  border: 1px solid rgba(231, 197, 106, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 180, .08), 0 18px 40px rgba(0, 0, 0, .28);
}
.tile {
  appearance: none;
  -webkit-appearance: none;
  position: relative; overflow: hidden; text-align: right; border-radius: 26px;
  padding: 18px; color: white; display: grid; align-content: end; gap: 4px;
  min-height: 156px;
  border: 1px solid rgba(243, 217, 138, .72);
  background-color: #1a120c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 214, .28),
    inset 0 0 0 7px rgba(0, 0, 0, .28),
    0 16px 32px rgba(0, 0, 0, .38);
}
.tile::after {
  content: ""; position: absolute; inset: auto -20% -45% 10%; height: 70%;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 68%);
  pointer-events: none;
}
.tile strong { font-size: 30px; position: relative; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.tile em { font-style: normal; opacity: .92; position: relative; }
.tile-mark {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fff6d2, #e7c56a 46%, #a9782d);
  color: #1a1208;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.tile-mark::before {
  font-family: Cinzel, Heebo, serif;
  font-size: 28px; font-weight: 700; line-height: 1;
}
.tile.slots .tile-mark::before { content: "7"; }
.tile.live .tile-mark::before { content: "♠"; font-size: 30px; }
.tile.roulette .tile-mark::before { content: "●"; color: #8d1d34; }
.tile.blackjack .tile-mark::before { content: "A"; }
.tile.baccarat .tile-mark::before { content: "♦"; color: #8d1d34; }
.tile.poker .tile-mark::before { content: "♥"; color: #8d1d34; }
.tile.shows .tile-mark::before { content: "★"; }
.tile.sicbo .tile-mark::before { content: "6"; }
.tile.mini .tile-mark::before { content: "◆"; }
.tile-kicker {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 4px 10px; font-weight: 800;
}
.tile.slots {
  grid-column: span 2; grid-row: span 2;
  background-color: #2a1448;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(243, 217, 138, .28), transparent 26%),
    linear-gradient(145deg, #7a3cb0 0%, #241038 58%, #c9963a 140%);
}
.tile.live {
  grid-column: span 2;
  background-color: #4a1020;
  background-image:
    radial-gradient(circle at 80% 80%, rgba(231, 197, 106, .42), transparent 34%),
    linear-gradient(145deg, #c42948 0%, #3a0d18 60%, #e7c56a 150%);
}
.tile.roulette { background-color: #0c4a30; background-image: linear-gradient(160deg, #14915c, #071910 72%); }
.tile.blackjack { background-color: #163e72; background-image: linear-gradient(160deg, #1d4e89, #0b1220); }
.tile.baccarat { background-color: #6d4c22; background-image: linear-gradient(160deg, #8a6230, #24170c); }
.tile.poker { background-color: #6a1c38; background-image: linear-gradient(160deg, #7a2344, #1a0c12); }
.tile.shows { background-color: #5a3010; background-image: linear-gradient(160deg, #6a3a12, #1a100c); }
.tile.sicbo { background-color: #145850; background-image: linear-gradient(160deg, #1e6a62, #071614); }
.tile.mini { background-color: #322f78; background-image: linear-gradient(160deg, #3d3a8a, #121022); }
.tile:hover { transform: translateY(-3px); filter: saturate(1.08); }

.shelf { margin: 0 0 22px; }
.shelf-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 14px; margin: 0 2px 10px; }
.shelf-head h2 { margin: 0; font-size: 22px; }
.shelf-head span { color: var(--muted); }
.recent-shelf h2 { font-family: Cinzel, Heebo, serif; letter-spacing: .22em; color: var(--gold); }
.recent-empty {
  color: #f6e7c1; border: 1px solid rgba(231, 197, 106, .45); border-radius: 18px;
  padding: 16px 18px; background: rgba(42, 33, 20, .9);
}
.shelf-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; }
.shelf-row .game { flex: 0 0 188px; scroll-snap-align: start; }
.recent-shelf .game { flex-basis: 210px; border-color: rgba(231, 197, 106, .45); }
.type-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.type-door {
  appearance: none;
  -webkit-appearance: none;
  min-height: 88px; border-radius: 18px; border: 1px solid rgba(243, 217, 138, .55);
  text-align: right; padding: 12px 14px; color: white; display: grid; align-content: end;
  background-color: #3a2a12;
  background-image: linear-gradient(160deg, #3a2a12, #120e0c);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 214, .16), 0 10px 20px rgba(0, 0, 0, .28);
}
.type-door b { font-size: 18px; }
.type-door small { color: rgba(255,255,255,.8); }
.type-door.classic { background: linear-gradient(160deg, #8d1d34, #2a0c14); }
.type-door.gold { background: linear-gradient(160deg, #8a6230, #24170c); }
.type-door.animals { background: linear-gradient(160deg, #0f6b45, #071910); }
.type-door.egypt { background: linear-gradient(160deg, #a06a22, #2a1608); }
.type-door.books { background: linear-gradient(160deg, #6a3a12, #1a100c); }
.type-door.megaways { background: linear-gradient(160deg, #5b2a86, #1b1030); }
.type-door.sweet { background: linear-gradient(160deg, #a33b78, #2a1020); }
.type-door.asian { background: linear-gradient(160deg, #9a2a2a, #240c0c); }
.type-door.olympus { background: linear-gradient(160deg, #1d4e89, #0b1220); }
.type-door.bonus { background: linear-gradient(160deg, #1e6a62, #071614); }
.type-door.more { background: linear-gradient(160deg, #3d3a8a, #121022); }
.studio-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.studio {
  border-radius: 999px; padding: 8px 12px; border: 1px solid rgba(231, 197, 106, .28);
  background: rgba(16, 14, 22, .72); color: inherit; display: inline-flex; gap: 8px; align-items: baseline;
}
.studio small { color: var(--gold); }
.hall-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 2px 12px; }
.hall-title h1 { margin: 0; font-size: 32px; }
.hall-title span { color: var(--gold); font-weight: 700; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; padding-bottom: 28px; }
.game {
  appearance: none;
  -webkit-appearance: none;
  display: grid; gap: 8px; padding: 8px; text-align: right; color: #fff6df;
  background-color: #14110e;
  background-image: linear-gradient(180deg, rgba(36, 28, 18, .96), rgba(12, 10, 14, .96));
  border: 1px solid rgba(231, 197, 106, .38); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 180, .16);
}
.game:hover { transform: translateY(-4px); border-color: rgba(231, 197, 106, .7); box-shadow: 0 16px 34px rgba(0,0,0,.35); }
.thumb { aspect-ratio: 16/11; border-radius: 14px; overflow: hidden; background: #1a1520; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: Cinzel, serif; letter-spacing: .2em; color: var(--gold); }
.ribbon, .play-tag {
  position: absolute; border-radius: 999px; font-size: 12px; padding: 4px 8px; font-weight: 800;
}
.ribbon { top: 8px; right: 8px; background: var(--ruby); color: white; }
.play-tag {
  left: 8px; bottom: 8px; background: linear-gradient(180deg, #f3d98a, #c9963a); color: #1a1208;
  opacity: 0; transform: translateY(6px); transition: .18s ease;
}
.game:hover .play-tag { opacity: 1; transform: none; }
.game b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; unicode-bidi: plaintext; }
.game small { color: var(--muted); unicode-bidi: plaintext; }
.more { display: grid; place-items: center; padding: 6px 0 36px; }
.more .btn { min-width: 220px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0 60px; }
.empty img { width: 96px; }

.account { display: grid; gap: 14px; padding-bottom: 40px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat, .card {
  background: rgba(16, 14, 22, .78); border: 1px solid rgba(231, 197, 106, .16); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.theme-card {
  display: grid; gap: 6px; text-align: right; padding: 12px;
  border-radius: 16px; border: 1px solid rgba(231, 197, 106, .28);
  background: rgba(8, 7, 12, .55); color: inherit;
}
.theme-card small { color: var(--muted); font-size: 13px; }
.theme-card.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(231, 197, 106, .2); }
.theme-swatch { display: block; height: 72px; border-radius: 12px; }
.theme-swatch.classic { background: linear-gradient(135deg, #141414, #313131 55%, #e2b85c); }
.theme-swatch.lagoon { background: linear-gradient(135deg, #041018, #0e3044 55%, #3ddec8); }
.theme-swatch.ember { background: linear-gradient(135deg, #14060a, #3a1520 55%, #ff7a59); }
.stat span, .muted { color: var(--muted); font-size: 13px; }
.stat b { display: block; font-size: 22px; margin-top: 4px; }
.pos { color: #7dffa8; }
.neg { color: var(--danger); }

.admin { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.side {
  padding: 22px 16px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 6px;
  border-left: 1px solid rgba(231, 197, 106, .16);
  background: rgba(8, 7, 12, .72);
}
.side nav { display: grid; gap: 6px; margin-top: 18px; }
.side nav button {
  appearance: none;
  text-align: right;
  background: #2a241c;
  color: #fff6df;
  border: 1px solid #e7c56a;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  font-size: 16px;
}
.side nav button.on {
  background: linear-gradient(180deg, #f6e2a8, #c9963a);
  color: #1a1208;
  border-color: #f6e2a8;
}
.admin-main { padding: 18px 22px 40px; }
.limit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.limit-grid label { display: grid; gap: 4px; font-size: 13px; }
.admin-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; }
.admin-top h1 { margin: 0; font-size: 28px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.station {
  background: rgba(16, 14, 22, .78); border-radius: 26px; padding: 16px; border: 1px solid rgba(231, 197, 106, .16);
  display: grid; gap: 4px;
}
.station.on { box-shadow: 0 0 0 2px var(--gold), 0 16px 36px rgba(231, 197, 106, .12); }
.seat-no { font-family: Cinzel, Heebo, serif; font-size: 40px; line-height: 1; color: var(--gold); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #5c564c; display: inline-block; }
.station.on .dot { background: #3dff8a; box-shadow: 0 0 0 4px rgba(61, 255, 138, .15); }
.station-top { display: flex; justify-content: space-between; align-items: center; }
.station-actions { display: flex; gap: 8px; margin-top: 8px; }
.station-actions .btn { flex: 1; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { text-align: right; color: var(--muted); font-size: 13px; font-weight: 600; }
td, th { padding: 12px 10px; border-bottom: 1px solid rgba(231, 197, 106, .12); vertical-align: middle; }
.split { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
.form { display: grid; gap: 12px; }
.online { display: grid; gap: 8px; }
.person {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  background: rgba(16, 14, 22, .78); border-radius: 16px; padding: 10px 12px; border: 1px solid rgba(231, 197, 106, .16);
}

.stage {
  position: fixed; inset: 0; z-index: 40; background: #242424;
  display: flex; flex-direction: column; padding: 0; direction: ltr;
}
.stage[hidden] { display: none; }
.playbar {
  position: relative; height: 53px; flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; color: #fff; border-bottom: 1px solid rgba(226, 184, 92, .55);
}
.play-info { display: flex; align-items: center; gap: 16px; min-width: 0; }
.play-info b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-studio { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #fff; }
.play-studio svg { width: 18px; height: 18px; }
.play-limit {
  flex: none; direction: rtl; white-space: nowrap; font-size: 13px; font-weight: 700; color: #f3d48a;
  padding: 3px 10px; border: 1px solid rgba(226, 184, 92, .55); border-radius: 999px;
}
@media (max-width: 520px) { .play-studio { display: none; } .play-limit { font-size: 12px; padding: 2px 8px; } }
.play-actions { display: flex; gap: 10px; flex: none; }
.play-ico {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: #404040; color: #fff;
  display: grid; place-items: center; padding: 0;
}
.play-ico svg { width: 16px; height: 16px; }
.playbar .rec-dot {
  position: absolute; width: 8px; height: 8px; overflow: hidden; color: transparent;
  top: 8px; left: 8px;
}
.rec-dot { display: inline-flex; align-items: center; gap: 6px; color: #ffb4c0; font-size: 13px; font-weight: 800; }
.rec-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e23b4a; }
.proof { display: grid; gap: 6px; margin: 0 0 12px; }
.proof video { width: 100%; max-height: 260px; background: #000; border-radius: 12px; }
.stage iframe { flex: 1 1 auto; width: 100%; height: calc(100% - 53px); min-height: calc(100dvh - 53px); border: 0; border-radius: 0; background: #111; }
.game-hold { flex: 1; display: grid; place-items: center; text-align: center; padding: 24px; }
.game-hold p { margin: 0; font-size: 18px; }

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .62);
  display: grid; place-items: center; padding: 18px;
}
.sheet {
  width: min(720px, 100%); max-height: min(86vh, 860px); overflow: auto;
  background: #14121a; border: 1px solid rgba(231, 197, 106, .28);
  border-radius: 28px; padding: 20px; box-shadow: var(--shadow); color: var(--ink);
}
.sheet.narrow { width: min(420px, 100%); }
.sheet h2 { margin: 0 0 8px; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #1a1208; color: var(--gold); border: 1px solid rgba(231, 197, 106, .4);
  border-radius: 999px; padding: 12px 18px; z-index: 60;
}
.toast.bad { background: #4a1520; color: white; border-color: transparent; }
.guide { display: grid; gap: 8px; }
.guide div { background: rgba(16, 14, 22, .78); border-radius: 16px; padding: 12px 14px; border: 1px solid rgba(231, 197, 106, .16); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; unicode-bidi: isolate; }

@media (max-width: 980px) {
  .kiosk-body, .stats, .split { grid-template-columns: 1fr; }
  .floor-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .type-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile.slots, .tile.live { grid-column: span 2; grid-row: auto; }
  .rail {
    position: sticky; top: 74px; max-height: none; display: flex; overflow: auto;
    z-index: 15; padding: 8px 10px; gap: 8px;
    background: rgba(7, 6, 12, .94); border-bottom: 1px solid rgba(231, 197, 106, .2);
  }
  .rail-btn { min-width: 108px; flex: 0 0 auto; }
  .welcome { flex-direction: column; align-items: stretch; }
  .welcome h1 { font-size: 30px; }
  .admin { grid-template-columns: 1fr; }
  .admin, .side, .admin-main, .kiosk, .kiosk-body, .floor, .rail { min-width: 0; max-width: 100%; }
  .side { position: sticky; top: 0; height: auto; z-index: 15; padding: 12px; }
  .side nav { display: flex; overflow: auto; margin-top: 8px; gap: 8px; width: 100%; min-width: 0; }
  .side nav button { flex: 0 0 auto; white-space: nowrap; }
  .scene-pin { display: none; }
  .admin-top { flex-wrap: wrap; }
  .admin-main { padding: 14px 14px 36px; }
}
@media (max-width: 760px) {
  .login-wrap { padding: 58px 12px calc(16px + env(safe-area-inset-bottom)); }
  .login-card { padding: 22px 16px 18px; border-radius: 22px; }
  .crest { width: 84px; height: 84px; }
  .crest img { width: 66px; }
  .word { font-size: 28px; letter-spacing: .08em; }
  .marquee span { letter-spacing: .06em; font-size: 13px; }
  input, select, textarea { font-size: 16px; }
  .kbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand who pill"
      "station actions actions";
    gap: 8px 10px;
    align-items: center;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  }
  .brand { grid-area: brand; }
  .who-line { grid-area: who; }
  .pill { grid-area: pill; }
  .station-badge { grid-area: station; }
  .kbar-actions { grid-area: actions; }
  .clock, .spacer { display: none; }
  .brand img { width: 34px; }
  .brand strong { font-size: 13px; letter-spacing: .04em; }
  .station-badge { min-width: 0; padding: 4px 8px; }
  .station-badge b { font-size: 18px; }
  .who-line { min-width: 0; }
  .who-line b, .who-line small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pill { padding: 6px 12px; }
  .pill span { display: none; }
  .pill b { font-size: 16px; }
  .kbar-actions .btn { flex: 1; height: 42px; }
  .rail { top: calc(108px + env(safe-area-inset-top)); }
  .floor { padding: 8px 10px calc(24px + env(safe-area-inset-bottom)); }
  body.app-player .filters { display: flex; }
  .filters { flex-wrap: wrap; }
  .providers, .search { width: 100%; }
  .welcome h1 { font-size: 26px; }
  .welcome-balance { min-width: 0; }
  .welcome-balance b { font-size: 26px; }
  .floor-grid { gap: 10px; grid-auto-rows: 118px; }
  .floor-grid { padding: 10px; border-radius: 20px; }
  .tile { min-height: 128px; padding: 12px; border-radius: 18px; }
  .tile strong { font-size: 22px; }
  .tile-mark { width: 46px; height: 46px; border-radius: 14px; top: 10px; right: 10px; }
  .tile-mark::before { font-size: 22px; }
  .tile.slots { min-height: 176px; }
  .tile.live { min-height: 150px; }
  .type-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .type-door { min-height: 72px; padding: 10px 12px; }
  .type-door b { font-size: 15px; }
  .shelf-head { align-items: center; }
  .shelf-head h2, .hall-title h1 { font-size: 20px; }
  .shelf-row .game, .recent-shelf .game { flex-basis: 148px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stage { height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  .stage iframe { height: calc(100dvh - 53px); min-height: calc(100dvh - 53px); }
  .sheet { border-radius: 20px; padding: 16px; }
  .toast { bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); text-align: center; }
  .admin-top h1 { font-size: 22px; }
  .admin-top .btn, .side .btn { width: 100%; }
  .seat-no { font-size: 32px; }
  .table-wrap { overflow: visible; }
  .table-wrap table { min-width: 0; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 12px 0;
  }
  .table-wrap td {
    display: grid;
    gap: 2px;
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }
  .table-wrap td:last-child { grid-column: 1 / -1; }
}
@media (hover: none) {
  .play-tag { opacity: 1; transform: none; }
  .game:hover, .tile:hover { transform: none; }
}
@media (max-width: 420px) {
  .station-badge span { display: none; }
  .tile strong { font-size: 18px; }
  .shelf-row .game, .recent-shelf .game { flex-basis: 136px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-pin, .boot-bar i, .pill.ping, .wheel, .marquee span { animation: none; }
}

body.is-login {
  background: #000 url("/stars/bg.jpg") center / cover fixed;
}
body.is-login .scene { display: none; }
.star-login { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; position: relative; }
.star-login-brand {
  position: absolute; top: 18px; inset-inline-start: 22px;
  display: flex; align-items: center; gap: 8px; color: white; text-decoration: none;
  font-family: Cinzel, Heebo, serif; letter-spacing: .08em;
}
.star-login-brand img { width: 42px; }
.star-login-brand span { color: var(--gold); }
.star-login-card {
  width: min(420px, 100%);
  background: #1b1b1b;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  padding: 28px 26px 24px;
}
.star-avatar {
  width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%;
  background: #2a2a2a url("/logo.svg") center 58% / 46px no-repeat;
  box-shadow: inset 0 0 0 8px #141414;
}
.star-login-card h1 { margin: 0; font-size: 32px; }
.star-login-card p { margin: 8px 0 18px; color: #d5d5d5; font-size: 14px; }
.star-login-card input { border-radius: 999px; background: #111; border-color: rgba(255, 255, 255, .16); }
.star-submit {
  height: 52px; border: 0; border-radius: 999px; width: 100%;
  background: linear-gradient(90deg, #f3d48a, #e0a15a 45%, #c9843a);
  color: #1a1208; font-weight: 800; letter-spacing: .08em; cursor: pointer;
}
.more .star-submit { width: min(280px, 100%); }

body.app-player { background: #000; }
body.app-player .rail { display: none !important; }
body.app-player .scene { display: none; }
.star-kiosk {
  min-height: 100dvh;
  direction: ltr;
  background:
    linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)),
    url("/stars/bg.jpg") center top / cover fixed;
}
.star-pill, .star-when, .star-title, .star-cat b, .star-exit, body.app-player .game { direction: rtl; }
.starbar {
  position: sticky; top: 0; z-index: 8; height: 80px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 30px; background: #313131;
}
.starbar-side { display: flex; align-items: center; gap: 24px; min-width: 0; }
.star-brand {
  display: flex; align-items: center; gap: 8px; background: none; border: 0; color: white; padding: 0;
  font-family: Cinzel, Heebo, serif; letter-spacing: .06em;
}
.star-brand img { width: 42px; }
.star-brand span { color: #f0d48a; }
.star-links { display: flex; gap: 24px; }
.star-ico {
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(240, 212, 138, .75);
  background: transparent; display: grid; place-items: center; padding: 0;
}
.star-ico img { width: 22px; height: 22px; }
.star-pill {
  height: 50px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
  background: #1a1a1a; color: white; display: flex; align-items: center; gap: 8px; padding: 0 14px;
}
.star-pill small { display: block; font-size: 11px; color: #cfcfcf; }
.star-pill b { font-size: 14px; }
.star-user { text-align: start; }
.star-letter {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #f2f2f2; color: #111; font-weight: 800;
}
.star-when { display: grid; gap: 2px; color: white; font-size: 13px; }
.star-when span { display: flex; align-items: center; gap: 6px; }
.star-when img { width: 16px; height: 16px; }
.star-online { width: 14px; height: 14px; border-radius: 50%; background: #37e06a; box-shadow: 0 0 0 4px rgba(55, 224, 106, .15); }
.star-exit { background: transparent; border: 0; color: #ddd; font-size: 13px; padding: 0 4px; }
.star-tabbar { display: none; }
.star-tabbar img { width: 22px; height: 22px; }
.star-floor { padding: 18px 18px 40px; }
.star-wait { text-align: center; padding: 48px; color: white; }
.star-hero { position: relative; height: 540px; margin: 28px auto 0; overflow: hidden; }
.star-stage { position: absolute; left: 50%; top: 0; width: 1920px; height: 520px; transform-origin: top center; }
.star-poster {
  position: absolute; padding: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(226, 184, 92, .9); background: #111;
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease;
}
.star-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.star-float {
  position: absolute; top: 50%; left: 336px; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff;
  display: grid; place-items: center; padding: 0; z-index: 40;
}
.star-float.next { left: auto; right: 336px; }
.star-float img { width: 18px; height: 18px; }
.star-title {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  color: white; font-size: 26px; font-weight: 700; margin: 28px 0 16px;
}
.star-title::before, .star-title::after {
  content: ""; height: 1px; width: min(240px, 18vw);
  background: linear-gradient(90deg, transparent, rgba(226, 184, 92, .9), transparent);
}
.star-providers {
  width: min(1728px, calc(100% - 120px));
  margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px;
}
.star-providers button {
  height: 120px; width: 100%; border-radius: 16px; padding: 22px 28px;
  border: 1px solid rgba(226, 184, 92, .9);
  background: linear-gradient(180deg, #2c2c2c, #141414);
}
.star-providers button { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.star-providers button:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.star-providers button.on {
  outline: 3px solid #e2b85c; outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(226, 184, 92, .18), 0 12px 28px rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, #3a3324, #1a150c);
}
.star-providers img { width: 100%; height: 100%; object-fit: contain; }
.star-filterbar {
  width: min(1728px, calc(100% - 120px));
  margin: 0 auto 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.star-count {
  color: #f0d48a; font-weight: 800; font-size: 14px; letter-spacing: .3px;
  padding: 0 6px;
}
.star-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border: 1px solid rgba(226, 184, 92, .7); border-radius: 999px; cursor: pointer;
  background: rgba(226, 184, 92, .12); color: #fff; font-size: 14px; font-weight: 700;
}
.star-chip span { color: #e2b85c; font-weight: 400; }
.star-chip-all { background: transparent; color: #f0d48a; }
body.app-player .game { transition: transform .16s ease; }
body.app-player .game:hover { transform: translateY(-4px); }
.star-catbar {
  position: relative; width: min(1728px, calc(100% - 120px)); height: 130px;
  margin: 8px auto 22px; background: rgba(16, 16, 16, .92);
  border: 1px solid rgba(226, 184, 92, .35); border-radius: 18px;
}
.star-catbar .star-float { left: 30px; }
.star-catbar .star-float.next { left: auto; right: 30px; }
.star-catscroll {
  position: absolute; inset: 16px 86px; display: flex; overflow: auto; scroll-behavior: smooth; scrollbar-width: none;
}
.star-catscroll::-webkit-scrollbar { display: none; }
.star-cat {
  appearance: none; background: transparent; border: 0; color: #eee;
  flex: 0 0 227px; height: 98px; padding: 8px 6px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.star-cat img { width: 42px; height: 42px; object-fit: contain; display: block; margin: 0 auto 6px; }
.star-cat.on { color: #fff; }
.star-grid {
  width: min(1728px, calc(100% - 120px));
  margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 24px;
}
.limit-floors {
  width: min(1728px, calc(100% - 120px));
  margin: 4px auto 18px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.limit-floors > span { color: #f3d48a; font-weight: 800; margin-inline-end: 4px; }
.limit-floor {
  border: 1px solid rgba(243, 212, 138, .5); background: #17130e; color: #fff;
  border-radius: 999px; min-height: 40px; padding: 0 14px; font: inherit; font-weight: 800; cursor: pointer;
}
.limit-floor.on { border-color: transparent; color: #1a1208; background: linear-gradient(90deg, #f3d48a, #e0a15a 55%, #c9843a); }
body.app-player .game-limit {
  position: relative; z-index: 1; display: block; margin-top: 4px; font-style: normal; font-weight: 800;
  color: #f3d48a; font-size: clamp(13px, .9vw, 16px); letter-spacing: .2px; unicode-bidi: isolate;
}
.star-more {
  display: block; margin: 28px auto 8px; min-width: 220px; height: 48px; border: 0; border-radius: 999px;
  color: #1a1208; font-weight: 800;
  background: linear-gradient(90deg, #f3d48a, #e0a15a 45%, #c9843a);
}
body.app-player .game {
  appearance: none; background: transparent; border: 0; border-radius: 0; padding: 0;
  text-align: center; color: #fff;
}
body.app-player .game { display: block; width: 100%; }
body.app-player .thumb {
  position: relative; z-index: 1; display: grid; margin: 0; aspect-ratio: 286 / 198;
  border-radius: 20px; padding: 2px; overflow: hidden; border: 0;
  background: linear-gradient(270deg, #be8f5f, #ffe69e);
}
body.app-player .thumb > * { grid-area: 1 / 1; width: 100%; height: 100%; }
body.app-player .thumb img, body.app-player .thumb-fallback {
  object-fit: cover; display: block; border-radius: 18px; background: #313131;
}
body.app-player .thumb-fallback { display: grid; place-items: center; color: #f0d48a; font-weight: 800; }
body.app-player .game-plate {
  position: relative; z-index: 2; margin-top: 8px; min-height: 0; border-radius: 20px;
  padding: 12px 12px 10px; color: #fff;
  background: linear-gradient(270deg, #be8f5f, #ffe69e);
}
body.app-player .game-plate::before {
  content: ""; position: absolute; inset: 2px; border-radius: 18px; background: #313131; z-index: 0;
}
body.app-player .game-plate b, body.app-player .game-plate small { position: relative; z-index: 1; display: block; }
body.app-player .game b {
  min-height: 0; margin: 0; font-size: clamp(16px, 1.15vw, 22px); font-weight: 700; line-height: 1.45; color: #fff;
}
body.app-player .game small {
  margin-top: 2px; letter-spacing: .4px; text-transform: uppercase;
  font-size: clamp(13px, .95vw, 18px); font-weight: 400; color: #fff;
}
body.app-player .play-tag, body.app-player .ribbon { display: none; }
body.app-player .filters { display: flex; justify-content: center; margin-bottom: 12px; }
body.app-player .search { width: min(420px, 100%); border-radius: 999px; background: #111; }
@media (max-width: 1100px) {
  .star-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .star-providers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 760px) {
  .starbar { height: auto; flex-wrap: wrap; padding: 10px; }
  .star-when, .star-online { display: none; }
  .star-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star-providers button { height: 84px; }
  body.app-player .game-plate { padding: 10px 8px; }
  .theme-pick { grid-template-columns: 1fr; }
}

/* Extra kiosk skins. Classic black-and-gold is not restyled.
   Lagoon is a neon-reef night lobby with a side rail.
   Ember is a VIP fire house with a cinematic banner and a bottom dock. */
@keyframes reef-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4%, 3%, 0) scale(1.06); }
}
@keyframes ember-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(3%, -2%, 0); }
}

html[data-kiosk="lagoon"] .boot {
  background:
    radial-gradient(520px 260px at 50% 42%, rgba(45, 212, 191, .22), transparent 70%),
    #03141c;
}
html[data-kiosk="lagoon"] .boot-word,
html[data-kiosk="lagoon"] .boot-word span { color: #b8fff4; font-family: Heebo, sans-serif; letter-spacing: 0; }
html[data-kiosk="lagoon"] .boot-bar { background: rgba(94, 234, 212, .18); }
html[data-kiosk="lagoon"] .boot-bar i { background: linear-gradient(90deg, #14b8a6, #67e8f9); }

body.is-login[data-kiosk="lagoon"] { background: #03141c; }
body.is-login[data-kiosk="lagoon"] .star-login {
  display: grid; grid-template-columns: 1.15fr .85fr; place-items: stretch;
  min-height: 100vh; padding: 0;
  background:
    linear-gradient(100deg, rgba(3, 20, 28, .2) 0%, rgba(3, 20, 28, .55) 46%, #03141c 62%),
    url("/stars/slider/4.jpg") left center / cover no-repeat;
}
body.is-login[data-kiosk="lagoon"] .star-login-brand {
  position: static; align-self: end; padding: 56px;
  font-family: Heebo, sans-serif; font-size: 54px; font-weight: 800; letter-spacing: 0; line-height: .9;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
body.is-login[data-kiosk="lagoon"] .star-login-brand span { color: #5eead4; }
body.is-login[data-kiosk="lagoon"] .star-login-card {
  width: auto; min-height: 100vh; margin: 0; border-radius: 0; border: 0;
  background: rgba(3, 16, 24, .78); color: #f3fffd;
  box-shadow: none; backdrop-filter: blur(16px);
  display: flex; flex-direction: column; justify-content: center; padding: 56px 48px;
  border-inline-start: 1px solid rgba(94, 234, 212, .28);
}
body.is-login[data-kiosk="lagoon"] .star-avatar { display: none; }
body.is-login[data-kiosk="lagoon"] .star-login-card h1 {
  font-family: Heebo, sans-serif; font-size: 44px; font-weight: 800; color: white; text-align: start;
}
body.is-login[data-kiosk="lagoon"] .star-login-card p { color: #9adfd4; text-align: start; font-size: 16px; }
body.is-login[data-kiosk="lagoon"] .star-login-card input {
  height: 52px; border-radius: 12px; background: rgba(0, 0, 0, .35); color: white;
  border: 1px solid rgba(94, 234, 212, .35);
}
body.is-login[data-kiosk="lagoon"] .star-login-card input::placeholder { color: rgba(255, 255, 255, .45); }
body.is-login[data-kiosk="lagoon"] .star-submit {
  height: 56px; border-radius: 14px; letter-spacing: 0; font-size: 18px;
  background: linear-gradient(90deg, #5eead4, #22d3ee);
  color: #042028; box-shadow: 0 10px 30px rgba(34, 211, 238, .28);
}

body.app-player[data-kiosk="lagoon"] { background: #03141c; }
body.app-player[data-kiosk="lagoon"] .star-kiosk {
  display: grid; grid-template-columns: 272px minmax(0, 1fr);
  direction: rtl; min-height: 100dvh; background: #03141c; color: #f3fffd;
}
body.app-player[data-kiosk="lagoon"] .star-kiosk::before {
  content: ""; position: fixed; inset: -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(45, 212, 191, .28), transparent 26%),
    radial-gradient(circle at 82% 8%, rgba(56, 189, 248, .22), transparent 24%),
    radial-gradient(circle at 70% 88%, rgba(16, 185, 129, .16), transparent 28%);
  animation: reef-float 18s ease-in-out infinite;
}
body.app-player[data-kiosk="lagoon"] .starbar,
body.app-player[data-kiosk="lagoon"] .star-floor { position: relative; z-index: 1; }
body.app-player[data-kiosk="lagoon"] .starbar {
  position: sticky; top: 0; height: 100dvh; width: 272px;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 16px; padding: 22px 16px;
  background: rgba(3, 18, 26, .86); backdrop-filter: blur(18px);
  border-inline-end: 1px solid rgba(94, 234, 212, .28);
  box-shadow: 12px 0 40px rgba(0, 0, 0, .25);
}
body.app-player[data-kiosk="lagoon"] .starbar-side {
  flex-direction: column; align-items: stretch; gap: 12px;
}
body.app-player[data-kiosk="lagoon"] .star-brand {
  font-family: Heebo, sans-serif; letter-spacing: 0; font-size: 22px;
}
body.app-player[data-kiosk="lagoon"] .star-brand span { color: #5eead4; }
body.app-player[data-kiosk="lagoon"] .star-links { flex-direction: row; gap: 8px; }
body.app-player[data-kiosk="lagoon"] .star-ico {
  width: 48px; height: 48px; border-radius: 14px; border: 1px solid rgba(94, 234, 212, .35);
  background: rgba(94, 234, 212, .08); padding: 0;
}
body.app-player[data-kiosk="lagoon"] .star-ico img { width: 22px; height: 22px; }
body.app-player[data-kiosk="lagoon"] .star-pill {
  height: auto; width: 100%; border-radius: 16px; border: 1px solid rgba(94, 234, 212, .3);
  background: linear-gradient(180deg, rgba(8, 40, 48, .95), rgba(3, 18, 26, .95));
  padding: 12px 14px; box-shadow: 0 0 24px rgba(45, 212, 191, .12);
}
body.app-player[data-kiosk="lagoon"] .star-pill b { font-size: 22px; color: #b8fff4; }
body.app-player[data-kiosk="lagoon"] .star-pill small { color: #8fd4cb; }
body.app-player[data-kiosk="lagoon"] .star-letter {
  border-radius: 10px; background: #5eead4; color: #042028;
}
body.app-player[data-kiosk="lagoon"] .star-exit {
  height: 46px; border-radius: 12px; color: #b8fff4; font-weight: 700;
  border: 1px solid rgba(94, 234, 212, .4); background: transparent;
}
body.app-player[data-kiosk="lagoon"] .star-online {
  align-self: flex-start; background: #5eead4; box-shadow: 0 0 0 6px rgba(94, 234, 212, .15);
}
body.app-player[data-kiosk="lagoon"] .star-floor { padding: 22px 26px 56px; }
body.app-player[data-kiosk="lagoon"] .star-hero {
  height: auto !important; margin: 0 0 18px; overflow: visible;
}
body.app-player[data-kiosk="lagoon"] .star-stage {
  position: static !important; left: auto !important; top: auto !important;
  width: auto !important; height: auto !important; transform: none !important;
  display: flex; gap: 14px; overflow: auto; padding: 4px 2px 8px; scrollbar-width: none;
}
body.app-player[data-kiosk="lagoon"] .star-stage::-webkit-scrollbar { display: none; }
body.app-player[data-kiosk="lagoon"] .star-poster {
  position: relative !important; left: auto !important; top: auto !important;
  width: 320px !important; height: 180px !important; flex: 0 0 320px;
  border-radius: 18px; border: 1px solid rgba(94, 234, 212, .55);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35), 0 0 28px rgba(45, 212, 191, .18);
}
body.app-player[data-kiosk="lagoon"] .star-hero .star-float { display: none; }
body.app-player[data-kiosk="lagoon"] .star-title {
  justify-content: flex-start; margin: 22px 0 12px; font-size: 13px;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7ee0d2;
}
body.app-player[data-kiosk="lagoon"] .star-title::before,
body.app-player[data-kiosk="lagoon"] .star-title::after { display: none; }
body.app-player[data-kiosk="lagoon"] .star-providers {
  width: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 10px;
  background: rgba(2, 12, 18, .72); border: 1px solid rgba(94, 234, 212, .22);
  border-radius: 18px; padding: 12px;
}
body.app-player[data-kiosk="lagoon"] .star-providers button {
  height: 92px; width: auto; flex: 1 1 170px; border-radius: 14px; padding: 14px 18px;
  border: 1px solid rgba(94, 234, 212, .28); background: #021016;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}
body.app-player[data-kiosk="lagoon"] .star-providers img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}
body.app-player[data-kiosk="lagoon"] .star-providers button.on {
  outline: none; border-color: #5eead4; box-shadow: 0 0 0 1px #5eead4, 0 0 24px rgba(94, 234, 212, .28);
}
body.app-player[data-kiosk="lagoon"] .star-catbar {
  position: static; width: 100%; height: auto; margin: 0 0 18px;
  background: transparent; border: 0; border-radius: 0;
}
body.app-player[data-kiosk="lagoon"] .star-catbar .star-float { display: none; }
body.app-player[data-kiosk="lagoon"] .star-catscroll {
  position: static; inset: auto; display: flex; flex-wrap: wrap; gap: 8px; overflow: visible;
}
body.app-player[data-kiosk="lagoon"] .star-cat {
  flex: 0 0 auto; height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-radius: 999px; color: #e7fffb;
  border: 1px solid rgba(94, 234, 212, .35); background: rgba(3, 22, 30, .8);
}
body.app-player[data-kiosk="lagoon"] .star-cat img { width: 22px; height: 22px; margin: 0; }
body.app-player[data-kiosk="lagoon"] .star-cat.on {
  background: #5eead4; color: #042028; border-color: #5eead4; font-weight: 800;
}
body.app-player[data-kiosk="lagoon"] .star-cat.on img { filter: brightness(0); }
body.app-player[data-kiosk="lagoon"] .star-grid {
  width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
body.app-player[data-kiosk="lagoon"] .game {
  background: rgba(4, 20, 28, .92); border-radius: 18px; overflow: hidden; text-align: start;
  border: 1px solid rgba(94, 234, 212, .2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
body.app-player[data-kiosk="lagoon"] .thumb {
  aspect-ratio: 16 / 10; border-radius: 0; padding: 0; background: #062028;
}
body.app-player[data-kiosk="lagoon"] .thumb img,
body.app-player[data-kiosk="lagoon"] .thumb-fallback {
  border-radius: 0; background: #062028; object-fit: cover;
}
body.app-player[data-kiosk="lagoon"] .thumb-fallback { color: #5eead4; }
body.app-player[data-kiosk="lagoon"] .game-plate {
  margin: 0; border-radius: 0; background: transparent; padding: 12px 14px 14px; text-align: start;
}
body.app-player[data-kiosk="lagoon"] .game-plate::before { display: none; }
body.app-player[data-kiosk="lagoon"] .game b { color: white; font-size: 17px; }
body.app-player[data-kiosk="lagoon"] .game small { color: #7ee0d2; text-transform: none; letter-spacing: 0; }
body.app-player[data-kiosk="lagoon"] .star-more {
  height: 52px; border-radius: 14px; color: #042028; font-size: 16px;
  background: linear-gradient(90deg, #5eead4, #22d3ee);
}
body.app-player[data-kiosk="lagoon"] .search {
  border-radius: 12px; background: #021016; color: white; border: 1px solid rgba(94, 234, 212, .35);
}

html[data-kiosk="ember"] .boot {
  background:
    radial-gradient(520px 260px at 50% 40%, rgba(255, 122, 89, .2), transparent 70%),
    #10060a;
}
html[data-kiosk="ember"] .boot-word,
html[data-kiosk="ember"] .boot-word span { color: #ffb199; font-family: Heebo, sans-serif; letter-spacing: -.03em; }
html[data-kiosk="ember"] .boot-bar { background: #3a1820; height: 3px; }
html[data-kiosk="ember"] .boot-bar i { background: linear-gradient(90deg, #ff7a59, #ffd0a8); }

body.is-login[data-kiosk="ember"] {
  background: #10060a url("/stars/slider/6.jpg") center / cover no-repeat;
}
body.is-login[data-kiosk="ember"] .star-login {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  min-height: 100vh; padding: 0;
  background: linear-gradient(180deg, rgba(16, 6, 10, .15) 0%, rgba(16, 6, 10, .72) 58%, #10060a 100%);
}
body.is-login[data-kiosk="ember"] .star-login-brand {
  position: static; margin-top: auto; padding: 48px 36px 12px;
  font-family: Heebo, sans-serif; font-size: 72px; font-weight: 800; letter-spacing: -.04em; line-height: .88;
  text-shadow: 0 12px 40px rgba(0, 0, 0, .65);
}
body.is-login[data-kiosk="ember"] .star-login-brand span { color: #ff7a59; }
body.is-login[data-kiosk="ember"] .star-login-card {
  width: min(720px, calc(100% - 48px)); margin: 0 auto 28px; border-radius: 24px;
  background: rgba(16, 6, 10, .82); color: #fff4ef; box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 122, 89, .45); backdrop-filter: blur(16px); padding: 28px 28px 24px;
}
body.is-login[data-kiosk="ember"] .star-avatar { display: none; }
body.is-login[data-kiosk="ember"] .star-login-card h1 {
  font-family: Heebo, sans-serif; color: white; font-size: 32px; text-align: start;
}
body.is-login[data-kiosk="ember"] .star-login-card p { color: #ffc2b3; text-align: start; }
body.is-login[data-kiosk="ember"] .star-login-card input {
  height: 52px; border-radius: 0; border: 0; border-bottom: 2px solid rgba(255, 122, 89, .7);
  background: transparent; color: white;
}
body.is-login[data-kiosk="ember"] .star-login-card input::placeholder { color: rgba(255, 244, 239, .5); }
body.is-login[data-kiosk="ember"] .star-submit {
  height: 56px; border-radius: 12px; letter-spacing: 0; font-size: 18px;
  background: linear-gradient(90deg, #ffb199, #ff7a59 55%, #e11d48);
  color: #2a0c12; box-shadow: 0 12px 28px rgba(255, 122, 89, .28);
}

body.app-player[data-kiosk="ember"] { background: #10060a; }
body.app-player[data-kiosk="ember"] .star-kiosk {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(255, 122, 89, .16), transparent 50%),
    #10060a;
  padding-bottom: 108px;
}
body.app-player[data-kiosk="ember"] .star-kiosk::before {
  content: ""; position: fixed; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 122, 89, .22), transparent 24%),
    radial-gradient(circle at 10% 80%, rgba(190, 18, 60, .16), transparent 26%);
  animation: ember-float 16s ease-in-out infinite;
}
body.app-player[data-kiosk="ember"] .starbar,
body.app-player[data-kiosk="ember"] .star-floor { position: relative; z-index: 1; }
body.app-player[data-kiosk="ember"] .starbar {
  direction: rtl; height: 72px; padding: 0 22px; gap: 16px;
  background: rgba(16, 6, 10, .88); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 122, 89, .35);
}
body.app-player[data-kiosk="ember"] .star-brand {
  font-family: Heebo, sans-serif; letter-spacing: -.03em; font-size: 24px;
}
body.app-player[data-kiosk="ember"] .star-brand span { color: #ff7a59; }
body.app-player[data-kiosk="ember"] .star-links { gap: 8px; }
body.app-player[data-kiosk="ember"] .star-ico {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 122, 89, .35);
  background: rgba(255, 122, 89, .08);
}
body.app-player[data-kiosk="ember"] .star-pill {
  height: 48px; border-radius: 14px; background: rgba(255, 122, 89, .08);
  border: 1px solid rgba(255, 122, 89, .35); padding: 0 14px;
}
body.app-player[data-kiosk="ember"] .star-pill b { font-size: 20px; color: #ffd0c2; }
body.app-player[data-kiosk="ember"] .star-letter { border-radius: 10px; background: #ff7a59; color: #2a0c12; }
body.app-player[data-kiosk="ember"] .star-when,
body.app-player[data-kiosk="ember"] .star-online { display: none; }
body.app-player[data-kiosk="ember"] .star-exit {
  height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 800;
  background: linear-gradient(90deg, #ffb199, #ff7a59); color: #2a0c12;
}
body.app-player[data-kiosk="ember"] .star-floor { padding: 14px 22px 28px; }
body.app-player[data-kiosk="ember"] .star-hero {
  height: 320px !important; margin: 8px 0 8px; overflow: hidden; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255, 122, 89, .45), 0 24px 50px rgba(0, 0, 0, .45);
}
body.app-player[data-kiosk="ember"] .star-stage {
  position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important; transform: none !important;
}
body.app-player[data-kiosk="ember"] .star-poster { display: none; }
body.app-player[data-kiosk="ember"] .star-poster.is-center {
  display: block; position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important;
  border: 0; border-radius: 0;
}
body.app-player[data-kiosk="ember"] .star-hero .star-float { display: none; }
body.app-player[data-kiosk="ember"] .star-title {
  justify-content: flex-start; margin: 18px 0 12px; font-size: 28px; font-weight: 800; color: #fff4ef;
}
body.app-player[data-kiosk="ember"] .star-title::before,
body.app-player[data-kiosk="ember"] .star-title::after { display: none; }
body.app-player[data-kiosk="ember"] .star-providers {
  width: 100%; margin: 0; display: flex; gap: 12px; overflow: auto; padding: 4px 2px 8px;
}
body.app-player[data-kiosk="ember"] .star-providers button {
  flex: 0 0 210px; width: 210px; height: 100px; border-radius: 16px; padding: 16px 22px;
  border: 1px solid rgba(255, 176, 154, .5); background: #14080c;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 0 24px rgba(255, 122, 89, .05);
}
body.app-player[data-kiosk="ember"] .star-providers img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
}
body.app-player[data-kiosk="ember"] .star-providers button.on {
  outline: none; border-color: #ff7a59;
  box-shadow: 0 0 0 1px #ff7a59, 0 0 28px rgba(255, 122, 89, .35);
}
body.app-player[data-kiosk="ember"] .star-catbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
  width: auto; height: 84px; margin: 0; border-radius: 22px;
  background: rgba(20, 8, 12, .94); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 122, 89, .4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
body.app-player[data-kiosk="ember"] .star-catbar .star-float { display: none; }
body.app-player[data-kiosk="ember"] .star-catscroll {
  position: absolute; inset: 0; display: flex; align-items: stretch; overflow: auto; gap: 4px; padding: 8px;
}
body.app-player[data-kiosk="ember"] .star-cat {
  flex: 1 0 104px; height: auto; border: 0; border-radius: 16px; color: #ffd0c2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
body.app-player[data-kiosk="ember"] .star-cat img { width: 26px; height: 26px; margin: 0; }
body.app-player[data-kiosk="ember"] .star-cat.on {
  color: #2a0c12; background: linear-gradient(180deg, #ffb199, #ff7a59); box-shadow: none; font-weight: 800;
}
body.app-player[data-kiosk="ember"] .star-cat.on img { filter: brightness(0); }
body.app-player[data-kiosk="ember"] .star-grid {
  width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
body.app-player[data-kiosk="ember"] .game {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 122, 89, .28);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
}
body.app-player[data-kiosk="ember"] .star-grid .game:first-child { grid-column: span 2; }
body.app-player[data-kiosk="ember"] .thumb {
  aspect-ratio: 16 / 10; border-radius: 0; padding: 0; background: #1a0c10;
}
body.app-player[data-kiosk="ember"] .star-grid .game:first-child .thumb { aspect-ratio: 21 / 9; }
body.app-player[data-kiosk="ember"] .thumb img,
body.app-player[data-kiosk="ember"] .thumb-fallback {
  border-radius: 0; background: #1a0c10; object-fit: cover;
}
body.app-player[data-kiosk="ember"] .thumb-fallback { color: #ffb199; }
body.app-player[data-kiosk="ember"] .game-plate {
  position: absolute; left: 0; right: 0; top: 0; bottom: auto; z-index: 3; margin: 0;
  border-radius: 0; padding: 12px 14px 36px; text-align: start;
  background: linear-gradient(to bottom, rgba(8, 2, 4, .92) 0%, rgba(8, 2, 4, .45) 55%, transparent 100%);
}
body.app-player[data-kiosk="ember"] .game-plate::before { display: none; }
body.app-player[data-kiosk="ember"] .game b { font-size: 18px; color: white; }
body.app-player[data-kiosk="ember"] .game small { color: #ffb199; text-transform: none; letter-spacing: 0; }
body.app-player[data-kiosk="ember"] .star-more {
  height: 52px; border-radius: 14px; font-size: 16px;
  background: linear-gradient(90deg, #ffb199, #ff7a59); color: #2a0c12;
}
body.app-player[data-kiosk="ember"] .search {
  border-radius: 12px; background: #14080c; color: #fff4ef; border: 1px solid rgba(255, 122, 89, .45);
}

@media (max-width: 900px) {
  body.is-login[data-kiosk="lagoon"] .star-login { grid-template-columns: 1fr; background-position: center; }
  body.is-login[data-kiosk="lagoon"] .star-login-brand { padding: 28px 20px 0; font-size: 36px; }
  body.is-login[data-kiosk="lagoon"] .star-login-card { min-height: auto; padding: 28px 20px 36px; }
  body.is-login[data-kiosk="ember"] .star-login-brand { font-size: 42px; padding: 28px 20px 8px; }
  body.is-login[data-kiosk="ember"] .star-login-card { width: calc(100% - 24px); }
  body.app-player[data-kiosk="lagoon"] .star-kiosk { grid-template-columns: 1fr; }
  body.app-player[data-kiosk="lagoon"] .starbar {
    position: sticky; height: auto; width: auto; flex-direction: row; flex-wrap: wrap;
  }
  body.app-player[data-kiosk="lagoon"] .starbar-side,
  body.app-player[data-kiosk="lagoon"] .star-links { flex-direction: row; flex-wrap: wrap; }
  body.app-player[data-kiosk="lagoon"] .star-grid,
  body.app-player[data-kiosk="ember"] .star-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-player[data-kiosk="ember"] .star-grid .game:first-child { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-player[data-kiosk="lagoon"] .star-kiosk::before,
  body.app-player[data-kiosk="ember"] .star-kiosk::before { animation: none; }
}

/* ---------- Phones and small tablets. Desktop rules above are untouched. ---------- */
@media (max-width: 1100px) {
  .star-providers, .star-catbar, .star-grid, .limit-floors { width: calc(100% - 40px); }
  .starbar { padding: 0 16px; gap: 12px; }
  .starbar-side { gap: 12px; }
  .star-brand strong { white-space: nowrap; }
  .star-links { gap: 10px; }
  .star-when { display: none; }
  .star-pill { padding: 0 12px; }
  .star-pill b { white-space: nowrap; }
}

@media (max-width: 760px) {
  html { overflow-x: hidden; }
  label > input, label > select, label > textarea, .limit-grid input, .limit-grid select { width: 100%; min-width: 0; max-width: 100%; }
  input, select, textarea { height: 48px; border-radius: 12px; }
  .btn { height: 46px; }
  .btn.small { height: 40px; }

  /* Player: header */
  .starbar {
    position: sticky; top: 0; z-index: 12; height: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  }
  .starbar-side { gap: 8px; min-width: 0; }
  .starbar-side:first-child { justify-content: space-between; }
  .starbar-side:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .star-brand img { width: 34px; }
  .star-brand strong { font-size: 14px; }
  .star-links { gap: 8px; }
  .star-ico { width: 40px; height: 40px; }
  .star-ico img { width: 18px; height: 18px; }
  .star-pill { height: 44px; padding: 0 10px; gap: 6px; min-width: 0; border-radius: 14px; }
  .star-pill > img { width: 18px; height: 18px; flex: none; }
  .star-pill > span { min-width: 0; }
  .star-pill small { font-size: 10px; }
  .star-pill b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .star-letter { width: 28px; height: 28px; font-size: 13px; flex: none; }
  .star-exit { height: 44px; padding: 0 12px; border: 1px solid rgba(240, 212, 138, .5); border-radius: 14px; color: #f0d48a; font-weight: 700; }
  .star-when, .star-online { display: none; }
  body.app-player[data-kiosk="lagoon"] .starbar,
  body.app-player[data-kiosk="ember"] .starbar { height: auto; width: auto; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  body.app-player[data-kiosk="lagoon"] .starbar-side,
  body.app-player[data-kiosk="ember"] .starbar-side { flex-direction: row; }
  body.app-player[data-kiosk="lagoon"] .star-pill,
  body.app-player[data-kiosk="ember"] .star-pill { height: 44px; width: auto; padding: 0 10px; }
  body.app-player[data-kiosk="lagoon"] .star-pill b,
  body.app-player[data-kiosk="ember"] .star-pill b { font-size: 13px; }
  body.app-player[data-kiosk="lagoon"] .star-exit,
  body.app-player[data-kiosk="ember"] .star-exit { height: 44px; padding: 0 12px; }
  body.app-player[data-kiosk="lagoon"] .star-floor { padding: 12px 0 calc(112px + env(safe-area-inset-bottom)); }
  body.app-player[data-kiosk="ember"] .star-floor { padding: 8px 0 calc(168px + env(safe-area-inset-bottom)); }
  body.app-player[data-kiosk="lagoon"] .star-hero { margin: 0 12px 14px; }
  body.app-player[data-kiosk="ember"] .star-hero { margin: 8px 12px; }
  body.app-player[data-kiosk="lagoon"] .star-title,
  body.app-player[data-kiosk="ember"] .star-title { margin-inline: 12px; }
  body.app-player[data-kiosk="lagoon"] .star-providers,
  body.app-player[data-kiosk="ember"] .star-providers,
  body.app-player[data-kiosk="lagoon"] .star-grid,
  body.app-player[data-kiosk="ember"] .star-grid { width: calc(100% - 24px); margin: 0 auto; }
  body.app-player[data-kiosk="ember"] .star-providers { width: 100%; padding-inline: 12px; }
  body.app-player[data-kiosk="lagoon"] .star-catbar { margin: 0 12px 14px; width: auto; }
  body.app-player[data-kiosk="ember"] .star-cat { background: transparent; font-size: 12px; }
  body.app-player[data-kiosk="lagoon"] .star-providers button { flex: 1 1 calc(50% - 10px); height: 64px; padding: 10px 14px; }

  /* Player: lobby */
  .star-floor { padding: 8px 0 calc(112px + env(safe-area-inset-bottom)); }
  .star-links .star-ico[data-kind] { display: none; }
  .star-tabbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
    height: calc(62px + env(safe-area-inset-bottom));
    padding: 4px 4px env(safe-area-inset-bottom);
    background: rgba(17, 17, 17, .96); border-top: 1px solid rgba(226, 184, 92, .45);
    backdrop-filter: blur(14px); direction: rtl;
  }
  .star-tabbar button {
    flex: 1 1 0; min-width: 0; height: 54px; border: 0; border-radius: 12px;
    background: transparent; color: #dedede; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  .star-tabbar button b { font-size: 11px; font-weight: 600; line-height: 1.15; }
  .star-tabbar button.on { color: #1a1208; background: linear-gradient(180deg, #f3d48a, #c9843a); }
  .star-tabbar button.on img { filter: brightness(0); }
  .star-tabbar img { width: 22px; height: 22px; max-width: 22px; }
  body.app-player[data-kiosk="ember"] .star-catbar { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.app-player .filters { padding: 0 12px; margin: 8px 0 4px; flex-wrap: wrap; gap: 8px; }
  body.app-player .filters[hidden], body.app-player .providers[hidden] { display: none; }
  body.app-player .providers { width: 100%; height: 46px; border-radius: 999px; background: #111; }
  body.app-player .search { width: 100%; height: 46px; }
  .star-wait { padding: 40px 12px; }
  .star-hero { height: auto !important; margin: 8px 0 0; overflow: visible; }
  .star-stage {
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; height: auto !important; transform: none !important;
    display: flex; gap: 10px; overflow-x: auto; padding: 4px 12px 10px;
    scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none;
  }
  .star-stage::-webkit-scrollbar { display: none; }
  .star-poster {
    position: relative !important; left: auto !important; top: auto !important;
    width: 46vw !important; height: 62vw !important; flex: 0 0 46vw;
    scroll-snap-align: center; border-radius: 14px; transition: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
  }
  .star-hero .star-float { display: none; }
  .star-title { font-size: 18px; gap: 10px; margin: 18px 12px 10px; }
  .star-title::before, .star-title::after { width: 36px; flex: none; }
  .star-providers { width: calc(100% - 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .star-providers button { height: 68px; min-width: 0; padding: 10px 16px; border-radius: 12px; }
  .star-providers button { transition: none; }
  .star-providers button:hover, body.app-player .game:hover { transform: none; }
  .star-providers button.on { outline-width: 2px; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(226, 184, 92, .2); }
  .star-filterbar { width: calc(100% - 24px); margin: 0 auto 12px; gap: 6px; }
  .star-chip { height: 34px; padding: 0 12px; font-size: 13px; }
  .star-catbar {
    position: sticky; top: var(--starbar-h, 96px); z-index: 6;
    width: 100%; height: auto; margin: 0 0 12px;
    background: linear-gradient(#07060c 70%, rgba(7, 6, 12, .92));
    border: 0; border-radius: 0;
  }
  .star-catbar .star-float { display: none; }
  .star-catscroll {
    position: static; inset: auto; display: flex; gap: 8px; overflow-x: auto;
    padding: 2px 12px 6px; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .star-cat {
    flex: 0 0 auto; height: 42px; display: flex; align-items: center; gap: 8px;
    padding: 0 14px; border: 1px solid rgba(226, 184, 92, .45); border-radius: 999px;
    background: rgba(16, 16, 16, .92); color: #eee; font-size: 14px; scroll-snap-align: start;
  }
  .star-cat img { width: 20px; height: 20px; margin: 0; }
  .star-cat b { font-weight: 600; }
  .star-cat.on { background: linear-gradient(180deg, #f3d48a, #c9843a); color: #1a1208; border-color: transparent; }
  .star-cat.on b { font-weight: 800; }
  .star-cat.on img { filter: brightness(0); }
  .star-grid, .limit-floors { width: calc(100% - 24px); }
  .star-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  body.app-player .thumb { border-radius: 14px; }
  body.app-player .thumb img, body.app-player .thumb-fallback { border-radius: 12px; }
  body.app-player .game-plate { margin-top: 6px; border-radius: 14px; padding: 8px 8px 7px; }
  body.app-player .game-plate::before { border-radius: 12px; }
  body.app-player .game b {
    font-size: 14px; line-height: 1.3; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.app-player .game small { font-size: 11px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .star-more { min-width: 0; width: min(280px, calc(100% - 24px)); }
  .empty { padding: 32px 12px 40px; grid-column: 1 / -1; }

  /* Player: slots hall, shelves, account */
  body.app-player .hall-title, body.app-player .type-row, body.app-player .shelf, body.app-player .account { margin-inline: 12px; }
  body.app-player .shelf-row { padding-bottom: 8px; }
  body.app-player .shelf-row .game, body.app-player .recent-shelf .game { flex: 0 0 150px; }
  body.app-player .shelf-head .btn { height: 36px; padding: 0 12px; font-size: 13px; }
  body.app-player .studio-wrap { gap: 6px; }
  body.app-player .studio { padding: 8px 12px; font-size: 14px; }
  body.app-player .account .card { padding: 14px; }
  body.app-player .hall-title { flex-wrap: wrap; }

  /* Game stage */
  .playbar { height: calc(50px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 10px 8px; }
  .play-info { gap: 10px; }
  .play-info b { font-size: 14px; }
  .play-studio { display: none; }
  .play-actions { gap: 8px; }
  .play-ico { width: 36px; height: 36px; }
  .stage iframe { height: calc(100dvh - 50px - env(safe-area-inset-top)); min-height: 0; }

  /* Sheets become bottom sheets */
  .modal { padding: 0; align-items: end; justify-items: stretch; }
  .sheet {
    width: 100%; max-height: min(92dvh, 100%); border-radius: 22px 22px 0 0;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-bottom: 0;
  }
  .sheet.narrow { width: 100%; }
  .sheet h2 { font-size: 20px; }
  .sheet h3 { font-size: 16px; margin: 16px 0 6px; }
  .sheet .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sheet .stat { padding: 12px 14px; }
  .sheet .stat b { font-size: 18px; }

  /* Admin: shell */
  .admin { display: block; min-height: 100dvh; }
  .side {
    position: sticky; top: 0; z-index: 15; height: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    border-left: 0; border-bottom: 1px solid rgba(231, 197, 106, .22);
    background: rgba(8, 7, 12, .94); backdrop-filter: blur(14px);
  }
  .side .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .side .brand img { width: 32px; }
  .side .brand strong { font-size: 14px; }
  .side .spacer { display: none; }
  .side > .btn { grid-column: 2; grid-row: 1; width: auto; height: 36px; padding: 0 14px; font-size: 13px; }
  .side nav {
    grid-column: 1 / -1; grid-row: 2; display: flex; gap: 6px; margin: 0; width: 100%; min-width: 0;
    overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav button { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; font-size: 14px; border-radius: 999px; scroll-snap-align: center; }
  .admin-main { padding: 12px 12px calc(36px + env(safe-area-inset-bottom)); }
  .admin-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-bottom: 12px; }
  .admin-top h1 { font-size: 20px; }
  .admin-top > select { grid-column: 1 / -1; height: 44px; }
  .admin-top [data-act="fullscreen"] { display: none; }

  /* Admin: cards, stats, tables */
  .card, .stat { padding: 14px; border-radius: 18px; }
  .card > h2 { font-size: 18px; margin: 0 0 4px; }
  .split > div > h2 { font-size: 18px; margin: 4px 0 8px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat b { font-size: 18px; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .station { padding: 12px; border-radius: 18px; }
  .seat-no { font-size: 28px; }
  .station .money { font-size: 16px; font-weight: 700; }
  .station-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .limit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .limit-grid label { font-size: 12px; }
  .limit-grid > .btn { grid-column: 1 / -1; }
  .admin-main form > .btn, .admin-main .card > a.btn { width: 100%; justify-content: center; }
  .table-wrap tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid rgba(231, 197, 106, .12); }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap td { font-size: 14px; overflow-wrap: anywhere; }
  .table-wrap td[dir="ltr"] { text-align: right; justify-items: end; }
  .table-wrap td:has(> .btn) { display: flex; flex-wrap: wrap; gap: 6px; }
  .table-wrap td:has(> .btn) .btn { flex: 1 1 calc(50% - 6px); height: 38px; font-size: 13px; padding: 0 10px; }
  .table-wrap td:has(> .btn)::before { display: none; }
  .person { flex-wrap: wrap; }
  .proof video { max-height: 56vw; }
  .theme-pick { grid-template-columns: 1fr 1fr; }
  .theme-card { padding: 10px; }
  .theme-swatch { height: 56px; }
}

@media (max-width: 380px) {
  .star-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-pick { grid-template-columns: 1fr; }
}

.offer-lines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.offer-lines button { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: inherit; border-radius: 999px; padding: 8px 14px; cursor: pointer; font: inherit; }
.offer-lines button.on { border-color: #e7c56a; color: #e7c56a; }
.offer-lines span { opacity: .75; }
.offer-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 12px; }
.offer-providers { display: grid; gap: 10px; margin: 14px 0; }
.offer-studio { border: 1px solid rgba(231, 197, 106, .18); border-radius: 14px; padding: 10px; background: rgba(8, 10, 16, .55); }
.offer-studio.on { border-color: rgba(231, 197, 106, .55); }
.offer-studio > button { display: flex; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: right; cursor: pointer; }
.offer-studio > button small { color: #e7c56a; }
.offer-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.offer-cats button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: inherit; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.offer-cats button.on { border-color: #e7c56a; color: #e7c56a; }
.offer-cats span { opacity: .7; }
.offer-find { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.offer-find input { flex: 1 1 180px; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.offer-card { border: 1px solid rgba(231, 197, 106, .16); border-radius: 14px; overflow: hidden; background: #10141c; }
.offer-card img, .offer-missing { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #1b2230; }
.offer-missing { display: grid; place-items: center; color: rgba(255,255,255,.45); font-size: 13px; }
.offer-card b, .offer-card small { display: block; padding: 0 10px; }
.offer-card b { margin-top: 8px; }
.offer-card small { color: rgba(255,255,255,.62); padding-bottom: 10px; }
.offer-list { display: grid; gap: 8px; margin-bottom: 12px; }
.offer-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; border: 1px solid rgba(231, 197, 106, .16); border-radius: 14px; padding: 8px; background: #10141c; }
.offer-row.on { border-color: rgba(72, 180, 110, .7); }
.offer-row img, .offer-row .offer-missing { width: 84px; height: 56px; aspect-ratio: auto; border-radius: 8px; }
.offer-row b, .offer-row small { display: block; padding: 0; }
.offer-row small { color: rgba(255,255,255,.62); }

body.studio-open { overflow: hidden; }
.studio-lobby {
  position: fixed; inset: 0; z-index: 32; background: #1e1e1e; color: #fff;
  display: flex; flex-direction: column; direction: ltr;
}
.studio-body { flex: 1; overflow: auto; padding: 10px 0 48px; }
.studio-tools {
  width: min(1728px, calc(100% - 96px)); margin: 4px auto 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.studio-search {
  display: flex; align-items: center; gap: 8px; height: 40px; min-width: min(280px, 46vw);
  padding: 0 12px; border-radius: 999px; background: #2a2a2a; border: 1px solid rgba(255, 255, 255, .08);
}
.studio-search img { width: 16px; height: 16px; opacity: .8; }
.studio-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; outline: none;
}
.studio-search input::placeholder { color: #9a9a9a; }
.studio-balance { color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.studio-balance b { font-weight: 800; }
.studio-banner {
  width: min(1728px, calc(100% - 96px)); height: clamp(200px, 28vw, 420px);
  margin: 0 auto 18px; border-radius: 12px; overflow: hidden; background: #111;
}
.studio-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.studio-catbar { margin-top: 0; }
body.app-player .studio-lobby .star-catbar {
  position: sticky; top: 0; left: auto; right: auto; bottom: auto; z-index: 6;
  width: 100%; margin: 0 0 12px; background: #1e1e1e;
}
.studio-catbar .star-cat.on { color: #fff; box-shadow: inset 0 -3px 0 #e2b85c; }
.studio-catbar .star-catscroll { inset: 16px 18px; }
.studio-lobby .limit-floors { width: min(1728px, calc(100% - 96px)); margin: 4px auto 8px; }
.studio-grid { margin-top: 8px; }
.studio-empty { grid-column: 1 / -1; text-align: center; color: #ddd; padding: 48px 12px; }
@media (max-width: 900px) {
  .studio-tools, .studio-banner, .studio-lobby .limit-floors { width: calc(100% - 24px); }
  .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .studio-banner { height: 180px; }
}
.offer-power { border: 1px solid rgba(255,255,255,.22); background: transparent; color: inherit; border-radius: 999px; padding: 8px 14px; cursor: pointer; font: inherit; }
.offer-power.on { border-color: transparent; background: #1f6b3a; color: #fff; }
.offer-find select { min-width: 140px; }