/* FEAR Squad V3.16, preserved from the stylesheet served by fearsquad.ca on 2026-09-21. */
:root { --fear-portal-header-height: 142px; }
.fear-portal-utility { height: 24px !important; }
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell { height: 118px !important; grid-template-rows: 72px 46px !important; }
html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link { width: 280px !important; height: 72px !important; }
html body[data-fear-redesign="portal-v3"] header.nav .fear-header-wordmark-img { width: 275px !important; }
@media (min-width: 901px) {
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu { height: 46px !important; }
  html body.fear-portal-scrolled[data-fear-redesign="portal-v3"] header.nav.fear-portal-header { transform: translateY(-96px) !important; }
}
@media (max-width: 900px) {
  :root { --fear-portal-header-height: 64px; }
  html body[data-fear-redesign="portal-v3"] { padding-top: 64px !important; }
  html body[data-fear-redesign="portal-v3"] header.nav.fear-portal-header, html body.fear-portal-scrolled[data-fear-redesign="portal-v3"] header.nav.fear-portal-header { height: 64px !important; transform: none !important; }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell { height: 64px !important; display: flex !important; }
  html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link { flex: 0 1 190px !important; width: 190px !important; height: 62px !important; }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-header-wordmark-img { width: 185px !important; }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-toggle { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu, html body[data-fear-redesign="portal-v3"] header.nav #fear-navigation { inset: 64px 0px 0px !important; height: calc(100dvh - 64px) !important; max-height: calc(100dvh - 64px) !important; }
}
@media (max-width: 360px) {
  html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link { flex-basis: 180px !important; width: 180px !important; }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-header-wordmark-img { width: 176px !important; }
}

/* V3.18: reference masthead lighting, no crest or central lettering. */
html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link,
html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-reference-crest,
html body[data-fear-redesign="portal-v3"] header.nav .fear-reference-identity,
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-utility-center {
  display:none!important;
}

html body[data-fear-redesign="portal-v3"] header.nav.fear-portal-header {
  background-color:#080a0b!important;
  background-image:
    linear-gradient(180deg,rgba(6,9,10,.20),rgba(1,2,3,.64)),
    url('../img/ui-charred-rock-nav-v14.webp')!important;
  background-position:center,center 48%!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat!important;
  border-bottom:1px solid rgba(226,176,67,.72)!important;
  box-shadow:0 2px 0 #030506,0 8px 22px #000!important;
}

html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-utility {
  position:relative!important;
  background-image:linear-gradient(180deg,rgba(25,30,32,.74),rgba(3,5,6,.9)),url('../img/ui-charred-rock-nav-v14.webp')!important;
  border-bottom:1px solid rgba(178,188,185,.4)!important;
}
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-utility::after {
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-utility-inner {
  justify-content:space-between!important;
}

/* Glowing metal seam between the empty stone masthead and beveled tabs. */
@media (min-width:901px) {
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell::after {
    display:block!important;
    content:"";
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    bottom:45px;
    height:2px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent 0%,rgba(163,133,73,.6) 11%,rgba(255,240,178,.92) 31%,rgba(145,157,158,.52) 63%,transparent 100%);
    box-shadow:0 1px 7px rgba(234,177,79,.58),0 -4px 16px rgba(244,193,98,.21);
  }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu {
    border:1px solid #4b5758!important;
    border-bottom:2px solid #b58737!important;
    background:linear-gradient(180deg,rgba(44,51,54,.98),rgba(12,17,19,.98) 25%,rgba(3,6,7,.98))!important;
    box-shadow:inset 0 1px rgba(240,249,244,.24),inset 0 -1px #000,0 5px 15px rgba(0,0,0,.9)!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-links > a,
  html body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-toggle {
    border:1px solid #485153!important;
    border-bottom-color:#1b2123!important;
    border-radius:3px 3px 1px 1px!important;
    color:#d9dfe0!important;
    background:linear-gradient(180deg,rgba(61,70,72,.55),rgba(19,25,27,.95) 22%,rgba(5,9,11,.99) 100%)!important;
    box-shadow:inset 0 1px rgba(209,221,218,.22),inset 0 -1px rgba(0,0,0,.9)!important;
    text-transform:uppercase!important;
    letter-spacing:.055em!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-links > a:hover,
  html body[data-fear-redesign="portal-v3"] header.nav .nav-links > a[aria-current="page"],
  html body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-toggle:hover,
  html body[data-fear-redesign="portal-v3"] header.nav .fear-nav-more-toggle[aria-expanded="true"] {
    color:#fff0ce!important;
    border-color:#b98a42!important;
    background:radial-gradient(ellipse 95px 15px at 50% 0,rgba(255,225,144,.31),transparent 85%),linear-gradient(180deg,#3a3224,#171918 48%,#080a0b)!important;
    box-shadow:inset 0 1px rgba(255,239,191,.65),inset 0 -2px #dfb555,0 0 14px rgba(224,157,44,.31)!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-links .fear-nav-icon {
    display:none!important;
  }
}

/* The animated logo retains its existing artwork and frame on true black. */
html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage,
html body[data-fear-redesign="portal-v3"] .fear-global-brand-hero {
  background-color:#000!important;
  background-image:none!important;
}
html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage::before,
html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage::after {
  background-image:none!important;
}
html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage video,
html body[data-fear-redesign="portal-v3"] .fear-global-brand-video {
  background:#000!important;
  mix-blend-mode:normal!important;
}

/* A restrained edge light on existing panel header artwork. */
html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head {
  box-shadow:inset 0 1px rgba(255,232,178,.23),inset 80px 0 60px -85px rgba(240,181,66,.46),0 1px rgba(176,132,50,.32)!important;
}

@media(max-width:900px) {
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell { justify-content:flex-end!important; }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-toggle { margin-left:auto!important; }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-utility::after { display:none!important; }
}

@media(prefers-reduced-motion:no-preference) {
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-utility::after {
    animation:fear-reference-glint 7s ease-in-out infinite alternate;
  }
  @keyframes fear-reference-glint {
    from { opacity:.72;filter:brightness(.83); }
    to { opacity:1;filter:brightness(1.2); }
  }
}

/* V3.19 — an operator on the left and the dimensional FEAR mark at the light. */
html body[data-fear-redesign="portal-v3"] header.nav.fear-portal-header {
  background-color:#050607!important;
  background-image:
    linear-gradient(180deg,rgba(2,4,5,.08),rgba(1,2,3,.42)),
    url('../img/ui-charred-rock-nav-v14.webp')!important;
  background-size:cover,cover!important;
}
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell {
  isolation:isolate;
}
html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link {
  display:block!important;
  position:absolute!important;
  grid-area:auto!important;
  top:1px!important;
  left:50%!important;
  width:220px!important;
  height:71px!important;
  max-width:none!important;
  flex:none!important;
  padding:0!important;
  overflow:hidden!important;
  transform:translateX(-50%)!important;
  z-index:5!important;
  background-color:transparent!important;
  background-image:url('../img/fear-emblem-3d-nav-v19.webp')!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  background-size:auto 70px!important;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 9px rgba(220,158,52,.28));
}
html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link:focus-visible {
  outline:2px solid #f3c86f!important;
  outline-offset:-3px;
}
html body[data-fear-redesign="portal-v3"] header.nav .fear-header-wordmark-img {
  display:none!important;
}

/* Only the masthead receives the operator, so links stay clear below it. */
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell::before {
  content:"";
  display:block!important;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:min(56vw,690px);
  height:72px;
  background:url('../img/fear-tactical-nav-v19.webp') left 24% / auto 250px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 27%,rgba(0,0,0,.78) 52%,transparent 98%);
  mask-image:linear-gradient(90deg,#000 0%,#000 27%,rgba(0,0,0,.78) 52%,transparent 98%);
  pointer-events:none;
}
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-platforms {
  position:relative!important;
  z-index:3!important;
}

@media(max-width:900px) {
  html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link {
    display:block!important;
    top:0!important;
    left:50%!important;
    width:160px!important;
    height:64px!important;
    flex:none!important;
    background-size:auto 62px!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell::before {
    top:0;
    width:min(65vw,280px);
    height:64px;
    background-size:auto 185px;
    background-position:left 24%;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 35%,transparent 98%);
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 35%,transparent 98%);
  }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell::after {
    content:none!important;
    display:none!important;
    background:none!important;
    box-shadow:none!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-toggle {
    position:relative!important;
    z-index:8!important;
    background:linear-gradient(180deg,#1c2122,#060809)!important;
    border:1px solid rgba(207,158,68,.78)!important;
    box-shadow:inset 0 1px rgba(251,225,157,.17),0 0 11px rgba(0,0,0,.8)!important;
  }
}

@media(max-width:360px) {
  html body[data-fear-redesign="portal-v3"] header.nav .brand.fear-header-wordmark-link {
    width:145px!important;
    background-size:auto 58px!important;
  }
}

/* ==============================================================
   FEAR SHOUTBOX — username FX readability + larger square avatars
   2026-09-27
   Scoped to #shoutbox only so profile/member-page FX stay untouched.
   ============================================================== */
body[data-fear-redesign="portal-v3"] #shoutbox .shout{
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:12px!important;
  min-height:76px!important;
  align-items:start!important;
  padding:10px 6px!important;
}

body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  border-radius:5px!important;
  align-self:start!important;
  overflow:hidden!important;
  border:1px solid rgba(213,166,59,.62)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 4px 14px rgba(0,0,0,.38)!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:4px!important;
}

/* Give animated username FX their own layer.  The effect can still drip/glow,
   but the actual shout text is painted above it instead of underneath it. */
body[data-fear-redesign="portal-v3"] #shoutbox .shout-body{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  padding-top:2px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout .meta,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-author{
  position:relative!important;
  z-index:2!important;
  overflow:visible!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout .meta{
  min-height:22px!important;
  margin-bottom:7px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-author .uname,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-author .uname-text{
  font-size:11px!important;
  line-height:1.2!important;
  overflow:visible!important;
}

/* Readability shield: dark only directly behind message text. It does NOT
   disable the red water/blood-drip animation; it keeps the letters readable. */
body[data-fear-redesign="portal-v3"] #shoutbox .msg{
  position:relative!important;
  z-index:50!important;
  display:block!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:4px 6px!important;
  border-radius:3px!important;
  background:linear-gradient(90deg,rgba(5,7,8,.94) 0%,rgba(5,7,8,.86) 72%,rgba(5,7,8,.36) 100%)!important;
  color:#d7dcda!important;
  text-shadow:0 1px 2px #000!important;
  line-height:1.42!important;
}

/* Keep reactions/menu above any oversized username animation layers too. */
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reactions,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-menu-wrap{
  position:relative!important;
  z-index:60!important;
}

@media(max-width:600px){
  body[data-fear-redesign="portal-v3"] #shoutbox .shout{
    grid-template-columns:56px minmax(0,1fr)!important;
    gap:10px!important;
    min-height:74px!important;
    padding:10px 4px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .msg{
    font-size:10px!important;
    line-height:1.45!important;
  }
}

/* ==============================================================
   FEAR SHOUTBOX — cinematic identity rail + hold-to-react UI
   2026-09-27
   ============================================================== */
body[data-fear-redesign="portal-v3"] #shoutbox .shout{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:14px!important;
  min-height:124px!important;
  align-items:start!important;
  padding:14px 40px 14px 10px!important;
  overflow:visible!important;
}

body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile{
  position:relative!important;
  width:88px!important;
  min-width:88px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:visible!important;
  isolation:isolate!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile::before{
  content:"";
  position:absolute;
  inset:-4px -4px 20px;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(229,181,67,.12),transparent 24%),
    radial-gradient(ellipse at 50% 18%,rgba(229,181,67,.10),transparent 60%);
  border-top:1px solid rgba(229,181,67,.25);
  opacity:.9;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile::after{
  content:"";
  width:54px;
  height:1px;
  margin-top:-4px;
  background:linear-gradient(90deg,transparent,rgba(229,181,67,.72),transparent);
  box-shadow:0 0 9px rgba(229,181,67,.18);
  pointer-events:none;
}

body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .shout-avatar{
  position:relative!important;
  width:84px!important;
  height:84px!important;
  min-width:84px!important;
  margin:0!important;
  border-radius:2px!important;
  border:1px solid rgba(232,185,35,.72)!important;
  background:#060808!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -22px 34px rgba(0,0,0,.24),
    0 0 0 2px rgba(0,0,0,.80),
    0 9px 24px rgba(0,0,0,.50),
    0 0 18px rgba(229,181,67,.08)!important;
  overflow:hidden!important;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .shout-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:0!important;
  transform:scale(1.025);
}

/* Move the live username FX under the portrait. We move the real node in JS,
   rather than cloning it, so premium/vault animation layers keep working. */
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author{
  position:relative!important;
  z-index:4!important;
  width:88px!important;
  max-width:88px!important;
  min-height:18px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-size:9.5px!important;
  line-height:1.15!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname-text{
  max-width:78px!important;
  font-size:9.5px!important;
  line-height:1.15!important;
  text-align:center!important;
  white-space:nowrap!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .admin{
  flex:0 0 auto!important;
  font-size:7px!important;
}

body[data-fear-redesign="portal-v3"] #shoutbox .shout-body{
  position:relative!important;
  z-index:5!important;
  min-width:0!important;
  padding:5px 0 0!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout .meta{
  min-height:16px!important;
  margin:0 0 8px!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding-right:2px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout .meta:empty{display:none!important}
body[data-fear-redesign="portal-v3"] #shoutbox .time{
  font-size:7.5px!important;
  letter-spacing:.18em!important;
  color:#747d7a!important;
}

/* Keep message copy clean and readable while the username FX is allowed to be dramatic. */
body[data-fear-redesign="portal-v3"] #shoutbox .msg{
  position:relative!important;
  z-index:50!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:5px 7px!important;
  border-radius:2px!important;
  background:linear-gradient(90deg,rgba(5,7,8,.96) 0%,rgba(5,7,8,.86) 74%,rgba(5,7,8,.24) 100%)!important;
  color:#e0e4e2!important;
  font-size:10px!important;
  line-height:1.48!important;
  text-shadow:0 1px 2px #000!important;
}

/* Reactions: existing reactions remain visible, but the + control is removed.
   On touch devices a press-and-hold on the message opens the existing picker. */
body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add{
  display:none!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap:not(.is-picker-open){
  width:0!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
  position:absolute!important;
  left:104px!important;
  right:40px!important;
  bottom:12px!important;
  z-index:190!important;
  width:auto!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open>.fear-reaction-picker{
  position:static!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,34px)!important;
  gap:5px!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:7px!important;
  border:1px solid rgba(239,189,73,.58)!important;
  border-radius:3px!important;
  background:linear-gradient(180deg,#111516,#050707)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.035)!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout.fear-reaction-active{
  padding-bottom:64px!important;
  z-index:180!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout.fear-longpress-arming{
  background:linear-gradient(90deg,rgba(229,181,67,.035),transparent 65%)!important;
}

/* Three-dot menu: fixed back to the top-right of each message. The previous
   readability override accidentally changed this wrapper to position:relative. */
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-menu-wrap{
  position:absolute!important;
  top:10px!important;
  right:8px!important;
  z-index:210!important;
  width:30px!important;
  height:30px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-menu-toggle{
  width:30px!important;
  height:30px!important;
  border:1px solid transparent!important;
  border-radius:3px!important;
  background:rgba(7,9,9,.64)!important;
  color:#69716f!important;
  font-size:12px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-menu-toggle:hover,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-menu-toggle[aria-expanded="true"]{
  border-color:rgba(229,181,67,.30)!important;
  background:#0d1111!important;
  color:#e8b923!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-menu{
  top:32px!important;
  right:0!important;
  z-index:220!important;
  min-width:154px!important;
  padding:6px!important;
  border:1px solid rgba(229,181,67,.42)!important;
  background:#070a0a!important;
  box-shadow:0 16px 36px rgba(0,0,0,.78)!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-menu-wrap.fear-menu-up .fear-shout-menu{
  top:auto!important;
  bottom:32px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout.fear-menu-open{
  z-index:205!important;
}

@media(max-width:600px){
  body[data-fear-redesign="portal-v3"] #shoutbox .shout{
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:12px!important;
    min-height:122px!important;
    padding:13px 36px 13px 8px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile{
    width:84px!important;
    min-width:84px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .shout-avatar{
    width:80px!important;
    height:80px!important;
    min-width:80px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author{
    width:84px!important;
    max-width:84px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname,
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname-text{
    max-width:74px!important;
    font-size:9px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .msg{
    font-size:10px!important;
    line-height:1.5!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
    left:100px!important;
    right:6px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open>.fear-reaction-picker{
    grid-template-columns:repeat(5,31px)!important;
    gap:4px!important;
    padding:6px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker .fear-reaction{
    width:31px!important;
    min-width:31px!important;
    height:31px!important;
    min-height:31px!important;
  }
}

/* ==============================================================
   FEAR SHOUTBOX FINAL MOBILE FIX — 2026-09-27
   - plain full square portraits (NO avatar FX in shoutbox)
   - username exactly centered under portrait
   - timestamp above message copy
   - hold-to-react picker floats without moving the message
   - three-dot menu is portalled to the viewport so it cannot be clipped
   ============================================================== */
body[data-fear-redesign="portal-v3"] #shoutbox .shout{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:14px!important;
  min-height:124px!important;
  padding:14px 40px 14px 10px!important;
  overflow:visible!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile{
  width:88px!important;
  min-width:88px!important;
  align-items:center!important;
  gap:7px!important;
}

/* Shoutbox portraits intentionally ignore the member's equipped AVATAR FX.
   The same FX remain untouched on profile, members, telemetry, etc. */
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar{
  width:84px!important;
  height:84px!important;
  min-width:84px!important;
  max-width:84px!important;
  min-height:84px!important;
  max-height:84px!important;
  padding:0!important;
  border-radius:2px!important;
  overflow:hidden!important;
  isolation:auto!important;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar.fear-afx-host{
  overflow:hidden!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar > .fear-afx-layer,
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar > .fear-afx-symbol{
  display:none!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar > .fear-afx-avatar-core{
  display:contents!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar img,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .shout-avatar img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:0!important;
  transform:none!important;
  filter:none!important;
}

/* Username is centered independently from crown/status decorations. */
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author{
  position:relative!important;
  width:88px!important;
  max-width:88px!important;
  min-height:19px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  overflow:visible!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname-text{
  display:block!important;
  width:100%!important;
  max-width:88px!important;
  margin:0 auto!important;
  padding:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  font-size:9.5px!important;
  line-height:1.2!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .admin{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:6!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-profile-presence{
  position:absolute!important;
  right:4px!important;
  top:70px!important;
  z-index:8!important;
  width:9px!important;
  height:9px!important;
  border:2px solid #060808!important;
  border-radius:50%!important;
}

/* Timestamp belongs above the message text. */
body[data-fear-redesign="portal-v3"] #shoutbox .shout-body{
  padding-top:4px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-message-time{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 7px 2px!important;
  padding:0!important;
  color:#7d8582!important;
  font:700 8px/1.1 'JetBrains Mono',monospace!important;
  letter-spacing:.13em!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout .meta{
  display:none!important;
}

/* No + button. Hold a shout/message to open reactions. */
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-add{
  display:none!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap:not(.is-picker-open){
  width:0!important;
  min-width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:max(16px,env(safe-area-inset-bottom))!important;
  top:auto!important;
  z-index:2147482000!important;
  width:max-content!important;
  max-width:calc(100vw - 20px)!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open > .fear-reaction-picker{
  position:static!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,36px)!important;
  gap:6px!important;
  width:max-content!important;
  max-width:calc(100vw - 20px)!important;
  margin:0!important;
  padding:9px!important;
  border:1px solid rgba(239,189,73,.70)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,#151919,#050707)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.90),0 0 24px rgba(229,181,67,.10)!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker .fear-reaction{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout.fear-reaction-active{
  padding:14px 40px 14px 10px!important;
  z-index:auto!important;
}

/* The real menu is moved to <body> while open, so it cannot be cropped by
   the shout list's mobile overflow container. */
.fear-shout-floating-menu{
  position:fixed!important;
  z-index:2147483000!important;
  display:block!important;
  box-sizing:border-box!important;
  min-width:168px!important;
  max-width:calc(100vw - 16px)!important;
  margin:0!important;
  padding:6px!important;
  border:1px solid rgba(229,181,67,.58)!important;
  border-radius:5px!important;
  background:#070a0a!important;
  box-shadow:0 18px 42px rgba(0,0,0,.90),0 0 18px rgba(229,181,67,.08)!important;
}
.fear-shout-floating-menu form{display:block!important;margin:0!important;padding:0!important}
.fear-shout-floating-menu .fear-shout-menu-item,
.fear-shout-floating-menu .fear-mention-person{
  appearance:none!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  padding:9px 10px!important;
  border:0!important;
  border-radius:2px!important;
  background:transparent!important;
  color:#ddd4bc!important;
  text-align:left!important;
  cursor:pointer!important;
  font:800 9px/1.2 'JetBrains Mono',monospace!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.fear-shout-floating-menu .fear-shout-menu-item:hover,
.fear-shout-floating-menu .fear-mention-person:hover{
  background:rgba(241,182,47,.09)!important;
  color:#ffd468!important;
}
.fear-shout-floating-menu .fear-shout-menu-item.is-danger{color:#e59b8d!important}

@media(max-width:600px){
  body[data-fear-redesign="portal-v3"] #shoutbox .shout{
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:12px!important;
    min-height:122px!important;
    padding:13px 36px 13px 8px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile{
    width:84px!important;
    min-width:84px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar,
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .shout-avatar{
    width:80px!important;
    height:80px!important;
    min-width:80px!important;
    min-height:80px!important;
    max-width:80px!important;
    max-height:80px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author{
    width:84px!important;
    max-width:84px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname,
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .fear-shout-author .uname-text{
    width:84px!important;
    max-width:84px!important;
    font-size:9px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-profile-presence{
    top:66px!important;
    right:3px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open > .fear-reaction-picker{
    grid-template-columns:repeat(5,34px)!important;
    gap:5px!important;
    padding:8px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker .fear-reaction{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .shout.fear-reaction-active{
    padding:13px 36px 13px 8px!important;
  }
}
/* Hard stop for any avatar-FX pseudo layers that may be generated by the global FX stylesheet. */
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar::before,
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar::after,
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar .fear-afx-avatar-core::before,
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar .fear-afx-avatar-core::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* ==============================================================
   FEAR SHOUTBOX PORTRAIT FILL PATCH — 2026-09-27
   Force the raw member photo to occupy every pixel of the square.
   This intentionally affects shoutbox portraits only.
   ============================================================== */
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .shout-avatar{
  position:relative!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  background:#030303!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout-avatar > img,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-cinematic-profile .shout-avatar > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  border:0!important;
  border-radius:0!important;
}

/* ==============================================================
   FEAR SHOUTBOX ALIGNMENT + REACTION ANCHOR PATCH — 2026-09-27
   - clock icon immediately beside timestamp
   - timestamp and message share the exact same left edge
   - + button matches active reaction pill dimensions
   - picker is anchored to + and never changes the row layout
   ============================================================== */
body[data-fear-redesign="portal-v3"] #shoutbox .shout-body{
  min-width:0!important;
  padding-top:5px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-message-time{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 8px 0!important;
  padding:0!important;
  line-height:1.2!important;
  text-align:left!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-message-time::before{
  content:"\f017";
  flex:0 0 auto;
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free",sans-serif!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  color:#bfc4c2!important;
  opacity:.95;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout-body > .msg{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}

body[data-fear-redesign="portal-v3"] #shoutbox .fear-reactions{
  position:relative!important;
  overflow:visible!important;
  align-items:center!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction{
  box-sizing:border-box!important;
  min-width:48px!important;
  height:31px!important;
  min-height:31px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap:not(.is-picker-open),
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  z-index:160!important;
  display:block!important;
  flex:0 0 48px!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  transform:none!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-add{
  appearance:none!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:31px!important;
  min-height:31px!important;
  max-height:31px!important;
  margin:0!important;
  padding:0!important;
  border-radius:999px!important;
  font-size:18px!important;
  line-height:1!important;
  transform:none!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap > .fear-reaction-picker,
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open > .fear-reaction-picker{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(100% + 8px)!important;
  top:auto!important;
  z-index:200!important;
  width:max-content!important;
  max-width:calc(100vw - 16px)!important;
  margin:0!important;
  transform:translateX(-50%)!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.fear-picker-down > .fear-reaction-picker{
  top:calc(100% + 8px)!important;
  bottom:auto!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
  /* Opening the picker must never resize/reflow the reaction row. */
  flex-basis:48px!important;
}
body[data-fear-redesign="portal-v3"] #shoutbox .shout.fear-reaction-active{
  padding-left:10px!important;
  padding-right:40px!important;
}

@media(max-width:600px){
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction{
    min-width:42px!important;
    height:28px!important;
    min-height:28px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap,
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap:not(.is-picker-open),
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
    flex-basis:42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add,
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-add{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    font-size:17px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
    flex-basis:42px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .fear-shout-message-time{
    margin-bottom:7px!important;
  }
  body[data-fear-redesign="portal-v3"] #shoutbox .shout.fear-reaction-active{
    padding-left:8px!important;
    padding-right:36px!important;
  }
}