@font-face {
  font-family: Corpid;
  src: url("../assets/My Collection/CorpidOffice Bold.ttf");
}

@font-face {
  font-family: Matisse;
  src: url("../assets/My Collection/Fonts/MatissePro B.otf");
}

* {
  box-sizing: border-box;
}

:root {
  --ivory: #f5ead6;
  --gold: #dfbd70;
  --gold-bright: #ffe6a2;
  --gold-dim: #80653b;
  --blood: #a20d32;
  --wine: #5e1738;
  --plum: #27111f;
  --ink: #08070c;
  --panel: #110c14ed;
  --cyan: #6bd7e4;
  --muted: #b49aa6;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #030206;
  color: var(--ivory);
  font-family: Corpid, Arial, sans-serif;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -20%, #55213d 0, #170d1b 35%, transparent 62%),
    #030206;
}

button,
a {
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.operation {
  width: min(1680px, 100vw);
  min-height: 100dvh;
  margin: auto;
  padding: 10px 12px 6px;
}

.operation-header {
  position: relative;
  z-index: 80;
  height: 64px;
  display: grid;
  grid-template-columns: 190px 1fr 275px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #a98d56;
  background:
    linear-gradient(90deg, #0b0810 0 18%, transparent 30% 70%, #0b0810 82%),
    linear-gradient(180deg, #34212d, #120c13 58%, #07060a);
  box-shadow: inset 0 1px #f7d98950, 0 9px 30px #000c;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}

.operation-header::before,
.operation-header::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 28%;
  pointer-events: none;
  border-block: 1px solid #8b6a3b66;
}

.operation-header::before {
  left: 22%;
  transform: skewX(-35deg);
}

.operation-header::after {
  right: 22%;
  transform: skewX(35deg);
}

.operation-header > a {
  position: relative;
  z-index: 2;
  justify-self: start;
  margin-left: 14px;
  padding: 10px 20px 9px;
  color: #d9c8cf;
  text-decoration: none;
  font-size: 9px;
  letter-spacing: .13em;
  border: 1px solid #755268;
  background: linear-gradient(135deg, #391b30, #110c14);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: color .2s, border-color .2s, filter .2s;
}

.operation-header > a:hover {
  color: #fff2c3;
  border-color: var(--gold);
  filter: brightness(1.18);
}

.operation-title {
  position: relative;
  z-index: 2;
  text-align: center;
}

.operation-title small,
.operation-code span {
  display: block;
  color: #ba8ea2;
  font-size: 7px;
  letter-spacing: .24em;
}

.operation-title h1 {
  margin: 2px 0 0;
  color: var(--ivory);
  font: 27px Matisse, serif;
  letter-spacing: .17em;
  text-shadow: 0 1px #000, 0 0 18px #d9a14a55;
}

.operation-code {
  position: relative;
  z-index: 2;
  padding-right: 19px;
  text-align: right;
}

.operation-code b {
  display: block;
  margin-top: 4px;
  color: var(--gold-bright);
  font-size: 13px;
  letter-spacing: .06em;
}

.battlefield {
  position: relative;
  height: min(880px, calc(100dvh - 101px));
  min-height: 735px;
  overflow: hidden;
  border: 1px solid #8a7045;
  border-top: 0;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 25% 58%, #8d26423a 0, transparent 31%),
    radial-gradient(ellipse at 71% 51%, #d0aa5423 0, transparent 25%),
    linear-gradient(180deg, #0c0912aa 0 58%, #120b13ed 77%),
    linear-gradient(120deg, #291527, #11101e 43%, #22111d);
  box-shadow: inset 0 0 130px #000, 0 16px 36px #000c;
}

.battlefield::before {
  content: "";
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #0009, transparent 14% 86%, #0009),
    linear-gradient(180deg, #0006, transparent 22% 70%, #0007);
  box-shadow: inset 0 0 70px #000b;
}

.battlefield::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 48%;
  background:
    repeating-linear-gradient(90deg, #0c090e 0 118px, #392631 120px 122px),
    linear-gradient(#2b1722, #070609);
  clip-path: polygon(0 19%, 48% 5%, 100% 14%, 100% 100%, 0 100%);
}

.architecture {
  position: absolute;
  z-index: 0;
  inset: 0 0 36%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  opacity: .82;
}

.architecture i {
  width: 13%;
  height: 100%;
  border-inline: 5px solid #49323f;
  background: linear-gradient(90deg, #09070d, #261c2b 48%, #08070c);
  clip-path: polygon(16% 100%, 16% 26%, 34% 9%, 50% 0, 66% 9%, 84% 26%, 84% 100%);
  box-shadow: inset 0 0 35px #000;
}

.stained-light {
  position: absolute;
  z-index: 1;
  left: 15%;
  top: -10%;
  width: 34%;
  height: 80%;
  opacity: .72;
  background:
    linear-gradient(165deg, #ffd98031, #a6255b20 47%, transparent 73%);
  clip-path: polygon(39% 0, 61% 0, 100% 100%, 0 100%);
  filter: blur(1px);
}

.floor-seal {
  position: absolute;
  z-index: 2;
  left: 8%;
  bottom: 22%;
  width: 430px;
  height: 118px;
  border: 2px solid #bd95585c;
  border-radius: 50%;
  box-shadow: 0 0 25px #dbb36422, inset 0 0 28px #a4704622;
  transform: skewX(-12deg);
}

.floor-seal::before,
.floor-seal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.floor-seal::before {
  inset: 12px 55px;
  border: 1px solid #d2ac6755;
}

.floor-seal::after {
  inset: 28px 115px;
  border: 1px solid #d2ac6744;
  box-shadow: 0 0 15px #e2ba6433;
}

/* Boss dossier */
.enemy-record {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 17px;
  width: min(675px, 44vw);
  height: 82px;
  display: grid;
  grid-template-columns: 112px 1fr 88px 62px;
  align-items: center;
  padding: 10px 14px;
  transform: translateX(-57%);
  color: #f7e9e5;
  border-block: 1px solid #b8995d;
  background:
    linear-gradient(90deg, #130b13f5, #3e1426f0 48%, #120b13f5),
    #100a11;
  box-shadow: inset 0 1px #f7db8c33, 0 9px 28px #000c;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
}

.enemy-record::before {
  content: "";
  position: absolute;
  inset: 5px 13px;
  pointer-events: none;
  border: 1px solid #72533580;
  clip-path: inherit;
}

.enemy-class,
.enemy-name,
.enemy-value,
.enemy-turn {
  position: relative;
  z-index: 1;
}

.enemy-class {
  padding-left: 7px;
}

.enemy-class span,
.enemy-name small {
  display: block;
  color: #c890a8;
  font-size: 6px;
  letter-spacing: .17em;
}

.enemy-class b {
  display: block;
  margin-top: 5px;
  color: #f0ce79;
  font-size: 9px;
  letter-spacing: .05em;
}

.enemy-name {
  padding-left: 14px;
  border-left: 1px solid #72505f;
}

.enemy-name strong {
  display: block;
  margin-top: 3px;
  font: 19px Matisse, serif;
  letter-spacing: .035em;
}

.enemy-value {
  padding-right: 9px;
  text-align: right;
}

.enemy-value b {
  font-size: 19px;
}

.enemy-value span {
  display: block;
  color: #c49eac;
  font-size: 6px;
  letter-spacing: .18em;
}

.enemy-meter {
  position: absolute;
  z-index: 2;
  left: 142px;
  right: 75px;
  bottom: 8px;
  height: 9px;
  padding: 2px;
  border: 1px solid #826473;
  background: #09070c;
  box-shadow: inset 0 0 6px #000;
}

.enemy-meter i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #76152f, #ed4160 70%, #ff8b82);
  box-shadow: 0 0 8px #ed315761;
  transition: width .35s;
}

.enemy-meter em {
  position: absolute;
  left: 0;
  top: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #8f6b33, #ffe49a, #8f6b33);
  box-shadow: 0 0 5px #f5cc72;
  transition: width .35s;
}

.enemy-turn {
  text-align: center;
  border-left: 1px solid #74515f;
}

.enemy-turn span {
  display: block;
  color: #ca99ad;
  font-size: 6px;
  letter-spacing: .09em;
}

.enemy-turn b {
  display: block;
  margin-top: 2px;
  color: var(--gold-bright);
  font-size: 25px;
  line-height: .9;
}

/* Combatants */
.boss-stage,
.kiara-stage {
  position: absolute;
  transition: transform .18s, filter .18s, opacity .5s;
}

.boss-stage {
  z-index: 7;
  left: 8%;
  bottom: 205px;
  width: 370px;
  height: 370px;
}

.boss-stage > img {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(10px 18px 7px #000e);
}

.boss-aura {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 4%;
  width: 270px;
  height: 105px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #a1315829;
  filter: blur(16px);
}

.phase-mark {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  color: #d9b76542;
  font: 145px Matisse, serif;
}

.boss-stage.hit {
  transform: translateX(-22px);
  filter: brightness(2.15);
}

.boss-stage.phase-two .boss-aura {
  width: 350px;
  height: 320px;
  bottom: 0;
  background: radial-gradient(circle, #e3325b42, transparent 68%);
  animation: breathe .75s alternate infinite;
}

.boss-stage.casting {
  filter: drop-shadow(0 0 34px #d42c59);
}

.kiara-stage {
  z-index: 8;
  right: 24%;
  bottom: 205px;
  width: 355px;
  height: 355px;
}

.kiara-stage > img {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: scaleX(-1);
  filter: drop-shadow(-10px 16px 7px #000d);
}

.kiara-ground {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 6%;
  width: 250px;
  height: 74px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #e0b86324;
  filter: blur(14px);
}

.kiara-stage.hurt {
  transform: translateX(24px);
  filter: brightness(1.9) sepia(.3);
}

.kiara-stage.casting .kiara-ground {
  width: 340px;
  height: 300px;
  bottom: 0;
  background: radial-gradient(circle, #f5d37948, transparent 67%);
  animation: breathe .45s alternate infinite;
}

/* Master contract panel and unified command crest */
.master-console {
  position: absolute;
  z-index: 28;
  right: 16px;
  top: 14px;
  width: 382px;
  padding: 8px;
  color: var(--ivory);
  border: 1px solid #9a7b49;
  background:
    linear-gradient(145deg, #28151ff5, #0d0a10f7 58%),
    #0d0910;
  box-shadow: inset 0 1px #f8d98235, 0 10px 30px #000d;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.master-console::before {
  content: "CONTRACT  /  ACTIVE";
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 17px;
  color: #d5b568;
  font-size: 6px;
  letter-spacing: .18em;
}

.master-art {
  position: relative;
  height: 76px;
  display: grid;
  grid-template-columns: 83px 1fr;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid #71533e;
  background:
    linear-gradient(90deg, #160e17 0, #351c2b 62%, #120c13),
    #120c14;
}

.master-art::after {
  content: "";
  position: absolute;
  left: 82px;
  top: 0;
  bottom: 0;
  width: 42px;
  background: linear-gradient(110deg, #2d1928 0 48%, transparent 50%);
  pointer-events: none;
}

.master-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  opacity: .88;
  filter: brightness(1.72) contrast(1.15) sepia(.12);
}

.master-art > div {
  position: relative;
  z-index: 2;
  padding: 8px 12px 7px;
}

.master-art small {
  display: block;
  color: #c598aa;
  font-size: 6px;
  letter-spacing: .17em;
}

.master-art strong {
  display: block;
  margin-top: 3px;
  font: 18px Matisse, serif;
  letter-spacing: .05em;
}

.master-art span {
  display: block;
  margin-top: 6px;
  color: #83d3dd;
  font-size: 6px;
  letter-spacing: .12em;
}

.command-seal-panel {
  margin-top: 7px;
  border: 1px solid #654656;
  background:
    radial-gradient(circle at 21% 52%, #5b162635, transparent 32%),
    linear-gradient(135deg, #140c13, #09080c);
}

.spell-heading {
  height: 27px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  color: #bf9ba9;
  border-bottom: 1px solid #5e414e;
  background: #24131f;
  font-size: 7px;
  letter-spacing: .16em;
}

.spell-heading b {
  color: var(--gold-bright);
  font-size: 9px;
}

.command-seal-body {
  height: 145px;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 8px;
  padding: 7px;
}

.command-crest {
  position: relative;
  overflow: hidden;
  border: 1px solid #664350;
  background:
    radial-gradient(circle, #6d152d3d 0 28%, transparent 66%),
    repeating-radial-gradient(circle, transparent 0 18px, #a36f5140 19px 20px),
    #0b080d;
  box-shadow: inset 0 0 20px #000, 0 0 10px #c3233d16;
}

.command-crest::before,
.command-crest::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8px;
  border: 1px solid #9a744b55;
  transform: rotate(45deg);
}

.command-crest::after {
  inset: 18px;
  border-color: #8e25434d;
}

.command-crest > img {
  position: absolute;
  z-index: 2;
  inset: 2%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  opacity: .96;
  filter: saturate(1.25) brightness(1.12) drop-shadow(0 0 5px #e01338a8);
  transition: opacity .35s, filter .35s;
}

.command-crest > img.used {
  opacity: .42;
  filter: grayscale(1) brightness(.35) drop-shadow(0 0 2px #686168);
}

.command-crest > i {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 1px solid #ce2b474f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px #cd173f72, inset 0 0 15px #b2163d55;
  animation: sealGlow 1.6s ease-in-out alternate infinite;
}

.command-orders {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 1px solid #4f3744;
  background: #0c090e;
}

.command-orders button {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-width: 0;
  padding: 4px 8px;
  color: #eadde1;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #49313e;
  background:
    linear-gradient(90deg, #41162b7a, transparent 70%),
    #100b11;
  cursor: pointer;
  transition: color .18s, background .18s, padding-left .18s;
}

.command-orders button:last-child {
  border-bottom: 0;
}

.command-orders button::after {
  content: "";
  position: absolute;
  right: 7px;
  width: 5px;
  height: 5px;
  border: 1px solid #c7a05c;
  transform: rotate(45deg);
}

.command-orders button:hover:not(.used) {
  padding-left: 12px;
  color: #fff1bc;
  background:
    linear-gradient(90deg, #74213eaa, transparent 75%),
    #181019;
}

.command-orders button > i {
  color: #d5aa60;
  font: 15px Matisse, serif;
  font-style: normal;
}

.command-orders button b,
.command-orders button small {
  display: block;
}

.command-orders button b {
  font-size: 8px;
  letter-spacing: .1em;
}

.command-orders button small {
  margin-top: 2px;
  overflow: hidden;
  color: #a78b98;
  font-size: 6px;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-orders button.used {
  color: #676168;
  background: #0d0c0f;
  cursor: default;
}

.command-orders button.used::before {
  content: "EXPENDED";
  position: absolute;
  right: 18px;
  color: #6f686e;
  font-size: 6px;
  letter-spacing: .11em;
  transform: rotate(-5deg);
}

.command-orders button.used span {
  opacity: .22;
}

.command-orders button.used > i,
.command-orders button.used::after {
  color: #565157;
  border-color: #565157;
}

/* Servant status and command deck */
.combat-interface {
  position: absolute;
  z-index: 30;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 218px;
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  filter: drop-shadow(0 12px 17px #000c);
}

.servant-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 158px 1fr;
  overflow: hidden;
  border-block: 1px solid #d0ad65;
  background:
    linear-gradient(120deg, #3a172cfa, #140c15f7 58%, #09080cfa),
    #110b12;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 28px) 100%, 0 100%, 0 12px);
}

.servant-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  right: 10px;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright));
  box-shadow: 0 213px var(--gold-dim);
}

.servant-card::after {
  content: "✦";
  position: absolute;
  z-index: 0;
  right: 30px;
  top: 24px;
  color: #a67d5130;
  font: 118px Matisse, serif;
  transform: rotate(22deg);
}

.portrait-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-right: 1px solid #a98957;
  background:
    radial-gradient(circle at 52% 38%, #8b365e, #1b101c 62%),
    #170e17;
  clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0 100%);
}

.portrait-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 7px 20px 7px 7px;
  pointer-events: none;
  border: 1px solid #deb9698c;
  clip-path: inherit;
  box-shadow: inset 0 0 20px #0007;
}

.portrait-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 20px;
  bottom: 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(transparent, #160b16dd);
}

.portrait-frame img {
  position: absolute;
  z-index: 0;
  width: 330%;
  height: auto;
  max-width: none;
  left: -119%;
  top: -4%;
  transition: opacity .15s, transform .2s, filter .2s;
}

.portrait-frame.flash img {
  transform: scale(1.04);
  filter: brightness(1.35);
}

.portrait-frame span {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 25px;
  bottom: 10px;
  padding: 5px 4px 4px;
  color: #ffe9ac;
  text-align: center;
  border-top: 1px solid #a9824f;
  background: #100911b8;
  font-size: 6px;
  letter-spacing: .18em;
}

.servant-data {
  position: relative;
  z-index: 2;
  padding: 16px 25px 12px 11px;
}

.servant-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 9px;
  border-bottom: 1px solid #704554;
}

.servant-heading small {
  display: block;
  color: #c293a8;
  font-size: 6px;
  letter-spacing: .16em;
}

.servant-heading h2 {
  margin: 3px 0 0;
  color: #fff1db;
  font: 23px Matisse, serif;
  letter-spacing: .025em;
  text-shadow: 0 1px #000;
}

.servant-heading > b {
  padding: 4px 7px;
  color: #e7c778;
  border: 1px solid #6e4f42;
  background: #150d12;
  font-size: 7px;
  letter-spacing: .08em;
}

.status-lines {
  padding-top: 5px;
}

.status-lines > div {
  display: grid;
  grid-template-columns: 105px 1fr;
  align-items: center;
  margin: 7px 0;
}

.status-lines span {
  color: #c89bae;
  font-size: 7px;
  letter-spacing: .13em;
}

.status-lines b {
  color: #e9d9dc;
  text-align: right;
  font-size: 8px;
}

.status-lines i {
  position: relative;
  grid-column: 1 / -1;
  height: 10px;
  margin-top: 3px;
  overflow: hidden;
  border: 1px solid #624752;
  background:
    repeating-linear-gradient(90deg, transparent 0 23%, #e3c9d11f 24% 25%),
    #08070a;
  transform: skewX(-13deg);
}

.status-lines i em {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #17627d, #64d6e5 75%, #d4fbff);
  box-shadow: 0 0 10px #54c9de;
  transition: width .35s;
}

.status-lines .rite-line i em {
  width: 0;
  background: linear-gradient(90deg, #72143a, #cf4d68 55%, #f7d77a);
  box-shadow: 0 0 10px #d94b68;
}

.status-row {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.status-row span {
  padding: 4px 6px;
  color: #756a73;
  border: 1px solid #493642;
  background: #0b090d;
  font-size: 6px;
  letter-spacing: .06em;
}

.status-row span.active {
  color: #ffe49c;
  border-color: #b28b4b;
  background: #3a1d2a;
  box-shadow: inset 0 0 9px #ad683e;
}

.action-console {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 57px 1fr;
  margin-left: -19px;
  padding-left: 20px;
  overflow: hidden;
  border-block: 1px solid #b89658;
  background:
    linear-gradient(135deg, #09080df7, #21101cf5 58%, #0a080df8),
    #0c090e;
  clip-path: polygon(25px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 25px);
}

.action-console::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px 7px 7px 26px;
  pointer-events: none;
  border: 1px solid #5d4838;
  clip-path: inherit;
}

.battle-log {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  min-width: 0;
  padding: 9px 20px 7px 26px;
  border-bottom: 1px solid #5b3c4c;
  background: linear-gradient(90deg, #351426a1, transparent);
}

.battle-log small {
  color: #d1a0b5;
  font-size: 6px;
  letter-spacing: .18em;
}

.battle-log p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #eee3de;
  font: 14px/1.25 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 7px 8px 8px 23px;
}

.actions button {
  --action-color: #8e4968;
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: 11px 9px 8px;
  overflow: hidden;
  color: #f2e7e8;
  text-align: left;
  border: 1px solid #644455;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--action-color) 56%, #1a1018), #100b11 68%),
    #160e15;
  box-shadow: inset 0 1px #ffffff14, inset 4px 0 var(--action-color);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%, 0 9px);
  cursor: pointer;
  transition: transform .16s, filter .16s, border-color .16s;
}

.actions button:nth-child(1) {
  --action-color: #7e3e5e;
}

.actions button:nth-child(2) {
  --action-color: #99434f;
}

.actions button:nth-child(3) {
  --action-color: #315d70;
}

.actions button:hover:not(:disabled) {
  z-index: 3;
  border-color: #f4d78b;
  filter: brightness(1.18);
  transform: translateY(-3px);
}

.actions button:disabled {
  opacity: .3;
  filter: grayscale(.72);
  cursor: not-allowed;
}

.actions button > i {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: #edcf84;
  font: 15px Matisse, serif;
  font-style: normal;
  border: 1px solid #a7814d;
  border-radius: 50%;
  background: #100b11aa;
  box-shadow: inset 0 0 8px #000;
}

.actions button span {
  min-width: 0;
}

.actions button span b,
.actions button span small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions button span b {
  font-size: 9px;
  letter-spacing: .055em;
}

.actions button span small {
  margin-top: 5px;
  color: #b9a4ae;
  font-size: 6px;
}

.actions button > em {
  grid-column: 2;
  align-self: end;
  color: #ddbd70;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .08em;
}

.actions .ultimate {
  --action-color: #bc2557;
  background:
    radial-gradient(circle at 30% 40%, #a8345f, transparent 56%),
    linear-gradient(150deg, #651739, #180d18);
}

.actions .ultimate.ready {
  border-color: #ffe296;
  box-shadow:
    inset 0 1px #ffffff25,
    inset 4px 0 #ffcf6b,
    0 0 13px #d5a13e73;
  animation: ready 1s alternate infinite;
}

/* Combat effects */
.moving-effect {
  position: absolute;
  z-index: 40;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 0 15px #ffe08a);
}

.black-key {
  right: 40%;
  bottom: 49%;
  width: 24px;
  height: 145px;
  object-fit: contain;
}

.black-key.fly {
  display: block;
  animation: keyFly .52s ease-in forwards;
}

.misericordia {
  left: 10%;
  top: -250px;
  width: 270px;
  height: 330px;
  object-fit: contain;
}

.misericordia.drop {
  display: block;
  animation: drop .92s cubic-bezier(.5, 0, .85, .25) forwards;
}

.wraith-shot {
  left: 25%;
  bottom: 47%;
  width: 135px;
  height: 135px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px #e7476a);
}

.wraith-shot.fly {
  display: block;
  animation: wraithFly .72s ease-in forwards;
}

.burial-glyph {
  position: absolute;
  z-index: 35;
  left: 19%;
  top: 40%;
  width: 250px;
  height: 250px;
  display: none;
  place-items: center;
  color: #ffe7a1;
  border: 5px double #f2d177;
  border-radius: 50%;
  font: 86px Matisse, serif;
  box-shadow: 0 0 45px #d19b41, inset 0 0 35px #8e3152;
}

.burial-glyph.show {
  display: grid;
  animation: glyph .65s ease-out;
}

.impact {
  position: absolute;
  z-index: 39;
  left: 17%;
  bottom: 43%;
  width: 170px;
  height: 170px;
  display: none;
  border: 6px solid #ffe095;
  border-radius: 50%;
  box-shadow: 0 0 50px #fff0a3, inset 0 0 40px #c83f62;
}

.impact.show {
  display: block;
  animation: impact .48s ease-out;
}

.damage-number {
  position: absolute;
  z-index: 45;
  left: 23%;
  bottom: 61%;
  opacity: 0;
  color: #fff0ad;
  font: 42px Matisse, serif;
  text-shadow: 0 3px #69142f, 0 0 13px #fff;
}

.damage-number.show {
  animation: number .85s ease-out;
}

.command-spell-flash {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle, #8e173845 0 17%, transparent 46%),
    #0d0710df;
  backdrop-filter: blur(5px);
}

.command-spell-flash::before,
.command-spell-flash::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 390px;
  height: 390px;
  border: 1px solid #c99a5d70;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: flashRing .9s ease-out;
}

.command-spell-flash::after {
  width: 310px;
  height: 310px;
  border-style: dashed;
  transform: translate(-50%, -50%) rotate(45deg);
}

.command-spell-flash[hidden] {
  display: none;
}

.command-spell-flash img {
  position: relative;
  z-index: 2;
  width: 260px;
  height: 360px;
  object-fit: contain;
  filter: saturate(1.25) drop-shadow(0 0 25px #f02b4c);
  animation: commandPulse .9s ease-out;
}

.command-spell-flash small,
.command-spell-flash strong {
  position: relative;
  z-index: 2;
}

.command-spell-flash small {
  margin-top: -74px;
  color: #dcb2c2;
  font-size: 8px;
  letter-spacing: .3em;
}

.command-spell-flash strong {
  margin-top: 8px;
  color: var(--gold-bright);
  font: 31px Matisse, serif;
  letter-spacing: .14em;
  text-shadow: 0 0 18px #d6a449;
}

.phase-banner {
  position: absolute;
  z-index: 65;
  left: 0;
  right: 0;
  top: 34%;
  padding: 20px;
  text-align: center;
  border-block: 1px solid #d1af68;
  background: linear-gradient(90deg, transparent, #1e0c19eb 20%, #6a1737ee 50%, #1e0c19eb 80%, transparent);
  box-shadow: 0 0 30px #000;
}

.phase-banner[hidden] {
  display: none;
}

.phase-banner small {
  display: block;
  color: #dba1b6;
  font-size: 8px;
  letter-spacing: .22em;
}

.phase-banner strong {
  display: block;
  margin-top: 7px;
  color: #ffe19a;
  font: 34px Matisse, serif;
}

.phase-banner span {
  display: block;
  margin-top: 6px;
  color: #f2bdcb;
  font-size: 9px;
}

/* Results */
.result-panel {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  grid-template-columns: 360px 520px;
  place-content: center;
  background:
    radial-gradient(circle at 39% 45%, #8e2a5333, transparent 30%),
    #07050bdf;
  backdrop-filter: blur(8px);
}

.result-panel[hidden] {
  display: none;
}

.result-portrait-stack {
  position: relative;
  width: 360px;
  height: 470px;
  align-self: end;
  overflow: hidden;
  filter: drop-shadow(12px 15px 10px #000);
}

.result-portrait-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.result-copy-panel {
  position: relative;
  align-self: center;
  padding: 38px;
  border-block: 1px solid #cfb36f;
  background:
    linear-gradient(135deg, #36172b, #0e0a10 72%),
    #120c13;
  box-shadow: 12px 14px 30px #000b;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}

.result-copy-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid #70533d;
  clip-path: inherit;
}

.result-panel small {
  color: #d3a0b6;
  letter-spacing: .24em;
}

.result-panel h2 {
  margin: 11px 0;
  color: #ffe39b;
  font: 44px Matisse, serif;
}

.result-panel p {
  color: #ddd1d7;
  font: 18px Georgia, serif;
}

.reward {
  margin: 18px 0;
  padding: 12px 17px;
  border: 1px solid #d2b369;
  background: #3b1b2d;
}

.reward span,
.reward b {
  display: block;
}

.reward span {
  color: #cfa0b4;
  font-size: 8px;
}

.reward b {
  margin-top: 5px;
  color: #ffe08c;
}

.result-panel button,
.result-panel a {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border: 1px solid #9e7a58;
  background: linear-gradient(90deg, #53213e, #27121f);
  cursor: pointer;
}

.result-panel button:hover,
.result-panel a:hover {
  border-color: #f1d487;
  filter: brightness(1.15);
}

footer {
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  color: #776b75;
  font-size: 6px;
  letter-spacing: .14em;
}

@keyframes breathe {
  to {
    opacity: .5;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes ready {
  to {
    filter: brightness(1.25);
  }
}

@keyframes sealGlow {
  to {
    opacity: .42;
    transform: translate(-50%, -50%) scale(1.17);
  }
}

@keyframes keyFly {
  from {
    right: 40%;
    transform: rotate(-90deg) scale(.7);
  }

  to {
    right: 73%;
    transform: rotate(-90deg) scale(1.1);
  }
}

@keyframes drop {
  0% {
    top: -250px;
    transform: scale(.65);
  }

  85% {
    top: 30%;
    transform: scale(1.15);
  }

  100% {
    top: 34%;
    transform: scale(.82);
  }
}

@keyframes wraithFly {
  from {
    left: 25%;
    transform: scale(.7) rotate(0);
  }

  to {
    left: 67%;
    transform: scale(1.15) rotate(240deg);
  }
}

@keyframes glyph {
  from {
    opacity: 0;
    transform: scale(.2) rotate(-45deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes impact {
  from {
    opacity: 1;
    transform: scale(.2);
  }

  to {
    opacity: 0;
    transform: scale(2.5);
  }
}

@keyframes number {
  0% {
    opacity: 1;
    transform: translateY(20px) scale(.7);
  }

  70% {
    opacity: 1;
    transform: translateY(-38px) scale(1.22);
  }

  100% {
    opacity: 0;
    transform: translateY(-60px);
  }
}

@keyframes commandPulse {
  0% {
    opacity: 0;
    transform: scale(.2) rotate(-12deg);
  }

  45% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: .3;
    transform: scale(1);
  }
}

@keyframes flashRing {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35) rotate(-30deg);
  }

  to {
    opacity: .7;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

@media (max-width: 1180px) {
  .operation {
    padding: 0;
  }

  .operation-header {
    height: 58px;
    grid-template-columns: 145px 1fr 210px;
  }

  .operation-title h1 {
    font-size: 22px;
  }

  .operation-header > a {
    margin-left: 7px;
    padding: 8px 12px;
  }

  .operation-code {
    padding-right: 10px;
  }

  .operation-code b {
    font-size: 10px;
  }

  .battlefield {
    height: calc(100dvh - 58px);
    min-height: 730px;
  }

  .enemy-record {
    left: 9px;
    width: calc(100% - 361px);
    transform: none;
  }

  .master-console {
    right: 8px;
    top: 9px;
    width: 336px;
  }

  .master-art {
    height: 68px;
    grid-template-columns: 70px 1fr;
  }

  .master-art::after {
    left: 69px;
  }

  .command-seal-body {
    height: 132px;
    grid-template-columns: 101px 1fr;
  }

  .boss-stage {
    left: 3%;
    bottom: 240px;
    width: 320px;
    height: 320px;
  }

  .kiara-stage {
    right: 11%;
    bottom: 240px;
    width: 310px;
    height: 310px;
  }

  .combat-interface {
    left: 7px;
    right: 7px;
    bottom: 6px;
    height: 248px;
    grid-template-columns: 405px minmax(0, 1fr);
  }

  .servant-card {
    grid-template-columns: 124px 1fr;
  }

  .servant-heading h2 {
    font-size: 18px;
  }

  .servant-data {
    padding: 14px 22px 9px 8px;
  }

  .status-row {
    flex-wrap: wrap;
  }

  .action-console {
    grid-template-rows: 50px 1fr;
  }

  .battle-log {
    grid-template-columns: 120px 1fr;
    padding-left: 22px;
  }

  .battle-log p {
    font-size: 12px;
  }

  .actions {
    grid-template-columns: 1fr 1fr;
    padding-left: 20px;
  }

  .actions button {
    padding-block: 6px;
  }

  .actions button span small {
    margin-top: 2px;
  }

  footer {
    display: none;
  }

  .result-panel {
    grid-template-columns: 270px 430px;
  }

  .result-portrait-stack {
    width: 270px;
    height: 370px;
  }

  .result-panel h2 {
    font-size: 33px;
  }
}

@media (max-width: 760px) {
  .operation-header {
    height: 52px;
    grid-template-columns: 76px 1fr 88px;
  }

  .operation-header::before,
  .operation-header::after,
  .operation-title small,
  .operation-code span {
    display: none;
  }

  .operation-header > a {
    margin-left: 4px;
    padding: 7px;
    font-size: 7px;
  }

  .operation-title h1 {
    font-size: 18px;
    letter-spacing: .09em;
  }

  .operation-code b {
    font-size: 7px;
  }

  .battlefield {
    height: calc(100dvh - 52px);
    min-height: 760px;
  }

  .enemy-record {
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: 70px;
    grid-template-columns: 78px 1fr 65px 46px;
    padding: 7px 9px;
  }

  .enemy-class span,
  .enemy-name small {
    font-size: 5px;
  }

  .enemy-name {
    padding-left: 8px;
  }

  .enemy-name strong {
    font-size: 13px;
  }

  .enemy-value b {
    font-size: 14px;
  }

  .enemy-meter {
    left: 98px;
    right: 57px;
    bottom: 6px;
  }

  .enemy-turn b {
    font-size: 20px;
  }

  .master-console {
    top: 82px;
    right: 5px;
    width: 225px;
    padding: 5px;
  }

  .master-console::before {
    display: none;
  }

  .master-art {
    height: 50px;
    grid-template-columns: 48px 1fr;
  }

  .master-art::after {
    left: 47px;
  }

  .master-art > div {
    padding: 5px 8px;
  }

  .master-art small,
  .master-art span {
    display: none;
  }

  .master-art strong {
    font-size: 12px;
  }

  .spell-heading {
    height: 22px;
    font-size: 5px;
  }

  .command-seal-body {
    height: 109px;
    grid-template-columns: 76px 1fr;
    gap: 4px;
    padding: 4px;
  }

  .command-orders button {
    grid-template-columns: 23px 1fr;
    padding: 2px 4px;
  }

  .command-orders button > i {
    font-size: 11px;
  }

  .command-orders button b {
    font-size: 6px;
  }

  .command-orders button small,
  .command-orders button.used::before {
    display: none;
  }

  .boss-stage {
    left: -8%;
    bottom: 305px;
    width: 255px;
    height: 255px;
  }

  .kiara-stage {
    right: -7%;
    bottom: 305px;
    width: 240px;
    height: 240px;
  }

  .combat-interface {
    left: 3px;
    right: 3px;
    bottom: 3px;
    height: 307px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 104px 203px;
  }

  .servant-card {
    grid-template-columns: 91px 1fr;
  }

  .servant-data {
    padding: 7px 20px 4px 6px;
  }

  .servant-heading {
    padding-bottom: 3px;
  }

  .servant-heading small,
  .status-row {
    display: none;
  }

  .servant-heading h2 {
    font-size: 14px;
  }

  .status-lines {
    padding-top: 1px;
  }

  .status-lines > div {
    grid-template-columns: 73px 1fr;
    margin: 3px 0;
  }

  .status-lines span,
  .status-lines b {
    font-size: 6px;
  }

  .status-lines i {
    height: 7px;
    margin-top: 1px;
  }

  .portrait-frame span {
    display: none;
  }

  .action-console {
    grid-template-rows: 45px 1fr;
    margin-left: 0;
    padding-left: 0;
  }

  .action-console::before {
    left: 7px;
  }

  .battle-log {
    display: block;
    padding: 7px 10px;
  }

  .battle-log small {
    font-size: 5px;
  }

  .battle-log p {
    margin-top: 3px;
    font-size: 10px;
  }

  .actions {
    grid-template-columns: 1fr 1fr;
    padding: 5px;
  }

  .actions button {
    grid-template-columns: 27px 1fr;
    padding: 4px 5px;
  }

  .actions button > i {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .actions button span b {
    font-size: 7px;
  }

  .actions button span small {
    display: none;
  }

  .actions button > em {
    font-size: 6px;
  }

  .result-panel {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .result-portrait-stack {
    display: none;
  }

  .result-copy-panel {
    padding: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}