/* Steam Custom Info Box preview — defaults from live Steam public CSS.
   Live calibration overrides these via CSS variables. */

:root {
  /* Emoji faces before symbol faces: 🏳️‍⚧️ is a ZWJ sequence; Apple Symbols would
     otherwise paint lone ⚧. Motiva has neither emoji nor Block Elements. */
  --steam-font: "Motiva Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", Arial, Helvetica, sans-serif;
  --steam-body-size: 13px;
  --steam-body-line: normal;
  --steam-text: rgb(150, 150, 150);
  --steam-body-padding: 8px;
  --steam-body-bg: rgba(0, 0, 0, 0.3);
  --steam-body-radius: 5px;
  --steam-block-padding: 20px 10px 11px 10px;
  --steam-container-bg: rgba(0, 0, 0, 0.3);
  --steam-content-width: 652px;
  --preview-width: 652px;
  --steam-visual-width: 616px;

  --steam-h1-size: 20px;
  --steam-h1-line: 23px;
  --steam-h1-weight: 400;
  --steam-h1-color: #5aa9d6;
  --steam-h1-margin: 0 0 10px 0;
  --steam-h1-padding: 0;
  --steam-h1-border: 1px dotted #666666;

  --steam-h2-size: 18px;
  --steam-h2-line: 21px;
  --steam-h2-color: #5aa9d6;

  --steam-h3-size: 16px;
  --steam-h3-line: 19px;
  --steam-h3-color: #5aa9d6;

  --steam-title-size: 16px;
  --steam-title-line: 30px;
  --steam-title-padding: 5px 10px;
  --steam-title-color: #ffffff;
  --steam-title-weight: 200;
  --steam-title-bg: linear-gradient(90deg, rgba(120, 92, 20, 0.69) 0%, rgba(53, 28, 22, 0.76) 90%);
  --steam-stage-wash-color: rgba(39, 27, 16, 0.5);
  --steam-stage-bg:
    radial-gradient(farthest-side at 100% 0%, rgba(253, 219, 51, 0.23), rgba(0, 0, 0, 0) 500px),
    radial-gradient(at 0% 0%, rgb(97, 75, 37), rgba(0, 0, 0, 0) 600px),
    radial-gradient(at 100% 100%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 500px),
    radial-gradient(at 0% 100%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 600px);

  --steam-hr-height: 0px;
  --steam-hr-border: 1px inset rgb(128, 128, 128);
  --steam-hr-color: rgb(128, 128, 128);
  --steam-hr-margin: 6.5px 0;

  --steam-emote-size: 18px;
  --steam-emote-valign: text-bottom;
  --steam-link: #80bcd2;
}

/* Motiva Sans — Steam CDN only; never redistribute files.
   Motiva has NO Block Elements (U+2580–259F). Those glyphs are what make
   decorative ▂ ▃ ▅ ▆ showcase bars. Without an explicit symbol face, browsers
   fall through to Arial and the stairs look short/jittery vs the Steam client
   (which falls back to Apple Symbols / Segoe UI Symbol).
   See: Motiva cmap has underscore but 0 glyphs in U+2580–259F; community
   guides recommend Noto/Apple/Segoe symbol fonts for Steam Unicode art.
   unicode-range skips U+200D (ZWJ) so Motiva cannot claim the joiner inside
   emoji sequences like 🏳️‍⚧️ and break color-emoji shaping. */
@font-face {
  font-family: "Motiva Sans";
  src: url("https://community.fastly.steamstatic.com/public/shared/fonts/MotivaSans-Regular.ttf?v=4.015") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Basic Latin + Latin-1 + Latin Extended — excludes Block Elements + ZWJ */
  unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF, U+2000-200C, U+200E-206F, U+20A0-20CF;
}
@font-face {
  font-family: "Motiva Sans";
  src: url("https://community.fastly.steamstatic.com/public/shared/fonts/MotivaSans-Light.ttf?v=4.015") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF, U+2000-200C, U+200E-206F, U+20A0-20CF;
}
@font-face {
  font-family: "Motiva Sans";
  src: url("https://community.fastly.steamstatic.com/public/shared/fonts/MotivaSans-Thin.ttf?v=4.015") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF, U+2000-200C, U+200E-206F, U+20A0-20CF;
}
@font-face {
  font-family: "Motiva Sans";
  src: url("https://community.fastly.steamstatic.com/public/shared/fonts/MotivaSans-Medium.ttf?v=4.015") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF, U+2000-200C, U+200E-206F, U+20A0-20CF;
}
@font-face {
  font-family: "Motiva Sans";
  src: url("https://community.fastly.steamstatic.com/public/shared/fonts/MotivaSans-Bold.ttf?v=4.015") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+1E00-1EFF, U+2000-200C, U+200E-206F, U+20A0-20CF;
}

/* Same family name + Block Elements range → Steam-client-like symbol fallback */
@font-face {
  font-family: "Motiva Sans";
  src: local("Apple Symbols"), local("Segoe UI Symbol"), local("Noto Sans Symbols"), local("Noto Sans Symbols 2");
  font-weight: 100 900;
  font-style: normal;
  unicode-range: U+2580-259F;
}

.steam-stage {
  position: relative;
  isolation: isolate;
  padding: 22px;
  min-height: 640px;
  overflow: auto;
  background: #000;
}

.steam-stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
}

.steam-stage-video.hidden {
  display: none;
}

.steam-stage-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--steam-stage-wash-color, rgba(39, 27, 16, 0.5));
  background-image: var(--steam-stage-bg);
  background-repeat: no-repeat;
  background-size: auto;
}

.steam-stage > .showcase {
  position: relative;
  z-index: 2;
}

.showcase {
  /* Never shrink below Steam's measured column — squishing wraps decorative H1 bars. */
  width: var(--preview-width, var(--steam-content-width));
  min-width: var(--preview-width, var(--steam-content-width));
  max-width: none;
  margin: 0 auto 12px;
  background: var(--steam-container-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 3px;
  overflow: hidden;
  color: var(--steam-text);
  font-size: var(--steam-body-size);
  font-family: var(--steam-font);
  line-height: var(--steam-body-line);
  box-shadow: none;
}

/* Steam: .profile_customization_block wraps the notes panel */
.profile_customization_block {
  padding: var(--steam-block-padding, 20px 10px 11px 10px);
  box-sizing: border-box;
}

.customtext_showcase {
  display: block;
}

.showcase-title,
.profile_customization_header {
  font-family: var(--steam-font);
  font-weight: var(--steam-title-weight, 200);
  background: var(--steam-title-bg);
  padding: var(--steam-title-padding);
  color: var(--steam-title-color);
  font-size: var(--steam-title-size);
  line-height: var(--steam-title-line);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.showcase-body,
.showcase_notes,
.showcase_content_bg {
  min-height: 0;
  padding: var(--steam-body-padding);
  background: var(--steam-body-bg);
  color: var(--steam-text);
  font-family: var(--steam-font);
  font-size: var(--steam-body-size);
  line-height: var(--steam-body-line);
  border-radius: var(--steam-body-radius, 5px);
  /* Steam does NOT use pre-wrap; newlines are <br> in the render tree */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: content-box;
}

/* Headings — match Steam div.bb_h1 */
.bb_h1, .bb-h1,
.visual-editor .bb_h1 {
  display: block;
  font-size: var(--steam-h1-size);
  line-height: var(--steam-h1-line);
  color: var(--steam-h1-color);
  font-weight: var(--steam-h1-weight);
  margin: var(--steam-h1-margin);
  padding: var(--steam-h1-padding);
  border-bottom: var(--steam-h1-border);
  clear: both;
  font-family: var(--steam-font);
  overflow-wrap: break-word;
  word-break: normal;
}

/* Decorative underscore/block bars must stay one line at Steam width (652/616).
   If the pane is too narrow, the stage scrolls — we do not reflow these glyphs. */
.showcase-body .bb_h1,
.showcase_notes .bb_h1 {
  white-space: nowrap;
  overflow-x: hidden;
}

/* Bold inside headings — Motiva Bold, no tracking hacks */
.bb_h1 b, .bb_h1 strong,
.bb-h1 b, .bb-h1 strong,
.showcase-body b, .showcase-body strong,
.visual-editor b, .visual-editor strong {
  font-weight: 700;
  font-family: var(--steam-font);
  letter-spacing: normal;
}

/* Force color-emoji faces for ZWJ runs (🏳️‍⚧️). Without this, Safari may
   shape through Apple Symbols and show a lone ⚧ gender symbol. */
.bb_emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  line-height: 1;
  letter-spacing: normal;
}

.bb_h2, .bb-h2,
.visual-editor .bb_h2 {
  display: block;
  color: var(--steam-h2-color);
  margin: 8px 0 6px;
  font-size: var(--steam-h2-size);
  line-height: var(--steam-h2-line);
  font-weight: 400;
  clear: both;
  font-family: var(--steam-font);
}

.bb_h3, .bb-h3,
.visual-editor .bb_h3 {
  display: block;
  color: var(--steam-h3-color);
  margin: 8px 0 6px;
  font-size: var(--steam-h3-size);
  line-height: var(--steam-h3-line);
  font-weight: 300;
  clear: both;
  font-family: var(--steam-font);
}

.bb-hr, .showcase-body hr, .visual-editor hr {
  /* Steam uses the UA inset border hr — not a filled 1px background bar */
  display: block;
  unicode-bidi: isolate;
  border: var(--steam-hr-border, 1px inset rgb(128, 128, 128));
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  background: transparent;
  background-color: transparent;
  margin: var(--steam-hr-margin, 6.5px 0);
  color: var(--steam-hr-color, rgb(128, 128, 128));
  overflow: hidden;
  box-sizing: content-box;
}

/* Match Steam img.emoticon exactly */
img.emoticon,
.emoticon {
  vertical-align: var(--steam-emote-valign, text-bottom);
  height: var(--steam-emote-size, 18px);
  width: var(--steam-emote-size, 18px);
  border: 0;
  margin: 0;
  padding: 0;
  display: inline;
}
img.emoticon.emoticon-missing {
  outline: 1px dotted rgba(255, 190, 94, .7);
}

.steam-link, a.bb_link, .showcase-body a {
  color: var(--steam-link);
  text-decoration: none;
}
.steam-link:hover, a.bb_link:hover, .showcase-body a:hover {
  text-decoration: underline;
}

.bb-spoiler, .bb_spoiler {
  color: transparent;
  background: #000;
  border-radius: 2px;
  padding: 0 .15em;
  text-shadow: none;
  cursor: pointer;
}
.bb-spoiler:hover, .bb-spoiler:focus,
.bb_spoiler:hover, .bb_spoiler:focus {
  color: var(--steam-text);
}

/* Steam emits underscore class names (bb_quote / bb_code); the hyphenated
   aliases stay for older pasted markup. */
.bb_quote, .bb-quote {
  display: block;
  border: 1px solid #56707f;
  border-radius: 3px;
  padding: 12px;
  margin: 8px 0;
  font-size: 92%;
}

.bb_code, .bb-code {
  display: block;
  border: 1px solid #535354;
  border-radius: 3px;
  padding: 12px;
  margin: 8px 0;
  font-size: 11px;
  font-family: Consolas, monospace;
  white-space: pre-wrap;
  overflow-x: auto;
  background: rgba(0, 0, 0, .35);
  color: var(--steam-text);
}

/* Visual editor: same content width + padding as Steam notes so bars match preview */
.visual-editor {
  box-sizing: content-box;
  width: var(--steam-visual-width, 616px);
  min-width: var(--steam-visual-width, 616px);
  max-width: none;
  min-height: 520px;
  max-height: 72vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--steam-text);
  padding: var(--steam-body-padding, 8px);
  outline: none;
  font-family: var(--steam-font);
  font-size: var(--steam-body-size);
  line-height: var(--steam-body-line);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  caret-color: white;
}

.visual-editor .bb_h1 {
  white-space: nowrap;
  overflow-x: hidden;
}