/* ShotGram 1.3.7 — computer layout fixes (mouse + wide screen only).
   Phones are not touched by anything in this file. */
@media (min-width: 760px) and (pointer: fine) {
  /* ---- LIVE (viewer): one phone-shaped column in the middle, with the
     host card, chat, buttons and gifts INSIDE it (they were spread over the
     whole screen: host card far left, buttons far right) ---- */
  html body .live-v81.live-watch-screen .live-watch-shell {
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: 50% !important; right: auto !important;
    width: min(100vw, calc(100dvh * 9 / 16)) !important; min-height: 0 !important; height: 100dvh !important;
    transform: translateX(-50%); margin: 0 !important; border-radius: 0; overflow: hidden;
    box-shadow: 0 0 0 100vmax #000;
  }
  html body .live-v81.live-watch-screen .live-watch-player {
    position: absolute !important; inset: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; transform: none;
  }
  html body .live-v81.live-watch-screen .live-watch-side {
    position: absolute !important; inset: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important; max-height: none !important; pointer-events: none;
  }
  html body .live-v81.live-watch-screen .live-watch-side > * { pointer-events: auto; }
  /* chat: left part of the column, clear of the round buttons on the right */
  html body .live-v81.live-watch-screen .live-chat-panel {
    position: absolute !important; left: 12px !important; right: 86px !important; bottom: 14px !important; top: auto !important;
    width: auto !important; max-width: none !important; max-height: 42% !important; margin: 0 !important;
  }
  /* "swipe up for the next LIVE" is a phone hint; on a computer it sat on the chat */
  html body .live-v81.live-watch-screen .sg-swipe-hint { display: none !important; }
}

@media (min-width: 760px) and (pointer: fine) {
  /* ---- clan Majlis: a centred room (seats were spread 300px apart across
     the whole screen and the buttons were 380px wide) ---- */
  html body .majlis {
    left: 50% !important; right: auto !important; width: min(100vw, 620px) !important;
    transform: translateX(-50%); box-shadow: 0 0 0 100vmax #040408;
  }
  html body .majlis .mj-btn { min-width: 0; }
  html body .majlis .mj-seats { grid-template-columns: repeat(4, 1fr) !important; gap: 14px 8px !important; }
}

@media (min-width: 900px) and (pointer: fine) {
  /* ---- Creator studio on a computer: the picture on the left, the controls
     (and, once LIVE, the chat) in a column on the right. The control card
     used to sit on top of the picture and the page could not scroll to it. ---- */
  html body .live-creator-screen.live-v82 .live-room-shell {
    position: fixed !important; inset: 0 !important; display: grid !important;
    grid-template-columns: minmax(0, 1fr) 410px !important; gap: 0 !important;
    padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; height: 100dvh !important;
  }
  html body .live-creator-screen.live-v82 .live-stage {
    position: relative !important; inset: auto !important; grid-column: 1; grid-row: 1;
    width: auto !important; height: 100dvh !important; max-height: none !important; min-height: 0 !important;
    margin: 0 !important; border-radius: 0 !important; overflow: hidden;
  }
  html body .live-creator-screen.live-v82 .live-control-panel {
    position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    transform: none !important; grid-column: 2; grid-row: 1;
    width: auto !important; max-width: none !important; height: 100dvh !important; max-height: none !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 12px !important;
    padding: 18px 16px !important; overflow-y: auto !important; border-radius: 0 !important;
    background: #0b0b12 !important; border: 0 !important; border-inline-start: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: none !important; opacity: 1 !important; visibility: visible !important;
  }
  html body .live-creator-screen.live-v82 .live-control-panel > * { flex: none; margin: 0 !important; }

  /* once LIVE: the set-up is folded away and the chat fills the column */
  html body .live-creator-screen.live-v82.is-on-air .live-control-panel > :is(.live-creator-command-head, .live-mode-tabs, .live-field, .live-category-row, .live-subs-only, .live-creator-readiness) { display: none !important; }
  html body .live-creator-screen.live-v82.is-on-air :is(.live-device-row, .live-beta-note, .obs-intro, .obs-safety, .obs-steps) { display: none !important; }
  html body .live-creator-screen.live-v82.is-on-air #obsCredentials > label { display: none !important; }
  html body .live-creator-screen.live-v82 #creatorLiveSocial:not(.hidden) {
    position: static !important; inset: auto !important; transform: none !important; width: auto !important; max-width: none !important;
    flex: 1 1 auto !important; min-height: 260px !important; display: flex !important; flex-direction: column !important;
    background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important; padding: 10px !important;
  }
  html body .live-creator-screen.live-v82 #creatorLiveSocial .live-creator-chat {
    flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; height: auto !important; overflow-y: auto !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important;
  }
  html body .live-creator-screen.live-v82 #creatorLiveSocial .live-creator-chat > :first-child { margin-top: auto !important; }
  html body .live-creator-screen.live-v82 #creatorLiveSocial .live-creator-chat-form { position: static !important; margin-top: 8px !important; }

  /* streaming from OBS: no camera buttons, and the picture is your broadcast */
  html body .live-creator-screen.live-v82.src-obs :is(#flipLive, #sgLiveQuick, #livePreview, #liveFxBtn) { display: none !important; }
  html body .live-creator-screen.live-v82 .obs-preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; background: #000; }
  html body .live-creator-screen.live-v82.src-obs.is-on-air .live-empty-preview { display: none !important; }
}

/* ---- a WIDE broadcast (PC / OBS) ---- */
.live-rotate-btn { display: none; }
@media (pointer: coarse) {
  /* phone: the whole picture, centred, with a "Full screen" button under it */
  /* phone: a small full-screen icon in the picture's bottom-right corner (like YouTube) */
  html body .src-wide .live-rotate-btn {
    display: grid; place-items: center; position: absolute; z-index: 9;
    inset-inline-end: 10px; inset-inline-start: auto; left: auto; right: 10px; top: calc(50% + 28.2vw - 46px);
    width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 0;
    background: rgba(0,0,0,.5); color: #fff; pointer-events: auto;
  }
  html body .src-wide .live-rotate-btn svg { width: 18px; height: 18px; }
  html body .src-wide.is-rotated .live-rotate-btn { top: auto; bottom: calc(var(--sa-b, 0px) + 16px); right: 16px; }
  /* sideways full screen: only the picture (and the way back) */
  html body .src-wide.is-rotated :is(.ltt-chat-slot, .ltt-chat, .ltt-bottom, .ltt-right, .ltt-bar, .lg-tiles, .live-watch-side, .sg-swipe-hint) { opacity: 0 !important; pointer-events: none !important; }
}
@media (min-width: 900px) and (pointer: fine) {
  /* computer: the game / screen big on the left, the chat in a column on the right (like Twitch) */
  html body .live-v81.live-watch-screen.src-wide .live-watch-shell {
    left: 0 !important; transform: none !important; width: 100vw !important; box-shadow: none;
  }
  html body .live-v81.live-watch-screen.src-wide .live-watch-player { right: 380px !important; width: auto !important; }
  html body .live-v81.live-watch-screen.src-wide .live-watch-player :is(video, iframe) {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important;
  }
  html body .live-v81.live-watch-screen.src-wide .live-watch-side {
    left: auto !important; right: 0 !important; width: 380px !important; background: #0b0b12 !important;
    border-inline-start: 1px solid rgba(255,255,255,.08) !important; pointer-events: auto;
  }
  html body .live-v81.live-watch-screen.src-wide .live-watch-side .live-watch-meta { left: 14px !important; right: 14px !important; top: 14px !important; max-width: none !important; }
  html body .live-v81.live-watch-screen.src-wide .live-chat-panel { left: 12px !important; right: 12px !important; top: 80px !important; bottom: 14px !important; max-height: none !important; display: flex !important; flex-direction: column !important; }
  html body .live-v81.live-watch-screen.src-wide #liveChatList { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; }
  html body .live-v81.live-watch-screen.src-wide #liveChatList > :first-child { margin-top: auto !important; }
  html body .live-v81.live-watch-screen.src-wide .live-chat-panel .live-chat-list,
  html body .live-v81.live-watch-screen.src-wide .live-chat-panel #liveChatList { mask-image: none !important; -webkit-mask-image: none !important; }
}

/* challenge: the "waiting · 45s" line is shown on phones too */
html body .live-battle-bar[data-status=pending] .live-battle-state small.lb-sub { display: block !important; font-size: 11px; color: #c9cce8; }
@media (min-width: 900px) and (pointer: fine) {
  /* challenge bar + opponent video sit on the picture, not under the page */
  html body .live-creator-screen.live-v82 .live-room-shell > .live-battle-bar {
    position: absolute !important; grid-column: 1; grid-row: 1; top: 142px !important; left: 16px !important; right: 426px !important; z-index: 12;
  }
  html body .live-creator-screen.live-v82 .live-room-shell > .live-battle-opponent {
    position: absolute !important; grid-column: 1; grid-row: 1; top: 214px !important; right: 426px !important; width: 30% !important; max-width: 420px !important; height: 40% !important;
  }
}

@media (min-width: 900px) and (pointer: fine) {
  /* OBS: a calm note on the picture until your broadcast appears */
  html body .live-creator-screen.live-v82.src-obs.is-on-air .live-stage::before {
    content: "Your broadcast will show here in a few seconds"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    color: rgba(255,255,255,.55); font-size: 14px; font-weight: 600; white-space: nowrap; z-index: 0;
  }
  html[lang="ar"] body .live-creator-screen.live-v82.src-obs.is-on-air .live-stage::before { content: "بثّك بيظهر هنا خلال ثواني"; }
  html body .live-creator-screen.live-v82 .obs-preview { z-index: 1; }
}
@media (min-width: 900px) and (pointer: fine) {
  html body .live-creator-screen.live-v82 #startLiveBtn { width: 100% !important; margin-top: 4px !important; }
}

/* ---- ShotGram Studio (computer) ----
   1.3.9.1 — refreshed: one calm blue, larger readable controls, a "ready"
   strip, camera size / mirror, and a quality summary. */
.sgs { display: grid; gap: 12px; }
.sgs-label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8f9bb8; margin-top: 6px; }
.sgs-ready { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(63,146,255,.07); border: 1px solid rgba(63,146,255,.18); }
.sgs-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 14px; font-size: 12.5px; font-weight: 700; color: #8f9bb8; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.sgs-chip i { width: 8px; height: 8px; border-radius: 50%; background: #5b6478; }
.sgs-chip.on { color: #eaf2ff; border-color: rgba(63,146,255,.5); background: rgba(63,146,255,.16); }
.sgs-chip.on i { background: #3f92ff; box-shadow: 0 0 0 3px rgba(63,146,255,.25); }
.sgs-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sgs-layouts button { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 8px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03); color: #d7dcee; font: 700 13px/1.25 inherit; cursor: pointer; text-align: center; min-height: 108px; }
.sgs-layouts button small { font-size: 11px; font-weight: 500; color: #8f9bb8; }
.sgs-layouts button:hover { border-color: rgba(63,146,255,.4); }
.sgs-layouts button.active { border: 1.5px solid #3f92ff; background: rgba(63,146,255,.12); color: #fff; }
.sgs-layouts button.active small { color: #b9d4ff; }
.sgs-lay { display: grid; gap: 2px; border-radius: 4px; background: #1b2438; border: 1px solid rgba(255,255,255,.22); }
.sgs-lay.v { width: 26px; height: 46px; grid-template-rows: 1fr 1fr 1.2fr; padding: 2px; }
.sgs-lay.v b:nth-child(1) { background: #6fb0ff; border-radius: 2px; } .sgs-lay.v b:nth-child(2) { background: #3f92ff; border-radius: 2px; }
.sgs-lay.w { width: 62px; height: 36px; position: relative; background: #3f92ff55; }
.sgs-lay.w b { position: absolute; right: 3px; bottom: 3px; width: 17px; height: 11px; background: #6fb0ff; border-radius: 2px; }
.sgs-lay.c { width: 62px; height: 36px; background: #6fb0ff77; }
.sgs-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.sgs-row .grow { display: grid; gap: 5px; min-width: 0; }
.sgs-row b { font-size: 14.5px; }
.sgs-row small { font-size: 12.5px; color: #a3aec7; }
.sgs-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(63,146,255,.16); color: #cfe3ff; }
.sgs-ico svg { width: 19px; height: 19px; }
.sgs-select { width: 100%; max-width: 280px; background: #121a2a; color: #e4eaf7; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 6px 8px; font-size: 13px; }
.sgs-row input[type=range] { width: 100%; accent-color: #3f92ff; }
.sgs-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); font-size: 13.5px; color: #d3d9ea; }
.sgs-opt[hidden] { display: none; }
.sgs-quality span { font-variant-numeric: tabular-nums; color: #a3aec7; }
.sgs-seg { display: inline-flex; gap: 6px; flex: none; }
.sgs-seg button { min-width: 42px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: #d7dcee; cursor: pointer; font: 700 12.5px inherit; }
.sgs-seg button.active { background: #3f92ff; border-color: #3f92ff; color: #fff; }
.sgs-tip { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: #9aa6c0; }
.obs-safety.obs-tip { border-color: rgba(63,146,255,.35); background: rgba(63,146,255,.1); color: #cfe3ff; }
@media (min-width: 900px) and (pointer: fine) {
  html body .live-creator-screen.live-v82.is-computer :is(.live-creator-readiness, #sgLiveQuick, #flipLive, #liveFxBtn) { display: none !important; }
  html body .live-creator-screen.live-v82.is-computer #livePreview { object-fit: contain !important; transform: none !important; background: #000; }
  html body .live-creator-screen.live-v82.is-on-air .sgs :is(.sgs-tip, .sgs-quality, .sgs-label) { display: none !important; }
}
/* v1.3.8 — studio sound meters: see that the mic and the game really reach the LIVE */
.sgs-meter { display: inline-block; vertical-align: middle; width: 46px; height: 4px; margin-inline-start: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.sgs-meter > i { display: block; height: 100%; background: #2f8cff; transform: scaleX(.02); transform-origin: left; transition: transform .1s linear; }
[dir="rtl"] .sgs-meter > i { transform-origin: right; }
.sgs-meter.is-live > i { background: #34d399; }