:root {
  --bg: #090716;
  --bg-soft: #121027;
  --card: rgba(29, 24, 58, 0.84);
  --card-2: rgba(47, 37, 83, 0.74);
  --line: rgba(255,255,255,.11);
  --text: #f7f4ff;
  --muted: #aaa3c4;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --cyan: #22d3ee;
  --green: #34d399;
  --yellow: #fbbf24;
  --danger: #fb7185;
  --radius: 24px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top, #2c1650 0, #100c24 30%, #090716 68%); color: var(--text); min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; padding-bottom: 96px; }
.topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); background: linear-gradient(180deg, rgba(9,7,22,.96), rgba(9,7,22,.72)); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1120px; margin: auto; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 900; letter-spacing: -.5px; }
.brand-mark { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--pink), var(--purple), var(--cyan)); box-shadow: 0 10px 32px rgba(139,92,246,.42); }
.brand span { background: linear-gradient(90deg,#fff,#d7bdff,#86efff); -webkit-background-clip: text; color: transparent; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.status-pill, .chip { border: 1px solid var(--line); background: rgba(255,255,255,.07); color: var(--text); border-radius: 999px; padding: 8px 12px; font-size: 13px; display: inline-flex; gap: 7px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.main { max-width: 1120px; margin: auto; padding: 22px 16px 36px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-bottom: 18px; }
.panel { background: linear-gradient(145deg, rgba(48,37,85,.88), rgba(21,17,46,.9)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-pad { padding: 20px; }
.hero-card { position: relative; min-height: 275px; background: radial-gradient(circle at 65% 20%, rgba(34,211,238,.2), transparent 28%), radial-gradient(circle at 20% 30%, rgba(236,72,153,.24), transparent 34%), linear-gradient(145deg,#251747,#16112f); }
.hero-card::after { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; pointer-events:none; }
.eyebrow { color: #cab8ef; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 10px 0 8px; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: -1.6px; }
.hero p { color: var(--muted); max-width: 600px; line-height: 1.7; }
.feature-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.table-stage { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 275px; padding: 20px; }
.table-orbit { width: 230px; height: 230px; margin: auto; border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle, #574584 0 33%, #2b224d 34% 54%, transparent 55%); box-shadow: inset 0 0 45px rgba(162,105,255,.3), 0 0 60px rgba(139,92,246,.2); }
.table-label { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); text-align:center; font-weight: 900; }
.table-label small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.orbit-avatar { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #302354; background: #261d48; position: absolute; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.orbit-avatar img { width: 100%; height: 100%; border-radius: 50%; }
.orbit-avatar .name { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; background: #0e0b1d; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; }
.orbit-avatar:nth-child(1) { left: 2px; top: 62px; }
.orbit-avatar:nth-child(2) { right: 2px; top: 62px; }
.orbit-avatar:nth-child(3) { left: 78px; bottom: 2px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 22px 0 12px; }
.section-head h2 { margin:0; font-size: 20px; }
.section-head p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.grid { display:grid; gap:14px; }
.table-grid { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
.table-card { position:relative; padding:16px; min-height:145px; background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; transition:.2s ease; }
.table-card:hover { transform:translateY(-2px); border-color:rgba(139,92,246,.55); }
.table-card.active { outline:2px solid var(--purple); box-shadow:0 0 36px rgba(139,92,246,.25); }
.table-card .table-title { display:flex; justify-content:space-between; gap:8px; font-weight:900; }
.table-card .count { color:var(--muted); font-size:12px; }
.mini-avatars { display:flex; margin-top:18px; min-height:48px; align-items:center; }
.mini-avatar { width:48px; height:48px; border-radius:50%; border:3px solid #241b42; margin-right:-10px; background:#211a3f; }
.empty-seat { color:var(--muted); font-size:13px; margin-top:22px; }
.card-actions { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.btn { border:0; color:white; border-radius:15px; padding:11px 15px; font-weight:800; background:rgba(255,255,255,.09); border:1px solid var(--line); transition:.18s ease; }
.btn:hover { transform:translateY(-1px); filter:brightness(1.08); }
.btn-primary { background:linear-gradient(135deg,var(--pink),var(--purple)); border-color:transparent; box-shadow:0 10px 24px rgba(139,92,246,.26); }
.btn-cyan { background:linear-gradient(135deg,#0ea5e9,#6366f1); border-color:transparent; }
.btn-green { background:linear-gradient(135deg,#10b981,#0ea5e9); border-color:transparent; }
.btn-danger { background:linear-gradient(135deg,#e11d48,#fb7185); border-color:transparent; }
.btn-ghost { background:transparent; }
.btn-sm { padding:8px 11px; border-radius:12px; font-size:12px; }
.member-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:12px; }
.member-card { padding:14px 10px; background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:20px; text-align:center; }
.member-card img { width:74px; height:74px; border-radius:50%; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.member-card strong { display:block; margin-top:8px; }
.member-card small { color:var(--muted); }
.navbar { position:fixed; left:50%; transform:translateX(-50%); bottom:12px; z-index:30; width:min(720px,calc(100% - 24px)); padding:8px; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; border:1px solid var(--line); background:rgba(13,10,29,.9); backdrop-filter:blur(18px); border-radius:24px; box-shadow:var(--shadow); }
.nav-btn { border:0; background:transparent; color:var(--muted); border-radius:17px; padding:10px 6px; display:flex; flex-direction:column; gap:3px; align-items:center; font-size:11px; font-weight:800; }
.nav-btn .ico { font-size:21px; }
.nav-btn.active { color:white; background:linear-gradient(135deg,rgba(236,72,153,.34),rgba(139,92,246,.42)); }
.view { display:none; }
.view.active { display:block; animation:fade .2s ease; }
@keyframes fade { from { opacity:0; transform:translateY(5px); } }
.form-row { display:flex; gap:10px; flex-wrap:wrap; }
.input { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.065); color:white; border-radius:15px; padding:13px 14px; outline:none; }
.input:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,.18); }
.search-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.result-list, .queue-list { display:grid; gap:10px; margin-top:14px; }
.song-card { display:grid; grid-template-columns:92px 1fr auto; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:18px; }
.song-card img { width:92px; height:58px; object-fit:cover; border-radius:12px; }
.song-card h4 { margin:0 0 5px; font-size:14px; }
.song-card p { margin:0; color:var(--muted); font-size:12px; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; border:1px solid var(--line); background:rgba(255,255,255,.06); }
.badge.queued { color:#d8c3ff; }.badge.playing { color:#83f7ff; }.badge.completed { color:#7ff0bf; }.badge.skipped,.badge.removed,.badge.failed { color:#ff9aaf; }
.challenge-card { padding:16px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.045); }
.game-stage { text-align:center; padding:22px; }
.choice-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.choice { width:92px; height:92px; font-size:42px; border-radius:26px; border:1px solid var(--line); background:rgba(255,255,255,.07); }
.dice-row { display:flex; gap:10px; justify-content:center; font-size:56px; margin:18px 0; }
.poster-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.poster { border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#17132b; }
.poster img { width:100%; display:block; aspect-ratio:1/1.414; object-fit:cover; }
.poster figcaption { padding:12px 14px; font-weight:800; }
.modal-wrap { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(3,2,10,.72); backdrop-filter:blur(12px); }
.modal { width:min(520px,100%); max-height:88vh; overflow:auto; background:linear-gradient(145deg,#2d2450,#15112d); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); padding:22px; }
.modal h2 { margin-top:0; }
.avatar-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.avatar-option { border:2px solid transparent; background:rgba(255,255,255,.045); border-radius:20px; padding:8px; }
.avatar-option.selected { border-color:var(--purple); box-shadow:0 0 24px rgba(139,92,246,.3); }
.avatar-option img { border-radius:50%; }
.reaction-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.reaction-btn { border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:18px; padding:14px 6px; color:white; font-size:28px; }
.reaction-btn small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.toast-stack { position:fixed; z-index:110; right:14px; top:74px; width:min(360px,calc(100% - 28px)); display:grid; gap:10px; }
.toast { padding:14px 16px; border:1px solid var(--line); background:rgba(22,18,47,.95); backdrop-filter:blur(14px); border-radius:18px; box-shadow:var(--shadow); animation:toastIn .22s ease; }
.toast strong { display:block; margin-bottom:3px; }.toast small { color:var(--muted); }
@keyframes toastIn { from { opacity:0; transform:translateX(12px); } }
.reaction-burst { position:fixed; inset:0; pointer-events:none; z-index:105; display:grid; place-items:center; }
.reaction-burst .bubble { font-size:84px; animation:burst 1.8s ease both; filter:drop-shadow(0 15px 30px rgba(0,0,0,.5)); }
@keyframes burst { 0%{opacity:0;transform:scale(.4) translateY(40px)} 25%{opacity:1;transform:scale(1.2)} 70%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.8) translateY(-80px)} }
.admin-shell { max-width:1280px; margin:auto; padding:20px; }
.admin-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.col-4 { grid-column:span 4; }.col-6 { grid-column:span 6; }.col-8 { grid-column:span 8; }.col-12 { grid-column:span 12; }
.kpi { padding:18px; }.kpi .value { font-size:34px; font-weight:900; margin-top:7px; }.kpi .label { color:var(--muted); font-size:13px; }
.list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }.list-row:last-child{border-bottom:0}
.player-layout { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,.5fr); }
.player-main { background:#000; display:flex; flex-direction:column; }
#yt-player { flex:1; min-height:60vh; }
.player-controls { padding:14px; display:flex; gap:10px; justify-content:center; background:#0c0919; }
.player-side { padding:18px; background:linear-gradient(180deg,#17122c,#0b0918); overflow:auto; }
.overlay-start { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(5,4,12,.9); }
.start-card { text-align:center; width:min(450px,calc(100% - 30px)); padding:30px; border:1px solid var(--line); border-radius:28px; background:#1b1534; }
.start-card .play { width:100px; height:100px; border-radius:50%; border:0; font-size:42px; color:white; background:linear-gradient(135deg,var(--pink),var(--purple)); box-shadow:0 0 50px rgba(139,92,246,.45); }
.muted { color:var(--muted); }
hr { border:0; border-top:1px solid var(--line); margin:18px 0; }
@media (max-width: 820px) {
  .hero { grid-template-columns:1fr; }
  .hero-card { min-height:auto; }
  .table-stage { min-height:245px; }
  .admin-grid { display:block; }.admin-grid > * { margin-bottom:14px; }
  .player-layout { grid-template-columns:1fr; }.player-side { min-height:40vh; }.player-main { min-height:60vh; }
}
@media (max-width: 520px) {
  .main { padding:14px 12px 28px; }
  .topbar-inner { padding:11px 13px; }.brand { font-size:17px; }.brand-mark{width:38px;height:38px}
  .status-pill { display:none; }
  .hero h1 { font-size:34px; }
  .table-orbit { width:210px;height:210px; }
  .orbit-avatar { width:66px;height:66px; }
  .orbit-avatar:nth-child(3) { left:72px; }
  .song-card { grid-template-columns:74px 1fr; }.song-card img{width:74px;height:52px}.song-card .song-action{grid-column:1/-1}
  .reaction-grid { grid-template-columns:repeat(4,1fr); }
  .poster-grid { grid-template-columns:1fr; }
}
.layout-editor{height:620px;position:relative;background-size:cover;background-position:center;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.14);touch-action:none}.layout-table{position:absolute;transform:translate(-50%,-50%);width:88px;height:70px;border-radius:50%;background:rgba(40,23,18,.92);border:3px solid #9b6cff;box-shadow:0 8px 24px #000;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:grab;user-select:none}.layout-table.square{border-radius:15px}.layout-table small{color:#ddd}.layout-table button{position:absolute;right:-12px;top:-12px;border:0;border-radius:50%;background:#ff526c;color:#fff;width:28px;height:28px}.profile-bubble{position:absolute;top:-22px;right:-10px;width:42px;height:42px;border-radius:50%;object-fit:cover;border:3px solid #9b6cff;box-shadow:0 0 14px #9b6cff;background:#111}.avatar-wrap{position:relative;display:inline-block}.staff-mode{color:#ffc857}.layout-editor:before{content:'ลากโต๊ะเพื่อย้ายตำแหน่ง';position:absolute;left:16px;top:14px;background:#111b;padding:8px 12px;border-radius:20px;z-index:2}

.login-panel{position:relative;z-index:5;overflow:visible}.pin-input{position:relative!important;z-index:10!important;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;caret-color:#fff!important}.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.pin-pad button{min-height:48px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.075);color:#fff;font-weight:800;font-size:18px;cursor:pointer}.pin-pad button:active{transform:scale(.97);background:rgba(139,92,246,.35)}
/* V2.1 customer world rewrite */
.customer-world{position:relative;min-height:570px;background:url('/assets/pixel-venue.jpg') center/cover no-repeat;border-color:rgba(180,120,255,.38);isolation:isolate}
.customer-world:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,15,.2),rgba(5,3,15,.04) 45%,rgba(5,3,15,.65));z-index:-1}
.world-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 54%,transparent 0 25%,rgba(9,7,22,.1) 54%,rgba(9,7,22,.52));pointer-events:none}
.world-topline{position:absolute;left:18px;right:18px;top:18px;display:flex;justify-content:space-between;align-items:flex-start;z-index:3}.world-topline h1{margin:2px 0;font-size:34px;text-shadow:0 4px 18px #000}
.pixel-table-focus{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:min(470px,72vw);height:250px;border:3px dashed rgba(177,124,255,.85);border-radius:28px;background:radial-gradient(ellipse,rgba(91,54,25,.88) 0 34%,rgba(45,24,15,.72) 35% 47%,transparent 48%);box-shadow:0 0 0 6px rgba(80,44,150,.18),0 24px 65px #0009;animation:tableGlow 2.4s ease-in-out infinite}
@keyframes tableGlow{50%{box-shadow:0 0 0 9px rgba(139,92,246,.2),0 24px 70px #000b}}
.pixel-table-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#120b24e8;border:2px solid #9b6cff;border-radius:14px;padding:8px 16px;text-align:center;z-index:2}.pixel-table-name small{display:block;color:#d8c8ef}
.pixel-seats{position:absolute;inset:0}.orbit-avatar{width:82px;height:96px;border:0;background:transparent;box-shadow:none;animation:avatarIdle 1.8s ease-in-out infinite;position:absolute}.orbit-avatar>.avatar-wrap>img:first-child{width:76px;height:76px;border-radius:18px;filter:drop-shadow(0 10px 8px #0008)}
@keyframes avatarIdle{50%{transform:translateY(-5px)}}
.orbit-avatar:nth-child(1){left:5%;top:30%}.orbit-avatar:nth-child(2){right:5%;top:30%}.orbit-avatar:nth-child(3){left:40%;bottom:-7%}.orbit-avatar:nth-child(4){left:40%;top:-10%}.orbit-avatar .name{bottom:-3px;background:#0d091bdc;border:1px solid #a777ff}
.world-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#0b0818d9;border:1px solid #ffffff20;border-radius:999px;padding:8px 14px;font-size:12px;white-space:nowrap}
.customer-dock{margin-top:16px;padding:18px}.dock-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.dock-head h2{margin:4px 0 0}.pixel-members{margin-top:14px}.pixel-members .member-card{background:linear-gradient(180deg,rgba(61,44,102,.72),rgba(24,17,48,.85));border-color:rgba(170,120,255,.25)}
.customer-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}.action-tile{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(65,49,104,.9),rgba(25,18,49,.95));color:#fff;border-radius:18px;padding:13px 8px;display:grid;gap:4px;place-items:center}.action-tile span{font-size:25px}.action-tile b{font-size:12px}.action-tile:hover{border-color:#9b6cff;transform:translateY(-2px)}
.pixel-table-grid .table-card{background:linear-gradient(145deg,rgba(38,28,67,.94),rgba(16,12,33,.96));border-color:rgba(255,255,255,.09)}
.customer-navbar{grid-template-columns:repeat(5,1fr)}.preset-chat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(max-width:700px){.customer-world{min-height:480px}.pixel-table-focus{width:86vw;height:220px;top:58%}.customer-actions{gap:6px}.action-tile{padding:10px 4px}.action-tile b{font-size:10px}.world-hint{font-size:10px}.customer-navbar{width:calc(100% - 14px);bottom:7px}.nav-btn{padding:8px 3px}.nav-btn .ico{font-size:19px}}

/* V2.2 mobile-first customer fix */
@media (max-width: 700px) {
  body { overflow-x:hidden; }
  .app-shell { padding-bottom:82px; }
  .topbar-inner { min-height:58px; padding:8px 10px; }
  .brand { min-width:0; gap:8px; font-size:16px; }
  .brand-mark { width:36px; height:36px; border-radius:12px; flex:0 0 auto; }
  .brand span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .header-actions { flex:0 0 auto; }
  #profile-btn { padding:7px 9px; font-size:0; }
  #profile-btn::after { content:'โปรไฟล์'; font-size:11px; }

  .main { width:100%; max-width:none; padding:0 0 18px; }
  .customer-world {
    width:100%;
    min-height:0;
    height:calc(100svh - 142px);
    max-height:560px;
    min-height:360px;
    border-radius:0 0 22px 22px;
    border-left:0;
    border-right:0;
    background-position:center center;
  }
  .world-topline { left:10px; right:10px; top:10px; }
  .world-topline .eyebrow { font-size:9px; }
  .world-topline h1 { font-size:22px; }
  .world-topline .chip { padding:6px 9px; font-size:10px; }
  .pixel-table-focus {
    width:92vw;
    max-width:390px;
    height:185px;
    top:61%;
    border-width:2px;
    border-radius:20px;
  }
  .pixel-table-name { padding:6px 11px; font-size:14px; }
  .pixel-table-name small { font-size:10px; }
  .orbit-avatar { width:58px; height:70px; }
  .orbit-avatar>.avatar-wrap>img:first-child { width:54px; height:54px; border-radius:13px; }
  .profile-bubble { width:30px; height:30px; top:-14px; right:-6px; border-width:2px; }
  .orbit-avatar .name { font-size:9px; padding:3px 6px; bottom:-1px; }
  .orbit-avatar:nth-child(1){left:2%;top:31%}
  .orbit-avatar:nth-child(2){right:2%;top:31%}
  .orbit-avatar:nth-child(3){left:42%;bottom:-4%}
  .orbit-avatar:nth-child(4){left:42%;top:-7%}
  .world-hint { bottom:9px; max-width:90%; overflow:hidden; text-overflow:ellipsis; padding:6px 10px; font-size:9px; }

  .customer-dock { margin:10px 10px 0; padding:12px; }
  .dock-head h2 { font-size:16px; }
  .dock-head .eyebrow { font-size:9px; }
  #profile-btn-inline { display:none; }
  .pixel-members { display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:3px; }
  .pixel-members .member-card { min-width:82px; padding:8px 6px; border-radius:14px; }
  .pixel-members .member-card img { width:46px; height:46px; }
  .pixel-members .member-card strong { font-size:11px; margin-top:5px; }
  .pixel-members .member-card small { font-size:9px; }
  .customer-actions { display:none; }

  .section-head, .pixel-table-grid { margin-left:10px; margin-right:10px; }
  .section-head { margin-top:16px; }
  .section-head h2 { font-size:17px; }
  .section-head p { font-size:11px; }
  .pixel-table-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pixel-table-grid .table-card { min-height:116px; padding:11px; border-radius:16px; }
  .mini-avatar { width:36px; height:36px; }

  .customer-navbar {
    width:calc(100% - 12px);
    bottom:max(6px, env(safe-area-inset-bottom));
    padding:5px;
    gap:3px;
    border-radius:19px;
  }
  .nav-btn { min-width:0; padding:7px 2px 6px; font-size:9px; border-radius:14px; }
  .nav-btn .ico { font-size:18px; line-height:1; }
}

@media (max-width: 390px) {
  .customer-world { min-height:340px; height:calc(100svh - 132px); }
  .pixel-table-focus { height:170px; }
  .orbit-avatar { transform:scale(.9); transform-origin:center; }
}

/* V2.3 shared live venue: every table and its own avatars are visible */
.world-tables{position:absolute;inset:0;z-index:2;overflow:hidden}
.world-table{position:absolute;width:118px;height:82px;transform:translate(-50%,-50%);border:0;background:transparent;color:#fff;padding:0;cursor:pointer;filter:drop-shadow(0 9px 8px #0009);transition:transform .16s ease,filter .16s ease;z-index:2}
.world-table:hover,.world-table:focus-visible{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 10px 12px #000)}
.world-tabletop{position:absolute;left:21px;right:21px;top:28px;height:42px;border-radius:50%;background:linear-gradient(180deg,#925d31,#573017);border:3px solid #c58a4b;box-shadow:inset 0 -8px 0 #3a1d0e,0 5px 0 #1d0e08}
.world-tabletop:before,.world-tabletop:after{content:"";position:absolute;top:10px;width:15px;height:25px;border-radius:7px;background:#d59b30;border:2px solid #33200d;z-index:-1}
.world-tabletop:before{left:-17px}.world-tabletop:after{right:-17px}
.world-table-label{position:absolute;left:50%;top:49px;transform:translate(-50%,-50%);z-index:5;background:#100b1eea;border:1px solid #9e6aff;border-radius:9px;padding:3px 7px;font-size:10px;font-weight:900;white-space:nowrap;line-height:1.1}
.world-table-label b{display:block;font-size:8px;color:#d8c8ef;margin-top:2px}
.world-table.mine .world-tabletop{box-shadow:inset 0 -8px 0 #3a1d0e,0 0 0 3px #a76fff,0 0 22px #8d55ff,0 5px 0 #1d0e08}
.world-table.mine .world-table-label{background:#6f36c9;border-color:#e2c9ff}
.world-table.empty{opacity:.62}.world-table.empty .world-tabletop{filter:saturate(.55)}
.world-people{position:absolute;inset:0;z-index:4;pointer-events:none}
.world-person{position:absolute;width:35px;height:43px;animation:tinyIdle 1.8s ease-in-out infinite}
.world-person .avatar-wrap>img:first-child{width:34px;height:34px;border-radius:9px;filter:drop-shadow(0 5px 3px #000a)}
.world-person .profile-bubble{width:18px;height:18px;top:-8px;right:-5px;border-width:2px}
.world-person small{display:none;position:absolute;left:50%;top:35px;transform:translateX(-50%);font-size:7px;background:#080512dd;padding:1px 4px;border-radius:7px;white-space:nowrap}
.world-table.mine .world-person small{display:block}
.world-person.person-1{left:4px;top:21px}.world-person.person-2{right:4px;top:21px}.world-person.person-3{left:42px;top:55px}.world-person.person-4{left:42px;top:-3px}
@keyframes tinyIdle{50%{margin-top:-3px}}

@media(max-width:700px){
  .customer-world{background-position:center 43%;}
  .world-table{width:76px;height:58px}
  .world-tabletop{left:16px;right:16px;top:23px;height:29px;border-width:2px;box-shadow:inset 0 -5px 0 #3a1d0e,0 3px 0 #1d0e08}
  .world-tabletop:before,.world-tabletop:after{top:6px;width:10px;height:18px;border-width:1px}.world-tabletop:before{left:-11px}.world-tabletop:after{right:-11px}
  .world-table-label{top:37px;padding:2px 5px;font-size:8px;border-radius:7px}.world-table-label b{font-size:7px;margin-top:1px}
  .world-person{width:25px;height:31px}
  .world-person .avatar-wrap>img:first-child{width:24px;height:24px;border-radius:7px}
  .world-person .profile-bubble{width:13px;height:13px;top:-6px;right:-3px;border-width:1px}
  .world-person small{top:24px;font-size:6px;padding:1px 3px}
  .world-person.person-1{left:0;top:18px}.world-person.person-2{right:0;top:18px}.world-person.person-3{left:26px;top:40px}.world-person.person-4{left:26px;top:0}
  .world-hint{z-index:5}
}


/* V2.4 full-scene mobile layout: all tables visible, no giant focus overlay */
.world-overlay{display:none!important}
.pixel-table-focus{display:none!important}
.customer-world:after{background:linear-gradient(180deg,rgba(5,3,15,.05),transparent 38%,rgba(5,3,15,.18))!important}
.world-table.mine .world-tabletop{box-shadow:inset 0 -8px 0 #3a1d0e,0 0 0 1px #c9a7ff,0 0 10px #8d55ff,0 5px 0 #1d0e08}
.world-table.mine .world-table-label{background:#4d268ddf;border-color:#d8c0ff}

@media (max-width:700px){
  html,body{height:100%;overflow:hidden}
  .app-shell{height:100svh;min-height:0;padding-bottom:0;overflow:hidden}
  .topbar{position:relative;height:52px}
  .topbar-inner{min-height:52px;height:52px;padding:5px 9px}
  .brand{font-size:14px;gap:7px}.brand-mark{width:32px;height:32px;border-radius:10px}
  .status-pill{display:flex;padding:5px 8px;font-size:9px}
  #profile-btn{padding:6px 8px!important}
  .main{height:calc(100svh - 52px);padding:0;overflow:hidden}
  .view[data-view="home"]{height:100%;overflow:hidden}
  .view[data-view="home"]>.customer-dock,
  .view[data-view="home"]>.section-head,
  .view[data-view="home"]>.pixel-table-grid{display:none!important}
  .customer-world{
    position:absolute;inset:0 0 52px 0;
    width:100%;height:auto;min-height:0;max-height:none;
    border:0;border-radius:0;margin:0;
    background-size:100% 100%;background-position:center;background-repeat:no-repeat;
  }
  .world-topline{left:8px;right:8px;top:6px;align-items:center;pointer-events:none}
  .world-topline .eyebrow{display:none}
  .world-topline h1{font-size:13px;margin:0;padding:4px 7px;border-radius:9px;background:#0906159e;text-shadow:none}
  .world-topline .chip{font-size:8px;padding:4px 7px;background:#090615a8}
  .world-hint{display:none}
  .world-tables{inset:23px 2px 2px;overflow:visible}
  .world-table{width:64px;height:48px;filter:drop-shadow(0 4px 3px #000b)}
  .world-table:hover,.world-table:focus-visible{transform:translate(-50%,-50%) scale(1.04)}
  .world-tabletop{left:14px;right:14px;top:19px;height:25px;border-width:1px;box-shadow:inset 0 -4px 0 #3a1d0e,0 2px 0 #1d0e08}
  .world-tabletop:before,.world-tabletop:after{top:5px;width:8px;height:14px;border-width:1px}.world-tabletop:before{left:-9px}.world-tabletop:after{right:-9px}
  .world-table-label{top:31px;padding:2px 4px;font-size:7px;border-radius:6px;border-width:1px}.world-table-label b{font-size:6px;margin-top:0}
  .world-person{width:21px;height:27px}
  .world-person .avatar-wrap>img:first-child{width:20px;height:20px;border-radius:6px}
  .world-person .profile-bubble{width:11px;height:11px;top:-5px;right:-2px;border-width:1px}
  .world-person small{display:none!important}
  .world-person.person-1{left:0;top:14px}.world-person.person-2{right:0;top:14px}.world-person.person-3{left:22px;top:32px}.world-person.person-4{left:22px;top:-1px}
  .customer-navbar{
    left:0;right:0;bottom:0;transform:none;width:100%;height:52px;
    padding:3px 5px max(3px,env(safe-area-inset-bottom));gap:2px;border-radius:0;
    border-left:0;border-right:0;border-bottom:0;background:rgba(9,6,22,.94)
  }
  .nav-btn{padding:4px 1px 3px;font-size:8px;border-radius:9px;line-height:1.05}
  .nav-btn .ico{font-size:15px;margin-bottom:1px}
  .view:not([data-view="home"]){height:calc(100svh - 104px);overflow-y:auto;padding:8px 9px 20px}
}

@media (min-width:701px){
  .customer-world{min-height:calc(100vh - 190px);background-size:100% 100%}
}

/* =============================================================
   V2.5 CUSTOMER PROGRAM — real mobile venue, separated table art
   ============================================================= */
.compat-hidden{display:none!important}
.customer-topbar{position:fixed;inset:0 0 auto;z-index:80;height:64px;background:rgba(7,6,18,.97);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px)}
.customer-topbar .topbar-inner{height:64px;min-height:64px;max-width:560px;padding:8px 14px}
.customer-topbar .brand{font-size:19px;gap:10px}.customer-topbar .brand-mark{width:42px;height:42px;border-radius:13px}
.profile-orb{width:42px;height:42px;border-radius:50%;border:2px solid #9b6cff;background:#261548;color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 0 18px #8b5cf677}
.notice-bell{position:relative;font-size:22px;padding:6px}.notice-bell b{position:absolute;right:-2px;top:-2px;min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#ef4444;font-size:10px}
body{background:#070612}.app-shell{width:min(100%,560px);margin:0 auto;min-height:100svh;padding:0;background:#070612;position:relative;overflow:hidden;box-shadow:0 0 80px #000}
.main{max-width:none;width:100%;height:100svh;margin:0;padding:64px 0 66px;overflow:hidden}
.view[data-view="home"]{height:100%;overflow:hidden}
.customer-world{position:relative;width:100%;height:100%;min-height:0;max-height:none;border:0;border-radius:0;background:url('/assets/customer-venue-clean.jpg') center top/100% 100% no-repeat;overflow:hidden;isolation:isolate}
.customer-world:after,.customer-world:before,.world-overlay,.world-hint,.world-topline,.pixel-table-focus,.customer-dock{display:none!important}
.scene-quota{position:absolute;z-index:20;left:12px;top:12px;display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(8,7,20,.78);backdrop-filter:blur(12px);box-shadow:0 8px 22px #0007;font-size:13px}.scene-quota span{font-size:18px}.scene-quota strong{font-weight:800}
.world-tables{position:absolute;inset:0;overflow:hidden;z-index:5}
.world-table{position:absolute;transform:translate(-50%,-50%);width:29%;height:auto;aspect-ratio:1.34;border:0;background:transparent;color:#fff;padding:0;margin:0;overflow:visible;filter:drop-shadow(0 9px 7px #000a);transition:transform .14s ease,filter .14s ease;z-index:3}
.world-table:active{transform:translate(-50%,-50%) scale(.96)}
.world-table-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.world-table.empty{opacity:.92}.world-table.empty .world-table-art{filter:saturate(.75) brightness(.9)}
.world-table.mine:before{content:"";position:absolute;left:14%;right:14%;bottom:7%;height:18%;border-radius:50%;background:#9a5cff55;box-shadow:0 0 12px #9a5cff,0 0 25px #7c3aed;animation:minePulse 2s ease-in-out infinite;z-index:-1}
@keyframes minePulse{50%{opacity:.55;transform:scale(1.08)}}
.world-table-label{position:absolute;z-index:8;left:50%;bottom:4%;transform:translateX(-50%);padding:3px 9px;border:1px solid #9c73e8;border-radius:7px;background:rgba(8,6,18,.94);font-size:10px;font-weight:900;white-space:nowrap;box-shadow:0 4px 12px #0009}
.world-table.mine .world-table-label{background:#5a2ea3;border-color:#d6bdff;box-shadow:0 0 12px #9b6cff}
.my-table-tag{position:absolute;z-index:9;left:50%;top:-9%;transform:translateX(-50%);padding:4px 9px;border:1px solid #b88cff;border-radius:8px;background:#6332aee8;font-size:9px;font-weight:900;white-space:nowrap;box-shadow:0 0 14px #9b6cff99}
.world-people{position:absolute;inset:0;z-index:7;pointer-events:none}
.world-person{position:absolute;width:30%;height:60%;animation:pixelIdle 1.8s ease-in-out infinite;filter:drop-shadow(0 5px 4px #000a)}
.world-person:nth-child(2){animation-delay:-.35s}.world-person:nth-child(3){animation-delay:-.7s}.world-person:nth-child(4){animation-delay:-1.05s}
@keyframes pixelIdle{50%{transform:translateY(-3px)}}
.world-person .avatar-wrap{width:100%;height:100%;display:block;position:relative}
.world-person .avatar-wrap>img:first-child{display:block;width:100%;height:100%;object-fit:contain;border-radius:0;image-rendering:pixelated;filter:none}
.world-person .profile-bubble{position:absolute;width:31%;height:auto;aspect-ratio:1;top:-14%;right:-6%;border-radius:50%;object-fit:cover;border:2px solid #b982ff;background:#151020;box-shadow:0 0 10px #9b6cff;image-rendering:auto}
.world-person small{display:none}
.world-person.person-1{left:2%;top:17%}.world-person.person-2{right:2%;top:17%}.world-person.person-3{left:35%;top:-6%}.world-person.person-4{left:35%;top:40%}
.customer-navbar{position:fixed;z-index:90;left:50%;right:auto;bottom:max(7px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 18px),542px);height:58px;padding:4px 7px;grid-template-columns:repeat(5,1fr);gap:2px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(8,7,20,.94);backdrop-filter:blur(18px);box-shadow:0 12px 38px #000b}
.nav-btn{min-width:0;padding:4px 1px 3px;border-radius:14px;font-size:9px;gap:1px;line-height:1}.nav-btn .ico{font-size:18px;line-height:1.1}.nav-btn.active{background:linear-gradient(145deg,#3b1766,#6b2ea4);box-shadow:inset 0 0 0 1px #ad7cff77}
.view:not([data-view="home"]){height:100%;overflow-y:auto;padding:13px 12px 85px;background:radial-gradient(circle at top,#281447,#0a0718 60%)}
.view:not([data-view="home"]) .section-head{margin:12px 0}.view:not([data-view="home"]) .panel{border-radius:18px}
.modal-wrap{z-index:120}.toast-stack{z-index:130}

@media (max-width:420px){
  .customer-topbar{height:58px}.customer-topbar .topbar-inner{height:58px;min-height:58px;padding:6px 10px}.customer-topbar .brand{font-size:17px}.customer-topbar .brand-mark{width:38px;height:38px}.profile-orb{width:37px;height:37px}.status-pill{display:flex;padding:5px 8px;font-size:10px}.notice-bell{font-size:19px}
  .main{padding-top:58px;padding-bottom:62px}.scene-quota{left:8px;top:8px;padding:6px 10px;font-size:11px}.scene-quota span{font-size:15px}
  .world-table{width:30%}.world-table-label{font-size:8px;padding:2px 6px}.my-table-tag{font-size:8px;padding:3px 7px}.world-person .profile-bubble{border-width:1px}
  .customer-navbar{height:54px;width:calc(100% - 12px);bottom:max(4px,env(safe-area-inset-bottom));border-radius:17px}.nav-btn{font-size:8px}.nav-btn .ico{font-size:16px}
}

@media (min-width:701px){
  .app-shell{width:520px}.customer-topbar .topbar-inner{width:520px}.customer-world{background-size:100% 100%}.world-table{width:28%}
}


/* V2.6 persistent Player / Settings shell */
.player-settings{position:fixed;inset:0;z-index:45;background:#070511;display:flex;flex-direction:column;min-width:0}
.player-settings.hidden{display:none!important}
.player-settings-bar{height:58px;flex:0 0 58px;padding:8px 12px calc(8px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(10,7,23,.98);border-bottom:1px solid rgba(255,255,255,.1);box-sizing:content-box}
.player-settings-bar>div{display:flex;flex-direction:column;min-width:0}.player-settings-bar strong{font-size:17px}.player-settings-bar small{color:#aaa4bd;font-size:11px}
.player-settings-frame{display:block;width:100%;height:100%;flex:1 1 auto;border:0;background:#080612}
html.embedded-admin .topbar{display:none!important}
html.embedded-admin .admin-shell{padding-top:10px!important;min-height:100vh}
html.embedded-admin .login-panel{margin-top:12px!important}
html.embedded-admin body{padding-top:0!important}
body.settings-open{overflow:hidden}
@media(max-width:720px){.player-settings-bar{height:48px;flex-basis:48px}.player-settings-bar strong{font-size:15px}.player-settings-bar small{font-size:10px}.player-settings-bar .btn{padding:8px 10px;font-size:12px}}


/* V2.8 real-member profiles, clear names, gendered avatars */
.form-label{display:block;margin-top:12px;margin-bottom:7px}
.gender-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.gender-option{border:1px solid rgba(255,255,255,.14);background:#19122d;color:#fff;border-radius:13px;padding:10px;font-weight:800;cursor:pointer}
.gender-option.selected{border-color:#b989ff;background:linear-gradient(180deg,#7346bd,#4e2b86);box-shadow:0 0 0 2px rgba(179,128,255,.16)}
.avatar-wrap{position:relative}
.avatar-wrap .gender-mark{position:absolute;left:-5px;bottom:1px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font:900 11px/1 system-ui;color:white;background:#2779bd;border:2px solid #fff;z-index:6;font-style:normal;box-shadow:0 2px 5px #0008}
.avatar-wrap.gender-female .gender-mark{background:#d84d99}
.clickable-profile{cursor:zoom-in;pointer-events:auto!important;transition:transform .15s ease,filter .15s ease}
.clickable-profile:hover,.clickable-profile:active{transform:scale(1.16);filter:brightness(1.12)}
.world-people{pointer-events:auto}
.world-person{pointer-events:auto}
.world-person .person-name{display:block!important;min-width:42px;max-width:64px;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#fff;font-weight:900;text-shadow:-1px -1px 0 #08040f,1px -1px 0 #08040f,-1px 1px 0 #08040f,1px 1px 0 #08040f;z-index:9}
.profile-preview{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;background:rgba(4,2,12,.56);backdrop-filter:blur(4px);animation:profileFade .18s ease}
.profile-preview.hidden{display:none}
.profile-preview-card{display:grid;place-items:center;gap:8px;padding:15px 18px;border-radius:22px;background:linear-gradient(180deg,rgba(49,34,83,.98),rgba(18,12,34,.98));border:2px solid #b98cff;box-shadow:0 20px 60px #000b,0 0 34px rgba(157,94,255,.5);animation:profilePop .22s cubic-bezier(.2,.9,.25,1.2)}
.profile-preview-card img{width:min(58vw,250px);height:min(58vw,250px);max-width:250px;max-height:250px;object-fit:cover;border-radius:50%;border:5px solid #fff;box-shadow:0 0 0 5px #9d63e9,0 15px 35px #0008}
.profile-preview-card strong{font-size:22px}.profile-preview-card small{color:#d9c9ef}
@keyframes profileFade{from{opacity:0}to{opacity:1}}
@keyframes profilePop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}

@media(max-width:700px){
  .world-person .person-name{top:24px!important;font-size:7px!important;line-height:1.1;min-width:34px;max-width:50px;padding:2px 3px!important;background:rgba(8,5,18,.88)!important;border:1px solid rgba(255,255,255,.26)}
  .avatar-wrap .gender-mark{left:-3px;bottom:0;width:12px;height:12px;font-size:8px;border-width:1px}
  .profile-preview-card img{width:min(66vw,240px);height:min(66vw,240px)}
  .profile-preview-card strong{font-size:19px}
}