/* 50vs50 — ARCADE V2 shell. Loads last. */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Bebas+Neue&display=swap");

html.av2 {
  --av2-bg: #05060c;
  --av2-bg2: #090b13;
  --av2-panel: rgba(18, 21, 33, .78);
  --av2-panel2: rgba(24, 28, 43, .9);
  --av2-line: rgba(255, 255, 255, .08);
  --av2-line2: rgba(255, 255, 255, .14);
  --av2-text: #f4f6fb;
  --av2-muted: #8f96ab;
  --av2-dim: #5f6678;
  --av2-lime: #c6ff4a;
  --av2-cyan: #43e7ff;
  --av2-pink: #ff3d8b;
  --av2-violet: #8b6bff;
  --av2-gold: #ffd45e;
  --av2-green: #3ee58f;
  --av2-red: #ff5b6e;
  --av2-r: 18px;
  --av2-display: "Chakra Petch", "Segoe UI", sans-serif;
  --av2-ui: "Manrope", "Segoe UI", sans-serif;
  --av2-num: "Bebas Neue", "Chakra Petch", sans-serif;
}

html.av2 body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(67, 231, 255, .10), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(255, 61, 139, .10), transparent 62%),
    radial-gradient(900px 700px at 50% 120%, rgba(139, 107, 255, .12), transparent 60%),
    var(--av2-bg);
  color: var(--av2-text);
  font-family: var(--av2-ui);
  overflow: hidden;
}

html.av2 #stars,
html.av2 #glow,
html.av2 #aurora { display: none !important; }

html.av2 #magicbg { opacity: .35; }

html.av2 #win {
  position: fixed;
  inset: 0;
  z-index: 2;
  height: 100dvh;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

html.av2 #chrome {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

html.av2 #winbody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
}

html.av2 #titlebar,
html.av2 #rail,
html.av2 #taskbar,
html.av2 #xptabs { display: none !important; }

/* ---------- app bar ---------- */
html.av2 #top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(7, 8, 14, .78);
  border-bottom: 1px solid var(--av2-line);
  backdrop-filter: blur(22px) saturate(140%);
  position: sticky;
  top: 0;
  z-index: 40;
}

html.av2 .brand {
  font-family: var(--av2-display);
  font-weight: 700;
  font-size: 28px;
  line-height: .9;
  letter-spacing: -.04em;
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
html.av2 .brand span {
  font-size: 20px;
  color: var(--av2-lime);
  -webkit-text-fill-color: var(--av2-lime);
  font-style: normal;
  text-shadow: 0 0 16px rgba(198, 255, 74, .4);
}
html.av2 .brand small {
  display: block;
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .32em;
  color: var(--av2-muted);
  -webkit-text-fill-color: var(--av2-muted);
  margin: 0 0 0 10px;
  filter: none;
}

html.av2 .balwrap { margin-left: auto; display: flex; align-items: center; gap: 8px; }

html.av2 .streakbadge {
  font-family: var(--av2-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--av2-gold);
  background: rgba(255, 212, 94, .08);
  border: 1px solid rgba(255, 212, 94, .22);
  border-radius: 999px;
  padding: 6px 10px;
}
html.av2 .streakbadge.on {
  color: #181000;
  background: var(--av2-gold);
  border-color: transparent;
}

html.av2 .balance {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--av2-line2);
  border-radius: 999px;
  padding: 5px 14px 5px 7px;
  box-shadow: none;
  gap: 8px;
}
html.av2 .balance .coin { width: 22px; height: 22px; animation: none; }
html.av2 .balance b {
  font-family: var(--av2-num);
  font-size: 23px;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: none;
}

html.av2 .addbtn {
  font-family: var(--av2-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #101603;
  padding: 9px 16px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, var(--av2-lime), #8ee62e);
  box-shadow: 0 6px 20px rgba(198, 255, 74, .22);
}
#admin-pill { background: linear-gradient(135deg, var(--av2-cyan), #2fbde8) !important; color: #021015 !important; }

/* ---------- live strip ---------- */
html.av2 #ticker {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--av2-line);
  border-radius: 0;
  background: rgba(9, 11, 19, .6);
  color: var(--av2-muted);
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  padding: 7px 0;
  box-shadow: none;
}
html.av2 #ticker span { animation-duration: 32s; }
html.av2 #appbanner {
  margin: 10px 18px 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 212, 94, .25) !important;
  background: rgba(255, 212, 94, .08) !important;
  color: var(--av2-gold) !important;
  font-family: var(--av2-ui);
  font-size: 10px !important;
  letter-spacing: .04em;
}

/* ---------- main ---------- */
html.av2 #main {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 132px !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
html.av2 #main::-webkit-scrollbar { width: 6px; }
html.av2 #main::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }

html.av2 .view.on { animation: av2in .25s ease-out; }
@keyframes av2in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

html.av2 .vhead { margin-bottom: 16px; gap: 12px; }
html.av2 .vhead h2 {
  font-family: var(--av2-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
}
html.av2 .vhead .backbtn {
  font-family: var(--av2-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--av2-text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--av2-line2);
  border-radius: 999px;
  padding: 8px 13px;
  box-shadow: none;
}

/* ---------- bottom nav ---------- */
html.av2 #av2nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 80;
  width: min(100%, 1180px);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(8, 10, 17, .92);
  border-top: 1px solid var(--av2-line);
  backdrop-filter: blur(24px) saturate(140%);
}
html.av2 #av2nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  color: var(--av2-dim);
  border-radius: 12px;
  font-family: var(--av2-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}
html.av2 #av2nav button svg { width: 21px; height: 21px; stroke-width: 1.8; }
html.av2 #av2nav button .av2-nav-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: transparent; margin-top: 1px;
}
html.av2 #av2nav button.on {
  color: var(--av2-lime);
  background: linear-gradient(180deg, rgba(198,255,74,.10), transparent);
}
html.av2 #av2nav button.on .av2-nav-dot { background: var(--av2-lime); box-shadow: 0 0 8px var(--av2-lime); }
/* ---------- lobby hero ---------- */
html.av2 #view-home .hero {
  position: relative;
  border: 1px solid var(--av2-line2);
  border-radius: 26px;
  padding: 30px 26px 24px;
  margin-bottom: 16px;
  overflow: hidden;
  background:
    radial-gradient(700px 300px at 12% -30%, rgba(67, 231, 255, .28), transparent 60%),
    radial-gradient(500px 300px at 92% 0%, rgba(255, 61, 139, .22), transparent 60%),
    linear-gradient(145deg, #101427, #090b14 65%);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  isolation: isolate;
}
html.av2 #view-home .hero::before { display: none; }
html.av2 #view-home .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000, transparent 75%);
  opacity: .6;
}

html.av2 .hero .hlog {
  font-family: var(--av2-num);
  font-size: clamp(66px, 17vw, 104px);
  line-height: .82;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 0 40px rgba(67, 231, 255, .22);
  position: relative;
  z-index: 2;
  animation: none;
  filter: none;
}
html.av2 .hero .hlog::after {
  content: "ARENA";
  display: block;
  font-family: var(--av2-display);
  font-size: 12px;
  letter-spacing: .55em;
  color: var(--av2-lime);
  text-shadow: 0 0 14px rgba(198,255,74,.45);
  margin-top: 8px;
}
html.av2 .hero .hsub {
  font-family: var(--av2-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--av2-muted);
  margin: 10px 0 0;
  position: relative;
  z-index: 2;
}
html.av2 .hero .hrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
html.av2 .hero .jpticker {
  flex: 1;
  min-width: 150px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--av2-line2);
  border-radius: 14px;
  padding: 10px 14px;
  overflow: hidden;
}
html.av2 .hero .jpticker small {
  display: block;
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--av2-muted);
}
html.av2 .hero .jpticker span {
  font-family: var(--av2-num);
  font-size: 34px;
  color: var(--av2-lime);
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 0 22px rgba(198,255,74,.3);
}
html.av2 .hero .hbtn {
  font-family: var(--av2-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #170703;
  background: linear-gradient(135deg, var(--av2-gold), #ffb02e);
  border: 0;
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: 0 10px 26px rgba(255, 176, 46, .2);
}
html.av2 .hero .trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}
html.av2 .hero .trustline span {
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--av2-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
html.av2 .hero .trustline i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--av2-green);
  box-shadow: 0 0 8px var(--av2-green);
}

/* ---------- arena cards ---------- */
html.av2 .av2-arena {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
html.av2 .av2-arena-card {
  position: relative;
  border: 1px solid var(--av2-line2);
  border-radius: 20px;
  padding: 18px;
  min-height: 142px;
  text-align: left;
  overflow: hidden;
  background: linear-gradient(145deg, #121628, #0a0c15);
  isolation: isolate;
}
html.av2 .av2-arena-card.pvp {
  background:
    radial-gradient(300px 160px at 100% 0%, rgba(255,61,139,.26), transparent 65%),
    linear-gradient(145deg, #1a1020, #0a0c15);
}
html.av2 .av2-arena-card.casino {
  background:
    radial-gradient(300px 160px at 100% 0%, rgba(67,231,255,.22), transparent 65%),
    linear-gradient(145deg, #0d1722, #0a0c15);
}
html.av2 .av2-arena-card .av2-ar-kicker {
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--av2-muted);
}
html.av2 .av2-arena-card h3 {
  font-family: var(--av2-display);
  font-size: 24px;
  font-weight: 700;
  margin: 10px 0 4px;
  color: #fff;
}
html.av2 .av2-arena-card p {
  font-family: var(--av2-ui);
  font-size: 10px;
  line-height: 1.5;
  color: var(--av2-muted);
  max-width: 75%;
}
html.av2 .av2-arena-card .av2-ar-glyph {
  position: absolute;
  right: 10px;
  bottom: -12px;
  font-size: 84px;
  line-height: 1;
  opacity: .16;
  z-index: -1;
  filter: grayscale(1);
}
html.av2 .av2-arena-card .av2-ar-cta {
  position: absolute;
  right: 16px;
  top: 16px;
  font-family: var(--av2-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--av2-lime);
}

/* ---------- section labels ---------- */
html.av2 .av2-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 2px 12px;
}
html.av2 .av2-sec h3 {
  font-family: var(--av2-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  margin: 0;
}
html.av2 .av2-sec span {
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--av2-dim);
}

/* ---------- game tiles ---------- */
html.av2 .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
html.av2 .tile {
  position: relative;
  border: 1px solid var(--av2-line);
  border-radius: 18px;
  padding: 14px;
  gap: 11px;
  background: linear-gradient(145deg, rgba(24,28,43,.9), rgba(12,14,22,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.24);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html.av2 .tile::before { display: none; }
html.av2 .tile::after { display: none; }
html.av2 .tile:hover {
  transform: translateY(-2px);
  border-color: rgba(198,255,74,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 36px rgba(0,0,0,.32);
}
html.av2 .tile:active { transform: scale(.985); }
html.av2 .tile .ico {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  border: 1px solid var(--av2-line2);
  background: rgba(255,255,255,.04);
  box-shadow: none;
  color: var(--av2-cyan);
  font-size: 20px;
}
html.av2 .tile:hover .ico { transform: none; box-shadow: none; }
html.av2 .tile .ico svg { width: 26px; height: 26px; }
html.av2 .tile .nm {
  font-family: var(--av2-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: none;
}
html.av2 .tile .sub {
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--av2-dim);
  margin-top: 4px;
}
html.av2 .tile[data-game="pvp"] .ico { color: var(--av2-pink); }
html.av2 .tile[data-game="bj"] .ico,
html.av2 .tile[data-game="baccarat"] .ico { color: var(--av2-gold); }
html.av2 .tile[data-game="roulette"] .ico { color: var(--av2-red); }
html.av2 .tile[data-game="mines"] .ico,
html.av2 .tile[data-game="towers"] .ico { color: var(--av2-green); }
html.av2 .tile[data-game="limbo"] .ico { color: var(--av2-cyan); }
html.av2 .tile[data-game="crash"] .ico { color: #ffa14a; }

/* ---------- panels ---------- */
html.av2 .panel {
  background: var(--av2-panel);
  border: 1px solid var(--av2-line);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
}
html.av2 .panel .ph {
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--av2-muted);
  margin-bottom: 12px;
}
html.av2 .panel .ph span:last-child { color: var(--av2-dim); }

html.av2 .sidegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
html.av2 .panel.buddies,
html.av2 .panel.winners { margin-bottom: 0; }
html.av2 .qrow {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--av2-line);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 8px;
}
html.av2 .qt span:first-child { font-family: var(--av2-ui); font-weight: 700; color: var(--av2-text); }
html.av2 .qf span { color: var(--av2-muted); }
/* ---------- pvp arena ---------- */
html.av2 .av2-duel-hero {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,61,139,.22);
  padding: 20px;
  margin-bottom: 12px;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(255,61,139,.22), transparent 65%),
    linear-gradient(145deg, #171021, #0a0c15);
}
html.av2 .av2-duel-hero::after {
  content: "⚔";
  position: absolute;
  right: 12px;
  bottom: -24px;
  font-size: 120px;
  opacity: .07;
}
html.av2 .av2-duel-hero .k {
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--av2-pink);
}
html.av2 .av2-duel-hero h3 {
  font-family: var(--av2-display);
  font-size: 27px;
  font-weight: 700;
  color: #fff;
  margin: 8px 0 6px;
}
html.av2 .av2-duel-hero p {
  font-family: var(--av2-ui);
  font-size: 11px;
  color: var(--av2-muted);
  max-width: 78%;
  line-height: 1.5;
}
html.av2 .av2-duel-hero .av2-quick {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--av2-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #071014;
  background: linear-gradient(135deg, var(--av2-lime), #8ee62e);
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
}
html.av2 .av2-mode-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
html.av2 .av2-mode {
  border: 1px solid var(--av2-line);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  padding: 10px 7px;
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--av2-muted);
  text-align: center;
}
html.av2 .av2-mode b {
  display: block;
  font-family: var(--av2-display);
  font-size: 16px;
  color: var(--av2-text);
  margin-bottom: 2px;
}
html.av2 .av2-mode.on {
  border-color: rgba(255,61,139,.45);
  background: rgba(255,61,139,.10);
  color: var(--av2-pink);
}
html.av2 .av2-mode.on b { color: var(--av2-pink); }

html.av2 .pvp-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
html.av2 .duel-card {
  background: linear-gradient(145deg, rgba(24,28,43,.9), rgba(10,12,20,.9));
  border: 1px solid var(--av2-line);
  border-radius: 16px;
  padding: 14px 10px;
  box-shadow: none;
  min-height: 112px;
}
html.av2 .duel-card.on {
  border-color: var(--av2-pink);
  box-shadow: 0 0 0 1px rgba(255,61,139,.28), 0 10px 26px rgba(255,61,139,.12);
  background: linear-gradient(145deg, rgba(255,61,139,.13), rgba(10,12,20,.9));
}
html.av2 .duel-card .di { height: auto; margin-bottom: 8px; }
html.av2 .duel-card .di svg { width: 42px; height: 42px; }
html.av2 .duel-card .dn {
  font-family: var(--av2-display);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
html.av2 .duel-card .dp {
  font-family: var(--av2-ui);
  font-size: 8px;
  color: var(--av2-muted);
  margin-top: 3px;
}

/* ---------- casino tab ---------- */
html.av2 .av2-casino-hero {
  border-radius: 22px;
  border: 1px solid rgba(67,231,255,.2);
  padding: 20px;
  margin-bottom: 14px;
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(67,231,255,.2), transparent 65%),
    radial-gradient(400px 200px at 100% 100%, rgba(139,107,255,.18), transparent 65%),
    linear-gradient(145deg, #0b1622, #0a0c15);
}
html.av2 .av2-casino-hero .k {
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--av2-cyan);
}
html.av2 .av2-casino-hero h3 {
  font-family: var(--av2-display);
  font-size: 27px;
  font-weight: 700;
  color: #fff;
  margin: 8px 0 5px;
}
html.av2 .av2-casino-hero p {
  font-family: var(--av2-ui);
  font-size: 11px;
  color: var(--av2-muted);
  max-width: 80%;
  line-height: 1.5;
}
html.av2 .av2-filters {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
html.av2 .av2-filters::-webkit-scrollbar { display: none; }
html.av2 .av2-filter {
  flex: none;
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--av2-muted);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--av2-line);
  border-radius: 999px;
  padding: 8px 13px;
}
html.av2 .av2-filter.on {
  color: #0a0f03;
  background: var(--av2-lime);
  border-color: transparent;
}
html.av2 .av2-game-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
html.av2 .av2-game-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--av2-line);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(24,28,43,.88), rgba(10,12,20,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
html.av2 .av2-game-card:active { transform: scale(.99); }
html.av2 .av2-gc-icon {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--av2-display);
  font-size: 22px;
  font-weight: 700;
  color: #0b0e13;
  background: linear-gradient(135deg, var(--gc, var(--av2-lime)), color-mix(in srgb, var(--gc, var(--av2-lime)) 55%, #000));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--gc, var(--av2-lime)) 18%, transparent);
}
html.av2 .av2-gc-info { flex: 1; min-width: 0; }
html.av2 .av2-gc-name {
  font-family: var(--av2-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
}
html.av2 .av2-gc-sub {
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--av2-muted);
  margin-top: 3px;
}
html.av2 .av2-gc-meta {
  font-family: var(--av2-ui);
  font-size: 8px;
  font-weight: 800;
  color: var(--av2-dim);
  margin-top: 5px;
  letter-spacing: .08em;
}
html.av2 .av2-gc-go {
  font-family: var(--av2-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--av2-lime);
  flex: none;
}
html.av2 .av2-game-card[data-cat="table"] .av2-gc-go { color: var(--av2-gold); }
html.av2 .av2-game-card[data-cat="instant"] .av2-gc-go { color: var(--av2-cyan); }
html.av2 .av2-game-card.hide { display: none; }

/* ---------- generic game controls ---------- */
html.av2 .btn {
  font-family: var(--av2-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 11px;
  padding: 11px 14px;
  border: 1px solid var(--av2-line2);
  background: rgba(255,255,255,.05);
  color: var(--av2-text);
  box-shadow: none;
  text-shadow: none;
}
html.av2 .btn:active { transform: translateY(1px); box-shadow: none; }
html.av2 .btn.gold { background: linear-gradient(135deg, var(--av2-lime), #8ee62e); color: #0c1203; border-color: transparent; }
html.av2 .btn.green { background: linear-gradient(135deg, var(--av2-green), #16b76a); color: #03140b; border-color: transparent; }
html.av2 .btn.blue { background: linear-gradient(135deg, var(--av2-cyan), #1fa9c9); color: #021014; border-color: transparent; }
html.av2 .btn.red { background: linear-gradient(135deg, var(--av2-red), #c6263c); color: #fff; border-color: transparent; }
html.av2 .btn.small { font-size: 9px; padding: 8px 10px; }
html.av2 .mini {
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--av2-text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--av2-line2);
  border-radius: 9px;
  padding: 8px 10px;
}
html.av2 .mini.gold { background: var(--av2-lime); color: #0b1003; border-color: transparent; }

html.av2 .betbar { gap: 6px; margin-bottom: 10px; }
html.av2 .betval {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--av2-line);
  border-radius: 10px;
  padding: 6px 9px;
  box-shadow: none;
}
html.av2 .betval span { font-family: var(--av2-ui); font-size: 7px; letter-spacing: .16em; color: var(--av2-dim); }
html.av2 .betval b { font-family: var(--av2-num); font-size: 22px; color: #fff; letter-spacing: .02em; }
html.av2 .betadj {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--av2-line2);
  background: rgba(255,255,255,.05);
  color: var(--av2-text);
  font-family: var(--av2-ui);
  font-size: 17px;
  box-shadow: none;
}
html.av2 .quick { gap: 5px; }
html.av2 .quick button {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--av2-line);
  border-radius: 8px;
  color: var(--av2-muted);
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 800;
  padding: 7px 0;
}
html.av2 .chipbtn {
  font-family: var(--av2-ui);
  font-size: 10px;
  font-weight: 800;
  color: var(--av2-gold);
  background: rgba(255,212,94,.08);
  border: 1px solid rgba(255,212,94,.3);
  border-radius: 999px;
  box-shadow: none;
  padding: 6px 11px;
}
html.av2 .chipbtn.on { outline: 1px solid var(--av2-gold); outline-offset: 1px; }
html.av2 .msg {
  font-family: var(--av2-ui);
  font-size: 10px;
  font-weight: 700;
  color: var(--av2-muted);
  letter-spacing: .03em;
  min-height: 18px;
  padding: 7px;
}
html.av2 .msg.win { color: var(--av2-green); }
html.av2 .msg.lose { color: var(--av2-red); }
html.av2 .hint { font-family: var(--av2-ui); font-size: 9px; color: var(--av2-dim); }
html.av2 .hint b { color: var(--av2-text); }
html.av2 .tog {
  font-family: var(--av2-ui);
  font-size: 10px;
  color: var(--av2-muted);
  border-bottom: 1px solid var(--av2-line);
  padding: 10px 0;
}
html.av2 .targetrow input {
  font-family: var(--av2-num);
  font-size: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--av2-line2);
  border-radius: 9px;
  color: #fff;
  box-shadow: none;
}
html.av2 .targetrow .preset {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--av2-line);
  color: var(--av2-muted);
  border-radius: 8px;
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 800;
}
html.av2 .mstat {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--av2-line);
  border-radius: 10px;
}
html.av2 .mstat span { font-family: var(--av2-ui); font-size: 7px; color: var(--av2-dim); letter-spacing: .12em; }
html.av2 .mstat b { font-family: var(--av2-num); font-size: 19px; color: #fff; }
html.av2 .mstat b.green { color: var(--av2-green); }
html.av2 .bigmult {
  font-family: var(--av2-num);
  font-size: 58px;
  color: var(--av2-lime);
  text-shadow: 0 0 30px rgba(198,255,74,.2);
}
html.av2 .bigmult.crash { color: var(--av2-red); text-shadow: 0 0 30px rgba(255,91,110,.2); }
html.av2 .history span { font-family: var(--av2-ui); font-size: 8px; font-weight: 800; background: rgba(67,231,255,.12); color: var(--av2-cyan); border-radius: 6px; }
html.av2 .history span.low { background: rgba(255,91,110,.12); color: var(--av2-red); }
html.av2 .minesgrid button {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--av2-line2);
  border-radius: 12px;
  color: var(--av2-muted);
  box-shadow: none;
}
html.av2 .minesgrid button.open { background: linear-gradient(135deg, var(--av2-green), #15a663); color: #03140b; }
html.av2 .minesgrid button.bomb { background: linear-gradient(135deg, var(--av2-red), #b81f34); color: #fff; }
html.av2 .handbox { background: rgba(255,255,255,.03); border: 1px solid var(--av2-line); border-radius: 12px; }
html.av2 .roomrow { background: rgba(255,255,255,.03); border: 1px solid var(--av2-line); border-radius: 10px; color: var(--av2-muted); }
html.av2 .roomrow .rg { background: rgba(255,255,255,.06); color: var(--av2-muted); border-radius: 6px; }
html.av2 .roomrow .rj { background: var(--av2-lime); border: 0; color: #0b1003; border-radius: 7px; font-family: var(--av2-ui); font-size: 9px; font-weight: 800; box-shadow: none; }
html.av2 .roomrow .rc { background: rgba(255,91,110,.1); border: 1px solid rgba(255,91,110,.3); color: var(--av2-red); border-radius: 7px; }
html.av2 .history span { box-shadow: none; }
/* ---------- cashier / modals ---------- */
html.av2 .modal { background: rgba(2, 4, 8, .72); backdrop-filter: blur(8px); align-items: flex-end; padding: 0; }
html.av2 .modal .mbox {
  width: 100%;
  max-width: 620px;
  border: 1px solid var(--av2-line2);
  border-radius: 24px 24px 0 0;
  background: #0b0e17;
  box-shadow: 0 -20px 70px rgba(0,0,0,.6);
  overflow: hidden;
}
html.av2 .modal .mtitle {
  font-family: var(--av2-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--av2-text);
  background: transparent;
  border-bottom: 1px solid var(--av2-line);
  padding: 16px 18px;
}
html.av2 .modal .mtitle b {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--av2-line2);
  border-radius: 8px;
  color: var(--av2-muted);
  font-family: var(--av2-ui);
}
html.av2 .modal .mbody {
  background: transparent;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 76vh;
}
html.av2 .ctabs { gap: 6px; margin-bottom: 14px; }
html.av2 .ctabs button {
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--av2-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--av2-line);
  border-radius: 999px;
  padding: 8px 13px;
}
html.av2 .ctabs button.on { color: #0a0f03; background: var(--av2-lime); border-color: transparent; }
html.av2 .pack {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--av2-line);
  border-radius: 14px;
  box-shadow: none;
}
html.av2 .pack b { font-family: var(--av2-display); color: #fff; }
html.av2 .pack span { color: var(--av2-muted); }
html.av2 .toast {
  font-family: var(--av2-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: #0e1220;
  border: 1px solid var(--av2-line2);
  border-radius: 12px;
  color: var(--av2-text);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 12px 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
}
html.av2 #winpopup .wbox {
  background: #0b0e17;
  border: 1px solid rgba(198,255,74,.3);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
html.av2 #winpopup .wt { background: transparent; border-bottom: 1px solid var(--av2-line); color: var(--av2-muted); font-family: var(--av2-ui); }
html.av2 #winpopup .wbig { font-family: var(--av2-num); font-size: 64px; color: var(--av2-lime); }
html.av2 #winpopup .wo button { font-family: var(--av2-display); background: rgba(255,255,255,.06); color: var(--av2-text); }

/* ---------- game view polishing ---------- */
html.av2 .vhead h2 { text-transform: uppercase; }
html.av2 .cards .card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
html.av2 .bead span { border-radius: 50%; }
html.av2 .rtable .rcell { border-radius: 5px; }
html.av2 .graphbox { border-radius: 14px; border-color: var(--av2-line); background: #070a12; }
html.av2 .wheelwrap { width: 190px; height: 190px; }
html.av2 .towers .trow .tmult { background: rgba(255,255,255,.04); border-color: var(--av2-line); color: var(--av2-muted); }
html.av2 .towers .trow button { background: rgba(255,255,255,.04); border-color: var(--av2-line); color: var(--av2-muted); border-radius: 9px; }
html.av2 .towers .trow.active button { background: rgba(255,212,94,.12); border-color: rgba(255,212,94,.35); color: var(--av2-gold); }

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  html.av2 #win { max-width: 1180px; margin: 0 auto; border-left: 1px solid var(--av2-line); border-right: 1px solid var(--av2-line); }
  html.av2 #main { padding: 28px 28px 132px !important; }
  html.av2 .grid { grid-template-columns: repeat(3, 1fr); }
  html.av2 .av2-game-grid { grid-template-columns: 1fr 1fr; }
  html.av2 .sidegrid { grid-template-columns: repeat(3, 1fr); }
  html.av2 .av2-arena { gap: 16px; }
  html.av2 .av2-arena-card { min-height: 170px; padding: 22px; }
  html.av2 .av2-arena-card h3 { font-size: 30px; }
  html.av2 #view-home .hero { padding: 38px 34px 28px; }
}
@media (min-width: 1020px) {
  html.av2 .grid { grid-template-columns: repeat(4, 1fr); }
  html.av2 .av2-game-grid { grid-template-columns: repeat(2, 1fr); }
  html.av2 .av2-mode-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
  html.av2 #top { padding: 10px 14px; }
  html.av2 .brand { font-size: 25px; }
  html.av2 .brand small { display: none; }
  html.av2 .balance b { font-size: 20px; }
  html.av2 .addbtn { padding: 8px 12px; font-size: 10px; }
  html.av2 .streakbadge { display: none; }
  html.av2 #main { padding: 14px 14px 126px !important; }
  html.av2 .av2-arena { grid-template-columns: 1fr; }
  html.av2 .av2-game-grid { gap: 7px; }
  html.av2 .av2-gc-icon { width: 46px; height: 46px; font-size: 19px; }
}
@media (max-width: 390px) {
  html.av2 .balance .coin { display: none; }
  html.av2 .balance { padding: 5px 10px; }
  html.av2 .av2-gc-meta { display: none; }
}
/* ---------- forceful shell overrides (legacy layers use !important) ---------- */
html.av2 #top .brand {
  font-family: var(--av2-display) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  filter: none !important;
  text-shadow: none !important;
}
html.av2 #top .brand span {
  color: var(--av2-lime) !important;
  -webkit-text-fill-color: var(--av2-lime) !important;
  font-size: 19px !important;
  font-style: normal !important;
  text-shadow: 0 0 18px rgba(198,255,74,.45) !important;
}
html.av2 #top .brand small {
  color: var(--av2-muted) !important;
  -webkit-text-fill-color: var(--av2-muted) !important;
  font-family: var(--av2-ui) !important;
  font-size: 8px !important;
  letter-spacing: .32em !important;
}
html.av2 #top .balance {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--av2-line2) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html.av2 #top .balance b {
  color: #fff !important;
  font-family: var(--av2-num) !important;
  font-size: 23px !important;
  text-shadow: none !important;
}
html.av2 #top .addbtn {
  background: linear-gradient(135deg, var(--av2-lime), #8ee62e) !important;
  color: #0e1404 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 22px rgba(198,255,74,.18) !important;
  font-family: var(--av2-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html.av2 #top .streakbadge {
  background: rgba(255,212,94,.08) !important;
  color: var(--av2-gold) !important;
  border: 1px solid rgba(255,212,94,.22) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html.av2 #ticker {
  background: rgba(9,11,19,.66) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--av2-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--av2-muted) !important;
  font-family: var(--av2-ui) !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
  padding: 7px 0 !important;
}
html.av2 #ticker span { color: var(--av2-muted) !important; text-shadow: none !important; }
html.av2 #av2nav button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--av2-dim) !important;
  border-radius: 12px !important;
  font-family: var(--av2-display) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}
html.av2 #av2nav button.on {
  color: var(--av2-lime) !important;
  background: linear-gradient(180deg, rgba(198,255,74,.10), transparent) !important;
}
html.av2 .tile[data-game="pvp"] .ico { color: var(--av2-pink) !important; }
html.av2 .tile[data-game="bj"] .ico,
html.av2 .tile[data-game="baccarat"] .ico { color: var(--av2-gold) !important; }
html.av2 .tile[data-game="roulette"] .ico { color: var(--av2-red) !important; }
html.av2 .tile[data-game="mines"] .ico,
html.av2 .tile[data-game="towers"] .ico { color: var(--av2-green) !important; }
html.av2 .tile[data-game="limbo"] .ico { color: var(--av2-cyan) !important; }
html.av2 .tile[data-game="crash"] .ico { color: #ffa14a !important; }
html.av2 .tile .ico svg { width: 27px !important; height: 27px !important; }
/* ---------- v3 polish overrides ---------- */
html.av2 #view-home .hero .hlog {
  font-family: var(--av2-num) !important;
  font-size: clamp(68px, 18vw, 108px) !important;
  line-height: .82 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 0 44px rgba(67,231,255,.22) !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
  letter-spacing: .01em !important;
}
html.av2 #view-home .hero .hlog::after {
  content: "ARENA";
  display: block;
  font-family: var(--av2-display) !important;
  font-size: 12px !important;
  letter-spacing: .55em !important;
  color: var(--av2-lime) !important;
  margin-top: 10px !important;
  text-shadow: 0 0 14px rgba(198,255,74,.4) !important;
}
html.av2 .hero .hbtn {
  background: linear-gradient(135deg, var(--av2-gold), #ffb02e) !important;
  color: #170703 !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(255,176,46,.18) !important;
  font-family: var(--av2-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 14px 18px !important;
}
html.av2 #ticker { height: auto !important; min-height: 28px !important; display: flex !important; align-items: center !important; }
html.av2 #ticker span {
  animation: none !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 16px !important;
  color: var(--av2-muted) !important;
  font-family: var(--av2-ui) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}
html.av2 .pvp-grid .duel-card { background: linear-gradient(145deg, rgba(24,28,43,.9), rgba(10,12,20,.9)) !important; }
html.av2 .pvp-grid .duel-card.on {
  background: linear-gradient(145deg, rgba(255,61,139,.14), rgba(10,12,20,.92)) !important;
  border-color: var(--av2-pink) !important;
  box-shadow: 0 0 0 1px rgba(255,61,139,.28), 0 10px 26px rgba(255,61,139,.12) !important;
}
html.av2 .pvp-grid .duel-card .dn { color: #fff !important; }
html.av2 .pvp-grid .duel-card.on .dn { color: #ff9bc4 !important; }
html.av2 .btn.gold { background: linear-gradient(135deg, var(--av2-lime), #8ee62e) !important; color: #0c1203 !important; border-color: transparent !important; }
html.av2 .btn.green { background: linear-gradient(135deg, var(--av2-green), #16b76a) !important; color: #03140b !important; border-color: transparent !important; }
html.av2 .btn.blue { background: linear-gradient(135deg, var(--av2-cyan), #1fa9c9) !important; color: #021014 !important; border-color: transparent !important; }
html.av2 .btn.red { background: linear-gradient(135deg, var(--av2-red), #c6263c) !important; color: #fff !important; border-color: transparent !important; }
html.av2 .av2-gc-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
html.av2 .av2-gc-name, html.av2 .av2-gc-sub { display: block !important; }
html.av2 .av2-gc-meta { flex: none; display: block; margin-left: auto; text-align: right; max-width: 40%; }
/* ---------- final arcade v2 fixes ---------- */
html.av2 #view-home .hero .hbtn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  padding: 14px 16px !important;
  min-width: 128px !important;
}
html.av2 .btnrow .btn,
html.av2 .btnrow .mini { min-height: 38px; }
html.av2 #view-home .hero .jpticker { max-width: none !important; }
/* ---------- cashier/modal final ---------- */
html.av2 .modal .mbox {
  background: #0b0e17 !important;
  border: 1px solid var(--av2-line2) !important;
  box-shadow: 0 -24px 80px rgba(0,0,0,.7) !important;
}
html.av2 .modal .mtitle {
  background: #0b0e17 !important;
  color: #fff !important;
  border-bottom: 1px solid var(--av2-line) !important;
  font-family: var(--av2-display) !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
  padding: 16px 18px !important;
  text-shadow: none !important;
}
html.av2 .modal .mtitle b {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid var(--av2-line2) !important;
  border-radius: 8px !important;
  color: var(--av2-muted) !important;
  font-family: var(--av2-ui) !important;
  box-shadow: none !important;
}
html.av2 .modal .mbody {
  background: #0b0e17 !important;
  color: var(--av2-text) !important;
}
html.av2 .ctabs button {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--av2-line) !important;
  color: var(--av2-muted) !important;
  border-radius: 999px !important;
  font-family: var(--av2-ui) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  box-shadow: none !important;
  padding: 8px 13px !important;
}
html.av2 .ctabs button.on {
  background: var(--av2-lime) !important;
  border-color: transparent !important;
  color: #0a0f03 !important;
}
html.av2 #cashier .pack {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--av2-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
html.av2 #cashier .pack b { color: #fff !important; font-family: var(--av2-display) !important; }
html.av2 #cashier .pack span { color: var(--av2-muted) !important; }
html.av2 #cashier .qrow { background: rgba(255,255,255,.035) !important; }
html.av2 #cashier .fairnote { color: var(--av2-dim) !important; font-family: var(--av2-ui) !important; }
html.av2 #cashier .ph { color: var(--av2-muted) !important; }
html.av2 #cashier .qt span:first-child { color: var(--av2-text) !important; }
html.av2 #cashier .qf span { color: var(--av2-muted) !important; }
html.av2 #cashier input {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--av2-line2) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
html.av2 #winpopup .wbox { background: #0b0e17 !important; }
html.av2 #winpopup .wt { background: transparent !important; color: var(--av2-muted) !important; }
html.av2 #winpopup .wo button { background: rgba(255,255,255,.06) !important; color: #fff !important; }