@charset "UTF-8";
/* Muted Rainbow */
/* Grayscale */
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Barlow+Condensed:wght@600;700;800&family=Open+Sans:ital,wght@0,400..800;1,400..800&display=swap");
/* -------------------------
BASIC CONTAINERS
------------------------- */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  background-color: #facc15; }

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  padding: 0px; }

.container-fluid {
  margin: 0;
  padding: 0; }

.header-wrap {
  background-image: url("/game/uploads/theme_images/background.png");
  background-size: cover;
  height: 200px;
  background-position: center;
  margin-bottom: 10px; }

.title-wrap {
  height: 148px;
  color: #fffdf6;
  padding: 10px;
  padding-left: 20px;
  padding-top: 21px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.25); }

body {
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  line-height: 1.428571429;
  background-color: #f8f2df;
  color: #141414; }

.body-wrap {
  background-color: #f8f2df;
  margin: auto;
  max-width: 2500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.body-container {
  padding: 0px 15px 0px 10px;
  flex-grow: 3; }

.sidebar {
  width: 350px;
  min-width: 350px; }

.centered {
  text-align: center; }

.thumbnail {
  max-width: 100px;
  max-height: 100px; }

.thumbnail-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.thumbnail-gallery-item {
  height: 150px;
  width: 150px; }

.code-editor {
  font-family: Consolas,Monaco,Lucida Console,monospace; }

.idle-status, .app-status, #console, #console pre, #sendMsg, #sendMsg2, #manageLog {
  white-space: pre-wrap;
  background-color: black;
  color: white;
  font-family: "Lucida Console", Monaco, 'Andale Mono', 'Courier New', Courier, monospace;
  font-size: 14px;
  padding: 10px; }

code {
  white-space: pre-wrap;
  color: #141414;
  background-color: #fffdf6;
  font-family: "Lucida Console", Monaco, 'Andale Mono', 'Courier New', Courier, monospace;
  font-size: 14px; }

#console pre, #console p {
  padding: 0px;
  margin: 0px;
  border: none; }

.inline-block {
  display: inline-block; }

.ember-basic-dropdown-content {
  z-index: 3001; }

.modal-content {
  background-color: #f8f2df; }

td > ul {
  padding-inline-start: 10px; }

p {
  margin: 0px;
  margin-bottom: 10px; }

.action-buttons {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center; }

.action-buttons .btn {
  margin-left: 5px; }

.action-buttons-spaced {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center; }

.tooltip-button {
  background-color: transparent;
  color: #dc2626;
  border: none;
  padding: 1px 3px 1px 3px; }

.tooltip-button:hover,
.tooltip-button > a:hover {
  color: #1d4ed8;
  background-color: #f8f2df; }

label {
  font-weight: bold; }

.form-control:disabled, .form-control[readonly] {
  background-color: #f8f2df; }

button {
  border: 1px solid #111827; }

/* -------------------------
BOOTSTRAP OVERRIDES
------------------------- */
/* These colors come from bootstrap's dark mode */
.alert-info, .btn-info {
  background-color: #032830;
  border-color: #087990;
  color: #6edff6; }

.alert-success, .btn-success, .label-success {
  background-color: #051b11;
  border-color: #0f5132;
  color: #75b798; }

.alert-warning, .btn-warning, .label-warning {
  background-color: #332701;
  border-color: #997404;
  color: #ffda6a; }

.alert-danger, .btn-danger, .label-danger {
  background-color: #2c0b0e;
  border-color: #842029;
  color: #ea868f; }

.dropdown-menu {
  border-top: 4px solid #1d4ed8; }

.dropdown-divider {
  background-color: #dc2626; }

/* -------------------------
EMBER POWER SELECT (Dropdowns)
------------------------- */
.ember-power-select-search {
  background-color: #f8f2df; }

.ember-power-select-dropdown.ember-basic-dropdown-content,
.ember-power-select-option {
  background-color: #3a4146;
  color: #B3B3B3;
  border-color: #111827; }

.ember-power-select-option[aria-current="true"],
.ember-power-select-option[aria-selected="true"] {
  color: #fffdf6;
  background-color: #dc2626; }

.ember-power-select-trigger,
.ember-basic-dropdown-trigger,
.ember-power-select-search-input,
select {
  background-color: #3a4146;
  color: #B3B3B3;
  border: 1px solid #111827;
  border-radius: 3px;
  transition: border 0.3s linear;
  padding-top: 4px;
  padding-bottom: 4px;
  max-width: 100%;
  min-height: 39px; }

/* -------------------------
MARKDOWN EDITOR (Toast UI)
------------------------- */
.markdown-editor {
  padding: 0px;
  margin-bottom: 5px;
  border: 0px;
  background-color: transparent; }

.markdown-editor > textarea {
  margin: 0;
  width: 100%;
  padding: 1rem; }

.markdown-preview {
  width: 100%;
  min-height: 300px;
  padding: 5px;
  margin: 0px 10px 10px 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f8f2df;
  color: #141414;
  border: 1px solid #111827; }

.markdown-editor textarea {
  margin-top: 0px; }

.markdown-controls {
  padding: 0px 1px;
  margin-bottom: -1px; }

.markdown-controls a:hover {
  color: #1d4ed8;
  background-color: #f8f2df; }

.markdown-control-toggle {
  border: 0;
  background-color: #3a4146;
  color: #B3B3B3;
  padding: 0;
  border-radius: 4px 4px 0px 0px;
  width: 96px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin: -1px -1px 0px 10px;
  font-weight: 500;
  font-size: 0.9em; }

.markdown-control-toggle.active {
  background-color: #1d4ed8;
  color: #fffdf6;
  border-bottom: 0px;
  border-radius: 4px 4px 0px 0px;
  font-weight: 700; }

.toastui-editor-defaultUI-toolbar button {
  background-color: #23272a;
  border-color: #171a1c;
  color: #B3B3B3;
  margin: 0px 0px; }

.toastui-editor-defaultUI-toolbar button:not(:disabled):hover {
  background-color: #23272a;
  border-color: #171a1c;
  color: #B3B3B3; }

.toastui-editor-toolbar-divider {
  margin: 7px 12px;
  background-color: #dc2626; }

.toastui-editor-md-code-block-line-background {
  background-color: transparent; }

.toastui-editor-popup-body input[type='text'] {
  color: #141414;
  border-color: #111827; }

.toastui-editor-popup-body input[type='text']:focus {
  color: #141414;
  border-color: #111827; }

.toastui-editor-popup-body label {
  color: #141414; }

.toastui-editor-dropdown-toolbar {
  background-color: #1d4ed8;
  border-color: #111827; }

.toastui-editor-popup-body,
.toastui-editor-popup-add-table .toastui-editor-table-cell,
.toastui-editor-popup-add-table .toastui-editor-table-cell.header,
.toastui-editor-popup-add-table .toastui-editor-table-description,
.toastui-editor-popup {
  background-color: #23272a;
  color: #141414;
  border-color: #3a4146; }

.toastui-editor-defaultUI .toastui-editor-close-button,
.toastui-editor-defaultUI .toastui-editor-ok-button {
  font-size: 1.25em;
  background-color: #dc2626;
  border-color: #dc2626;
  color: #fffdf6; }

.toastui-editor-defaultUI .toastui-editor-close-button:hover,
.toastui-editor-defaultUI .toastui-editor-ok-button:hover {
  color: #fffdf6;
  background-color: #1d4ed8;
  border-color: #1d4ed8; }

.ProseMirror {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14.5px;
  height: 100%; }

.toastui-editor-main-container .md-mode,
.toastui-editor-main-container .ww-mode {
  background-color: #f8f2df; }

.toastui-editor-main-container {
  border-bottom: 1px solid #1d4ed8; }

.toastui-editor-md-mode .toastui-editor-md-container,
.toastui-editor-ww-mode .toastui-editor-ww-container,
.ProseMirror,
.toastui-editor-contents p {
  background-color: transparent;
  border-color: transparent;
  color: #141414; }

.toastui-editor-mode-switch {
  background-color: transparent;
  border-top: 4px solid #1d4ed8;
  color: #141414; }

.toastui-editor-defaultUI-toolbar,
.toastui-editor-main .toastui-editor-md-tab-style {
  background-color: #1d4ed8;
  border-color: #111827; }

button.image.toastui-editor-toolbar-icons,
button.indent.toastui-editor-toolbar-icons,
button.outdent.toastui-editor-toolbar-icons {
  display: none; }

.toastui-editor-defaultUI > .toastui-editor-main {
  resize: vertical; }

.toastui-editor-defaultUI {
  border-color: transparent; }

.toastui-editor-defaultUI-toolbar {
  border-bottom: 0;
  border-radius: 0; }

.toastui-editor-mode-switch .tab-item {
  margin-left: 10px;
  background-color: #3a4146;
  border-color: #3a4146;
  border-top: 1px solid #1d4ed8;
  color: #B3B3B3;
  font-size: 1em; }

.toastui-editor-mode-switch .tab-item.active {
  margin-left: 10px;
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  color: #fffdf6;
  font-weight: bold; }

.toastui-editor-tabs {
  display: none; }

.toastui-editor-toolbar-icons.heading,
.toastui-editor-toolbar-icons.bold,
.toastui-editor-toolbar-icons.italic,
.toastui-editor-toolbar-icons.strike,
.toastui-editor-toolbar-icons.hrline,
.toastui-editor-toolbar-icons.quote,
.toastui-editor-toolbar-icons.bullet-list,
.toastui-editor-toolbar-icons.ordered-list,
.toastui-editor-toolbar-icons.indent,
.toastui-editor-toolbar-icons.task-list,
.toastui-editor-toolbar-icons.outdent,
.toastui-editor-toolbar-icons.table,
.toastui-editor-toolbar-icons.image,
.toastui-editor-toolbar-icons.link,
.toastui-editor-toolbar-icons.code,
.toastui-editor-toolbar-icons.codeblock {
  background-position-y: -49px; }

.toastui-editor-md-code,
.toastui-editor-contents code {
  background-color: #fffdf6;
  color: #141414; }

.toastui-editor-md-table .toastui-editor-md-table-cell,
.toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text,
.toastui-editor-md-code.toastui-editor-md-marked-text {
  color: #fffdf6; }

.toastui-editor-md-delimiter,
.toastui-editor-md-thematic-break,
.toastui-editor-md-link,
.toastui-editor-md-table,
.toastui-editor-md-block-quote {
  color: #141414; }

.toastui-editor-md-block-quote .toastui-editor-md-marked-text {
  background-color: #fffdf6;
  color: #141414; }

.toastui-editor-popup-body > label {
  color: #141414; }

.toastui-editor-defaultUI-toolbar {
  padding: 5px 10px 5px 10px; }

.toastui-editor-toolbar-group {
  column-gap: 6px; }

.toastui-editor-toolbar {
  height: 42px; }

/* -------------------------
CALENDAR (Flatpickr)
------------------------- */
.flatpickr-calendar {
  background: #3a4146;
  box-shadow: none;
  border: 1px solid #111827;
  color: #B3B3B3; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-current-month,
span.flatpickr-weekday,
.flatpickr-day {
  color: #B3B3B3;
  fill: #B3B3B3; }

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: #7c858a; }

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  background: #dc2626;
  border-color: #dc2626;
  color: #fffdf6; }

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #1d4ed8;
  border: #1d4ed8;
  color: #fffdf6; }

.flatpickr-monthDropdown-month {
  background-color: #f8f2df !important; }

.flatpickr-months .flatpickr-month {
  height: 50px; }

/* -------------------------
NAVIGATION
------------------------- */
a, .nav-link {
  color: #dc2626;
  text-decoration: none; }

a:hover,
a:focus {
  font-weight: bold;
  color: #dc2626;
  text-decoration: none; }

.user-bar {
  text-align: right; }

.user-bar a {
  color: #fffdf6; }

.user-bar p {
  line-height: .75em; }

.header-wrap nav {
  background-color: rgba(0, 0, 0, 0.45);
  border: none;
  padding-left: 10px;
  padding-right: 10px; }

.navbar-dark .navbar-nav .nav-link {
  color: #fffdf6; }

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: #dc2626; }

.navbar {
  z-index: 2000; }

.navbar-nav > .nav-item {
  padding-right: 15px; }

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav .open > a,
.navbar-nav .open > a:hover,
.navbar-nav .open > a:focus
.navbar-nav .open > a {
  background-color: #f8f2df; }

.toc {
  padding: 10px;
  background-color: #fffdf6;
  color: #141414;
  width: 300px;
  max-width: 100%;
  border: 1px solid #111827;
  box-shadow: 5px 5px 5px #dc2626;
  padding: 15px;
  margin: 15px 15px 15px 0px;
  border-radius: 8px; }

.toc li {
  list-style-type: square; }

/* -------------------------
GENERAL HTML ELEMENTS
------------------------- */
h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  word-break: break-word; }

h1 {
  background-color: #1d4ed8;
  padding: .1em 1.2em;
  color: #fffdf6;
  font-weight: normal;
  border: 3px solid #111827;
  letter-spacing: 0.1em;
  margin: 0px 0px 10px 0px;
  font-family: "Bangers", system-ui, sans-serif; }

h2 {
  padding-top: 20px;
  padding-bottom: 10px;
  font-family: "Bangers", system-ui, sans-serif; }

.table th {
  padding: 5px;
  vertical-align: middle;
  color: #fffdf6; }

td, .table td {
  padding: 5px;
  vertical-align: middle;
  color: #141414; }

textarea.pre {
  font-family: Consolas,Monaco,Lucida Console,monospace; }

.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #fffdf6;
  color: #141414; }

pre {
  border: 0;
  padding: 0;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: normal;
  word-break: normal;
  overflow-x: hidden;
  overflow-wrap: normal;
  background-color: inherit; }

.ace-editor {
  position: relative;
  height: 500px;
  width: 100%;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

blockquote {
  margin: 0.4em 0;
  width: 80%;
  padding: 10px;
  font-size: 1em;
  background-color: #fffdf6;
  color: #141414;
  border: 0px;
  border-left: 1px solid #dc2626;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px; }

pre code {
  border: 2px solid #111827;
  border-radius: 5px;
  font-size: 1em;
  margin: 0.4em 0;
  width: 700px;
  padding: 10px;
  overflow: auto;
  word-wrap: break-word;
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px; }

th {
  background-color: #1d4ed8;
  color: #fffdf6;
  padding: 8px; }

td {
  border-bottom: 1px solid #111827;
  padding: 8px; }

textarea {
  width: 98%;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f8f2df;
  color: #141414;
  border: 1px solid #111827; }

form {
  padding-bottom: 50px;
  background-color: #f8f2df;
  color: #141414; }

.form-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 0 10px 0px;
  border-bottom: 1px dotted #111827; }

.form-item-label {
  font-weight: bold;
  flex-basis: 17%; }

.form-item-entry {
  flex-basis: 83%; }

input {
  color: #7c858a;
  outline: 0;
  border: 2px solid #111827;
  border-radius: 0; }

input[type="checkbox"] {
  vertical-align: middle; }

textarea,
input,
.markdown-preview,
.toastui-editor-defaultUI .ProseMirror,
.toastui-editor-main-container .md-mode > div,
.ember-text-field {
  background-color: #3a4146;
  color: #B3B3B3;
  padding: 4px;
  max-width: 100%;
  outline: 0;
  min-height: 32px; }

input[type="text"],
.ember-text-field {
  background: #3a4146;
  border: 1px solid #111827;
  padding: 5px;
  outline: 0;
  height: 39px;
  width: 100%; }

input.color-select {
  height: 40px; }

.ember-basic-dropdown-trigger {
  min-width: 400px; }

li hr {
  margin: 2px;
  border-color: #dc2626;
  border-width: 4px; }

.emoji {
  font-size: 1.5em;
  vertical-align: middle; }

.emoji-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.emoji-example {
  display: flex;
  flex-direction: column;
  width: 300px; }

.emoji-name {
  font-size: .7em; }

.emoji-symbol {
  font-size: 1.25em; }

/* -------------------------
BOOTSTRAP OVERRIDES
------------------------- */
:root {
  --bs-body-bg: #f8f2df;
  --bs-body-color: #141414;
  --bs-border-color: #111827; }

.navbar {
  margin-bottom: 0px; }

.badge-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 20rem; }

.badge-primary {
  background-color: #1d4ed8;
  color: #fffdf6; }

.nav-tabs {
  border-bottom: none; }

.nav-tabs > .nav-item {
  padding-right: 2px; }

.nav-tabs .nav-link {
  border: 1px solid #111827;
  border-bottom: none; }

.nav-tabs .nav-link,
.nav-tabs .nav-link > a:hover,
.nav-tabs .nav-link > a:focus {
  color: #dc2626; }

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active > a:hover,
.nav-tabs .nav-link.active > a:focus {
  background-color: #1d4ed8;
  color: #fffdf6; }

.tab-content {
  border: 1px solid #111827;
  border-top: 2px solid #111827;
  padding: 10px;
  min-height: 50px; }

.card {
  background-color: #fffdf6;
  border-color: #111827;
  margin-bottom: 20px;
  border-radius: 4px; }

.card-heading {
  padding: 10px 15px; }

.card-default > .card-heading {
  background-color: #111827;
  border-color: #111827; }

.card-primary > .card-heading {
  background-color: #dc2626;
  border-color: #dc2626; }

.card-primary, .card-default {
  border-top: none; }

.btn {
  font-size: 1em;
  margin-top: 2px;
  padding-bottom: 4px; }

.btn-primary a {
  color: #fffdf6; }

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #1d4ed8;
  border-color: #111827;
  color: #fffdf6; }

.btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: #f8f2df;
  border-color: #111827;
  color: #141414; }

.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: #dc2626;
  border-color: #dc2626; }

.btn-link {
  text-align: left;
  background-color: transparent;
  border: none;
  color: #dc2626;
  text-decoration: none;
  padding: 0px; }

.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  color: #dc2626;
  text-decoration: none;
  font-weight: bold; }

.float-right {
  padding: 10px; }

.modal {
  z-index: 3000; }

.row {
  margin-right: 0px;
  margin-left: 0px; }

.dropdown-item {
  font-size: 14px;
  padding: 3px 20px;
  color: #141414;
  line-height: 1.4; }

.dropdown-item.active, .dropdown-item:active {
  background-color: #1d4ed8;
  color: #fffdf6; }

.dropdown-item:hover, .dropdown-item:focus {
  background-color: #dc2626;
  color: #fffdf6; }

.form-group {
  margin-bottom: 1rem; }

.modal-dialog {
  max-width: 650px; }

/* --------------------------
ALERTIFY DIALOGS
---------------------------*/
.alertify-notifier .ajs-message.ajs-success {
  background-color: #1d4ed8;
  color: #fffdf6; }

/* --------------------------
YOUTUBE MUSIC PLAYER
---------------------------*/
.musicplayer-button {
  cursor: pointer;
  border: none;
  background: transparent;
  outline: none;
  display: block; }

.musicplayer-frame, .musicplayer-preload {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  display: inline; }

.musicplayer-wrap {
  border-bottom: 1px solid #111827;
  margin: 5px; }

.musicplayer-description {
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 5px; }

/* -------------------------
HEADER
------------------------- */
.site-banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.site-title {
  margin: 0px;
  font-size: 3em;
  font-family: "Bangers", system-ui, sans-serif;
  text-transform: uppercase; }

.site-subtitle {
  font-size: 1.2em; }

.site-title a, .site-title a:hover, .site-title a:active {
  color: #fffdf6;
  text-decoration: none;
  background-color: transparent; }

.user-bar {
  margin-top: 15px; }

.loginDisplay {
  text-align: right; }

.alts-switcher {
  width: 100%; }

.captcha-block {
  padding-top: 15px; }

/* -------------------------
FOOTER
------------------------- */
footer {
  font-size: 0.9em;
  color: #3b3b3b;
  margin-top: 10px;
  padding: 20px; }

/* -------------------------
SIDEBAR
------------------------- */
.sidebar-box-left {
  border-right: 1px solid #111827;
  padding-right: 10px; }

.sidebar-box-right {
  border-left: 1px solid #111827;
  padding-left: 10px; }

.sidebar-box {
  border-top: 1px solid #111827;
  margin: 2px;
  font-size: .9em;
  word-break: break-word; }

.sidebar-heading {
  text-align: center;
  padding-bottom: 10px; }

.sidebar-heading h2 {
  text-align: center;
  font-size: 1.5em;
  color: #141414;
  padding: 0px;
  margin-top: 20px;
  margin-bottom: 10px;
  text-transform: uppercase; }

.search-bar {
  padding: 10px; }

.sidebar-list {
  word-wrap: break-word; }

.search-hint {
  color: #3b3b3b;
  font-style: italic; }

.search-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0px 10px 0px;
  padding: 5px 0px 10px 0px;
  align-items: center;
  border-bottom: 1px solid #111827; }

.search-row label {
  font-weight: bold;
  flex-basis: 200px; }

/* -------------------------
GENERAL UTILITIES
------------------------- */
.clearfix {
  clear: both; }

.small-profile-icon {
  width: 50px;
  height: 50px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  margin: 2px;
  object-fit: cover;
  object-position: center 10%; }

.tiny-profile-icon {
  width: 25px;
  height: 25px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  margin: 2px;
  object-fit: cover;
  object-position: center 10%; }

.icon-row img {
  margin-left: 20px; }

.faded {
  background-color: gray;
  opacity: 0.4;
  filter: alpha(opacity=40); }

.inline-response {
  border: 1px solid #111827;
  margin: 20px;
  padding-left: 20px;
  margin-top: 30px; }

.inline-response form {
  padding-bottom: 20px; }

.hint {
  color: #3b3b3b;
  font-style: italic;
  font-weight: bold;
  padding-top: 5px; }

.hint.float-right,
.hint.float-end {
  padding-top: 5px;
  padding-right: 5px;
  text-align: right; }

.tinyhint {
  color: #3b3b3b;
  font-style: italic;
  padding-left: 10px;
  font-size: .8em; }

img {
  max-width: 100%; }

.image-container {
  padding: 5px;
  max-width: 100%; }

.image-container img {
  max-width: 100%; }

.image-container.center img {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.image-container.right img {
  display: block;
  margin-left: auto;
  margin-right: 0; }

.icon-status-web-active {
  border: 3px double #176109;
  border-radius: 30px; }

.icon-status-game-active {
  border: 3px solid #176109;
  border-radius: 30px; }

.icon-status-web-inactive {
  border: 3px double #ccc;
  border-radius: 30px; }

.icon-status-game-inactive {
  border: 3px solid #ccc;
  border-radius: 30px; }

.folder-list {
  column-count: 4; }

.folder-item {
  width: 200px; }

/* -------------------------
HOME SCREEN
------------------------- */
.jumbotron {
  background-color: #f8f2df;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20px; }

.jumbotron-image {
  height: 250px;
  max-width: 100%;
  background: url("/game/uploads/theme_images/jumbotron.png");
  background-size: cover;
  background-position: center;
  margin: auto; }

.jumbotron img {
  max-width: 70%;
  width: 400px; }

.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200; }

.jumbotron > hr {
  border-top-color: #111827; }

.jumbotron-tagline {
  font-size: 3em; }

.container .jumbotron {
  border-radius: 0px; }

.splash-box {
  border-top: 1px solid #111827;
  border-left: 1px solid #111827;
  min-height: 200px; }

.splash-heading {
  text-align: center;
  padding-bottom: 10px; }

.jumbotron .splash {
  padding-top: 20px;
  text-align: left;
  margin: auto;
  width: 80%; }

.jumbotron .splash p {
  font-size: 1.25em;
  font-weight: 200; }

/* -------------------------
PLAY SCREEN
------------------------- */
#console {
  height: calc(100vh - 325px);
  min-height: 400px;
  overflow-y: scroll; }

#sendMsg, #sendMsg2 {
  width: 100%;
  height: 100px;
  border: 2px solid #111827;
  margin: 0px;
  margin-top: 5px;
  border: 0px; }

.play-screen {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.play-sidebar {
  flex-basis: 20%;
  background-color: #fffdf6;
  height: fit-content; }

.play-main {
  flex-basis: 80%; }

#sceneMenuCollapseButton {
  display: none; }

/* -------------------------
CHARGEN SCREEN
------------------------- */
.cg-tip {
  color: #3b3b3b;
  font-style: italic;
  font-size: 1em; }

.app-status {
  padding: 10px; }

.fs3-skillbutton {
  border: 1px solid #111827; }

.fs3-abilitybox {
  padding: 5px;
  border-bottom: 3px solid #111827; }

.chargen-section-title {
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px 0 10px 0; }

.fs3-rating-display {
  text-align: center; }

.fs3-ability-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.fs3-ability-name {
  flex-basis: 60%; }

.fs3-rating-control {
  display: flex;
  justify-content: space-between;
  flex-basis: 40%; }

.fs3-skillscan-rating {
  width: 100px; }

.card-abilities {
  column-count: 2;
  padding-bottom: 10px;
  column-gap: 40px; }

.card-ability {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }

.card-specialties {
  color: #3b3b3b;
  font-style: italic;
  padding-bottom: 10px; }

.card-ability-name {
  padding-right: 10px; }

/* -------------------------
SCENES SCREEN
------------------------- */
.scene-pose {
  padding: 10px;
  margin: 0px 0px 10px 10px; }

.scene-pose-header {
  font-size: .8em;
  border-top: 1px dotted #111827;
  padding-top: 10px;
  color: #3b3b3b;
  margin-bottom: 10px; }

.scene-system-pose {
  margin: 0px 0px 10px 10px;
  color: #3b3b3b;
  font-style: italic; }

.scene-set-pose {
  margin: 0px 0px 10px 10px;
  border-left: 1px solid #dc2626;
  font-style: italic;
  padding: 0px 10px 10px 10px; }

.scene-ooc-pose {
  background-color: #fffdf6;
  color: #141414;
  padding: 5px;
  margin: 0px 0px 10px 10px;
  display: flex;
  flex-direction: row;
  align-items: center; }

.scene-ooc-pose p {
  margin: 5px; }

.scene-ooc-pose .badge {
  float: left;
  margin: 0.4em 0.5em 0em 0em; }

.scene-command {
  margin-left: 25px;
  color: #3b3b3b;
  font-style: italic; }

.scene-log {
  margin: 2px;
  padding: 10px; }

#live-scene-log {
  height: calc(100vh - 400px);
  min-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 2px 0px; }

.log-icon-container {
  width: 150px;
  height: 150px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  overflow: hidden;
  background: #facc15; }

.log-icon {
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: cover;
  object-position: center 10%; }

.log-icon-title-container {
  width: 150px;
  background-color: #facc15;
  z-index: 98;
  position: relative;
  top: -19px;
  -moz-border-radius: 0px 25px 25px 0px;
  -webkit-border-radius: 0px 25px 25px 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  opacity: 0.8;
  filter: alpha(opacity=80);
  vertical-align: middle; }

.log-icon-title {
  z-index: 99;
  text-align: center;
  font-weight: bold;
  color: #141414; }

/* !important needed because of bootstrap */
.bg-primary {
  background-color: #1d4ed8 !important; }

.bg-secondary {
  background-color: #dc2626 !important; }

.bg-info {
  background-color: #dc2626 !important; }

.bg-ooc {
  background-color: #1d4ed8;
  border: 1px solid #111827; }

.scene-event {
  background-color: #0b5889; }

.scene-social {
  background-color: #578c63; }

.scene-vignette {
  background-color: #68459d; }

.scene-privacy-open {
  background-color: #578c63; }

.scene-privacy-private {
  background-color: #0b5889; }

.scene-privacy-limited,
.scene-privacy-openstar {
  background-color: #df62ea; }

.scene-pacing-traditional {
  background-color: #578c63;
  color: white; }

.scene-pacing-asynchronous {
  background-color: #0b5889;
  color: white; }

.scene-pacing-distracted {
  background-color: #df62ea;
  color: white; }

.log-box {
  background-color: #fffdf6;
  color: #141414;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px; }

.log-wrap {
  border-radius: 8px;
  border: 1px solid #111827;
  background-color: #f8f2df;
  margin: 5px;
  padding: 5px;
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/game/uploads/theme_images/box-bg.png"); }

.log-participants-box {
  padding-top: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block; }

.badge-likes {
  background-color: #852730;
  box-shadow: none; }

.pose-divider {
  margin: 20px 25px 20px 25px;
  align: center;
  height: 1px;
  border: 1px dotted #fffdf6; }

.scene-pose-order {
  padding-left: 10px; }

.scene-pose-order .hint {
  padding-left: 0px; }

.your-pose-order {
  font-weight: bold;
  color: green; }

.scene-menu {
  display: inline-block; }

.scene-pose-select, .scene-char-select, .forum-char-select {
  width: 175px;
  padding-top: 10px; }

.scene-pose-select .ember-basic-dropdown-trigger {
  min-width: 175px; }

.scene-pose-box {
  margin: 10px 0px 0px 0px;
  width: 100%; }

.scene-controls-box {
  border: 1px solid #111827;
  background: #fffdf6;
  padding: 5px; }

.scene-controls {
  display: flex;
  flex-flow: row-reverse wrap; }

.pose-buttons {
  display: flex;
  flex-flow: row-reverse wrap; }

.pose-buttons .btn {
  margin-left: 4px; }

.scene-controls-left {
  padding: 5px;
  flex-basis: 50%; }

.scene-controls-right {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  padding: 5px;
  flex-basis: 50%; }

.scene-char-select .tiny-profile-icon {
  margin: 0 2px 3px 0; }

.live-scenes-entry,
.unshared-scene-block {
  margin-bottom: 20px;
  background-color: #fffdf6;
  border: 1px solid #111827; }

.live-scene-controls button, .chat-controls button, .unshared-scene-controls button {
  padding-right: 15px;
  padding-bottom: 5px;
  display: inline-block; }

.live-scene-controls button, .chat-controls button {
  font-size: 1.1em; }

.live-scenes-controls {
  padding: 5px 0px 5px 10px; }

.live-scenes-notes {
  padding: 5px 0px 5px 10px; }

.live-scenes-controls a {
  padding-right: 10px; }

.unshared-scene-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px; }

.unshared-scene-participants {
  flex-basis: 40%; }

.unshared-scene-warnings {
  margin-bottom: 10px; }

.live-scenes-block, .unshared-scene-block {
  padding-bottom: 5px;
  margin-bottom: 10px; }

.live-scenes-heading, .unshared-scene-heading {
  background-color: #1d4ed8;
  color: #fffdf6;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px; }

.unshared-scene-controls {
  padding: 10px 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; }

.live-scenes-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px; }

.content-tags-selector {
  margin-bottom: 5px; }

.scene-title {
  font-weight: bold; }

.live-scenes-block .scene-title-block {
  background-color: #111827;
  padding: 10px; }

.content-warning-label {
  margin: 0px 5px;
  background-color: #ffc107; }

.card-ability-title {
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 1px solid #111827;
  margin-bottom: 5px; }

.scene-card-top {
  display: grid;
  grid-template-columns: 180px auto; }

.scene-card .log-icon-container {
  margin: auto; }

.scene-card-profile {
  text-align: center; }

@media (max-width: 767px) {
  .scene-controls-left {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    padding-top: 10px;
    align-items: flex-end; }
  .scene-controls-left .scene-menu {
    margin-left: 4px; }
  .scene-controls-left .dropdown-menu {
    right: 0;
    left: auto; } }

@media (max-width: 560px) {
  .scene-card-top {
    grid-template-columns: 100%; } }

/* -------------------------
PLOTS SCREEN
-------------------------- */
.plot-container {
  margin-bottom: 20px;
  background-color: #fffdf6;
  border: 1px solid #111827; }

.plot-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #1d4ed8;
  padding: 5px;
  font-size: 1.25rem; }

.plot-header a {
  color: #fffdf6; }

.plot-subheader {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border-bottom: 1px solid #111827;
  margin: 0px 5px; }

.plot-storytellers-icon, .plot-dates-icon {
  margin-right: 5px; }

.plot-summary {
  padding: 5px; }

/* -------------------------
CHARACTERS SCREEN
------------------------- */
.profile-gallery, .icon-gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.icon-gallery .icon-gallery-item {
  width: 150px;
  margin: 5px 5px 0px 0px; }

.icon-gallery .icon-gallery-item img {
  width: 150px; }

.profile-gallery img {
  padding: 10px;
  width: 150px; }

.profile-gallery-input textarea {
  margin: 0px;
  width: 100%; }

.profile-gallery-input code {
  color: #141414;
  background-color: #f8f2df; }

.profile-box {
  background-color: #fffdf6;
  color: #141414;
  margin-left: 30px;
  margin-right: 30px;
  flex-basis: 60%; }

.profile-image-wrap {
  flex-basis: 30%; }

.profile-box .row {
  border-bottom: 1px solid #111827;
  margin: 10px;
  padding: 3px; }

.profile-title {
  background-color: #1d4ed8;
  color: #fffdf6;
  padding: 20px;
  margin: 0;
  font-size: 1.5em; }

.profile-divider {
  background-color: #1d4ed8;
  color: #fffdf6;
  padding: 10px;
  margin-top: -21px;
  margin-bottom: -10px; }

.profile-wrap {
  border: 1px solid #111827;
  background-color: #f8f2df;
  padding: 15px;
  margin-top: -10px;
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/game/uploads/theme_images/box-bg.png");
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }

.profile-item-list {
  padding: 10px; }

.profile-item {
  margin: 10px 0px 10px 0px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid #111827; }

.profile-item-name {
  flex-basis: 40%;
  font-weight: bold; }

.profile-item-value {
  flex-basis: 60%; }

.achievement-levels {
  padding-top: 5px;
  color: #bbb; }

.char-achievements {
  column-count: 2; }

.char-achievement {
  padding-bottom: 5px; }

.char-achievement .achievement-message, .char-achievement .achievement-icon {
  vertical-align: middle; }

.char-achievement i {
  margin-right: 10px; }

table.char-ability-list {
  width: 100%; }

.char-ability-title {
  font-size: 1.5em;
  background-color: #1d4ed8;
  padding: .1em 1.2em;
  color: #fffdf6;
  font-weight: normal;
  border: 3px solid #111827;
  letter-spacing: 0.1em;
  margin: 20px 0px 10px 0px; }

.profile-image {
  width: 300px;
  margin: auto;
  display: block;
  border-radius: 4px;
  max-width: 100%; }

.relationship-icon {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: cover;
  object-position: center 10%; }

.relationship-icon-container {
  width: 100px;
  height: 100px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  overflow: hidden;
  background: #facc15;
  margin-right: 15px; }

.relationship-title-container {
  text-align: center; }

.relationship-row {
  margin: 10px;
  padding: 5px;
  border: 1px solid #111827;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.relationship-name {
  font-weight: bold; }

.status-message {
  color: #fffdf6;
  background-color: #dc2626;
  text-align: center;
  font-size: 1.25em;
  font-weight: bold;
  padding: 2px; }

.tab-cover {
  font-size: 2em;
  font-variant: small-caps;
  text-align: center; }

.profile-tab {
  padding-top: 15px;
  padding-bottom: 15px; }

.char-scene-list {
  max-width: 50%; }
  .char-scene-list span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%; }

.relaedScenesList, .participantsList {
  margin-top: 20px;
  margin-bottom: 20px; }

.file-image {
  max-width: 500px; }

.upload-preview {
  max-width: 100px;
  max-height: 100px; }

input[type='file'] {
  color: transparent; }

.combat-damage {
  color: red; }

.fs3-sheet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around; }

.fs3-ability-table {
  flex-basis: 48%;
  margin-left: 10px;
  margin-right: 10px; }

.fs3-dots-attribute > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-0,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-0,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-1,
.fs3-dots-background > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-0,
.fs3-dots-language > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-0,
.fs3-dots-advantage > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-0 {
  color: #852730; }

.fs3-dots-attribute > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-1,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-2,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-3,
.fs3-dots-background > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-1,
.fs3-dots-language > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-1,
.fs3-dots-advantage > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-1 {
  color: #ffc107; }

.fs3-dots-attribute > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-2,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-4,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-5,
.fs3-dots-background > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-2,
.fs3-dots-language > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-2,
.fs3-dots-advantage > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-2 {
  color: #578c63; }

.fs3-dots-attribute > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-3,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-6,
.fs3-dots-action > .fas.fa-circle.fa-sm.char-dot-fill.fs3-dot-7 {
  color: #0b5889; }

.fs3-luck {
  margin-top: 25px;
  text-align: center; }

.fs3-damage-desc {
  flex-basis: 30%; }

.fs3-damage-date {
  flex-basis: 30%; }

.fs3-damage-sev {
  flex-basis: 40%; }

.fs3-combat-hud h3 {
  font-size: 1.2em; }

#combat-log {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 5px; }

.fs3-linked-attr {
  font-size: .7em;
  color: #3b3b3b; }

.fs3-gear-row {
  border-bottom: 1px solid #111827;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.fs3-gear-title {
  flex-basis: 30%; }

.fs3-gear-detail {
  flex-basis: 70%; }

.fs3-combat-command {
  padding-bottom: 10px; }

.roster-table {
  width: 100%; }

.roster-wrap {
  border: 1px solid #111827;
  background-color: #f8f2df;
  padding: 15px;
  margin-top: -10px;
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/game/uploads/theme_images/box-bg.png");
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start; }

.roster-info {
  padding: 10px;
  background-color: #fffdf6;
  color: #141414;
  margin-left: 15px;
  flex-grow: 1; }

.roster-buttons {
  width: 100%;
  text-align: right;
  margin-top: 15px; }

.roster-char-title {
  font-size: 1.5em;
  background-color: #1d4ed8;
  padding: .1em 1.2em;
  color: #fffdf6;
  font-weight: normal;
  border: 3px solid #111827;
  letter-spacing: 0.1em;
  margin: 20px 0px 10px 0px; }

.roster-char-warnings {
  margin-bottom: 5px; }

.file-uploader-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #111827;
  padding-top: 15px; }

.file-uploader-item-detail {
  padding: 0 20px 0 20px; }

/* -------------------------
CHAT SCREEN
------------------------- */
#chat-window {
  height: calc(100vh - 400px);
  min-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #111827;
  margin: 2px;
  padding: 10px; }

.play-sidebar {
  max-height: 800px;
  overflow-y: hidden;
  overflow-x: hidden;
  padding: 5px; }

.play-sidebar:hover {
  overflow-y: auto; }

.play-scene-title {
  font-size: 1.5em;
  color: #141414; }

.play-scene-context-prompt {
  font-weight: bold;
  font-size: 1.5em;
  color: #141414; }

.play-scene-context-wrap {
  margin-top: 5px; }

.play-scene-controls-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #111827;
  padding-bottom: 5px;
  margin-bottom: 5px; }

.play-hint {
  color: #141414;
  margin: 0px 0px 5px 10px;
  font-size: .8em; }

.chat-box {
  padding: 3px;
  margin: 0px; }

.chat-report {
  max-height: 200px;
  overflow-y: scroll; }

.timestamp-tip {
  color: #3b3b3b;
  font-style: italic;
  font-size: .8em; }

.chat-button-active {
  color: #fffdf6;
  background-color: #1d4ed8; }

.chat-button-active:focus {
  color: #fffdf6;
  background-color: #1d4ed8; }

.chat-add-convo {
  display: inline-block; }

.chat-nav > li > a {
  padding: 0px; }

.chat-control-row {
  margin: 0px;
  padding: 0px 15px 0px 0px; }

.chat-join-note {
  margin: 5px; }

.chat-msg-flagged {
  border: 1px solid #111827;
  background-color: #fffdf6; }

.play-section-title {
  font-variant: small-caps;
  margin: 10px 5px 5px 5px;
  font-weight: 400;
  font-family: "Bangers", system-ui, sans-serif;
  text-transform: uppercase;
  font-size: 1.5em; }

.play-section-title i {
  font-size: 0.75em; }

.play-selector {
  width: 100%;
  padding: 5px;
  background-color: transparent; }

.play-selector:hover {
  background-color: #dc2626;
  color: #fffdf6; }

.play-selector-active {
  background-color: #dc2626;
  color: #fffdf6; }

.navbar-nav > li > a.dropdown-toggle.chat-menu {
  padding: 10px 0px 0px 0px; }

/* -------------------------
JOBS SCREEN
------------------------- */
.job-filter {
  margin-left: 10px; }

.job-status {
  background-color: gray; }

.job-status-DONE {
  background-color: gray;
  color: white; }

.job-status-NEW {
  background-color: yellow;
  color: black; }

.job-status-OPEN {
  background-color: green;
  color: white; }

.job-status-HOLD {
  background-color: red;
  color: white; }

.job-category {
  background-color: gray; }

.job-category-APP {
  background-color: #852730; }

.job-category-BUILD {
  background-color: #ff8307; }

.job-category-BUG {
  background-color: #ffc107; }

.job-category-CODE {
  background-color: #578c63; }

.job-category-ALERT {
  background-color: #3bc4c4; }

.job-category-MISC {
  background-color: #0b5889; }

.job-category-PLOT {
  background-color: #4e5294; }

.job-category-REQ {
  background-color: #68459d; }

.job-category-RP {
  background-color: #df62ea; }

.job-category-SYS {
  background-color: #fb9dde; }

.job-category-general {
  background-color: #3a4146; }

.job-reply {
  padding: 5px;
  margin-top: 5px; }

.admin-only-reply-label {
  background-color: #172234;
  border: 1px solid white;
  color: white;
  font-size: 1em; }

.admin-only-reply, .admin-only-reply .markdown-editor {
  background-color: #172234;
  border-color: white;
  color: white;
  padding: 8px; }

.player-reply-label {
  background-color: white;
  color: #172234;
  border: 1px solid #172234;
  font-size: 1em; }

.player-reply, .player-reply .markdown-editor {
  padding: 8px; }

.job-template-editor {
  margin: 0px; }

.preset-responses {
  margin: 5px 0px 15px 0px; }

.create-job-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0px 10px 0px;
  padding: 5px 0px 10px 0px;
  align-items: center;
  border-bottom: 1px solid #111827; }

.create-job-row label {
  font-weight: bold;
  flex-basis: 200px; }

.create-job-row .job-category {
  height: 1.5em; }

.edit-job-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0px 10px 0px;
  padding: 5px 0px 10px 0px;
  align-items: center;
  border-bottom: 1px solid #111827; }

.edit-job-row label {
  font-weight: bold;
  flex-basis: 200px; }

.display-job-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0px 10px 0px;
  padding: 5px 0px 10px 20px;
  align-items: center;
  border-bottom: 1px solid #111827; }

.display-job-row label {
  font-weight: bold;
  flex-basis: 200px; }

.display-job-row .display-job-selection {
  align-self: center;
  flex-basis: 400px;
  flex-grow: 2; }

.display-job-row .display-job-controls {
  flex-basis: 200px; }

/* -------------------------
MAIL
---------------------------- */
.mail-selected-tag {
  font-weight: bold;
  background-color: #1d4ed8;
  color: #fffdf6; }

.mail-message-inbox {
  font-size: 2em;
  padding: 10px 0px 10px 0px; }

/* -------------------------
LOCATIONS SCREEN
------------------------- */
.area-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1em; }

.area-entry {
  height: 100%;
  border: 1px solid #111827;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-self: stretch; }

.area-entry-summary {
  padding: 10px; }

.area-entry h2 {
  font-size: 1.25em;
  background-color: #1d4ed8;
  color: #fffdf6;
  padding: 5px;
  margin: 0px; }

.area-entry h2 a {
  color: #fffdf6; }

.area-entry h3 {
  font-size: 1em;
  margin: 0px; }

.area-buttons {
  align-self: center;
  margin: 10px; }

.area-quickjump {
  margin-left: 5px;
  margin-bottom: 10px; }

.location-directory {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px; }

.location-entry {
  width: 400px;
  border: 1px solid #111827;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between; }

.location-entry-summary {
  padding: 10px; }

.location-entry h2 {
  font-size: 1.25em;
  background-color: #1d4ed8;
  color: #fffdf6;
  padding: 5px;
  margin: 0px; }

.location-entry h3 {
  font-size: 1em;
  margin: 0px; }

.location-legend {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  font-size: 0.9rem;
  margin-bottom: 20px; }

.location-buttons {
  align-self: center;
  margin: 10px; }

.location-quickjump {
  margin-left: 10px;
  margin-bottom: 10px; }

/* -------------------------
ACCOUNT SCREEN
------------------------- */
.block-list-item:nth-child(even) {
  background-color: #111827; }

.block-list-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px;
  align-items: center; }

.block-list-name {
  flex-basis: 60%; }

.block-list-type {
  flex-basis: 20%; }

/* -------------------------
OTHER
------------------------- */
.small-who-icon {
  float: left;
  padding: 15px; }

.who-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #111827;
  padding: 10px 0px 10px 0px; }

.icon-legend-heading {
  font-weight: bold;
  font-size: 1.25em;
  padding-top: 10px; }

.xp-progress {
  max-width: 100%;
  width: 200px;
  display: inline-block;
  margin-bottom: 5px;
  position: relative; }

.progress-value {
  width: 100%;
  text-align: center; }

.xp-ability {
  border-bottom: 1px solid #111827;
  padding: 5px;
  margin: 5px 0px;
  min-height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }

.xp-progress {
  flex-basis: 40%; }

.xp-ability-name {
  font-weight: bold;
  flex-basis: 20%; }

.xp-learning {
  flex-basis: 10%; }

.xp-list {
  margin: 5px 0px; }

.xp-list h1 {
  font-size: 1em; }

.fs3-damage-list {
  margin-bottom: 20px; }

.fs3-damage-block {
  border-bottom: 1px solid #111827;
  padding: 5px;
  margin: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.fs3-damage-title {
  font-weight: bold; }

.wiki-page-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }

.wiki-breadcrumbs {
  margin-bottom: 10px; }

.wiki-page-columns {
  column-count: 3; }

.diff ul {
  background-color: #f8f2df; }

.help-heading {
  margin-top: 5px; }

.help-topic img {
  max-width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px; }

ul.regular-help-list {
  list-style-type: square; }

ul.reference-help-list {
  padding-left: 25px; }

ul.reference-help-list li {
  display: inline; }

ul.reference-help-list > li:not(:last-child)::after {
  content: "\00b7";
  margin: 0 .25em; }

.reference-help-title {
  color: #3b3b3b;
  font-style: italic;
  font-weight: bold;
  padding-left: 25px; }

.emoji-example {
  font-size: 24px; }

.forum-reply-panel {
  padding: 10px; }

.idle-status {
  white-space: normal; }

.server-migration {
  padding-right: 10px; }

.server-plugin {
  padding-right: 15px; }

.prefs-list-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid #111827;
  padding: 10px; }

.prefs-list-description {
  padding-left: 20px; }

/*.char-scene-list li:before { content: "\2666  "; }*/
.event-signup-details {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; }

.event-signup-item {
  margin: 10px; }

.event-signup-char {
  flex-basis: 30%; }

.teststyle {
  color: green; }

@media (max-width: 1200px) {
  .left-sidebar {
    order: 2; }
  .right-sidebar {
    order: 2; }
  .site-title {
    font-size: 2em;
    max-height: 50px; }
  h1, h2 {
    font-size: 1.5em; }
  h3 {
    font-size: 1.25em; }
  .char-ability-title {
    font-size: 1.25em; }
  .body-wrap {
    flex-direction: column; }
  .profile-wrap {
    padding: 5px;
    flex-direction: column; }
  .profile-box {
    padding: 5px;
    margin: 5px; }
  .log-wrap {
    padding: 5px; }
  .log-box {
    padding: 5px;
    margin: 5px; }
  .container {
    padding-left: 0px;
    padding-right: 0px; }
  .profile-image-wrap, .profile-demo-wrap {
    padding: 5px; }
  .xp-ability {
    min-height: 100px; }
  .wiki-page-columns {
    column-count: 1; }
  .char-achievements {
    column-count: 1; }
  .navbar-collapse {
    background-color: #f8f2df; }
  .navbar-collapse ul {
    padding: 5px; }
  .navbar-dark .navbar-nav .nav-link {
    color: #141414; }
  .form-item {
    flex-direction: column; }
  .fs3-damage-block {
    flex-direction: column; }
  #sceneMenuCollapseButton {
    display: block; }
  .play-screen {
    flex-direction: column;
    flex-wrap: no-wrap; } }

@media (max-width: 768px) {
  .site-title {
    font-size: 1.5em; }
  .site-banner {
    flex-direction: column; }
  .left-sidebar {
    order: 2; }
  .right-sidebar {
    order: 2; }
  .left-body {
    order: 1; }
  .right-body {
    order: 1; }
  .play-scene-title,
  .play-scene-context-prompt {
    font-size: 1.2em;
    padding-left: 5px; }
  .live-scene-controls {
    padding-left: 5px; }
  .play-main {
    padding-left: 0px; }
  .scene-log {
    padding: 0px; }
  .scene-controls-right {
    flex-flow: column;
    flex-basis: 100%; }
  .scene-controls-left {
    flex-flow: column;
    flex-basis: 100%; }
  .scene-char-select,
  .scene-pose-select {
    width: 100%; } }

/* AGE OF HEROES MUSH - custom web theme */
:root {
  --aoh-paper: #f8f2df;
  --aoh-paper-light: #fffaf0;
  --aoh-panel: #fffdf6;
  --aoh-ink: #141414;
  --aoh-muted-ink: #3b3b3b;
  --aoh-blue: #1d4ed8;
  --aoh-red: #dc2626;
  --aoh-gold: #facc15;
  --aoh-cyan: #06b6d4;
  --aoh-deep-blue: #172554;
  --aoh-border: #111827;
  --aoh-scrollbar-track: #fff3b8;
  --aoh-nav-bg: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0.88),
    rgba(20, 20, 20, 0.72)
  );
  --aoh-nav-bg-strong: linear-gradient(
    180deg,
    rgba(20, 20, 20, 0.94),
    rgba(20, 20, 20, 0.82)
  );
  --aoh-soft-shadow: rgba(20, 20, 20, 0.18);
  --aoh-halftone-strip: url("/game/uploads/theme_images/halftone_strip.png");
  --aoh-readable-font: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aoh-caption-font: "Barlow Condensed", "Open Sans", sans-serif; }

/* Header image placement */
.site-title-container,
.game-title,
.game-header,
#game-header,
.header-wrap {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.55) 100%), url("/game/uploads/theme_images/background.png") !important;
  background-size: cover !important;
  background-position: center 58% !important;
  background-repeat: no-repeat !important;
  min-height: 225px;
  border-bottom: 4px solid var(--aoh-ink); }

/* Site title text over the skyline */
.site-title,
.site-title a,
.game-title,
.game-title a {
  color: var(--aoh-panel) !important;
  text-shadow: 3px 3px 0 #000, 5px 5px 0 rgba(220, 38, 38, 0.8);
  letter-spacing: 0.03em; }

.site-subtitle,
.game-subtitle {
  color: var(--aoh-panel) !important;
  text-shadow: 2px 2px 0 #000;
  font-weight: 700; }

/* Main navbar */
.navbar,
.navbar.navbar-expand,
.navbar.navbar-expand-lg,
.navbar-dark,
.navbar-light {
  background: var(--aoh-nav-bg) !important;
  border-top: 3px solid var(--aoh-ink) !important;
  border-bottom: 3px solid var(--aoh-ink) !important;
  box-shadow: 0 6px 0 rgba(20, 20, 20, 0.22) !important;
  font-weight: 800;
  letter-spacing: 0.03em; }

.navbar a,
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .navbar-brand,
.navbar .navbar-toggler,
.navbar i,
.navbar svg {
  color: var(--aoh-panel) !important; }

.navbar a,
.navbar .nav-link,
.navbar .dropdown-toggle {
  text-transform: uppercase;
  font-weight: 800;
  background: transparent !important; }

.navbar a:hover,
.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
  color: var(--aoh-gold) !important;
  background: rgba(220, 38, 38, 0.22) !important;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--aoh-red);
  text-underline-offset: 5px; }

.navbar .active > a,
.navbar .active .nav-link,
.navbar .fa-home,
.navbar .fa-house {
  color: var(--aoh-red) !important; }

/* Dropdowns */
.dropdown-menu {
  background: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink) !important;
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.28); }

.dropdown-menu a,
.dropdown-menu .dropdown-item {
  color: var(--aoh-ink) !important;
  font-weight: 800; }

.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
  background: var(--aoh-gold) !important;
  color: var(--aoh-ink) !important; }

/* User icon cluster in the upper right */
.site-controls a,
.user-controls a,
.header-controls a,
.login-status a {
  color: var(--aoh-panel) !important;
  text-shadow: 2px 2px 0 #000; }

.site-controls a:hover,
.user-controls a:hover,
.header-controls a:hover,
.login-status a:hover {
  color: var(--aoh-gold) !important; }

/* Wrapped/narrow navbar rows */
@media (max-width: 1200px) {
  header nav,
  header .navbar,
  header .navbar-expand,
  header .navbar-expand-lg,
  header .navbar-collapse,
  header .navbar-collapse.show,
  header .collapsing,
  header .navbar-nav,
  header .nav,
  header .nav-item,
  header .nav-link,
  .navbar,
  .navbar-expand,
  .navbar-expand-lg,
  .navbar-collapse,
  .navbar-collapse.show,
  .collapsing,
  .navbar-nav,
  .nav,
  .nav-item {
    background-color: transparent !important;
    background-image: none !important; }
  header .navbar,
  header .navbar-collapse,
  header .navbar-collapse.show,
  header .collapsing,
  .navbar,
  .navbar-collapse,
  .navbar-collapse.show,
  .collapsing {
    background: var(--aoh-nav-bg-strong) !important;
    border-top: 3px solid var(--aoh-ink) !important;
    border-bottom: 3px solid var(--aoh-ink) !important;
    box-shadow: 0 6px 0 rgba(20, 20, 20, 0.22) !important; }
  .navbar .nav-link,
  .navbar .dropdown-toggle {
    display: block;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(255, 253, 246, 0.18); }
  .navbar a:hover,
  .navbar .nav-link:hover,
  .navbar .dropdown-toggle:hover {
    color: var(--aoh-gold) !important;
    background: rgba(220, 38, 38, 0.22) !important;
    text-decoration: none; }
  .navbar-toggler {
    border: 3px solid var(--aoh-panel) !important;
    background: rgba(20, 20, 20, 0.7) !important;
    box-shadow: 3px 3px 0 var(--aoh-red); }
  .navbar-toggler-icon {
    filter: brightness(0) invert(1); } }

/* Global comic H1 headings */
h1 {
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel) !important;
  border: 4px solid var(--aoh-ink);
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.22), inset 0 -8px 0 rgba(20, 20, 20, 0.18);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 3px 3px 0 var(--aoh-ink), 5px 5px 0 var(--aoh-red); }

/* Comic H2 headings for player-facing content and sidebar modules.
   Do not use a bare h2 selector; admin/config editors need plain section headings. */
.homepage h2,
.home-page h2,
.home-content h2,
.home-page-content h2,
.homepage-text h2,
.markdown-content h2,
.wiki h2,
.wiki-page h2,
.wiki-content h2,
.scene h2,
.scene-log h2,
.log h2,
.log-page h2,
.profile h2,
.profile-page h2,
.character-profile h2,
.char-profile h2,
.forum h2,
.forum-topic h2,
.forum-post h2,
.sidebar h2,
.right-sidebar h2,
.sidebar-box h2,
.sidebar-container h2,
.side-bar h2,
.ares-sidebar h2,
.portal-sidebar h2,
.status-box h2,
.game-status h2,
.events-box h2,
.recent-scenes h2,
.recent-forum-posts h2,
.recent-changes h2,
.right-col h2,
.right-column h2,
.col-md-3 h2,
.col-lg-3 h2,
.col-sm-3 h2 {
  display: block;
  max-width: 900px;
  margin: 2rem auto 1rem auto;
  padding: 0.35rem 0.85rem;
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink);
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.22), inset 0 -6px 0 rgba(20, 20, 20, 0.16);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 rgba(220, 38, 38, 0.55); }

/* Plain H2 headings for admin/config/editor screens */
.config h2,
.config-page h2,
.admin h2,
.admin-page h2,
.setup h2,
.setup-page h2,
.edit-config h2,
.editor h2,
form h2 {
  display: block !important;
  max-width: none !important;
  margin: 1.75rem 0 0.75rem 0 !important;
  padding: 0.35rem 0.5rem !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--aoh-ink) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--aoh-border) !important;
  box-shadow: none !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important; }

/* Table headers */
thead,
thead tr,
thead th {
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel) !important;
  border-color: var(--aoh-ink) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 var(--aoh-red); }

thead th {
  padding: 0.55rem 0.75rem;
  border: 3px solid var(--aoh-ink) !important;
  font-weight: 900; }

/* Homepage layout */
.homepage,
.home-page,
.home-content,
.home-page-content,
.homepage-text,
.markdown-content {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto; }

.homepage img[src*="jumbotron"],
.home-page img[src*="jumbotron"],
.home-content img[src*="jumbotron"],
.home-page-content img[src*="jumbotron"],
.homepage-text img[src*="jumbotron"],
.markdown-content img[src*="jumbotron"],
img[src*="jumbotron.png"] {
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  height: auto !important;
  margin: 1rem auto 1.5rem auto !important;
  border: 4px solid var(--aoh-ink) !important;
  box-shadow: 8px 8px 0 rgba(20, 20, 20, 0.22) !important; }

/* Homepage intro blockquote
   Scoped so job/forum/wiki blockquotes do not get the homepage panel treatment. */
.homepage blockquote,
.home-page blockquote,
.home-content blockquote,
.home-page-content blockquote,
.homepage-text blockquote,
.aoh-home blockquote {
  position: relative !important;
  max-width: 900px !important;
  margin: 1.75rem auto 2.25rem auto !important;
  padding: 2.25rem 2.5rem 1.75rem 2.5rem !important;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 253, 246, 0.98)) !important;
  color: var(--aoh-ink) !important;
  border: 4px solid var(--aoh-ink) !important;
  border-left: 12px solid var(--aoh-red) !important;
  box-shadow: 8px 8px 0 rgba(20, 20, 20, 0.18), inset 0 0 0 4px rgba(250, 204, 21, 0.32) !important;
  overflow: hidden !important; }

.homepage blockquote::before,
.home-page blockquote::before,
.home-content blockquote::before,
.home-page-content blockquote::before,
.homepage-text blockquote::before,
.aoh-home blockquote::before {
  content: "" !important;
  position: absolute !important;
  top: -1rem !important;
  right: -1rem !important;
  width: 13rem !important;
  height: 13rem !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle, rgba(29, 78, 216, 0.18) 0, rgba(29, 78, 216, 0.18) 2px, transparent 3px) !important;
  background-size: 12px 12px !important;
  opacity: 0.8 !important; }

.homepage blockquote::after,
.home-page blockquote::after,
.home-content blockquote::after,
.home-page-content blockquote::after,
.homepage-text blockquote::after,
.aoh-home blockquote::after {
  content: "" !important;
  position: absolute !important;
  left: 1rem !important;
  bottom: 1rem !important;
  width: 4.5rem !important;
  height: 0.75rem !important;
  background: var(--aoh-gold) !important;
  border: 3px solid var(--aoh-ink) !important;
  box-shadow: 4px 4px 0 var(--aoh-red) !important;
  pointer-events: none !important; }

.homepage blockquote p,
.home-page blockquote p,
.home-content blockquote p,
.home-page-content blockquote p,
.homepage-text blockquote p,
.aoh-home blockquote p {
  position: relative !important;
  z-index: 1 !important;
  max-width: 68ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  font-size: 1.08rem !important;
  line-height: 1.62 !important; }

.homepage blockquote p:first-child,
.home-page blockquote p:first-child,
.home-content blockquote p:first-child,
.home-page-content blockquote p:first-child,
.homepage-text blockquote p:first-child,
.aoh-home blockquote p:first-child {
  display: table !important;
  margin: -0.25rem auto 1.25rem auto !important;
  padding: 0.35rem 0.85rem !important;
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink) !important;
  box-shadow: 4px 4px 0 rgba(20, 20, 20, 0.22) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 rgba(220, 38, 38, 0.55) !important; }

/* ============================================================
   Code Blocks
   Keeps pasted code readable in jobs, forums, wiki pages, and logs.
   ============================================================ */
.body-container pre,
.body-container code,
.display-job-block pre,
.display-job-block code,
.job-reply pre,
.job-reply code,
.markdown-content pre,
.markdown-content code,
.wiki-content pre,
.wiki-content code,
.forum-post pre,
.forum-post code,
.scene-log pre,
.scene-log code {
  font-family: "Courier New", Consolas, Monaco, monospace !important; }

.body-container pre,
.display-job-block pre,
.job-reply pre,
.markdown-content pre,
.wiki-content pre,
.forum-post pre,
.scene-log pre {
  display: block;
  max-width: 100%;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  background: #fffdf6 !important;
  color: #141414 !important;
  border: 3px solid var(--aoh-ink);
  border-left: 8px solid var(--aoh-blue);
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.14);
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto; }

.body-container code,
.display-job-block code,
.job-reply code,
.markdown-content code,
.wiki-content code,
.forum-post code,
.scene-log code {
  padding: 0.1rem 0.28rem;
  background: #fffaf0 !important;
  color: #141414 !important;
  border: 1px solid rgba(20, 20, 20, 0.35);
  font-size: 0.92em; }

/* General readable text */
.homepage p,
.home-page p,
.home-content p,
.home-page-content p,
.homepage-text p,
.markdown-content p {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--aoh-ink); }

/* Homepage Markdown table as feature cards */
.homepage table,
.home-page table,
.home-content table,
.home-page-content table,
.homepage-text table,
.markdown-content table {
  width: 100%;
  max-width: 960px;
  margin: 2rem auto;
  border-collapse: separate;
  border-spacing: 1rem 0;
  background: transparent !important;
  border: 0 !important; }

.homepage table th,
.homepage table td,
.home-page table th,
.home-page table td,
.home-content table th,
.home-content table td,
.home-page-content table th,
.home-page-content table td,
.homepage-text table th,
.homepage-text table td,
.markdown-content table th,
.markdown-content table td {
  width: 33.333%;
  background: var(--aoh-panel) !important;
  color: var(--aoh-ink) !important;
  border: 3px solid var(--aoh-ink) !important;
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.18);
  text-align: center;
  vertical-align: top; }

.homepage table th,
.home-page table th,
.home-content table th,
.home-page-content table th,
.homepage-text table th,
.markdown-content table th {
  padding: 0.65rem 0.75rem;
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  color: var(--aoh-panel) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 rgba(220, 38, 38, 0.55); }

.homepage table td,
.home-page table td,
.home-content table td,
.home-page-content table td,
.homepage-text table td,
.markdown-content table td {
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.5; }

/* Homepage call-to-action links */
.homepage h2 ~ p:last-child,
.home-page h2 ~ p:last-child,
.home-content h2 ~ p:last-child,
.home-page-content h2 ~ p:last-child,
.homepage-text h2 ~ p:last-child,
.markdown-content h2 ~ p:last-child {
  text-align: center; }

.homepage h2 ~ p:last-child a,
.home-page h2 ~ p:last-child a,
.home-content h2 ~ p:last-child a,
.home-page-content h2 ~ p:last-child a,
.homepage-text h2 ~ p:last-child a,
.markdown-content h2 ~ p:last-child a {
  display: inline-block;
  margin: 0.3rem;
  padding: 0.5rem 0.85rem;
  background: var(--aoh-blue);
  color: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink);
  box-shadow: 4px 4px 0 var(--aoh-red);
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none !important;
  letter-spacing: 0.04em; }

.homepage h2 ~ p:last-child a:hover,
.home-page h2 ~ p:last-child a:hover,
.home-content h2 ~ p:last-child a:hover,
.home-page-content h2 ~ p:last-child a:hover,
.homepage-text h2 ~ p:last-child a:hover,
.markdown-content h2 ~ p:last-child a:hover {
  background: var(--aoh-gold);
  color: var(--aoh-ink) !important;
  box-shadow: 4px 4px 0 var(--aoh-blue); }

/* Character profile pages */
.profile,
.char-profile,
.character-profile,
.profile-page {
  background-color: var(--aoh-paper) !important; }

.profile-wrap,
.profile-box,
.profile-container,
.character-profile,
.profile-page {
  background-color: rgba(255, 250, 240, 0.86) !important; }

/* Profile title */
h1.profile-title,
.profile-title {
  display: block;
  max-width: 1180px;
  margin: 0 auto 1.25rem auto;
  padding: 0.65rem 1rem;
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel) !important;
  border: 4px solid var(--aoh-ink);
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.22), inset 0 -8px 0 rgba(20, 20, 20, 0.18);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-shadow: 3px 3px 0 var(--aoh-ink), 5px 5px 0 var(--aoh-red);
  font-size: 2.4rem; }

/* Angular raised comic-panel profile image */
img.profile-image,
.profile-image img,
.char-image img,
.character-profile img.profile-icon,
.character-profile img.profile-image {
  display: block !important;
  background: linear-gradient(135deg, #fffdf6 0%, #fffdf6 68%, #e8dfc5 68%, #e8dfc5 100%) !important;
  padding: 0.7rem !important;
  border: 5px solid var(--aoh-ink) !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 0 3px #fffdf6, 0 0 0 7px var(--aoh-ink), 8px 8px 0 rgba(20, 20, 20, 0.16), 0 16px 24px rgba(20, 20, 20, 0.28);
  filter: contrast(1.03) saturate(0.98);
  transform: none !important; }

.profile-image,
.char-image {
  position: relative;
  display: inline-block; }

.profile-image::before,
.profile-image::after,
.char-image::before,
.char-image::after {
  content: none !important; }

img.profile-image:hover,
.profile-image img:hover,
.char-image img:hover,
.character-profile img.profile-icon:hover,
.character-profile img.profile-image:hover {
  transform: none !important;
  box-shadow: 0 0 0 3px #fffdf6, 0 0 0 7px var(--aoh-ink), 8px 8px 0 rgba(20, 20, 20, 0.16), 0 16px 24px rgba(20, 20, 20, 0.28); }

/* Profile data tables */
.profile table,
.profile-page table,
.character-profile table,
.char-profile table,
.profile-demographics table,
.profile-info table {
  background: var(--aoh-panel) !important;
  border: 4px solid var(--aoh-ink) !important;
  border-collapse: collapse !important;
  box-shadow: 8px 8px 0 rgba(20, 20, 20, 0.18); }

.profile table th,
.profile table td,
.profile-page table th,
.profile-page table td,
.character-profile table th,
.character-profile table td,
.char-profile table th,
.char-profile table td,
.profile-demographics table th,
.profile-demographics table td,
.profile-info table th,
.profile-info table td {
  background: rgba(255, 253, 246, 0.96) !important;
  color: var(--aoh-ink) !important;
  border-bottom: 2px solid var(--aoh-border) !important;
  padding: 0.7rem 0.9rem !important;
  vertical-align: middle;
  font-size: 1.05rem; }

.profile table th,
.profile-page table th,
.character-profile table th,
.char-profile table th,
.profile-demographics table th,
.profile-info table th {
  width: 38%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--aoh-ink) !important; }

.profile table td,
.profile-page table td,
.character-profile table td,
.char-profile table td,
.profile-demographics table td,
.profile-info table td {
  font-weight: 500; }

.profile table tr td[colspan],
.profile-page table tr td[colspan],
.character-profile table tr td[colspan],
.char-profile table tr td[colspan],
.profile table tr th[colspan],
.profile-page table tr th[colspan],
.character-profile table tr th[colspan],
.char-profile table tr th[colspan] {
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  color: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink) !important;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 rgba(220, 38, 38, 0.55); }

.table.profile-table,
.profile .table,
.character-profile .table {
  --bs-table-bg: var(--aoh-panel);
  --bs-table-striped-bg: #fffaf0;
  --bs-table-color: var(--aoh-ink);
  --bs-table-striped-color: var(--aoh-ink); }

.profile table tr:nth-child(even) th,
.profile table tr:nth-child(even) td,
.profile-page table tr:nth-child(even) th,
.profile-page table tr:nth-child(even) td,
.character-profile table tr:nth-child(even) th,
.character-profile table tr:nth-child(even) td,
.char-profile table tr:nth-child(even) th,
.char-profile table tr:nth-child(even) td {
  background: var(--aoh-paper-light) !important; }

/* Mobile */
@media (max-width: 900px) {
  .homepage img[src*="jumbotron"],
  .home-page img[src*="jumbotron"],
  .home-content img[src*="jumbotron"],
  .home-page-content img[src*="jumbotron"],
  .homepage-text img[src*="jumbotron"],
  .markdown-content img[src*="jumbotron"],
  img[src*="jumbotron.png"] {
    width: 96% !important;
    max-width: 96% !important; }
  .homepage h1,
  .home-page h1,
  .home-content h1,
  .home-page-content h1,
  .homepage-text h1,
  .markdown-content h1,
  h1.profile-title,
  .profile-title {
    max-width: 96%;
    font-size: 1.45rem;
    letter-spacing: 0.03em; }
  .homepage table,
  .home-page table,
  .home-content table,
  .home-page-content table,
  .homepage-text table,
  .markdown-content table,
  .homepage table thead,
  .home-page table thead,
  .home-content table thead,
  .home-page-content table thead,
  .homepage-text table thead,
  .markdown-content table thead,
  .homepage table tbody,
  .home-page table tbody,
  .home-content table tbody,
  .home-page-content table tbody,
  .homepage-text table tbody,
  .markdown-content table tbody,
  .homepage table tr,
  .home-page table tr,
  .home-content table tr,
  .home-page-content table tr,
  .homepage-text table tr,
  .markdown-content table tr,
  .homepage table th,
  .home-page table th,
  .home-content table th,
  .home-page-content table th,
  .homepage-text table th,
  .markdown-content table th,
  .homepage table td,
  .home-page table td,
  .home-content table td,
  .home-page-content table td,
  .homepage-text table td,
  .markdown-content table td {
    display: block;
    width: 100%; }
  .homepage table,
  .home-page table,
  .home-content table,
  .home-page-content table,
  .homepage-text table,
  .markdown-content table {
    border-spacing: 0; }
  .homepage table th,
  .home-page table th,
  .home-content table th,
  .home-page-content table th,
  .homepage-text table th,
  .markdown-content table th {
    margin-top: 1rem; }
  .homepage blockquote,
  .home-page blockquote,
  .home-content blockquote,
  .home-page-content blockquote,
  .homepage-text blockquote,
  .aoh-home blockquote {
    padding: 1.25rem !important; }
  .homepage p,
  .home-page p,
  .home-content p,
  .home-page-content p,
  .homepage-text p,
  .markdown-content p {
    font-size: 1rem;
    line-height: 1.55; }
  .profile table th,
  .profile table td,
  .profile-page table th,
  .profile-page table td,
  .character-profile table th,
  .character-profile table td,
  .char-profile table th,
  .char-profile table td {
    display: block;
    width: 100%; }
  .profile table th,
  .profile-page table th,
  .character-profile table th,
  .char-profile table th {
    border-bottom: 0 !important;
    padding-bottom: 0.25rem !important; }
  .profile table td,
  .profile-page table td,
  .character-profile table td,
  .char-profile table td {
    padding-top: 0.25rem !important; } }

/* Wiki TOC: float right so opening text wraps around it */
.body-container .toc {
  float: right;
  width: 26rem;
  max-width: 38%;
  margin: 0 0 1.5rem 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--aoh-panel, #fffdf6);
  border: 2px solid var(--aoh-border, #111827);
  border-radius: 0.5rem;
  box-shadow: 8px 8px 0 rgba(220, 38, 38, 0.45);
  position: relative;
  z-index: 1; }

.body-container .toc h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--aoh-ink, #141414); }

.body-container .toc ul {
  margin-bottom: 0;
  padding-left: 1.4rem; }

.body-container .toc li {
  margin-bottom: 0.25rem;
  line-height: 1.25; }

/* Keep wiki text from crashing into the floated TOC */
.body-container .toc + p {
  margin-top: 0; }

/* Mobile/tablet: put the TOC back above the article */
@media screen and (max-width: 900px) {
  .body-container .toc {
    float: none;
    width: auto;
    max-width: none;
    margin: 0 0 1.5rem 0; } }

/* AGE OF HEROES HOMEPAGE */
.aoh-home {
  max-width: 1180px;
  margin: 0 auto 3rem auto;
  padding: 0 0.75rem; }

.aoh-home,
.aoh-home p {
  color: var(--aoh-ink); }

.aoh-issue-panel {
  position: relative;
  max-width: 980px;
  margin: 1.5rem auto 2rem auto;
  padding: 2.25rem 2.5rem 2rem 2.5rem;
  background: radial-gradient(circle at top right, rgba(250, 204, 21, 0.3) 0, rgba(250, 204, 21, 0.3) 18%, transparent 19%), linear-gradient(180deg, var(--aoh-paper-light), var(--aoh-panel));
  border: 5px solid var(--aoh-ink);
  box-shadow: 10px 10px 0 rgba(20, 20, 20, 0.22), inset 0 0 0 5px rgba(250, 204, 21, 0.35);
  overflow: hidden; }

.aoh-issue-panel::before {
  content: "";
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 16rem;
  height: 16rem;
  background-image: radial-gradient(circle, rgba(29, 78, 216, 0.24) 0, rgba(29, 78, 216, 0.24) 2px, transparent 3px);
  background-size: 12px 12px;
  pointer-events: none; }

.aoh-issue-panel::after {
  content: "";
  position: absolute;
  left: -3rem;
  bottom: 1.5rem;
  width: 12rem;
  height: 1.25rem;
  background: var(--aoh-red);
  border: 3px solid var(--aoh-ink);
  transform: rotate(-7deg);
  box-shadow: 5px 5px 0 var(--aoh-gold);
  pointer-events: none; }

.aoh-kicker {
  position: relative;
  z-index: 1;
  display: table;
  margin: 0 auto 1.25rem auto;
  padding: 0.35rem 0.85rem;
  background: var(--aoh-gold);
  color: var(--aoh-ink);
  border: 3px solid var(--aoh-ink);
  box-shadow: 4px 4px 0 var(--aoh-red);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em; }

.aoh-issue-panel h1 {
  position: relative;
  z-index: 1;
  margin: 0 auto 0.5rem auto;
  padding: 0.65rem 1rem;
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  color: var(--aoh-panel) !important;
  border: 4px solid var(--aoh-ink);
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.24), inset 0 -8px 0 rgba(20, 20, 20, 0.18);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 3px 3px 0 var(--aoh-ink), 5px 5px 0 var(--aoh-red); }

.aoh-tagline {
  position: relative;
  z-index: 1;
  margin: 1rem auto 1.4rem auto !important;
  max-width: 42rem !important;
  font-family: "Bangers", system-ui, sans-serif;
  font-size: 2rem !important;
  line-height: 1.1 !important;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--aoh-ink); }

.aoh-issue-panel p {
  position: relative;
  z-index: 1;
  max-width: 72ch;
  margin: 0.85rem auto;
  font-size: 1.05rem;
  line-height: 1.65;
  text-align: center; }

.aoh-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin: 2rem auto; }

.aoh-feature-card {
  background: var(--aoh-panel);
  border: 4px solid var(--aoh-ink);
  box-shadow: 7px 7px 0 rgba(20, 20, 20, 0.2); }

.aoh-feature-card h2 {
  margin: 0 !important;
  padding: 0.65rem 0.75rem !important;
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  color: var(--aoh-panel) !important;
  border: 0 !important;
  border-bottom: 4px solid var(--aoh-ink) !important;
  box-shadow: none !important;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem !important;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 var(--aoh-red); }

.aoh-feature-card:nth-child(2) h2 {
  background-color: var(--aoh-red) !important; }

.aoh-feature-card:nth-child(3) h2 {
  background-color: var(--aoh-deep-blue) !important; }

.aoh-feature-card p {
  margin: 0;
  padding: 1.15rem 1.1rem 1.25rem 1.1rem;
  font-size: 1rem;
  line-height: 1.55;
  text-align: center;
  font-weight: 700; }

.aoh-start-panel {
  position: relative;
  max-width: 900px;
  margin: 2.75rem auto;
  padding: 2rem 1.5rem;
  background: var(--aoh-panel);
  border: 5px solid var(--aoh-ink);
  box-shadow: 9px 9px 0 rgba(20, 20, 20, 0.2);
  text-align: center; }

.aoh-start-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(29, 78, 216, 0.08) 25%, transparent 25%), linear-gradient(225deg, rgba(220, 38, 38, 0.08) 25%, transparent 25%);
  background-size: 22px 22px;
  opacity: 0.7;
  pointer-events: none; }

.aoh-caption {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: -3.2rem auto 1rem auto;
  padding: 0.4rem 1rem;
  background: var(--aoh-gold);
  color: var(--aoh-ink);
  border: 4px solid var(--aoh-ink);
  box-shadow: 5px 5px 0 var(--aoh-red);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

.aoh-start-panel p {
  position: relative;
  z-index: 1;
  margin: 0.75rem auto 1.25rem auto;
  max-width: 46rem;
  font-size: 1.2rem;
  line-height: 1.55; }

.aoh-button-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem; }

.aoh-button-row a,
.aoh-discord-link {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: var(--aoh-blue);
  color: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink);
  box-shadow: 4px 4px 0 var(--aoh-red);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none !important; }

.aoh-button-row a:hover,
.aoh-discord-link:hover {
  background: var(--aoh-gold);
  color: var(--aoh-ink) !important;
  box-shadow: 4px 4px 0 var(--aoh-blue); }

.aoh-discord-panel {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 920px;
  margin: 3rem auto 1rem auto;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.98), rgba(255, 250, 240, 0.98));
  border: 4px solid var(--aoh-ink);
  box-shadow: 8px 8px 0 rgba(20, 20, 20, 0.18); }

.aoh-discord-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  background: var(--aoh-paper-light);
  border: 3px solid var(--aoh-ink);
  box-shadow: 5px 5px 0 var(--aoh-blue); }

.aoh-discord-icon img {
  display: block;
  max-width: 125px;
  height: auto;
  padding: 0; }

.aoh-discord-copy {
  text-align: left; }

.aoh-discord-copy p {
  margin: 0 0 0.9rem 0;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.6; }

.aoh-discord-lede {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem !important;
  font-weight: 900;
  line-height: 1.25 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .aoh-issue-panel {
    padding: 1.4rem 1.15rem 1.35rem 1.15rem; }
  .aoh-issue-panel h1 {
    font-size: 1.6rem !important; }
  .aoh-tagline {
    font-size: 1.6rem !important; }
  .aoh-feature-grid {
    grid-template-columns: 1fr; }
  .aoh-discord-panel {
    grid-template-columns: 1fr;
    text-align: center; }
  .aoh-discord-copy {
    text-align: center; }
  .aoh-discord-copy p {
    margin-left: auto;
    margin-right: auto; } }

/* HOMEPAGE CLAIM PANEL */
.aoh-claim-panel {
  position: relative;
  max-width: 980px;
  margin: 2.75rem auto;
  padding: 2rem 1.5rem 1.6rem 1.5rem;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.98), rgba(255, 250, 240, 0.98));
  border: 5px solid var(--aoh-ink);
  box-shadow: 9px 9px 0 rgba(20, 20, 20, 0.2);
  text-align: center; }

.aoh-claim-panel > p {
  max-width: 62ch;
  margin: 0.8rem auto 1.2rem auto;
  font-size: 1.08rem;
  line-height: 1.6; }

.aoh-claim-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.4rem auto 1.3rem auto; }

.aoh-claim-step {
  position: relative;
  padding: 1rem 0.85rem 0.95rem 0.85rem;
  background: var(--aoh-panel);
  border: 3px solid var(--aoh-ink);
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.18);
  text-align: center; }

.aoh-claim-step span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: -1.9rem auto 0.7rem auto;
  background: var(--aoh-red);
  color: var(--aoh-panel);
  border: 3px solid var(--aoh-ink);
  box-shadow: 3px 3px 0 var(--aoh-gold);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 900; }

.aoh-claim-step p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.5;
  font-weight: 700; }

.aoh-claim-step a {
  color: var(--aoh-blue);
  font-weight: 900; }

.aoh-claim-note {
  display: inline-block;
  padding: 0.65rem 0.9rem;
  background: var(--aoh-gold);
  border: 3px solid var(--aoh-ink);
  box-shadow: 4px 4px 0 var(--aoh-red);
  font-weight: 900; }

@media (max-width: 1000px) {
  .aoh-claim-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem; } }

@media (max-width: 600px) {
  .aoh-claim-steps {
    grid-template-columns: 1fr; } }

/* ============================================================
   Live Scene Reading Area
   ============================================================ */
.scene-log {
  overflow: visible; }

.scene-pose,
.scene-set-pose,
.scene-system-pose {
  font-family: var(--aoh-readable-font);
  overflow-wrap: break-word;
  max-width: none;
  width: 100%; }

/* ============================================================
   Pose Timestamp / Action Controls
   Ares places this before .scene-pose-header as .hint.float-end.
   This version lets it sit over the yellow header instead of
   becoming a separate jagged tab.
   ============================================================ */
.scene-log > .hint.float-end {
  position: relative;
  z-index: 5;
  float: right;
  clear: right;
  min-width: 10.5rem;
  min-height: 2.55rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0.72rem 0.55rem -2.95rem 0;
  padding: 0.35rem 0.15rem 0.25rem;
  color: #141414;
  text-align: right; }

.scene-log > .hint.float-end .timestamp-tip {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
  line-height: 1.05;
  font-weight: 800;
  color: #172554;
  white-space: nowrap; }

.scene-log > .hint.float-end .tooltip-button {
  margin-top: 0.18rem; }

.scene-log > .hint.float-end i {
  color: var(--aoh-red); }

/* Empty action blocks for system messages should not create space */
.scene-log > .hint.float-end:empty {
  display: none; }

/* ============================================================
   Pose Header / Caption Strip
   ============================================================ */
.scene-pose-header {
  position: relative;
  z-index: 2;
  clear: both;
  background: radial-gradient(circle, rgba(20, 20, 20, 0.04) 1px, transparent 1px), #f4dd8a;
  background-size: 10px 10px;
  color: #141414;
  border: 3px solid #141414;
  border-bottom: 2px solid #141414;
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.14);
  margin: 0.7rem 0 0;
  padding: 0.32rem 11.25rem 0.32rem 0.65rem;
  min-height: 3.05rem;
  display: flex;
  align-items: center;
  font-family: var(--aoh-caption-font);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  overflow: hidden; }

.scene-pose-header .btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #172554;
  text-decoration: none; }

.scene-pose-header .btn-link:hover,
.scene-pose-header .btn-link:focus,
.scene-pose-header a:hover,
.scene-pose-header a:focus {
  color: var(--aoh-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; }

.scene-pose-header img,
.scene-pose .scene-icon img {
  border: 2px solid #141414; }

/* ============================================================
   Regular Scene Poses: Comic Panel Styling
   ============================================================ */
.scene-pose {
  position: relative;
  z-index: 1;
  clear: both;
  background: #fffaf0;
  color: #080808;
  border: 3px solid #141414;
  border-top: 0;
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.14);
  margin: 0 0 1rem;
  padding: 1rem 1.25rem 1.1rem;
  font-family: "Open Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.58;
  font-weight: 600;
  letter-spacing: 0;
  overflow: hidden; }

/* Red halftone accent inside the pose panel */
.scene-pose::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 5.25rem;
  height: 5.25rem;
  background-image: radial-gradient(circle, rgba(220, 38, 38, 0.22) 1.2px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.55;
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 0; }

/* Blue halftone accent inside the pose panel */
.scene-pose::after {
  content: "";
  position: absolute;
  left: -2rem;
  bottom: -2rem;
  width: 5rem;
  height: 5rem;
  background-image: radial-gradient(circle, rgba(29, 78, 216, 0.14) 1.2px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.5;
  transform: rotate(10deg);
  pointer-events: none;
  z-index: 0; }

.scene-pose > * {
  position: relative;
  z-index: 1; }

.scene-pose p {
  margin: 0 0 0.85rem; }

.scene-pose p:last-child {
  margin-bottom: 0; }

.scene-pose em,
.scene-pose i,
.scene-pose strong,
.scene-pose b {
  color: #080808; }

/* ============================================================
   Scene Set Poses: Comic Opening / Transition Narration
   ============================================================ */
.scene-set-pose {
  position: relative;
  z-index: 1;
  clear: both;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(255, 253, 246, 0.96) 42%), #fffdf6;
  border: 3px solid var(--aoh-border);
  border-left: 10px solid var(--aoh-red);
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.18);
  padding: 0.9rem 1.05rem 1rem 1.15rem;
  margin: 0 0 1.25rem;
  color: var(--aoh-ink);
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  font-style: normal;
  overflow: hidden; }

/* Small caption tag */
.scene-set-pose::before {
  content: "MEANWHILE...";
  display: inline-block;
  background: var(--aoh-gold);
  color: var(--aoh-ink);
  border: 2px solid var(--aoh-border);
  box-shadow: 3px 3px 0 var(--aoh-blue);
  padding: 0.12rem 0.45rem;
  margin: 0 0 0.45rem;
  font-family: var(--aoh-caption-font);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  z-index: 1; }

/* Red halftone accent for scene set poses */
.scene-set-pose::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 145px;
  height: 145px;
  background-image: radial-gradient(circle, rgba(220, 38, 38, 0.2) 1.5px, transparent 1.7px);
  background-size: 9px 9px;
  transform: rotate(-8deg);
  pointer-events: none;
  opacity: 0.85;
  z-index: 0; }

.scene-set-pose > * {
  position: relative;
  z-index: 1; }

.scene-set-pose p {
  margin: 0 0 0.55rem; }

.scene-set-pose p:last-child {
  margin-bottom: 0; }

.scene-set-pose em,
.scene-set-pose i {
  font-style: italic; }

/* ============================================================
   System Poses
   ============================================================ */
.scene-system-pose {
  clear: both;
  background: rgba(255, 253, 246, 0.75);
  border-left: 4px solid rgba(59, 59, 59, 0.35);
  margin: 0.65rem 0;
  padding: 0.45rem 0.75rem;
  color: var(--aoh-muted-ink);
  font-family: var(--aoh-readable-font);
  font-size: 13.5px;
  line-height: 1.45;
  font-style: italic; }

.scene-system-pose p {
  margin: 0; }

/* ============================================================
   Character Directory: Comic Card Name Labels
   White readable plate with comic outer edge
   ============================================================ */
.icon-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1.55rem 1.35rem;
  align-items: flex-start;
  padding: 1rem 0.8rem 1.4rem; }

.icon-gallery-item {
  position: relative;
  overflow: visible; }

.char-icon-container {
  position: relative;
  display: inline-block;
  overflow: visible;
  padding-bottom: 1.35rem; }

/* Character image card */
.char-icon-container .log-icon-container {
  position: relative;
  z-index: 1; }

.char-icon-container .log-icon {
  display: block;
  border: 3px solid var(--aoh-ink);
  border-radius: 1.15rem;
  box-shadow: 4px 4px 0 rgba(20, 20, 20, 0.18), 0 0 0 2px rgba(255, 253, 246, 0.6);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease; }

.char-icon-container:hover .log-icon,
.char-icon-container:focus-within .log-icon {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(20, 20, 20, 0.2), 0 0 0 3px rgba(250, 204, 21, 0.45);
  filter: saturate(1.08) contrast(1.04); }

/* Reset Ares title strip and anchor the plate at the bottom */
.char-icon-container .log-icon-title-container {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -0.08rem !important;
  z-index: 4 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  text-align: center !important;
  pointer-events: none; }

/* Main readable name plate */
.char-icon-container .log-icon-title {
  position: relative !important;
  display: inline-block !important;
  min-width: 6.35rem !important;
  max-width: 8.85rem !important;
  margin: 0 !important;
  padding: 0.28rem 0.78rem 0.31rem !important;
  background: #fffdf6 !important;
  background-color: #fffdf6 !important;
  background-image: none !important;
  border: 3px solid #141414 !important;
  border-radius: 0.42rem !important;
  color: #141414 !important;
  opacity: 1 !important;
  filter: none !important;
  font-family: var(--aoh-caption-font) !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 2px #facc15, 0 0 0 5px #1d4ed8, 3px 3px 0 #dc2626, 6px 6px 0 rgba(20, 20, 20, 0.18) !important;
  transform: rotate(-1deg) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important; }

/* Force any inner links/spans to stay readable */
.char-icon-container .log-icon-title *,
.char-icon-container .log-icon-title a,
.char-icon-container .log-icon-title a:link,
.char-icon-container .log-icon-title a:visited,
.char-icon-container .log-icon-title a:hover,
.char-icon-container .log-icon-title a:focus,
.char-icon-container .log-icon-title .btn-link {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #141414 !important;
  opacity: 1 !important;
  filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important; }

/* Remove prior decorative pseudo-elements so nothing crosses the text */
.char-icon-container .log-icon-title::before,
.char-icon-container .log-icon-title::after {
  content: none !important;
  display: none !important; }

/* Hover pop */
.char-icon-container:hover .log-icon-title,
.char-icon-container:focus-within .log-icon-title {
  transform: rotate(-1deg) translateY(-2px) !important;
  box-shadow: 0 0 0 2px #facc15, 0 0 0 5px #1d4ed8, 4px 4px 0 #dc2626, 7px 7px 0 rgba(20, 20, 20, 0.2) !important; }

/* No-icon cards still get clean framing */
.char-icon-container .log-icon[src*="noicon"] {
  background: var(--aoh-ink); }

/* ============================================================
   PART 2 OF 4
   AGE OF HEROES MUSH CUSTOM SCSS
   Source: Custom SCSS.txt
   Search key: PART 2
   ============================================================ */
/* ============================================================
   Play Screen: Channel / Chat Log Cleanup
   Compact comic styling for chat only
   ============================================================ */
#chat-window {
  background: #fffaf0;
  border: 2px solid var(--aoh-border);
  box-shadow: inset 0 0 0 2px rgba(20, 20, 20, 0.04);
  padding: 0.65rem 0.85rem;
  margin: 0.65rem 0 0;
  color: var(--aoh-ink);
  font-family: var(--aoh-readable-font);
  font-size: 14px;
  line-height: 1.42; }

/* Timestamp area */
#chat-window > .hint.float-end,
#chat-window .hint.float-end {
  position: relative !important;
  z-index: 1 !important;
  float: right !important;
  clear: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0.28rem 0 0.1rem 0.75rem !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--aoh-muted-ink) !important;
  text-align: right !important; }

#chat-window .timestamp-tip {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: var(--aoh-muted-ink) !important;
  white-space: nowrap; }

/* Speaker label */
#chat-window .scene-pose-header {
  position: relative !important;
  z-index: 1 !important;
  clear: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0.18rem 0 0.08rem 0 !important;
  padding: 0.1rem 0.15rem 0.14rem 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--aoh-ink) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  overflow: visible !important; }

/* Character/system name link */
#chat-window .scene-pose-header a,
#chat-window .scene-pose-header .btn-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--aoh-blue) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-decoration: none !important; }

#chat-window .scene-pose-header a:hover,
#chat-window .scene-pose-header a:focus {
  color: var(--aoh-red) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important; }

/* Small profile icon */
#chat-window .scene-pose-header img,
#chat-window .scene-pose-header .small-profile-icon {
  width: 1.65rem !important;
  height: 1.65rem !important;
  margin: 0 !important;
  border: 2px solid rgba(20, 20, 20, 0.5) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  object-fit: cover; }

/* Message text */
#chat-window .scene-pose-header + span {
  display: block;
  clear: both;
  margin: 0 0 0.42rem 0;
  padding: 0 0 0.42rem 0.15rem;
  border-bottom: 1px dotted rgba(20, 20, 20, 0.22);
  color: var(--aoh-ink);
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.42;
  font-weight: 500; }

#chat-window .scene-pose-header + span p {
  margin: 0; }

/* System messages */
#chat-window .scene-pose-header a[href="/char/System"],
#chat-window .scene-pose-header a[href$="/char/System"] {
  color: var(--aoh-red) !important; }

/* Last message cleanup */
#chat-window .scene-pose-header + span:last-child {
  border-bottom: 0;
  margin-bottom: 0; }

/* ============================================================
   Forum Index: Readable Comic Panel Table
   Targets the Ares forum list table directly.
   Must stay near the end of custom_style.scss.
   ============================================================ */
.body-container.left-body > table.table.table-striped {
  width: 100% !important;
  margin: 1rem 0 1.5rem !important;
  background: #fffaf0 !important;
  border: 3px solid var(--aoh-ink) !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.14) !important;
  color: var(--aoh-ink) !important;
  font-family: var(--aoh-readable-font) !important;
  font-size: 14.5px !important;
  line-height: 1.42 !important; }

/* Header row */
.body-container.left-body > table.table.table-striped > thead,
.body-container.left-body > table.table.table-striped > thead > tr,
.body-container.left-body > table.table.table-striped > thead th {
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink) !important;
  font-family: var(--aoh-caption-font) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 var(--aoh-red) !important; }

.body-container.left-body > table.table.table-striped > thead th {
  padding: 0.45rem 0.65rem !important; }

/* Body rows */
.body-container.left-body > table.table.table-striped > tbody > tr {
  background: #fffdf6 !important;
  border-bottom: 2px solid rgba(20, 20, 20, 0.22) !important; }

.body-container.left-body > table.table.table-striped > tbody > tr:nth-child(even) {
  background: #fffaf0 !important; }

.body-container.left-body > table.table.table-striped > tbody > tr:hover {
  background: rgba(250, 204, 21, 0.12) !important; }

/* Body cells */
.body-container.left-body > table.table.table-striped > tbody > tr > td {
  padding: 0.68rem 0.65rem !important;
  vertical-align: middle !important;
  background: transparent !important;
  color: var(--aoh-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--aoh-readable-font) !important;
  font-size: 14.5px !important;
  line-height: 1.42 !important; }

/* Status/new activity icon column */
.body-container.left-body > table.table.table-striped > tbody > tr > td:first-child {
  width: 2.35rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.35rem !important;
  text-align: center !important; }

/* Category column */
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(2) {
  width: 13.5rem !important;
  font-family: var(--aoh-caption-font) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.015em !important; }

/* Category links */
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(2) a {
  color: var(--aoh-red) !important;
  font-weight: 800 !important;
  text-decoration: none !important; }

.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(2) a:hover,
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(2) a:focus {
  color: var(--aoh-blue) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important; }

/* Description column */
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(3) {
  color: var(--aoh-ink) !important;
  font-size: 14px !important;
  line-height: 1.38 !important; }

.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(3) p {
  max-width: none !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important; }

/* Last Post column: smaller and denser */
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) {
  width: 16rem !important;
  min-width: 14rem !important;
  color: var(--aoh-muted-ink) !important;
  font-size: 12.25px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important; }

/* Force nested Last Post text to stay compact */
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) *,
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) span {
  font-size: inherit !important;
  line-height: inherit !important; }

/* Last Post links */
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) a {
  color: var(--aoh-red) !important;
  font-weight: 700 !important;
  text-decoration: none !important; }

.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) a:hover,
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) a:focus {
  color: var(--aoh-blue) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 2px !important; }

/* Last Post avatar */
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) img,
.body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) .tiny-profile-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.25rem !important;
  border: 1px solid rgba(20, 20, 20, 0.45) !important;
  border-radius: 50% !important;
  object-fit: cover !important; }

/* Hide/category action column */
.body-container.left-body > table.table.table-striped > tbody > tr > td:last-child {
  width: 2.35rem !important;
  text-align: center !important;
  padding-left: 0.35rem !important;
  padding-right: 0.45rem !important; }

.body-container.left-body > table.table.table-striped .tooltip-button {
  padding: 0.1rem 0.2rem !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important; }

/* Action buttons above the forum table */
.body-container.left-body .action-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0.85rem; }

.body-container.left-body .action-buttons .btn {
  background: #fffdf6 !important;
  color: var(--aoh-ink) !important;
  border: 2px solid var(--aoh-ink) !important;
  border-radius: 0.4rem;
  box-shadow: 3px 3px 0 rgba(20, 20, 20, 0.14);
  font-family: var(--aoh-readable-font);
  font-size: 0.9rem;
  font-weight: 700; }

.body-container.left-body .action-buttons .btn:hover,
.body-container.left-body .action-buttons .btn:focus {
  background: var(--aoh-gold) !important;
  color: var(--aoh-ink) !important;
  box-shadow: 3px 3px 0 var(--aoh-blue); }

/* Mobile: keep it readable */
@media (max-width: 900px) {
  .body-container.left-body > table.table.table-striped {
    font-size: 14px !important; }
  .body-container.left-body > table.table.table-striped > tbody > tr > td {
    padding: 0.55rem 0.5rem !important; }
  .body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(2),
  .body-container.left-body > table.table.table-striped > tbody > tr > td:nth-child(4) {
    width: auto !important;
    min-width: 0 !important; } }

/* ============================================================
   Forum Category: Post List Table
   Matches the readable comic panel style used on the forum index.
   Must stay near the end of custom_style.scss.
   ============================================================ */
.body-container.left-body > .ember-view > table.table.table-striped {
  width: 100% !important;
  margin: 1rem 0 1.5rem !important;
  background: #fffaf0 !important;
  border: 3px solid var(--aoh-ink) !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  box-shadow: 6px 6px 0 rgba(20, 20, 20, 0.14) !important;
  color: var(--aoh-ink) !important;
  font-family: var(--aoh-readable-font) !important;
  font-size: 14.5px !important;
  line-height: 1.42 !important; }

/* Header row */
.body-container.left-body > .ember-view > table.table.table-striped > thead,
.body-container.left-body > .ember-view > table.table.table-striped > thead > tr,
.body-container.left-body > .ember-view > table.table.table-striped > thead th {
  background-color: var(--aoh-blue) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel) !important;
  border: 3px solid var(--aoh-ink) !important;
  font-family: var(--aoh-caption-font) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  text-shadow: 2px 2px 0 var(--aoh-ink), 3px 3px 0 var(--aoh-red) !important; }

.body-container.left-body > .ember-view > table.table.table-striped > thead th {
  padding: 0.45rem 0.65rem !important; }

/* Body rows */
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr {
  background: #fffdf6 !important;
  border-bottom: 2px solid rgba(20, 20, 20, 0.22) !important; }

.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr:nth-child(even) {
  background: #fffaf0 !important; }

.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr:hover {
  background: rgba(250, 204, 21, 0.12) !important; }

/* Body cells */
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td {
  padding: 0.68rem 0.65rem !important;
  vertical-align: middle !important;
  background: transparent !important;
  color: var(--aoh-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--aoh-readable-font) !important;
  font-size: 14.5px !important;
  line-height: 1.42 !important; }

/* New activity icon column */
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:first-child {
  width: 2.35rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.35rem !important;
  text-align: center !important; }

/* Title column */
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(2) {
  font-family: var(--aoh-caption-font) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.015em !important; }

/* Post title links */
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(2) a {
  color: var(--aoh-red) !important;
  font-weight: 800 !important;
  text-decoration: none !important; }

.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(2) a:hover,
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(2) a:focus {
  color: var(--aoh-blue) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important; }

/* Posted By column */
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(3) {
  width: 13rem !important;
  color: var(--aoh-ink) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important; }

.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(3) *,
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(3) span {
  font-size: inherit !important;
  line-height: inherit !important; }

/* Last Activity column: smaller and denser */
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(4) {
  width: 15rem !important;
  min-width: 13rem !important;
  color: var(--aoh-muted-ink) !important;
  font-size: 12.25px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important; }

.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(4) *,
.body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(4) span {
  font-size: inherit !important;
  line-height: inherit !important; }

/* Tiny profile icons */
.body-container.left-body > .ember-view > table.table.table-striped .tiny-profile-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.25rem !important;
  border: 1px solid rgba(20, 20, 20, 0.45) !important;
  border-radius: 50% !important;
  object-fit: cover !important; }

/* Action area above the post table */
.body-container.left-body .action-buttons-spaced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.85rem; }

.body-container.left-body .action-buttons-spaced a:not(.btn) {
  color: var(--aoh-red) !important;
  font-weight: 800;
  text-decoration: none; }

.body-container.left-body .action-buttons-spaced a:not(.btn):hover,
.body-container.left-body .action-buttons-spaced a:not(.btn):focus {
  color: var(--aoh-blue) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; }

.body-container.left-body .action-buttons-spaced .btn {
  background: #fffdf6 !important;
  color: var(--aoh-ink) !important;
  border: 2px solid var(--aoh-ink) !important;
  border-radius: 0.4rem;
  box-shadow: 3px 3px 0 rgba(20, 20, 20, 0.14);
  font-family: var(--aoh-readable-font);
  font-size: 0.9rem;
  font-weight: 700; }

.body-container.left-body .action-buttons-spaced .btn-primary {
  background: var(--aoh-blue) !important;
  color: var(--aoh-panel) !important;
  box-shadow: 3px 3px 0 var(--aoh-red); }

.body-container.left-body .action-buttons-spaced .btn:hover,
.body-container.left-body .action-buttons-spaced .btn:focus {
  background: var(--aoh-gold) !important;
  color: var(--aoh-ink) !important;
  box-shadow: 3px 3px 0 var(--aoh-blue); }

/* Mobile */
@media (max-width: 900px) {
  .body-container.left-body > .ember-view > table.table.table-striped {
    font-size: 14px !important; }
  .body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td {
    padding: 0.55rem 0.5rem !important; }
  .body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(3),
  .body-container.left-body > .ember-view > table.table.table-striped > tbody > tr > td:nth-child(4) {
    width: auto !important;
    min-width: 0 !important; } }

/* ============================================================
   Mobile Play Screen Width Fixes - Revised
   Uses parent-relative width instead of 100vw to prevent right-edge
   clipping inside padded Ares containers.
   ============================================================ */
@media screen and (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; }
  .body-container.left-body,
  .body-container,
  .left-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; }
  .scene-log,
  #chat-window,
  .chat-window,
  .chat-log,
  .scene-pose-header,
  .scene-pose,
  .scene-set-pose,
  .scene-system-pose,
  #chat-window .scene-pose-header,
  #chat-window .scene-pose-header + span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: normal !important; }
  .scene-pose,
  .scene-set-pose,
  .scene-system-pose,
  .scene-pose *,
  .scene-set-pose *,
  .scene-system-pose *,
  #chat-window,
  #chat-window *,
  .chat-window,
  .chat-window *,
  .chat-log,
  .chat-log * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important; }
  .scene-pose {
    padding: 0.85rem 0.95rem 1rem !important;
    font-size: 14.5px !important;
    line-height: 1.58 !important; }
  .scene-pose-header {
    padding: 0.4rem 0.65rem !important;
    min-height: 0 !important; }
  .scene-log > .hint.float-end,
  #chat-window > .hint.float-end,
  #chat-window .hint.float-end {
    float: none !important;
    clear: both !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0.35rem 0 0.2rem 0 !important;
    padding: 0 !important;
    text-align: right !important; }
  .scene-log > .hint.float-end .timestamp-tip,
  #chat-window .timestamp-tip {
    white-space: normal !important; }
  .body-container.left-body form,
  .body-container.left-body form > *,
  .body-container.left-body .form-group,
  .body-container.left-body .card,
  .body-container.left-body .tab-content,
  .body-container.left-body .tab-pane,
  .body-container.left-body textarea,
  .body-container.left-body input,
  .body-container.left-body select,
  .body-container.left-body .form-control,
  .body-container.left-body .markdown-editor,
  .body-container.left-body .markdown-editor-container,
  .body-container.left-body .editor-toolbar,
  .body-container.left-body .d-editor,
  .body-container.left-body .d-editor-container,
  .body-container.left-body .d-editor-button-bar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; }
  .body-container.left-body .action-buttons,
  .body-container.left-body .action-buttons-spaced,
  .body-container.left-body .btn-toolbar,
  .body-container.left-body .editor-toolbar,
  .body-container.left-body .markdown-toolbar,
  .body-container.left-body .d-editor-button-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; }
  .body-container.left-body button,
  .body-container.left-body .btn,
  .body-container.left-body input.btn,
  .body-container.left-body a.btn,
  .body-container.left-body .action-buttons button,
  .body-container.left-body .action-buttons a,
  .body-container.left-body .action-buttons-spaced button,
  .body-container.left-body .action-buttons-spaced a {
    position: static !important;
    float: none !important;
    max-width: 100% !important;
    white-space: normal !important; }
  .body-container.left-body .float-end,
  .body-container.left-body .pull-right {
    float: none !important; }
  h1,
  h2,
  h3,
  .scene-title,
  .scene-log h1,
  .scene-log h2 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important; } }

/* POSTED SCENE LOG READABILITY
   Targets saved/posted scene logs, not the live scene play window. */
.scene-log:not(#live-scene-log) {
  max-width: 980px;
  margin: 1.5rem auto 2.5rem auto;
  padding: 1.25rem 1.35rem;
  background: var(--aoh-panel, #fffdf6);
  color: var(--aoh-ink, #141414);
  border: 4px solid var(--aoh-ink, #141414);
  box-shadow: 7px 7px 0 rgba(20, 20, 20, 0.18);
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif);
  font-size: 15.5px;
  line-height: 1.62;
  overflow-wrap: break-word;
  word-wrap: break-word; }

/* Normal log paragraphs */
.scene-log:not(#live-scene-log) > p,
.scene-log:not(#live-scene-log) .ember-view > p {
  max-width: 84ch;
  margin: 0 auto 1rem auto;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--aoh-ink, #141414); }

/* Keep italic/bold text readable inside logs */
.scene-log:not(#live-scene-log) em,
.scene-log:not(#live-scene-log) strong,
.scene-log:not(#live-scene-log) strong em,
.scene-log:not(#live-scene-log) em strong {
  color: inherit; }

/* Scene set inside a posted log */
.scene-log:not(#live-scene-log) .scene-set-pose {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 1.75rem auto;
  padding: 1.15rem 1.25rem 1.1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 253, 246, 0.98));
  color: var(--aoh-ink, #141414);
  border: 4px solid var(--aoh-ink, #141414);
  border-left: 10px solid var(--aoh-gold, #facc15);
  box-shadow: 5px 5px 0 rgba(220, 38, 38, 0.34), inset 0 0 0 3px rgba(250, 204, 21, 0.18);
  overflow: hidden; }

/* Prevent posted logs from inheriting the live scene-set corner block */
.scene-log:not(#live-scene-log) .scene-set-pose::before,
.scene-log:not(#live-scene-log) .scene-set-pose::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important; }

/* Scene set text */
.scene-log:not(#live-scene-log) .scene-set-pose p {
  position: relative;
  z-index: 1;
  max-width: 82ch;
  margin: 0 auto 0.8rem auto;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--aoh-ink, #141414); }

.scene-log:not(#live-scene-log) .scene-set-pose p:last-child {
  margin-bottom: 0; }

/* Pose dividers between posted poses */
.scene-log:not(#live-scene-log) .pose-divider {
  position: relative;
  max-width: 84ch;
  height: 1.2rem;
  margin: 1.45rem auto 1.35rem auto;
  border: 0; }

.scene-log:not(#live-scene-log) .pose-divider::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 3px solid var(--aoh-ink, #141414);
  transform: translateY(-50%); }

/* ============================================================
   PART 3 OF 4
   AGE OF HEROES MUSH CUSTOM SCSS
   Source: Custom SCSS.txt
   Search key: PART 3
   ============================================================ */
.scene-log:not(#live-scene-log) .pose-divider::after {
  content: "NEXT PANEL";
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.12rem 0.55rem;
  background: var(--aoh-gold, #facc15);
  color: var(--aoh-ink, #141414);
  border: 2px solid var(--aoh-ink, #141414);
  box-shadow: 3px 3px 0 var(--aoh-red, #dc2626);
  font-family: var(--aoh-caption-font, "Barlow Condensed", sans-serif);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translate(-50%, -50%); }

/* Hide the empty paragraph Ares puts inside the divider */
.scene-log:not(#live-scene-log) .pose-divider p {
  display: none !important; }

/* Jump links around logs */
.scene-log:not(#live-scene-log) + p a,
p a[href="#bottom"],
p a[href="#top"] {
  font-weight: 800;
  color: var(--aoh-blue, #1d4ed8);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; }

.scene-log:not(#live-scene-log) + p a:hover,
p a[href="#bottom"]:hover,
p a[href="#top"]:hover {
  color: var(--aoh-red, #dc2626); }

/* Mobile posted logs */
@media screen and (max-width: 700px) {
  .scene-log:not(#live-scene-log) {
    max-width: 100%;
    margin: 1rem auto 2rem auto;
    padding: 0.8rem 0.75rem;
    border-width: 3px;
    box-shadow: 4px 4px 0 rgba(20, 20, 20, 0.18);
    font-size: 15px;
    line-height: 1.58; }
  .scene-log:not(#live-scene-log) > p,
  .scene-log:not(#live-scene-log) .ember-view > p,
  .scene-log:not(#live-scene-log) .scene-set-pose p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.58; }
  .scene-log:not(#live-scene-log) .scene-set-pose {
    max-width: 100%;
    margin-bottom: 1.35rem;
    padding: 0.85rem 0.85rem;
    border-left-width: 8px;
    box-shadow: 4px 4px 0 rgba(220, 38, 38, 0.34); }
  .scene-log:not(#live-scene-log) .pose-divider {
    max-width: 100%;
    margin: 1.35rem auto 1.25rem auto; }
  .scene-log:not(#live-scene-log) .pose-divider::after {
    font-size: 0.7rem; } }

/* ============================================================
   LIVE SCENE PAGE FIX
   Keeps the active play log transparent, borderless, resizable,
   and separated from the controls box. Scoped to #live-scene-log
   so posted scene logs keep their comic panel frame.
   ============================================================ */
#live-scene-log {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 18rem !important;
  max-height: 80vh !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 0.35rem 0.25rem 1rem 0.25rem !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  resize: vertical;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: var(--aoh-ink, #141414) !important; }

#live-scene-log,
#live-scene-log *,
#live-scene-log *::before,
#live-scene-log *::after {
  box-sizing: border-box !important; }

/* The timestamp/edit/delete controls come before .scene-pose-header
   in the HTML, so place them over the top-right of the yellow header. */
#live-scene-log > .hint.float-end {
  position: relative !important;
  z-index: 5 !important;
  float: right !important;
  clear: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.45rem !important;
  width: auto !important;
  max-width: calc(100% - 18rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0.45rem 0.85rem -2.35rem 1rem !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  line-height: 1.1 !important;
  text-align: right !important;
  overflow: visible !important; }

#live-scene-log > .hint.float-end .timestamp-tip {
  display: inline-block !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important; }

#live-scene-log > .hint.float-end .tooltip-button {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0.1rem 0.2rem !important; }

/* Keep the yellow pose header full-width, and reserve room on the right
   for the timestamp/edit/delete controls. */
#live-scene-log .scene-pose-header {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 3.1rem !important;
  margin: 0 !important;
  padding: 0.65rem 13.5rem 0.65rem 0.9rem !important;
  overflow: visible !important; }

#live-scene-log .scene-pose-header .btn-link {
  max-width: 100% !important;
  white-space: normal !important;
  text-align: left !important; }

/* Keep the pose body inside the resizable log box. */
#live-scene-log .scene-pose,
#live-scene-log .scene-set-pose,
#live-scene-log .scene-system-pose {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important; }

#live-scene-log .scene-pose p,
#live-scene-log .scene-set-pose p,
#live-scene-log .scene-system-pose p {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important; }

#live-scene-log .scene-pose {
  padding-left: 2rem !important;
  padding-right: 2rem !important; }

.scene-controls-box {
  margin-top: 1.25rem !important; }

@media screen and (max-width: 700px) {
  #live-scene-log {
    min-height: 16rem !important;
    max-height: 75vh !important;
    margin-bottom: 1rem !important;
    padding: 0.25rem 0 0.8rem 0 !important; }
  #live-scene-log > .hint.float-end {
    float: none !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    margin: 0 0 -0.1rem 0.65rem !important;
    text-align: left !important; }
  #live-scene-log > .hint.float-end .timestamp-tip {
    white-space: normal !important; }
  #live-scene-log .scene-pose-header {
    min-height: 0 !important;
    padding: 0.55rem 0.65rem !important; }
  #live-scene-log .scene-pose {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important; }
  .scene-controls-box {
    margin-top: 1rem !important; } }

/* ============================================================
   Directory / Scenes Table Fix
   Keeps scene summaries readable and prevents the participants
   column from taking over the whole table.
   ============================================================ */
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: var(--aoh-panel, #fffdf6) !important;
  border: 4px solid var(--aoh-ink, #141414) !important; }

/* Scene column */
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) th:first-child,
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) td:first-child {
  width: 72% !important;
  max-width: none !important;
  text-align: left !important;
  vertical-align: top !important; }

/* Participants column */
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) th:nth-child(2),
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) td:nth-child(2) {
  width: 28% !important;
  max-width: none !important;
  text-align: left !important;
  vertical-align: top !important; }

/* Undo homepage/feature-card table styling if it leaked onto this table */
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) th,
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) td {
  display: table-cell !important;
  padding: 0.75rem 1rem !important;
  box-shadow: none !important; }

/* Keep scene summaries readable */
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) td:first-child p {
  max-width: none !important;
  margin: 0.45rem 0 0 0 !important;
  text-align: left !important;
  line-height: 1.5 !important; }

/* Put participant links on clean separate lines if there are several */
.body-container.left-body table.table.table-striped:has(a[href^="/scene/"]) td:nth-child(2) a {
  display: inline-block;
  margin-right: 0.35rem;
  font-weight: 900; }

/* ============================================================
   Account Settings / Card Heading Readability
   Fixes dark card headers with dark text on account/settings pages.
   ============================================================ */
#settings .card.card-default > .card-heading,
.card.card-default > .card-heading {
  background: var(--aoh-blue, #1d4ed8) !important;
  background-image: var(--aoh-halftone-strip) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: var(--aoh-panel, #fffdf6) !important;
  border-bottom: 3px solid var(--aoh-ink, #141414) !important;
  font-family: var(--aoh-caption-font, "Barlow Condensed", sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  text-shadow: 2px 2px 0 var(--aoh-ink, #141414), 3px 3px 0 var(--aoh-red, #dc2626) !important; }

#settings .card.card-default > .card-heading a,
#settings .card.card-default > .card-heading i,
.card.card-default > .card-heading a,
.card.card-default > .card-heading i {
  color: var(--aoh-gold, #facc15) !important;
  text-shadow: 1px 1px 0 var(--aoh-ink, #141414) !important; }

#settings .card.card-default > .card-heading a:hover,
.card.card-default > .card-heading a:hover {
  color: var(--aoh-panel, #fffdf6) !important; }

/* ============================================================
   Account Settings / Form Field Readability
   Gives text inputs and dropdowns a light field with dark text.
   ============================================================ */
#settings input,
#settings textarea,
#settings select,
#settings .form-control,
#settings .ember-text-field,
#settings .ember-power-select-trigger {
  background: var(--aoh-panel, #fffdf6) !important;
  background-image: none !important;
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid var(--aoh-ink, #141414) !important;
  border-radius: 0.25rem !important;
  box-shadow: inset 0 0 0 2px rgba(20, 20, 20, 0.04) !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important; }

#settings input::placeholder,
#settings textarea::placeholder {
  color: rgba(20, 20, 20, 0.55) !important;
  opacity: 1 !important; }

#settings input:focus,
#settings textarea:focus,
#settings select:focus,
#settings .form-control:focus,
#settings .ember-text-field:focus,
#settings .ember-power-select-trigger:focus {
  background: var(--aoh-paper-light, #fffaf0) !important;
  color: var(--aoh-ink, #141414) !important;
  border-color: var(--aoh-blue, #1d4ed8) !important;
  outline: 3px solid rgba(29, 78, 216, 0.25) !important;
  box-shadow: inset 0 0 0 2px rgba(20, 20, 20, 0.04), 3px 3px 0 rgba(20, 20, 20, 0.16) !important; }

#settings .ember-power-select-selected-item {
  color: var(--aoh-ink, #141414) !important; }

#settings .ember-power-select-status-icon {
  border-color: var(--aoh-ink, #141414) transparent transparent transparent !important; }

/* ROSTER FACTION GROUPING */
.roster-faction-heading {
  display: block;
  margin: 2rem 0 1rem 0;
  padding: 0.4rem 0.85rem;
  background-color: var(--aoh-gold, #facc15) !important;
  color: var(--aoh-ink, #141414) !important;
  border: 3px solid var(--aoh-ink, #141414);
  box-shadow: 5px 5px 0 var(--aoh-red, #dc2626);
  font-family: var(--aoh-caption-font, "Barlow Condensed", sans-serif);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  text-shadow: none !important; }

.roster-faction-group {
  margin-bottom: 2rem; }

/* ROSTER FACTION JUMP LINKS */
.roster-faction-index {
  margin: 1.25rem 0 1.75rem 0;
  padding: 0.85rem 1rem;
  background: var(--aoh-panel, #fffdf6);
  color: var(--aoh-ink, #141414);
  border: 3px solid var(--aoh-ink, #141414);
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.18); }

.roster-faction-index-title {
  display: inline-block;
  margin-bottom: 0.65rem;
  padding: 0.25rem 0.6rem;
  background: var(--aoh-blue, #1d4ed8);
  color: var(--aoh-panel, #fffdf6);
  border: 2px solid var(--aoh-ink, #141414);
  box-shadow: 3px 3px 0 var(--aoh-red, #dc2626);
  font-family: var(--aoh-caption-font, "Barlow Condensed", sans-serif);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em; }

.roster-faction-index-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem; }

.roster-faction-index-links a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--aoh-paper-light, #fffaf0);
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid var(--aoh-ink, #141414);
  font-family: var(--aoh-caption-font, "Barlow Condensed", sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none !important; }

.roster-faction-index-links a:hover,
.roster-faction-index-links a:focus {
  background: var(--aoh-gold, #facc15);
  color: var(--aoh-ink, #141414) !important;
  box-shadow: 3px 3px 0 var(--aoh-blue, #1d4ed8); }

/* Keeps anchor jumps from hiding the heading under fixed/sticky nav, if applicable. */
.roster-faction-heading {
  scroll-margin-top: 90px; }

/* ROSTER HERO / VILLAIN FILTER */
.roster-position-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem 0;
  padding: 0.85rem 1rem;
  background: var(--aoh-panel, #fffdf6);
  color: var(--aoh-ink, #141414);
  border: 3px solid var(--aoh-ink, #141414);
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.18); }

.roster-position-filter input {
  position: absolute;
  opacity: 0;
  pointer-events: none; }

.roster-position-filter label {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: var(--aoh-paper-light, #fffaf0);
  color: var(--aoh-ink, #141414);
  border: 2px solid var(--aoh-ink, #141414);
  font-family: var(--aoh-caption-font, "Barlow Condensed", sans-serif);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer; }

#roster-show-both:checked + label,
#roster-show-heroes:checked + label,
#roster-show-villains:checked + label {
  background: var(--aoh-gold, #facc15);
  color: var(--aoh-ink, #141414);
  box-shadow: 3px 3px 0 var(--aoh-blue, #1d4ed8); }

/* ROSTER HERO / VILLAIN FILTER - FUNCTIONAL VERSION */
.body-container:has(#roster-show-heroes:checked) .tab-content .roster-char-entry:not(.roster-position-Hero) {
  display: none; }

.body-container:has(#roster-show-villains:checked) .tab-content .roster-char-entry:not(.roster-position-Villain) {
  display: none; }

/* Hide faction sections with no matching visible character. */
.body-container:has(#roster-show-heroes:checked) .tab-content .roster-faction-section:not(:has(.roster-position-Hero)) {
  display: none; }

.body-container:has(#roster-show-villains:checked) .tab-content .roster-faction-section:not(:has(.roster-position-Villain)) {
  display: none; }

.play-main {
  padding-left: 10px;
  padding-right: 5px; }

/* ============================================================
   Play Sidebar: btn-link Focus / Active Contrast Fix
   Keeps selected channel/PM buttons readable after click.
   ============================================================ */
.play-sidebar .btn-link.play-selector,
.play-sidebar button.btn-link.play-selector {
  color: var(--aoh-red) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important; }

/* Hover/focus on unselected sidebar links */
.play-sidebar .btn-link.play-selector:hover,
.play-sidebar .btn-link.play-selector:focus,
.play-sidebar .btn-link.play-selector:focus-visible,
.play-sidebar .btn-link.play-selector:active,
.play-sidebar button.btn-link.play-selector:hover,
.play-sidebar button.btn-link.play-selector:focus,
.play-sidebar button.btn-link.play-selector:focus-visible,
.play-sidebar button.btn-link.play-selector:active {
  color: var(--aoh-panel) !important;
  background: var(--aoh-blue) !important;
  text-decoration: none !important;
  outline: 3px solid var(--aoh-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important; }

/* Currently selected channel/PM */
.play-sidebar .btn-link.play-selector.play-selector-active,
.play-sidebar button.btn-link.play-selector.play-selector-active {
  color: var(--aoh-panel) !important;
  background: var(--aoh-red) !important;
  text-decoration: none !important;
  font-weight: 900 !important; }

/* Selected channel/PM while focused or clicked */
.play-sidebar .btn-link.play-selector.play-selector-active:hover,
.play-sidebar .btn-link.play-selector.play-selector-active:focus,
.play-sidebar .btn-link.play-selector.play-selector-active:focus-visible,
.play-sidebar .btn-link.play-selector.play-selector-active:active,
.play-sidebar button.btn-link.play-selector.play-selector-active:hover,
.play-sidebar button.btn-link.play-selector.play-selector-active:focus,
.play-sidebar button.btn-link.play-selector.play-selector-active:focus-visible,
.play-sidebar button.btn-link.play-selector.play-selector-active:active {
  color: var(--aoh-panel) !important;
  background: var(--aoh-red) !important;
  outline: 3px solid var(--aoh-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important; }

/* ============================================================
   AOH Universal Forms + Markdown Editor Styling
   Optimized consolidated version.
   Applies to live play, chargen/profile editors, vacation notes,
   roster notes, RP prefs, descriptions, hooks, background, etc.
   ============================================================ */
.body-container,
.play-screen,
.scene-controls-box,
.tab-content {
  --aoh-editor-paper: #fffef9;
  --aoh-editor-panel: var(--aoh-panel, #fffdf6);
  --aoh-editor-warm: var(--aoh-paper-light, #fffaf0);
  --aoh-editor-ink: var(--aoh-ink, #141414);
  --aoh-editor-border: var(--aoh-border, #111827);
  --aoh-editor-blue: var(--aoh-blue, #1d4ed8);
  --aoh-editor-red: var(--aoh-red, #dc2626);
  --aoh-editor-gold: var(--aoh-gold, #facc15); }

/* ------------------------------------------------------------
   General form fields
   ------------------------------------------------------------ */
.body-container input[type="text"],
.body-container input[type="date"],
.body-container input[type="email"],
.body-container input[type="password"],
.body-container input[type="number"],
.body-container input[type="search"],
.body-container textarea,
.body-container select,
.body-container .ember-text-field,
.body-container .ember-text-area,
.body-container .form-control,
.body-container .form-select,
.body-container .ember-power-select-trigger,
.play-screen input[type="text"],
.play-screen input[type="date"],
.play-screen input[type="email"],
.play-screen input[type="password"],
.play-screen input[type="number"],
.play-screen input[type="search"],
.play-screen textarea,
.play-screen select,
.play-screen .ember-text-field,
.play-screen .ember-text-area,
.play-screen .form-control,
.play-screen .form-select,
.play-screen .ember-power-select-trigger {
  background: var(--aoh-editor-panel) !important;
  color: var(--aoh-editor-ink) !important;
  border: 1.5px solid rgba(17, 24, 39, 0.82) !important;
  border-radius: 0.45rem !important;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, 0.1) !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important; }

.body-container input[type="text"]:focus,
.body-container input[type="date"]:focus,
.body-container input[type="email"]:focus,
.body-container input[type="password"]:focus,
.body-container input[type="number"]:focus,
.body-container input[type="search"]:focus,
.body-container textarea:focus,
.body-container select:focus,
.body-container .ember-text-field:focus,
.body-container .ember-text-area:focus,
.body-container .form-control:focus,
.body-container .form-select:focus,
.body-container .ember-power-select-trigger:focus,
.body-container .ember-power-select-trigger--active,
.play-screen input[type="text"]:focus,
.play-screen input[type="date"]:focus,
.play-screen input[type="email"]:focus,
.play-screen input[type="password"]:focus,
.play-screen input[type="number"]:focus,
.play-screen input[type="search"]:focus,
.play-screen textarea:focus,
.play-screen select:focus,
.play-screen .ember-text-field:focus,
.play-screen .ember-text-area:focus,
.play-screen .form-control:focus,
.play-screen .form-select:focus,
.play-screen .ember-power-select-trigger:focus,
.play-screen .ember-power-select-trigger--active {
  background: var(--aoh-editor-panel) !important;
  color: var(--aoh-editor-ink) !important;
  border-color: var(--aoh-editor-blue) !important;
  outline: 2px solid var(--aoh-editor-gold) !important;
  outline-offset: 2px !important;
  box-shadow: 2px 2px 0 rgba(29, 78, 216, 0.18) !important; }

.body-container input[type="checkbox"],
.play-screen input[type="checkbox"] {
  box-shadow: none !important; }

.ember-power-select-dropdown {
  background: var(--aoh-panel, #fffdf6) !important;
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid var(--aoh-border, #111827) !important;
  border-radius: 0.45rem !important;
  box-shadow: 4px 4px 0 rgba(20, 20, 20, 0.14) !important; }

.ember-power-select-option {
  background: var(--aoh-panel, #fffdf6) !important;
  color: var(--aoh-ink, #141414) !important; }

.ember-power-select-option[aria-current="true"],
.ember-power-select-option--highlighted {
  background: var(--aoh-gold, #facc15) !important;
  color: var(--aoh-ink, #141414) !important; }

.ember-power-select-multiple-trigger,
.ember-power-select-multiple-options {
  background: var(--aoh-editor-panel) !important;
  color: var(--aoh-editor-ink) !important; }

.ember-power-select-multiple-option {
  background: var(--aoh-editor-gold) !important;
  color: var(--aoh-editor-ink) !important;
  border: 1.5px solid var(--aoh-editor-border) !important;
  border-radius: 0.35rem !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-weight: 700 !important; }

/* ------------------------------------------------------------
   Bootstrap nav tabs outside the Markdown editor
   Example: chargen/profile tabs.
   ------------------------------------------------------------ */
.body-container > .nav-tabs,
.body-container .nav.nav-tabs,
.body-container ul.nav-tabs,
.body-container .tab-content > .nav-tabs,
.tab-content > .nav-tabs {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 0.35rem !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 0.25rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--aoh-editor-border, var(--aoh-border, #111827)) !important;
  box-shadow: none !important; }

.body-container > .nav-tabs .nav-item,
.body-container .nav.nav-tabs .nav-item,
.body-container ul.nav-tabs .nav-item,
.body-container .tab-content > .nav-tabs .nav-item,
.tab-content > .nav-tabs .nav-item {
  margin: 0 !important;
  padding: 0 !important; }

.body-container > .nav-tabs .nav-link,
.body-container .nav.nav-tabs .nav-link,
.body-container ul.nav-tabs .nav-link,
.body-container .tab-content > .nav-tabs .nav-link,
.tab-content > .nav-tabs .nav-link {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0.7rem 1rem !important;
  background: var(--aoh-editor-warm, var(--aoh-paper-light, #fffaf0)) !important;
  color: var(--aoh-editor-ink, var(--aoh-ink, #141414)) !important;
  border: 2px solid var(--aoh-editor-border, var(--aoh-border, #111827)) !important;
  border-bottom: 0 !important;
  border-radius: 0.65rem 0.65rem 0 0 !important;
  box-shadow: none !important;
  font-family: var(--aoh-caption-font, "Barlow Condensed", "Open Sans", sans-serif) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important; }

.body-container > .nav-tabs .nav-link.active,
.body-container .nav.nav-tabs .nav-link.active,
.body-container ul.nav-tabs .nav-link.active,
.body-container .tab-content > .nav-tabs .nav-link.active,
.tab-content > .nav-tabs .nav-link.active {
  z-index: 6 !important;
  background: var(--aoh-editor-blue, var(--aoh-blue, #1d4ed8)) !important;
  color: var(--aoh-panel, #fffdf6) !important;
  margin-bottom: -2px !important;
  padding-bottom: calc(0.7rem + 2px) !important;
  border-bottom: 2px solid var(--aoh-editor-blue, var(--aoh-blue, #1d4ed8)) !important; }

.body-container > .tab-content,
.body-container .tab-content,
.tab-content {
  border-top: 0 !important; }

/* ------------------------------------------------------------
   Markdown editor wrapper and height
   Native resize is disabled; Toast UI does not recalculate cleanly
   when dragged through CSS alone. Editors use a tall fixed panel
   with internal scrolling.
   ------------------------------------------------------------ */
.card.markdown-editor,
.card-body.markdown-editor {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important; }

.card-body.markdown-editor {
  padding: 0 !important; }

.form-item-entry .card.markdown-editor,
.form-group .card.markdown-editor,
.tab-pane .card.markdown-editor {
  margin-top: 0.35rem !important;
  margin-bottom: 1rem !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] {
  position: relative !important;
  height: 520px !important;
  min-height: 520px !important;
  max-height: 520px !important;
  resize: none !important;
  overflow: hidden !important; }

.play-screen .chat-box .card-body.markdown-editor > div[aria-label="Markdown Editor"],
.play-screen .scene-controls-box .card-body.markdown-editor > div[aria-label="Markdown Editor"],
.play-screen .card-body.markdown-editor > div[aria-label="Markdown Editor"] {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"]::after {
  content: none !important;
  display: none !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"],
.card-body.markdown-editor > div[aria-label="Markdown Editor"] *,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] *::before,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] *::after {
  resize: none !important; }

/* ------------------------------------------------------------
   Ares Write / Preview controls above editor/preview
   ------------------------------------------------------------ */
.markdown-controls {
  position: relative !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 0.45rem !important;
  margin: 0 0 -1px 1.6rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important; }

.markdown-control-toggle {
  position: relative !important;
  z-index: 6 !important;
  min-width: 7rem !important;
  min-height: 2.15rem !important;
  padding: 0.38rem 0.9rem 0.42rem !important;
  background: var(--aoh-editor-warm) !important;
  color: var(--aoh-editor-ink) !important;
  border: 2px solid var(--aoh-editor-border) !important;
  border-bottom-width: 1px !important;
  border-radius: 0.7rem 0.7rem 0 0 !important;
  box-shadow: none !important;
  font-family: var(--aoh-caption-font, "Barlow Condensed", "Open Sans", sans-serif) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important; }

.markdown-control-toggle.active {
  z-index: 8 !important;
  background: var(--aoh-editor-blue) !important;
  color: var(--aoh-panel, #fffdf6) !important;
  border-bottom: 0 !important;
  margin-bottom: -1px !important;
  padding-bottom: 0.42rem !important; }

.markdown-controls .tooltip-button {
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 0 0.08rem !important;
  padding: 0.2rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important; }

.markdown-controls .tooltip-button a,
.markdown-controls .tooltip-button i {
  color: var(--aoh-editor-red) !important;
  text-decoration: none !important; }

.markdown-controls .tooltip-button i {
  font-size: 1rem !important; }

/* ------------------------------------------------------------
   Toast UI editor shell and toolbar
   ------------------------------------------------------------ */
.toastui-editor-defaultUI {
  position: relative !important;
  z-index: 7 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  background: linear-gradient(180deg, var(--aoh-editor-paper), var(--aoh-editor-panel)) !important;
  border: 2px solid var(--aoh-editor-border) !important;
  border-radius: 0.9rem !important;
  box-shadow: 0 0 0 2px rgba(255, 253, 246, 0.92), 5px 5px 0 rgba(29, 78, 216, 0.16), 8px 8px 0 rgba(20, 20, 20, 0.08) !important; }

.toastui-editor-defaultUI::after {
  content: "" !important;
  position: absolute !important;
  top: 5.4rem !important;
  right: 1rem !important;
  width: 8rem !important;
  height: 8rem !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle, rgba(29, 78, 216, 0.13) 1.15px, transparent 1.45px) !important;
  background-size: 10px 10px !important;
  opacity: 0.38 !important; }

/* Keep Toast UI's internal tabs in the DOM/layout cycle.
   Ares supplies its own Write/Preview controls, so visually hide these
   without using display:none. */
.toastui-editor-md-tab-container,
.toastui-editor-tabs {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important; }

.toastui-editor-toolbar {
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: visible !important; }

.toastui-editor-defaultUI-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
  min-height: 3.15rem !important;
  padding: 0.45rem 0.65rem !important;
  background: linear-gradient(180deg, var(--aoh-editor-blue), #2145c7) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--aoh-editor-border) !important;
  border-radius: 0.72rem 0.72rem 0 0 !important;
  box-shadow: inset 0 -4px 0 rgba(20, 20, 20, 0.13) !important; }

.toastui-editor-toolbar-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important; }

.toastui-editor-dropdown-toolbar {
  background: var(--aoh-editor-panel) !important;
  border: 2px solid var(--aoh-editor-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: 4px 4px 0 rgba(20, 20, 20, 0.18) !important;
  padding: 0.45rem !important; }

/* ------------------------------------------------------------
   Toast UI toolbar icon buttons
   Stable labels instead of unreliable sprite icons.
   ------------------------------------------------------------ */
.toastui-editor-toolbar-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  margin: 0 0.12rem !important;
  padding: 0 !important;
  background: var(--aoh-editor-panel) !important;
  background-image: none !important;
  color: var(--aoh-editor-ink) !important;
  border: 2px solid var(--aoh-editor-border) !important;
  border-radius: 0.6rem !important;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important; }

.toastui-editor-toolbar-icons::after {
  content: none !important;
  display: none !important; }

.toastui-editor-toolbar-icons::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--aoh-editor-ink) !important;
  background: transparent !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important; }

.toastui-editor-toolbar-icons.heading::before {
  content: "H" !important;
  font-size: 1.2rem !important; }

.toastui-editor-toolbar-icons.bold::before {
  content: "B" !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important; }

.toastui-editor-toolbar-icons.italic::before {
  content: "I" !important;
  font-style: italic !important;
  font-size: 1.15rem !important; }

.toastui-editor-toolbar-icons.strike::before {
  content: "S" !important;
  text-decoration: line-through !important;
  font-size: 1.15rem !important; }

.toastui-editor-toolbar-icons.hrline::before {
  content: "—" !important;
  font-size: 1.35rem !important; }

.toastui-editor-toolbar-icons.quote::before {
  content: "66" !important;
  font-size: 0.95rem !important; }

.toastui-editor-toolbar-icons.bullet-list::before {
  content: "•" !important;
  font-size: 1.45rem !important; }

.toastui-editor-toolbar-icons.ordered-list::before {
  content: "1" !important;
  font-size: 1.05rem !important; }

.toastui-editor-toolbar-icons.task-list::before {
  content: "✓" !important;
  font-size: 1.15rem !important; }

.toastui-editor-toolbar-icons.indent::before {
  content: "→" !important;
  font-size: 1.1rem !important; }

.toastui-editor-toolbar-icons.outdent::before {
  content: "←" !important;
  font-size: 1.1rem !important; }

.toastui-editor-toolbar-icons.table::before {
  content: "▦" !important;
  font-size: 1.15rem !important; }

.toastui-editor-toolbar-icons.image::before {
  content: "□" !important;
  font-size: 1.15rem !important; }

.toastui-editor-toolbar-icons.link::before {
  content: "↗" !important;
  font-size: 1.1rem !important; }

.toastui-editor-toolbar-icons.code::before {
  content: "</>" !important;
  font-size: 0.78rem !important; }

.toastui-editor-toolbar-icons.codeblock::before {
  content: "CB" !important;
  font-size: 0.82rem !important; }

.toastui-editor-toolbar-icons.more::before {
  content: "…" !important;
  font-size: 1.2rem !important; }

.toastui-editor-toolbar-icons:hover,
.toastui-editor-toolbar-icons:focus {
  background: var(--aoh-editor-gold) !important;
  color: var(--aoh-editor-ink) !important;
  border-color: var(--aoh-editor-border) !important;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, 0.22), 0 0 0 2px rgba(255, 253, 246, 0.65) !important; }

.toastui-editor-toolbar-icons:disabled,
.toastui-editor-toolbar-icons[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed !important; }

.toastui-editor-toolbar-divider {
  width: 0 !important;
  height: 2rem !important;
  margin: 0 0.6rem !important;
  background: transparent !important;
  border-left: 2px solid var(--aoh-editor-red) !important; }

/* ------------------------------------------------------------
   Toast UI writing body and scroll behavior
   ------------------------------------------------------------ */
.toastui-editor-main {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border-top: 0 !important; }

.toastui-editor-main-container,
.toastui-editor-md-container,
.toastui-editor-ww-container {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border-bottom: 0 !important; }

.toastui-editor-main,
.toastui-editor-main-container,
.toastui-editor-md-container,
.toastui-editor,
.toastui-editor-md-preview,
.toastui-editor-ww-container,
.toastui-editor-contents,
.ProseMirror {
  background: linear-gradient(180deg, var(--aoh-editor-paper), var(--aoh-editor-panel)) !important;
  color: var(--aoh-editor-ink) !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important; }

/* Toast UI manages Markdown/WYSIWYG pane visibility internally.
   Do not force display:none/block on its internal panes; doing so can
   trigger Ember removeChild errors during active resize. */
/* The visible editor pane is the scrollbar container. */
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-md-mode
.toastui-editor.md-mode.active,
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-ww-mode
.toastui-editor.ww-mode.active {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges !important;
  scrollbar-width: auto !important;
  scrollbar-color: var(--aoh-gold, #facc15) var(--aoh-scrollbar-track, #fff3b8) !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-md-mode
.toastui-editor.md-mode.active > .ProseMirror,
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-ww-mode
.toastui-editor.ww-mode.active > .ProseMirror {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0.9rem 1.1rem 1.05rem !important;
  box-shadow: none !important; }

.toastui-editor-md-delimiter,
.toastui-editor-md-strong,
.toastui-editor-md-emph,
.toastui-editor-md-link,
.toastui-editor-md-code {
  color: var(--aoh-editor-ink) !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important; }

.toastui-editor-md-splitter {
  background: transparent !important;
  border-left: 1px solid rgba(17, 24, 39, 0.16) !important; }

.ProseMirror-focused {
  outline: none !important; }

.ProseMirror ::selection,
.toastui-editor-contents ::selection {
  background: rgba(250, 204, 21, 0.38) !important; }

/* WebKit scrollbars for the editor panes. */
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-md-mode
.toastui-editor.md-mode.active::-webkit-scrollbar,
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-ww-mode
.toastui-editor.ww-mode.active::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
  background-color: var(--aoh-scrollbar-track, #fff3b8) !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-md-mode
.toastui-editor.md-mode.active::-webkit-scrollbar-track,
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-ww-mode
.toastui-editor.ww-mode.active::-webkit-scrollbar-track {
  background-color: var(--aoh-scrollbar-track, #fff3b8) !important;
  border-left: 2px solid rgba(17, 24, 39, 0.18) !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-md-mode
.toastui-editor.md-mode.active::-webkit-scrollbar-thumb,
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-ww-mode
.toastui-editor.ww-mode.active::-webkit-scrollbar-thumb {
  background-color: var(--aoh-gold, #facc15) !important;
  border: 3px solid var(--aoh-scrollbar-track, #fff3b8) !important;
  border-radius: 999px !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-md-mode
.toastui-editor.md-mode.active::-webkit-scrollbar-thumb:hover,
.card-body.markdown-editor > div[aria-label="Markdown Editor"]
.toastui-editor-main.toastui-editor-ww-mode
.toastui-editor.ww-mode.active::-webkit-scrollbar-thumb:hover {
  background-color: var(--aoh-blue, #1d4ed8) !important; }

/* ------------------------------------------------------------
   Bottom Markdown / WYSIWYG buttons
   ------------------------------------------------------------ */
.toastui-editor-mode-switch {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-height: 3.25rem !important;
  max-height: 3.25rem !important;
  padding: 0.45rem 0.75rem 0.65rem !important;
  background: var(--aoh-editor-panel) !important;
  border: 0 !important;
  border-top: 2px solid var(--aoh-editor-blue) !important;
  overflow: visible !important; }

.toastui-editor-mode-switch .tab-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 7rem !important;
  min-height: 2rem !important;
  padding: 0.32rem 0.95rem !important;
  background: var(--aoh-editor-warm) !important;
  color: var(--aoh-editor-ink) !important;
  border: 2px solid var(--aoh-editor-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, 0.12) !important;
  font-family: var(--aoh-caption-font, "Barlow Condensed", "Open Sans", sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  opacity: 1 !important; }

.toastui-editor-mode-switch .tab-item.active {
  background: var(--aoh-editor-blue) !important;
  color: var(--aoh-panel, #fffdf6) !important; }

/* ------------------------------------------------------------
   Ares simplified Markdown Preview mode
   Preview-internal styling removed. The Preview pane should inherit
   the same content styles used by the posted page instead of acting
   like a separate custom display surface.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Scene controls only
   ------------------------------------------------------------ */
.play-screen .scene-controls-box {
  background: var(--aoh-panel, #fffdf6) !important;
  color: var(--aoh-ink, #141414) !important; }

.play-screen .scene-controls {
  margin-top: 1.25rem !important; }

.play-screen .scene-controls .btn-primary,
.play-screen .scene-controls button.btn-primary {
  background: var(--aoh-editor-blue) !important;
  color: var(--aoh-panel, #fffdf6) !important;
  border: 2px solid var(--aoh-editor-border) !important;
  border-radius: 0.55rem !important;
  box-shadow: 3px 3px 0 rgba(20, 20, 20, 0.18) !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important; }

.play-screen .scene-controls .btn-primary:hover,
.play-screen .scene-controls button.btn-primary:hover {
  background: var(--aoh-editor-gold) !important;
  color: var(--aoh-editor-ink) !important; }

.play-screen .scene-controls .dropdown-toggle {
  background: var(--aoh-editor-panel) !important;
  color: var(--aoh-editor-ink) !important;
  border: 1.5px solid rgba(17, 24, 39, 0.82) !important;
  border-radius: 0.45rem !important;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, 0.1) !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-weight: 700 !important;
  text-transform: none !important; }

.play-screen .scene-controls .dropdown-toggle:hover,
.play-screen .scene-char-select .ember-power-select-trigger:hover {
  border-color: var(--aoh-editor-blue) !important;
  box-shadow: 2px 2px 0 rgba(29, 78, 216, 0.18) !important; }

/* ============================================================
   PART 4 OF 4
   AGE OF HEROES MUSH CUSTOM SCSS
   Source: Custom SCSS.txt
   Search key: PART 4
   ============================================================ */
/* ============================================================
   Global Scrollbars
   Site-wide gold scrollbar with pale yellow rail.
   ============================================================ */
* {
  scrollbar-width: auto !important;
  scrollbar-color: var(--aoh-gold, #facc15) var(--aoh-scrollbar-track, #fff3b8) !important; }

*::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
  background-color: var(--aoh-scrollbar-track, #fff3b8) !important; }

*::-webkit-scrollbar-track {
  background-color: var(--aoh-scrollbar-track, #fff3b8) !important;
  border-left: 2px solid rgba(17, 24, 39, 0.18) !important; }

*::-webkit-scrollbar-thumb {
  background-color: var(--aoh-gold, #facc15) !important;
  border: 3px solid var(--aoh-scrollbar-track, #fff3b8) !important;
  border-radius: 999px !important; }

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--aoh-blue, #1d4ed8) !important; }

*::-webkit-scrollbar-corner {
  background-color: var(--aoh-scrollbar-track, #fff3b8) !important; }

html,
body {
  scrollbar-color: var(--aoh-gold, #facc15) var(--aoh-scrollbar-track, #fff3b8) !important; }

html::-webkit-scrollbar,
body::-webkit-scrollbar,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background-color: var(--aoh-scrollbar-track, #fff3b8) !important; }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: var(--aoh-gold, #facc15) !important;
  border: 3px solid var(--aoh-scrollbar-track, #fff3b8) !important;
  border-radius: 999px !important; }

/* ============================================================
   Admin Code Editor Font
   Plain fixed-width font for config/text-file editing.
   ============================================================ */
textarea.code-editor,
.body-container textarea.code-editor,
.admin textarea.code-editor,
.setup textarea.code-editor {
  font-family: Consolas, "Courier New", Menlo, Monaco, monospace !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  tab-size: 2; }

/* ============================================================
   RESPONSIVE MARKDOWN EDITOR TOOLBAR
   Shrinks toolbar buttons on narrower screens so controls fit.
   ============================================================ */
@media screen and (max-width: 1100px) {
  .toastui-editor-defaultUI-toolbar {
    gap: 0.18rem !important;
    padding: 0.38rem 0.5rem !important; }
  .toastui-editor-toolbar-group {
    gap: 0.18rem !important; }
  .toastui-editor-toolbar-icons {
    width: 1.95rem !important;
    height: 1.95rem !important;
    margin: 0 0.08rem !important;
    border-radius: 0.5rem !important; }
  .toastui-editor-toolbar-divider {
    height: 1.8rem !important;
    margin: 0 0.4rem !important; } }

@media screen and (max-width: 850px) {
  .toastui-editor-defaultUI-toolbar {
    gap: 0.12rem !important;
    padding: 0.32rem 0.42rem !important; }
  .toastui-editor-toolbar-group {
    gap: 0.12rem !important; }
  .toastui-editor-toolbar-icons {
    width: 1.72rem !important;
    height: 1.72rem !important;
    margin: 0 0.05rem !important;
    border-width: 1.5px !important;
    border-radius: 0.42rem !important;
    font-size: 0.82rem !important; }
  .toastui-editor-toolbar-icons::before {
    font-size: 0.82rem !important; }
  .toastui-editor-toolbar-icons.heading::before,
  .toastui-editor-toolbar-icons.bold::before,
  .toastui-editor-toolbar-icons.italic::before,
  .toastui-editor-toolbar-icons.strike::before {
    font-size: 0.95rem !important; }
  .toastui-editor-toolbar-icons.hrline::before {
    font-size: 1.05rem !important; }
  .toastui-editor-toolbar-icons.bullet-list::before {
    font-size: 1.15rem !important; }
  .toastui-editor-toolbar-icons.code::before {
    font-size: 0.62rem !important; }
  .toastui-editor-toolbar-icons.codeblock::before {
    font-size: 0.68rem !important; }
  .toastui-editor-toolbar-divider {
    height: 1.55rem !important;
    margin: 0 0.25rem !important;
    border-left-width: 1.5px !important; } }

@media screen and (max-width: 650px) {
  .toastui-editor-defaultUI-toolbar {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    min-height: auto !important;
    row-gap: 0.25rem !important; }
  .toastui-editor-toolbar-icons {
    width: 1.6rem !important;
    height: 1.6rem !important; }
  .toastui-editor-toolbar-divider {
    margin: 0 0.18rem !important; }
  .markdown-control-toggle {
    min-width: 5.25rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important; }
  .toastui-editor-mode-switch .tab-item {
    min-width: 5.75rem !important;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important; } }

/* ============================================================
   RIGHT SIDEBAR + PLAY PAGE RESPONSIVE LAYOUT - STABLE VERSION

   play.hbs should use:
   <div class="play-screen row g-3">
   <div class="play-sidebar aoh-play-sidebar">
   <div class="play-main aoh-play-main">

   The Play split is constant from tablet through desktop widths:
   30% sidebar / 70% main. This avoids Bootstrap md/lg/xl column
   breakpoint changes while live scene/editor Ember components are
   mounted.

   The normal right sidebar still moves below content under 1200px
   through flex-basis changes only, not through display/order switching.
   ============================================================ */
.body-wrap {
  position: relative;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important; }

.body-container.left-body,
.body-container,
.left-body {
  min-width: 0 !important;
  box-sizing: border-box !important; }

.sidebar.right-sidebar,
.right-sidebar,
.sidebar[role="navigation"] {
  min-width: 0 !important;
  box-sizing: border-box !important;
  transition: none !important; }

/* Desktop: main content and right sidebar sit side by side. */
@media screen and (min-width: 1200px) {
  .body-container.left-body,
  .body-container,
  .left-body {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: calc(100% - 19rem) !important; }
  .sidebar.right-sidebar,
  .right-sidebar,
  .sidebar[role="navigation"] {
    flex: 0 0 18rem !important;
    width: 18rem !important;
    max-width: 18rem !important;
    margin-left: 1rem !important; } }

/* Below desktop: right sidebar gets its own full-width row below content. */
@media screen and (max-width: 1199.98px) {
  .body-container.left-body,
  .body-container,
  .left-body {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important; }
  .sidebar.right-sidebar,
  .right-sidebar,
  .sidebar[role="navigation"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 0 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important; }
  .right-sidebar-toggle-button {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important; }
  .sidebar.right-sidebar > .ember-view,
  .right-sidebar > .ember-view {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important; }
  .sidebar-box.sidebar-box-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important; } }

@media screen and (max-width: 650px) {
  .sidebar.right-sidebar > .ember-view,
  .right-sidebar > .ember-view {
    display: block !important; }
  .sidebar-box.sidebar-box-right {
    margin: 0 0 1rem 0 !important; } }

/* Play page: constant 30/70 split, no Bootstrap column breakpoints. */
.play-screen.row {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important; }

.play-screen.row > .aoh-play-sidebar {
  display: block !important;
  flex: 0 0 28% !important;
  width: 28% !important;
  max-width: 28% !important;
  min-width: 0 !important;
  box-sizing: border-box !important; }

.play-screen.row > .aoh-play-main {
  display: block !important;
  flex: 0 0 72% !important;
  width: 72% !important;
  max-width: 72% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important; }

@media screen and (max-width: 767.98px) {
  .play-screen.row > .aoh-play-sidebar,
  .play-screen.row > .aoh-play-main {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important; } }

/* Right sidebar toggle: desktop only. */
.right-sidebar-toggle-control {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important; }

.right-sidebar-toggle-button {
  position: fixed !important;
  top: 14.75rem !important;
  right: -2px !important;
  z-index: 80 !important;
  width: 2.9rem !important;
  height: 3.1rem !important;
  min-width: 2.9rem !important;
  min-height: 3.1rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--aoh-panel, #fffdf6) !important;
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid var(--aoh-ink, #141414) !important;
  border-right: 0 !important;
  border-radius: 1rem 0 0 1rem !important;
  box-shadow: -3px 3px 0 rgba(20, 20, 20, 0.22) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 0.95 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: none !important; }

.right-sidebar-toggle-button:hover,
.right-sidebar-toggle-button:focus {
  background: var(--aoh-gold, #facc15) !important;
  color: var(--aoh-ink, #141414) !important;
  box-shadow: -4px 4px 0 rgba(20, 20, 20, 0.24) !important; }

.right-sidebar-toggle-button:active {
  box-shadow: -1px 1px 0 rgba(20, 20, 20, 0.24) !important; }

.right-sidebar-toggle-open,
.right-sidebar-toggle-closed {
  font-size: 0 !important;
  gap: 0 !important; }

.right-sidebar-toggle-open i,
.right-sidebar-toggle-closed i {
  font-size: 1.2rem !important;
  line-height: 1 !important; }

.right-sidebar-toggle-closed {
  display: none !important; }

.right-sidebar-toggle-open {
  display: inline-flex !important;
  align-items: center !important; }

.right-sidebar-toggle-control:checked + .right-sidebar-toggle-button .right-sidebar-toggle-open {
  display: none !important; }

.right-sidebar-toggle-control:checked + .right-sidebar-toggle-button .right-sidebar-toggle-closed {
  display: inline-flex !important;
  align-items: center !important; }

@media screen and (min-width: 1200px) {
  .right-sidebar-toggle-control:checked ~ .right-sidebar,
  .right-sidebar-toggle-control:checked ~ .sidebar.right-sidebar {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    pointer-events: none !important; }
  .right-sidebar-toggle-control:checked ~ .body-container.left-body,
  .right-sidebar-toggle-control:checked ~ .body-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important; } }

/* ============================================================
   POWER SELECT MULTI-SELECT CLEANUP
   Removes the inner input border from multi-select fields.
   ============================================================ */
.ember-power-select-multiple-trigger {
  display: flex !important;
  align-items: center !important;
  min-height: 2.45rem !important;
  padding: 0.28rem 2rem 0.28rem 0.35rem !important;
  background: var(--aoh-panel, #fffdf6) !important;
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid rgba(17, 24, 39, 0.78) !important;
  border-radius: 0.55rem !important;
  box-shadow: 3px 3px 0 rgba(20, 20, 20, 0.14) !important; }

.ember-power-select-multiple-options {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.28rem !important;
  width: 100% !important;
  min-height: 1.8rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important; }

.ember-power-select-trigger-multiple-input-container {
  flex: 1 1 8rem !important;
  min-width: 8rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important; }

.ember-power-select-trigger-multiple-input {
  width: 100% !important;
  min-width: 6rem !important;
  height: 1.8rem !important;
  margin: 0 !important;
  padding: 0 0.25rem !important;
  background: transparent !important;
  color: var(--aoh-ink, #141414) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font: inherit !important; }

.ember-power-select-trigger-multiple-input:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important; }

/* Selected character chips. */
.ember-power-select-multiple-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0.18rem 0.45rem !important;
  background: var(--aoh-gold, #facc15) !important;
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid var(--aoh-ink, #141414) !important;
  border-radius: 0.4rem !important;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, 0.18) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important; }

.ember-power-select-multiple-remove-btn {
  color: var(--aoh-muted-ink, #3b3b3b) !important;
  font-weight: 900 !important;
  cursor: pointer !important; }

.ember-power-select-multiple-remove-btn:hover {
  color: var(--aoh-red, #dc2626) !important; }

/* ============================================================
   TOAST UI TOOLBAR ICON SPACING
   Adds breathing room around buttons without locking toolbar height.
   ============================================================ */
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-defaultUI-toolbar {
  min-height: 46px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 0.35rem 0.65rem !important;
  row-gap: 0.28rem !important;
  box-sizing: border-box !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar {
  height: auto !important;
  min-height: 46px !important;
  background: var(--aoh-blue, #1d4ed8) !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons {
  margin-top: 0.12rem !important;
  margin-bottom: 0.12rem !important; }

/* Narrow screens: reduce vertical padding so wrapped toolbars stay compact. */
@media screen and (max-width: 850px) {
  .card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-defaultUI-toolbar {
    min-height: 40px !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    row-gap: 0.18rem !important; }
  .card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar {
    min-height: 40px !important; }
  .card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons {
    margin-top: 0.05rem !important;
    margin-bottom: 0.05rem !important; } }

.play-screen .scene-controls-box {
  background: transparent !important; }

.chat-box {
  padding-bottom: 0 !important; }

.chat-box + .scene-controls,
.chat-box + .scene-controls-box,
.chat-box ~ .scene-controls,
.chat-box ~ .scene-controls-box {
  margin-top: 0.15rem !important; }

.scene-controls,
.scene-controls-box {
  margin-top: 0.15rem !important; }

.toastui-editor-popup-body {
  background-color: white; }

/* ============================================================
   Ares Box Border Cleanup
   Remove thin default borders that conflict with custom panel styling
   ============================================================ */
.sidebar-box,
.sidebar-box-right,
.scene-controls-box {
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-right: 0 !important; }

/* Live scene log spacing */
#live-scene-log {
  height: 464px;
  min-height: 260px;
  resize: vertical;
  overflow: auto;
  margin-bottom: 0 !important; }

/* ============================================================
   Mobile live scene editor: keep editor inside controls box
   ============================================================ */
@media (max-width: 700px) {
  .scene-controls-box {
    overflow-x: hidden !important; }
  .scene-controls-box .markdown-editor,
  .scene-controls-box .card.markdown-editor,
  .scene-controls-box .card-body.markdown-editor,
  .scene-controls-box div[aria-label="Markdown Editor"],
  .scene-controls-box .toastui-editor-defaultUI {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; }
  .scene-controls-box .toastui-editor-toolbar,
  .scene-controls-box .toastui-editor-defaultUI-toolbar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important; }
  .scene-controls-box .toastui-editor-toolbar-group {
    flex-shrink: 0 !important; }
  .scene-controls-box .toastui-editor-main,
  .scene-controls-box .toastui-editor-main-container,
  .scene-controls-box .toastui-editor-md-container,
  .scene-controls-box .toastui-editor,
  .scene-controls-box .ProseMirror {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; } }

/* ============================================================
   Mobile live scene character select: keep select inside controls box
   ============================================================ */
@media (max-width: 700px) {
  .scene-controls-box .scene-char-select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important; }
  .scene-controls-box .scene-char-select *,
  .scene-controls-box .scene-char-select select,
  .scene-controls-box .scene-char-select .ember-power-select-trigger,
  .scene-controls-box .scene-char-select .ember-basic-dropdown-trigger {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important; } }

/* ============================================================
   Right sidebar first heading spacing
   Removes the empty space above the first sidebar module
   ============================================================ */
.sidebar.right-sidebar .sidebar-box:first-child .sidebar-heading h2,
.sidebar.right-sidebar .sidebar-box-right:first-child .sidebar-heading h2 {
  margin-top: 0 !important; }

/* ============================================================
   Play screen controls spacing
   Pull scene controls up under the live scene log
   ============================================================ */
.play-screen .scene-controls {
  margin-top: -20px !important; }

/* ============================================================
   Scene Card Tabs
   Keeps the content border visible under active tabs
   ============================================================ */
.scene-card .nav-tabs {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 2; }

.scene-card .nav-tabs .nav-link {
  border: 3px solid var(--aoh-border, #111827) !important;
  border-bottom: 0 !important;
  background: var(--aoh-paper-light, #fffaf0) !important;
  color: var(--aoh-ink, #141414) !important;
  margin-right: 0.35rem !important;
  font-weight: 800 !important; }

.scene-card .nav-tabs .nav-link.active {
  background: var(--aoh-gold, #facc15) !important;
  color: var(--aoh-ink, #141414) !important; }

.scene-card .tab-content {
  position: relative;
  z-index: 1;
  border: 3px solid var(--aoh-border, #111827) !important;
  background: var(--aoh-panel, #fffdf6) !important;
  padding: 1rem 1.15rem !important;
  margin-top: 0 !important;
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.14) !important; }

.scene-card .tab-pane p:first-child {
  margin-top: 0 !important; }

.scene-card .tab-pane p:last-child {
  margin-bottom: 0 !important; }

/* ============================================================
   Inline pose edit editor
   Adds breathing room below the pose header and normalizes editor text
   ============================================================ */
.scene-log .markdown-editor,
.scene-pose .markdown-editor,
.scene-set-pose .markdown-editor,
.scene-system-pose .markdown-editor {
  margin-top: 8px !important; }

.scene-log .markdown-editor .card-body.markdown-editor,
.scene-pose .markdown-editor .card-body.markdown-editor,
.scene-set-pose .markdown-editor .card-body.markdown-editor,
.scene-system-pose .markdown-editor .card-body.markdown-editor {
  padding-top: 0.5rem !important; }

/* Match Toast UI edit-pose text to the regular editor size */
.scene-log .toastui-editor-defaultUI .ProseMirror,
.scene-log .toastui-editor-defaultUI .ProseMirror *,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents *,
.scene-pose .toastui-editor-defaultUI .ProseMirror,
.scene-pose .toastui-editor-defaultUI .ProseMirror *,
.scene-pose .toastui-editor-defaultUI .toastui-editor-contents,
.scene-pose .toastui-editor-defaultUI .toastui-editor-contents * {
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: var(--aoh-ink, #141414) !important;
  text-shadow: none !important; }

/* Specifically neutralize headings inside the inline editor/preview.
   This prevents a leading # from making edited pose text enormous. */
.scene-log .toastui-editor-defaultUI .ProseMirror h1,
.scene-log .toastui-editor-defaultUI .ProseMirror h2,
.scene-log .toastui-editor-defaultUI .ProseMirror h3,
.scene-log .toastui-editor-defaultUI .ProseMirror h4,
.scene-log .toastui-editor-defaultUI .ProseMirror h5,
.scene-log .toastui-editor-defaultUI .ProseMirror h6,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents h1,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents h2,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents h3,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents h4,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents h5,
.scene-log .toastui-editor-defaultUI .toastui-editor-contents h6 {
  display: block !important;
  max-width: none !important;
  margin: 0 0 0.65rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--aoh-ink, #141414) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important; }

/* ============================================================
   Markdown Preview inside live scene pose edit
   Preview-internal heading/paragraph styling removed so Preview does
   not override posted-page content styles.
   ============================================================ */
/* ============================================================
   Stacked right sidebar alignment - safe version
   Avoids display:none on Ember-rendered nodes during resize.
   ============================================================ */
@media screen and (max-width: 1199.98px) {
  .sidebar.right-sidebar > .ember-view,
  .right-sidebar > .ember-view {
    align-items: start !important; }
  .sidebar-box.sidebar-box-right .sidebar-heading,
  .sidebar-box-right .sidebar-heading {
    margin: 0 !important;
    padding: 0 !important; }
  .sidebar-box.sidebar-box-right .sidebar-heading h2,
  .sidebar-box-right .sidebar-heading h2 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; }
  .sidebar-box.sidebar-box-right > p:first-of-type,
  .sidebar-box-right > p:first-of-type {
    margin-top: 0 !important; }
  /* Ares sometimes inserts a bare <br> before the first sidebar paragraph.
     Do not use display:none here; keep the node present and neutralize its height. */
  .sidebar-box.sidebar-box-right > br,
  .sidebar-box-right > br {
    line-height: 0 !important;
    font-size: 0 !important; }
  .sidebar-box.sidebar-box-right > br + p,
  .sidebar-box-right > br + p {
    margin-top: -0.75rem !important; } }

/* ============================================================
   Right sidebar toggle visibility
   Hide toggle whenever right sidebar is stacked below content.
   ============================================================ */
@media screen and (max-width: 1199.98px) {
  .right-sidebar-toggle-button {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important; } }

@media screen and (min-width: 1200px) {
  .right-sidebar-toggle-button {
    visibility: visible !important;
    opacity: 0.95 !important;
    pointer-events: auto !important; } }

/* ============================================================
   Ember/Toast UI resize safety overrides
   Keep editor-managed nodes present during responsive resize.
   ============================================================ */
.toastui-editor-defaultUI,
.toastui-editor-toolbar,
.toastui-editor-main,
.toastui-editor-mode-switch {
  transition: none !important; }

.toastui-editor-md-container,
.toastui-editor-ww-container,
.toastui-editor-md-preview,
.toastui-editor-md-splitter,
.toastui-editor.md-mode,
.toastui-editor.ww-mode {
  transition: none !important; }

/* Avoid breakpoint display flips on the fixed sidebar tab. */
@media screen and (max-width: 1199.98px) {
  .right-sidebar-toggle-button {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important; } }

@media screen and (min-width: 1200px) {
  .right-sidebar-toggle-button {
    visibility: visible !important;
    opacity: 0.95 !important;
    pointer-events: auto !important; } }

/* ============================================================
   Play main overflow safety - minimal version
   Keeps scene controls inside the 70% Play column without
   making the controls layout unnecessarily narrow.
   ============================================================ */
.play-screen.row > .aoh-play-main {
  min-width: 0 !important;
  overflow-x: hidden !important; }

.play-screen.row > .aoh-play-main *,
.play-screen.row > .aoh-play-main *::before,
.play-screen.row > .aoh-play-main *::after {
  box-sizing: border-box !important; }

.play-screen .scene-controls-box,
.play-screen .scene-controls {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important; }

.play-screen .scene-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0.5rem !important; }

/* Let the two sides keep their natural width instead of forcing
   both to become narrow columns. */
.play-screen .scene-controls-left,
.play-screen .scene-controls-right {
  max-width: 100% !important;
  min-width: 0 !important; }

/* These are the usual overflow culprits. */
.play-screen .scene-char-select,
.play-screen .scene-pose-select,
.play-screen .scene-dropdowns,
.play-screen .pose-buttons {
  max-width: 100% !important;
  min-width: 0 !important; }

.play-screen .scene-char-select .ember-power-select-trigger,
.play-screen .scene-pose-select .ember-power-select-trigger,
.play-screen .scene-char-select .ember-basic-dropdown-trigger,
.play-screen .scene-pose-select .ember-basic-dropdown-trigger {
  max-width: 100% !important;
  min-width: 0 !important; }

.play-screen .scene-controls .btn,
.play-screen .scene-controls button,
.play-screen .scene-controls .dropdown-toggle {
  max-width: 100% !important; }

/* ============================================================
   Chat controls layout fix
   Keeps Chat Menu + character select aligned under the editor,
   with Send Message on the right.
   Targets: .scene-controls-box > .chat-box + .scene-controls
   ============================================================ */
.play-screen .scene-controls-box > .chat-box + .scene-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "left right" !important;
  column-gap: 1rem !important;
  row-gap: 0.5rem !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 0.5rem !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls .scene-controls-left {
  grid-area: left !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls .scene-controls-right {
  grid-area: right !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls .scene-dropdowns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls .chat-menu,
.play-screen .scene-controls-box > .chat-box + .scene-controls .scene-char-select {
  width: auto !important;
  max-width: 18rem !important;
  min-width: 10rem !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls .scene-char-select {
  min-width: 14rem !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls .ember-power-select-trigger,
.play-screen .scene-controls-box > .chat-box + .scene-controls .ember-basic-dropdown-trigger {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; }

/* Narrow screens: stack Send Message above the chat controls cleanly. */
@media screen and (max-width: 700px) {
  .play-screen .scene-controls-box > .chat-box + .scene-controls {
    grid-template-columns: 1fr !important;
    grid-template-areas: "right" "left" !important; }
  .play-screen .scene-controls-box > .chat-box + .scene-controls .scene-controls-right,
  .play-screen .scene-controls-box > .chat-box + .scene-controls .scene-controls-left {
    justify-content: flex-start !important; }
  .play-screen .scene-controls-box > .chat-box + .scene-controls .chat-menu,
  .play-screen .scene-controls-box > .chat-box + .scene-controls .scene-char-select {
    width: 100% !important;
    max-width: 100% !important; } }

/* ============================================================
   Chat menu dropdown clipping fix
   Allows the Chat Menu dropup to render outside the controls row.
   ============================================================ */
.play-screen .scene-controls-box > .chat-box + .scene-controls,
.play-screen .scene-controls-box > .chat-box + .scene-controls .scene-controls-left,
.play-screen .scene-controls-box > .chat-box + .scene-controls .scene-dropdowns,
.play-screen .scene-controls-box > .chat-box + .scene-controls .chat-menu,
.play-screen .scene-controls-box > .chat-box + .scene-controls .dropdown,
.play-screen .scene-controls-box > .chat-box + .scene-controls .dropup {
  overflow: visible !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls {
  position: relative !important;
  z-index: 20 !important; }

.play-screen .scene-controls-box > .chat-box + .scene-controls .dropdown-menu {
  z-index: 9999 !important;
  overflow: visible !important; }

/* ============================================================
   Toast UI toolbar button size reduction
   Makes Bold/Italic/etc controls about 75% of current size.
   ============================================================ */
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons {
  width: 1.6rem !important;
  height: 1.6rem !important;
  min-width: 1.6rem !important;
  min-height: 1.6rem !important;
  margin: 0.06rem 0.08rem !important;
  border-width: 1.5px !important;
  border-radius: 0.45rem !important;
  font-size: 0.8rem !important;
  line-height: 1 !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons::before {
  font-size: 0.8rem !important;
  line-height: 1 !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.heading::before,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.bold::before,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.italic::before,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.strike::before {
  font-size: 0.9rem !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.hrline::before,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.bullet-list::before {
  font-size: 1rem !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.code::before {
  font-size: 0.58rem !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons.codeblock::before {
  font-size: 0.65rem !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-divider {
  height: 1.4rem !important;
  margin: 0 0.3rem !important;
  border-left-width: 1.5px !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-defaultUI-toolbar {
  gap: 0.12rem !important;
  padding: 0.3rem 0.5rem !important;
  row-gap: 0.2rem !important; }

/* ============================================================
   Pose controls layout fix
   Left side:
   - Play / Manage / Other together on one row
   - Character select below them
   Right side:
   - Add Pose / Add OOC / Reload + pose type select
   ============================================================ */
.play-screen .scene-controls-box > .scene-pose-box + .scene-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "left right" !important;
  column-gap: 1rem !important;
  row-gap: 0.65rem !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 0.75rem !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important; }

/* LEFT SIDE: menu row + character dropdown below */
.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-controls-left {
  grid-area: left !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "menus" "character" !important;
  row-gap: 0.55rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-dropdowns {
  grid-area: menus !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-menu {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-char-select {
  grid-area: character !important;
  width: 100% !important;
  max-width: 24rem !important;
  min-width: 14rem !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-char-select .ember-power-select-trigger,
.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-char-select .ember-basic-dropdown-trigger {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; }

/* RIGHT SIDE: pose buttons + pose type select */
.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-controls-right {
  grid-area: right !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 0.55rem !important;
  justify-items: end !important;
  align-items: start !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .pose-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.45rem !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-pose-select {
  width: 14rem !important;
  max-width: 100% !important;
  min-width: 10rem !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-pose-select .ember-power-select-trigger,
.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-pose-select .ember-basic-dropdown-trigger {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; }

/* Let Play / Manage / Other dropup menus escape the controls row. */
.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .dropdown,
.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .dropup {
  overflow: visible !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls {
  position: relative !important;
  z-index: 20 !important; }

.play-screen .scene-controls-box > .scene-pose-box + .scene-controls .dropdown-menu {
  z-index: 9999 !important;
  overflow: visible !important; }

/* Narrow screens: stack right controls above left controls. */
@media screen and (max-width: 700px) {
  .play-screen .scene-controls-box > .scene-pose-box + .scene-controls {
    grid-template-columns: 1fr !important;
    grid-template-areas: "right" "left" !important; }
  .play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-controls-right {
    justify-items: start !important; }
  .play-screen .scene-controls-box > .scene-pose-box + .scene-controls .pose-buttons {
    justify-content: flex-start !important; }
  .play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-char-select,
  .play-screen .scene-controls-box > .scene-pose-box + .scene-controls .scene-pose-select {
    width: 100% !important;
    max-width: 100% !important; } }

/* ============================================================
   Play editor resize stability
   Keeps Toast UI nodes mounted but prevents inactive/split panes
   from participating heavily in Play-page resize calculations.
   Do not use display:none here.
   ============================================================ */
.play-screen .scene-controls-box .toastui-editor-md-container {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important; }

.play-screen .scene-controls-box .toastui-editor.md-mode {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important; }

.play-screen .scene-controls-box .toastui-editor-md-preview,
.play-screen .scene-controls-box .toastui-editor-md-splitter {
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: 0 !important; }

.play-screen .scene-controls-box .toastui-editor-ww-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important; }

/* Keep the visible writing surface stable inside the fixed-height editor. */
.play-screen .scene-controls-box .toastui-editor-main,
.play-screen .scene-controls-box .toastui-editor-main-container,
.play-screen .scene-controls-box .toastui-editor-md-container,
.play-screen .scene-controls-box .toastui-editor-ww-container,
.play-screen .scene-controls-box .toastui-editor,
.play-screen .scene-controls-box .ProseMirror {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important; }

/* Isolate the editor box from wider page reflow as much as CSS allows. */
.play-screen .scene-controls-box .scene-pose-box,
.play-screen .scene-controls-box .chat-box,
.play-screen .scene-controls-box .card.markdown-editor,
.play-screen .scene-controls-box .card-body.markdown-editor,
.play-screen .scene-controls-box div[aria-label="Markdown Editor"],
.play-screen .scene-controls-box .toastui-editor-defaultUI {
  contain: layout style !important; }

/* ============================================================
   Chargen / App Status Check Block
   ============================================================ */
pre.ansi.app-status,
.app-status {
  background: #141414 !important;
  color: #fffdf6 !important;
  border: 3px solid var(--aoh-ink, #141414) !important;
  box-shadow: 5px 5px 0 rgba(20, 20, 20, 0.18) !important;
  padding: 1rem 1.15rem !important;
  margin: 0 !important;
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  white-space: pre-wrap !important;
  overflow-x: auto !important; }

pre.ansi.app-status .ansi-bright-green-fg,
.app-status .ansi-bright-green-fg {
  color: #86efac !important;
  font-weight: 900 !important; }

pre.ansi.app-status .ansi-bright-yellow-fg,
.app-status .ansi-bright-yellow-fg {
  color: #fde047 !important;
  font-weight: 900 !important; }

pre.ansi.app-status .ansi-bright-red-fg,
.app-status .ansi-bright-red-fg {
  color: #fca5a5 !important;
  font-weight: 900 !important; }

/* ============================================================
   Character Profile Relationships
   Fixed left image column; text stays in a consistent right column.
   ============================================================ */
.relationship-row {
  display: grid !important;
  grid-template-columns: 125px minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start !important;
  margin: 0 0 0.8rem 0;
  padding: 0.45rem 0.6rem 0.65rem 0.6rem;
  background: transparent; }

.relationship-row > .ember-view:first-child,
.relationship-icon-container {
  display: block !important;
  width: 125px;
  min-width: 125px;
  height: 125px;
  margin: 0 !important; }

.relationship-icon {
  display: block !important;
  width: 125px !important;
  height: 125px !important;
  object-fit: cover;
  border-radius: 1.35rem; }

.relationship-details {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: start !important;
  vertical-align: top !important;
  line-height: 1.45; }

.relationship-name {
  display: inline !important;
  font-weight: 800; }

.relationship-details p {
  margin: 0 0 0.65rem 0; }

.relationship-details p:last-child {
  margin-bottom: 0; }

/* Mobile: stack image above text when there is not enough room. */
@media (max-width: 600px) {
  .relationship-row {
    grid-template-columns: 1fr;
    row-gap: 0.75rem; }
  .relationship-row > .ember-view:first-child,
  .relationship-icon-container {
    width: 125px;
    min-width: 125px;
    height: 125px; } }

/* ============================================================
   Unified Ares Markdown / Toast UI Editor Final Pass
   Replaces the old forum-only and live-pose-only editor fixes.
   Keep this at the very end of the final SCSS part.
   ============================================================ */
:root {
  --aoh-editor-default-height: 520px;
  --aoh-editor-compact-height: 335px;
  --aoh-editor-mobile-height: 315px;
  --aoh-editor-toolbar-min: 42px;
  --aoh-editor-mode-switch-height: 40px; }

/* Shared wrapper behavior. */
.markdown-editor,
.card.markdown-editor,
.card-body.markdown-editor,
.markdown-editor-container,
.editor-container,
.forum-reply-panel,
.scene-pose-box,
.chat-box,
#reply {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important; }

.card.markdown-editor,
.card-body.markdown-editor,
#reply .card,
#reply .card-body,
.scene-pose-box > .card.markdown-editor,
.scene-pose-box > .card > .card-body.markdown-editor,
.chat-box > .card.markdown-editor,
.chat-box > .card > .card-body.markdown-editor {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important; }

/* Ares Write / Preview controls. */
.markdown-controls,
.scene-controls-box .scene-pose-box .markdown-controls,
#reply .markdown-controls,
.chat-box .markdown-controls {
  position: relative !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 0.55rem 0 !important;
  padding: 0.45rem 0.55rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important; }

.markdown-control-toggle,
.markdown-controls .markdown-control-toggle,
.scene-controls-box .scene-pose-box .markdown-control-toggle,
#reply .markdown-control-toggle,
.chat-box .markdown-control-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4.4rem !important;
  min-height: 0 !important;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0.28rem 0.85rem !important;
  background: var(--aoh-panel, #fffdf6) !important;
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid var(--aoh-ink, #141414) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 rgba(20, 20, 20, 0.16) !important;
  font-family: var(--aoh-caption-font, "Barlow Condensed", "Open Sans", sans-serif) !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  cursor: pointer !important; }

.markdown-control-toggle.active,
.markdown-controls .markdown-control-toggle.active,
.scene-controls-box .scene-pose-box .markdown-control-toggle.active,
#reply .markdown-control-toggle.active,
.chat-box .markdown-control-toggle.active {
  background: var(--aoh-blue, #1d4ed8) !important;
  color: var(--aoh-panel, #fffdf6) !important;
  border-bottom: 2px solid var(--aoh-ink, #141414) !important;
  box-shadow: 3px 3px 0 var(--aoh-red, #dc2626) !important; }

.markdown-control-toggle:hover,
.markdown-control-toggle:focus,
.markdown-controls .markdown-control-toggle:hover,
.markdown-controls .markdown-control-toggle:focus {
  background: var(--aoh-gold, #facc15) !important;
  color: var(--aoh-ink, #141414) !important;
  outline: 0 !important;
  box-shadow: 3px 3px 0 var(--aoh-blue, #1d4ed8) !important; }

.markdown-controls .tooltip-button,
.scene-controls-box .scene-pose-box .markdown-controls .tooltip-button,
#reply .markdown-controls .tooltip-button,
.chat-box .markdown-controls .tooltip-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--aoh-panel, #fffdf6) !important;
  border: 2px solid var(--aoh-ink, #141414) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 rgba(20, 20, 20, 0.14) !important; }

.markdown-controls .tooltip-button a,
.markdown-controls .tooltip-button i,
.markdown-controls .tooltip-button span {
  color: var(--aoh-red, #dc2626) !important;
  text-decoration: none !important; }

.markdown-controls .tooltip-button i {
  font-size: 0.95rem !important; }

/* Editor height: long form editors remain taller, play/forum editors match. */
.card-body.markdown-editor > div[aria-label="Markdown Editor"],
.markdown-editor [aria-label="Markdown Editor"],
div[aria-label="Markdown Editor"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--aoh-editor-default-height) !important;
  min-height: var(--aoh-editor-default-height) !important;
  max-height: var(--aoh-editor-default-height) !important;
  resize: none !important;
  box-sizing: border-box !important;
  overflow: visible !important; }

.play-screen .chat-box .card-body.markdown-editor > div[aria-label="Markdown Editor"],
.play-screen .scene-controls-box .card-body.markdown-editor > div[aria-label="Markdown Editor"],
.play-screen .card-body.markdown-editor > div[aria-label="Markdown Editor"],
.scene-controls-box .scene-pose-box [aria-label="Markdown Editor"],
#reply .card-body.markdown-editor > div[aria-label="Markdown Editor"],
#reply [aria-label="Markdown Editor"],
.chat-box [aria-label="Markdown Editor"] {
  height: var(--aoh-editor-compact-height) !important;
  min-height: var(--aoh-editor-compact-height) !important;
  max-height: var(--aoh-editor-compact-height) !important; }

/* Toast UI visible frame. */
.toastui-editor-defaultUI,
.scene-controls-box .scene-pose-box .toastui-editor-defaultUI,
#reply .toastui-editor-defaultUI,
.chat-box .toastui-editor-defaultUI {
  position: relative !important;
  z-index: 7 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, var(--aoh-editor-paper, #fffef9), var(--aoh-panel, #fffdf6)) !important;
  border: 2px solid var(--aoh-border, #111827) !important;
  border-radius: 0.9rem !important;
  box-shadow: 0 0 0 2px rgba(255, 253, 246, 0.92), 5px 5px 0 rgba(29, 78, 216, 0.16), 8px 8px 0 rgba(20, 20, 20, 0.08) !important; }

/* Hide Toast UI's internal Write/Preview tabs; Ares controls above are visible. */
.toastui-editor-md-tab-container,
.toastui-editor-tabs {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important; }

/* Toolbar. */
.toastui-editor-toolbar,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar,
.scene-controls-box .scene-pose-box .toastui-editor-toolbar,
#reply .toastui-editor-toolbar,
.chat-box .toastui-editor-toolbar {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: var(--aoh-editor-toolbar-min) !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important; }

.toastui-editor-defaultUI-toolbar,
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-defaultUI-toolbar,
.scene-controls-box .scene-pose-box .toastui-editor-defaultUI-toolbar,
#reply .toastui-editor-defaultUI-toolbar,
.chat-box .toastui-editor-defaultUI-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.12rem !important;
  min-height: var(--aoh-editor-toolbar-min) !important;
  height: auto !important;
  padding: 0.3rem 0.5rem !important;
  row-gap: 0.2rem !important;
  background: linear-gradient(180deg, var(--aoh-blue, #1d4ed8), #2145c7) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--aoh-border, #111827) !important;
  border-radius: 0.72rem 0.72rem 0 0 !important;
  box-shadow: inset 0 -4px 0 rgba(20, 20, 20, 0.13) !important;
  box-sizing: border-box !important;
  overflow: visible !important; }

.toastui-editor-toolbar-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.12rem !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important; }

/* Keep the compact toolbar buttons from the earlier style. */
.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-icons,
.toastui-editor-toolbar-icons {
  width: 1.6rem !important;
  height: 1.6rem !important;
  min-width: 1.6rem !important;
  min-height: 1.6rem !important;
  margin: 0.06rem 0.08rem !important;
  border-width: 1.5px !important;
  border-radius: 0.45rem !important;
  font-size: 0.8rem !important;
  line-height: 1 !important; }

.card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-toolbar-divider,
.toastui-editor-toolbar-divider {
  height: 1.4rem !important;
  margin: 0 0.3rem !important;
  border-left-width: 1.5px !important; }

/* Main body fills the remaining space between toolbar and mode switch. */
.toastui-editor-main,
.scene-controls-box .scene-pose-box .toastui-editor-main,
#reply .toastui-editor-main,
.chat-box .toastui-editor-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  border-top: 0 !important;
  box-sizing: border-box !important; }

.toastui-editor-main-container,
.toastui-editor-md-container,
.toastui-editor-ww-container,
.scene-controls-box .scene-pose-box .toastui-editor-main-container,
.scene-controls-box .scene-pose-box .toastui-editor-md-container,
.scene-controls-box .scene-pose-box .toastui-editor-ww-container,
#reply .toastui-editor-main-container,
#reply .toastui-editor-md-container,
#reply .toastui-editor-ww-container,
.chat-box .toastui-editor-main-container,
.chat-box .toastui-editor-md-container,
.chat-box .toastui-editor-ww-container {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important; }

.toastui-editor-md-container .toastui-editor,
.toastui-editor-ww-container .toastui-editor,
.toastui-editor-md-preview,
.scene-controls-box .scene-pose-box .toastui-editor-md-container .toastui-editor,
.scene-controls-box .scene-pose-box .toastui-editor-md-preview,
.scene-controls-box .scene-pose-box .toastui-editor-ww-container .toastui-editor,
#reply .toastui-editor-md-container .toastui-editor,
#reply .toastui-editor-md-preview,
#reply .toastui-editor-ww-container .toastui-editor,
.chat-box .toastui-editor-md-container .toastui-editor,
.chat-box .toastui-editor-md-preview,
.chat-box .toastui-editor-ww-container .toastui-editor {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: auto !important;
  box-sizing: border-box !important; }

.toastui-editor .ProseMirror,
.toastui-editor-contents,
#reply .ProseMirror,
#reply .toastui-editor-contents,
.scene-controls-box .scene-pose-box .ProseMirror,
.scene-controls-box .scene-pose-box .toastui-editor-contents,
.chat-box .ProseMirror,
.chat-box .toastui-editor-contents {
  min-height: 100% !important;
  box-sizing: border-box !important;
  color: var(--aoh-ink, #141414) !important;
  font-family: var(--aoh-readable-font, "Open Sans", system-ui, sans-serif) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important; }

/* Bottom Markdown / WYSIWYG switch. */
.toastui-editor-mode-switch,
#reply .toastui-editor-mode-switch,
.scene-controls-box .scene-pose-box .toastui-editor-mode-switch,
.chat-box .toastui-editor-mode-switch {
  position: static !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex: 0 0 var(--aoh-editor-mode-switch-height) !important;
  height: var(--aoh-editor-mode-switch-height) !important;
  min-height: var(--aoh-editor-mode-switch-height) !important;
  max-height: var(--aoh-editor-mode-switch-height) !important;
  margin: 0 !important;
  padding: 0 0.65rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: var(--aoh-panel, #fffdf6) !important;
  border: 0 !important;
  border-top: 2px solid var(--aoh-blue, #1d4ed8) !important;
  border-radius: 0 0 0.75rem 0.75rem !important; }

.toastui-editor-mode-switch .tab-item,
#reply .toastui-editor-mode-switch .tab-item,
.scene-controls-box .scene-pose-box .toastui-editor-mode-switch .tab-item,
.chat-box .toastui-editor-mode-switch .tab-item {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: 1.65rem !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.18rem 0.65rem !important;
  background: var(--aoh-paper-light, #fffaf0) !important;
  color: var(--aoh-ink, #141414) !important;
  border: 2px solid var(--aoh-ink, #141414) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: var(--aoh-caption-font, "Barlow Condensed", "Open Sans", sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important; }

.toastui-editor-mode-switch .tab-item.active,
#reply .toastui-editor-mode-switch .tab-item.active,
.scene-controls-box .scene-pose-box .toastui-editor-mode-switch .tab-item.active,
.chat-box .toastui-editor-mode-switch .tab-item.active {
  background: var(--aoh-gold, #facc15) !important;
  color: var(--aoh-ink, #141414) !important; }

/* Put scene/forum buttons below the editor, not underneath it. */
#reply .action-buttons,
.scene-controls-box .scene-controls {
  clear: both !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0.9rem !important;
  padding-top: 0 !important;
  overflow: visible !important; }

.scene-controls-box .scene-pose-box,
.scene-controls-box .chat-box {
  margin-bottom: 0.8rem !important; }

/* Mobile final pass: no 100vw inside padded containers. */
@media screen and (max-width: 700px) {
  .body-container.left-body,
  .body-container,
  .left-body,
  .play-screen,
  .scene-controls-box,
  .scene-pose-box,
  .chat-box,
  #reply,
  .markdown-editor,
  .card.markdown-editor,
  .card-body.markdown-editor,
  .markdown-editor [aria-label="Markdown Editor"],
  div[aria-label="Markdown Editor"],
  .toastui-editor-defaultUI {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important; }
  .play-screen .chat-box .card-body.markdown-editor > div[aria-label="Markdown Editor"],
  .play-screen .scene-controls-box .card-body.markdown-editor > div[aria-label="Markdown Editor"],
  .play-screen .card-body.markdown-editor > div[aria-label="Markdown Editor"],
  .scene-controls-box .scene-pose-box [aria-label="Markdown Editor"],
  #reply .card-body.markdown-editor > div[aria-label="Markdown Editor"],
  #reply [aria-label="Markdown Editor"],
  .chat-box [aria-label="Markdown Editor"] {
    height: var(--aoh-editor-mobile-height) !important;
    min-height: var(--aoh-editor-mobile-height) !important;
    max-height: var(--aoh-editor-mobile-height) !important; }
  .markdown-controls,
  .scene-controls-box .scene-pose-box .markdown-controls,
  #reply .markdown-controls,
  .chat-box .markdown-controls {
    padding-left: 0 !important;
    padding-right: 0 !important; }
  .markdown-control-toggle,
  .markdown-controls .markdown-control-toggle {
    min-width: 4rem !important;
    height: 1.9rem !important;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    font-size: 0.9rem !important; }
  .markdown-controls .tooltip-button {
    width: 1.9rem !important;
    min-width: 1.9rem !important;
    height: 1.9rem !important;
    min-height: 1.9rem !important; }
  .toastui-editor-defaultUI-toolbar,
  .card-body.markdown-editor > div[aria-label="Markdown Editor"] .toastui-editor-defaultUI-toolbar {
    padding: 0.22rem 0.25rem !important; }
  .toastui-editor-mode-switch {
    justify-content: center !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important; }
  .toastui-editor-mode-switch .tab-item {
    font-size: 0.78rem !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important; } }

/* ============================================================
   Mobile Chat Log Containment Fix
   Prevents the chat scroll content from bleeding through or over
   the chat editor at narrow widths.
   Keep this after all chat/editor/mobile rules.
   ============================================================ */
@media screen and (max-width: 700px) {
  .play-screen #chat-window,
  .scene-controls-box #chat-window,
  #chat-window {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    isolation: isolate !important;
    contain: paint !important; }
  .play-screen #chat-window > .hint.float-end,
  .play-screen #chat-window .hint.float-end,
  .scene-controls-box #chat-window > .hint.float-end,
  .scene-controls-box #chat-window .hint.float-end,
  #chat-window > .hint.float-end,
  #chat-window .hint.float-end {
    position: relative !important;
    z-index: 1 !important;
    float: none !important;
    clear: both !important;
    max-width: 100% !important;
    overflow: hidden !important; }
  .play-screen #chat-window .scene-pose-header,
  .play-screen #chat-window .scene-pose-header + span,
  .scene-controls-box #chat-window .scene-pose-header,
  .scene-controls-box #chat-window .scene-pose-header + span,
  #chat-window .scene-pose-header,
  #chat-window .scene-pose-header + span {
    position: relative !important;
    z-index: 1 !important;
    max-width: 100% !important;
    overflow: hidden !important; }
  .play-screen .chat-box,
  .scene-controls-box .chat-box,
  .chat-box {
    position: relative !important;
    z-index: 30 !important;
    isolation: isolate !important;
    background: var(--aoh-paper, #f8f2df) !important;
    overflow: visible !important; }
  .play-screen .chat-box .markdown-controls,
  .scene-controls-box .chat-box .markdown-controls,
  .chat-box .markdown-controls {
    position: relative !important;
    z-index: 31 !important;
    background: var(--aoh-paper, #f8f2df) !important; }
  .play-screen .chat-box .toastui-editor-defaultUI,
  .scene-controls-box .chat-box .toastui-editor-defaultUI,
  .chat-box .toastui-editor-defaultUI {
    position: relative !important;
    z-index: 32 !important;
    background: linear-gradient(180deg, var(--aoh-editor-paper, #fffef9), var(--aoh-panel, #fffdf6)) !important; } }

/* ============================================================
   Scene pose panels should grow with text, not scroll internally
   ============================================================ */
.scene-pose,
#live-scene-log .scene-pose,
.scene-log .scene-pose {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important; }

/* Keep the outer live scene log as the scroll container. */
#live-scene-log {
  overflow-y: auto !important;
  overflow-x: hidden !important; }

/* ============================================================
   Homepage Seasonal Spotlight Panel
   ============================================================ */
.aoh-spotlight-panel {
  position: relative;
  max-width: 1040px;
  margin: 2.75rem auto;
  padding: 2rem 1.5rem 1.6rem 1.5rem;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.98), rgba(255, 250, 240, 0.98));
  border: 5px solid var(--aoh-ink);
  box-shadow: 9px 9px 0 rgba(20, 20, 20, 0.2);
  text-align: center; }

.aoh-spotlight-banner-link {
  display: block;
  margin: 0.75rem auto 1.25rem auto;
  max-width: 980px;
  text-decoration: none !important; }

.aoh-spotlight-banner {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--aoh-ink);
  box-shadow: 7px 7px 0 rgba(20, 20, 20, 0.22); }

.aoh-spotlight-panel p {
  max-width: 68ch;
  margin: 0.75rem auto;
  font-size: 1.08rem;
  line-height: 1.6; }

@media (max-width: 900px) {
  .aoh-spotlight-panel {
    padding: 1.4rem 1rem 1.35rem 1rem; }
  .aoh-spotlight-banner-link {
    margin-top: 0.5rem; } }

/* ============================================================
   Homepage Spotlight Banner - Full Width
   ============================================================ */
.aoh-spotlight-panel .aoh-spotlight-banner-link {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0.75rem auto 1.35rem auto !important; }

.aoh-spotlight-panel .aoh-spotlight-banner {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  border: 4px solid var(--aoh-ink) !important;
  box-shadow: 7px 7px 0 rgba(20, 20, 20, 0.22) !important; }

/* ============================================================
   Markdown Editor Preview: remove dark preview background
   ============================================================ */
.markdown-editor .markdown-preview,
.card.markdown-editor .markdown-preview,
.card-body.markdown-editor .markdown-preview {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--aoh-ink) !important; }

.markdown-editor .markdown-preview > span,
.markdown-editor .markdown-preview > div {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--aoh-ink) !important; }

.markdown-editor .markdown-preview p,
.markdown-editor .markdown-preview li,
.markdown-editor .markdown-preview td,
.markdown-editor .markdown-preview th {
  color: var(--aoh-ink) !important; }

/* ============================================================
   ToastUI WYSIWYG: let only the active editor mode display
   ============================================================ */
/* In WYSIWYG mode, hide ToastUI's Markdown-side editor and preview panes. */
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-md-container {
  display: none !important; }

/* In Markdown mode, hide ToastUI's WYSIWYG pane. */
.toastui-editor-main.toastui-editor-md-mode .toastui-editor-ww-container {
  display: none !important; }

/* Keep the active WYSIWYG pane in normal document order. */
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-ww-container,
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor.ww-mode,
.toastui-editor-main.toastui-editor-ww-mode .ProseMirror.toastui-editor-contents {
  display: block !important;
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important; }

/* ============================================================
   ToastUI WYSIWYG: remove default gray H2 underline
   ============================================================ */
.toastui-editor-main.toastui-editor-ww-mode
.ProseMirror.toastui-editor-contents h2 {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important; }

/* ============================================================
   ToastUI Editor: show only the active editing mode
   Fixes duplicate editable text when switching Markdown/WYSIWYG
   ============================================================ */
/* WYSIWYG mode: fully hide the Markdown editor/preview container. */
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-md-container,
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-md-container *,
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-md-preview,
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-md-preview * {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important; }

/* WYSIWYG mode: keep only the WYSIWYG container visible. */
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-ww-container,
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-ww-container .toastui-editor,
.toastui-editor-main.toastui-editor-ww-mode .toastui-editor-ww-container .ProseMirror {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 175px !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important; }

/* Markdown mode: fully hide the WYSIWYG container. */
.toastui-editor-main.toastui-editor-md-mode .toastui-editor-ww-container,
.toastui-editor-main.toastui-editor-md-mode .toastui-editor-ww-container * {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important; }

/* Markdown mode: keep the Markdown container visible. */
.toastui-editor-main.toastui-editor-md-mode .toastui-editor-md-container {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 175px !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important; }

/* ============================================================
   ToastUI Markdown Editor: keep blank editor space clickable
   ============================================================ */
.toastui-editor-main.toastui-editor-md-mode .toastui-editor-md-container,
.toastui-editor-main.toastui-editor-md-mode .toastui-editor.md-mode,
.toastui-editor-main.toastui-editor-md-mode .toastui-editor.md-mode.active,
.toastui-editor-main.toastui-editor-md-mode .toastui-editor.md-mode .ProseMirror {
  display: block !important;
  visibility: visible !important;
  height: 100% !important;
  min-height: 175px !important;
  max-height: none !important;
  overflow: auto !important;
  pointer-events: auto !important; }

/* Make the editable Markdown surface fill the visible white area. */
.toastui-editor-main.toastui-editor-md-mode .toastui-editor.md-mode .ProseMirror {
  box-sizing: border-box !important;
  width: 100% !important; }

.card-default {
  background-color: transparent;
  border: 0; }

/* Scene list table: title + tag together, summary below */
table.table.table-striped td:first-child {
  display: table-cell !important;
  text-align: left !important;
  vertical-align: top !important; }

table.table.table-striped td:first-child > a[href^="/scene/"],
table.table.table-striped td:first-child > a[href*="/scene/"] {
  display: block !important;
  float: left !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0.4rem 0 0 !important;
  padding: 0 !important;
  text-align: left !important; }

table.table.table-striped td:first-child > span {
  display: block !important;
  float: left !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important; }

table.table.table-striped td:first-child .badge {
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: baseline !important; }

table.table.table-striped td:first-child > p,
table.table.table-striped td:first-child p {
  display: block !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0.45rem 0 0 0 !important;
  padding: 0 !important;
  text-align: left !important; }

/* ============================================================
   Rounded Pill Icon Badge Repair
   Centers the icon inside icon-only Bootstrap badges.
   ============================================================ */
.badge.rounded-pill.bg-primary:has(i) {
  position: relative !important;
  display: inline-block !important;
  width: 1.45rem !important;
  height: 1.45rem !important;
  min-width: 1.45rem !important;
  min-height: 1.45rem !important;
  padding: 0 !important;
  margin-right: 0.35rem !important;
  line-height: 1 !important;
  vertical-align: middle !important; }

.badge.rounded-pill.bg-primary:has(i) > i {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%) !important; }

/* ============================================================
   Global dropdown stacking fix
   Keep Bootstrap/Ares dropdown menus above editors and panels.
   ============================================================ */
/* Any Ares/Bootstrap dropdown that opens should sit above rich editors. */
.dropdown,
.dropup,
.scene-menu,
.scene-dropdowns {
  position: relative;
  z-index: 5000; }

/* The actual menu needs the higher layer, not only the wrapper. */
.dropdown-menu,
.dropdown-menu.show {
  z-index: 5100 !important; }

/* ToastUI editor should stay below open site menus/dropdowns. */
.toastui-editor-defaultUI,
.toastui-editor-popup,
.toastui-editor-context-menu,
.toastui-editor-toolbar,
.toastui-editor-main,
.markdown-editor {
  z-index: 1; }

/* Ember Power Select dropdowns also need to appear above editors. */
.ember-basic-dropdown-content,
.ember-power-select-dropdown {
  z-index: 5200 !important; }