/*!
 * 제우스벳 — components.css
 * Reusable UI kit: header, buttons, cards, game/vendor tiles, modal,
 * table, form, badges, toast, bottom-nav. All dark-gold.
 */

/* ===== Header ===== */
.dz-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(8, 5, 2, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.dz-header-inner {
  height: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px;
}
.dz-logo {
  font-size: 22px; font-weight: 800; letter-spacing: 0.04em;
  background: var(--grad-gold); -webkit-background-clip: text;
  background-clip: text; color: transparent; white-space: nowrap;
}
.dz-nav { display: flex; gap: 4px; margin-left: 8px; flex: 1; overflow-x: auto; }
.dz-nav a {
  padding: 8px 14px; border-radius: 8px; font-size: 14px;
  color: var(--text-2); white-space: nowrap; transition: all .15s;
}
.dz-nav a:hover { color: var(--gold); background: var(--surface); }
.dz-nav a.dz-active { color: var(--gold); background: var(--surface-hi); font-weight: 600; }
.dz-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.dz-wallet-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 13px; cursor: pointer;
}
.dz-wallet-chip b { color: var(--gold); }
.dz-wallet-chip .dz-refresh { color: var(--text-mut); font-size: 12px; }
.dz-wallet-chip .dz-refresh:hover { color: var(--gold); }

.dz-user-menu { position: relative; }
.dz-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-gold); color: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; cursor: pointer; font-size: 15px;
}
.dz-dropdown {
  position: absolute; right: 0; top: 46px; min-width: 180px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; z-index: 60;
}
.dz-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--text-2);
  cursor: pointer;
}
.dz-dropdown a:hover { background: var(--surface); color: var(--gold); }
.dz-dropdown hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }

/* ===== Language switcher ===== */
.dz-lang { position: relative; }
.dz-lang-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); cursor: pointer; font-size: 13px;
}
.dz-lang-menu {
  position: absolute; right: 0; top: 44px; min-width: 210px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px; z-index: 60;
}
.dz-lang-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--gold-soft);
}
.dz-lang-item:hover { background: var(--surface-hi); color: var(--gold); }
.dz-lang-item.dz-active { background: var(--surface-hi); color: var(--gold); font-weight: 600; }
.dz-lang-item .dz-en { font-size: 11px; color: var(--text-mut); }

/* ===== Buttons ===== */
.dz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: filter .15s, background .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.dz-btn:active { transform: translateY(1px); }
.dz-btn-primary { background: var(--grad-gold); color: #fff; }
.dz-btn-primary:hover { filter: brightness(1.1); }
.dz-btn-blue { background: var(--grad-blue); color: #fff; }
.dz-btn-blue:hover { filter: brightness(1.1); }
.dz-btn-accent { background: var(--grad-red); color: #fff; }
.dz-btn-accent:hover { filter: brightness(1.08); }
.dz-btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--line-2); }
.dz-btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
.dz-btn-sm { padding: 6px 12px; font-size: 12px; }
.dz-btn-block { width: 100%; }
.dz-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ===== Cards / panels ===== */
.dz-card {
  background: var(--grad-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.dz-panel {
  background: rgba(0,0,0,.4); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}

/* ===== Category quick-entry ===== */
.dz-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.dz-cat-tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3; cursor: pointer; border: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.dz-cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold); border-color: var(--line-2); }
.dz-cat-tile .dz-cat-ic { font-size: 30px; color: var(--gold); }
.dz-cat-tile .dz-cat-name { font-weight: 700; color: var(--gold-soft); }
.dz-cat-tile .dz-cat-count { font-size: 11px; color: var(--text-mut); }

/* ===== Vendor + game grids ===== */
.dz-vendor-grid, .dz-game-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.dz-game-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
/* When a vendor chip scrolls the grid into view, clear the sticky header +
   filter bar so the first row isn't hidden behind them. */
.dz-game-grid { scroll-margin-top: calc(var(--header-h) + 116px); }

.dz-vendor {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: rgba(0,0,0,.35); cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.dz-vendor:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dz-vendor img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.dz-vendor-body { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; }
.dz-vendor-name { font-size: 13px; font-weight: 600; color: var(--gold-soft); }
.dz-badge {
  background: var(--grad-gold); color: var(--bg-0);
  font-size: 11px; padding: 1px 8px; border-radius: 10px; min-width: 22px; text-align: center;
  font-weight: 700;
}
.dz-vendor.dz-empty-vendor { opacity: .5; filter: grayscale(.5); }
.dz-vendor.dz-empty-vendor .dz-badge { background: #555; color: #ddd; }

.dz-game {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface); cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.dz-game:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dz-game img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
/* Thumbnail area: a labelled placeholder sits behind the image, so a missing or
   proxy-blocked thumbnail degrades to a branded name-tile, never a blank. */
.dz-game-thumb { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.dz-game-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center; background: linear-gradient(150deg, #2a1b52, #140d2e);
}
.dz-game-ph span {
  font-size: 12px; font-weight: 700; color: #b9a7f5; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dz-game-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dz-game .dz-play-over {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff; font-weight: 700; opacity: 0; transition: opacity .18s;
}
.dz-game:hover .dz-play-over { opacity: 1; }
.dz-game-name {
  font-size: 11px; color: var(--text-2); padding: 6px 8px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dz-game .dz-tag {
  position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px; text-transform: uppercase;
}
.dz-tag-hot { background: #c53030; color: #fff; }
.dz-tag-new { background: var(--gold); color: var(--bg-0); }

/* ===== Modal ===== */
.dz-modal-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dz-modal {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-1));
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 26px 26px 28px;
  max-height: 90vh; overflow-y: auto;
  animation: dz-modal-in .2s ease-out;
}
.dz-modal-lg { max-width: 640px; }
@keyframes dz-modal-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.dz-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dz-modal-title { font-size: 20px; font-weight: 700; color: var(--gold-soft); }
.dz-modal-x { background: none; border: 0; color: var(--text-mut); font-size: 24px; cursor: pointer; line-height: 1; }
.dz-modal-x:hover { color: #fff; }
.dz-modal-switch { text-align: center; font-size: 13px; color: var(--text-mut); margin-top: 16px; }
.dz-modal-switch a { color: var(--gold); cursor: pointer; }

/* ===== Forms ===== */
.dz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dz-field label { font-size: 12px; color: var(--text-2); letter-spacing: .02em; }
.dz-input, .dz-select {
  background: rgba(0,0,0,.45); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 11px 13px; color: var(--text);
  /* 16px is the minimum that stops iOS Safari from auto-zooming the whole
     page on input focus (the classic "layout breaks on iPhone" bug). */
  font-size: 16px; outline: none; transition: border-color .15s; width: 100%;
}
.dz-input:focus, .dz-select:focus { border-color: var(--gold); }
.dz-input::placeholder { color: var(--text-dim); }
.dz-input[readonly] { color: var(--text-mut); cursor: not-allowed; }
.dz-input-group { display: flex; gap: 8px; }
.dz-input-group .dz-select { max-width: 110px; }
.dz-form-err { color: var(--danger); font-size: 12px; margin-top: -6px; margin-bottom: 10px; }

/* ===== Tables ===== */
.dz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dz-table thead th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-mut);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.dz-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text-2); }
.dz-table tbody tr:hover td { background: rgba(255,215,100,.03); }
.dz-tx-in { color: var(--ok); font-weight: 600; }
.dz-tx-out { color: var(--danger); font-weight: 600; }

/* ===== Badges / status ===== */
.dz-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.dz-pill-gold { background: var(--surface-hi); color: var(--gold); }
.dz-pill-ok { background: rgba(134,226,142,.15); color: var(--ok); }
.dz-pill-warn { background: rgba(247,210,104,.15); color: var(--warn); }
.dz-pill-danger { background: rgba(242,141,141,.15); color: var(--danger); }

/* ===== Marquee (winners / announcement) ===== */
.dz-marquee {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 14px; overflow: hidden; margin: 16px 0;
}
.dz-marquee .dz-mq-ic { color: var(--gold); flex-shrink: 0; }
.dz-marquee-track { display: flex; gap: 36px; white-space: nowrap; animation: dz-mq 30s linear infinite; }
.dz-marquee:hover .dz-marquee-track { animation-play-state: paused; }
@keyframes dz-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dz-mq-item { font-size: 13px; color: var(--text-2); }
.dz-mq-item b { color: var(--gold); }

/* ===== Hero ===== */
.dz-hero { margin: 18px 0 8px; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.dz-hero-slide { position: relative; aspect-ratio: 21/7; background: var(--surface); }
.dz-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.dz-hero-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.dz-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; }
.dz-hero-dot.dz-active { background: var(--gold); width: 20px; border-radius: 4px; }

/* ===== Toast ===== */
.dz-toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.dz-toast {
  padding: 12px 18px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow);
  animation: dz-toast-in .2s ease-out; max-width: 320px;
}
.dz-toast-success { background: rgba(30,60,30,.95); color: var(--ok); border: 1px solid rgba(134,226,142,.3); }
.dz-toast-error { background: rgba(70,20,20,.95); color: var(--danger); border: 1px solid rgba(242,141,141,.3); }
.dz-toast-info { background: rgba(20,40,60,.95); color: var(--info); border: 1px solid rgba(125,184,242,.3); }
@keyframes dz-toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ===== Footer ===== */
.dz-footer { margin-top: 50px; border-top: 1px solid var(--line); padding: 30px 0 60px; color: var(--text-mut); font-size: 12px; }
.dz-footer-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.dz-footer h4 { color: var(--gold-soft); font-size: 13px; margin: 0 0 10px; }
.dz-footer a { display: block; color: var(--text-mut); padding: 3px 0; }
.dz-footer a:hover { color: var(--gold); }

/* ===== Bottom nav (mobile) ===== */
.dz-bottomnav { display: none; }
@media (max-width: 820px) {
  .dz-nav { display: none; }
  .dz-bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: rgba(8,5,2,.95); border-top: 1px solid var(--line); backdrop-filter: blur(14px);
  }
  .dz-bottomnav a {
    flex: 1; text-align: center; padding: 8px 0; font-size: 10px; color: var(--text-mut);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
  }
  .dz-bottomnav a i { font-size: 18px; }
  .dz-bottomnav a.dz-active { color: var(--gold); }
  body { padding-bottom: 58px; }
}

/* ===== Account layout ===== */
.dz-acct-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin: 20px 0; }
.dz-acct-menu { list-style: none; padding: 0; margin: 0; }
.dz-acct-menu li {
  padding: 12px 16px; border-radius: 8px; cursor: pointer; color: var(--text-2);
  display: flex; align-items: center; gap: 10px; border-left: 3px solid transparent; font-size: 14px;
}
.dz-acct-menu li:hover { background: var(--surface); color: var(--gold); }
.dz-acct-menu li.dz-active { background: var(--surface-hi); color: var(--gold); border-left-color: var(--gold); font-weight: 600; }
.dz-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 22px; }
.dz-stat { background: var(--grad-panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.dz-stat-l { font-size: 11px; color: var(--text-mut); text-transform: uppercase; letter-spacing: .05em; }
.dz-stat-v { font-size: 21px; font-weight: 700; color: var(--gold); margin-top: 4px; word-break: break-all; }
@media (max-width: 820px) { .dz-acct-layout { grid-template-columns: 1fr; } }

/* ===== Real category icon + vendor logo ===== */
.dz-cat-img { width: 40px; height: 40px; object-fit: contain; }
.dz-vendor-logo {
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #241a4a, #14102e); padding: 14px;
}
.dz-vendor-logo img { max-height: 60px; max-width: 80%; width: auto; object-fit: contain; }

/* Vendor text tile (vendors with no brand artwork in the template) */
.dz-vendor-logo-txt { text-align: center; }
.dz-vendor-logo-txt span {
  font-size: 20px; font-weight: 800; letter-spacing: .02em; line-height: 1.15;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-transform: uppercase; padding: 0 8px;
}

/* Selected vendor + inline games panel (category page) */
.dz-vendor { transition: transform .18s, box-shadow .18s, outline-color .18s; outline: 2px solid transparent; outline-offset: -2px; }
.dz-vendor.dz-vendor-active {
  outline-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.dz-vendor.dz-vendor-active .dz-vendor-name { color: var(--gold); }
.dz-vendor-games { margin-top: 22px; }

/* Load-more control for paged vendor games */
.dz-more-wrap { display: flex; justify-content: center; margin: 20px 0 4px; }
.dz-load-more { min-width: 220px; }

/* ===== Provider "cards" (reference-style 3:4 branded tiles) ===== */
.dz-vendor-card { background: transparent; overflow: visible; cursor: pointer; }
.dz-vendor-card .dz-card-frame {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4;
  background: linear-gradient(135deg, #241a4a, #14102e); border: 1px solid var(--line-2);
  transition: transform .18s, box-shadow .18s, outline-color .18s;
  outline: 3px solid transparent; outline-offset: -3px;
}
.dz-vendor-card > .dz-card-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.dz-vendor-card:hover .dz-card-frame { box-shadow: var(--shadow-gold); }
.dz-vendor-card:hover .dz-card-frame > img { transform: scale(1.05); }
.dz-vendor-card .dz-frame-logo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 18px; }
.dz-vendor-card .dz-frame-logo img { max-width: 84%; max-height: 62%; object-fit: contain; }
.dz-vendor-card .dz-frame-txt { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; }
.dz-vendor-card .dz-frame-txt span {
  font-size: 19px; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dz-vendor-card .dz-vendor-name { margin-top: 9px; text-align: center; font-size: 14px; font-weight: 600; color: #fff; }
.dz-vendor-card.dz-vendor-active .dz-card-frame { outline-color: var(--gold); box-shadow: var(--shadow-gold); }
.dz-vendor-card.dz-vendor-active .dz-vendor-name { color: var(--gold); }
.dz-vendor-card.dz-vendor-soon .dz-card-frame > img { filter: saturate(.95) brightness(.97); }
.dz-card-badge {
  position: absolute; top: 8px; right: 8px; background: var(--grad-gold); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* ===== Mobile grid tuning (H5) ===== */
@media (max-width: 560px) {
  .dz-vendor-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dz-game-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dz-vendor-card .dz-vendor-name { font-size: 12.5px; margin-top: 6px; }
  .dz-vendor-card .dz-frame-txt span { font-size: 16px; }
  .dz-card-badge { font-size: 10px; padding: 1px 7px; }
  .dz-game-name { font-size: 10px; }
  .dz-section-title { font-size: 15px; }
  .dz-hero-slide img { border-radius: 10px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .dz-vendor-grid { grid-template-columns: repeat(3, 1fr); }
  .dz-game-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- games-first category filter bar (sticky search + horizontal vendor chips) ---- */
.dz-cat-bar {
  position: sticky; top: var(--header-h); z-index: 30;
  /* Body bg is a viewport-fixed gradient; a solid fill would show a flat dark
     seam under the sticky bar. Translucent + blur lets the gradient show
     through so the bar blends on every device. */
  background: rgba(12, 20, 28, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--surface-hi, rgba(139,92,246,.14));
  padding: 10px 0 9px; margin: -4px 0 12px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dz-cat-bar { background: var(--bg-0, #0c141c); }
}
.dz-cat-search {
  width: 100%; box-sizing: border-box; padding: 11px 16px; margin-bottom: 10px;
  border-radius: 12px; border: 1px solid var(--surface-hi, rgba(139,92,246,.16));
  background: var(--surface, rgba(139,92,246,.06)); color: var(--text, #e8ecf3);
  font-size: 16px; outline: none; -webkit-appearance: none;
}
.dz-cat-search:focus { border-color: var(--gold, #8b5cf6); }
.dz-cat-search::placeholder { color: var(--gold-soft, #8b93b5); opacity: .7; }
.dz-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.dz-chips::-webkit-scrollbar { display: none; }
.dz-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; padding: 6px 12px 6px 7px; border-radius: 999px;
  border: 1px solid var(--surface-hi, rgba(139,92,246,.16));
  background: var(--surface, rgba(139,92,246,.06)); color: var(--gold-soft, #dcd2ff);
  font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
}
.dz-chip-logo { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; background: rgba(0,0,0,.3); }
.dz-chip-ic { font-size: 15px; line-height: 1; padding-left: 4px; }
.dz-chip-badge {
  background: #e2245e; color: #fff; font-size: 10px; font-weight: 800;
  padding: 1px 6px; border-radius: 9px; line-height: 1.5; margin-left: 1px;
}
.dz-chip-active {
  background: linear-gradient(135deg, var(--gold, #8b5cf6), var(--gold-lo, #6d28d9));
  color: #fff; border-color: transparent;
}
.dz-chip-active .dz-chip-badge { background: rgba(0,0,0,.28); }

/* ---- 真人视讯 genre sub-category bar (바카라/블랙잭/룰렛/…) ---- */
.dz-genre-bar { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 0 8px; }
.dz-genre-bar::-webkit-scrollbar { display: none; }
.dz-genre-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 13px; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1px solid var(--surface-hi, rgba(139,92,246,.18));
  background: transparent; color: var(--gold-soft, #dcd2ff);
  font-size: 12.5px; font-weight: 700; transition: background .15s, color .15s;
}
.dz-genre-badge { font-size: 10px; font-weight: 800; opacity: .65; }
.dz-genre-active {
  background: linear-gradient(135deg, var(--gold, #8b5cf6), var(--gold-lo, #6d28d9));
  color: #fff; border-color: transparent;
}
.dz-genre-active .dz-genre-badge { opacity: .95; }

/* ---- home category nav — "featured 2-up + compact chips" (variant C) ---- */
.dz-feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 12px; }
.dz-feat-card {
  position: relative; overflow: hidden; border-radius: 16px; padding: 16px 15px;
  min-height: 96px; cursor: pointer; display: flex; flex-direction: column;
  justify-content: flex-end; border: 1px solid rgba(255,255,255,.06);
  transition: transform .15s, box-shadow .15s;
}
.dz-feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dz-feat-wm { position: absolute; right: -6px; top: -10px; font-size: 66px; color: #fff; opacity: .18; }
.dz-feat-tag {
  position: absolute; top: 12px; left: 14px; background: rgba(255,255,255,.16);
  color: #fff; font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 20px; letter-spacing: .03em;
}
.dz-feat-body { position: relative; }
.dz-feat-name { color: #fff; font-weight: 800; font-size: 17px; }
.dz-feat-sub { color: rgba(255,255,255,.82); font-size: 11.5px; margin-top: 3px; min-height: 14px; }

.dz-mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 6px; margin: 0 0 22px; }
.dz-mini-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.dz-mini-ic {
  width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border: 1px solid rgba(255,255,255,.08); transition: transform .15s;
}
.dz-mini-tile:hover .dz-mini-ic { transform: translateY(-2px); }
.dz-mini-label { color: var(--gold-soft, #c7d0de); font-size: 12px; font-weight: 600; }
.dz-mic-c { background: rgba(37,99,235,.16); color: #93c5fd; }
.dz-mic-d { background: rgba(219,39,119,.16); color: #f9a8d4; }
.dz-mic-e { background: rgba(8,145,178,.16); color: #67e8f9; }
.dz-mic-f { background: rgba(217,119,6,.16); color: #fcd34d; }
.dz-mic-g { background: rgba(5,150,105,.16); color: #6ee7b7; }
.dz-mic-h { background: rgba(225,29,72,.16); color: #fda4af; }
.dz-ct-a { background: linear-gradient(150deg, #7c3aed, #4c1d95); }
.dz-ct-b { background: linear-gradient(150deg, #6d28d9, #3b1976); }
.dz-ct-c { background: linear-gradient(150deg, #2563eb, #1e3a8a); }
.dz-ct-d { background: linear-gradient(150deg, #db2777, #831843); }
.dz-ct-e { background: linear-gradient(150deg, #0891b2, #155e75); }
.dz-ct-f { background: linear-gradient(150deg, #d97706, #7c2d12); }
.dz-ct-g { background: linear-gradient(150deg, #059669, #064e3b); }
.dz-ct-h { background: linear-gradient(150deg, #e11d48, #7f1d1d); }

/* ---- 真人娱乐厂家大厅入口 (home vendor lobby row) ---- */
.dz-lobby-head { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 2px 12px; }
.dz-lobby-head-t { font-size: 17px; font-weight: 800; color: var(--text, #eef2f8); letter-spacing: .01em; }
.dz-lobby-head-t::before { content: ""; display: inline-block; width: 4px; height: 15px; margin-right: 8px; vertical-align: -2px; border-radius: 2px; background: linear-gradient(180deg,#a855f7,#6d28d9); }
.dz-lobby-head-more { font-size: 12px; font-weight: 600; color: var(--gold-soft, #9aa4b3); cursor: pointer; }
.dz-lobby-head-more:hover { color: var(--text, #eef2f8); }
.dz-lobby-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 0 0 22px; }
.dz-vgrid { margin-top: 14px; }
.dz-vendor-back { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--gold-soft, #9aa4b3); font-size: 13px; font-weight: 600; margin: 4px 2px 14px; }
.dz-vendor-back:hover { color: var(--text, #eef2f8); }
.dz-lobby-tile { cursor: pointer; }
.dz-slot-tile .dz-lobby-art { aspect-ratio: 1 / 1; }  /* slot vendors use square game thumbnails */
.dz-lobby-art {
  position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: var(--surface, rgba(139,92,246,.06));
  transition: transform .16s, box-shadow .16s;
}
.dz-lobby-tile:hover .dz-lobby-art { transform: translateY(-3px); box-shadow: var(--shadow, 0 10px 24px rgba(0,0,0,.4)); }
.dz-lobby-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-lobby-live {
  position: absolute; top: 7px; left: 7px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px; background: rgba(225,29,72,.92); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.dz-lobby-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: dzpulse 1.4s infinite; }
@keyframes dzpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.dz-lobby-count {
  position: absolute; top: 7px; right: 7px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 700;
}
/* 名字覆盖条:盖住美女卡上"烤死"的韩文名,改用可切语言的 HTML 文字。样式对齐原烤条。 */
.dz-name-ov {
  position: absolute; left: 0; right: 0; bottom: 0; height: 25%;
  display: flex; align-items: center; justify-content: center; padding: 0 6px; box-sizing: border-box;
  background: #0d0d0e; border-top: 2px solid rgba(212,175,105,.72);
  color: #fff; font-weight: 800; text-align: center; line-height: 1.04;
  font-size: 20px; letter-spacing: .01em; overflow: hidden;
}
@media (max-width: 900px) { .dz-name-ov { font-size: 16px; } }
@media (max-width: 560px) { .dz-name-ov { font-size: 12.5px; height: 26%; } }
.dz-lobby-name {
  margin-top: 7px; text-align: center; color: var(--gold-soft, #c7d0de);
  font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) { .dz-lobby-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .dz-lobby-row { grid-template-columns: repeat(2, 1fr); gap: 9px; } .dz-lobby-name { font-size: 11.5px; } }

@media (max-width: 560px) {
  .dz-feat-row { gap: 9px; }
  .dz-feat-card { min-height: 84px; padding: 13px 12px; border-radius: 14px; }
  .dz-feat-name { font-size: 15px; }
  .dz-feat-wm { font-size: 56px; }
  .dz-mini-row { gap: 11px 6px; }
  .dz-mini-ic { width: 48px; height: 48px; border-radius: 13px; font-size: 20px; }
  .dz-mini-label { font-size: 11px; }
}