:root {
  --mint:#3EE0B5; --mintDk:#0E8F6A; --gold:#FFC24B; --ink:#15132B; --muted:#5E5A78;
  --lbg:#F4FAF8; --card:#FFFFFF;
  --dtext:#F4F1FF; --dmuted:#C3BCE6;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; font-family:'Prompt',sans-serif; }
body { background:#1B1533; }
button, input, select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.row { display:flex; align-items:center; } .gap8 { gap:8px; } .grow { flex:1; } .minw0 { min-width:0; }
.px12 { padding:0 12px; } .small { font-size:12px; } .muted { color:var(--muted); font-size:14px; } .dim { color:var(--muted); } .dim2 { color:var(--dmuted); }
.ic { display:inline-flex; vertical-align:middle; } .ic svg { display:block; }

/* ===== กรอบแอป: มือถือ = เต็มจอ, คอม = จอมือถือกลางหน้าจอ ===== */
#app { width:100%; height:100vh; height:100dvh; margin:0 auto; position:relative; overflow:hidden; }
@media (min-width:600px) {
  body { background:radial-gradient(circle at 30% 20%, #2D2560, #120E26 70%); display:flex; align-items:center; justify-content:center; }
  #app { width:calc(min(94vh, 880px) * 0.462); height:min(94vh, 880px); border-radius:36px; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 10px #0B0818, 0 0 0 11px #3A3260; }
  .sheetWrap, #giftFx, .toast { position:absolute !important; }
}
.view { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
.view.light { background:var(--lbg); color:var(--ink); }

/* ห้องเสียง: ฉากท้องฟ้ากลางคืน + ดาว + ภูเขา */
.view.dark { color:var(--dtext);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 8%, #fff9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 22%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 12%, #fffa 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 30%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 40%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 46%, #fff5 50%, transparent 51%),
    radial-gradient(ellipse at 50% 0%, #6A3FC2 0%, transparent 60%),
    radial-gradient(ellipse at 85% 60%, #B0408A55 0%, transparent 55%),
    linear-gradient(180deg, #2A1760 0%, #1E1250 45%, #2B1648 75%, #3A1D4E 100%); }
.view.dark::after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none; z-index:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><path d='M0 120 L60 70 L110 110 L170 40 L240 105 L300 60 L360 100 L400 80 L400 200 L0 200Z' fill='%23462A6E' opacity='.55'/><path d='M0 150 L80 105 L140 140 L210 90 L280 140 L340 110 L400 135 L400 200 L0 200Z' fill='%23301C52' opacity='.8'/></svg>") bottom/100% 100% no-repeat; }
.view.dark > * { position:relative; z-index:1; }

.btn { border:none; border-radius:999px; padding:12px 22px; font-weight:600; }
.btn.mint { background:var(--mint); color:var(--ink); } .btn.gold { background:var(--gold); color:var(--ink); }
.btn.ghost { background:#EEF3F1; color:var(--ink); }

/* ===== login ===== */
#vLogin { background:linear-gradient(180deg, #C9F3E3 0%, #F4FAF8 55%); }
.loginBox { margin:auto 24px; display:flex; flex-direction:column; gap:14px; }
.logo { font-size:40px; font-weight:700; } .logo span { color:var(--mintDk); }
.loginBox input, .field { height:50px; border:2px solid #D5E8E0; border-radius:14px; padding:0 16px; background:#fff; color:var(--ink); width:100%; }

/* ===== lobby ===== */
#vLobby { background:linear-gradient(180deg, #C9F3E3 0px, #E6F8F1 160px, var(--lbg) 260px); }
.lHead { padding:18px 16px 10px; display:flex; justify-content:space-between; align-items:center; }
.tabs { display:flex; gap:18px; align-items:flex-end; font-size:16px; }
.tabs b { font-size:21px; display:flex; flex-direction:column; gap:2px; } .tabs i { height:4px; width:24px; border-radius:2px; background:var(--mint); }
.coinChip { display:flex; align-items:center; gap:6px; background:#fff; border:none; border-radius:999px; padding:6px 12px 6px 8px; font-weight:600; font-size:14px; color:var(--ink); box-shadow:0 2px 8px rgba(14,143,106,.12); }
.coin { width:16px; height:16px; border-radius:50%; background:var(--gold); box-shadow:inset 0 0 0 3px #E2A52F; display:inline-block; vertical-align:middle; }
.coin.sm { width:11px; height:11px; box-shadow:inset 0 0 0 2px #E2A52F; }
.sqBtn { width:44px; height:44px; border:none; border-radius:14px; font-size:22px; font-weight:700; }
.mintBg { background:var(--mint); color:var(--ink); box-shadow:0 4px 12px rgba(62,224,181,.45); }
.banner { margin:4px 16px 4px; border-radius:20px; padding:16px 18px; color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(circle at 92% 10%, #FFC24B66 0 70px, transparent 71px), radial-gradient(circle at 75% 120%, #3EE0B555 0 60px, transparent 61px), linear-gradient(120deg, #3B2490, #6A3FC2); }
.banner > * { display:block; position:relative; }
.banner small { color:#FFD27A; font-weight:600; }
.banner b { font-size:19px; } .banner span { font-size:12px; color:#E2DCF7; }
.roomGrid { flex:1; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 16px; align-content:start; }
.roomCard { height:190px; border-radius:20px; border:3px solid transparent; position:relative; overflow:hidden; color:#fff; text-align:left; padding:0; box-shadow:0 6px 16px rgba(21,19,43,.12); }
.roomCard.first { border-color:var(--gold); box-shadow:0 0 0 2px #FFC24B55, 0 6px 16px rgba(21,19,43,.15); }
.roomCard .deco1 { position:absolute; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,.12); right:-40px; top:-40px; }
.roomCard .deco2 { position:absolute; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.08); left:-20px; top:70px; }
.roomCard .big { position:absolute; left:0; right:0; top:46px; display:flex; justify-content:center; color:rgba(255,255,255,.75); }
.roomCard .type { position:absolute; top:10px; left:10px; background:rgba(21,19,43,.45); border-radius:999px; padding:2px 10px; font-size:12px; }
.roomCard .cnt { position:absolute; top:10px; right:10px; background:rgba(21,19,43,.45); border-radius:999px; padding:2px 10px 2px 8px; font-size:12px; display:flex; align-items:center; gap:5px; }
.eq { display:inline-flex; align-items:flex-end; gap:2px; height:11px; } .eq b { width:2.5px; background:var(--mint); border-radius:2px; animation:eq 1s infinite ease-in-out; }
.eq b:nth-child(1){height:5px} .eq b:nth-child(2){height:11px;animation-delay:.2s} .eq b:nth-child(3){height:7px;animation-delay:.4s}
@keyframes eq { 50% { transform:scaleY(.4); } }
.roomCard .foot { position:absolute; left:0; right:0; bottom:0; padding:10px; display:flex; gap:8px; align-items:center; background:linear-gradient(180deg, transparent, rgba(21,19,43,.55)); }
.roomCard .foot b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .roomCard .foot span { font-size:11px; color:#FFE6A8; }
.hostAv { width:30px; height:30px; border-radius:50%; flex-shrink:0; border:2px solid #fff; display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:700; font-size:13px; }
.emptyMsg { text-align:center; color:var(--muted); padding:30px; position:absolute; top:240px; left:0; right:0; }
.bNav { display:flex; justify-content:space-around; height:68px; background:#fff; border-top:1px solid #E3ECE8; flex-shrink:0; }
.bNav button { border:none; background:none; color:#9A96B3; font-size:11px; min-width:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.bNav button.on { color:var(--ink); font-weight:700; }
.bNav button.on svg { fill:var(--ink); stroke:var(--ink); }

/* ===== room ===== */
.rHead { display:flex; align-items:center; gap:8px; padding:14px 12px 8px; }
.rAvatar { width:44px; height:44px; border-radius:12px; background:#1E8C74; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex-shrink:0; border:2px solid rgba(255,255,255,.35); }
.rName { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cntChip { background:rgba(255,255,255,.14); border-radius:999px; padding:4px 10px 4px 8px; font-size:12px; display:flex; align-items:center; gap:4px; }
.cntChip svg { width:15px; height:15px; }
.iconBtn { width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:var(--dtext); display:flex; align-items:center; justify-content:center; }
.iconBtn svg { width:18px; height:18px; }
.topChip { background:linear-gradient(90deg, #FFD36B, #FFAE2B); color:#4A2A00; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700; max-width:58%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
.totalChip { background:rgba(255,255,255,.14); color:#FFD27A; border-radius:999px; padding:3px 10px; font-size:12px; display:flex; align-items:center; gap:3px; }
.seatGrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px 2px; padding:12px 8px 4px; }
.seat { display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; color:inherit; padding:0; }
.seat .ring { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; }
.seat .av { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ink); font-size:18px; border:2px solid rgba(255,255,255,.9); transition:box-shadow .15s; }
.seat.owner .av { border-color:#FFD36B; box-shadow:0 0 0 3px #FFAE2B88; }
.seat.speaking .av { box-shadow:0 0 0 3px var(--mint), 0 0 16px 4px #3EE0B5aa; }
.seat .av.empty { background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.28); color:rgba(255,255,255,.7); }
.seat .av.empty svg { width:22px; height:22px; }
.seat .nm { font-size:10px; max-width:66px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#EDE8FF; }
.seat .nm em { color:#B3A9DE; font-style:normal; }
.seat.me .nm { color:var(--mint); }
.seat .gv { font-size:10px; color:#FFD27A; background:rgba(0,0,0,.28); border-radius:6px; padding:0 5px; display:flex; align-items:center; gap:1px; }
.seat .gv svg { width:9px; height:9px; }
.chat { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:6px 80px 8px 12px; font-size:13px; }
.chat > div { align-self:flex-start; background:rgba(0,0,0,.28); border-radius:14px; padding:5px 11px; max-width:100%; word-break:break-word; backdrop-filter:blur(2px); }
.chat .sys { color:var(--dmuted); font-size:12px; }
.chat .gift { background:rgba(110,70,10,.55); color:#FFD27A; }
.chat .who { color:#8FC1FF; }
.floatR { position:absolute !important; right:10px; bottom:84px; display:flex; flex-direction:column; gap:10px; align-items:center; z-index:2 !important; }
.rocket { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--mint) 0 var(--p,0%), rgba(255,255,255,.15) var(--p,0%) 100%); }
.rocket > div { width:48px; height:48px; border-radius:50%; background:#2A1A5E; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; line-height:1.1; color:#FFB37A; }
.rocket b { color:#fff; }
.takeBtn { width:58px; height:58px; border-radius:50%; border:none; background:linear-gradient(135deg, #D6FF6B, #3EE0B5); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(62,224,181,.5); }
.takeBtn svg { width:22px; height:22px; } .takeBtn small { font-size:9px; font-weight:700; }
.rFoot { display:flex; gap:8px; padding:10px 10px 14px; align-items:center; }
.rFoot input { flex:1; min-width:0; height:42px; border:none; border-radius:999px; background:rgba(0,0,0,.3); color:var(--dtext); padding:0 16px; }
.rFoot input::placeholder { color:#B3A9DE; }
.cBtn { width:42px; height:42px; border-radius:50%; border:none; background:rgba(0,0,0,.3); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cBtn svg { width:22px; height:22px; }
.cBtn.on { background:var(--mint); color:var(--ink); }
.cBtn.giftC { width:50px; height:50px; background:radial-gradient(circle at 35% 30%, #FFE08A, #FF9A3C 70%); color:#7A2E00; box-shadow:0 0 14px #FFB34B99; }
.cBtn.giftC svg { width:26px; height:26px; }
.cBtn:disabled { opacity:.4; cursor:default; }

/* ===== sheets ===== */
.sheetWrap { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.sheetBg { position:absolute; inset:0; background:rgba(0,0,0,.45); }
.sheet { position:relative; width:100%; max-width:420px; background:#0F1E33; color:var(--dtext); border-radius:22px 22px 0 0; padding:14px 14px 18px; display:flex; flex-direction:column; gap:12px; }
.sheet.light { background:#fff; color:var(--ink); }
.sheetRow { border-bottom:1px solid #1F3350; padding-bottom:10px; }
.targets { flex:1; display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:2px 4px 4px 0; }
.targets::-webkit-scrollbar { display:none; }
.giftTabs button { white-space:nowrap; }
.tg { width:40px; height:40px; border-radius:50%; border:2px solid transparent; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--ink); position:relative; padding:0; }
.tg.on { border-color:#D6FF6B; } .tg.on::after { content:"✓"; position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:50%; background:#D6FF6B; color:var(--ink); font-size:10px; display:flex; align-items:center; justify-content:center; }
.pill { border:1.5px solid #D6FF6B; color:#D6FF6B; background:none; border-radius:999px; padding:4px 12px; font-size:12px; }
.giftTabs { display:flex; gap:8px; }
.giftTabs button { border:none; background:none; color:#7F93B3; font-size:15px; padding:4px 6px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.giftTabs button.on { color:var(--dtext); font-weight:700; }
.giftTabs button.on::after { content:""; width:18px; height:3px; border-radius:2px; background:#D6FF6B; }
.giftTabs button.lk { border:1.5px solid #FFC24B; border-radius:999px; color:#FFC24B; padding:4px 12px; }
.giftTabs button.lk.on { background:#FFC24B; color:var(--ink); } .giftTabs button.lk.on::after { display:none; }
.oddsBtn { border:1px solid #2E4A70; background:none; color:#9FB3D1; border-radius:999px; font-size:11px; padding:4px 10px; }
.luckyNote { font-size:11px; color:#FFD27A; background:#16304D; border-radius:10px; padding:6px 10px; }
.giftGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.gItem { background:transparent; border:2px solid transparent; border-radius:14px; color:var(--dtext); display:flex; flex-direction:column; align-items:center; padding:8px 2px; gap:2px; }
.gItem.sel { border-color:#D6FF6B; background:#16304D; }
.gItem .nm { font-size:12px; } .gItem .pr { font-size:11px; color:#FFD27A; }
.gItem .luck { font-size:9px; background:#FFC24B; color:var(--ink); border-radius:4px; padding:0 4px; font-weight:700; }
.darkChip { background:#16304D; color:var(--dtext); box-shadow:none; } .darkChip b { background:var(--gold); color:var(--ink); border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.qty { height:40px; border-radius:999px; border:1.5px solid #D6FF6B; background:transparent; color:#D6FF6B; padding:0 10px; font-weight:700; }
.qty option { color:#000; }
.sheet .btn.gold { background:linear-gradient(90deg, #D6FF6B, #3EE0B5); }
.mItem { border:none; background:#F3FAF7; border-radius:14px; padding:14px; text-align:left; font-size:15px; color:var(--ink); }
.mTitle { font-weight:700; font-size:18px; }
.typeRow { display:flex; gap:8px; flex-wrap:wrap; }
.typeRow button { border:2px solid #D5E8E0; background:#fff; border-radius:999px; padding:6px 14px; }
.typeRow button.on { border-color:var(--mintDk); background:#DDF6EC; }
.oddsTbl { width:100%; border-collapse:collapse; font-size:14px; }
.oddsTbl td, .oddsTbl th { padding:8px; border-bottom:1px solid #EEF3F1; text-align:left; }

/* ===== ปุ่ม GAME ในห้อง ===== */
.gameBtn { width:58px; height:58px; border-radius:16px; border:2px solid #FFD36B; background:linear-gradient(160deg, #FF4FA3, #7B2CF0); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(255,79,163,.5); padding:0; }
.gameBtn b { font-size:20px; line-height:1; color:#FFE27A; text-shadow:0 2px 0 #B0127A; font-style:italic; }
.gameBtn small { font-size:9px; font-weight:700; letter-spacing:1px; }

/* ===== Lucky 77 (หน้าตาแนวเดียวกับวงล้อผลไม้ในแอปห้องเสียง — ภาพวาดเองทั้งหมด) ===== */
#l77Sheet .sheetBg { background:rgba(0,0,0,.25); }
.l77 { position:relative; width:100%; max-width:420px; color:#fff; display:flex; flex-direction:column;
  background:linear-gradient(180deg, #3B1580 0%, #5A1CA0 55%, #C02A9E 100%); border-top:2px solid #8F5BFF; }
/* เวที */
.l77Stage { position:relative; height:400px; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 45%, #7D3BE0 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #2A0E66 0%, #4A169A 70%, #3A1180 100%); }
.l77Stage::after { content:""; position:absolute; left:0; right:0; bottom:0; height:56px; background:linear-gradient(180deg, transparent, #2A0B5E); }
.l77Pillar { position:absolute; top:40px; bottom:40px; width:38px; border-radius:6px;
  background:linear-gradient(90deg, #2B1270, #6B3AD0 45%, #2B1270); box-shadow:inset 0 0 0 2px #8F5BFF55; }
.l77Pillar::before, .l77Pillar::after { content:""; position:absolute; left:-6px; right:-6px; height:14px; border-radius:4px; background:linear-gradient(180deg, #8F5BFF, #4A1C9E); }
.l77Pillar::before { top:-8px; } .l77Pillar::after { bottom:-8px; }
.l77Pillar.left { left:8px; } .l77Pillar.right { right:8px; }
.l77Back { position:absolute; left:10px; top:10px; z-index:3; width:46px; height:46px; border-radius:50%; border:2px solid #E7B8FF; background:radial-gradient(circle at 35% 30%, #D36BFF, #7B2CF0); display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 3px 8px #0006; }
.l77Round { position:absolute; left:64px; top:20px; z-index:3; font-size:15px; font-weight:600; text-shadow:0 1px 3px #000; }
.l77Trophy { position:absolute; left:10px; top:74px; z-index:3; display:flex; flex-direction:column; align-items:center; }
.l77Trophy span { margin-top:-4px; font-size:11px; font-weight:700; background:#7B2CF0; border:1px solid #FFC24B; border-radius:6px; padding:0 5px; }
.l77Trophy span.spin { background:#FF4FA3; }
.l77Side { position:absolute; right:10px; top:10px; z-index:3; display:flex; flex-direction:column; gap:10px; }
.l77Ic { width:44px; height:44px; border-radius:50%; border:2px solid #E7B8FF; background:radial-gradient(circle at 35% 30%, #D36BFF, #7B2CF0); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 3px 8px #0006; }
.l77Ic b { font-size:22px; }
/* วงล้อ */
.l77WheelWrap { position:absolute; left:50%; top:30px; transform:translateX(-50%); width:260px; height:260px; z-index:2; }
.l77Wheel, .l77Needle { position:absolute; left:0; top:0; }
.l77Wheel svg, .l77Needle svg, .l77Disc svg { display:block; }
/* จานกลมเป็นตัวหมุน — กรอบทองชี้ช่องอยู่กับที่ */
.l77Disc { position:absolute; left:0; top:0; width:260px; height:260px; transform-origin:130px 130px; transition:transform 4.2s cubic-bezier(.12,.75,.12,1); }
.l77Needle { pointer-events:none; filter:drop-shadow(0 3px 3px #0008); }
.l77Hub { position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #2A1A40, #050208); border:4px solid #FFD36B; box-shadow:0 0 0 2px #8A5A0A, inset 0 0 0 2px #8A5A0A; display:flex; align-items:center; justify-content:center; }
.l77Hub span { font-size:24px; font-weight:900; color:#FFD84A; text-shadow:0 0 6px #FFB000; font-family:Arial,sans-serif; }
.l77Hub.win { animation:hubPulse .6s ease-in-out 3; }
@keyframes hubPulse { 50% { transform:scale(1.3); box-shadow:0 0 0 2px #8A5A0A, 0 0 22px 8px #FFE27A; } }
.l77Phase { display:none; position:absolute; left:50%; top:318px; z-index:3; transform:translateX(-50%); white-space:nowrap; font-size:11px; font-weight:700; background:rgba(0,0,0,.45); border:1px solid #FFC24B; border-radius:999px; padding:1px 10px; }
/* ปีกพัดสีม่วงด้านข้างวงล้อ */
.l77Wings { position:absolute; left:50%; top:80px; width:340px; height:170px; transform:translateX(-50%); z-index:1;
  background:
    repeating-conic-gradient(from 230deg at 22% 55%, #5B2BB0 0 6deg, #2E1270 6deg 10deg) left/50% 100% no-repeat,
    repeating-conic-gradient(from 30deg at 78% 55%, #5B2BB0 0 6deg, #2E1270 6deg 10deg) right/50% 100% no-repeat;
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 61%); mask:radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 61%); opacity:.9; }
.l77Repeat { position:absolute; right:10px; top:300px; z-index:3; border:2px solid #FFE0F2; border-radius:12px; background:linear-gradient(180deg, #FF7BC8, #E0208E); color:#fff; font-weight:700; font-size:13px; padding:6px 10px; line-height:1.2; width:84px; box-shadow:0 3px 8px #0006; }
.l77Hist { position:absolute; left:16px; right:16px; bottom:8px; z-index:3; display:flex; align-items:center; height:40px; border-radius:999px; background:linear-gradient(180deg, #5B3FB8, #3A2390); border:2px solid #8C76E8; padding:0 8px; }
.l77HistIn { display:flex; gap:2px; flex:1; justify-content:space-between; }
.l77HistIn span { width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.newTag { position:absolute; left:6px; top:-14px; font-size:10px; font-weight:800; font-style:italic; color:#FFE27A; background:#7B2CF0; border:1.5px solid #FFC24B; border-radius:999px; padding:0 6px; }
/* กล่องวางเดิมพัน */
.l77Boxes { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px 8px 6px; background:linear-gradient(180deg, #C02A9E, #A0208A); }
.l77Box { border:3px solid #E8A93A; border-radius:10px; color:#fff; display:flex; flex-direction:column; align-items:center; gap:0; padding:4px 2px 2px; position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #5A1A8E 0 30%, #C21C9E 30% 75%, #8A1478 75%);
  box-shadow:inset 0 0 0 2px #4A1070, 0 3px 6px #0005; }
.l77Box .chipsOn { position:absolute; left:50%; top:34px; transform:translateX(-50%); display:flex; z-index:2; }
.l77Box .chipsOn i { width:20px; height:20px; border-radius:50%; margin-left:-6px; border:2px dashed #fff; box-shadow:0 1px 3px #0008; font-style:normal; font-size:7px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.l77Box:disabled { cursor:default; }
.l77Box.won { animation:boxWin .5s ease-in-out 4; }
@keyframes boxWin { 50% { box-shadow:inset 0 0 0 2px #FFE7A0, 0 0 22px 6px #FFE27A; } }
.l77Box .tot { font-size:16px; font-weight:700; }
.l77Box .row2 { display:flex; align-items:center; gap:2px; }
.l77Box .badge { width:52px; height:44px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #3A6FD8, #1E3E9A); clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%); }
.l77Box .badge.pink { background:linear-gradient(180deg, #FF7BC8, #C21C86); }
.l77Box .mul { font-size:24px; font-weight:900; font-style:italic; color:#F2F2FF; text-shadow:0 2px 0 #5A1C9E, 0 0 6px #fff8; }
.l77Box .my { font-size:16px; font-weight:800; color:#FFE27A; min-height:20px; }
/* แถบล่าง */
.l77Bottom { display:flex; align-items:center; gap:6px; padding:6px 8px 2px; background:linear-gradient(180deg, #5A1CA0, #3B1580); }
.l77Me { display:flex; align-items:center; gap:6px; min-width:0; flex:0 0 112px; }
.l77Av { width:42px; height:42px; border-radius:8px; border:2px solid #FFC24B; display:flex; align-items:center; justify-content:center; font-weight:700; color:#15132B; flex-shrink:0; }
.l77MeInfo { display:flex; flex-direction:column; min-width:0; font-size:12px; }
.l77MeInfo b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:italic; }
.l77MeInfo > span { display:flex; align-items:center; gap:3px; }
.chipDot { width:14px; height:14px; border-radius:50%; background:#3EE0B5; box-shadow:inset 0 0 0 3px #0E8F6A; display:inline-block; flex-shrink:0; }
.l77Daily { width:20px; height:20px; border-radius:50%; border:none; background:#FFC24B; color:#6A3A00; font-weight:900; font-size:14px; padding:0; line-height:1; }
.l77Daily:disabled { opacity:.35; }
.l77Steps { flex:1; display:flex; gap:4px; justify-content:space-between; }
.l77Steps button { width:56px; height:56px; border-radius:50%; border:none; color:#fff; font-weight:900; font-size:15px; padding:0; position:relative; text-shadow:0 1px 2px #0008; transition:transform .12s; }
.l77Steps button::before { content:""; position:absolute; inset:4px; border-radius:50%; border:4px dashed rgba(255,255,255,.85); }
.l77Steps button::after { content:""; position:absolute; inset:12px; border-radius:50%; background:rgba(0,0,0,.18); }
.l77Steps button span { position:relative; z-index:1; }
.l77Steps button.sel { transform:translateY(-5px) scale(1.06); box-shadow:0 0 0 3px #FFE27A, 0 0 16px #FFE27A; }
/* ชิปแบบรูปภาพ (จากชุดภาพของผู้ใช้) */
.l77Steps button.imgChip { background:none; }
.l77Steps button.imgChip::before, .l77Steps button.imgChip::after { display:none; }
.l77Steps button.imgChip img { width:100%; height:100%; display:block; border-radius:50%; }
.l77Box .chipsOn img { width:22px; height:22px; margin-left:-7px; filter:drop-shadow(0 1px 2px #000a); }
.l77Note { text-align:center; font-size:10px; color:#E2CFFF; padding:2px 0 8px; background:#3B1580; }
.l77Win { position:absolute; left:50%; top:150px; transform:translateX(-50%); z-index:5; background:rgba(0,0,0,.72); border:2px solid #FFE27A; border-radius:16px; padding:10px 18px; text-align:center; font-weight:800; color:#FFE27A; font-size:24px; animation:pop 2.2s ease-out forwards; pointer-events:none; white-space:nowrap; }

#giftFx { position:fixed; inset:0; pointer-events:none; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; }
#giftFx.show { animation:pop 1.8s ease-out; }
#giftFx b { font-size:20px; color:#fff; text-shadow:0 2px 8px #000; }
#giftFx .win { font-size:34px; color:#FFC24B; font-weight:700; text-shadow:0 2px 10px #000; }
@keyframes pop { 0%{opacity:0;transform:scale(.3)} 20%{opacity:1;transform:scale(1.15)} 75%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.3) translateY(-60px)} }
.toast { position:fixed; left:50%; bottom:110px; transform:translateX(-50%); background:rgba(21,19,43,.92); color:#fff; padding:10px 18px; border-radius:999px; z-index:40; font-size:13px; max-width:90%; text-align:center; }

/* ===== Lucky 77 ธีม v3: ตามภาพที่ผู้ใช้ออกแบบ (Gemini) — น้ำเงินกรมท่า / เงิน / ทอง บนพื้นม่วงเข้ม ===== */
.l77 { background:#1C1238; border-top:1px solid #3A2A70; }
.l77Stage { height:372px;
  background:
    radial-gradient(ellipse 38% 55% at 12% 55%, rgba(60,200,255,.35), transparent 70%),
    radial-gradient(ellipse 38% 55% at 88% 50%, rgba(170,80,255,.45), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 30%, #3A2470 0%, transparent 70%),
    linear-gradient(180deg, #22163F 0%, #2A1B4E 60%, #1C1238 100%); }
.l77Stage::after { height:70px; background:linear-gradient(180deg, transparent, #241850 40%, #2E2160); border-top:1px solid #4A3A8A; }
.l77Pillar { display:none; }
/* ปีกข้างวงล้อ: แผงลายเส้นสีน้ำเงิน กรอบทอง */
.l77Wings { -webkit-mask:none; mask:none; background:none; top:96px; width:356px; height:150px; opacity:1; }
.l77Wings::before, .l77Wings::after { content:""; position:absolute; top:10px; width:74px; height:130px; border:3px solid #E8B848; border-radius:6px; box-shadow:0 0 0 2px #7A4A08, 0 4px 10px #0008;
  background:repeating-linear-gradient(90deg, #2B56C8 0 5px, #16307E 5px 9px); }
.l77Wings::before { left:0; transform:perspective(300px) rotateY(38deg) skewY(-8deg); }
.l77Wings::after { right:0; transform:perspective(300px) rotateY(-38deg) skewY(8deg); }
.l77WheelWrap { top:22px; }
.l77Hub { width:74px; height:74px; margin:-37px 0 0 -37px; background:radial-gradient(circle at 40% 35%, #1E3A80, #070F2E 75%); border:5px solid #F2C24A; box-shadow:0 0 0 3px #7A4A08, inset 0 0 0 3px #7A4A08, 0 0 14px #000a; }
.l77Hub span { font-size:38px; color:#FFD24A; text-shadow:0 2px 0 #7A4A08, 0 0 10px #FFB000aa; font-family:'Arial Black',Arial,sans-serif; }
.l77Round { left:58px; top:14px; background:rgba(10,8,30,.55); border:1px solid #4A3A8A; border-radius:999px; padding:4px 14px; font-size:14px; text-shadow:none; }
.l77Back, .l77Ic { background:radial-gradient(circle at 40% 35%, #2A3A70, #10183E); border:2px solid #5A6AA8; box-shadow:0 3px 8px #000a, inset 0 1px 0 #ffffff22; }
.l77Back svg path, .l77Ic svg * { stroke:#C8D2F0; }
.l77Ic svg path[fill="#fff"] { fill:#C8D2F0; }
.l77Ic b { color:#C8D2F0; }
.l77Trophy span { background:#10183E; border-color:#5A6AA8; }
.l77Repeat { top:262px; background:linear-gradient(180deg, #3A4670, #1E2648); border:2px solid #8A96C8; border-radius:10px; color:#E8ECFF; }
.l77Hist { background:linear-gradient(180deg, #1A2A66, #0F1A48); border:2px solid #3E6AD8; box-shadow:0 0 10px #3E6AD855; height:46px; }
.l77HistIn span { width:34px; height:34px; }
.newTag { background:linear-gradient(180deg, #F04A3A, #B0181A); border:2px solid #F2C24A; color:#FFE27A; font-size:11px; top:-16px; }
/* กล่องเดิมพัน: กรอบเงิน + หัวสีเทา + ตัวกล่องน้ำเงินอมเขียว */
.l77Boxes { background:#1C1238; gap:8px; padding:10px 8px 8px; }
.l77Box { border:3px solid #B8C0D8; border-radius:10px; padding:0 0 4px; overflow:hidden;
  background:linear-gradient(180deg, #1C3A78 0%, #1E5A8A 60%, #1A4A78 100%);
  box-shadow:inset 0 0 0 2px #5A6688, 0 4px 10px #000a; }
.l77Box .tot { width:100%; text-align:center; background:linear-gradient(180deg, #9AA4BE, #6A7494); color:#fff; font-size:17px; padding:2px 0; text-shadow:0 1px 2px #0008; border-bottom:2px solid #4A5474; }
.l77Box .row2 { padding-top:6px; }
.l77Box .badge { width:58px; height:48px; background:linear-gradient(180deg, #E8ECF8, #8A94B0); padding:3px; }
.l77Box .badge::before { content:""; }
.l77Box .badge, .l77Box .badge.pink { background:linear-gradient(180deg, #F2F4FA, #8A94B0); }
.l77Box .badge svg { background:linear-gradient(180deg, #2E62C8, #12307A); clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%); }
.l77Box .mul { color:#FFD24A; text-shadow:0 2px 0 #7A4A08, 0 0 6px #000a; font-size:28px; }
.l77Box .my { color:#FFD24A; }
.l77Box .chipsOn { top:40px; }
/* แถบล่าง */
.l77Bottom { background:#1C1238; padding:8px 8px 4px; }
.l77Me { background:rgba(10,8,30,.6); border-radius:10px; padding:4px 6px 4px 4px; flex-basis:118px; }
.l77Av { border-color:#C89A3A; border-radius:8px; }
.l77MeInfo b { color:#D8D0F0; font-style:normal; letter-spacing:.5px; }
.l77Note { background:#1C1238; color:#9A92C0; }
.l77Steps button.sel { box-shadow:0 0 0 3px #FFD24A, 0 0 16px #FFD24A; }

/* ===== Lucky 77 v4: ใช้รูปวงล้อของผู้ใช้เป็นชั้นภาพจริง ===== */
.l77Stage { height:384px; background:radial-gradient(ellipse 70% 60% at 50% 40%, #241046, #12081F 75%); }
.l77Stage::after { display:none; }
.l77Art { position:absolute; left:50%; top:22px; width:390px; height:295px; transform:translateX(-50%); z-index:1; }
.l77Art > * { position:absolute; }
/* จานกลม (หมุน) — วางใต้ฐาน ขอบทองของฐานจะทับขอบจาน */
.l77Art .l77Disc { left:72.4px; top:31.6px; width:246px; height:246px; transform-origin:50% 50%; z-index:1;
  transition:transform 4.2s cubic-bezier(.12,.75,.12,1); }
.l77Frame { left:0; top:0; width:390px; height:auto; z-index:2; pointer-events:none; }
.l77Art .l77Needle { left:72.4px; top:31.6px; width:246px; height:246px; z-index:3; filter:drop-shadow(0 2px 3px #0009); }
.l77Num { left:160.4px; top:119.6px; width:70px; height:70px; border-radius:50%; z-index:4; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 42% 30%, #3A62C0 0%, #142C78 45%, #08143E 100%); box-shadow:inset 0 4px 10px #ffffff33, inset 0 -6px 12px #0008; }
.l77Num span { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:40px; line-height:1;
  background:linear-gradient(180deg, #FFF3B0 0%, #FFD24A 45%, #E09A10 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 #6A3A00) drop-shadow(0 0 6px #FFB00088); }
.l77HubImg { left:141.2px; top:100.4px; width:108.3px; height:108.3px; z-index:5; pointer-events:none; }
.l77HubImg.win { animation:hubWin .6s ease-in-out 3; }
@keyframes hubWin { 50% { transform:scale(1.15); filter:drop-shadow(0 0 14px #FFE27A); } }
.l77Wings, .l77WheelWrap, .l77Pillar { display:none !important; }
.l77Repeat { top:300px; }
.l77Trophy { top:66px; }

/* ===== Lucky 77 v5: กรอบชี้จากรูปผู้ใช้ + สายฟ้าเคลื่อนไหว ===== */
.l77Light { left:0; top:0; width:390px; z-index:3; pointer-events:none; mix-blend-mode:screen; animation:boltFlicker 1.7s infinite steps(1); }
@keyframes boltFlicker { 0%{opacity:.55} 12%{opacity:1} 20%{opacity:.7} 34%{opacity:1} 48%{opacity:.6} 55%{opacity:.95} 70%{opacity:.75} 82%{opacity:1} 90%{opacity:.65} }
.l77Bolt { left:0; top:0; width:390px; height:295px; z-index:3; pointer-events:none; mix-blend-mode:screen; }
.l77Art .l77Needle { z-index:4; }
.l77Art .l77Needle svg { overflow:visible; }
.l77Ptr { left:0; top:0; width:390px; z-index:5; pointer-events:none; filter:drop-shadow(0 2px 2px #0008); }
.l77Num { z-index:6; }
.l77HubImg { z-index:7; }

/* v6: แท่ง V อยู่ในรูปขอบทองแล้ว → แผงกระจกอยู่ใต้ขอบทอง */
.l77Art .l77Disc { z-index:1; }
.l77Art .l77Needle { z-index:2; }
.l77Frame { z-index:3; }
.l77Light, .l77Bolt { z-index:4; }
.l77Ptr { display:none; }

/* Lucky 77: โบนัสตอนออก 77 */
.l77 .hItem { position:relative; display:inline-flex; }
.bonusDots { position:absolute; left:50%; bottom:-3px; transform:translateX(-50%); display:flex; gap:2px; }
.bonusDots b { width:7px; height:7px; border-radius:50%; border:1px solid #fff; display:block; }
.bonusDots b.melon { background:#F0435A; } .bonusDots b.plum { background:#3A0F60; }
#modal .hItem { position:relative; display:inline-flex; }
.l77Bonus { position:absolute; left:50%; top:96px; transform:translateX(-50%); z-index:9; white-space:nowrap; pointer-events:none;
  font-family:'Kanit','Prompt',sans-serif; font-weight:600; font-size:18px; color:#fff;
  background:linear-gradient(90deg, #B43BF0, #F0435A); border:2px solid #FFD24A; border-radius:999px; padding:6px 18px;
  box-shadow:0 6px 20px rgba(0,0,0,.5); animation:pop 2.6s ease-out forwards; }
@keyframes popC { 0%{opacity:0;transform:translateX(-50%) scale(.4)} 18%{opacity:1;transform:translateX(-50%) scale(1.12)} 75%{opacity:1;transform:translateX(-50%) scale(1)} 100%{opacity:0;transform:translateX(-50%) scale(1.05) translateY(-30px)} }
.l77Bonus, .l77Win { animation:popC 2.6s ease-out forwards; }