.lm_item .lm_header .lm_controls .lm_maximise {
  display: none;
}

.lm_content {
  overflow-y: auto;
}

@keyframes error_blink {
  0% {
    color: #fff;
  }

  50% {
    color: #e00;
  }

  100% {
    color: #fff;
  }
}

.text_rainbow {
  background-color: #fff;
  background-image: repeating-linear-gradient(
    to right,
    red 0% 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80% 100%
  );
  background-size: 75% 75%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s linear infinite;
}

@keyframes rainbow_alt {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }
}

@keyframes rainbow {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 400% 0;
  }
}

#client_error_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

#client_error {
  display: flex;
  flex-direction: column;
  padding: 24px 36px;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #c00;
  border-radius: 8px;
  color: #fff;
  font-size: large;
  min-width: 280px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

#client_error_icon {
  font-size: 48px;
  color: #f44;
  margin-bottom: 4px;
}

#client_errortext {
  margin: 4px 0 8px;
  text-align: center;
}

#client_error_code {
  display: none;
  color: #999;
  font-size: 12px;
  margin: 0 0 16px;
}

#client_reconnect {
  background: #c00;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 32px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s;
}

#client_reconnect:hover {
  background: #e22;
}

#client_error_help {
  color: #aaa;
  font-size: 12px;
  margin: 0;
}

#client_error_help a {
  color: #6af;
}

#client_secondfactor {
  display: block;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  background: black;
  color: lightgreen;
  font-size: large;
  z-index: 200;
}

#client_waiting {
  display: block;
  flex-direction: column;
  position: fixed;
  top: 5vh;
  left: 10vw;
  width: 80vw;
  max-height: 90vh;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: large;
  overflow-y: scroll;
  z-index: 100;
  background: #555;
}

#client_loading {
  display: block;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  background: black;
  color: lightgreen;
  font-size: large;
}

#client_loadingtext {
  margin: 30px;
}

.demothing {
  display: inline-block;
  height: 60px;
  width: 60px;
  max-width: 60px;
  max-height: 60px;
  margin: 3px;
  border: 1px solid #000;
  vertical-align: top;
}

.noini {
  transform: rotate(180deg);
}

#client_charselect {
  display: block;
  text-align: center;
  margin: 0 auto;
  background: #444;
}

/* ===== Character select rework ===== */
/* Taken characters: darkened/greyed like AO2 (replaces the old near-invisible
   0.25 opacity, which was hard to read). */
.demothing.taken,
.charlist-entry.taken .charlist-icon {
  filter: grayscale(0.7) brightness(0.42);
}
.charlist-entry.taken .charlist-name {
  color: #777;
}

/* AO2-style left list. Hidden by default (Classic keeps the plain grid);
   the Modern rules below switch it on. */
#client_charlist {
  display: none;
}
.charlist-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
  border-bottom: 1px solid #555;
  text-align: left;
}
.charlist-entry:hover {
  background: rgba(255, 255, 255, 0.08);
}
.charlist-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
  background: #1a1a1a;
  border-radius: 3px;
}
.charlist-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: small;
}

/* ----- Modern: two-panel (list left, grid right, spectate at the bottom) ----- */
body.layout-modern #client_charselect {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  max-height: 82vh;
  text-align: left;
  background: var(--coa-ink-1, #2a2a2a);
}
body.layout-modern #client_charselect > p {
  margin: 0;
  font-weight: bold;
}
body.layout-modern #client_charactersearch {
  flex: 0 0 auto;
}
body.layout-modern #charselect_body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 72vh;
  gap: 8px;
}
body.layout-modern #client_charlist {
  display: block;
  flex: 0 0 200px;
  max-height: 72vh;
  overflow-y: auto;
  background: var(--coa-ink-2);
  border: 1px solid var(--coa-line);
  border-radius: 4px;
}
body.layout-modern #client_chartable {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 72vh;
  overflow-y: auto;
  align-content: flex-start;
  text-align: left;
  padding: 6px;
  background: var(--coa-ink-2);
  border: 1px solid var(--coa-line);
  border-radius: 4px;
}
body.layout-modern #charselect_spectate {
  flex: 0 0 auto;
  align-self: stretch;
}

/* ----- Mobile fallback: drop the list, show just the grid full-width ----- */
@media (max-width: 820px), (pointer: coarse) {
  body.layout-modern #client_charselect {
    max-height: 100%;
  }
  body.layout-modern #charselect_body {
    flex-direction: column;
  }
  body.layout-modern #client_charlist {
    display: none;
  }
}

#client_icwrapper {
  position: relative;
  background: inherit;
}

#client_iccontrols {
  background: inherit;
  height: 100%;
  overflow-y: auto;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-2%);
  }

  40% {
    transform: translateX(2%);
  }

  60% {
    transform: translateX(-2%);
  }

  80% {
    transform: translateX(2%);
  }
}

@keyframes flash {
  0%,
  100% {
    background-color: transparent;
  }

  50% {
    background-color: white;
  }
}

#client_background {
  position: relative;
  background-color: transparent;
  top: 0;
  left: 0;
}

#client_gamewindow {
  position: inherit;
  width: 100%;
  padding-bottom: 75%;
}

#client_court_static {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#client_court {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

#client_stitch_court {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#client_stitch_court > img {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
}

#client_court_classic {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}

.def_court {
  object-position: center;
}

.wit_court {
  object-position: center;
}

.pro_court {
  object-position: center;
}

#client_fullview {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  transition: none;
  transition-property: left;
}

#client_classicview {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
}

.client_char {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
}

.client_char > img {
  position: absolute;
  height: 100%;
  bottom: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#client_bench_classic {
  left: 0;
}

#client_def_bench,
#client_def_char,
#client_def_pair_char,
#client_court_def {
  left: 0;
}

#client_court_deft {
  left: 100%;
}

#client_wit_bench,
#client_wit_char,
#client_wit_pair_char,
#client_court_wit {
  left: 200%;
}

#client_court_prot {
  left: 100%;
}

#client_pro_bench,
#client_pro_char,
#client_pro_pair_char,
#client_court_pro {
  left: 400%;
}

.client_bench {
  position: absolute;
  height: 100%;
  bottom: 0;
  object-fit: contain;
}

#client_fg {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Dedicated realization white-flash overlay. Uses top/left/right/bottom:0 so
   it always fills the aspect-ratio viewport box (padding-bottom trick) at every
   ratio, unlike a height:100% layer. Transparent until the flash animation runs
   and never intercepts clicks. */
#client_flash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-color: transparent;
  z-index: 20;
}

#client_evi {
  opacity: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  height: 0%;
  width: auto;
  top: 1em;
  transition: 0.25s linear;
  transition-property: height, opacity;
}

#client_testimony {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* Fill the viewport and center the splash. The previous height:100%;width:auto
     with no horizontal offset pinned the splash to the left on 5:3/16:9.
     object-fit:contain keeps the splash's aspect ratio (full height on wide
     viewports, full width on narrow ones) without overflowing or stretching. */
  object-fit: contain;
  object-position: center;
}

@keyframes bubble {
  0%,
  10% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-1%, 0);
  }

  30% {
    transform: translate(1%, 1%);
  }

  40% {
    transform: translate(-1%, -1%);
  }

  50% {
    transform: translate(1%, 0);
  }

  60% {
    transform: translate(-1%, -1%);
  }

  70% {
    transform: translate(1%, 0);
  }

  80% {
    transform: translate(-1%, 1%);
  }

  90%,
  100% {
    transform: translate(0, 0);
  }
}

#client_shout {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Explicit width/height (like the background layers) so this <img> actually
     fills the viewport box -- inset:0 alone falls back to the image's intrinsic
     size on a replaced element, which left the splash off-centre. object-fit
     then keeps the bubble's aspect ratio and centres it on every ratio; the
     shake is applied via transform so it doesn't fight this positioning. */
  object-fit: contain;
  object-position: center;
}

#client_chatcontainer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.long {
  width: 100%;
  background-color: #ddd;
  border: 1px solid #555;
  border-style: solid;
  box-sizing: border-box;
  margin: auto;
}

#client_inputbox {
  position: relative;
  font-size: 21px;
  padding: 2px 10px;
}

#client_bars {
  position: relative;
  background: inherit;
  text-align: center;
  display: flex;
  display: -webkit-flex;
}

.emote_button {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 2px;
  cursor: pointer;
  box-shadow: 0 0 0 2px #000 inset;
  border-radius: 4px;
  word-break: break-all;
  overflow-y: hidden;
}

.emote_button.dark {
  opacity: 0.5;
}

#client_emo {
  position: relative;
  top: 10px;
  width: 95%;
  /* Cap the grid so a large roster doesn't push the IC toggles (additive,
     effects, ...) far down the panel; the grid scrolls within this height. */
  max-height: 40vh;
  overflow-y: auto;
}

#emote_pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
}

#emote_page_label {
  min-width: 6em;
  text-align: center;
  font-size: 0.9em;
}

/* ===================== IC options: compact bar + Advanced ===================== */
#ic_bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px 6px;
  margin-top: 6px;
  border-top: 1px solid var(--coa-line-soft, var(--coa-line));
}

#ic_bar_shouts {
  display: flex;
  gap: 4px;
}
#ic_bar_shouts .shout_btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  font-size: 0.9em;
}

#ic_bar_selects,
#ic_bar_chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* label + control pairs */
.ic_field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  color: var(--coa-muted, inherit);
}
.ic_field > span {
  white-space: nowrap;
}
.ic_field select {
  max-width: 9.5em;
}
.ic_field input[type="text"] {
  min-width: 8em;
}

/* gated wrappers: when shown by handleFL they flow inline with siblings */
.ic_field_wrap,
.ic_chip_wrap {
  display: contents;
}

/* compact effect buttons (Flash / Shake / Flip) */
.chip_btn {
  padding: 5px 9px;
  font-size: 0.85em;
}

/* checkbox "chips" */
.ic_chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 0.85em;
  border: 1px solid var(--coa-line-soft, var(--coa-line));
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ic_chip input {
  margin: 0;
}

/* Advanced collapsible */
#ic_advanced_toggle {
  display: block;
  width: calc(100% - 12px);
  margin: 6px 6px 0;
  padding: 6px 8px;
  text-align: left;
}
#ic_advanced_toggle::before {
  content: "\25B8\00a0"; /* ▸ */
}
#ic_advanced_toggle.open::before {
  content: "\25BE\00a0"; /* ▾ */
}

#ic_advanced {
  padding: 2px 6px 8px;
}
.ic_group {
  border: 1px solid var(--coa-line, #444);
  border-radius: 8px;
  padding: 6px 8px 8px;
  margin-top: 8px;
}
.ic_group_title {
  font-family: var(--coa-display, inherit);
  font-size: 0.78em;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--coa-gold, var(--coa-muted));
  margin-bottom: 6px;
}
.ic_group_body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ic_overrides {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.ic_overrides input[type="text"] {
  flex: 1 1 9em;
  min-width: 8em;
}
.ic_btn_row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.ic_btn_row .client_button {
  flex: 1 1 auto;
}
/* showname + pairing each take their own row inside their group */
#ic_advanced #pairing {
  flex: 1 1 100%;
}

/* character controls lifted into the compact bar */
#ic_bar_char {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#ic_bar_char #cccc_char {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#ic_bar_char #cccc_char #ic_chat_name {
  flex: 1 1 8em;
  min-width: 7em;
}

/* ===================== Settings tab ===================== */
.set_stack {
  flex-direction: column;
  align-items: stretch;
}
.set_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9em;
}
.set_row > span {
  flex: 0 0 7.5em;
  color: var(--coa-muted, inherit);
  white-space: nowrap;
}
.set_row select {
  flex: 0 1 auto;
  max-width: 62%;
}
.set_row input[type="range"] {
  flex: 1 1 auto;
}
.set_col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9em;
}
.set_col > span {
  color: var(--coa-muted, inherit);
}
.set_col textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.set_note {
  font-size: 0.8em;
  color: var(--coa-muted, inherit);
  margin: 10px 2px;
}
/* Offscreen log entries skip layout/paint (cheap win on long sessions / weak
   devices). Nodes stay in the DOM, so this doesn't affect anything that reads
   the log. contain-intrinsic-size gives a height estimate for scrolled-out
   rows; `auto` lets the browser remember each row's real measured size. */
#client_log > p,
#client_ooclog > .ooc_line {
  content-visibility: auto;
  contain-intrinsic-size: auto 1.5em;
}

#client_disconnect {
  width: 100%;
}
/* Menu themes only meaningfully apply in Classic; the Modern skin overrides
   them, so hide the control there (still available when Layout = Classic). */
body.layout-modern #set_menutheme {
  display: none;
}

/* Now-playing ticker above the OOC log (AO2-style) */
#client_nowplaying {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 3px 8px;
  font-size: 0.85em;
  color: var(--coa-text, inherit);
  background: linear-gradient(
    180deg,
    var(--coa-panel-hi, #2a2a2a),
    var(--coa-panel, #1f1f1f)
  );
  border-bottom: 1px solid var(--coa-line, #444);
}
#client_nowplaying_label {
  flex: 0 0 auto;
  color: var(--coa-gold, var(--coa-cyan, #d9b34a));
}
#client_nowplaying_text {
  flex: 1 1 auto;
  min-width: 0;
}

.judge_button {
  display: inline-block;
  min-width: 85px;
  min-height: 42px;
  margin: 5px 1px;
  padding: 2px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  text-shadow:
    -2px 0 #fff,
    0 2px #fff,
    2px 0 #fff,
    0 -2px #fff;
  background-color: #c1c1c1;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #919191;
  box-shadow: 1px 1px white inset;
  vertical-align: middle;
}

.healthchange_button {
  font-size: 1.5em;
}

#client_chatlog {
  top: 0;
  right: 0;
  flex: 1;
}

#client_log {
  position: relative;
  height: 100%;
  color: #fff;
  word-break: keep-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-y: auto;
  font-size: medium;
  background-color: #242424;
  text-align: start;
  line-height: 0.85em;
}

#client_log > p {
  line-height: 1.1em;
}

.iclog_name {
  font-weight: bold;
  padding-right: 0.35em;
}

.iclog_time {
  float: right;
  padding-right: 0.5em;
  color: #dbdbdb;
}

/* Render hard line breaks (typed as "\n") in IC log entries, matching the
   viewport. The text spans are cloned from the parsed message, so the
   newline arrives as its own span; pre-wrap turns it into a break. */
.iclog_text {
  white-space: pre-wrap;
}

#client_ooclog {
  position: relative;
  background-color: #242424;
  color: #fff;
  font-family: "Source Code Pro", "Consolas", monospace;
  font-size: small;
  overflow-wrap: break-word;
  overflow-y: auto;
  text-rendering: optimizelegibility;
  resize: none;
  flex: 1 1 auto;
  border: none;
}

#client_oocinput {
  display: flex;
  flex-flow: row nowrap;
  white-space: nowrap;
}

#client_oocinputbox {
  flex-grow: 1;
}

#OOC_name {
  width: 15%;
}

#client_musicsearch {
  width: 100%;
}

#client_music_pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#client_musiclist {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background-color: #222;
  color: #fff;
  box-sizing: border-box;
}

/* ----- Music controls toolbar (Random / Stop / Fade) ----- */
#client_music_controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  flex: 0 0 auto;
}
#client_music_controls button {
  flex: 0 0 auto;
  cursor: pointer;
}
#music_fade_label {
  font-size: small;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

/* ----- Collapsible category tree ----- */
.music-category {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-weight: bold;
  cursor: pointer;
  background: #2c2c2c;
  border-bottom: 1px solid #444;
  user-select: none;
}
.music-category:hover {
  background: #383838;
}
.music-caret {
  flex: 0 0 auto;
  width: 1em;
  text-align: center;
  font-size: 0.8em;
  opacity: 0.8;
}
.music-category-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-tracks.collapsed {
  display: none;
}
.music-track {
  padding: 3px 6px 3px 22px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #333;
}
.music-track:hover {
  background: rgba(255, 255, 255, 0.08);
}
#client_musiclist:empty::after {
  content: "No music in this area.";
  color: #9a9a9a;
  font-size: small;
  padding: 8px;
  display: block;
}

#client_menu {
  overflow-y: auto;
  height: 100%;
}

.menu_content {
  margin: 15px 15px;
  display: none;
}

.menu_content.active {
  display: block;
}

.menu_button {
  cursor: pointer;
  display: inline-table;
  margin: 10px 15px;
  opacity: 1;
}

.menu_button.active {
  opacity: 0.25;
}

.menu_button:hover {
  color: #ffd081;
}

.menu_icon {
  font-size: 2vw;
}

.area-button {
  border-style: solid;
  min-width: 120px;
  margin: 5px;
  display: inline-block;
  padding: 6px;
  border-radius: 5px;
  border-color: white;
  border-width: 1px;
  cursor: pointer;
  color: #000;
}

.area-button:hover {
  border-color: #ffd081;
}

.area-default {
  background-color: rgb(54, 198, 68);
}

.area- {
  /* THANKS CW */
  background-color: rgb(54, 198, 68);
}

.area-idle {
  background-color: rgb(54, 198, 68);
}

.area-looking-for-players {
  background-color: rgb(255, 255, 0);
}

.area-casing {
  background-color: rgb(255, 166, 0);
}

.area-recess {
  background-color: rgb(255, 190, 30);
}

.area-rp {
  background-color: rgb(200, 52, 252);
}

.area-gaming {
  background-color: rgb(55, 255, 255);
}

.area-locked {
  background-color: rgb(127, 127, 127);
}

.area-spectatable {
  background-color: rgb(54, 198, 68);
}

#bg_preview {
  max-width: 150px;
  max-height: 112px;
  width: 100%;
  height: 100%;
  border-style: double;
  border-radius: 7px;
  border-color: #fff;
  border-width: 3px;
}

#evi_options {
  display: inline-block;
  width: 100%;
  border: 2px ridge white;
}

#evi_options label {
  display: inline-block;
  width: 3em;
}

#evi_desc {
  flex: 1 auto;
}

/* ===== Evidence / Court Record ===== */
/* The info-panel preview thumbnail. */
#evi_preview {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  object-fit: contain;
  margin-right: 8px;
  background: #1a1a1a;
  border: 1px solid #555;
  border-radius: 4px;
}

/* The record itself: a wrapping grid of evidence thumbnails. */
#evidences {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  align-content: flex-start;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  background: #1f1f1f;
  border: 1px solid #555;
  border-radius: 4px;
}

#evidences:empty::after {
  content: "No evidence in this area.";
  color: #9a9a9a;
  font-size: small;
  padding: 8px;
}

#evidences .evi_icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 3px;
  background: #2a2a2a;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease,
    background 0.1s ease;
}

#evidences .evi_icon:hover {
  background: #3a3a3a;
  border-color: #888;
  transform: translateY(-1px);
}

/* Selected evidence (carries the .dark class from pickEvidence). */
#evidences .evi_icon.dark {
  border-color: #ff2f6d;
  background: #3a2530;
  box-shadow: 0 0 6px rgba(255, 47, 109, 0.6);
}

/* Modern theme: tie the record into the COA palette. */
body.layout-modern #evidences {
  background: var(--coa-ink-2);
  border-color: var(--coa-line);
}
body.layout-modern #evidences .evi_icon {
  background: var(--coa-panel);
}
body.layout-modern #evidences .evi_icon.dark {
  border-color: var(--coa-red);
  box-shadow: 0 0 6px rgba(255, 47, 109, 0.6);
}

/* Modern theme: make the evidence editor read as a polished panel rather than
   a raw form -- dark-themed inputs, a framed fieldset, and an accent legend. */
body.layout-modern #content_2 fieldset {
  border: 1px solid var(--coa-line);
  border-radius: 6px;
  background: var(--coa-ink-2);
  padding: 10px 12px;
  margin: 0;
}
body.layout-modern #content_2 legend {
  color: var(--coa-red);
  font-weight: bold;
  padding: 0 6px;
  letter-spacing: 0.04em;
}
body.layout-modern #content_2 input[type="text"],
body.layout-modern #content_2 select,
body.layout-modern #content_2 textarea {
  background: var(--coa-panel);
  color: var(--coa-text);
  border: 1px solid var(--coa-line);
  border-radius: 4px;
  padding: 4px 6px;
}
body.layout-modern #content_2 textarea {
  width: 100%;
  resize: vertical;
}
body.layout-modern #content_2 hr {
  border: 0;
  border-top: 1px solid var(--coa-line-soft);
  margin: 8px 0;
}
body.layout-modern #evi_name {
  font-weight: bold;
}
body.layout-modern #button_present {
  width: 100%;
  margin-top: 4px;
}

#client_settings {
  width: 100%;
}

#about-logo {
  padding-top: 5px;
  height: 30%;
  image-rendering: auto;
}

.client_button.hover_button.inactive {
  display: none;
}

.client_button.hover_button:hover {
  border-color: #ffd081;
}

.client_button.dark {
  opacity: 0.5;
}

#client_playerlist {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.playerlist-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid #555;
}

.playerlist-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  border-radius: 4px;
  background: #1a1a1a;
}

.playerlist-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.playerlist-char {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playerlist-showname {
  font-size: small;
  color: #cfcfcf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playerlist-ooc {
  font-size: x-small;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playerlist-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
}

.playerlist-action {
  font-size: x-small;
  padding: 2px 6px;
  cursor: pointer;
}

.playerlist-empty {
  padding: 12px 8px;
  color: #9a9a9a;
  font-size: small;
  text-align: center;
}

.hrtext {
  overflow: hidden;
  text-align: center;
  font-size: small;
  color: #c6c6c6;
}

.hrtext:before,
.hrtext:after {
  background-color: #c6c6c6;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.hrtext:before {
  right: 0.5em;
  margin-left: -50%;
}

.hrtext:after {
  left: 0.5em;
  margin-right: -50%;
}

/* ===== webCOA: aspect-ratio centering fix =====
   Upstream stretched the court background to fill the panel (width:100%
   height:100% with no object-fit), so switching to 16:9 distorted the
   background and left the desk/characters misaligned. We instead fit the
   per-position background and desk layers as CONTAINED boxes inside their
   viewport-width panel: an off-ratio background (e.g. a 4:3 bg in a 16:9
   frame) is pillarboxed and centered horizontally instead of stretched
   or pinned left. In a 4:3 frame the image fills the panel exactly, so
   this is a no-op there.

   NOTE: #client_court is deliberately EXCLUDED. It holds the wide
   panorama (court.png) which must keep its natural width (~500% of the
   viewport) so it spans all positions and fills the gaps as the camera
   pans/slides. Forcing width:100% here squished the whole panorama into
   one slot and broke slide transitions. */
#client_court_static,
#client_court_classic,
#client_court_def,
#client_court_deft,
#client_court_wit,
#client_court_prot,
#client_court_pro {
  width: 100%;
  /* Fill the viewport, scaling to height and cropping the sides, centered
     -- so a widescreen (16:9) background in a 4:3 viewport fills cleanly
     top-to-bottom with the sides cropped, rather than letterboxing. */
  object-fit: cover;
  object-position: center;
}

/* The panorama keeps natural width (height-driven), spanning positions. */
#client_court {
  width: auto;
  max-width: none;
}

.client_bench {
  width: 100%;
  object-position: center bottom;
}

/* ===== webCOA: OOC embedded images + lightbox ===== */
.ooc_line {
  margin: 0 0 0.15em 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  /* Preserve server-sent newlines AND run-of-spaces alignment (e.g.
     /getareas lists) without converting to <br>. The OOC log is
     monospace, so columns line up. */
  white-space: pre-wrap;
}
.ooc_name { font-weight: bold; }
.ooc_image {
  display: inline-block;
  max-width: 100%;        /* auto-size to the OOC log width */
  max-height: 220px;
  height: auto;
  border-radius: 4px;
  margin: 2px 0;
  cursor: zoom-in;
  vertical-align: bottom;
}
#ooc_lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 2vmin;
}
#ooc_lightbox_img {
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

/* ===== webCOA: responsive / touch polish =====
   Upstream shipped no media queries for the in-game client. On narrow
   touch screens we enlarge tap targets, make the emote grid and lists
   finger-scrollable, and keep the IC text input comfortably tappable.
   The golden-layout single-column mobile layout handles arrangement;
   this handles ergonomics within each pane. */
@media (max-width: 820px), (pointer: coarse) {
  /* Comfortable minimum hit area for controls (WCAG ~44px). */
  button,
  .button,
  #client_sendbutton,
  .emote_button,
  #client_emo .emote,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 40px;
  }

  /* No iOS/Android zoom-on-focus: any text-entry control under 16px
     triggers the browser's auto-zoom. The IC box is already 21px, but
     the OOC input and showname field inherited the ~13px UA default and
     were the real culprits. Floor every control at 16px on touch. */
  input,
  textarea,
  select,
  #client_inputbox,
  #client_oocinputbox,
  #OOC_name,
  #client_oocinput,
  #client_musicsearch {
    font-size: 16px;
  }
  /* manipulation disables double-tap-to-zoom (and the 300ms tap delay)
     on interactive controls, so tapping Send/buttons never zooms. */
  button,
  .button,
  input,
  textarea,
  select,
  a {
    touch-action: manipulation;
  }

  /* Emote grid: wrap into a scrollable, finger-sized grid. */
  #client_emo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #client_emo .emote img,
  #client_emo img.emote {
    width: 100%;
    height: auto;
  }

  /* Music / area / players lists: roomier rows, momentum scrolling. */
  #client_musiclist,
  #areas,
  #client_area_list,
  #client_playerlist {
    -webkit-overflow-scrolling: touch;
  }
  #client_musiclist li,
  #areas li,
  #client_playerlist li {
    padding: 8px 6px;
    line-height: 1.3;
  }

  /* Shout/objection row and IC option toggles: don't crowd. */
  #client_shouts img,
  #client_ic_chat_controls img {
    max-height: 48px;
  }
}

/* Very narrow phones: tighten chrome so the viewport keeps the most room. */
@media (max-width: 480px) {
  #client_emo {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    max-height: 34vh;
  }
  .lm_header .lm_title {
    font-size: 13px;
  }
}

/* ===== webCOA: prevent accidental pull-to-refresh =====
   On mobile, an over-scroll/zoom-out gesture at the top of the page can
   trigger the browser's pull-to-refresh, reloading the whole client.
   Disabling overscroll on the document stops that. Combined with the
   16px input floor above (which removes the focus-zoom that prompted the
   manual zooming in the first place), the refresh-by-gesture is gone.
   overscroll-behavior is inert on desktop, so this is global. */
html,
body {
  margin: 0;
  padding: 0;
}
/* Modern only: the page canvas shows through the gaps between golden-layout
   panels, so colour it dark grey there. Scoped via :has() so Classic is left
   alone; browsers without :has() just keep the prior behaviour. */
html:has(body.layout-modern) {
  background: #1a1a1d;
}
body {
  overscroll-behavior: none;
}
#client_log,
#client_ooclog,
#client_musiclist,
#areas,
#client_playerlist {
  overscroll-behavior: contain;
}

/* ===== webCOA: viewport image scaling (Automatic/Pixel/Smooth) ===== */
body.scaling-automatic #client_gamewindow img,
body.scaling-pixel #client_gamewindow img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
body.scaling-smooth #client_gamewindow img {
  image-rendering: auto;
}

/* ===== webCOA: panorama desk overlay (court_overlay.png) =====
   The wide desk overlay that spans the whole court.png panorama. Like
   #client_court it keeps natural width (height-driven) so it spans all
   positions, and sits in front of the characters (in DOM after the
   benches) so characters stand behind the desk, matching the per-position
   benches. Transparent when a background has no court_overlay. */
#client_court_overlay {
  position: absolute;
  height: 100%;
  width: auto;
  max-width: none;
  top: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

/* ============================================================
   webCOA "Modern" theme — COURTROOM NOIR
   A dramatic, opt-in restyle (Settings → Layout → Modern).
   Entirely scoped under body.layout-modern so the Classic look is
   never touched. Aesthetic: ink-black courtroom with an objection-red
   pulse and evidence-gold accents; panel titles set in Igiari, the
   Ace Attorney dialogue typeface.
   ============================================================ */
@font-face {
  font-family: "Igiari";
  src:
    url("igiari/Igiari.woff") format("woff"),
    url("igiari/Igiari.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body.layout-modern {
  --coa-ink: #07070d;
  --coa-ink-2: #10101c;
  --coa-panel: #15151f;
  --coa-panel-hi: #1d1d2c;
  --coa-line: #2b2b40;
  --coa-line-soft: #20202f;
  --coa-red: #ff2f6d;
  --coa-red-deep: #c01048;
  --coa-gold: #ffce4d;
  --coa-cyan: #45c8ff;
  --coa-text: #ecebf4;
  --coa-muted: #8b8ba6;
  --coa-display: "Igiari", "Trebuchet MS", sans-serif;

  background:
    radial-gradient(120% 80% at 50% -10%, #1b1430 0%, rgba(27, 20, 48, 0) 55%),
    radial-gradient(140% 120% at 50% 120%, #1a0a16 0%, rgba(26, 10, 22, 0) 50%),
    linear-gradient(180deg, var(--coa-ink) 0%, var(--coa-ink-2) 100%) !important;
  color: var(--coa-text);
}

/* Subtle film-grain / scanline atmosphere over everything */
body.layout-modern::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.014) 0px,
    rgba(255, 255, 255, 0.014) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ---- golden-layout chrome ---- */
body.layout-modern .lm_goldenlayout { background: transparent; }

body.layout-modern .lm_header {
  background: linear-gradient(180deg, var(--coa-ink-2), var(--coa-panel));
  border-bottom: 1px solid var(--coa-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  height: 26px !important;
}
body.layout-modern .lm_header .lm_tabs { padding-left: 4px; }

body.layout-modern .lm_tab {
  background: transparent !important;
  color: var(--coa-muted) !important;
  font-family: var(--coa-display);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 14px 3px 12px !important;
  margin: 2px 2px 0 0 !important;
  border: none !important;
  border-radius: 5px 5px 0 0;
  position: relative;
  transition: color 0.15s ease;
}
body.layout-modern .lm_tab:hover { color: var(--coa-text) !important; }

body.layout-modern .lm_tab.lm_active {
  color: var(--coa-text) !important;
  background: var(--coa-panel) !important;
}
/* glowing accent underline on the active tab */
body.layout-modern .lm_tab.lm_active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--coa-red), var(--coa-gold));
  box-shadow: 0 0 10px var(--coa-red);
  border-radius: 2px;
}

body.layout-modern .lm_content {
  background: linear-gradient(180deg, var(--coa-panel), var(--coa-ink-2));
  border: 1px solid var(--coa-line-soft);
  border-top: none;
}

/* drag splitters glow on hover */
body.layout-modern .lm_splitter { background: transparent; }
body.layout-modern .lm_splitter:hover { background: var(--coa-red) !important; }
body.layout-modern .lm_splitter .lm_drag_handle { background: var(--coa-line); }

/* drop target highlight while docking */
body.layout-modern .lm_dragProxy .lm_content,
body.layout-modern .lm_dropTargetIndicator {
  outline: 2px dashed var(--coa-gold);
  background: rgba(255, 206, 77, 0.08) !important;
}

/* ---- the courtroom viewport: framed like a case monitor ---- */
body.layout-modern #client_background {
  border: 2px solid var(--coa-line);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 12px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  background: #000;
}
/* the IC pane backdrop so any letterbox space reads as intentional framing */
body.layout-modern #client_wrapper,
body.layout-modern [class*="client_wrapper"] {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 47, 109, 0.06), transparent 70%),
    var(--coa-ink);
}

/* (Modern keeps the default nameplate styling -- no extra shadow.) */

/* ---- IC log: case-file feed ---- */
body.layout-modern #client_log {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 120px),
    var(--coa-ink-2);
  padding: 6px 10px;
}
body.layout-modern #client_log p {
  border-left: 2px solid var(--coa-line);
  padding: 3px 0 3px 10px;
  margin: 2px 0;
  transition: border-color 0.2s ease;
}
body.layout-modern #client_log p:hover { border-left-color: var(--coa-red); }
body.layout-modern #client_log .iclog_showname,
body.layout-modern #client_log .iclog_name {
  font-family: var(--coa-display);
  letter-spacing: 0.5px;
  color: var(--coa-gold);
}
body.layout-modern #client_log .iclog_time { color: var(--coa-muted); }

/* ---- OOC ---- */
body.layout-modern #client_ooclog { background: var(--coa-ink-2); }
body.layout-modern .ooc_name { color: var(--coa-cyan); }

/* ---- music / area / player lists ---- */
body.layout-modern .music-track,
body.layout-modern #areas li,
body.layout-modern .playerlist-entry,
body.layout-modern .area-button {
  border-bottom: 1px solid var(--coa-line-soft);
  transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}
body.layout-modern .music-track:hover,
body.layout-modern #areas li:hover,
body.layout-modern .playerlist-entry:hover {
  background: linear-gradient(90deg, rgba(255, 47, 109, 0.16), transparent);
  color: #fff;
  padding-left: 26px;
}

/* ---- buttons / inputs ---- */
body.layout-modern button,
body.layout-modern .client_button {
  background: linear-gradient(180deg, var(--coa-panel-hi), var(--coa-panel));
  color: var(--coa-text);
  border: 1px solid var(--coa-line);
  border-radius: 6px;
  font-family: var(--coa-display);
  letter-spacing: 0.6px;
  transition: transform 0.08s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.layout-modern button:hover,
body.layout-modern .client_button:hover {
  border-color: var(--coa-red);
  box-shadow: 0 0 0 1px var(--coa-red), 0 0 14px rgba(255, 47, 109, 0.35);
}
body.layout-modern button:active,
body.layout-modern .client_button:active { transform: translateY(1px); }

body.layout-modern input[type="text"],
body.layout-modern textarea,
body.layout-modern select,
body.layout-modern #client_inputbox {
  background: var(--coa-ink) !important;
  color: var(--coa-text) !important;
  border: 1px solid var(--coa-line) !important;
  border-radius: 6px;
}
body.layout-modern #client_inputbox:focus,
body.layout-modern input[type="text"]:focus {
  outline: none;
  border-color: var(--coa-red) !important;
  box-shadow: 0 0 0 1px var(--coa-red), 0 0 16px rgba(255, 47, 109, 0.3);
}

/* the send/preview line title plates */
body.layout-modern .menu_text,
body.layout-modern h2 {
  font-family: var(--coa-display);
  color: var(--coa-gold);
  letter-spacing: 1px;
}

/* ===== webCOA Modern custom layout (no golden-layout) ===== */
body.layout-modern .coa-modern-grid {
  display: grid;
  grid-template-columns: var(--coa-col-l, 1fr) var(--coa-col-m, 1.5fr) var(--coa-col-r, 1fr);
  grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas:
    "log      viewport ooc"
    "mainplyr options  areasmusic";
  gap: 8px;
  height: 100vh;
  padding: 8px;
  box-sizing: border-box;
}
body.layout-modern .coa-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: linear-gradient(180deg, var(--coa-panel), var(--coa-ink-2));
  border: 1px solid var(--coa-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
body.layout-modern .coa-panel-head {
  flex: 0 0 auto;
  font-family: var(--coa-display);
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coa-gold);
  padding: 6px 12px 4px;
  background: linear-gradient(180deg, var(--coa-ink-2), transparent);
  border-bottom: 1px solid var(--coa-line);
  position: relative;
}
body.layout-modern .coa-panel-head::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -1px;
  width: 38px;
  height: 2px;
  background: linear-gradient(90deg, var(--coa-red), var(--coa-gold));
  box-shadow: 0 0 10px var(--coa-red);
}
body.layout-modern .coa-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  position: relative;
}
/* The IC log has its own internal scroller (#client_log, height:100%,
   overflow-y:auto). Letting the panel body ALSO scroll produced two nested
   scrollbars: the outer scrolled the whole log, the inner barely moved.
   Pin the panel body so #client_log is the only scroller. */
body.layout-modern .coa-panel[style*="log"] .coa-panel-body {
  overflow: hidden;
}
/* the courtroom panel: maximize the aspect-correct viewport within the
   cell, reserving room for the input + HP bars beneath it. #client_background
   is nested inside #client_icwrapper (which also holds the input/bars), so
   aspect-ratio + height:100% can't size it (it collapses). Instead we set
   the viewport WIDTH to min(cell width, available height * ratio) using
   container-query units, and the gamewindow's padding-bottom derives the
   height. ~84px is reserved for the input + bars row. */
body.layout-modern .coa-panel[style*="viewport"] .coa-panel-body {
  overflow: hidden;
  container-type: size;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
body.layout-modern #client_icwrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
}
body.layout-modern #client_background {
  flex: 0 0 auto;
  align-self: center;
  width: min(100%, calc((100cqh - 104px) * 4 / 3));
}
/* Input + HP bars stretch to the full panel width (the centering parent
   was collapsing them, leaving the bars tiny/clipped behind the input). */
body.layout-modern #client_icwrapper > #client_inputbox,
body.layout-modern #client_icwrapper > #client_bars {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
body.layout-modern #client_bars {
  padding: 4px 8px;
}
body.layout-modern.viewport-53 #client_background {
  width: min(100%, calc((100cqh - 104px) * 5 / 3));
}
body.layout-modern.viewport-hd #client_background {
  width: min(100%, calc((100cqh - 104px) * 16 / 9));
}

/* sidebar tab bar */
body.layout-modern .coa-tabbar {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 4px 4px 0;
  background: var(--coa-ink-2);
  border-bottom: 1px solid var(--coa-line);
}
body.layout-modern .coa-tab {
  font-family: var(--coa-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--coa-muted);
  background: transparent;
  border: none;
  border-radius: 5px 5px 0 0;
  padding: 5px 12px;
  cursor: pointer;
}
body.layout-modern .coa-tab:hover { color: var(--coa-text); }
body.layout-modern .coa-tab.active {
  color: var(--coa-text);
  background: var(--coa-panel);
  box-shadow: inset 0 -2px 0 var(--coa-red);
}
body.layout-modern .coa-areasmusic .coa-tab-body,
body.layout-modern .coa-mainplayers .coa-tab-body { padding: 0; }

/* responsive: collapse to a single scrolling column on narrow screens */
/* Portrait phones/tablets: stack everything into one scrolling column. */
@media (orientation: portrait) and (max-width: 900px) {
  body.layout-modern .coa-modern-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
      "viewport"
      "options"
      "log"
      "ooc"
      "areasmusic"
      "mainplyr";
    height: auto;
    min-height: 100vh;
  }
  body.layout-modern .coa-panel { min-height: 220px; }
  /* In a stacked, auto-height column the size-containment + cqh-based
     width collapses the viewport to a tiny box. Size it by WIDTH instead. */
  body.layout-modern .coa-panel[style*="viewport"] .coa-panel-body {
    container-type: normal;
    display: block;
  }
  body.layout-modern #client_background,
  body.layout-modern.viewport-53 #client_background,
  body.layout-modern.viewport-hd #client_background {
    width: 100%;
    align-self: auto;
  }
  /* Portrait stacks panels at auto height, so the log and OOC grew taller
     with every message and pushed the whole page down — endless scrolling.
     Bound their height and let the inner log scroll instead (the OOC input
     stays pinned beneath its scroller). */
  body.layout-modern .coa-panel[style*="log"],
  body.layout-modern .coa-panel[style*="ooc"] {
    max-height: 42vh;
  }
  body.layout-modern .coa-panel[style*="ooc"] .coa-panel-body {
    overflow: hidden;
    min-height: 0;
  }
}

/* Landscape phones (short height): two-column grid, viewport spans the full
   left column. Rows use minmax(0,fr) so a tall options/sidebar can't starve
   the top rows (which previously collapsed to thin lines), and panels
   scroll internally. */
@media (orientation: landscape) and (max-height: 600px) {
  body.layout-modern .coa-modern-grid {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-template-areas:
      "viewport log"
      "viewport ooc"
      "viewport options"
      "viewport mainplyr"
      "viewport areasmusic";
    gap: 4px;
    padding: 4px;
  }
  body.layout-modern .coa-panel-body {
    overflow: auto;
  }
  body.layout-modern .coa-panel[style*="viewport"] .coa-panel-body {
    overflow: hidden;
  }
  body.layout-modern .coa-panel-head {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 2px 8px;
  }
  body.layout-modern #client_background {
    width: min(100%, calc((100cqh - 40px) * 4 / 3));
  }
  body.layout-modern.viewport-53 #client_background {
    width: min(100%, calc((100cqh - 40px) * 5 / 3));
  }
  body.layout-modern.viewport-hd #client_background {
    width: min(100%, calc((100cqh - 40px) * 16 / 9));
  }
}

/* ===== webCOA: whitelist request row (OOC pane) ===== */
#client_whitelist_row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(255, 206, 77, 0.08);
  border-top: 1px solid rgba(255, 206, 77, 0.28);
  font-size: 13px;
  flex: 0 0 auto;
}
#client_whitelist_label {
  color: #ffce4d;
  font-weight: bold;
  white-space: nowrap;
}
#whitelist_username {
  flex: 1 1 auto;
  min-width: 0;
}
#whitelist_send {
  white-space: nowrap;
  cursor: pointer;
}

/* ===== webCOA: precise pairing offset controls ===== */
.pair_offset_ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pair_offset_ctrl input[type="range"] {
  vertical-align: middle;
}
.pair_num {
  width: 3.6em;
  text-align: center;
}
.pair_nudge {
  min-width: 26px;
  padding: 2px 8px;
  cursor: pointer;
  line-height: 1;
}

/* ===== webCOA: AO2-style multi-line area list ===== */
.area-button {
  text-align: left;
  line-height: 1.25;
  padding: 4px 8px;
}
.area-button .area-name {
  display: block;
  font-weight: bold;
}
.area-button .area-status {
  display: block;
  font-size: 0.82em;
  opacity: 0.95;
}
.area-button .area-players {
  display: block;
  font-size: 0.78em;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Effect layers (AO2 effects.ini "layer" property)

   AO2 reparents its single effect widget depending on the effect's layer:
     behind    -> stacked under the character
     character -> under the desk (no vanilla effect uses this; treated as over)
     over      -> raised inside the viewport  (#client_fg, already present)
     chat      -> outside the viewport, over the chatbox

   #client_fg_behind_* are placed in the markup between the court background and
   the character sprites, so plain document order puts them behind the character
   without touching any existing z-index. #client_fg_chat needs to paint ABOVE
   #client_chatcontainer, which comes later in the markup, so it is the only one
   that needs an explicit z-index. It stays below #client_flash (z-index 20) so a
   realization flash still covers everything.
   --------------------------------------------------------------------------- */
.client_fx_layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#client_fg_chat {
  z-index: 15;
}

/* The effect image itself. object-fit is set per effect from the ini's
   "stretch" property, and image-rendering from "scaling". */
.client_fx_img {
  width: 100%;
  height: 100%;
  display: block;
}