/* FEAR SQUAD PORTAL V3.13
   Reference-sliced command panels and reliable shoutbox reaction controls. */

:root{
  --fear-v313-frame:url('../img/ui-reference-panel-frame.png');
  --fear-v313-header:url('../img/ui-reference-panel-header.png');
  --fear-v313-gold:#efbd49;
  --fear-v313-gold-hot:#ffd36a;
  --fear-v313-steel:#596466;
  --fear-v313-line:rgba(105,119,121,.48);
  --fear-v313-void:#020405;
}

/* The supplied reference is now the actual source for the compact panel rails.
   A small nine-slice keeps the corners crisp instead of stretching them. */
html body[data-fear-redesign="portal-v3"] .fear-portal-home{
  width:min(calc(100% - 18px),1170px)!important;
  margin-top:14px!important;
  overflow:visible!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-section{
  margin-top:7px!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-content-grid,
html body[data-fear-redesign="portal-v3"] .fear-portal-triple-grid,
html body[data-fear-redesign="portal-v3"] .fear-portal-lower-grid{
  gap:7px!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel{
  position:relative!important;
  isolation:isolate!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  overflow:visible!important;
  border:10px solid transparent!important;
  border-image-source:var(--fear-v313-frame)!important;
  border-image-slice:12!important;
  border-image-width:10px!important;
  border-image-outset:0!important;
  border-image-repeat:stretch!important;
  border-radius:0!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.018),transparent 22%),
    linear-gradient(180deg,#080c0e 0,#030607 48%,#010303 100%)!important;
  clip-path:none!important;
  box-shadow:
    0 0 0 2px #000,
    0 7px 0 rgba(0,0,0,.72),
    0 14px 28px rgba(0,0,0,.42)!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel::before{
  content:none!important;
  display:none!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:auto!important;
  height:auto!important;
  pointer-events:none!important;
  border:1px solid rgba(116,130,132,.32)!important;
  background:
    linear-gradient(90deg,rgba(226,179,70,.025),transparent 12% 88%,rgba(226,179,70,.018)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.008) 0 1px,transparent 1px 4px)!important;
  clip-path:none!important;
  box-shadow:
    inset 0 0 0 2px #010303,
    inset 0 1px rgba(255,255,255,.035),
    inset 0 0 30px rgba(0,0,0,.72)!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel>*{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  max-width:100%!important;
}

/* This clean header bar was reconstructed from the supplied design image.
   Its original words were removed; live PHP headings remain selectable text. */
html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head{
  min-height:44px!important;
  height:44px!important;
  margin:0!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background-color:#080b0c!important;
  background-image:var(--fear-v313-header)!important;
  background-position:center!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  clip-path:none!important;
  box-shadow:none!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head::before,
html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head::after{
  content:none!important;
  display:none!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h2,
html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h3{
  margin:0!important;
  color:#eef0ef!important;
  font:900 17px/1 'Barlow Condensed','Arial Narrow',sans-serif!important;
  letter-spacing:.055em!important;
  text-shadow:0 2px 5px #000!important;
  white-space:nowrap!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h2 i,
html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h3 i{
  margin-right:8px!important;
  color:var(--fear-v313-gold-hot)!important;
  filter:drop-shadow(0 0 5px rgba(239,189,73,.24));
}

html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head>a,
html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head>span{
  color:#8d9695!important;
  font:700 7px/1 'JetBrains Mono',monospace!important;
  letter-spacing:.13em!important;
  white-space:nowrap!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-shout-layout,
html body[data-fear-redesign="portal-v3"] .fear-portal-news-grid,
html body[data-fear-redesign="portal-v3"] .fear-portal-activity-list,
html body[data-fear-redesign="portal-v3"] .fear-portal-forum-list,
html body[data-fear-redesign="portal-v3"] .fear-portal-featured-members,
html body[data-fear-redesign="portal-v3"] .fear-portal-progress,
html body[data-fear-redesign="portal-v3"] .fear-portal-shop-feature,
html body[data-fear-redesign="portal-v3"] .fear-portal-poll,
html body[data-fear-redesign="portal-v3"] .fear-portal-telemetry-body{
  border:0!important;
  border-top:1px solid rgba(105,119,121,.28)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.014),transparent 24%),
    linear-gradient(180deg,rgba(4,8,9,.96),rgba(1,3,4,.995))!important;
  box-shadow:
    inset 0 0 0 1px #101617,
    inset 0 0 28px rgba(0,0,0,.58)!important;
}

/* The animated logo and typewriter use the same compact chrome as the panels. */
html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage,
html body[data-fear-redesign="portal-v3"] .fear-portal-slogan{
  padding:0!important;
  overflow:hidden!important;
  border:10px solid transparent!important;
  border-image-source:var(--fear-v313-frame)!important;
  border-image-slice:12!important;
  border-image-width:10px!important;
  border-image-repeat:stretch!important;
  background-color:#020405!important;
  clip-path:none!important;
  box-shadow:0 0 0 2px #000,0 10px 24px rgba(0,0,0,.38)!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{
  content:none!important;
  display:none!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage video{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:cover!important;
  clip-path:none!important;
}

html body[data-fear-redesign="portal-v3"] .fear-portal-slogan{
  min-height:52px!important;
  margin-top:7px!important;
  padding:7px 14px!important;
  background:
    linear-gradient(90deg,rgba(239,189,73,.035),transparent 19% 81%,rgba(239,189,73,.026)),
    linear-gradient(180deg,#0b0f10,#030506)!important;
}

/* Shoutbox header controls stay compact and legible. */
html body[data-fear-redesign="portal-v3"] #shoutbox .fear-portal-shout-tools{
  min-width:0!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-portal-sound-toggle{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:34px!important;
  height:29px!important;
  min-height:29px!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  overflow:hidden!important;
  border:1px solid rgba(239,189,73,.48)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#151a1b,#050707)!important;
  color:var(--fear-v313-gold-hot)!important;
  box-shadow:inset 0 0 0 1px #010202!important;
  font-size:8px!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-portal-sound-toggle i{
  display:block!important;
  color:inherit!important;
  font-size:11px!important;
  line-height:1!important;
}

/* A real CSS-drawn plus replaces the font glyph that rendered like a spinner. */
html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reactions{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  overflow:visible!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap{
  position:relative!important;
  z-index:32!important;
  flex:0 0 auto!important;
  width:auto!important;
  overflow:visible!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add{
  appearance:none!important;
  position:relative!important;
  z-index:2!important;
  flex:0 0 32px!important;
  width:32px!important;
  min-width:32px!important;
  height:28px!important;
  min-height:28px!important;
  margin:0!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid rgba(239,189,73,.62)!important;
  border-radius:3px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),transparent 30%),
    linear-gradient(180deg,#181e1f,#050707)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  box-shadow:inset 0 0 0 1px #010202,0 0 9px rgba(239,189,73,.08)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  user-select:none!important;
  animation:none!important;
  transform:none!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-add-mark{
  display:none!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add::before,
html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add::after{
  content:""!important;
  position:absolute!important;
  inset:50% auto auto 50%!important;
  z-index:3!important;
  display:block!important;
  width:13px!important;
  height:2px!important;
  margin:0!important;
  border:0!important;
  border-radius:2px!important;
  background:var(--fear-v313-gold-hot)!important;
  box-shadow:0 0 6px rgba(255,211,106,.36)!important;
  opacity:1!important;
  animation:none!important;
  transform:translate(-50%,-50%)!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add::after{
  transform:translate(-50%,-50%) rotate(90deg)!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add:hover,
html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add:focus-visible,
html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add[aria-expanded="true"]{
  border-color:var(--fear-v313-gold-hot)!important;
  background:linear-gradient(180deg,#2b2719,#0a0905)!important;
  outline:none!important;
  box-shadow:inset 0 0 0 1px #010202,0 0 13px rgba(239,189,73,.22)!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
  flex:1 0 100%!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  align-items:start!important;
  gap:6px!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open>.fear-reaction-add{
  grid-column:1!important;
  grid-row:1!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker{
  max-width:100%!important;
  overflow:visible!important;
  border-radius:0!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open>.fear-reaction-picker{
  position:static!important;
  inset:auto!important;
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,34px)!important;
  gap:5px!important;
  padding:6px!important;
  border:1px solid rgba(239,189,73,.52)!important;
  background:#050707!important;
  box-shadow:inset 0 0 0 1px #111819,0 8px 18px rgba(0,0,0,.62)!important;
  transform:none!important;
}

html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker .fear-reaction{
  width:34px!important;
  min-width:34px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:2px!important;
}

@media(max-width:900px){
  html body[data-fear-redesign="portal-v3"] .fear-portal-home{
    width:calc(100% - 10px)!important;
    padding-inline:0!important;
  }

  html body[data-fear-redesign="portal-v3"] .fear-portal-panel,
  html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage,
  html body[data-fear-redesign="portal-v3"] .fear-portal-slogan{
    border-width:8px!important;
    border-image-width:8px!important;
  }

  html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head{
    min-height:44px!important;
    height:44px!important;
    padding-inline:12px!important;
  }

  html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h2,
  html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h3{
    font-size:18px!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-portal-sound-toggle{
    width:31px!important;
    min-width:31px!important;
    height:28px!important;
    padding:0!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-portal-sound-toggle span{
    display:none!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox .fear-portal-shoutbox-status{
    font-size:6.5px!important;
    letter-spacing:.02em!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open{
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:5px!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add{
    width:30px!important;
    min-width:30px!important;
    height:28px!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker-wrap.is-picker-open>.fear-reaction-picker{
    grid-template-columns:repeat(5,32px)!important;
    gap:4px!important;
    padding:5px!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox .fear-reaction-picker .fear-reaction{
    width:32px!important;
    min-width:32px!important;
    height:31px!important;
    min-height:31px!important;
  }
}

@media(max-width:390px){
  html body[data-fear-redesign="portal-v3"] .fear-portal-panel,
  html body[data-fear-redesign="portal-v3"] .fear-portal-brand-stage,
  html body[data-fear-redesign="portal-v3"] .fear-portal-slogan{
    border-width:7px!important;
    border-image-width:7px!important;
  }

  html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head{
    padding-inline:9px!important;
  }

  html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h2,
  html body[data-fear-redesign="portal-v3"] .fear-portal-panel-head h3{
    font-size:16px!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox .fear-portal-shout-tools{
    gap:5px!important;
  }

  html body[data-fear-redesign="portal-v3"] #shoutbox .fear-portal-shoutbox-status{
    font-size:6px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add,
  html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add::before,
  html body[data-fear-redesign="portal-v3"] #shoutbox button.fear-reaction-add::after{
    animation:none!important;
    transition:none!important;
  }
}