/* =============================================================
   ps3.css — XrossMediaBar (2006-2013 PS3 dashboard)
   Wave ground, glossy band, category icons on a horizontal rail,
   vertical system column, PS3 info panel. No mobile chrome.
   Loaded last; owns the frame.
   ============================================================= */

html.av2 {
  --p3-bg: #071426;
  --p3-bg2: #0a2038;
  --p3-band: #0b2c4c;
  --p3-ink: #ffffff;
  --p3-ink2: #cfe4f7;
  --p3-ink3: #8fb2d2;
  --p3-panel: rgba(9, 28, 48, .62);
  --p3-panel2: rgba(6, 18, 32, .82);
  --p3-line: rgba(180, 220, 255, .30);
  --p3-glow: rgba(150, 214, 255, .55);
  --p3-hot: #eaf6ff;
  --p3-font: "Segoe UI Semilight", "Segoe UI", "Frutiger", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 1. ground: deep blue water ---------- */

html.av2 body {
  background: #04101e !important;
  color: var(--p3-ink) !important;
  font-family: var(--p3-font) !important;
  font-weight: 300 !important;
  letter-spacing: .015em !important;
  -webkit-font-smoothing: antialiased;
}
html.av2 body::before {
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(24, 96, 168, .55) 0%, transparent 68%),
    radial-gradient(100% 60% at 50% -20%, rgba(58, 140, 214, .34) 0%, transparent 70%),
    linear-gradient(180deg, #04101e 0%, #061a2c 40%, #04121f 72%, #020a12 100%) !important;
}
html.av2 body::after { display: none !important; }
html.av2 #p-grain { opacity: .05 !important; mix-blend-mode: overlay !important; }
html.av2 #p-vig {
  background: radial-gradient(112% 82% at 50% 42%, transparent 44%, rgba(2, 8, 14, .82) 100%) !important;
}

/* ---------- 2. hardware frame ---------- */

html.av2 #win { max-width: 780px !important; padding: 6px 6px 0 !important; }
@media (min-width: 900px) {
  html.av2 #win { max-width: 1180px !important; padding: 16px 16px 0 !important; }
}
html.av2 #chrome {
  border: 1px solid rgba(150, 205, 255, .2) !important;
  border-radius: 2px 2px 0 0 !important;
  background: linear-gradient(180deg, #0a2135 0%, #071726 62%, #030c15 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(226, 244, 255, .18),
    0 0 0 1px rgba(0, 0, 0, .9),
    0 26px 60px rgba(0, 0, 0, .85) !important;
  position: relative !important;
  overflow: hidden !important;
}
html.av2 #chrome::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 90px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent) !important;
  z-index: 3 !important;
}

/* ---------- 3. the old title bar becomes the PS3 status strip ---------- */

html.av2 #titlebar {
  padding: 3px 12px !important;
  gap: 8px !important;
  min-height: 20px !important;
  background: linear-gradient(180deg, rgba(20, 56, 92, .9) 0%, rgba(6, 20, 34, .95) 100%) !important;
  border-bottom: 1px solid rgba(120, 190, 255, .22) !important;
  color: #ffffff !important;
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
}
html.av2 #titlebar::after { display: none !important; }
html.av2 #titlebar .ticon {
  width: 7px !important;
  height: 7px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 40% 32%, #ffffff, #7ec4ff 54%, #2b6da8 100%) !important;
  box-shadow: 0 0 8px rgba(150, 210, 255, .85) !important;
  animation: none !important;
}
html.av2 #titlebar .ttitle {
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 9.5px !important;
  letter-spacing: .14em !important;
  color: rgba(255, 255, 255, .8) !important;
}
html.av2 #titlebar .tbtns b,
html.av2 #theme-toggle {
  width: 14px !important;
  height: 12px !important;
  font: 400 8px/1 var(--p3-font) !important;
  color: rgba(226, 242, 255, .62) !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(150, 205, 255, .26) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
html.av2 #titlebar .tbtns b:hover,
html.av2 #theme-toggle:hover { color: #fff !important; border-color: var(--p3-glow) !important; }
html.av2 #titlebar .tbtns b.x { background: rgba(150, 30, 30, .45) !important; color: #ffd9d9 !important; }
html.av2 #titlebar .ttitle::before { content: "=\u00b7  " !important; letter-spacing: 0 !important; opacity: .6 !important; }

/* top bar + ticker are retired: PS3 keeps its status in the strip */
html.av2 #top,
html.av2 #ticker,
html.av2 #wintabs,
html.av2 #rail,
html.av2 #taskbar,
html.av2 #appbanner { display: none !important; }

/* ---------- 4. shell ---------- */

html.av2 #ps3 {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #04101e !important;
}

/* the wave field: three slow parallax bands behind everything */
html.av2 .p3-waves {
  position: absolute !important;
  inset: 34% 0 0 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  opacity: .9 !important;
}
html.av2 .p3-waves i {
  position: absolute !important;
  left: -12% !important;
  width: 124% !important;
  height: 46% !important;
  display: block !important;
  transform: translateZ(0);
  will-change: transform;
}
html.av2 .p3-waves i:nth-child(1) {
  top: 4% !important;
  background: radial-gradient(58% 100% at 40% 60%, rgba(120, 200, 255, .20) 0%, rgba(40, 110, 180, .1) 46%, transparent 78%) !important;
  filter: blur(6px) !important;
  animation: p3wave 26s linear infinite !important;
}
html.av2 .p3-waves i:nth-child(2) {
  top: 26% !important;
  background: radial-gradient(60% 100% at 66% 50%, rgba(150, 220, 255, .16) 0%, rgba(50, 130, 200, .09) 50%, transparent 80%) !important;
  filter: blur(9px) !important;
  animation: p3wave 38s linear infinite reverse !important;
}
html.av2 .p3-waves i:nth-child(3) {
  top: 50% !important;
  background:
    radial-gradient(70% 100% at 30% 40%, rgba(90, 180, 250, .14) 0%, transparent 70%),
    radial-gradient(60% 100% at 72% 60%, rgba(180, 230, 255, .1) 0%, transparent 72%) !important;
  filter: blur(12px) !important;
  animation: p3wave 52s linear infinite !important;
}
@keyframes p3wave {
  from { transform: translateX(-6%) translateY(0); }
  50%  { transform: translateX(3%) translateY(-2%); }
  to   { transform: translateX(-6%) translateY(0); }
}

/* faint horizontal scanlines: the low-res PS3 sheen */
html.av2 #ps3::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 4 !important;
  opacity: .22 !important;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px) !important;
}


/* ---------- 5. category band: the XMB crossbar ---------- */

html.av2 .p3-band {
  position: relative !important;
  z-index: 2 !important;
  flex: none !important;
  height: 96px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  background:
    linear-gradient(180deg, rgba(12, 44, 74, .92) 0%, rgba(7, 28, 48, .55) 62%, rgba(6, 18, 32, 0) 100%) !important;
  border-bottom: 1px solid rgba(130, 195, 255, .16) !important;
  box-shadow: inset 0 1px 0 rgba(220, 244, 255, .12) !important;
}
html.av2 .p3-band::-webkit-scrollbar { display: none; }
html.av2 .p3-band::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 40px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent, rgba(70, 150, 220, .09)) !important;
}

html.av2 .p3-cat {
  position: relative !important;
  flex: none !important;
  width: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer;
  outline: none;
}
html.av2 .p3-cat .p3-ci {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(150, 210, 255, .26) 0%, rgba(30, 90, 150, .38) 52%, rgba(10, 40, 70, .5) 100%) !important;
  border: 1px solid rgba(170, 220, 255, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -6px 12px rgba(0, 0, 0, .3),
    0 2px 5px rgba(0, 0, 0, .45) !important;
  color: rgba(230, 245, 255, .78) !important;
  transition: transform .13s ease-out, box-shadow .13s linear, color .13s linear;
}
html.av2 .p3-cat .p3-ci svg { width: 20px !important; height: 20px !important; }
html.av2 .p3-cat .p3-cl {
  font-family: var(--p3-font) !important;
  font-weight: 300 !important;
  font-size: 9px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: rgba(200, 226, 248, .38) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important;
  white-space: nowrap;
  transition: color .13s linear, font-size .13s linear;
}
html.av2 .p3-cat:hover .p3-cl { color: rgba(226, 244, 255, .7) !important; }
html.av2 .p3-cat:hover .p3-ci { color: #fff !important; border-color: rgba(200, 236, 255, .6) !important; }

html.av2 .p3-cat.on .p3-ci {
  transform: scale(1.22) !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(226, 246, 255, .62) 0%, rgba(120, 200, 255, .5) 46%, rgba(26, 96, 158, .6) 100%) !important;
  border-color: rgba(240, 252, 255, .85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -8px 14px rgba(0, 40, 80, .38),
    0 0 18px rgba(150, 214, 255, .6),
    0 2px 6px rgba(0, 0, 0, .5) !important;
}
html.av2 .p3-cat.on .p3-cl {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(170, 224, 255, .8), 0 1px 2px rgba(0, 0, 0, .9) !important;
}
html.av2 .p3-cat.on::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 14px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(240, 252, 255, .9), transparent) !important;
  box-shadow: 0 0 8px rgba(190, 232, 255, .8) !important;
}

/* ---------- 6. body: column + info panel ---------- */

html.av2 .p3-body {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}
html.av2 .p3-stack {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
html.av2 .p3-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  padding: 6px 0 14px !important;
}
html.av2 .p3-scroll::-webkit-scrollbar { display: none; }
html.av2 .p3-scroll > #main {
  flex: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 8px 10px 14px !important;
  background: none !important;
  perspective: none !important;
}

/* ============================================================
   #main keeps the game views. The PS3 column is its own layer.
   ============================================================ */
html.av2 .p3-col { display: none !important; }
html.av2 #ps3[data-cat="lobby"] .p3-col { display: block !important; }
html.av2 #ps3[data-cat="lobby"] .p3-scroll > #main > #view-home { display: none !important; }
html.av2 #ps3:not([data-cat="lobby"]) .p3-col { display: none !important; }

/* ---------- 7. column rows ---------- */

html.av2 .p3-col {
  padding: 2px 0 12px !important;
}
html.av2 .p3-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 16px 6px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer;
  outline: none;
  transform: none !important;
  transition: none !important;
}
/* the bright selection plate */
html.av2 .p3-row::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 12px 1px 8px !important;
  border-radius: 5px !important;
  pointer-events: none !important;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(226, 242, 255, .8) 46%, rgba(186, 218, 246, .6) 100%) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 22px rgba(180, 226, 255, .5),
    0 3px 10px rgba(0, 30, 60, .45) !important;
  transition: opacity .09s linear;
}
html.av2 .p3-row.on::before { opacity: 1; }
html.av2 .p3-row > * { position: relative !important; z-index: 1 !important; }

html.av2 .p3-row .ico {
  width: 44px !important;
  height: 44px !important;
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  border: 1px solid rgba(160, 214, 255, .34) !important;
  background:
    radial-gradient(circle at 36% 22%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .1) 42%, transparent 70%),
    linear-gradient(180deg, rgba(96, 176, 240, .55) 0%, rgba(28, 92, 152, .6) 52%, rgba(8, 36, 64, .7) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -8px 14px rgba(0, 20, 44, .45),
    0 2px 6px rgba(0, 0, 0, .5) !important;
  color: rgba(236, 248, 255, .86) !important;
  transition: transform .11s ease-out, box-shadow .11s linear, background .11s linear, color .11s linear;
}
html.av2 .p3-row .ico svg { width: 26px !important; height: 26px !important; }
html.av2 .p3-row.on .ico {
  transform: scale(1.06) !important;
  color: #123a5e !important;
  background:
    radial-gradient(circle at 36% 20%, #ffffff 0%, rgba(255, 255, 255, .7) 40%, transparent 72%),
    linear-gradient(180deg, #f2fbff 0%, #cfe9ff 50%, #9dcaee 100%) !important;
  border-color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -8px 14px rgba(120, 170, 210, .4),
    0 0 16px rgba(180, 226, 255, .65),
    0 2px 6px rgba(0, 0, 0, .4) !important;
}

html.av2 .p3-row .nm,
html.av2 .p3-row .hlog {
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: rgba(226, 240, 252, .72) !important;
  text-shadow: 0 1px 3px rgba(0, 20, 40, .85) !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}
html.av2 .p3-row.on .nm,
html.av2 .p3-row.on .hlog {
  color: #0d2c46 !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7) !important;
}
html.av2 .p3-row .sub,
html.av2 .p3-row .hsub {
  font-family: var(--p3-font) !important;
  font-weight: 300 !important;
  font-size: 9.5px !important;
  line-height: 1.45 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: rgba(178, 208, 232, .56) !important;
  margin-top: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 20, 40, .8) !important;
}
html.av2 .p3-row.on .sub,
html.av2 .p3-row.on .hsub { color: rgba(30, 70, 104, .8) !important; text-shadow: none !important; }

/* hero: the 50VS50 wordmark as a system title */
html.av2 .p3-row.hero { padding-top: 8px !important; padding-bottom: 8px !important; }
html.av2 .p3-row.hero .hlog { font-size: 21px !important; letter-spacing: .1em !important; }
html.av2 .p3-row.hero .hrow { display: none !important; }

/* balance row: engraved readout, not a pill */
html.av2 .p3-row.p3-bal .p3-amt {
  margin-left: auto !important;
  font-family: var(--p3-font) !important;
  font-weight: 300 !important;
  font-size: 19px !important;
  letter-spacing: .06em !important;
  color: #ffffff !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(170, 224, 255, .55), 0 1px 2px rgba(0, 20, 40, .9) !important;
}
html.av2 .p3-row.p3-bal.on .p3-amt {
  color: #0d2c46 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7) !important;
}
html.av2 .p3-row.p3-bal .p3-cur {
  font-size: 9px !important;
  letter-spacing: .18em !important;
  color: rgba(178, 208, 232, .6) !important;
  margin-left: 5px !important;
}
html.av2 .p3-row.p3-bal.on .p3-cur { color: rgba(30, 70, 104, .7) !important; }


/* ---------- 8. info panel: PS3 system details ---------- */

html.av2 .p3-info {
  flex: none !important;
  width: 292px !important;
  margin: 8px 12px 12px 0 !important;
  padding: 14px 16px 16px !important;
  border: 1px solid rgba(140, 200, 255, .22) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(14, 44, 72, .7) 0%, rgba(5, 16, 28, .84) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(220, 244, 255, .16),
    0 10px 24px rgba(0, 0, 0, .45) !important;
  display: flex !important;
  flex-direction: column !important;
}
@media (max-width: 820px) {
  html.av2 .p3-info { display: none !important; }
}
html.av2 .p3-info .p3-ihead {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(140, 200, 255, .2) !important;
}
html.av2 .p3-info .p3-iico {
  width: 46px !important;
  height: 46px !important;
  flex: none !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 36% 20%, #ffffff 0%, rgba(255, 255, 255, .62) 40%, transparent 72%),
    linear-gradient(180deg, #eaf8ff 0%, #bcdcf6 52%, #7cb0dc 100%) !important;
  border: 1px solid rgba(240, 252, 255, .8) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(170, 224, 255, .4) !important;
  color: #123a5e !important;
}
html.av2 .p3-info .p3-iico svg { width: 26px !important; height: 26px !important; }
html.av2 .p3-info h3 {
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-shadow: 0 1px 3px rgba(0, 20, 40, .7) !important;
}
html.av2 .p3-info p {
  font-family: var(--p3-font) !important;
  font-weight: 300 !important;
  font-size: 10px !important;
  line-height: 1.65 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: rgba(190, 216, 238, .72) !important;
  margin: 10px 0 0 !important;
}
html.av2 .p3-info .p3-rows {
  margin-top: 12px !important;
  border-top: 1px solid rgba(140, 200, 255, .16) !important;
  padding-top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
html.av2 .p3-info .p3-kv {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-family: var(--p3-font) !important;
  font-size: 10px !important;
}
html.av2 .p3-info .p3-kv span {
  color: rgba(170, 202, 228, .62) !important;
  letter-spacing: .06em !important;
  flex: none !important;
  min-width: 96px !important;
}
html.av2 .p3-info .p3-kv b {
  color: #ffffff !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  font-variant-numeric: tabular-nums;
}
html.av2 .p3-info .p3-keys {
  margin-top: auto !important;
  padding-top: 14px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  font-family: var(--p3-font) !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  color: rgba(186, 214, 238, .6) !important;
}
html.av2 .p3-info .p3-keys i {
  font-style: normal !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(180, 224, 255, .4) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  margin-right: 4px !important;
  font-size: 8px !important;
}

/* ---------- 9. PS3 confirmation dialog (claim / purchase) ---------- */

html.av2 .p3-confirm {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(2, 10, 18, .72) !important;
}
html.av2 .p3-confirm.on { display: flex !important; }
html.av2 .p3-confirm-box {
  width: 100% !important;
  max-width: 372px !important;
  border: 1px solid rgba(160, 214, 255, .4) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(18, 54, 88, .97) 0%, rgba(6, 18, 32, .98) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(226, 244, 255, .3), 0 18px 44px rgba(0, 0, 0, .8) !important;
  overflow: hidden !important;
}
html.av2 .p3-confirm-t {
  padding: 9px 14px !important;
  font-family: var(--p3-font) !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(86, 168, 232, .55) 0%, rgba(20, 70, 116, .6) 100%) !important;
  border-bottom: 1px solid rgba(160, 214, 255, .3) !important;
}
html.av2 .p3-confirm-b {
  padding: 16px 16px 6px !important;
  font-family: var(--p3-font) !important;
  font-weight: 300 !important;
  font-size: 11.5px !important;
  line-height: 1.7 !important;
  color: rgba(226, 242, 255, .86) !important;
}
html.av2 .p3-confirm-b b { color: #ffffff !important; font-weight: 400 !important; }
html.av2 .p3-confirm-a {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  padding: 12px 16px 16px !important;
}
html.av2 .p3-btn {
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(160, 214, 255, .4) !important;
  color: #eaf6ff !important;
  background: linear-gradient(180deg, rgba(120, 190, 245, .34) 0%, rgba(26, 80, 128, .5) 52%, rgba(10, 40, 70, .6) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  cursor: pointer;
}
html.av2 .p3-btn:hover { border-color: rgba(226, 246, 255, .8) !important; color: #fff !important; }
html.av2 .p3-btn:active { transform: translateY(1px) !important; }
html.av2 .p3-btn.p3-primary {
  color: #0b2a44 !important;
  background: linear-gradient(180deg, #ffffff 0%, #dbeeff 48%, #a9cdec 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(180, 226, 255, .5) !important;
}


/* ---------- 10. in-game surfaces: same plastic PS3 language ---------- */

html.av2 .view { animation: p3fade .2s ease-out !important; }
@keyframes p3fade { from { opacity: 0; } to { opacity: 1; } }

html.av2 .vhead {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(140, 200, 255, .22) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(80, 164, 228, .34) 0%, rgba(10, 38, 62, .6) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(226, 244, 255, .28) !important;
}
html.av2 .vhead h2 {
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 3px rgba(0, 20, 40, .8) !important;
}
html.av2 .vhead h2::after { display: none !important; }
html.av2 .backbtn {
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  color: #eaf6ff !important;
  padding: 6px 12px !important;
  background: linear-gradient(180deg, rgba(120, 190, 245, .3) 0%, rgba(16, 56, 92, .55) 100%) !important;
  border: 1px solid rgba(170, 220, 255, .4) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

html.av2 .panel {
  padding: 12px 13px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(140, 200, 255, .2) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(12, 42, 70, .62) 0%, rgba(4, 14, 24, .78) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(220, 244, 255, .14) !important;
  color: rgba(206, 228, 246, .82) !important;
}
html.av2 .panel .ph {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 0 10px !important;
  padding: 0 0 7px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(140, 200, 255, .2) !important;
  background: none !important;
  box-shadow: none !important;
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 10.5px !important;
  letter-spacing: .05em !important;
  text-transform: none !important;
  color: rgba(226, 242, 255, .86) !important;
  text-shadow: none !important;
}
html.av2 .panel .ph > span:first-child::before { content: none !important; }
html.av2 #main, html.av2 .view { color: rgba(206, 228, 246, .82) !important; }
html.av2 #main .panel b, html.av2 #main .panel strong { color: #ffffff !important; font-weight: 400 !important; }
html.av2 #main [style*="#33507e"],
html.av2 #main [style*="#123b7a"],
html.av2 #main [style*="#0b2f6e"],
html.av2 #main [style*="#5d6e8f"],
html.av2 .modal [style*="#33507e"],
html.av2 .modal [style*="#123b7a"] { color: rgba(178, 208, 232, .68) !important; }
html.av2 #main .hint, html.av2 #main .mstat span { color: rgba(178, 208, 232, .62) !important; }
html.av2 #main .mstat b { color: #ffffff !important; font-weight: 400 !important; font-family: var(--p3-font) !important; }

html.av2 .btn, html.av2 .btn.blue {
  font-family: var(--p3-font) !important;
  font-weight: 400 !important;
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #eaf6ff !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(170, 220, 255, .4) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(126, 194, 246, .34) 0%, rgba(24, 74, 118, .55) 52%, rgba(8, 32, 56, .62) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  text-shadow: 0 1px 2px rgba(0, 20, 40, .7) !important;
  cursor: pointer;
}
html.av2 .btn:active { transform: translateY(1px) !important; }
html.av2 .btn.gold {
  color: #0b2a44 !important;
  background: linear-gradient(180deg, #ffffff 0%, #dcefff 48%, #a9cdec 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(180, 226, 255, .45) !important;
}
html.av2 .btn.green { color: #eafff4 !important; background: linear-gradient(180deg, rgba(96, 200, 170, .4) 0%, rgba(14, 74, 60, .62) 100%) !important; border-color: rgba(150, 240, 214, .4) !important; }
html.av2 .btn.red { color: #ffe6e6 !important; background: linear-gradient(180deg, rgba(226, 110, 110, .4) 0%, rgba(96, 20, 20, .62) 100%) !important; border-color: rgba(255, 180, 180, .4) !important; }
html.av2 .btn.small { font-size: 9px !important; padding: 7px 11px !important; }

html.av2 .betval {
  padding: 4px 11px !important;
  background: rgba(2, 12, 22, .6) !important;
  border: 1px solid rgba(140, 200, 255, .28) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7) !important;
}
html.av2 .betval span { font-family: var(--p3-font) !important; font-size: 8px !important; letter-spacing: .18em !important; color: rgba(170, 202, 228, .7) !important; }
html.av2 .betval b { font-family: var(--p3-font) !important; font-weight: 400 !important; font-size: 15px !important; color: #fff !important; }
html.av2 .betadj {
  width: 32px !important;
  height: 32px !important;
  font: 300 16px/1 var(--p3-font) !important;
  color: #eaf6ff !important;
  background: linear-gradient(180deg, rgba(120, 190, 245, .26) 0%, rgba(10, 40, 68, .6) 100%) !important;
  border: 1px solid rgba(170, 220, 255, .34) !important;
  border-radius: 50% !important;
}
html.av2 .quick button, html.av2 .chipsrow button {
  font-family: var(--p3-font) !important;
  font-size: 9.5px !important;
  letter-spacing: .1em !important;
  color: rgba(220, 238, 252, .82) !important;
  padding: 7px 11px !important;
  background: linear-gradient(180deg, rgba(120, 190, 245, .22) 0%, rgba(8, 32, 56, .55) 100%) !important;
  border: 1px solid rgba(160, 214, 255, .3) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24) !important;
  transform: none !important;
}
html.av2 .chipsrow button.on {
  color: #0b2a44 !important;
  background: linear-gradient(180deg, #ffffff 0%, #dcefff 52%, #a9cdec 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 12px rgba(180, 226, 255, .45) !important;
  transform: none !important;
}
html.av2 .msg { font-family: var(--p3-font) !important; font-size: 10px !important; letter-spacing: .05em !important; color: rgba(196, 220, 240, .78) !important; }
html.av2 .msg.win { color: #b8f0d2 !important; text-shadow: 0 0 10px rgba(120, 240, 190, .35) !important; }
html.av2 .msg.lose { color: #ffc2bc !important; text-shadow: 0 0 10px rgba(255, 140, 130, .3) !important; }

html.av2 .cards, html.av2 .rtable {
  border: 1px solid rgba(140, 200, 255, .24) !important;
  border-radius: 3px !important;
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(214, 244, 255, .12), transparent 62%),
    linear-gradient(180deg, #1d4468 0%, #0e2a44 62%, #071a2c 100%) !important;
  box-shadow: inset 0 1px 0 rgba(226, 244, 255, .2), inset 0 0 34px rgba(0, 0, 0, .45) !important;
}
html.av2 .rtable .rcell {
  border: 1px solid rgba(150, 205, 255, .22) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, rgba(64, 132, 188, .55) 0%, rgba(12, 44, 72, .7) 100%) !important;
  color: #eaf6ff !important;
  box-shadow: inset 0 1px 0 rgba(226, 244, 255, .2) !important;
}
html.av2 .wheel { border: 3px solid rgba(150, 205, 255, .3) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 24px rgba(120, 190, 255, .18) !important; }
html.av2 .wheel .hub { background: radial-gradient(circle at 38% 28%, #ffffff, #bcdcf6 54%, #6ba0cc 100%) !important; border: 0 !important; color: #0b2a44 !important; }
html.av2 .minesgrid button, html.av2 .minesgrid > *, html.av2 .towers > * {
  border: 1px solid rgba(150, 205, 255, .24) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(52, 110, 160, .5) 0%, rgba(6, 26, 44, .75) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(226, 244, 255, .2) !important;
  color: rgba(226, 242, 255, .78) !important;
}
html.av2 .minesgrid button.open { background: linear-gradient(180deg, rgba(96, 200, 170, .5) 0%, rgba(10, 62, 52, .8) 100%) !important; border-color: rgba(160, 240, 214, .4) !important; }
html.av2 .minesgrid button.bomb { background: linear-gradient(180deg, rgba(226, 100, 100, .5) 0%, rgba(80, 16, 16, .8) 100%) !important; border-color: rgba(255, 170, 170, .4) !important; }
html.av2 .bigmult, html.av2 .totalpill {
  font-family: var(--p3-font) !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  letter-spacing: .06em !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 0 18px rgba(170, 224, 255, .6) !important;
  animation: none !important;
}
html.av2 .graphbox { border: 1px solid rgba(140, 200, 255, .22) !important; border-radius: 2px !important; background: rgba(2, 10, 18, .7) !important; }
html.av2 .bead { background: rgba(2, 10, 18, .6) !important; border: 1px solid rgba(140, 200, 255, .18) !important; border-radius: 2px !important; }
html.av2 .history > *, html.av2 #history-list > * { background: rgba(255, 255, 255, .03) !important; border-bottom: 1px solid rgba(140, 200, 255, .12) !important; color: rgba(196, 220, 240, .7) !important; }
html.av2 .duel-card {
  border: 1px solid rgba(140, 200, 255, .24) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(16, 50, 80, .66) 0%, rgba(4, 14, 24, .8) 100%) !important;
}
html.av2 .duel-card .dn { font-family: var(--p3-font) !important; font-size: 11px !important; color: rgba(226, 242, 255, .86) !important; text-transform: none !important; }
html.av2 .duel-card .dp { font-family: var(--p3-font) !important; font-size: 8.5px !important; color: rgba(178, 208, 232, .6) !important; }
html.av2 .duel-card.on { border-color: #ffffff !important; box-shadow: 0 0 16px rgba(170, 224, 255, .4) !important; }
html.av2 .dpickbar { background: rgba(2, 12, 22, .5) !important; border: 1px solid rgba(140, 200, 255, .2) !important; border-radius: 2px !important; }
html.av2 .dpick-b { font-family: var(--p3-font) !important; font-size: 10px !important; color: rgba(206, 228, 246, .74) !important; background: none !important; border: 1px solid transparent !important; border-radius: 4px !important; }
html.av2 .dpick-b.on { color: #0b2a44 !important; background: linear-gradient(180deg, #fff 0%, #cfe6fb 100%) !important; border-color: #fff !important; }
html.av2 .roomrow { background: rgba(255, 255, 255, .03) !important; border-bottom: 1px solid rgba(140, 200, 255, .12) !important; color: rgba(196, 220, 240, .74) !important; }
html.av2 .roomrow .rj { font-family: var(--p3-font) !important; color: #0b2a44 !important; background: linear-gradient(180deg, #fff 0%, #cfe6fb 100%) !important; border: 0 !important; border-radius: 4px !important; }
html.av2 #dstage .ds-wrap, html.av2 .ds-stage { border-color: rgba(140, 200, 255, .24) !important; background: linear-gradient(180deg, rgba(14, 44, 72, .7) 0%, rgba(2, 10, 18, .86) 100%) !important; }

/* ---------- 11. cashier modal ---------- */

html.av2 .modal { background: rgba(2, 8, 14, .82) !important; }
html.av2 .mbox {
  border: 1px solid rgba(160, 214, 255, .34) !important;
  border-radius: 4px 4px 0 0 !important;
  background: linear-gradient(180deg, rgba(18, 54, 88, .98) 0%, rgba(4, 12, 22, .99) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(226, 244, 255, .26), 0 22px 54px rgba(0, 0, 0, .85) !important;
  color: rgba(206, 228, 246, .84) !important;
}
html.av2 .mtitle {
  padding: 9px 13px !important;
  background: linear-gradient(180deg, rgba(86, 168, 232, .5) 0%, rgba(16, 56, 92, .62) 100%) !important;
  border-bottom: 1px solid rgba(160, 214, 255, .3) !important;
  font-family: var(--p3-font) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
html.av2 .mtitle b { color: #ffdede !important; background: rgba(160, 40, 40, .5) !important; border: 1px solid rgba(255, 180, 180, .4) !important; border-radius: 3px !important; padding: 2px 6px !important; font-weight: 400 !important; }
html.av2 .mbody { color: rgba(206, 228, 246, .84) !important; }
html.av2 .ctabs { background: rgba(255, 255, 255, .04) !important; border-bottom: 1px solid rgba(140, 200, 255, .2) !important; }
html.av2 .ctabs button { font-family: var(--p3-font) !important; font-size: 9.5px !important; letter-spacing: .08em !important; color: rgba(186, 214, 238, .6) !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
html.av2 .ctabs button.on { color: #ffffff !important; box-shadow: inset 0 -2px 0 rgba(200, 236, 255, .9) !important; }
html.av2 .csec { background: none !important; border-bottom: 1px solid rgba(140, 200, 255, .16) !important; color: rgba(170, 208, 240, .8) !important; font-family: var(--p3-font) !important; font-size: 9px !important; letter-spacing: .1em !important; }
html.av2 .qrow { border: 1px solid rgba(140, 200, 255, .2) !important; background: rgba(255, 255, 255, .03) !important; border-radius: 3px !important; }
html.av2 .qrow .qt { color: rgba(226, 242, 255, .88) !important; }
html.av2 .qrow .qf { color: rgba(178, 208, 232, .6) !important; }
html.av2 .mini {
  font-family: var(--p3-font) !important;
  font-size: 9.5px !important;
  letter-spacing: .08em !important;
  color: #eaf6ff !important;
  padding: 7px 11px !important;
  background: linear-gradient(180deg, rgba(120, 190, 245, .3) 0%, rgba(10, 40, 68, .6) 100%) !important;
  border: 1px solid rgba(170, 220, 255, .38) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
html.av2 .mini.gold { color: #0b2a44 !important; background: linear-gradient(180deg, #fff 0%, #dcefff 52%, #a9cdec 100%) !important; border-color: #fff !important; }
html.av2 #popstack > *, html.av2 .pop {
  background: linear-gradient(180deg, rgba(24, 66, 104, .96) 0%, rgba(4, 14, 24, .97) 100%) !important;
  border: 1px solid rgba(160, 214, 255, .4) !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(150, 214, 255, .2), 0 8px 20px rgba(0, 0, 0, .6) !important;
  font-family: var(--p3-font) !important;
}
html.av2 .bar { background: rgba(2, 10, 18, .75) !important; border: 1px solid rgba(140, 200, 255, .22) !important; }
html.av2 .bar > i { background: linear-gradient(90deg, #6ba0cc, #eaf8ff) !important; box-shadow: 0 0 10px rgba(170, 224, 255, .5) !important; }

/* ---------- 12. light mode: the PS3 "original" white theme ---------- */

html.av2[data-mode="light"] body { background: #dfeaf5 !important; color: #0e2236 !important; }
html.av2[data-mode="light"] body::before {
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(120, 186, 236, .5) 0%, transparent 68%),
    linear-gradient(180deg, #f4fbff 0%, #dfeaf5 46%, #c9dcee 100%) !important;
}
html.av2[data-mode="light"] #p-vig { background: radial-gradient(112% 82% at 50% 42%, transparent 50%, rgba(96, 140, 180, .28) 100%) !important; }
html.av2[data-mode="light"] #chrome { border-color: rgba(120, 170, 210, .5) !important; background: linear-gradient(180deg, #ffffff 0%, #e6f0f9 100%) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(120, 170, 210, .4), 0 22px 44px rgba(90, 130, 170, .3) !important; }
html.av2[data-mode="light"] #ps3 { background: #dfeaf5 !important; }
html.av2[data-mode="light"] #titlebar { background: linear-gradient(180deg, #ffffff 0%, #dbe8f4 100%) !important; border-bottom-color: rgba(120, 170, 210, .4) !important; color: #12314e !important; }
html.av2[data-mode="light"] #titlebar .ttitle { color: #35597c !important; }
html.av2[data-mode="light"] .p3-band { background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(226, 238, 249, .6) 62%, rgba(216, 231, 245, 0) 100%) !important; border-bottom-color: rgba(120, 170, 210, .3) !important; }
html.av2[data-mode="light"] .p3-cat .p3-ci { background: linear-gradient(180deg, #ffffff 0%, #cfe3f5 52%, #9dc4e0 100%) !important; border-color: rgba(120, 170, 210, .55) !important; color: #2b5c86 !important; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(90, 130, 170, .35) !important; }
html.av2[data-mode="light"] .p3-cat.on .p3-ci { background: linear-gradient(180deg, #ffffff 0%, #b8dbff 46%, #5b9fd6 100%) !important; border-color: #3f7fae !important; color: #0b2a44 !important; box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(90, 170, 230, .55) !important; }
html.av2[data-mode="light"] .p3-cat .p3-cl { color: rgba(30, 66, 100, .5) !important; text-shadow: 0 1px 0 #fff !important; }
html.av2[data-mode="light"] .p3-cat.on .p3-cl { color: #12314e !important; text-shadow: 0 1px 0 #fff !important; }
html.av2[data-mode="light"] .p3-row::before { background: linear-gradient(180deg, #ffffff 0%, rgba(206, 232, 255, .95) 52%, rgba(150, 200, 240, .9) 100%) !important; box-shadow: inset 0 1px 0 #fff, 0 0 16px rgba(120, 180, 235, .5), 0 2px 6px rgba(90, 130, 170, .3) !important; }
html.av2[data-mode="light"] .p3-row .nm, html.av2[data-mode="light"] .p3-row .hlog { color: rgba(22, 54, 86, .8) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .8) !important; }
html.av2[data-mode="light"] .p3-row.on .nm, html.av2[data-mode="light"] .p3-row.on .hlog { color: #0a2338 !important; }
html.av2[data-mode="light"] .p3-row .sub, html.av2[data-mode="light"] .p3-row .hsub { color: rgba(40, 80, 116, .62) !important; text-shadow: none !important; }
html.av2[data-mode="light"] .p3-row.on .sub, html.av2[data-mode="light"] .p3-row.on .hsub { color: rgba(20, 60, 96, .78) !important; }
html.av2[data-mode="light"] .p3-row .ico { background: linear-gradient(180deg, #ffffff 0%, #cfe3f5 52%, #9dc4e0 100%) !important; border-color: rgba(120, 170, 210, .5) !important; color: #2b5c86 !important; }
html.av2[data-mode="light"] .p3-row.on .ico { background: linear-gradient(180deg, #ffffff 0%, #b8dbff 46%, #5b9fd6 100%) !important; border-color: #3f7fae !important; color: #0b2a44 !important; }
html.av2[data-mode="light"] .p3-info { background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(222, 235, 247, .95) 100%) !important; border-color: rgba(120, 170, 210, .4) !important; }
html.av2[data-mode="light"] .p3-info h3 { color: #0d2c46 !important; text-shadow: none !important; }
html.av2[data-mode="light"] .p3-info p { color: rgba(30, 70, 104, .72) !important; }
html.av2[data-mode="light"] .p3-info .p3-kv span { color: rgba(40, 84, 122, .7) !important; }
html.av2[data-mode="light"] .p3-info .p3-kv b { color: #0d2c46 !important; }
html.av2[data-mode="light"] .p3-info .p3-keys { color: rgba(30, 70, 104, .6) !important; }
html.av2[data-mode="light"] .p3-info .p3-keys i { color: #0d2c46 !important; background: rgba(255, 255, 255, .9) !important; border-color: rgba(120, 170, 210, .5) !important; }
html.av2[data-mode="light"] .p3-row.p3-bal .p3-amt { color: #0d2c46 !important; text-shadow: none !important; }
html.av2[data-mode="light"] .p3-confirm { background: rgba(200, 220, 236, .78) !important; }
html.av2[data-mode="light"] .vhead { background: linear-gradient(180deg, #ffffff 0%, #d9e8f6 100%) !important; border-color: rgba(120, 170, 210, .4) !important; }
html.av2[data-mode="light"] .vhead h2 { color: #0d2c46 !important; text-shadow: none !important; }
html.av2[data-mode="light"] .panel { background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(224, 236, 248, .95) 100%) !important; border-color: rgba(120, 170, 210, .34) !important; color: #16405f !important; }
html.av2[data-mode="light"] .panel .ph { color: #0d2c46 !important; border-bottom-color: rgba(120, 170, 210, .3) !important; }
html.av2[data-mode="light"] #main [style*="#33507e"], html.av2[data-mode="light"] #main [style*="#123b7a"], html.av2[data-mode="light"] #main [style*="#0b2f6e"] { color: rgba(40, 84, 122, .7) !important; }
html.av2[data-mode="light"] .btn { color: #16405f !important; border-color: rgba(120, 170, 210, .45) !important; background: linear-gradient(180deg, #fff 0%, #dcebf9 100%) !important; }
html.av2[data-mode="light"] .btn.gold, html.av2[data-mode="light"] .mini.gold, html.av2[data-mode="light"] .chipsrow button.on, html.av2[data-mode="light"] .dpick-b.on { color: #0b2a44 !important; }
html.av2[data-mode="light"] .mbox { background: linear-gradient(180deg, #ffffff 0%, #e2eef9 100%) !important; border-color: rgba(120, 170, 210, .45) !important; color: #16405f !important; }
html.av2[data-mode="light"] .mtitle { color: #0d2c46 !important; background: linear-gradient(180deg, #ffffff 0%, #d9e8f6 100%) !important; }
html.av2[data-mode="light"] .mini { color: #16405f !important; background: linear-gradient(180deg, #fff 0%, #dcebf9 100%) !important; border-color: rgba(120, 170, 210, .4) !important; }
html.av2[data-mode="light"] .qrow { background: rgba(255, 255, 255, .8) !important; border-color: rgba(120, 170, 210, .26) !important; }
html.av2[data-mode="light"] .qrow .qt { color: #0d2c46 !important; }
html.av2[data-mode="light"] .msg { color: rgba(30, 70, 104, .72) !important; }

/* ---------- 13. motion + phone ---------- */

@media (prefers-reduced-motion: reduce) {
  html.av2 .p3-waves i { animation: none !important; }
  html.av2 .view { animation: none !important; }
  html.av2 .p3-row .ico, html.av2 .p3-cat .p3-ci { transition: none !important; }
}
@media (max-width: 430px) {
  html.av2 #win { padding: 3px 3px 0 !important; }
  html.av2 .p3-band { height: 82px !important; padding: 0 9px !important; gap: 2px !important; }
  html.av2 .p3-cat { width: 58px !important; }
  html.av2 .p3-cat .p3-ci { width: 30px !important; height: 30px !important; border-radius: 7px !important; }
  html.av2 .p3-cat .p3-ci svg { width: 18px !important; height: 18px !important; }
  html.av2 .p3-cat .p3-cl { font-size: 8.5px !important; letter-spacing: .06em !important; }
  html.av2 .p3-cat.on .p3-cl { font-size: 10px !important; }
  html.av2 .p3-row { padding: 5px 12px 5px 13px !important; gap: 11px !important; }
  html.av2 .p3-row .ico { width: 38px !important; height: 38px !important; border-radius: 8px !important; }
  html.av2 .p3-row .ico svg { width: 22px !important; height: 22px !important; }
  html.av2 .p3-row .nm, html.av2 .p3-row .hlog { font-size: 13.5px !important; }
  html.av2 .p3-row .sub, html.av2 .p3-row .hsub { font-size: 8.5px !important; }
  html.av2 .p3-row.hero .hlog { font-size: 17px !important; }
  html.av2 .p3-row.p3-bal .p3-amt { font-size: 16px !important; }
  html.av2 .p3-scroll > #main { padding: 6px 8px 12px !important; }
  html.av2 .p3-row::before { inset: 1px 8px 1px 5px !important; }
}