/* EXP Tube clean profile layout — keeps the game character overlay, removes messy floating map clutter. */
body.exp-profile-clean-mode {
  overflow: hidden;
}

body.exp-profile-clean-mode .hq-frame {
  padding-top: 78px !important;
}

body.exp-profile-clean-mode .hq-stage {
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(57,223,55,.15), transparent 32%),
    radial-gradient(circle at 82% 2%, rgba(22,200,210,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,252,255,.96)) !important;
}

body.exp-profile-clean-mode #hqWorld,
body.exp-profile-clean-mode #hqScene {
  pointer-events: none;
}

body.exp-profile-clean-mode #portalLayer,
body.exp-profile-clean-mode #monsterLayer,
body.exp-profile-clean-mode #projectileLayer,
body.exp-profile-clean-mode #backVisualLayer,
body.exp-profile-clean-mode #frontVisualLayer,
body.exp-profile-clean-mode .hq-topbar,
body.exp-profile-clean-mode .bottom-bars-hud,
body.exp-profile-clean-mode .touch-controls,
body.exp-profile-clean-mode .chat-dock,
body.exp-profile-clean-mode #connStatus,
body.exp-profile-clean-mode .player-stat-card {
  display: none !important;
}

body.exp-profile-clean-mode .hq-bg-layer--shade {
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 44%, rgba(255,255,255,.62) 100%),
    radial-gradient(circle at 72% 20%, rgba(22,200,210,.16), transparent 38%) !important;
}

body.exp-profile-clean-mode #expBgVideo {
  opacity: .24 !important;
  filter: saturate(1.1) contrast(1.05) blur(.2px);
}

body.exp-profile-clean-mode .hq-ground {
  bottom: 38px !important;
  height: 18px !important;
  opacity: .82;
}

body.exp-profile-clean-mode #player {
  z-index: 140 !important;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px rgba(8,36,44,.22));
}

body.exp-profile-clean-mode .player-name {
  color: #08242c !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 10px rgba(255,255,255,.95), 0 1px 0 #fff !important;
}

.exp-profile-dashboard {
  position: absolute;
  inset: 18px 18px 18px 205px;
  z-index: 120;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 30px;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(22,200,210,.55) rgba(8,36,44,.08);
}

.exp-profile-dashboard::-webkit-scrollbar { width: 10px; }
.exp-profile-dashboard::-webkit-scrollbar-track { background: rgba(8,36,44,.08); border-radius: 999px; }
.exp-profile-dashboard::-webkit-scrollbar-thumb { background: rgba(22,200,210,.55); border-radius: 999px; }

.exp-profile-hero,
.exp-profile-card {
  border: 1px solid rgba(22,200,210,.24);
  background: rgba(255,255,255,.84);
  color: #08242c;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(10,120,145,.13);
  backdrop-filter: blur(15px);
}

.exp-profile-hero {
  position: relative;
  overflow: hidden;
  padding: 26px;
  min-height: 206px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: end;
}

.exp-profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(57,223,55,.22), transparent 42%),
    radial-gradient(circle at 86% 16%, rgba(22,200,210,.24), transparent 34%);
  pointer-events: none;
}

.exp-profile-hero > * { position: relative; z-index: 1; }
.exp-profile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(8,36,44,.08);
  border: 1px solid rgba(22,200,210,.22);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0e7490;
}

.exp-profile-title {
  margin: 10px 0 4px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: .9;
  letter-spacing: -0.06em;
  font-weight: 1000;
  color: #08242c;
}

.exp-profile-handle,
.exp-profile-bio {
  color: rgba(8,36,44,.72);
  font-weight: 850;
  margin-top: 6px;
}
.exp-profile-handle { color: #0891b2; }
.exp-profile-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.exp-profile-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(22,200,210,.28);
  background: #fff; color:#08242c; font-weight: 1000; text-decoration:none;
  box-shadow: 0 10px 22px rgba(22,200,210,.10);
}
.exp-profile-btn--accent { background: linear-gradient(135deg, #39df37, #16c8d2); color:#031517; border-color: rgba(57,223,55,.7); }

.exp-profile-grid { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:12px; margin:14px 0; }
.exp-profile-stat {
  border: 1px solid rgba(22,200,210,.22); border-radius:18px; padding:14px;
  background: rgba(255,255,255,.78); box-shadow:0 12px 28px rgba(10,120,145,.10);
}
.exp-profile-stat span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:1000; color:rgba(8,36,44,.58); }
.exp-profile-stat strong { display:block; margin-top:7px; font-size:26px; line-height:1; font-weight:1000; color:#08242c; }

.exp-profile-main { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap:14px; align-items:start; }
.exp-profile-card { padding:18px; margin-bottom:14px; }
.exp-profile-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.exp-profile-eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#0891b2; font-weight:1000; }
.exp-profile-section-title { margin:3px 0 0; font-size:24px; line-height:1.05; letter-spacing:-.03em; font-weight:1000; color:#08242c; }
.exp-profile-section-copy { margin:5px 0 0; font-size:13px; line-height:1.35; color:rgba(8,36,44,.67); font-weight:800; }

.exp-profile-video-section #expVideoPanel {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-height: none !important;
  transform: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #08242c !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}
.exp-profile-video-section .exp-video-panel__head { display:flex !important; }
.exp-profile-video-section .exp-video-panel__toggle { display:none !important; }
.exp-profile-video-section .exp-video-grid { display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; max-height:none !important; overflow:visible !important; }
.exp-profile-video-section .exp-video-card,
.exp-profile-video-section [data-video-id] {
  border-radius:16px !important;
  overflow:hidden;
  border:1px solid rgba(22,200,210,.22) !important;
  box-shadow:0 12px 26px rgba(10,120,145,.12) !important;
  background:#fff !important;
}
.exp-profile-video-section .exp-video-controls { margin-top:12px !important; }
.exp-profile-video-section .exp-video-empty { color:rgba(8,36,44,.64) !important; font-weight:900; }

.exp-profile-inventory-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
.exp-profile-mini-card { padding:12px; border-radius:16px; background:rgba(8,36,44,.06); border:1px solid rgba(22,200,210,.18); }
.exp-profile-mini-card strong { display:block; font-size:14px; font-weight:1000; }
.exp-profile-mini-card span { display:block; margin-top:4px; font-size:12px; color:rgba(8,36,44,.65); font-weight:800; }

#expTshirtTubeSectionBody { min-height: 180px; }

@media (max-width: 1050px) {
  .exp-profile-dashboard { inset: 18px 14px 18px 145px; }
  .exp-profile-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .exp-profile-main { grid-template-columns: 1fr; }
  .exp-profile-video-section .exp-video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .exp-profile-dashboard { inset: 12px; padding-bottom: 155px; }
  body.exp-profile-clean-mode #player { opacity: .5; transform: scale(.74) !important; }
  .exp-profile-hero { grid-template-columns: 1fr; }
  .exp-profile-actions { justify-content:flex-start; }
  .exp-profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .exp-profile-video-section .exp-video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LOCKED PROFILE EXPERIENCE FIX
   - Clean tall EXP Tube profile stays underneath.
   - MMO/game layer stays above the page.
   - Character movement is controlled by hq.js again (not fixed/pinned).
   - Videos render in the section and play as background.
   - No white/cloudy wash box.
   ============================================================ */
body.exp-profile-clean-mode {
  --profile-top: 112px;
  --profile-side: 24px;
  --profile-left-lane: clamp(170px, 17vw, 250px);
  --profile-vh: 100dvh;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(57,223,55,.16), transparent 28%),
    radial-gradient(circle at 92% 3%, rgba(22,200,210,.18), transparent 34%),
    linear-gradient(180deg, #f6fffb 0%, #effcff 54%, #ffffff 100%) !important;
}

body.exp-profile-clean-mode .hq-shell,
body.exp-profile-clean-mode .hq-frame,
body.exp-profile-clean-mode .hq-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh) !important;
  min-width: 100vw !important;
  min-height: var(--profile-vh) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
  display: block !important;
  place-items: unset !important;
}

/* IMPORTANT: do not force transform:none here.
   hq.js owns #hqWorld transform for viewport scale and #hqScene transform for camera/movement. */
body.exp-profile-clean-mode #hqWorld {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1280px !important;
  height: 720px !important;
  transform-origin: top left !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 700 !important;
}

body.exp-profile-clean-mode #hqScene {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform-origin: 0 0 !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 701 !important;
}

/* Remove visual clutter from the clean profile. Keep player + ground + HUD. */
body.exp-profile-clean-mode .hq-bg-layer--shade,
body.exp-profile-clean-mode .hq-bg-layer--image,
body.exp-profile-clean-mode #backVisualLayer,
body.exp-profile-clean-mode #frontVisualLayer,
body.exp-profile-clean-mode #portalLayer,
body.exp-profile-clean-mode #monsterLayer,
body.exp-profile-clean-mode #projectileLayer,
body.exp-profile-clean-mode #dropLayer,
body.exp-profile-clean-mode #platformLayer,
body.exp-profile-clean-mode #ropeLayer,
body.exp-profile-clean-mode .hq-topbar {
  display: none !important;
  opacity: 0 !important;
}

/* Background video sits behind cards only. */
body.exp-profile-clean-mode #expBgVideo,
body.exp-profile-clean-mode #expBgEmbedFrame {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh) !important;
  object-fit: cover !important;
  z-index: 15 !important;
  opacity: .12 !important;
  filter: saturate(1.05) contrast(1.03) brightness(.96) !important;
  pointer-events: none !important;
}
body.exp-profile-clean-mode #expBgVideo.is-playing,
body.exp-profile-clean-mode #expBgEmbedFrame.is-playing {
  opacity: .22 !important;
}

/* Clean readable profile layout. */
body.exp-profile-clean-mode .exp-profile-dashboard {
  position: fixed !important;
  top: var(--profile-top) !important;
  left: var(--profile-left-lane) !important;
  right: var(--profile-side) !important;
  bottom: 24px !important;
  width: auto !important;
  height: auto !important;
  z-index: 120 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 18px 90px !important;
  pointer-events: auto !important;
  border-radius: 30px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(22,200,210,.65) rgba(8,36,44,.08);
}

body.exp-profile-clean-mode .exp-profile-hero {
  min-height: 170px !important;
  padding: 22px !important;
}
body.exp-profile-clean-mode .exp-profile-title {
  font-size: clamp(36px, 5.2vw, 58px) !important;
}
body.exp-profile-clean-mode .exp-profile-grid {
  grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
}
body.exp-profile-clean-mode .exp-profile-main {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
}
body.exp-profile-clean-mode .exp-profile-hero,
body.exp-profile-clean-mode .exp-profile-card,
body.exp-profile-clean-mode .exp-profile-stat {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(22,200,210,.28) !important;
  box-shadow: 0 18px 45px rgba(8,120,145,.12) !important;
  backdrop-filter: blur(9px) !important;
}

/* Character moves again. No fixed pinning. */
body.exp-profile-clean-mode #player {
  display: block !important;
  position: absolute !important;
  z-index: 930 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 18px 28px rgba(8,36,44,.26)) !important;
}
body.exp-profile-clean-mode .player-sprite {
  max-width: none !important;
}
body.exp-profile-clean-mode .player-name {
  color: #08242c !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 10px rgba(255,255,255,.98), 0 1px 0 #fff !important;
}
body.exp-profile-clean-mode .player-bubble {
  pointer-events: none !important;
}

body.exp-profile-clean-mode .hq-ground {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 50px !important;
  z-index: 850 !important;
  pointer-events: none !important;
  opacity: .92 !important;
  background:
    linear-gradient(to bottom, rgba(139,92,32,.18), rgba(110,69,28,.78)),
    linear-gradient(90deg, rgba(92,57,22,.72), rgba(160,104,42,.72), rgba(92,57,22,.72)) !important;
  border-top: 2px solid rgba(122,78,32,.55) !important;
  box-shadow: 0 -10px 32px rgba(8,36,44,.12) !important;
}

body.exp-profile-clean-mode .player-stat-card,
body.exp-profile-clean-mode .hud-stack,
body.exp-profile-clean-mode #connStatus {
  display: block !important;
  position: fixed !important;
  z-index: 950 !important;
  pointer-events: auto !important;
}
body.exp-profile-clean-mode .player-stat-card,
body.exp-profile-clean-mode .hud-stack {
  top: calc(var(--profile-top) + 6px) !important;
  left: 18px !important;
}
body.exp-profile-clean-mode #connStatus {
  top: calc(var(--profile-top) + 122px) !important;
  left: 18px !important;
}
body.exp-profile-clean-mode .touch-controls {
  display: flex !important;
  z-index: 960 !important;
  pointer-events: auto !important;
}
body.exp-profile-clean-mode .bottom-bars-hud,
body.exp-profile-clean-mode .chat-dock {
  z-index: 960 !important;
}
body.exp-profile-clean-mode .exp-social-nav,
body.exp-profile-clean-mode .hq-top-actions,
body.exp-profile-clean-mode .exp-video-top-controls {
  z-index: 990 !important;
  pointer-events: auto !important;
}

/* Video list: override old world-mode CSS that hid the video panel. */
body.exp-profile-clean-mode .exp-profile-video-section #expVideoPanel,
body.exp-profile-clean-mode.is-profile-world .exp-profile-video-section #expVideoPanel.is-world-video-mode,
body.is-profile-world.exp-profile-clean-mode .exp-profile-video-section #expVideoPanel.is-world-video-mode,
body.exp-video-wall-ready.exp-profile-clean-mode .exp-profile-video-section #expVideoPanel {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.exp-profile-clean-mode .exp-profile-video-section #expVideoGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  min-height: 120px !important;
}
body.exp-profile-clean-mode .exp-profile-video-section .exp-video-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0,1fr) !important;
  min-height: 82px !important;
  color: #08242c !important;
  background: #fff !important;
  border: 1px solid rgba(22,200,210,.22) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow: 0 12px 26px rgba(10,120,145,.12) !important;
}
body.exp-profile-clean-mode .exp-profile-video-section .exp-video-card.is-active {
  border-color: rgba(57,223,55,.75) !important;
  box-shadow: 0 14px 32px rgba(57,223,55,.18), 0 0 0 2px rgba(57,223,55,.22) inset !important;
}
body.exp-profile-clean-mode .exp-profile-video-section .exp-video-thumb {
  width: 92px !important;
  height: 58px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}
body.exp-profile-clean-mode .exp-profile-video-section .exp-video-copy strong {
  color: #08242c !important;
}
body.exp-profile-clean-mode .exp-profile-video-section .exp-video-copy em,
body.exp-profile-clean-mode .exp-profile-video-section .exp-video-empty {
  color: rgba(8,36,44,.68) !important;
}
body.exp-profile-clean-mode .exp-profile-video-section .exp-video-play-pill {
  display: none !important;
}

@media (max-width: 1180px) {
  body.exp-profile-clean-mode {
    --profile-left-lane: 132px;
    --profile-side: 14px;
  }
  body.exp-profile-clean-mode .exp-profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.exp-profile-clean-mode .exp-profile-main {
    grid-template-columns: 1fr !important;
  }
  body.exp-profile-clean-mode .exp-profile-video-section #expVideoGrid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.exp-profile-clean-mode {
    --profile-top: 78px;
    --profile-left-lane: 10px;
    --profile-side: 10px;
  }
  body.exp-profile-clean-mode .exp-profile-dashboard {
    bottom: 104px !important;
    padding-bottom: 150px !important;
  }
  body.exp-profile-clean-mode .exp-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.exp-profile-clean-mode .exp-profile-video-section #expVideoGrid {
    grid-template-columns: 1fr !important;
  }
  body.exp-profile-clean-mode .player-stat-card,
  body.exp-profile-clean-mode .hud-stack,
  body.exp-profile-clean-mode #connStatus {
    display: none !important;
  }
}

/* ============================================================
   PROFILE VIDEO THUMBNAIL FIX
   - Do not depend on the old hidden HQ expVideoPanel for profile videos.
   - Always show uploaded video thumbnails in the clean profile section.
   ============================================================ */
body.exp-profile-clean-mode .exp-profile-video-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 130px;
}
body.exp-profile-clean-mode .exp-profile-video-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(22,200,210,.26);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  color: #08242c;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(10,120,145,.12);
  overflow: hidden;
}
body.exp-profile-clean-mode .exp-profile-video-card:hover,
body.exp-profile-clean-mode .exp-profile-video-card.is-active {
  border-color: rgba(57,223,55,.78);
  box-shadow: 0 16px 34px rgba(57,223,55,.16), 0 0 0 2px rgba(57,223,55,.20) inset;
}
body.exp-profile-clean-mode .exp-profile-video-thumb-wrap {
  position: relative;
  display: block;
  width: 132px;
  height: 74px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22,200,210,.12), rgba(57,223,55,.10));
}
body.exp-profile-clean-mode .exp-profile-video-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
body.exp-profile-clean-mode .exp-profile-video-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(8,36,44,.86);
  color: #fff;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.exp-profile-clean-mode .exp-profile-video-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.exp-profile-clean-mode .exp-profile-video-copy strong {
  color: #08242c;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 1000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.exp-profile-clean-mode .exp-profile-video-copy em {
  color: rgba(8,36,44,.62);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.exp-profile-clean-mode .exp-profile-video-empty {
  margin-top: 10px;
  color: rgba(8,36,44,.68);
  font-size: 12px;
  font-weight: 900;
}
body.exp-profile-clean-mode .exp-profile-video-controls-mount #expVideoControls {
  display: grid !important;
  grid-template-columns: auto auto minmax(120px, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  position: relative !important;
  z-index: 10050 !important;
}
body.exp-profile-clean-mode .exp-profile-video-controls-mount #expVideoControls[hidden] {
  display: none !important;
}
body.exp-profile-clean-mode .exp-profile-video-controls-mount #expVideoControls button {
  border: 1px solid rgba(22,200,210,.24);
  background: #08242c;
  color: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 1000;
}
body.exp-profile-clean-mode .exp-profile-video-controls-mount #expVideoControls input {
  width: 100%;
  accent-color: #39df37;
}
@media (max-width: 1180px) {
  body.exp-profile-clean-mode .exp-profile-video-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.exp-profile-clean-mode .exp-profile-video-card { grid-template-columns: 96px minmax(0, 1fr); }
  body.exp-profile-clean-mode .exp-profile-video-thumb-wrap { width: 96px; height: 56px; }
}

/* ============================================================
   PROFILE SCREEN-SIZED MAP + VIDEO ONLY MODE
   - Profile map is clipped to the visible screen.
   - "Show Video Only" clears the profile/game UI and shows the video.
   ============================================================ */
body.exp-profile-clean-mode #hqWorld,
body.exp-profile-clean-mode #hqScene {
  overflow: hidden !important;
  max-width: 1280px !important;
  max-height: 720px !important;
}

body.exp-profile-clean-mode .exp-profile-video-only-btn,
.exp-profile-exit-video-only-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(57,223,55,.55);
  background: linear-gradient(135deg, #39df37, #16c8d2);
  color: #031517;
  font-weight: 1000;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(57,223,55,.18);
  white-space: nowrap;
}

.exp-profile-exit-video-only-btn {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  z-index: 20050;
}

body.exp-profile-video-only-mode {
  background: #000 !important;
}

body.exp-profile-video-only-mode .exp-profile-dashboard,
body.exp-profile-video-only-mode .exp-social-nav,
body.exp-profile-video-only-mode .hq-top-actions,
body.exp-profile-video-only-mode #player,
body.exp-profile-video-only-mode #playersLayer,
body.exp-profile-video-only-mode .player-stat-card,
body.exp-profile-video-only-mode .hud-stack,
body.exp-profile-video-only-mode #connStatus,
body.exp-profile-video-only-mode .touch-controls,
body.exp-profile-video-only-mode .chat-dock,
body.exp-profile-video-only-mode .bottom-bars-hud,
body.exp-profile-video-only-mode .hq-ground,
body.exp-profile-video-only-mode #portalLayer,
body.exp-profile-video-only-mode #monsterLayer,
body.exp-profile-video-only-mode #projectileLayer,
body.exp-profile-video-only-mode #dropLayer,
body.exp-profile-video-only-mode #platformLayer,
body.exp-profile-video-only-mode #ropeLayer,
body.exp-profile-video-only-mode #backVisualLayer,
body.exp-profile-video-only-mode #frontVisualLayer,
body.exp-profile-video-only-mode .hq-bg-layer {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expBgVideo,
body.exp-profile-video-only-mode #expBgEmbedFrame {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 20000 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  background: #000 !important;
  filter: none !important;
  pointer-events: auto !important;
}

body.exp-profile-video-only-mode #expBgEmbedFrame.is-playing {
  opacity: 1 !important;
}

body.exp-profile-video-only-mode #expVideoControls,
body.exp-profile-video-only-mode #expVideoTopControls {
  z-index: 20060 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.exp-profile-video-only-mode #expVideoControls {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(760px, calc(100vw - 28px)) !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(120px, 1fr) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, .72) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(14px) !important;
}

@media (max-width: 760px) {
  body.exp-profile-clean-mode .exp-profile-video-only-btn {
    width: 100%;
  }
  .exp-profile-exit-video-only-btn {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    min-height: 34px;
    padding: 0 11px;
    font-size: 12px;
  }
}

/* ============================================================
   VIDEO-ONLY MODE FIX V2
   - No black-screen rebuild.
   - Hide only profile/page info.
   - Keep video + game overlay/player alive.
   - Put the video slider at the top of the page.
   ============================================================ */
body.exp-profile-video-only-mode {
  background: #000 !important;
}

body.exp-profile-video-only-mode .exp-profile-dashboard,
body.exp-profile-video-only-mode .exp-social-nav,
body.exp-profile-video-only-mode .hq-top-actions,
body.exp-profile-video-only-mode .hq-topbar,
body.exp-profile-video-only-mode #portalLayer .video-portal,
body.exp-profile-video-only-mode .exp-video-wall-layer {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Undo the earlier over-aggressive video-only rule that hid the whole game. */
body.exp-profile-video-only-mode #player,
body.exp-profile-video-only-mode #playersLayer,
body.exp-profile-video-only-mode .player-stat-card,
body.exp-profile-video-only-mode .hud-stack,
body.exp-profile-video-only-mode #connStatus,
body.exp-profile-video-only-mode .touch-controls,
body.exp-profile-video-only-mode .chat-dock,
body.exp-profile-video-only-mode .bottom-bars-hud,
body.exp-profile-video-only-mode .hq-ground,
body.exp-profile-video-only-mode #portalLayer,
body.exp-profile-video-only-mode #monsterLayer,
body.exp-profile-video-only-mode #projectileLayer,
body.exp-profile-video-only-mode #dropLayer,
body.exp-profile-video-only-mode #platformLayer,
body.exp-profile-video-only-mode #ropeLayer,
body.exp-profile-video-only-mode #backVisualLayer,
body.exp-profile-video-only-mode #frontVisualLayer {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.exp-profile-video-only-mode .hq-bg-layer--image,
body.exp-profile-video-only-mode .hq-bg-layer--shade {
  display: none !important;
  opacity: 0 !important;
}

body.exp-profile-video-only-mode .hq-shell,
body.exp-profile-video-only-mode .hq-frame,
body.exp-profile-video-only-mode .hq-stage {
  background: #000 !important;
}

body.exp-profile-video-only-mode #expBgVideo,
body.exp-profile-video-only-mode #expBgEmbedFrame {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 10 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  background: #000 !important;
  filter: none !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expBgVideo.is-playing,
body.exp-profile-video-only-mode #expBgEmbedFrame.is-playing {
  opacity: 1 !important;
}

body.exp-profile-video-only-mode #hqWorld,
body.exp-profile-video-only-mode #hqScene {
  z-index: 30 !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #player {
  z-index: 80 !important;
}

body.exp-profile-video-only-mode .player-stat-card,
body.exp-profile-video-only-mode .hud-stack,
body.exp-profile-video-only-mode .touch-controls,
body.exp-profile-video-only-mode .chat-dock,
body.exp-profile-video-only-mode .bottom-bars-hud {
  z-index: 90 !important;
}

body.exp-profile-video-only-mode #expVideoTopControls {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  z-index: 22000 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.exp-profile-video-only-mode #expVideoControls {
  display: none !important;
}

body.exp-profile-video-only-mode .exp-profile-exit-video-only-btn {
  top: calc(62px + env(safe-area-inset-top, 0px)) !important;
  z-index: 22010 !important;
}

/* ============================================================
   PROFILE VIDEO/PADDING FIX V3
   - More scroll room so lower menus are reachable.
   - Video-only keeps the selected video visible instead of blacking out.
   - Video timeline controls live at the top while video-only mode is active.
   ============================================================ */
body.exp-profile-clean-mode .exp-profile-dashboard {
  bottom: 128px !important;
  padding-bottom: 360px !important;
  scroll-padding-bottom: 360px !important;
}

body.exp-profile-clean-mode .exp-profile-main {
  padding-bottom: 220px !important;
}

body.exp-profile-clean-mode .exp-profile-video-controls-mount #expVideoControls {
  margin-bottom: 24px !important;
}

body.exp-profile-video-only-mode .exp-profile-dashboard {
  display: none !important;
}

body.exp-profile-video-only-mode #expBgVideo,
body.exp-profile-video-only-mode #expBgEmbedFrame {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 20 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  background: #000 !important;
  filter: none !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #hqWorld,
body.exp-profile-video-only-mode #hqScene {
  z-index: 40 !important;
  background: transparent !important;
}

body.exp-profile-video-only-mode #player,
body.exp-profile-video-only-mode #playersLayer,
body.exp-profile-video-only-mode .hq-ground,
body.exp-profile-video-only-mode .bottom-bars-hud,
body.exp-profile-video-only-mode .touch-controls,
body.exp-profile-video-only-mode .chat-dock {
  z-index: 80 !important;
}

body.exp-profile-video-only-mode #expVideoTopControls {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  right: max(160px, env(safe-area-inset-right, 0px)) !important;
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  z-index: 23000 !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(160px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, .78) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(14px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.exp-profile-video-only-mode #expVideoTopControls[hidden] {
  display: none !important;
}

body.exp-profile-video-only-mode #expVideoTopControls button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(57,223,55,.45);
  background: linear-gradient(135deg, #39df37, #16c8d2);
  color: #031517;
  font-weight: 1000;
  cursor: pointer;
  white-space: nowrap;
}

body.exp-profile-video-only-mode #expVideoTopSeek {
  width: 100% !important;
  accent-color: #39df37;
  cursor: pointer;
}

body.exp-profile-video-only-mode #expVideoTopTime {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  opacity: .92;
}

body.exp-profile-video-only-mode #expVideoControls {
  display: none !important;
}

body.exp-profile-video-only-mode .exp-profile-exit-video-only-btn {
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  right: calc(14px + env(safe-area-inset-right, 0px)) !important;
  z-index: 23010 !important;
}

@media (max-width: 760px) {
  body.exp-profile-clean-mode .exp-profile-dashboard {
    bottom: 128px !important;
    padding-bottom: 390px !important;
    scroll-padding-bottom: 390px !important;
  }

  body.exp-profile-video-only-mode #expVideoTopControls {
    left: 10px !important;
    right: 10px !important;
    top: 58px !important;
    grid-template-columns: auto auto minmax(90px, 1fr) !important;
    border-radius: 22px !important;
  }

  body.exp-profile-video-only-mode #expVideoTopTime {
    display: none !important;
  }

  body.exp-profile-video-only-mode .exp-profile-exit-video-only-btn {
    top: 10px !important;
  }
}


/* ============================================================
   VIDEO-ONLY MODE FIX V3
   - Hide profile video thumbnail/portal layers that were sitting on top.
   - Keep the actual selected video visible behind the game overlay.
   - Keep the character/HUD overlay alive.
   ============================================================ */
body.exp-profile-video-only-mode #portalLayer,
body.exp-profile-video-only-mode #profileVideoPortalLayer,
body.exp-profile-video-only-mode .video-portal,
body.exp-profile-video-only-mode .profile-video-portal,
body.exp-profile-video-only-mode .exp-video-wall-layer,
body.exp-profile-video-only-mode .exp-video-card,
body.exp-profile-video-only-mode .exp-profile-video-card,
body.exp-profile-video-only-mode .exp-profile-video-grid,
body.exp-profile-video-only-mode [data-video-portal],
body.exp-profile-video-only-mode [data-exp-profile-video-id] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expBgVideo,
body.exp-profile-video-only-mode #expBgEmbedFrame {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 25 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  background: #000 !important;
  filter: none !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #hqWorld,
body.exp-profile-video-only-mode #hqScene {
  z-index: 60 !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #player,
body.exp-profile-video-only-mode #playersLayer,
body.exp-profile-video-only-mode .hq-ground,
body.exp-profile-video-only-mode .player-stat-card,
body.exp-profile-video-only-mode .hud-stack,
body.exp-profile-video-only-mode #connStatus,
body.exp-profile-video-only-mode .touch-controls,
body.exp-profile-video-only-mode .chat-dock,
body.exp-profile-video-only-mode .bottom-bars-hud {
  visibility: visible !important;
  opacity: 1 !important;
}

body.exp-profile-video-only-mode #player,
body.exp-profile-video-only-mode #playersLayer {
  z-index: 120 !important;
}

body.exp-profile-video-only-mode #expVideoTopControls {
  z-index: 22000 !important;
}

body.exp-profile-video-only-mode .exp-profile-exit-video-only-btn {
  z-index: 22010 !important;
}

/* Extra bottom room so the lower menus are still reachable on the profile page. */
body.exp-profile-clean-mode .exp-profile-dashboard {
  padding-bottom: 240px !important;
}

@media (max-width: 760px) {
  body.exp-profile-clean-mode .exp-profile-dashboard {
    padding-bottom: 260px !important;
  }
}


/* ============================================================
   VIDEO-ONLY BLACK SCREEN FIX V4
   - If audio plays but screen is black, the video was trapped inside
     the transformed/clipped game scene. JS moves it to body and this
     forces it to paint under the game overlay.
   ============================================================ */
body.exp-profile-video-only-mode #expBgVideo.exp-profile-video-surface,
body.exp-profile-video-only-mode #expBgEmbedFrame.exp-profile-video-surface {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 40 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  background: #000 !important;
  filter: none !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #hqWorld,
body.exp-profile-video-only-mode #hqScene {
  z-index: 70 !important;
  background: transparent !important;
}

body.exp-profile-video-only-mode #player,
body.exp-profile-video-only-mode #playersLayer {
  z-index: 120 !important;
}

body.exp-profile-video-only-mode .player-stat-card,
body.exp-profile-video-only-mode .hud-stack,
body.exp-profile-video-only-mode .touch-controls,
body.exp-profile-video-only-mode .chat-dock,
body.exp-profile-video-only-mode .bottom-bars-hud {
  z-index: 130 !important;
}

/* ============================================================
   PROFILE VIDEO EFFECTS + CONTROLS HARD LOCK
   - Profile videos use the same hand/effect overlay surface as home videos.
   - Top controls always stay above the video and effect layers.
   ============================================================ */
body.exp-profile-clean-mode.exp-video-playing #expVideoTopControls,
body.exp-profile-clean-mode #expVideoTopControls.is-visible {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  z-index: 24000 !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(160px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, .82) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(14px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.exp-profile-clean-mode #expVideoTopControls button,
body.exp-profile-clean-mode #expVideoTopControls input {
  pointer-events: auto !important;
}

body.exp-profile-clean-mode #expVideoTopSeek {
  width: 100% !important;
  min-width: 120px !important;
  accent-color: #39df37;
}

body.exp-profile-clean-mode #expVideoTopTime {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.exp-profile-clean-mode #exbHandAudioBarOverlay,
body.exp-profile-clean-mode .exb-hand-audio-bar-overlay,
body.exp-profile-video-only-mode #exbHandAudioBarOverlay,
body.exp-profile-video-only-mode .exb-hand-audio-bar-overlay {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 23500 !important;
  pointer-events: none !important;
}

body.exp-profile-clean-mode #exbHandAudioBarOverlay *,
body.exp-profile-clean-mode .exb-hand-audio-bar-overlay * {
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expVideoTopControls {
  right: max(160px, env(safe-area-inset-right, 0px)) !important;
}

@media (max-width: 760px) {
  body.exp-profile-clean-mode.exp-video-playing #expVideoTopControls,
  body.exp-profile-clean-mode #expVideoTopControls.is-visible {
    left: 10px !important;
    right: 10px !important;
    top: 58px !important;
    grid-template-columns: auto auto minmax(90px, 1fr) !important;
    border-radius: 22px !important;
  }
  body.exp-profile-clean-mode #expVideoTopTime { display: none !important; }
}

/* ============================================================
   FINAL PROFILE TOP VIDEO CONTROLS FIX
   - Always visible in Show Video Only.
   - Uses the profile-owned direct MP4 controls.
   - Keeps pointer events above game/effects layers so the slider works.
   ============================================================ */
body.exp-profile-clean-mode.exp-video-playing #expVideoTopControls,
body.exp-profile-video-only-mode #expVideoTopControls,
body.exp-profile-clean-mode #expVideoTopControls.is-visible {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left, 0px)) !important;
  right: max(178px, env(safe-area-inset-right, 0px)) !important;
  top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  z-index: 26000 !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(180px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, .86) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(14px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  user-select: none !important;
}

body.exp-profile-clean-mode #expVideoTopControls[hidden].is-visible,
body.exp-profile-video-only-mode #expVideoTopControls[hidden] {
  display: grid !important;
}

body.exp-profile-clean-mode #expVideoTopControls *,
body.exp-profile-video-only-mode #expVideoTopControls * {
  pointer-events: auto !important;
}

body.exp-profile-clean-mode #expVideoTopControls button,
body.exp-profile-video-only-mode #expVideoTopControls button {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #39df37 !important;
  color: #031517 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
}

body.exp-profile-clean-mode #expVideoTopSeek,
body.exp-profile-video-only-mode #expVideoTopSeek {
  display: block !important;
  width: 100% !important;
  min-width: 180px !important;
  height: 22px !important;
  cursor: pointer !important;
  accent-color: #39df37 !important;
  opacity: 1 !important;
}

body.exp-profile-clean-mode #expVideoTopSeek:disabled,
body.exp-profile-video-only-mode #expVideoTopSeek:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

body.exp-profile-clean-mode #expVideoTopTime,
body.exp-profile-video-only-mode #expVideoTopTime {
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

body.exp-profile-video-only-mode .exp-profile-exit-video-only-btn {
  z-index: 26010 !important;
}

@media (max-width: 760px) {
  body.exp-profile-clean-mode.exp-video-playing #expVideoTopControls,
  body.exp-profile-video-only-mode #expVideoTopControls,
  body.exp-profile-clean-mode #expVideoTopControls.is-visible {
    left: 10px !important;
    right: 10px !important;
    top: calc(54px + env(safe-area-inset-top, 0px)) !important;
    grid-template-columns: auto auto minmax(100px, 1fr) !important;
    border-radius: 22px !important;
  }
  body.exp-profile-clean-mode #expVideoTopTime,
  body.exp-profile-video-only-mode #expVideoTopTime {
    display: none !important;
  }
}

/* ============================================================
   ONE CHANGE: SHOW VIDEO ONLY MUST SHOW THE ACTUAL VIDEO
   - The video was playing, controls/effect were visible, but black stage layers
     were painting above the video surface.
   - Put the active direct video/embed above the black game stage, but below
     the hand effect canvas and top controls.
   ============================================================ */
body.exp-profile-video-only-mode #expBgVideo.exp-profile-video-surface,
body.exp-profile-video-only-mode #expBgVideo.is-playing,
body.exp-profile-video-only-mode #expBgVideo[src] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 22000 !important;
  object-fit: contain !important;
  background: #000 !important;
  filter: none !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expBgEmbedFrame.exp-profile-video-surface.is-playing {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 22000 !important;
  background: #000 !important;
  border: 0 !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expBgEmbedFrame:not(.is-playing) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.exp-profile-video-only-mode #hqWorld,
body.exp-profile-video-only-mode #hqScene {
  z-index: 100 !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #exbHandAudioBarOverlay,
body.exp-profile-video-only-mode .exb-hand-audio-bar-overlay {
  z-index: 23500 !important;
}

body.exp-profile-video-only-mode #expVideoTopControls {
  z-index: 26000 !important;
}


/* ============================================================
   FINAL HARD FIX: ONE ACTIVE PROFILE VIDEO SURFACE
   The previous rules allowed the about:blank iframe to sit above #expBgVideo.
   In Show Video Only, direct videos must show #expBgVideo only.
   ============================================================ */
body.exp-profile-video-only-mode #expBgVideo.exp-profile-video-surface.is-playing {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: var(--profile-vh, 100dvh) !important;
  z-index: 22000 !important;
  object-fit: contain !important;
  background: #000 !important;
  filter: none !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expBgEmbedFrame:not(.is-playing),
body.exp-profile-video-only-mode #expBgEmbedFrame[src="about:blank"],
body.exp-profile-video-only-mode #expBgEmbedFrame[src=""] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #exbHandAudioBarOverlay,
body.exp-profile-video-only-mode .exb-hand-audio-bar-overlay {
  z-index: 23500 !important;
  pointer-events: none !important;
}

body.exp-profile-video-only-mode #expVideoTopControls,
body.exp-profile-clean-mode #expVideoTopControls.is-visible {
  z-index: 26000 !important;
  pointer-events: auto !important;
}

body.exp-profile-video-only-mode #expVideoTopControls *,
body.exp-profile-clean-mode #expVideoTopControls.is-visible * {
  pointer-events: auto !important;
}

/* ============================================================
   PROFILE GAMEPLAY FRONT-LAYER FIX
   - Keep clean profile cards/layout.
   - Put MMO gameplay in front, not behind the profile dashboard.
   - Do not hide monsters/drops/projectiles/portals on profile.
   ============================================================ */
body.exp-profile-clean-mode #hqWorld,
body.exp-profile-clean-mode #hqScene {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 700 !important;
}

body.exp-profile-clean-mode #portalLayer,
body.exp-profile-clean-mode #monsterLayer,
body.exp-profile-clean-mode #dropLayer,
body.exp-profile-clean-mode #projectileLayer,
body.exp-profile-clean-mode #playersLayer,
body.exp-profile-clean-mode #damagePopupLayer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

body.exp-profile-clean-mode #portalLayer { z-index: 700 !important; pointer-events: auto !important; }
body.exp-profile-clean-mode #monsterLayer { z-index: 710 !important; }
body.exp-profile-clean-mode #dropLayer { z-index: 720 !important; }
body.exp-profile-clean-mode #projectileLayer { z-index: 730 !important; }
body.exp-profile-clean-mode #playersLayer { z-index: 740 !important; }
body.exp-profile-clean-mode #damagePopupLayer { z-index: 750 !important; }
body.exp-profile-clean-mode #player { z-index: 760 !important; transform-origin: left bottom !important; }
body.exp-profile-clean-mode .player--remote { transform-origin: left bottom !important; }

body.exp-profile-clean-mode .exp-profile-dashboard {
  z-index: 120 !important;
}

body.exp-profile-clean-mode .hq-ground {
  display: block !important;
  visibility: visible !important;
  opacity: .9 !important;
  left: 0 !important;
  right: auto !important;
  min-width: 100vw !important;
  z-index: 690 !important;
  pointer-events: none !important;
}

body.exp-profile-clean-mode .monster--tropi-duck {
  min-width: 0 !important;
  min-height: 0 !important;
}

body.exp-profile-clean-mode .monster-hp {
  transform: translate(-50%, -6px) scale(.82) !important;
}

body.exp-profile-clean-mode .portal {
  transform: translate(-50%, 0) scale(.82) !important;
  transform-origin: center bottom !important;
}

body.exp-map-live-stream .exp-profile-dashboard,
body.exp-map-live-stream .exp-profile-video-grid,
body.exp-map-live-stream .exp-profile-video-card,
body.exp-map-live-stream #expVideoGrid,
body.exp-map-live-stream .exp-video-card,
body.exp-map-live-stream .video-card,
body.exp-map-live-stream [data-video-id],
body.exp-map-live-stream [data-exp-profile-video-id] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   PROFILE HUD + DUCK SIZE FOLLOW-UP
   - Bottom HP/EXP/MP bars must show on profile.
   - Gameplay remains in front of clean profile cards.
   ============================================================ */
body.exp-profile-clean-mode .bottom-bars-hud {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 12px !important;
  z-index: 980 !important;
  pointer-events: none !important;
}
body.exp-profile-clean-mode .bottom-status-bar,
body.exp-profile-clean-mode .bottom-status-bar__track,
body.exp-profile-clean-mode .bottom-status-bar__fill,
body.exp-profile-clean-mode .bottom-status-bar__label,
body.exp-profile-clean-mode .bottom-status-bar__value {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.exp-profile-clean-mode #portalLayer { z-index: 800 !important; }
body.exp-profile-clean-mode #monsterLayer { z-index: 810 !important; }
body.exp-profile-clean-mode #dropLayer { z-index: 820 !important; }
body.exp-profile-clean-mode #projectileLayer { z-index: 830 !important; }
body.exp-profile-clean-mode #playersLayer { z-index: 840 !important; }
body.exp-profile-clean-mode #damagePopupLayer { z-index: 850 !important; }
body.exp-profile-clean-mode #player { z-index: 860 !important; }
body.exp-profile-clean-mode .monster--tropi-duck .monster-hp,
body.exp-profile-clean-mode .monster-hp {
  transform: translate(-50%, -8px) scale(1) !important;
}
@media (max-width: 760px) {
  body.exp-profile-clean-mode .bottom-bars-hud {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
}