/* Mini-game shell — fixed-size "arcade console" frame (dark neon, mobile-first, theme-agnostic). */
.mg-root { display:flex; justify-content:center; padding:8px; width:100%; box-sizing:border-box; }

/* The console: one consistent size for EVERY state — never resizes menu<->game. */
.mg-screen {
  width:100%; max-width:400px; aspect-ratio:360/620;
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  border-radius:18px; border:1px solid rgba(99,102,241,.55);
  background:radial-gradient(120% 80% at 50% -10%, #131a2e 0%, #0b0f1a 60%, #070a12 100%);
  box-shadow:0 0 0 1px rgba(139,92,246,.15), 0 0 34px rgba(99,102,241,.35), 0 18px 50px rgba(0,0,0,.6);
  font-family:system-ui,Segoe UI,sans-serif; color:#e5e7eb;
}
/* subtle top bezel glow */
.mg-screen::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,.85), rgba(99,102,241,.85), transparent); }

/* TOP BAR: [← back] [ title ] [ ? help | score ] */
.mg-topbar {
  flex:0 0 44px; height:44px; display:flex; align-items:center; gap:8px; padding:0 10px; z-index:1;
  background:linear-gradient(180deg, rgba(20,26,46,.96), rgba(13,17,32,.92));
  border-bottom:1px solid rgba(99,102,241,.25);
}
.mg-tb-title { flex:1; text-align:center; font-size:14px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-tb-right { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
/* BA NÚT THANH TRÊN (◀ / ? / loa) — MỘT khuôn duy nhất, ô 34x34, viền viên thuốc 5px
   => ô trong 24x24, glyph vẽ 22px nên KHÔNG BAO GIỜ tràn ra rồi bị overflow:hidden cắt.
   Glyph là SVG data-URI vẽ tay, KHÔNG dùng ảnh kit nữa: ảnh kit (nohuui/back.png 88x88,
   sound.png 96x96) chỉ có 39x43 và 28x30 pixel có nét — 44% và 29% khung — nên vẽ ở 19px
   thì nét thật chỉ còn 8px và 5px, tức là mờ tịt. Lại còn là hai tấm badge có KHUNG RIÊNG
   (xám / nâu) lồng trong viên thuốc vàng => hai lớp khung chồng nhau, đó là cái "xấu".
   SVG thì nét ăn hết ô, sắc ở mọi DPI, và cả ba nút chung đúng một tông vàng. */
.mg-tb-back, .mg-tb-help, .mg-tb-mute {
  flex:0 0 auto; width:34px; height:34px; border-radius:10px; cursor:pointer; padding:0;
  box-sizing:border-box; background:rgba(30,20,10,.55); color:#ffe9a8;
  font:800 20px/1 system-ui,Segoe UI,sans-serif; display:flex; align-items:center; justify-content:center;
  transition:filter .15s, transform .1s;
  background-repeat:no-repeat; background-position:center; background-size:22px 22px;
  /* subtle kit pill: NOHU UI kit panel_frames/pill_frame.png as a 9-slice ring, dark fill shows through the middle.
     Slice = ĐO trên bản cắt lại (pill.png 94x25, nắp bo hai đầu 16px, ray trên/dưới 8px). Bản cũ khai
     12 36 12 36 trên một file 106x40 có 17 hàng + 12 cột TRỐNG => viên thuốc mất hẳn cạnh dưới (đo: 0%). */
  border-style:solid; border-width:5px; border-image-repeat:stretch;
  border-image-source:url(sprites/shellui/pill.png); border-image-slice:8 16 8 16; border-image-width:5px;
}
.mg-tb-back {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3.2 6.3 12l10.2 8.8z' fill='%23ffd98a'/%3E%3C/svg%3E");
}
.mg-tb-mute {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd98a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.2h3.6L13 5.2v13.6l-4.9-4H4.5z' fill='%23ffd98a'/%3E%3Cpath d='M16.4 8.6a4.8 4.8 0 0 1 0 6.8M19.2 6a8.6 8.6 0 0 1 0 12'/%3E%3C/svg%3E");
}
.mg-tb-back:hover, .mg-tb-help:hover, .mg-tb-mute:hover { filter:brightness(1.2); }
.mg-tb-back:active, .mg-tb-help:active, .mg-tb-mute:active { transform:translateY(1px); }
.mg-tb-score { flex:0 0 auto; min-width:52px; text-align:right; font-size:12px; font-weight:700; color:#a5b4fc; letter-spacing:.3px; }

/* CONTENT: fills the rest of the screen; games fill it exactly, panels scroll internally. */
.mg-content { position:relative; flex:1; min-height:0; overflow:auto; }

/* Panels (menu / start / redeem / code / result / loading) — centered, scroll if tall. */
.mg-overlay { min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; }
.mg-card {
  width:100%; max-width:340px; box-sizing:border-box; padding:18px 16px;
  background:linear-gradient(160deg,#141a2e,#0d1120); border:1px solid #26304d; border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.5); text-align:center; color:#e5e7eb;
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
}
.mg-title { font-size:20px; font-weight:800; color:#fff; }
.mg-sub { font-size:13px; color:#9aa4bf; }
.mg-hint { font-size:12px; color:#6b7392; }
.mg-note { font-size:12px; color:#fca5a5; }
.mg-msg { font-size:14px; color:#e5e7eb; min-height:18px; }

/* GAME HOST: fills the content area exactly (no cap, no per-game resize). */
.mg-host { position:absolute; inset:0; display:flex; }
.mg-host canvas { display:block; touch-action:none; }

/* LOADING */
.mg-loading { display:flex; flex-direction:column; align-items:center; gap:14px; color:#a5b4fc; }
.mg-spinner { width:38px; height:38px; border-radius:50%; border:3px solid rgba(99,102,241,.25); border-top-color:#8b5cf6; animation:mg-spin .8s linear infinite; }
.mg-loading-t { font-size:14px; font-weight:600; }
@keyframes mg-spin { to { transform:rotate(360deg); } }

/* Generic buttons: kit 9-slice border-image (buttons_main-style gold bar) so the ring holds its
   shape while width/padding flex per-label (Chơi / Nhận CODE / Copy / Chơi lại all share this).
   ART 2026-08-03: btn_gold2.png (204x80, khung vàng chạm + ruột đỏ) thay btn_gold.png. Slice
   30 52 30 52 là số ĐO của nhóm cắt: hoa văn góc lấn vào 19/47/17/47 px, cộng biên an toàn để
   góc nằm trọn trong ô góc. `fill` = lấy luôn ruột đỏ của tranh (nền gradient dưới đây chỉ còn
   là lưới an toàn khi ảnh 404).
   border-width GIỮ NGUYÊN 8/14 -> BỐ CỤC KHÔNG ĐỔI. Chỉ border-image-width là 12/21 để hoa văn
   góc vẽ ở 40% cỡ gốc (đọc được); ở 8/14 nó co còn 27% và biến thành sợi vàng trơn — mất tranh.
   12<8+12 và 21<14+18 nên viền tranh lấn vào PADDING mà KHÔNG chạm chữ (đúng cả cho .mg-copy
   padding 10/14 và .mg-lb-save padding 8/14). */
.mg-btn {
  appearance:none; box-sizing:border-box; cursor:pointer; border-radius:11px; padding:12px 18px;
  font-size:15px; font-weight:700; color:#ffe9a8; background:linear-gradient(135deg,#2a1808,#160c04);
  box-shadow:0 4px 16px rgba(212,175,55,.25); transition:filter .15s,transform .1s;
  border-style:solid; border-width:8px 14px; border-image-repeat:stretch;
  border-image-source:url(sprites/shellui/btn_gold2.png); border-image-slice:30 52 30 52 fill; border-image-width:12px 21px;
}
.mg-btn:hover { filter:brightness(1.08); }
.mg-btn:active { transform:translateY(1px); }
.mg-btn:disabled { opacity:.6; cursor:default; }
/* MỘT phong cách nút, HAI cấp độ. Nút chính (.mg-play) và nút phụ (.mg-ghost: Thử thách
   hôm nay / chế độ riêng) dùng CHUNG .mg-btn: cùng font, cùng bo góc, cùng tông VÀNG NOHU.
   Khác nhau đúng ba thứ đo được: cỡ chữ (17 vs 15), độ sáng chữ (#ffe9a8 vs #e8c887) và
   quầng sáng (có vs không). Bản cũ để nút phụ màu #c7d2fe — xanh tím, lạc hẳn tông vàng.
   2026-08-03: nút phụ BỎ ảnh riêng btn_dark.png, dùng CHUNG btn_gold2.png của .mg-btn và chỉ hạ
   sắc bằng filter. Trước đây hai nút là hai bức tranh khác nhau (vàng vs đen) — nay khung chạm
   giống hệt nhau, khác đúng độ đậm, nên "một phong cách, hai cấp độ" là thật chứ không phải khẩu
   hiệu. :hover phải khai lại filter vì .mg-btn:hover (0,2,0) đè .mg-ghost (0,1,0). */
.mg-play { font-size:17px; padding:14px 22px; }
.mg-ghost {
  background:linear-gradient(135deg,#1d1206,#0f0803); box-shadow:none; color:#e8c887;
  filter:saturate(.55) brightness(.82);
}
.mg-ghost:hover { color:#ffe9a8; filter:saturate(.8) brightness(1); }

.mg-lbl { display:flex; flex-direction:column; gap:5px; text-align:left; font-size:12.5px; color:#9aa4bf; }
.mg-input {
  width:100%; box-sizing:border-box; padding:11px 13px; border-radius:10px;
  background:#0e1424; border:1.5px solid #2b365a; color:#fff; font-size:15px; outline:none;
}
.mg-input:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.18); }
select.mg-input { appearance:none; }

.mg-code-row { display:flex; gap:8px; align-items:center; justify-content:center; }
.mg-code {
  font:800 20px/1 "Courier New",monospace; letter-spacing:2px; color:#34d399;
  background:#0e1424; border:1.5px dashed rgba(52,211,153,.35); border-radius:10px; padding:12px 14px; flex:1; word-break:break-all;
}
.mg-copy { padding:10px 14px; font-size:13px; }

/* HOW-TO-PLAY panel (start screen + "?" overlay). */
.mg-help {
  width:100%; box-sizing:border-box; text-align:left; display:flex; flex-direction:column; gap:9px;
  background:linear-gradient(160deg,#161d33,#0e1322); border:1px solid rgba(99,102,241,.35); border-radius:12px; padding:12px 14px;
}
.mg-help-h { font-size:13.5px; font-weight:800; color:#fff; text-align:center; }
.mg-help-row { display:flex; flex-direction:column; gap:2px; }
.mg-help-k { font-size:12px; font-weight:700; color:#a5b4fc; }
.mg-help-v { font-size:13px; color:#d1d5db; line-height:1.45; }
/* "?" help overlay while playing — covers content, leaves the game running underneath. */
.mg-help-ov { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(7,10,18,.86); overflow:auto; }
.mg-help-ov .mg-help { max-width:320px; }

/* Game hub — responsive card grid (mobile-first, dark neon). */
.mg-menu { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:4px; }
.mg-menu-card {
  cursor:pointer; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 8px; border-radius:14px; color:#e5e7eb;
  background:linear-gradient(160deg,#182140,#0e1428);
  border-style:solid; border-width:8px; border-image-repeat:stretch;
  border-image-source:url(sprites/shellui/btn_dark.png); border-image-slice:12 19 12 19; border-image-width:8px;
  transition:transform .1s, filter .15s, box-shadow .15s;
}
.mg-menu-card:hover { transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 8px 24px rgba(212,175,55,.28); }
.mg-menu-card:active { transform:translateY(0); }
.mg-menu-icon { font-size:38px; line-height:1; }
.mg-menu-name { font-size:13.5px; font-weight:700; color:#fff; text-align:center; }
.mg-menu-play { font-size:12px; font-weight:600; color:#a5b4fc; }

/* ==========================================================================
   LOBBY MODE — full-width casino page: gold/dark nav bar + thumbnail card grid.
   Wider than a single game screen; the fixed .mg-screen appears only on launch.
   ========================================================================== */
.mg-lobby {
  width:100%; max-width:1100px; box-sizing:border-box; padding:4px 10px 20px;
  font-family:system-ui,Segoe UI,sans-serif; color:#e9e2c8;
}
.mg-lobby-head {
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-align:center; font-size:20px; font-weight:900; letter-spacing:1px; margin:6px 0 12px;
  background:linear-gradient(180deg,#ffe9a8,#f5c542 45%,#b8860b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* NAV BAR — gold-trimmed dark casino bar, horizontal scroll, pill tabs.
   CĂN GIỮA theo yêu cầu chủ dự án (2026-07-28) — dùng margin:auto ở 2 đầu thay vì
   justify-content:center vì center + overflow cắt mất mép trái khi thanh tràn. */
.mg-lobby-nav {
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px; margin-bottom:16px; border-radius:14px;
  background:linear-gradient(180deg,#141019,#0b0810);
  border:1px solid rgba(212,175,55,.45);
  box-shadow:0 0 0 1px rgba(212,175,55,.12), 0 8px 26px rgba(0,0,0,.5);
  scrollbar-width:thin; scrollbar-color:rgba(212,175,55,.5) transparent;
}
.mg-lobby-nav::-webkit-scrollbar { height:6px; }
.mg-lobby-nav::-webkit-scrollbar-thumb { background:rgba(212,175,55,.5); border-radius:3px; }
.mg-nav-item {
  flex:0 0 auto; display:inline-flex; align-items:center; white-space:nowrap; cursor:pointer;
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:800; letter-spacing:.4px;
  text-decoration:none; color:#f0e6c8; background:rgba(212,175,55,.08);
  border:1px solid rgba(212,175,55,.35); transition:transform .1s, filter .15s, background .15s;
}
.mg-lobby-nav > :first-child { margin-left:auto; }
.mg-lobby-nav > :last-child { margin-right:auto; }
a.mg-nav-item:hover { filter:brightness(1.15); background:rgba(212,175,55,.2); transform:translateY(-1px); }
a.mg-nav-item:active { transform:translateY(0); }
.mg-nav-active {
  color:#1a1206; background:linear-gradient(180deg,#ffe9a8,#f5c542 50%,#d4af37);
  border-color:#ffe9a8; box-shadow:0 4px 14px rgba(212,175,55,.45);
}
.mg-nav-disabled { opacity:.42; cursor:default; pointer-events:none; }

/* GRID — responsive 2 (mobile) → 3 → 4 → 5 columns. */
.mg-lobby-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:560px)  { .mg-lobby-grid { grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (min-width:820px)  { .mg-lobby-grid { grid-template-columns:repeat(4,1fr); gap:16px; } }
@media (min-width:1040px) { .mg-lobby-grid { grid-template-columns:repeat(5,1fr); } }

/* THUMBNAIL CARD — square image on top + name below, gold-trim, hover lift. */
.mg-thumb-card {
  cursor:pointer; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; border-radius:14px;
  background:linear-gradient(160deg,#171019,#0c0810);
  border-style:solid; border-width:8px; border-image-repeat:stretch;
  border-image-source:url(sprites/shellui/btn_gold.png); border-image-slice:15 21 15 21; border-image-width:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:transform .12s, filter .15s, box-shadow .15s;
}
.mg-thumb-card:hover { transform:translateY(-3px); filter:brightness(1.1); box-shadow:0 12px 30px rgba(212,175,55,.28); }
.mg-thumb-card:active { transform:translateY(-1px); }
.mg-thumb-img {
  position:relative; aspect-ratio:1/1; width:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.mg-thumb-img img { width:100%; height:100%; object-fit:cover; display:block; }
/* Fallback tile when no thumb: neon gradient + big centered emoji. */
.mg-thumb-fallback {
  background:radial-gradient(120% 100% at 50% 0%, #3a2b6b 0%, #221546 50%, #0e0a20 100%);
  box-shadow:inset 0 0 40px rgba(139,92,246,.35);
}
.mg-thumb-emoji { font-size:min(48px,16vw); line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.mg-thumb-name {
  padding:9px 8px 2px; font-size:13.5px; font-weight:800; color:#fff; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mg-thumb-play { padding:0 8px 10px; font-size:11.5px; font-weight:700; text-align:center; color:#f5c542; }

/* ==========================================================================
   THẦN TÀI NOHU BRAND LAYER — gold/red mascot chrome over the neon shell.
   Every image self-removes on error (mg-shell.js brandImg), so all rules here
   are additive: with no brand sprites the shell renders exactly as before.
   ========================================================================== */

/* Framed mascot in the top bar (persistent across states).
   avatar_framed.png nay da la anh VUONG 208x208 (xem sprites/brand) — tỉ lệ 1:1 khớp đúng
   ô tròn nên object-fit:cover không cắt gì cả. Bản cũ 147x174 (tỉ lệ .845) bị cover xén
   mất 15.5% chiều cao: đúng chỗ vành mũ "NOHU" và chân tượng. */
.mg-tb-avatar {
  flex:0 0 auto; box-sizing:border-box; width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:1.5px solid rgba(245,197,66,.75); background:#0b0810;
  box-shadow:0 0 8px rgba(212,175,55,.5);
}

/* Brand-flavoured card: warm gold rim + faint red inner glow, overrides the indigo card.
   Frame art = NOHU UI kit panel_frames/frame_gold.png as a 9-slice border-image; the ornate
   ring is painted in the border, the card's own dark gradient background still shows through
   the (unsliced) middle — same technique used for every kit panel below. */
.mg-card-brand {
  box-sizing:border-box; border-style:solid; border-width:16px; box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 0 46px rgba(180,30,30,.10);
  border-image-source:url(sprites/shellui/panel_gold.png); border-image-slice:23; border-image-width:16px; border-image-repeat:stretch;
}
.mg-card-brand .mg-title { color:#ffd23c; text-shadow:0 1px 3px rgba(0,0,0,.65); }

/* Big framed mascot on the start card. Nguồn vuông 208x208 = đúng 2x ô 104 -> nét, không méo. */
.mg-avatar-hero {
  box-sizing:border-box; width:104px; height:104px; align-self:center; border-radius:50%; object-fit:cover;
  border:2px solid rgba(245,197,66,.8); background:radial-gradient(circle,#1a1206,#0b0810);
  box-shadow:0 0 0 3px rgba(212,175,55,.15), 0 0 26px rgba(212,175,55,.45);
  animation:mg-float 3.2s ease-in-out infinite;
}
@keyframes mg-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* WIN/LOSE emotion face + coin flourish. Wrapper collapses to nothing if both images fail. */
.mg-face-wrap { position:relative; align-self:center; display:flex; justify-content:center; min-height:0; }
.mg-face {
  width:96px; height:96px; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
  animation:mg-pop .45s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes mg-pop { 0%{ transform:scale(.3); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

/* NOHU coin level-up flourish — pops in and bobs beside a winning face. */
.mg-coin {
  position:absolute; right:-10px; bottom:-6px; width:34px; height:34px; object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(245,197,66,.75));
  animation:mg-coin-pop .5s cubic-bezier(.2,1.5,.4,1) .15s both, mg-coin-bob 2.4s ease-in-out .65s infinite;
}
@keyframes mg-coin-pop { 0%{ transform:scale(0) rotate(-30deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
@keyframes mg-coin-bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

@media (prefers-reduced-motion:reduce) {
  .mg-avatar-hero, .mg-face, .mg-coin { animation:none; }
}

/* Bang xep hang dung chung — hien o man ket van cua MOI game */
.mg-lb { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,210,60,.28); text-align:left; }
.mg-lb-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.mg-lb-ttl { font:800 12.5px system-ui,Arial,sans-serif; color:#ffd23c; letter-spacing:.4px; }
.mg-lb-tabs { display:flex; gap:5px; }
.mg-lb-tab { padding:3px 9px; border-radius:999px; border:1px solid rgba(255,210,60,.45); background:transparent;
  color:#e9d9ad; font:700 11px system-ui,Arial,sans-serif; cursor:pointer; }
.mg-lb-tab.on { background:rgba(255,210,60,.22); color:#fff3cd; }
.mg-lb-list { max-height:190px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,210,60,.55) rgba(255,255,255,.06); }
.mg-lb-list::-webkit-scrollbar { width:6px; }
.mg-lb-list::-webkit-scrollbar-track { background:rgba(255,255,255,.06); border-radius:3px; }
.mg-lb-list::-webkit-scrollbar-thumb { background:rgba(255,210,60,.55); border-radius:3px; }
.mg-lb-list::-webkit-scrollbar-thumb:hover { background:rgba(255,210,60,.8); }
.mg-lb-row { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:6px; }
.mg-lb-row:nth-child(odd) { background:rgba(255,255,255,.035); }
.mg-lb-row.me { background:rgba(255,210,60,.18); box-shadow:inset 0 0 0 1px rgba(255,210,60,.6); }
.mg-lb-row b { width:20px; text-align:right; font:800 11.5px system-ui,Arial,sans-serif; color:#ffe27a; }
.mg-lb-row span { flex:1; font:600 12px system-ui,Arial,sans-serif; color:#efe3c6;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mg-lb-row i { font:800 12px system-ui,Arial,sans-serif; color:#ffd23c; font-style:normal; }
.mg-lb-note { padding:9px 4px; text-align:center; font:600 11.5px system-ui,Arial,sans-serif; color:#bcae90; }
.mg-lb-name { display:flex; gap:6px; margin-top:8px; }
.mg-lb-name .mg-input { flex:1; }
.mg-btn.mg-lb-save { padding:8px 14px; font-size:12px; }

/* CHỈ chỉnh khoảng cách — cỡ chữ để nguyên 15px của .mg-btn. Bản cũ ép 13px làm nút phụ
   trông như một dòng chữ khác hẳn nút chính (17px). */
.mg-btn.mg-daily { margin-top:-4px; }

.mg-lobby-head { position:relative; }
.mg-lobby-mute { position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,210,60,.5);
  background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd98a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.2h3.6L13 5.2v13.6l-4.9-4H4.5z' fill='%23ffd98a'/%3E%3Cpath d='M16.4 8.6a4.8 4.8 0 0 1 0 6.8M19.2 6a8.6 8.6 0 0 1 0 12'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  cursor:pointer; }
.mg-lobby-mute:active { transform:translateY(-50%) scale(.94); }

/* So lieu tren the game trong sanh */
.mg-thumb-img { position:relative; }
.mg-thumb-prize { position:absolute; left:5px; top:5px; padding:2px 7px; border-radius:999px;
  background:linear-gradient(180deg,#ffd23c,#e5a713); color:#3a2a00;
  font:800 10px system-ui,Arial,sans-serif; box-shadow:0 1px 4px rgba(0,0,0,.45); }
.mg-thumb-hot { position:absolute; right:5px; bottom:5px; padding:2px 6px; border-radius:999px;
  background:rgba(0,0,0,.62); color:#ffb45c; font:700 9.5px system-ui,Arial,sans-serif; }
/* Vector HOT cho 4 game chủ lực — bám cạnh badge tiền, nhấp nháy nhẹ cho nổi */
.mg-prize-hot { display:inline-flex; align-items:center; gap:4px; }
.mg-hot-vec { display:inline-flex; align-items:center; gap:2px; padding:1px 5px; border-radius:999px;
  background:linear-gradient(180deg,#ff5a3c,#d61f1f); color:#fff; font:900 9px system-ui,Arial,sans-serif;
  letter-spacing:.4px; box-shadow:0 0 6px rgba(255,90,60,.65); animation:mgHotNhay 1.1s ease-in-out infinite; }
@keyframes mgHotNhay { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .mg-hot-vec { animation:none; } }
.mg-thumb-best { padding:0 6px 4px; text-align:center; color:#9aa4bf;
  font:600 10px system-ui,Arial,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mg-star-line { margin:2px 0 4px; padding:5px 10px; border-radius:8px; text-align:center;
  background:rgba(255,210,60,.12); border:1px solid rgba(255,210,60,.32);
  color:#ffe27a; font:700 11.5px system-ui,Arial,sans-serif; }

.mg-btn.mg-mode { margin-top:-4px; }

/* Khung game KHONG BAO GIO duoc lo thanh cuon cua trinh duyet — do la thu bien no tu "game
   dien thoai" thanh "trang web". Day chi la luoi an toan; cach dung van la lam vua khung. */
.mg-content { scrollbar-width: none; -ms-overflow-style: none; }
.mg-content::-webkit-scrollbar { width: 0; height: 0; }

/* logo NOHU đầu sảnh + icon thật trong thẻ game (thay emoji) */
.mg-head-logo { width:30px; height:30px; border-radius:7px; flex:none;
  box-shadow:0 1px 5px rgba(0,0,0,.5); }

/* ===== ẢNH THAY EMOJI (bộ sprites/shellui/ico — bản ĐÃ XÉN của sprites/nohuui) =========
   Mọi <img class="mg-ico"> tự gỡ mình khi thiếu file, nên các luật dưới đây chỉ
   là trang trí — thiếu ảnh thì giao diện quay đúng về bản chữ, không vỡ. */
.mg-ico { image-rendering:auto; }
/* Dòng phụ có icon (Điểm càng cao, thưởng càng lớn) — xếp hàng ngang cho icon thẳng chữ. */
.mg-sub { display:flex; align-items:center; justify-content:center; gap:2px; }
/* logo Thần Tài thay 🎮 khi game chưa có icon/thumbnail riêng */
.mg-menu-logo { width:40px; height:40px; border-radius:9px; }
.mg-thumb-logo { width:min(48px,16vw); height:min(48px,16vw); border-radius:12px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
/* NÚT LOA TẮT — cùng SVG nhưng thay hai vòng sóng bằng dấu ✕ đỏ, vẽ luôn trong ảnh nền.
   (Bản cũ chồng một gạch chéo ::after lên ảnh badge; bỏ được cả hai luật đó.) */
.mg-tb-mute.mg-off, .mg-lobby-mute.mg-off {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b5a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 9.2h3.6L13 5.2v13.6l-4.9-4H4.5z' fill='%23b9a888' stroke='%23b9a888' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M16.6 9.4l5.2 5.2M21.8 9.4l-5.2 5.2'/%3E%3C/svg%3E");
}
.mg-thumb-prize, .mg-thumb-hot, .mg-thumb-best { display:flex; align-items:center; }
.mg-thumb-prize, .mg-thumb-hot { display:inline-flex; }
.mg-thumb-best { justify-content:center; gap:2px; }