:root {
  --mansion-black: #04070b;
  --mansion-velvet: #0b1018;
  --mansion-blood: #713d8d;
  --mansion-vermilion: #c04492;
  --mansion-bone: #edf3f0;
  --mansion-muted: #8ca3a7;
  --mansion-gold: #72b9b5;
  --mansion-gold-bright: #d3f1ec;
  --mansion-verdigris: #45aaa9;
  --mansion-blue: #70c7d0;
  --mansion-panel: rgba(7, 11, 16, 0.96);
}

body,
button,
input,
select,
textarea {
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.brand-copy h1,
.model-picker-header h2,
.boot-sequence strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

body {
  background: #04070b;
}

.mansion-art-backdrop {
  background-color: #04070b;
  background-image:
    linear-gradient(180deg, rgba(2, 7, 12, 0.05), rgba(2, 6, 10, 0.12) 58%, rgba(1, 4, 8, 0.5)),
    url("/assets/tokyo-fusion-hall-v1.webp");
  background-position: center;
  background-size: cover;
  filter: saturate(0.92) contrast(1.08) brightness(0.86);
  transform: scale(1.01);
}

body[data-cathedral-state="sending"] .mansion-art-backdrop,
body[data-cathedral-state="waiting"] .mansion-art-backdrop,
body[data-cathedral-state="thinking"] .mansion-art-backdrop,
body[data-cathedral-state="streaming"] .mansion-art-backdrop {
  filter: saturate(1.08) contrast(1.1) brightness(0.96);
  transform: scale(1.025);
}

body[data-cathedral-state="error"] .mansion-art-backdrop {
  filter: saturate(0.78) contrast(1.2) brightness(0.7) hue-rotate(28deg);
}

.cathedral-canvas {
  background: transparent;
  filter: saturate(0.98) contrast(1.04) brightness(1.02);
}

.summoning-seal-art {
  top: 66%;
  width: clamp(25rem, 38vw, 39rem);
  background: url("/assets/fusion-dais-v2.webp") center / contain no-repeat;
  opacity: 0.23;
  filter: saturate(1.1) contrast(1.08) drop-shadow(0 0 2rem rgba(64, 176, 183, 0.28));
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle, #000 0 54%, rgba(0, 0, 0, 0.82) 63%, transparent 74%);
  mask-image: radial-gradient(circle, #000 0 54%, rgba(0, 0, 0, 0.82) 63%, transparent 74%);
  transform: translate(-50%, -50%) perspective(52rem) rotateX(58deg);
  animation: dais-breathe 6s ease-in-out infinite;
}

body[data-cathedral-state="sending"] .summoning-seal-art,
body[data-cathedral-state="waiting"] .summoning-seal-art,
body[data-cathedral-state="thinking"] .summoning-seal-art,
body[data-cathedral-state="streaming"] .summoning-seal-art {
  opacity: 0.42;
  animation-duration: 2.2s;
}

.world-overlay {
  border: 0;
  background: none;
  box-shadow:
    inset 0 0 8rem rgba(0, 0, 0, 0.45),
    inset 0 -5rem 8rem rgba(1, 5, 9, 0.5);
}

.world-overlay::before {
  display: none;
}

.world-overlay::after {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 5, 9, 0.38), transparent 18%, transparent 82%, rgba(1, 5, 9, 0.42)),
    linear-gradient(180deg, rgba(1, 5, 9, 0.18), transparent 20%, transparent 72%, rgba(1, 5, 9, 0.62));
}

.frame-corner {
  display: none;
}

.world-vignette {
  opacity: 0.52;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 3, 7, 0.68) 100%);
}

.boot-sequence {
  background-color: #04070b;
  background-image:
    linear-gradient(rgba(2, 6, 10, 0.32), rgba(2, 5, 10, 0.72)),
    url("/assets/tokyo-fusion-hall-v1.webp");
  background-position: center;
  background-size: cover;
  color: #d9f5ef;
}

.app-bar,
.header-model,
.game-status-hud,
.game-command-menu,
.settings-panel,
.inspect-panel,
.composer,
.model-picker-frame,
.model-picker-catalog,
.model-picker-preview,
.model-picker-header,
.model-picker-footer {
  background-color: rgba(5, 9, 14, 0.96);
  background-image:
    linear-gradient(110deg, rgba(9, 15, 22, 0.72), rgba(4, 7, 11, 0.9)),
    url("/assets/mansion-panel-v2.webp");
  background-position: center;
  background-size: cover, 44rem 44rem;
  background-blend-mode: normal, soft-light;
}

.app-bar {
  border-bottom: 0.22rem solid rgba(99, 190, 193, 0.55);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.42);
}

.app-bar::after {
  background: linear-gradient(90deg, transparent, rgba(205, 239, 236, 0.85), rgba(105, 70, 164, 0.72), transparent);
}

.brand-mark {
  border-color: rgba(211, 241, 236, 0.58);
  background: #081017;
  box-shadow: inset 0 0 0 0.35rem rgba(68, 168, 171, 0.12), 0 0 1.2rem rgba(79, 186, 190, 0.2);
}

.brand-copy .eyebrow,
.model-launcher-kicker,
.panel-kicker {
  color: #74c2c4;
}

.header-model {
  border: 1px solid rgba(114, 185, 181, 0.42);
  border-bottom: 0.2rem solid #774ba2;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.38), inset 0 0 2rem rgba(72, 173, 176, 0.05);
}

.header-model:hover,
.header-model:focus-visible {
  border-color: rgba(211, 241, 236, 0.76);
  background-color: #0a121b;
  background-image:
    linear-gradient(110deg, rgba(16, 31, 43, 0.8), rgba(8, 11, 18, 0.92)),
    url("/assets/mansion-panel-v2.webp");
}

.game-status-hud,
.game-command-menu,
.settings-panel,
.inspect-panel {
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(136, 202, 199, 0.18),
    0 1.6rem 3.5rem rgba(0, 0, 0, 0.56);
}

.game-status-hud {
  border-left: 0.3rem solid #5caead;
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 0 100%);
}

.game-command-menu {
  border-right: 0.3rem solid #74509c;
  clip-path: polygon(1.2rem 0, 100% 0, 100% 100%, 0 100%, 0 1.2rem);
}

.game-command-menu button {
  border-bottom-color: rgba(112, 180, 181, 0.18);
  background: rgba(2, 6, 10, 0.42);
}

.game-command-menu button:hover,
.game-command-menu button:focus-visible,
.game-command-menu button.is-active {
  background:
    linear-gradient(90deg, rgba(64, 156, 161, 0.66), rgba(79, 51, 125, 0.42) 64%, transparent),
    url("/assets/mansion-panel-v2.webp");
  background-size: cover, 34rem 34rem;
  color: #f4fffc;
}

.messages {
  padding: 2.8rem 3.2rem 2rem;
  border: 0;
  background-color: rgba(3, 7, 11, 0.94);
  background-image:
    url("/assets/dialog-frame-v2.webp"),
    linear-gradient(90deg, rgba(10, 22, 28, 0.84), rgba(4, 8, 13, 0.94) 20%, rgba(5, 8, 14, 0.94) 80%, rgba(18, 10, 29, 0.78)),
    url("/assets/mansion-panel-v2.webp");
  background-position: center;
  background-size: 100% 100%, cover, 40rem 40rem;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
  box-shadow: 0 1.8rem 4.5rem rgba(0, 0, 0, 0.64);
  clip-path: none;
}

.messages::before {
  top: 1rem;
  left: 3.25rem;
  color: #cfece8;
  text-shadow: 0 0 0.7rem rgba(75, 183, 186, 0.35);
}

.messages::after {
  display: none;
}

.message.user .message-role,
.message.assistant .message-role,
.message.error .message-role {
  color: #bfe8e5;
  text-shadow: none;
}

.message.user .message-time,
.message.assistant .message-time,
.message.error .message-time {
  color: rgba(205, 226, 223, 0.65);
}

.composer {
  border: 1px solid rgba(121, 190, 187, 0.28);
  border-bottom: 0.24rem solid #76509d;
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.7), inset 0 0 2rem rgba(84, 180, 183, 0.04);
}

.composer textarea {
  border: 0;
  border-left: 0.2rem solid rgba(95, 179, 180, 0.46);
  background: rgba(1, 5, 9, 0.72);
}

.send-button,
.picker-confirm {
  border: 1px solid rgba(205, 239, 236, 0.62);
  border-right: 0.3rem solid #a658aa;
  background: linear-gradient(135deg, #247f87, #513471);
  color: #f5fffd;
  box-shadow: 0 0 1.8rem rgba(53, 163, 170, 0.22);
}

.send-button:hover,
.send-button:focus-visible,
.picker-confirm:hover,
.picker-confirm:focus-visible {
  background: linear-gradient(135deg, #32a0a7, #6b4290);
}

.model-picker {
  background-color: rgba(1, 5, 9, 0.92);
  background-image:
    linear-gradient(rgba(2, 6, 11, 0.46), rgba(2, 6, 11, 0.68)),
    url("/assets/tokyo-fusion-hall-v1.webp");
  background-position: center;
  background-size: cover;
  backdrop-filter: blur(0.35rem);
}

.model-picker::backdrop {
  background: #010408;
}

.model-picker-frame {
  border: 0;
  border-top: 0.35rem solid #633f8e;
  outline: 1px solid rgba(113, 192, 191, 0.28);
  outline-offset: -0.55rem;
  box-shadow: 0 0 6rem #000;
}

.model-picker-frame::before,
.model-picker-frame::after {
  content: "";
  top: 0;
  width: 7rem;
  height: 0.35rem;
  background: #77c5c5;
}

.model-picker-header {
  border-bottom: 0.2rem solid rgba(111, 184, 184, 0.42);
}

.model-picker-header::after {
  height: 0.18rem;
  background: linear-gradient(90deg, #bfeae6, #674493 45%, transparent 76%);
}

.model-picker-header h2 {
  font-size: 2rem;
  color: #f2f5f1;
}

.model-picker-close,
.game-panel-close,
.model-picker-header-actions .quiet-button {
  border: 1px solid rgba(117, 188, 187, 0.4);
  background: #071019;
  color: #c6dfdc;
}

.model-picker-close:hover,
.model-picker-close:focus-visible,
.game-panel-close:hover,
.game-panel-close:focus-visible {
  border-color: #c35cac;
  background: #301d3c;
}

.model-picker-body {
  grid-template-columns: minmax(43rem, 1fr) minmax(23rem, 29rem);
}

.model-picker-catalog {
  border-right: 0.2rem solid rgba(92, 166, 168, 0.32);
}

.model-picker-toolbar input,
.model-picker-toolbar select,
.model-filters select,
.advanced-model input {
  min-height: 2.75rem;
  border: 1px solid rgba(106, 181, 181, 0.28);
  border-left: 0.2rem solid #5ba7aa;
  background: rgba(2, 7, 11, 0.88);
  color: #e6f0ed;
  font-size: 0.78rem;
}

.model-picker-toolbar input:focus,
.model-picker-toolbar select:focus,
.model-filters select:focus,
.advanced-model input:focus {
  border-color: #8bd0ce;
  outline: 0;
  box-shadow: 0 0 1rem rgba(63, 172, 177, 0.15);
}

.model-picker-toolbar label > span,
.model-filters label > span,
.model-filters legend,
.filter-heading,
.model-result-heading {
  color: #83c7c6;
}

.segmented-filter {
  border: 1px solid rgba(110, 184, 183, 0.3);
}

.segmented-filter button {
  border-right-color: rgba(110, 184, 183, 0.22);
  background: #050b11;
  color: #8ca5a7;
}

.segmented-filter button[aria-pressed="true"] {
  background: linear-gradient(90deg, #286e78, #51376d);
  color: #f0fffc;
  box-shadow: inset 0 -0.2rem #9ed9d4;
}

.model-result-heading {
  border-bottom: 0.16rem solid rgba(113, 190, 190, 0.45);
}

#model-result-count {
  color: #d4f0ec;
  font-size: 0.8rem;
}

.model-roster {
  grid-auto-rows: 13.4rem;
  gap: 0.75rem;
  scrollbar-color: rgba(89, 174, 176, 0.62) transparent;
}

.model-card {
  --affinity: var(--mansion-verdigris);
  height: 13.4rem;
  padding: 0.8rem 0.72rem 0.68rem 46%;
  border: 1px solid rgba(113, 184, 184, 0.32);
  border-top: 0.22rem solid color-mix(in srgb, var(--affinity) 58%, #a8dad5);
  background-color: #050a10;
  background-image:
    linear-gradient(115deg, rgba(7, 12, 18, 0.76), rgba(3, 7, 12, 0.96)),
    url("/assets/mansion-panel-v2.webp");
  background-size: cover, 30rem 30rem;
  background-blend-mode: normal, soft-light;
  clip-path: polygon(0 0, calc(100% - 0.8rem) 0, 100% 0.8rem, 100% 100%, 0 100%);
  box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

.model-card::before {
  display: none;
}

.model-card::after {
  inset: 0;
  border: 0;
  border-right: 0.26rem solid color-mix(in srgb, var(--affinity) 56%, transparent);
}

.model-card:hover,
.model-card:focus-visible {
  border-color: #a9ddd8;
  background-color: #0a131c;
  background-image:
    linear-gradient(115deg, rgba(13, 27, 35, 0.72), rgba(5, 9, 16, 0.96)),
    url("/assets/mansion-panel-v2.webp");
  box-shadow: 0 0 0 1px rgba(153, 219, 214, 0.18), 0 1rem 2rem rgba(0, 0, 0, 0.5), 0 0 1.8rem rgba(63, 166, 170, 0.18);
  transform: translateY(-0.18rem);
}

.model-card.is-selected {
  border-color: #d5f0ec;
  border-top-color: #b860ad;
  background-color: #0a111a;
  background-image:
    linear-gradient(115deg, rgba(27, 63, 70, 0.72), rgba(24, 14, 36, 0.9)),
    url("/assets/mansion-panel-v2.webp");
  box-shadow: 0 0 0 2px rgba(104, 193, 194, 0.24), 0 0 2.4rem rgba(86, 172, 178, 0.3);
}

.model-card-portrait {
  position: absolute;
  z-index: -1;
  inset: 0 55% 0 0;
  overflow: hidden;
  border-right: 0.16rem solid rgba(145, 211, 207, 0.42);
  background: #020509;
}

.model-card-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 58%, rgba(3, 7, 12, 0.94)),
    linear-gradient(180deg, transparent 56%, rgba(2, 6, 11, 0.9));
}

.model-card-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.92) contrast(1.05);
  transition: filter 250ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.model-card:hover .model-card-portrait img,
.model-card:focus-visible .model-card-portrait img,
.model-card.is-selected .model-card-portrait img {
  filter: saturate(1.12) contrast(1.08) brightness(1.06);
  transform: scale(1.045);
}

.model-card-archetype {
  position: absolute;
  z-index: 2;
  right: 0.45rem;
  bottom: 0.5rem;
  left: 0.55rem;
  overflow: hidden;
  color: #e2f6f2;
  font-size: 0.57rem;
  font-weight: 700;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000, 0 0 0.55rem #000;
  white-space: nowrap;
}

.model-card-top {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.model-card-emblem {
  display: none;
}

.model-card-rank {
  color: #d4efeb;
  font-size: 0.65rem;
}

.model-card-maker {
  color: #88a6a8;
  font-size: 0.61rem;
}

.model-card-price {
  padding: 0.38rem 0.45rem;
  border: 1px solid rgba(176, 225, 219, 0.48);
  border-bottom: 0.18rem solid #73509a;
  background: #071019;
  color: #e4f8f5;
  font-size: 0.72rem;
  font-weight: 800;
}

.model-card-name {
  min-height: 2.8rem;
  margin-top: 0.72rem;
  color: #f0f5f2;
  font-size: 0.88rem;
  line-height: 1.42;
}

.model-card-id {
  color: rgba(167, 194, 194, 0.56);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 0.55rem;
}

.model-card-stats {
  border-top: 1px solid rgba(107, 181, 182, 0.24);
  color: #dceae7;
  font-family: "Cascadia Mono", Consolas, monospace;
}

.model-card-loadout span,
.model-card-loadout .is-source,
.model-card-loadout .is-empty {
  border-bottom-color: color-mix(in srgb, var(--affinity) 65%, transparent);
  color: color-mix(in srgb, var(--affinity) 62%, #e5f3f0);
  font-size: 0.58rem;
  font-weight: 700;
}

.model-picker-preview {
  padding: 1rem 1.2rem 1.2rem;
  border-left: 0;
  scrollbar-color: rgba(89, 174, 176, 0.62) transparent;
}

.entity-stage {
  width: 100%;
  height: clamp(12rem, 26vh, 17rem);
  margin: 0.55rem 0 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(135, 204, 201, 0.42);
  border-bottom: 0.28rem solid #68458f;
  border-radius: 0;
  background: #020509;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.44);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%);
}

.entity-stage::before {
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(1, 5, 9, 0.18), transparent 40%, rgba(1, 5, 9, 0.28)),
    linear-gradient(180deg, transparent 56%, rgba(2, 6, 11, 0.86));
}

.entity-stage::after {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.22rem;
  background: linear-gradient(90deg, #59aeb0, #d2efeb 42%, #704a98);
}

.entity-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0.98) contrast(1.06);
}

.entity-stage.is-materializing img {
  animation: portrait-materialize 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.entity-stage canvas {
  display: none;
}

.entity-stage-code {
  right: auto;
  bottom: 0.72rem;
  left: 0.85rem;
  padding: 0.3rem 0.5rem;
  background: rgba(2, 7, 12, 0.76);
  color: #d7efeb;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: left;
}

.model-identity {
  border-top: 0;
  border-bottom: 0.16rem solid rgba(112, 187, 186, 0.34);
}

.model-emblem {
  border-radius: 0;
  border-color: rgba(130, 201, 198, 0.46);
  background: #071019;
  color: #d5efeb;
  clip-path: polygon(0.6rem 0, 100% 0, 100% calc(100% - 0.6rem), calc(100% - 0.6rem) 100%, 0 100%, 0 0.6rem);
}

.model-rank {
  color: #91cfcb;
}

.model-picker-preview .model-name {
  color: #f2f6f3;
}

.model-facts span,
.capability-item {
  border-color: rgba(105, 179, 179, 0.28);
  background: rgba(2, 7, 11, 0.7);
  color: #bed7d4;
}

.price-board {
  border: 1px solid rgba(127, 195, 192, 0.35);
  border-left: 0.3rem solid #65b8b7;
  background-color: #071019;
  background-image:
    linear-gradient(110deg, rgba(26, 68, 73, 0.36), rgba(19, 11, 29, 0.45)),
    url("/assets/mansion-panel-v2.webp");
  background-size: cover, 34rem 34rem;
  background-blend-mode: normal, soft-light;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.34);
}

.price-item strong {
  color: #f4fffc;
  font-size: 1.55rem;
  line-height: 1.05;
}

.price-item small {
  color: #a6d8d4;
  font-size: 0.86rem;
  font-weight: 700;
}

.score-track {
  background: #02070b;
  box-shadow: inset 0 0 0 1px rgba(111, 187, 187, 0.18);
}

.score-track span {
  background: linear-gradient(90deg, #3d9ca1, #86cfca 64%, #985aaf);
  box-shadow: 0 0 1rem rgba(74, 177, 181, 0.35);
}

.model-picker-footer {
  border-top: 0.2rem solid rgba(102, 178, 178, 0.38);
}

@keyframes dais-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) perspective(52rem) rotateX(58deg) scale(0.98);
    filter: saturate(1.02) contrast(1.06) drop-shadow(0 0 1.2rem rgba(64, 176, 183, 0.2));
  }
  50% {
    transform: translate(-50%, -50%) perspective(52rem) rotateX(58deg) scale(1.025);
    filter: saturate(1.18) contrast(1.1) drop-shadow(0 0 2.5rem rgba(90, 189, 191, 0.42));
  }
}

@keyframes portrait-materialize {
  from {
    opacity: 0;
    filter: saturate(0.2) contrast(1.25) brightness(1.45);
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    filter: saturate(0.98) contrast(1.06);
    transform: scale(1);
  }
}

@media (max-width: 1100px) and (min-width: 781px) {
  .model-picker-body {
    grid-template-columns: minmax(32rem, 1fr) minmax(20rem, 24rem);
  }

  .model-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1700px) {
  .model-roster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .mansion-art-backdrop {
    background-position: 50% top;
    filter: saturate(0.92) contrast(1.08) brightness(0.74);
  }

  .summoning-seal-art {
    top: 55%;
    width: 30rem;
    opacity: 0.16;
  }

  .world-overlay {
    background: none;
  }

  .messages {
    padding: 2rem 1.4rem 1rem;
    background-size: 135% 100%, cover, 30rem 30rem;
  }

  .messages::before {
    top: 0.72rem;
    left: 1.5rem;
  }

  .model-picker-frame {
    border-top-width: 0.28rem;
  }

  .model-picker-body {
    display: block;
  }

  .model-picker-catalog {
    border-right: 0;
  }

  .model-roster {
    grid-template-columns: 1fr;
    grid-auto-rows: 11.8rem;
  }

  .model-card {
    height: 11.8rem;
    padding-left: 44%;
  }

  .model-card-portrait {
    right: 58%;
  }

  .model-card-name {
    min-height: 1.5rem;
    margin-top: 0.5rem;
    -webkit-line-clamp: 1;
  }

  .model-card-price {
    font-size: 0.67rem;
  }

  .model-picker-preview {
    border-top: 0.3rem solid #714796;
  }

  .entity-stage {
    width: 100%;
    height: 15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .summoning-seal-art,
  .entity-stage img,
  .model-card-portrait img {
    animation: none !important;
    transition: none !important;
  }
}