:root {
  --bg: #eef8ff;
  --panel: rgba(255, 255, 255, 0.08);
  --text: #203d70;
  --muted: #6a7da5;
  --accent: #ff6ba9;
  --accent-2: #35cbd0;
  --game-blue: #2f66e8;
  --game-blue-dark: #153c96;
  --game-pink: #ff66a8;
  --game-cyan: #42d8d4;
  --game-yellow: #ffd65a;
  --game-line: #214b8f;
  --screen-min-font-size: 8px;
}

html {
  font-size: clamp(var(--screen-min-font-size), min(1.4815vw, 0.8333dvh), 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 107, 169, 0.22), transparent 24%),
    radial-gradient(circle at 86% 72%, rgba(53, 203, 208, 0.24), transparent 28%),
    linear-gradient(135deg, #f8fcff, #dcefff 50%, #fff1f8);
}

button {
  font: inherit;
}

.home-screen {
  min-height: 100dvh;
  padding: min(1.1111vw, 0.625dvh);
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(47, 102, 232, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 102, 232, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 15% 14%, rgba(255, 102, 168, 0.2), transparent 28%),
    linear-gradient(135deg, #ecf8ff, #fff5fb);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.battle-screen {
  position: relative;
  min-height: 100dvh;
  padding: min(5.1852vw, 2.9167dvh);
}

.battle-placeholder {
  max-width: min(57.4074vw, 32.2917dvh);
  padding: min(2.963vw, 1.6667dvh);
  border: max(1px, min(0.0926vw, 0.0521dvh)) solid rgba(255, 255, 255, 0.14);
  border-radius: min(2.5926vw, 1.4583dvh);
  background: var(--panel);
  box-shadow: 0 min(2.2222vw, 1.25dvh) min(7.4074vw, 4.1667dvh) rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(min(1.6667vw, 0.9375dvh));
}

.screen-shell {
  min-height: 100dvh;
  padding: clamp(6px, min(1.1111vw, 0.625dvh), 12px);
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(47, 102, 232, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 102, 232, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, #f8fcff, #e4f5ff 50%, #fff3f9);
  background-size: 34px 34px, 34px 34px, auto;
}

.screen-shell__body {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  --screen-viewport-gap: clamp(12px, min(2.2222vw, 1.25dvh), 24px);
  --screen-frame-inline: min(calc(100vw - var(--screen-viewport-gap)), calc((100dvh - var(--screen-viewport-gap)) * 9 / 16), 1080px);
  --screen-frame-block: calc(var(--screen-frame-inline) * 16 / 9);
  --screen-font-size: clamp(var(--screen-min-font-size), 1.4815cqw, 16px);
  --game-button-border-width: max(1px, 0.2778cqw);
  --game-button-font-size: max(var(--screen-min-font-size), 1.3333cqw);
  --game-button-min-height: 4.0741cqw;
  --game-button-padding-block: 0.9259cqw;
  --game-button-padding-inline: 1.6667cqw;
  --game-button-shadow: 0.3704cqw 0.4630cqw 0 rgba(33, 75, 143, 0.35);
  --screen-shell-padding: 3.8889cqw;
  --screen-shell-bottom-padding: 13.7037cqw;
  --screen-shell-border-width: max(1px, 0.3704cqw);
  --screen-shell-radius: 2.5926cqw;
  width: var(--screen-frame-inline);
  aspect-ratio: 9 / 16;
  max-height: min(var(--screen-frame-block), calc(100dvh - var(--screen-viewport-gap)));
  padding: var(--screen-shell-padding) var(--screen-shell-padding) var(--screen-shell-bottom-padding);
  font-size: var(--screen-font-size);
  overflow: hidden;
  border: var(--screen-shell-border-width) solid #fff;
  border-radius: var(--screen-shell-radius);
  background:
    linear-gradient(rgba(47, 102, 232, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 102, 232, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 18% 14%, rgba(255, 102, 168, 0.18), transparent 28%),
    radial-gradient(circle at 76% 78%, rgba(66, 216, 212, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(227,246,255,.94) 50%, rgba(255,244,250,.94));
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
  box-shadow:
    0 20px 60px rgba(39, 73, 143, 0.3),
    0 0 0 2px rgba(36, 75, 143, 0.32);
}

.screen-shell__content {
  position: relative;
  z-index: 10;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 1.8519cqw;
  padding: max(2px, 0.1852cqw) max(4px, 0.5556cqw) 0.9259cqw max(2px, 0.1852cqw);
  scrollbar-width: thin;
}

.game-screen-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.game-bottom-nav {
  z-index: 40;
}

.screen-shell__header {
  display: grid;
  gap: 0.7407cqw;
}

.screen-shell__eyebrow {
  margin: 0;
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 1.1556cqw);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.screen-shell__title {
  margin: 0;
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 3.5556cqw);
  line-height: 1.1;
}

.screen-shell__lead {
  max-width: 70.3704cqw;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.7;
}

.screen-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1111cqw;
  align-items: center;
}

.screen-actions button,
.screen-panel button {
  min-height: var(--game-button-min-height);
  padding: var(--game-button-padding-block) var(--game-button-padding-inline);
  color: #fff;
  border: var(--game-button-border-width) solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  box-shadow: var(--game-button-shadow);
  cursor: pointer;
  font-size: var(--game-button-font-size);
  font-weight: 900;
}

.screen-actions .secondary-action,
.screen-panel .secondary-action {
  color: var(--game-blue-dark);
  background: linear-gradient(135deg, #fff, #e5f7ff);
}

.screen-panel {
  padding: 1.8519cqw;
  border: var(--game-button-border-width) solid #fff;
  border-radius: 1.6667cqw;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1.2963cqw 3.8889cqw rgba(47, 102, 232, 0.16);
}

.screen-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 1.4815cqw;
  align-items: baseline;
  margin-bottom: 1.2963cqw;
}

.screen-panel__title {
  margin: 0;
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 1.7778cqw);
}

.screen-panel__meta {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.screen-stat {
  display: grid;
  gap: 0.3704cqw;
}

.screen-stat__label {
  color: var(--muted);
  font-size: max(var(--screen-min-font-size), 1.2148cqw);
  font-weight: 900;
}

.screen-stat__value {
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 1.9259cqw);
}

.formation-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.6667cqw, 1fr));
  gap: 1.4815cqw;
}

.formation-slot-list,
.formation-bench-list,
.gacha-banner-list,
.gacha-result-list,
.gacha-history-list,
.collection-card-list,
.story-list {
  display: grid;
  gap: 1.1111cqw;
}

.formation-slot-list,
.formation-bench-list,
.gacha-banner-list,
.gacha-result-list,
.collection-card-list {
  grid-template-columns: repeat(auto-fit, minmax(16.6667cqw, 1fr));
}

.story-layout,
.collection-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6667cqw;
}

.home-bottom-nav.game-bottom-nav {
  left: 2.5926%;
  right: 2.5926%;
  bottom: 0.9375%;
  min-height: 7.7778cqw;
  padding: 0.5556cqw;
  border-width: max(1px, 0.3704cqw);
  z-index: 40;
  box-shadow:
    0 0.7407cqw 0 rgba(33, 75, 143, 0.42),
    0 1.8519cqw 3.8889cqw rgba(47, 102, 232, 0.22);
}

.home-bottom-nav.game-bottom-nav .game-bottom-nav__item {
  min-width: 0;
  border-right-width: max(1px, 0.1852cqw);
  font-size: max(var(--screen-min-font-size), 2.1481cqw);
}

.home-bottom-nav.game-bottom-nav .game-bottom-nav__item:last-child {
  border-right: 0;
}

.home-bottom-nav.game-bottom-nav .game-bottom-nav__item--active {
  color: #fff;
  box-shadow:
    inset 0 -0.463cqw 0 rgba(0, 0, 0, 0.12),
    0 0 0 max(1px, 0.1852cqw) rgba(33, 75, 143, 0.18);
}

.game-screen-part--has-asset {
  background-repeat: no-repeat;
}

.game-bottom-nav .home-bottom-nav-label {
  padding: 0 1.6667cqw;
}

.formation-slot-card,
.formation-bench-card,
.gacha-banner-card,
.gacha-result-card,
.collection-card-tile,
.story-list-item,
.gacha-history-item {
  width: 100%;
  text-align: left;
}

.formation-slot-card__name,
.formation-bench-card__name,
.gacha-banner-card__title,
.collection-card-tile__name,
.story-list-item__title,
.gacha-result-card__name {
  display: block;
  color: #fff;
  font-weight: 900;
}

.formation-slot-card__label,
.formation-slot-card__meta,
.formation-bench-card__meta,
.gacha-banner-card__description,
.gacha-history-item__detail,
.collection-card-tile__attribute,
.story-list-item__chapter,
.story-list-item__status {
  display: block;
  color: rgba(255, 255, 255, 0.88);
  font-size: max(var(--screen-min-font-size), 1.2741cqw);
  font-weight: 800;
}

.story-detail__synopsis,
.story-detail__reward,
.collection-detail__quote,
.collection-detail__note {
  color: var(--game-blue-dark);
  font-weight: 800;
  line-height: 1.7;
}

.ui-scrollbar {
  --ui-scrollbar-size: 1.1111cqw;
  --ui-scrollbar-thumb: rgba(47, 102, 232, 0.62);
  --ui-scrollbar-thumb-hover: rgba(27, 78, 196, 0.82);
  --ui-scrollbar-track: rgba(255, 255, 255, 0.44);
  --ui-scrollbar-track-border: rgba(47, 102, 232, 0.14);

  scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
  scrollbar-width: thin;
}

.ui-scrollbar::-webkit-scrollbar {
  width: var(--ui-scrollbar-size);
  height: var(--ui-scrollbar-size);
}

.ui-scrollbar::-webkit-scrollbar-track {
  border: max(1px, 0.0926cqw) solid var(--ui-scrollbar-track-border);
  border-radius: 999px;
  background: var(--ui-scrollbar-track);
}

.ui-scrollbar::-webkit-scrollbar-thumb {
  border: max(2px, 0.1852cqw) solid transparent;
  border-radius: 999px;
  background: var(--ui-scrollbar-thumb);
  background-clip: padding-box;
}

.ui-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--ui-scrollbar-thumb-hover);
  background-clip: padding-box;
}

.story-screen .screen-shell__body {
  background:
    linear-gradient(rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(255, 102, 168, 0.2), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(66, 216, 212, 0.2), transparent 30%),
    linear-gradient(135deg, #fbfdff 0%, #e0f5ff 52%, #fff4fa 100%);
  background-size: 3.1481cqw 3.1481cqw, 3.1481cqw 3.1481cqw, auto, auto, auto;
}

.story-screen-header {
  padding: 0.3704cqw 0.3704cqw 0;
}

.story-screen-header .screen-shell__lead {
  display: none;
}

.story-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow: hidden;
  border: max(1px, 0.2778cqw) solid rgba(33, 75, 143, 0.35);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0.7407cqw 0 rgba(33, 75, 143, 0.16);
}

.story-mode-tab {
  min-height: 4.0741cqw;
  color: var(--game-blue-dark);
  border: 0;
  border-right: max(1px, 0.1852cqw) solid rgba(33, 75, 143, 0.18);
  background: linear-gradient(180deg, #fff, #edf8ff);
  cursor: pointer;
  font-weight: 900;
}

.story-mode-tab:last-child {
  border-right: 0;
}

.story-mode-tab--active {
  color: #fff;
  background: linear-gradient(135deg, var(--game-blue), #4c84ff);
  text-shadow: 0 0.1852cqw 0 rgba(33, 75, 143, 0.8);
}

.story-screen-layout {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.story-list-panel,
.story-detail-panel {
  border-color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0.3704cqw 0.5556cqw 0 rgba(33, 75, 143, 0.2),
    0 1.4815cqw 3.8889cqw rgba(47, 102, 232, 0.14);
}

.story-list-panel {
  padding: 1.6667cqw;
}

.story-chapter-list {
  display: grid;
  gap: 1.2963cqw;
  overflow: auto;
  padding: 0.1852cqw 0.3704cqw 0.7407cqw;
}

.story-chapter-block {
  display: grid;
  gap: 1.2963cqw;
}

.story-chapter-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 4.2593cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--game-blue-dark);
  cursor: pointer;
  font-weight: 900;
}

.story-chapter-block__header span {
  color: var(--game-pink);
  letter-spacing: 0.04em;
}

.story-chapter-block__header strong {
  margin-left: auto;
  margin-right: 1.2963cqw;
}

.story-chapter-block__header i {
  display: grid;
  place-items: center;
  width: 2.9630cqw;
  aspect-ratio: 1;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-blue), #6b83ff);
  color: #fff;
  font-style: normal;
  box-shadow: 0.1852cqw 0.2778cqw 0 rgba(33, 75, 143, 0.22);
}

.story-list {
  display: grid;
  gap: 0.9259cqw;
}

.story-list-item {
  position: relative;
  min-height: 7.5926cqw;
  overflow: hidden;
  border: max(1px, 0.2778cqw) solid rgba(33, 75, 143, 0.28);
  border-radius: 1.2963cqw;
  background:
    linear-gradient(90deg, rgba(47, 102, 232, 0.94) 0 0.8333cqw, transparent 0.8333cqw),
    linear-gradient(135deg, #fff, #eaf8ff);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(33, 75, 143, 0.24);
}

.story-list-item__chapter,
.story-list-item__title {
  color: var(--game-blue-dark);
}

.story-list-item__chapter {
  font-size: max(var(--screen-min-font-size), 1.0667cqw);
}

.story-list-item__status {
  position: absolute;
  top: 0.9259cqw;
  right: 1.1111cqw;
  padding: 0.3704cqw 0.9259cqw;
  border-radius: 999px;
  color: #fff;
  background: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 1.0074cqw);
}

.story-list-item[data-story-status="clear"] .story-list-item__status {
  background: var(--game-blue);
}

.story-list-item[data-story-selected="true"] {
  border-color: var(--game-yellow);
  box-shadow:
    0 0 0 max(1px, 0.2778cqw) rgba(255, 214, 90, 0.26),
    0.2778cqw 0.3704cqw 0 rgba(33, 75, 143, 0.24);
}

.story-list-item[data-story-status="locked"] {
  opacity: 0.62;
}

.story-detail-panel {
  position: relative;
}

.story-detail-status {
  position: absolute;
  top: 1.6667cqw;
  right: 1.6667cqw;
  z-index: 2;
  padding: 0.4630cqw 1.1111cqw;
  border-radius: 999px;
  background: var(--game-pink);
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.1556cqw);
  font-weight: 900;
  text-shadow: 0 0.1852cqw 0 rgba(33, 75, 143, 0.7);
}

.story-reader-preview {
  position: relative;
  min-height: 23.1481cqw;
  overflow: hidden;
  margin-bottom: 1.1111cqw;
  border: max(1px, 0.2778cqw) solid #fff;
  border-radius: 1.6667cqw;
  background: linear-gradient(135deg, #bfeeff, #fff2fb);
  box-shadow: inset 0 -3.8889cqw 6.4815cqw rgba(33, 75, 143, 0.2);
}

.story-reader-preview__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(47, 102, 232, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(47, 102, 232, 0.14) 1px, transparent 1px);
  background-size: 2.963cqw 2.963cqw;
}

.story-reader-preview__character {
  position: absolute;
  right: 9%;
  bottom: 5.3704cqw;
  width: 32%;
  aspect-ratio: 1 / 1.45;
  border-radius: 48% 48% 1.6667cqw 1.6667cqw;
  background:
    radial-gradient(circle at 50% 22%, #fff 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 30%, #8de4ff 0 26%, transparent 27%),
    linear-gradient(160deg, #153c96, #ff8ec4);
  filter: drop-shadow(0 1.2963cqw 1.4815cqw rgba(33, 75, 143, 0.24));
}

.story-reader-preview__textbox {
  position: absolute;
  right: 1.6667cqw;
  bottom: 1.6667cqw;
  left: 1.6667cqw;
  padding: 1.2963cqw 1.6667cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.2778cqw) solid rgba(33, 75, 143, 0.3);
  border-radius: 1.6667cqw;
  background: rgba(255, 255, 255, 0.88);
  font-weight: 900;
}

.story-reader-preview__name {
  display: inline-block;
  margin-bottom: 0.5556cqw;
  color: var(--game-pink);
}

.story-reader-preview__textbox p {
  margin: 0;
  line-height: 1.6;
}

.story-detail__title {
  margin: 0.5556cqw 0 0.9259cqw;
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 1.7778cqw);
}

.story-reader-screen {
  --screen-viewport-gap: clamp(12px, min(2.2222vw, 1.25dvh), 24px);
  --screen-frame-inline: min(calc(100vw - var(--screen-viewport-gap)), calc((100dvh - var(--screen-viewport-gap)) * 9 / 16), 1080px);
  --screen-frame-block: calc(var(--screen-frame-inline) * 16 / 9);
  --screen-font-size: clamp(var(--screen-min-font-size), 1.4815cqw, 16px);

  display: grid;
  width: var(--screen-frame-inline);
  height: var(--screen-frame-block);
  max-height: min(var(--screen-frame-block), calc(100dvh - var(--screen-viewport-gap)));
  margin: auto;
  overflow: hidden;
  color: #fff;
  border: max(1px, 0.3704cqw) solid rgba(255, 255, 255, 0.86);
  border-radius: 3.3333cqw;
  background: #040817;
  box-shadow: 0 2.2222cqw 6.6667cqw rgba(4, 8, 24, 0.32);
  container-type: inline-size;
}

.story-reader-stage {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 4.4444cqw;
  grid-template-rows: minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 50% 26%, rgba(66, 216, 212, 0.22), transparent 25%),
    radial-gradient(circle at 70% 74%, rgba(255, 102, 168, 0.26), transparent 30%),
    linear-gradient(160deg, #08122f 0%, #050711 64%, #10172c 100%);
}

.story-reader-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 22%, var(--story-bg-a, rgba(66, 216, 212, 0.22)), transparent 30%),
    radial-gradient(circle at 76% 72%, var(--story-bg-b, rgba(255, 102, 168, 0.26)), transparent 34%),
    linear-gradient(var(--story-bg-grid, rgba(255, 255, 255, 0.04)) 1px, transparent 1px),
    linear-gradient(90deg, var(--story-bg-grid, rgba(255, 255, 255, 0.04)) 1px, transparent 1px),
    linear-gradient(180deg, rgba(26, 16, 64, 0.4) 0%, var(--story-bg-c, rgba(10, 10, 18, 0.92)) 100%);
  background-size: auto, auto, 4.4444cqw 4.4444cqw, 4.4444cqw 4.4444cqw, auto;
}

.story-reader-stage__bg {
  mask-image: linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.22));
}

.story-reader-back,
.story-reader-close {
  position: absolute;
  z-index: 4;
  top: 3.3333cqw;
  left: 3.3333cqw;
  min-height: 4.0741cqw;
  padding: 0.7407cqw 1.6667cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.38);
  font-size: max(var(--screen-min-font-size), 1.3333cqw);
  font-weight: 900;
}

.story-reader-progress {
  position: absolute;
  z-index: 4;
  left: 13.1481cqw;
  right: 8.8889cqw;
  top: 4.4444cqw;
  height: 1.1111cqw;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.story-reader-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--game-cyan), var(--game-pink));
}

.story-reader-counter {
  position: absolute;
  z-index: 4;
  top: 3.8889cqw;
  right: 3.3333cqw;
  margin: 0;
  color: #c7dcff;
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
}

.story-reader-log-open {
  position: absolute;
  z-index: 5;
  top: 6.1111cqw;
  right: 3.3333cqw;
  min-height: 3.7037cqw;
  padding: 0.6481cqw 1.2963cqw;
  color: #fff;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.38);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-audio {
  position: absolute;
  z-index: 5;
  top: 11.1111cqw;
  right: 3.3333cqw;
  display: grid;
  width: min(28.7037cqw, 34%);
  gap: 0.6481cqw;
  pointer-events: auto;
}

.story-reader-audio__track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7407cqw;
  min-height: 4.1667cqw;
  padding: 0.7407cqw;
  color: #fff;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.52);
  border-radius: 1.4815cqw;
  background: rgba(6, 12, 32, 0.66);
  box-shadow: 0 0.7407cqw 1.8519cqw rgba(3, 8, 24, 0.28);
  backdrop-filter: blur(0.8333cqw);
}

.story-reader-audio__label {
  display: inline-grid;
  min-width: 4.0741cqw;
  min-height: 2.7778cqw;
  place-items: center;
  padding: 0.3704cqw 0.7407cqw;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-cyan), var(--game-pink));
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
}

.story-reader-audio__player {
  width: 100%;
  min-width: 0;
  height: max(24px, 2.9630cqw);
}

.story-reader-audio__missing {
  overflow: hidden;
  color: #c7dcff;
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-reader-character {
  --story-character-accent: var(--game-cyan);
  --story-expression-glow: rgba(255, 255, 255, 0.62);
  --story-variant-border: rgba(255, 255, 255, 0.64);

  position: relative;
  z-index: 1;
  display: grid;
  place-items: end center;
  align-self: end;
  justify-self: center;
  width: 58%;
  aspect-ratio: 1 / 1.28;
  margin-bottom: -2.9630cqw;
  border-radius: 42% 42% 24% 24%;
  filter: drop-shadow(0 2.5926cqw 4.4444cqw rgba(3, 8, 24, 0.46));
}

.story-reader-character[data-expression-tone="happy"] {
  --story-expression-glow: rgba(255, 236, 157, 0.86);
}

.story-reader-character[data-expression-tone="angry"] {
  --story-expression-glow: rgba(255, 102, 168, 0.88);
}

.story-reader-character[data-expression-tone="sad"] {
  --story-expression-glow: rgba(102, 198, 255, 0.88);
}

.story-reader-character[data-expression-tone="surprise"] {
  --story-expression-glow: rgba(255, 255, 255, 0.94);
}

.story-reader-character[data-variant-tone="school"] {
  --story-variant-border: rgba(89, 210, 255, 0.82);
}

.story-reader-character[data-variant-tone="battle"] {
  --story-variant-border: rgba(255, 102, 168, 0.82);
}

.story-reader-character[data-variant-tone="summer"] {
  --story-variant-border: rgba(255, 207, 112, 0.86);
}

.story-reader-character__aura,
.story-reader-character__silhouette {
  grid-area: 1 / 1;
}

.story-reader-character__aura {
  width: 92%;
  aspect-ratio: 1 / 1.24;
  border-radius: 48% 48% 28% 28%;
  background:
    radial-gradient(circle at 50% 18%, var(--story-expression-glow), transparent 13%),
    radial-gradient(ellipse at 50% 34%, color-mix(in srgb, var(--story-character-accent) 68%, #fff), transparent 36%),
    radial-gradient(ellipse at 50% 84%, rgba(255, 102, 168, 0.46), transparent 54%);
  filter: blur(0.5556cqw);
  opacity: 0.78;
}

.story-reader-character__silhouette {
  width: 78%;
  aspect-ratio: 1 / 1.3;
  border: max(1px, 0.2778cqw) solid var(--story-variant-border);
  border-radius: 42% 42% 24% 24%;
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 255, 255, 0.96) 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 32%, var(--story-character-accent) 0 24%, transparent 25%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 102, 168, 0.48));
  box-shadow:
    inset 0 0 0 0.3704cqw rgba(255, 255, 255, 0.12),
    0 2.0370cqw 3.7037cqw rgba(3, 8, 24, 0.36);
}

.story-reader-character img {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-reader-character__labels {
  position: absolute;
  left: 50%;
  bottom: 2.5926cqw;
  display: flex;
  max-width: 78%;
  flex-wrap: wrap;
  gap: 0.4630cqw;
  justify-content: center;
  transform: translateX(-50%);
}

.story-reader-character__label,
.story-reader-character__tag {
  padding: 0.6481cqw 1.2963cqw;
  overflow: hidden;
  color: #fff;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: color-mix(in srgb, var(--story-character-accent) 72%, #10172c);
  box-shadow: 0 0.5556cqw 1.4815cqw rgba(3, 8, 24, 0.32);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0.1111cqw 0.1852cqw 0 rgba(3, 8, 24, 0.28);
  white-space: nowrap;
}

.story-reader-character__label {
  max-width: 100%;
}

.story-reader-character__tag {
  color: var(--game-blue-dark);
  background: rgba(255, 255, 255, 0.88);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
}

.story-reader-character__tag--source {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(3, 8, 24, 0.68);
}

.story-reader-log {
  position: absolute;
  z-index: 4;
  top: 7.7778cqw;
  right: 3.3333cqw;
  display: grid;
  width: 27.7778cqw;
  max-height: 32.4074cqw;
  gap: 0.6481cqw;
  pointer-events: none;
}

.story-reader-log__title {
  justify-self: end;
  padding: 0.3704cqw 1.0185cqw;
  color: var(--game-pink);
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
}

.story-reader-log__list {
  display: grid;
  gap: 0.5556cqw;
  overflow: hidden;
}

.story-reader-log__item {
  display: grid;
  gap: 0.2778cqw;
  padding: 0.7407cqw 0.9259cqw;
  color: rgba(255, 255, 255, 0.78);
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.18);
  border-radius: 1.0185cqw;
  background: rgba(3, 8, 24, 0.46);
  backdrop-filter: blur(0.4630cqw);
}

.story-reader-log__item--current {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(36, 88, 211, 0.72);
  box-shadow: 0 0.5556cqw 1.8519cqw rgba(3, 8, 24, 0.24);
}

.story-reader-log__speaker {
  color: var(--game-cyan);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
}

.story-reader-log__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 1.0185cqw);
  font-weight: 800;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.story-reader-textbox {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 22.2222cqw;
  gap: 0.9259cqw;
  padding: 2.2222cqw 2.2222cqw 6.1111cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.3704cqw) solid rgba(176, 198, 232, 0.9);
  border-radius: 2.0370cqw;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1.1111cqw 0 rgba(33, 75, 143, 0.18);
  cursor: pointer;
}

.story-reader-chapter,
.story-reader-title,
.story-reader-speaker,
.story-reader-name,
.story-reader-text {
  margin: 0;
}

.story-reader-chapter,
.story-reader-speaker,
.story-reader-name {
  color: var(--game-pink);
  font-weight: 900;
}

.story-reader-title {
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 2.2222cqw);
}

.story-reader-text {
  min-height: 5.5556cqw;
  font-size: max(var(--screen-min-font-size), 1.5556cqw);
  font-weight: 800;
  line-height: 1.65;
}

.story-reader-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7407cqw;
  padding-right: 8.8889cqw;
}

.story-reader-choice {
  min-height: 3.7037cqw;
  padding: 0.7407cqw 1.4815cqw;
  color: #fff;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.38);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-next {
  position: absolute;
  right: 2.2222cqw;
  bottom: 1.8519cqw;
  min-height: 4.0741cqw;
  padding: 0.7407cqw 1.6667cqw;
  color: #fff;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.38);
  font-size: max(var(--screen-min-font-size), 1.3333cqw);
  font-weight: 900;
}

.story-reader-full-log {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  padding: 8.8889cqw 4.4444cqw 4.4444cqw;
  background: rgba(3, 8, 24, 0.76);
  backdrop-filter: blur(1.1111cqw);
}

.story-reader-full-log--closed {
  display: none;
}

.story-reader-full-log__panel {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.4815cqw;
  padding: 2.2222cqw;
  border: max(1px, 0.3704cqw) solid rgba(255, 255, 255, 0.82);
  border-radius: 2.2222cqw;
  background: rgba(5, 7, 18, 0.92);
  box-shadow: 0 1.6667cqw 5.5556cqw rgba(3, 8, 24, 0.42);
}

.story-reader-full-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1111cqw;
}

.story-reader-full-log__title {
  margin: 0;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 2.0370cqw);
  font-weight: 900;
  text-shadow: 0.1852cqw 0.2778cqw 0 rgba(39, 109, 221, 0.72);
}

.story-reader-full-log__count {
  margin-right: auto;
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-full-log__close {
  min-height: 3.8889cqw;
  padding: 0.7407cqw 1.4815cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.38);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-full-log__list {
  display: grid;
  align-content: start;
  min-height: 0;
  gap: 1.0185cqw;
  overflow: auto;
  padding-right: 0.5556cqw;
  scrollbar-color: var(--game-blue) rgba(255, 255, 255, 0.18);
  scrollbar-width: thin;
}

.story-reader-full-log__item {
  display: grid;
  gap: 0.5556cqw;
  padding: 1.1111cqw 1.2963cqw;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.18);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.08);
}

.story-reader-full-log__item--current {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(36, 88, 211, 0.58);
}

.story-reader-full-log__speaker {
  color: var(--game-cyan);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.story-reader-full-log__text {
  margin: 0;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.2963cqw);
  font-weight: 800;
  line-height: 1.65;
}

.gacha-screen .screen-shell__body {
  background:
    linear-gradient(rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(255, 102, 168, 0.2), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(66, 216, 212, 0.2), transparent 30%),
    linear-gradient(135deg, #fbfdff 0%, #e0f5ff 52%, #fff4fa 100%);
  background-size: 3.1481cqw 3.1481cqw, 3.1481cqw 3.1481cqw, auto, auto, auto;
}

.gacha-screen-header {
  padding: 0.3704cqw 0.3704cqw 0;
}

.gacha-screen-header .screen-shell__lead {
  display: none;
}

.gacha-screen .screen-shell__content {
  gap: 2.0370cqw;
  align-content: start;
}

.gacha-banner-panel,
.gacha-pull-panel {
  border-color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0.3704cqw 0.5556cqw 0 rgba(33, 75, 143, 0.2),
    0 1.4815cqw 3.8889cqw rgba(47, 102, 232, 0.14);
}

.gacha-pull-panel .screen-panel__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.2222cqw;
  align-items: start;
}

.gacha-pull-panel .screen-panel__title,
.gacha-banner-panel .screen-panel__title {
  white-space: nowrap;
}

.gacha-pull-panel .screen-panel__meta {
  min-width: 0;
  line-height: 1.65;
}

.gacha-pull-panel .screen-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1111cqw;
}

.gacha-pull-panel .screen-action {
  min-width: 0;
  padding-inline: 1.2963cqw;
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 1.1481cqw);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gacha-banner-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.4444cqw), 1fr));
}

.gacha-hero-stage {
  position: relative;
  min-height: 27.7778cqw;
  overflow: hidden;
  padding: 2.2222cqw;
  border: max(1px, 0.3704cqw) solid #fff;
  border-radius: 2.2222cqw;
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 214, 90, 0.55), transparent 18%),
    linear-gradient(135deg, #2f66e8 0%, #7f56ff 48%, #ff66a8 100%);
  box-shadow:
    0.4630cqw 0.6481cqw 0 rgba(33, 75, 143, 0.32),
    0 1.6667cqw 4.4444cqw rgba(255, 102, 168, 0.25);
}

.gacha-hero-stage__copy {
  position: relative;
  z-index: 2;
  max-width: 58%;
  color: #fff;
  text-shadow: 0 0.2778cqw 0 rgba(33, 75, 143, 0.8);
}

.gacha-hero-stage__tag {
  display: inline-block;
  margin-bottom: 0.7407cqw;
  padding: 0.4630cqw 1.1111cqw;
  border-radius: 999px;
  background: #fff;
  color: var(--game-pink);
  font-weight: 900;
  text-shadow: none;
  white-space: nowrap;
}

.gacha-hero-stage__copy strong {
  display: block;
  font-size: max(var(--screen-min-font-size), 3.0370cqw);
  line-height: 1.14;
}

.gacha-hero-stage__copy p {
  margin: 0.9259cqw 0 0;
  font-size: max(var(--screen-min-font-size), 1.3889cqw);
  font-weight: 900;
  line-height: 1.55;
}

.gacha-hero-stage__cards {
  position: absolute;
  right: 2.2222cqw;
  bottom: 1.6667cqw;
  width: 42%;
  height: 72%;
}

.gacha-hero-stage__meta {
  position: absolute;
  right: 2.2222cqw;
  bottom: 1.4815cqw;
  left: 2.2222cqw;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5556cqw;
  pointer-events: none;
}

.gacha-hero-stage__rate,
.gacha-hero-stage__featured {
  display: inline-flex;
  align-items: center;
  min-height: 2.3148cqw;
  padding: 0.2778cqw 0.8333cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 1.0185cqw);
  font-weight: 900;
  box-shadow: 0 0.2778cqw 0.5556cqw rgba(33, 75, 143, 0.16);
}

.gacha-hero-stage__featured {
  color: var(--game-pink);
}

.gacha-hero-card {
  position: absolute;
  display: block;
  width: 44%;
  aspect-ratio: 2 / 3;
  border: max(1px, 0.3704cqw) solid #fff;
  border-radius: 1.6667cqw;
  background:
    radial-gradient(circle at 50% 28%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 36%, #9bf1ff 0 28%, transparent 29%),
    linear-gradient(160deg, #10255f, #ff8fc4);
  box-shadow: 0 1.2963cqw 2.0370cqw rgba(7, 18, 46, 0.35);
}

.gacha-hero-card--main {
  right: 24%;
  bottom: 0;
  z-index: 3;
  transform: rotate(3deg);
}

.gacha-hero-card--sub {
  right: 50%;
  bottom: 1.8519cqw;
  opacity: 0.72;
  transform: rotate(-10deg) scale(0.86);
}

.gacha-hero-card--sub-alt {
  right: 0;
  bottom: 2.2222cqw;
  opacity: 0.72;
  transform: rotate(10deg) scale(0.86);
}

.gacha-banner-card {
  min-height: 9.0741cqw;
  border-radius: 1.4815cqw;
}

.gacha-banner-card[data-gacha-selected="true"] {
  border-color: var(--game-pink);
  box-shadow:
    0 0 0 max(1px, 0.2778cqw) rgba(255, 102, 168, 0.22),
    0.3704cqw 0.463cqw 0 rgba(33, 75, 143, 0.25);
}

.gacha-banner-card__title {
  color: var(--game-blue-dark);
}

.gacha-banner-card__description {
  color: var(--muted);
}

.gacha-result-list {
  grid-template-columns: repeat(auto-fill, minmax(10.3704cqw, 1fr));
}

.gacha-result-card {
  display: grid;
  min-height: 13.1481cqw;
  align-content: end;
  border: max(1px, 0.2778cqw) solid rgba(33, 75, 143, 0.28);
  border-radius: 1.4815cqw;
  background:
    radial-gradient(circle at 50% 32%, #fff 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 36%, #9fe7ff 0 24%, transparent 25%),
    linear-gradient(160deg, #10255f 0%, #1b2e66 58%, #ff91c7 100%);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(33, 75, 143, 0.22);
}

.gacha-result-card[data-rarity="SSR"],
.gacha-result-card[data-rarity="UR"],
.gacha-result-card[data-rarity="5★"],
.gacha-result-card[data-rarity="★5"],
.gacha-result-card[data-rarity="5"] {
  border-color: var(--game-yellow);
}

.gacha-result-card__name {
  color: var(--game-blue-dark);
}

.gacha-result-card__rarity {
  width: fit-content;
  padding: 0.1852cqw 0.7407cqw;
  color: var(--game-blue-dark);
  border-radius: 999px;
  background: #fff;
  font-size: max(var(--screen-min-font-size), 1.0667cqw);
  font-weight: 900;
}

.gacha-history-dock {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 0 0.3704cqw 0.5556cqw;
}

.gacha-history-button {
  position: relative;
  display: inline-grid;
  width: 5.9259cqw;
  height: 5.9259cqw;
  place-items: center;
  border: max(1px, 0.3704cqw) solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #2f66e8 0%, #755dff 54%, #ff66a8 100%);
  box-shadow:
    0.3704cqw 0.5556cqw 0 rgba(33, 75, 143, 0.28),
    0 1.1111cqw 2.2222cqw rgba(47, 102, 232, 0.22);
  cursor: pointer;
}

.gacha-history-button__icon {
  position: relative;
  display: block;
  width: 2.5926cqw;
  height: 2.5926cqw;
  border: max(1px, 0.3704cqw) solid #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 max(1px, 0.1852cqw) rgba(33, 75, 143, 0.2);
}

.gacha-history-button__icon::before,
.gacha-history-button__icon::after {
  position: absolute;
  left: 50%;
  bottom: 50%;
  display: block;
  width: 0.3704cqw;
  border-radius: 999px;
  background: #fff;
  content: "";
  transform-origin: 50% 100%;
}

.gacha-history-button__icon::before {
  height: 0.9259cqw;
  transform: translateX(-50%) rotate(0deg);
}

.gacha-history-button__icon::after {
  height: 0.7407cqw;
  transform: translateX(-50%) rotate(112deg);
}

.gacha-history-button__count {
  position: absolute;
  right: -0.3704cqw;
  bottom: -0.1852cqw;
  min-width: 2.2222cqw;
  padding: 0.1852cqw 0.5556cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.1852cqw) solid #fff;
  border-radius: 999px;
  background: var(--game-yellow);
  font-size: max(var(--screen-min-font-size), 1.1259cqw);
  font-weight: 900;
  text-align: center;
}

.gacha-history-panel {
  position: absolute;
  top: calc(100% + 1.1111cqw);
  right: 0.3704cqw;
  z-index: 60;
  display: grid;
  width: min(65cqw, 100%);
  max-height: 42cqw;
  gap: 1.1111cqw;
  overflow: hidden;
  padding: 1.4815cqw;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.9);
  border-radius: 1.6667cqw;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0.3704cqw 0.5556cqw 0 rgba(33, 75, 143, 0.2),
    0 1.4815cqw 3.8889cqw rgba(47, 102, 232, 0.18);
}

.gacha-history-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1111cqw;
}

.gacha-history-panel__title {
  margin: 0;
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 2.1481cqw);
}

.gacha-history-panel__close {
  display: grid;
  width: 4.0741cqw;
  min-width: 4.0741cqw;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  font-size: max(var(--screen-min-font-size), 2.0741cqw);
  font-weight: 900;
}

.gacha-history-panel__list {
  display: grid;
  gap: 0.9259cqw;
  min-height: 0;
  max-height: 31cqw;
  margin: 0;
  overflow: auto;
  padding: 0 0.7407cqw 0 0;
  list-style: none;
}

.gacha-history-panel__item {
  display: grid;
  gap: 0.3704cqw;
  padding: 1.1111cqw 1.2963cqw;
  border: max(1px, 0.1852cqw) solid rgba(33, 75, 143, 0.16);
  border-radius: 1.2963cqw;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(225, 246, 255, 0.82));
}

.gacha-history-panel__banner,
.gacha-history-panel__meta,
.gacha-history-panel__summary,
.gacha-history-panel__empty {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 900;
}

.gacha-history-panel__banner {
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 1.7185cqw);
}

.gacha-history-panel__meta {
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 1.3037cqw);
}

.gacha-history-panel__summary,
.gacha-history-panel__empty {
  color: var(--muted);
  font-size: max(var(--screen-min-font-size), 1.3037cqw);
  line-height: 1.45;
}

.gacha-presentation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  padding: min(2.5vw, 1.4063dvh);
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.42), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(255, 102, 168, 0.34), transparent 28%),
    rgba(4, 8, 28, 0.72);
  backdrop-filter: blur(min(0.7407vw, 0.4167dvh));
}

.gacha-presentation-overlay[data-phase="special"] {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 214, 90, 0.52), transparent 21%),
    radial-gradient(circle at 50% 74%, rgba(255, 102, 168, 0.42), transparent 32%),
    rgba(4, 8, 28, 0.76);
}

.gacha-presentation-overlay:not([data-phase="summary"]) {
  padding: 0;
}

.gacha-presentation-shell {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100dvh - min(5vw, 2.8125dvh)) * 9 / 16), 1080px);
  max-height: 100%;
  font-size: max(var(--screen-min-font-size), 2.0253cqw);
}

.gacha-presentation-aura {
  position: absolute;
  inset: -6.5823cqw;
  border-radius: 5.5696cqw;
  background:
    conic-gradient(from 40deg, rgba(47, 102, 232, 0), rgba(255, 102, 168, 0.34), rgba(255, 214, 90, 0.28), rgba(66, 216, 212, 0.3), rgba(47, 102, 232, 0));
  filter: blur(2.2785cqw);
  animation: gachaPresentationSpin 9s linear infinite;
}

.gacha-presentation-panel {
  position: relative;
  display: grid;
  gap: 2.0253cqw;
  overflow: hidden;
  padding: 3.5443cqw;
  color: #fff;
  border: max(1px, 0.5063cqw) solid rgba(255, 255, 255, 0.86);
  border-radius: 3.5443cqw;
  background:
    radial-gradient(circle at 75% 20%, rgba(255, 214, 90, 0.28), transparent 20%),
    linear-gradient(145deg, rgba(31, 65, 182, 0.96), rgba(128, 73, 245, 0.94) 48%, rgba(255, 102, 168, 0.94));
  box-shadow:
    1.0127cqw 1.519cqw 0 rgba(3, 8, 24, 0.38),
    0 2.7848cqw 7.8481cqw rgba(255, 102, 168, 0.28);
}

.gacha-presentation-animation {
  position: absolute;
  inset: 2.0253cqw;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.gacha-presentation-circle {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border: max(1px, 0.2532cqw) dashed rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  animation: gachaPresentationSpin 7s linear infinite;
}

.gacha-presentation-circle--second {
  width: 44%;
  border-style: solid;
  border-color: rgba(255, 214, 90, 0.56);
  animation-duration: 5s;
  animation-direction: reverse;
}

.gacha-presentation-circle--third {
  width: 30%;
  border-color: rgba(66, 216, 212, 0.5);
  animation-duration: 4s;
}

.gacha-presentation-result-grid,
.gacha-presentation-footer {
  position: relative;
  z-index: 1;
}

.gacha-presentation-result-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.519cqw;
}

.gacha-presentation-result-grid--single {
  grid-template-columns: minmax(0, 29.1139cqw);
  justify-content: center;
}

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-footer {
  position: static;
}

.gacha-presentation-card {
  position: relative;
  display: grid;
  min-height: 23.7975cqw;
  align-content: end;
  gap: 0.6329cqw;
  overflow: hidden;
  padding: 1.519cqw;
  border: max(1px, 0.3797cqw) solid rgba(255, 255, 255, 0.82);
  border-radius: 2.2785cqw;
  background:
    radial-gradient(circle at 50% 30%, #fff 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 36%, #9fe7ff 0 25%, transparent 26%),
    linear-gradient(160deg, #10255f 0%, #1b2e66 56%, #ff91c7 100%);
  box-shadow:
    0 1.519cqw 2.2785cqw rgba(3, 8, 24, 0.35),
    inset 0 -4.557cqw 4.3038cqw rgba(3, 8, 24, 0.5);
  opacity: 0;
  transform: translateY(2.2785cqw) rotateY(22deg);
  animation: gachaPresentationReveal 360ms ease-out forwards;
}

.gacha-presentation-card[data-rarity="SSR"],
.gacha-presentation-card[data-rarity="UR"],
.gacha-presentation-card[data-rarity="5★"],
.gacha-presentation-card[data-rarity="★5"],
.gacha-presentation-card[data-rarity="5"] {
  border-color: var(--game-yellow);
  box-shadow:
    0 0 0 max(1px, 0.3797cqw) rgba(255, 214, 90, 0.28),
    0 2.0253cqw 3.038cqw rgba(3, 8, 24, 0.38),
    0 0 3.5443cqw rgba(255, 214, 90, 0.36),
    inset 0 -4.557cqw 4.3038cqw rgba(3, 8, 24, 0.5);
}

.gacha-presentation-card__art {
  position: absolute;
  top: 2.2785cqw;
  left: 50%;
  width: 46%;
  aspect-ratio: 1 / 1.24;
  border-radius: 999px 999px 2.2785cqw 2.2785cqw;
  background:
    radial-gradient(circle at 52% 24%, #fff 0 11%, transparent 12%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    linear-gradient(150deg, #8bf2ff, #ff8ac5);
  transform: translateX(-50%);
  filter: drop-shadow(0 1.2658cqw 1.519cqw rgba(3, 8, 24, 0.32));
}

.gacha-presentation-card__rarity {
  width: fit-content;
  padding: 0.2532cqw 1.0127cqw;
  color: var(--game-blue-dark);
  border-radius: 999px;
  background: #fff;
  font-size: max(var(--screen-min-font-size), 0.8608cqw);
  font-weight: 900;
}

.gacha-presentation-card__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 0.9873cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: 0 0.2532cqw 0 rgba(3, 8, 24, 0.72);
  white-space: nowrap;
}

.gacha-presentation-card__attribute {
  color: rgba(255, 255, 255, 0.8);
  font-size: max(var(--screen-min-font-size), 0.8354cqw);
  font-weight: 900;
}

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-panel {
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4.8148cqw;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(47, 102, 232, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(3, 5, 16, 0.98), rgba(8, 10, 26, 0.96));
  box-shadow: none;
}

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-shell {
  width: min(100vw, 56.25dvh);
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 100dvh;
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
}

.gacha-presentation-overlay:not([data-phase="summary"]) .gacha-presentation-aura {
  inset: 0;
  border-radius: 0;
}

.gacha-presentation-overlay[data-phase="special"] .gacha-presentation-panel {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.44), transparent 19%),
    radial-gradient(circle at 50% 56%, rgba(255, 214, 90, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(4, 5, 16, 0.98), rgba(16, 12, 35, 0.97));
}

.gacha-presentation-single {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2222cqw;
}

.gacha-presentation-card--featured {
  width: 76%;
  height: 48%;
  min-height: 0;
  justify-self: center;
  padding: 1.6667cqw;
  border-radius: 2.037cqw;
  transform: translateY(0) scale(0.98);
}

.gacha-presentation-card--featured .gacha-presentation-card__art {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.6667cqw;
  transform: none;
}

.gacha-presentation-card--featured .gacha-presentation-card__rarity,
.gacha-presentation-card--featured .gacha-presentation-card__name,
.gacha-presentation-card--featured .gacha-presentation-card__attribute {
  display: none;
}

.gacha-presentation-card__art[data-attribute="Spark"],
.gacha-presentation-special-cutin__art[data-attribute="Spark"] {
  background:
    radial-gradient(circle at 52% 18%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #88ecff 0 30%, transparent 31%),
    linear-gradient(150deg, #151b4a 0%, #2945b7 48%, #ff9fc9 100%);
}

.gacha-presentation-card__art[data-attribute="Wave"],
.gacha-presentation-special-cutin__art[data-attribute="Wave"] {
  background:
    radial-gradient(circle at 48% 18%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #8de4ff 0 28%, transparent 29%),
    linear-gradient(150deg, #1e3374 0%, #6bbfff 48%, #fff0b6 100%);
}

.gacha-presentation-card__art[data-attribute="Mind"],
.gacha-presentation-special-cutin__art[data-attribute="Mind"] {
  background:
    radial-gradient(circle at 46% 20%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #ff9fce 0 28%, transparent 29%),
    linear-gradient(150deg, #31265f 0%, #6d56d8 48%, #f8c0da 100%);
}

.gacha-presentation-card__art[data-attribute="Neon"],
.gacha-presentation-special-cutin__art[data-attribute="Neon"] {
  background:
    radial-gradient(circle at 52% 18%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 38%, #b998ff 0 28%, transparent 29%),
    linear-gradient(150deg, #201344 0%, #613dd6 48%, #fff0a8 100%);
}

.gacha-presentation-nameplate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.2658cqw;
  align-items: center;
  width: min(100%, 70.8861cqw);
  justify-self: center;
  padding: 1.7722cqw 2.2785cqw;
  color: #fff;
  border: max(1px, 0.2532cqw) solid rgba(255, 255, 255, 0.12);
  border-radius: 2.0253cqw;
  background: rgba(15, 17, 31, 0.92);
  box-shadow: 0 1.2658cqw 3.038cqw rgba(3, 8, 24, 0.38);
}

.gacha-presentation-nameplate__rarity {
  color: rgba(255, 255, 255, 0.78);
  font-size: max(var(--screen-min-font-size), 0.9114cqw);
  font-weight: 900;
}

.gacha-presentation-nameplate__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 1.1899cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gacha-presentation-nameplate__arrow {
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.2658cqw);
  animation: gachaPresentationArrow 920ms ease-in-out infinite;
}

.gacha-presentation-special-cutin {
  position: relative;
  z-index: 2;
  width: min(81.0127cqw, 72%);
  height: 18.9873cqw;
  overflow: hidden;
  border-radius: 2.5316cqw;
  opacity: 0;
  transform: translateX(-12%);
  animation: gachaPresentationCutin 900ms ease-out forwards;
  pointer-events: none;
}

.gacha-presentation-special-cutin__art {
  position: absolute;
  inset: -44% -8%;
  filter: saturate(1.25) contrast(1.08);
  transform: scale(1.3);
}

.gacha-presentation-special-cutin::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(3, 8, 24, 0.1), rgba(3, 8, 24, 0.48));
  content: "";
  transform: translateX(-100%);
  animation: gachaPresentationSweep 820ms ease-out 160ms forwards;
}

.gacha-presentation-special-cutin__label {
  position: absolute;
  right: 2.2785cqw;
  bottom: 2.0253cqw;
  z-index: 1;
  color: var(--game-yellow);
  font-size: max(var(--screen-min-font-size), 2.7848cqw);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 0.3797cqw 0 rgba(3, 8, 24, 0.76),
    0 0 2.5316cqw rgba(255, 214, 90, 0.76);
}

.gacha-presentation-overlay[data-phase="special"] .gacha-presentation-card--featured {
  border-color: var(--game-yellow);
  box-shadow:
    0 0 0 max(1px, 0.3797cqw) rgba(255, 214, 90, 0.32),
    0 2.2785cqw 4.0506cqw rgba(3, 8, 24, 0.42),
    0 0 4.8101cqw rgba(255, 214, 90, 0.34);
}

.gacha-presentation-footer {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.7722cqw;
  align-items: center;
  justify-content: center;
}

.gacha-presentation-close,
.gacha-presentation-next,
.gacha-presentation-skip {
  flex: 0 0 auto;
  min-width: 7.0886cqw;
  min-height: 7.0886cqw;
  padding: 0;
  color: var(--game-blue-dark);
  border-radius: 999px;
  background: #fff;
  font-size: max(var(--screen-min-font-size), 2.5316cqw);
  line-height: 1;
}

.gacha-presentation-next {
  position: absolute;
  right: min(5vw, 2.8125dvh);
  bottom: min(5vw, 2.8125dvh);
  color: #fff;
  border: max(1px, 0.3797cqw) solid rgba(255, 255, 255, 0.86);
  background: rgba(47, 102, 232, 0.92);
  box-shadow:
    0 1.2658cqw 3.038cqw rgba(3, 8, 24, 0.36),
    inset 0 0 2.2785cqw rgba(255, 255, 255, 0.18);
}

.gacha-presentation-skip {
  position: absolute;
  left: min(5vw, 2.8125dvh);
  bottom: min(5vw, 2.8125dvh);
  color: #fff;
  border: max(1px, 0.3797cqw) solid rgba(255, 255, 255, 0.72);
  background: rgba(10, 18, 48, 0.72);
  box-shadow:
    0 1.2658cqw 3.038cqw rgba(3, 8, 24, 0.28),
    inset 0 0 2.2785cqw rgba(255, 255, 255, 0.12);
}

@keyframes gachaPresentationSpin {
  to { transform: rotate(360deg); }
}

@keyframes gachaPresentationReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateY(0deg);
  }
}

@keyframes gachaPresentationCutin {
  0% {
    opacity: 0;
    transform: translateX(-14%) scale(1.04);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes gachaPresentationSweep {
  to { transform: translateX(100%); }
}

@keyframes gachaPresentationArrow {
  50% { transform: translateY(0.6329cqw); }
}

.collection-screen .screen-shell__body {
  background:
    linear-gradient(rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(255, 102, 168, 0.2), transparent 26%),
    radial-gradient(circle at 82% 78%, rgba(66, 216, 212, 0.2), transparent 30%),
    linear-gradient(135deg, #fbfdff 0%, #e0f5ff 52%, #fff4fa 100%);
  background-size: 3.1481cqw 3.1481cqw, 3.1481cqw 3.1481cqw, auto, auto, auto;
}

.collection-screen-header {
  padding: 0.3704cqw 0.3704cqw 0;
}

.collection-screen-header .screen-shell__lead {
  display: none;
}

.collection-filter-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  overflow: hidden;
  border: max(1px, 0.2778cqw) solid rgba(33, 75, 143, 0.35);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0.7407cqw 0 rgba(33, 75, 143, 0.16);
}

.collection-filter-chip {
  min-height: 4.0741cqw;
  color: var(--game-blue-dark);
  border: 0;
  border-right: max(1px, 0.1852cqw) solid rgba(33, 75, 143, 0.18);
  background: linear-gradient(180deg, #fff, #edf8ff);
  cursor: pointer;
  font-weight: 900;
}

.collection-filter-chip:last-child {
  border-right: 0;
}

.collection-filter-chip--active {
  color: #fff;
  background: linear-gradient(135deg, var(--game-blue), #4c84ff);
  text-shadow: 0 0.1852cqw 0 rgba(33, 75, 143, 0.8);
}

.collection-screen-layout {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.collection-list-panel,
.collection-detail-panel {
  border-color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0.3704cqw 0.5556cqw 0 rgba(33, 75, 143, 0.2),
    0 1.4815cqw 3.8889cqw rgba(47, 102, 232, 0.14);
}

.collection-card-list {
  grid-template-columns: repeat(auto-fill, minmax(11.4815cqw, 1fr));
  max-height: min(64cqw, 100%);
  overflow: auto;
  padding: 0.1852cqw 0.3704cqw 0.7407cqw;
}

.collection-card-tile {
  position: relative;
  display: grid;
  min-height: 17.5926cqw;
  align-content: end;
  overflow: hidden;
  padding: 0.9259cqw;
  border: max(1px, 0.2778cqw) solid rgba(33, 75, 143, 0.34);
  border-radius: 1.6667cqw;
  background:
    linear-gradient(180deg, transparent 0 54%, rgba(3, 8, 24, 0.74) 100%),
    linear-gradient(160deg, #10255f, #355fe0 54%, #ff91c7);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(33, 75, 143, 0.22);
}

.collection-card-tile[data-rarity="SSR"],
.collection-card-tile[data-rarity="UR"],
.collection-card-tile[data-rarity="5★"],
.collection-card-tile[data-rarity="★5"],
.collection-card-tile[data-rarity="5"] {
  border-color: var(--game-yellow);
}

.collection-card-tile__art {
  position: absolute;
  top: 1.1111cqw;
  left: 50%;
  width: 54%;
  aspect-ratio: 1 / 1.35;
  border-radius: 999px 999px 1.6667cqw 1.6667cqw;
  background:
    radial-gradient(circle at 50% 24%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 34%, #8de4ff 0 28%, transparent 29%),
    linear-gradient(160deg, #153c96, #ff8ec4);
  transform: translateX(-50%);
}

.collection-card-tile__rarity {
  position: relative;
  width: fit-content;
  padding: 0.1852cqw 0.7407cqw;
  color: var(--game-blue-dark);
  border-radius: 999px;
  background: #fff;
  font-size: max(var(--screen-min-font-size), 1.037cqw);
  font-weight: 900;
}

.collection-card-tile__name,
.collection-card-tile__attribute {
  position: relative;
}

.collection-detail-card {
  position: relative;
  min-height: 25cqw;
  overflow: hidden;
  margin-bottom: 1.2963cqw;
  border: max(1px, 0.3704cqw) solid #fff;
  border-radius: 2.0370cqw;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 214, 90, 0.48), transparent 22%),
    linear-gradient(140deg, #153c96, #58d9ff 54%, #ff8ec4);
  box-shadow: 0.3704cqw 0.5556cqw 0 rgba(33, 75, 143, 0.24);
}

.collection-detail-card[data-rarity="SSR"],
.collection-detail-card[data-rarity="UR"],
.collection-detail-card[data-rarity="5★"],
.collection-detail-card[data-rarity="★5"],
.collection-detail-card[data-rarity="5"] {
  border-color: var(--game-yellow);
}

.collection-detail-card__art {
  position: absolute;
  top: 2.0370cqw;
  left: 50%;
  width: 38%;
  aspect-ratio: 1 / 1.35;
  border-radius: 999px 999px 1.8519cqw 1.8519cqw;
  background:
    radial-gradient(circle at 50% 24%, #fff 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 34%, #c5f4ff 0 30%, transparent 31%),
    linear-gradient(160deg, #10255f, #ff8fc4);
  transform: translateX(-50%);
}

.collection-detail-card__plate {
  position: absolute;
  right: 1.6667cqw;
  bottom: 1.6667cqw;
  left: 1.6667cqw;
  display: grid;
  gap: 0.3704cqw;
  padding: 1.1111cqw 1.4815cqw;
  color: #fff;
  border-radius: 1.4815cqw;
  background: rgba(3, 8, 24, 0.66);
  font-weight: 900;
}

.collection-detail-data-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7407cqw 1.1111cqw;
  margin: 1.2963cqw 0 0;
  padding: 1.2963cqw;
  border: max(1px, 0.1852cqw) solid rgba(151, 179, 223, 0.45);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.62);
}

.collection-detail-data-list dt {
  color: var(--muted);
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
}

.collection-detail-data-list dd {
  margin: 0;
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
  line-height: 1.35;
}

.collection-detail-data-list--voices {
  grid-template-columns: 1fr;
}

.formation-screen .screen-shell__body {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 102, 168, 0.18), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(66, 216, 212, 0.15), transparent 28%),
    linear-gradient(135deg, #080a17 0%, #121533 45%, #090b16 100%);
}

.formation-screen .screen-shell__content {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 1.6667cqw;
  min-height: 0;
  overflow: hidden;
}

.formation-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.formation-title {
  color: #fff;
  font-size: max(var(--screen-min-font-size), 3.1852cqw);
  text-shadow:
    0 0.2778cqw 0 #142f78,
    0 0 1.4815cqw rgba(66, 216, 212, 0.38);
}

.formation-power-badge {
  display: grid;
  min-width: 12.4074cqw;
  padding: 0.7407cqw 1.4815cqw;
  color: #fff;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(47, 102, 232, 0.92), rgba(113, 73, 255, 0.88));
  box-shadow: 0 0.7407cqw 0 rgba(3, 8, 24, 0.45);
  text-align: center;
}

.formation-power-badge span {
  font-size: max(var(--screen-min-font-size), 0.9778cqw);
  font-weight: 900;
}

.formation-power-badge strong {
  font-size: max(var(--screen-min-font-size), 1.7778cqw);
  line-height: 1;
}

.formation-actions {
  gap: 0.9259cqw;
}

.formation-actions .screen-action {
  min-height: 3.7037cqw;
  padding: 0.7407cqw 1.4815cqw;
  border-width: max(1px, 0.1852cqw);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.5);
  font-size: max(var(--screen-min-font-size), 1.2741cqw);
}

.formation-slots {
  position: sticky;
  top: 0;
  z-index: 2;
  min-width: 0;
  padding-bottom: 0.7407cqw;
}

.formation-bench {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.formation-slot-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.4815cqw;
}

.formation-slot-card {
  position: relative;
  display: grid;
  gap: 0.7407cqw;
  align-content: start;
  min-width: 0;
}

.formation-slot-card__art {
  position: relative;
  aspect-ratio: 1 / 1.36;
  overflow: hidden;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.16);
  border-radius: 1.6667cqw;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.formation-slot-card--filled .formation-slot-card__art {
  border-color: rgba(255, 214, 90, 0.9);
  background:
    radial-gradient(circle at var(--formation-art-focus-x) var(--formation-art-focus-y), var(--formation-art-c) 0 9%, transparent 10%),
    radial-gradient(ellipse at 50% 36%, var(--formation-art-b) 0 26%, transparent 27%),
    linear-gradient(150deg, var(--formation-art-a), #111936 50%, #050711);
  box-shadow:
    0 0 0 max(1px, 0.1852cqw) rgba(255, 214, 90, 0.28),
    inset 0 -2.5926cqw 2.963cqw rgba(0, 0, 0, 0.5);
}

.formation-slot-card--drop-target .formation-slot-card__art {
  border-color: var(--game-cyan);
  box-shadow:
    0 0 0 max(1px, 0.2778cqw) rgba(66, 216, 212, 0.34),
    0 0 2.037cqw rgba(66, 216, 212, 0.45),
    inset 0 -2.5926cqw 2.963cqw rgba(0, 0, 0, 0.5);
}

.formation-slot-card__index {
  position: absolute;
  top: 0.7407cqw;
  left: 0.7407cqw;
  display: grid;
  width: 2.5926cqw;
  height: 2.0370cqw;
  place-items: center;
  color: #fff;
  border-radius: 999px;
  background: #020611;
  font-size: max(var(--screen-min-font-size), 1.0667cqw);
  font-weight: 900;
}

.formation-slot-card__name {
  position: absolute;
  right: 0.7407cqw;
  bottom: 0.7407cqw;
  left: 0.7407cqw;
  overflow: hidden;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: 0 max(1px, 0.1852cqw) 0 #07122e;
  white-space: nowrap;
}

.formation-slot-card .screen-action {
  min-height: 2.7778cqw;
  padding: 0.3704cqw 0.9259cqw;
  border-width: max(1px, 0.1852cqw);
  box-shadow: 0.1852cqw 0.2778cqw 0 rgba(3, 8, 24, 0.5);
  font-size: max(var(--screen-min-font-size), 1.0667cqw);
}

.formation-bench-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.037cqw, 1fr));
  gap: 1.2963cqw;
  max-height: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: max(1px, 0.1852cqw) 0.7407cqw 1.6667cqw max(1px, 0.1852cqw);
  scrollbar-width: thin;
}

.formation-bench-card {
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: 1.7593cqw;
  cursor: grab;
}

.formation-bench-card:active,
.formation-bench-card--dragging {
  cursor: grabbing;
}

.formation-bench-card:focus-visible {
  outline: max(1px, 0.2778cqw) solid var(--game-cyan);
  outline-offset: 0.3704cqw;
}

.formation-detail-screen .screen-shell__body {
  padding: var(--screen-shell-padding);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 102, 168, 0.2), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(66, 216, 212, 0.18), transparent 30%),
    linear-gradient(135deg, #080a17 0%, #121533 45%, #090b16 100%);
}

.formation-detail-content {
  display: grid;
  height: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 1.6667cqw;
  min-height: 0;
  overflow: hidden;
}

.formation-detail-back {
  justify-self: start;
  min-height: 4.2593cqw;
  padding: 0.9259cqw 2.2222cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.2778cqw) solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, #e5f7ff);
  box-shadow: 0.3704cqw 0.4630cqw 0 rgba(3, 8, 24, 0.46);
  cursor: pointer;
  font-weight: 900;
}

.formation-detail-card {
  display: grid;
  justify-items: center;
  gap: 1.4815cqw;
  min-height: 0;
  color: #fff;
}

.formation-detail-card__art {
  position: relative;
  width: 52%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  border: max(1px, 0.3704cqw) solid #fff;
  border-radius: 2.5926cqw;
  background:
    radial-gradient(circle at var(--formation-art-focus-x) var(--formation-art-focus-y), var(--formation-art-c) 0 8%, transparent 9%),
    radial-gradient(ellipse at 52% 36%, var(--formation-art-b) 0 28%, transparent 29%),
    linear-gradient(150deg, var(--formation-art-a), #101c3f 48%, #050711);
  box-shadow:
    0 0.9259cqw 0 rgba(55, 61, 113, 0.72),
    inset 0 -8.5185cqw 6.8519cqw rgba(0, 0, 0, 0.48);
}

.formation-detail-card__art::before {
  position: absolute;
  inset: 14% 20% 20%;
  border-radius: 45% 45% 28% 28%;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,0.94) 0 7%, transparent 8%),
    linear-gradient(150deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  content: "";
  transform: translateY(8%);
}

.formation-detail-card__identity {
  display: grid;
  gap: 0.7407cqw;
  width: 100%;
  padding: 2.0370cqw 2.2222cqw;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.72);
  border-radius: 2.0370cqw;
  background: rgba(6, 12, 30, 0.72);
  box-shadow: inset 0 0 0 max(1px, 0.1852cqw) rgba(47, 102, 232, 0.28);
}

.formation-detail-card__rarity,
.formation-detail-card__meta,
.formation-detail-card__quote {
  margin: 0;
}

.formation-detail-card__rarity {
  color: var(--game-cyan);
  font-size: max(var(--screen-min-font-size), 1.3333cqw);
  font-weight: 900;
}

.formation-detail-card__name {
  margin: 0;
  font-size: max(var(--screen-min-font-size), 3.8519cqw);
  line-height: 1.05;
  text-shadow:
    0 0.2778cqw 0 #142f78,
    0 0 1.4815cqw rgba(66, 216, 212, 0.38);
}

.formation-detail-card__meta {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 800;
}

.formation-detail-card__quote {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 800;
  line-height: 1.55;
}

.formation-detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7407cqw;
  min-height: 5cqw;
}

.formation-detail-tab {
  min-width: 0;
  min-height: 4.6296cqw;
  padding: 0.7407cqw 0.9259cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, #dff4ff);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.42);
  cursor: pointer;
  font-size: max(var(--screen-min-font-size), 1.2148cqw);
  font-weight: 900;
}

.formation-detail-tab--active {
  color: #fff;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
}

.formation-detail-tab-panel {
  min-height: 0;
  padding: 1.8519cqw;
  overflow: auto;
  color: #fff;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.72);
  border-radius: 2.0370cqw;
  background: rgba(6, 12, 30, 0.72);
  box-shadow: inset 0 0 0 max(1px, 0.1852cqw) rgba(47, 102, 232, 0.28);
  scrollbar-width: thin;
}

.formation-detail-tab-panel__title {
  margin: 0 0 0.9259cqw;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 2cqw);
}

.formation-detail-tab-panel__text {
  margin: 0 0 1.4815cqw;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 800;
}

.formation-detail-stat-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9259cqw 1.4815cqw;
  margin: 0;
}

.formation-detail-stat-grid dt,
.formation-detail-stat-grid dd {
  margin: 0;
  font-weight: 900;
}

.formation-detail-stat-grid dt {
  color: var(--game-cyan);
}

.formation-detail-stat-grid dd {
  color: #fff;
}

.formation-detail-voice-list,
.formation-detail-story-list {
  display: grid;
  gap: 0.7407cqw;
}

.formation-detail-voice-item {
  display: grid;
  gap: 0.3704cqw;
  padding: 0.9259cqw 1.1111cqw;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.14);
  border-radius: 1.1111cqw;
  background: rgba(255, 255, 255, 0.06);
}

.formation-detail-voice-label {
  color: var(--game-cyan);
  font-size: max(var(--screen-min-font-size), 1.1556cqw);
  font-weight: 900;
}

.formation-detail-voice-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  line-height: 1.5;
}

.formation-detail-story-list {
  margin-top: 1.4815cqw;
  padding-top: 1.2963cqw;
  border-top: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.14);
}

.formation-detail-story-list__title,
.formation-detail-story-empty,
.formation-detail-story-item {
  margin: 0;
}

.formation-detail-story-list__title {
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
}

.formation-detail-story-empty,
.formation-detail-story-item {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 800;
}

.formation-detail-action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9259cqw;
  margin-top: 1.4815cqw;
}

.formation-detail-action {
  min-height: 3.8889cqw;
  padding: 0.7407cqw 1.2963cqw;
  color: #fff;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  box-shadow: 0.2778cqw 0.3704cqw 0 rgba(3, 8, 24, 0.42);
  font-size: max(var(--screen-min-font-size), 1.2148cqw);
  font-weight: 900;
}

.formation-detail-action:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.formation-card-face {
  position: relative;
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
  border: max(1px, 0.2778cqw) solid #fff;
  border-radius: 1.7593cqw;
  background:
    radial-gradient(circle at var(--formation-art-focus-x) var(--formation-art-focus-y), var(--formation-art-c) 0 10%, transparent 11%),
    radial-gradient(ellipse at 52% 34%, var(--formation-art-b) 0 30%, transparent 31%),
    linear-gradient(150deg, var(--formation-art-a), #101c3f 48%, #050711);
  box-shadow:
    0 0.4630cqw 0 rgba(55, 61, 113, 0.72),
    inset 0 0 0 max(1px, 0.2778cqw) rgba(22, 32, 86, 0.72),
    inset 0 -3.3333cqw 3.1481cqw rgba(0, 0, 0, 0.58);
}

.formation-card-face::before,
.formation-slot-card--filled .formation-slot-card__art::before {
  content: "";
  position: absolute;
  inset: 16% 18% 18%;
  border-radius: 45% 45% 28% 28%;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,0.94) 0 8%, transparent 9%),
    linear-gradient(150deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
  transform: translateY(8%);
}

.formation-card-face__rarity {
  position: absolute;
  top: 0.7407cqw;
  left: 0.7407cqw;
  padding: 0.2778cqw 0.7407cqw;
  color: #fff;
  border-radius: 999px;
  background: #07122e;
  font-size: max(var(--screen-min-font-size), 1.0667cqw);
  font-weight: 900;
  text-shadow: 0 0.1852cqw 0 #000;
}

.formation-card-face__stats {
  position: absolute;
  right: 0.7407cqw;
  bottom: 0.7407cqw;
  left: 0.7407cqw;
  display: flex;
  justify-content: space-between;
  gap: 0.5556cqw;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.0667cqw);
  font-weight: 900;
  text-shadow: 0 0.1852cqw 0 #000;
}

@container (max-width: 620px) {
  .formation-slot-list,
  .formation-bench-list {
    gap: 1.8519cqw;
  }

  .formation-title {
    font-size: max(var(--screen-min-font-size), 5.3333cqw);
  }

  .formation-power-badge {
    min-width: 19.2593cqw;
    padding: 1.2963cqw 1.8519cqw;
  }

  .formation-card-face__stats {
    display: none;
  }
}

.screen-shell__body[data-ui-orientation="landscape"] .formation-slot-list {
  grid-template-columns: repeat(5, minmax(10.3704cqw, 1fr));
}

.screen-shell__body[data-ui-orientation="landscape"] .formation-card-face {
  background-position: center 38%;
}

.home-game-frame {
  position: relative;
  width: min(calc(100vw - 24px), calc((100dvh - 24px) * 16 / 9), 1920px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: max(1px, min(0.3704vw, 0.2083dvh)) solid #fff;
  border-radius: min(2.5926vw, 1.4583dvh);
  background:
    linear-gradient(90deg, rgba(47, 102, 232, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(47, 102, 232, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 78% 20%, rgba(72, 176, 255, 0.34), transparent 28%),
    radial-gradient(circle at 76% 82%, rgba(255, 102, 168, 0.22), transparent 26%),
    linear-gradient(135deg, #fbfdff 0%, #dcf4ff 48%, #fef5fb 100%);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
  box-shadow:
    0 min(1.8519vw, 1.0417dvh) min(5.5556vw, 3.125dvh) rgba(39, 73, 143, 0.3),
    0 0 0 2px rgba(36, 75, 143, 0.32);
}

.home-game-frame::before {
  position: absolute;
  top: -8%;
  left: -3%;
  width: 31%;
  height: 116%;
  background:
    linear-gradient(90deg, rgba(255, 102, 168, 0.16) 2px, transparent 2px),
    linear-gradient(rgba(47, 102, 232, 0.14) 2px, transparent 2px),
    rgba(255, 255, 255, 0.68);
  background-size: 32px 32px;
  border-right: 5px solid rgba(47, 102, 232, 0.28);
  content: "";
  transform: rotate(-3deg);
  pointer-events: none;
  z-index: 0;
}

.home-game-frame::after {
  position: absolute;
  right: 4%;
  bottom: 16%;
  width: 34%;
  height: 30%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(47, 102, 232, 0.18) 2px, transparent 3px);
  background-size: 18px 18px;
  content: "";
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.home-game-frame--landscape {
  width: min(calc(100vw - 24px), calc((100dvh - 24px) * 16 / 9), 1920px);
  aspect-ratio: 16 / 9;
}

.home-game-frame--portrait {
  width: min(calc(100vw - 24px), calc((100dvh - 24px) * 9 / 16), 1080px);
  aspect-ratio: 9 / 16;
}

.home-game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  container-type: inline-size;
  width: 1080px;
  height: 1920px;
  transform-origin: top left;
  isolation: isolate;
}

.home-background-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.home-top-hud {
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 20;
}

.home-profile-strip,
.home-resource-group {
  display: flex;
  gap: 14px;
  align-items: center;
}

.home-level-badge {
  min-width: 86px;
  padding: 14px 16px;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  box-shadow:
    4px 5px 0 rgba(33, 75, 143, 0.55);
  font-weight: 900;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(33, 75, 143, 0.9),
    1px 0 0 rgba(33, 75, 143, 0.9);
}

.home-avatar-button {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff8dc0, #5cb6ff);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, 0.18),
    4px 5px 0 rgba(33, 75, 143, 0.45);
}

.home-resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 128px;
  padding: 8px 14px 8px 10px;
  color: var(--game-blue-dark);
  border: 3px solid #fff;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #fff 0 34%, rgba(255, 255, 255, 0.9) 34% 100%),
    linear-gradient(135deg, rgba(255, 102, 168, 0.18), rgba(66, 216, 212, 0.18));
  box-shadow:
    4px 5px 0 rgba(33, 75, 143, 0.42),
    inset 0 0 0 2px rgba(47, 102, 232, 0.45);
  font-weight: 900;
}

.home-resource-dot {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, #fff7b5 0 18%, transparent 20%),
    linear-gradient(135deg, #ffd65a, #f7a22b);
  box-shadow:
    0 0 0 3px #214b8f,
    0 0 0 5px #fff;
}

.home-resource-dot::after {
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(33, 75, 143, 0.72);
  border-radius: 50%;
  content: "";
}

.home-resource-pill--blue .home-resource-dot {
  border-radius: 7px;
  background:
    linear-gradient(135deg, #e7fbff 0 28%, #42d8d4 29% 65%, #2f66e8 66%);
  box-shadow:
    0 0 0 3px #214b8f,
    0 0 0 5px #fff;
  transform: rotate(45deg);
}

.home-resource-pill--blue .home-resource-dot::after {
  display: none;
}

.home-side-tools {
  position: absolute;
  top: 126px;
  left: 20px;
  display: grid;
  gap: 16px;
  z-index: 20;
}

.home-side-tool {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  padding: 8px;
  color: #fff;
  border: 4px solid #fff;
  border-radius: 999px;
  background: linear-gradient(145deg, #3476ff, #1746ac);
  box-shadow:
    4px 6px 0 rgba(33, 75, 143, 0.58),
    inset 0 -8px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.home-side-tool-icon {
  width: 44px;
  height: 44px;
}

.home-bottom-nav {
  position: absolute;
  left: 2.5926%;
  right: 2.5926%;
  bottom: 0.9375%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 7.7778cqw;
  padding: 0.5556cqw;
  border: max(1px, 0.3704cqw) solid #fff;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 247, 255, 0.9));
  box-shadow:
    0 0.7407cqw 0 rgba(33, 75, 143, 0.42),
    0 1.8519cqw 3.8889cqw rgba(47, 102, 232, 0.22);
  z-index: 20;
}

.home-bottom-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--game-blue-dark);
  border: 0;
  border-right: max(1px, 0.1852cqw) solid rgba(33, 75, 143, 0.24);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
  font-size: max(var(--screen-min-font-size), 2.1481cqw);
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
}

.home-bottom-nav-item:last-child {
  border-right: 0;
}

.home-bottom-nav-item--active {
  color: #fff;
  background: linear-gradient(135deg, #4a7cff, #245fdf);
  box-shadow:
    inset 0 -0.463cqw 0 rgba(0, 0, 0, 0.12),
    0 0 0 max(1px, 0.1852cqw) rgba(33, 75, 143, 0.18);
  text-shadow: 0 2px 0 rgba(33, 75, 143, 0.95);
}

.home-bottom-nav-label {
  display: block;
  max-width: 100%;
  padding: 0 1.6667cqw;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ui-glyph {
  position: relative;
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--game-pink), var(--game-blue));
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.08),
    0 5px 0 rgba(33, 75, 143, 0.46);
  flex: 0 0 auto;
}

.home-ui-glyph::before,
.home-ui-glyph::after {
  position: absolute;
  display: block;
  content: "";
}

.home-ui-glyph--avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7ab6, #42d8d4);
}

.home-ui-glyph--avatar::before {
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f9fbff;
}

.home-ui-glyph--avatar::after {
  bottom: 7px;
  width: 20px;
  height: 10px;
  border-radius: 12px 12px 5px 5px;
  background: #f9fbff;
}

.home-ui-glyph--settings::before {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#f9fbff 0 12deg, transparent 12deg 24deg);
}

.home-ui-glyph--settings::after {
  width: 13px;
  height: 13px;
  border: 5px solid #f9fbff;
  border-radius: 50%;
  background: var(--game-blue);
}

.home-ui-glyph--layout::before {
  width: 30px;
  height: 30px;
  background:
    linear-gradient(#f9fbff, #f9fbff) center / 5px 30px no-repeat,
    linear-gradient(90deg, #f9fbff, #f9fbff) center / 30px 5px no-repeat;
}

.home-ui-glyph--layout::after {
  width: 13px;
  height: 13px;
  border: 4px solid #f9fbff;
  border-radius: 4px;
  background: var(--game-blue);
  box-shadow:
    0 -16px 0 -5px #f9fbff,
    0 16px 0 -5px #f9fbff,
    -16px 0 0 -5px #f9fbff,
    16px 0 0 -5px #f9fbff;
}

.home-ui-glyph--edit::before {
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: #f9fbff;
  transform: rotate(-42deg);
}

.home-ui-glyph--edit::after {
  right: 8px;
  bottom: 9px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #f9fbff;
  transform: rotate(-42deg);
}

.home-side-tool-icon.home-ui-glyph {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(33, 75, 143, 0.58));
}

.home-side-tool-icon.home-ui-glyph--settings::before,
.home-side-tool-icon.home-ui-glyph--edit::before {
  inset: 2px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transform: none;
}

.home-side-tool-icon.home-ui-glyph--settings::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.569 215.166l-55.345-13.064c-4.032-13.946-9.495-27.27-16.376-39.732l29.85-48.303c4.57-7.397 3.452-16.946-2.688-23.086l-31.99-31.99c-6.129-6.129-15.678-7.248-23.076-2.678l-48.292 29.851c-12.462-6.882-25.785-12.344-39.732-16.377l-13.064-55.368C294.856 5.978 287.306 0 278.63 0h-45.237c-8.678 0-16.227 5.978-18.227 14.419l-13.064 55.368c-13.946 4.032-27.27 9.484-39.732 16.377l-48.303-29.872c-7.387-4.549-16.946-3.441-23.086 2.699L58.99 90.97c-6.13 6.14-7.248 15.709-2.689 23.087l29.862 48.313c-6.882 12.462-12.344 25.786-16.367 39.721l-55.378 13.065C5.978 217.165 0 224.704 0 233.392v45.226c0 8.678 5.978 16.237 14.419 18.226l55.378 13.065c4.032 13.946 9.485 27.259 16.367 39.71l-29.872 48.324c-4.549 7.398-3.441 16.957 2.699 23.098l31.979 31.979c6.14 6.14 15.709 7.257 23.087 2.688l48.323-29.872c12.463 6.882 25.786 12.344 39.722 16.366l13.064 55.366c2 8.463 9.549 14.431 18.227 14.431h45.237c8.677 0 16.226-5.968 18.226-14.431l13.064-55.366c13.937-4.021 27.259-9.484 39.712-16.366l48.312 29.861c7.398 4.57 16.947 3.452 23.087-2.688l31.989-31.99c6.13-6.129 7.248-15.688 2.678-23.087l-29.861-48.302c6.893-12.452 12.345-25.774 16.377-39.721l55.366-13.065c8.463-2.001 14.42-9.539 14.42-18.226v-45.238c0-8.666-5.968-16.215-14.431-18.214zM256.006 303.103c-26.002 0-47.098-21.097-47.098-47.108s21.097-47.108 47.098-47.108c26.011 0 47.108 21.097 47.108 47.108s-21.097 47.108-47.108 47.108z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.569 215.166l-55.345-13.064c-4.032-13.946-9.495-27.27-16.376-39.732l29.85-48.303c4.57-7.397 3.452-16.946-2.688-23.086l-31.99-31.99c-6.129-6.129-15.678-7.248-23.076-2.678l-48.292 29.851c-12.462-6.882-25.785-12.344-39.732-16.377l-13.064-55.368C294.856 5.978 287.306 0 278.63 0h-45.237c-8.678 0-16.227 5.978-18.227 14.419l-13.064 55.368c-13.946 4.032-27.27 9.484-39.732 16.377l-48.303-29.872c-7.387-4.549-16.946-3.441-23.086 2.699L58.99 90.97c-6.13 6.14-7.248 15.709-2.689 23.087l29.862 48.313c-6.882 12.462-12.344 25.786-16.367 39.721l-55.378 13.065C5.978 217.165 0 224.704 0 233.392v45.226c0 8.678 5.978 16.237 14.419 18.226l55.378 13.065c4.032 13.946 9.485 27.259 16.367 39.71l-29.872 48.324c-4.549 7.398-3.441 16.957 2.699 23.098l31.979 31.979c6.14 6.14 15.709 7.257 23.087 2.688l48.323-29.872c12.463 6.882 25.786 12.344 39.722 16.366l13.064 55.366c2 8.463 9.549 14.431 18.227 14.431h45.237c8.677 0 16.226-5.968 18.226-14.431l13.064-55.366c13.937-4.021 27.259-9.484 39.712-16.366l48.312 29.861c7.398 4.57 16.947 3.452 23.087-2.688l31.989-31.99c6.13-6.129 7.248-15.688 2.678-23.087l-29.861-48.302c6.893-12.452 12.345-25.774 16.377-39.721l55.366-13.065c8.463-2.001 14.42-9.539 14.42-18.226v-45.238c0-8.666-5.968-16.215-14.431-18.214zM256.006 303.103c-26.002 0-47.098-21.097-47.098-47.108s21.097-47.108 47.098-47.108c26.011 0 47.108 21.097 47.108 47.108s-21.097 47.108-47.108 47.108z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-side-tool-icon.home-ui-glyph--settings::after {
  display: none;
}

.home-side-tool-icon.home-ui-glyph--layout::before {
  inset: 1px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 68 22H58v20h20V32l22 18-22 18V58H58v20h10L50 100 32 78h10V58H22v10L0 50l22-18v10h20V22H32Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 68 22H58v20h20V32l22 18-22 18V58H58v20h10L50 100 32 78h10V58H22v10L0 50l22-18v10h20V22H32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-side-tool-icon.home-ui-glyph--layout::after {
  display: none;
}

.home-side-tool-icon.home-ui-glyph--edit::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504.262 66.75L445.226 7.706c-10.291-10.284-26.938-10.267-37.222 0l-38.278 38.278 96.282 96.266 38.254-38.295c10.275-10.283 10.292-26.938 0-37.205zM32.815 382.921L0.025 512l129.055-32.83 319.398-319.431-96.249-96.265L32.815 382.921zM93.179 404.792l-21.871-21.871 278.289-278.289 21.887 21.887L93.179 404.792z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504.262 66.75L445.226 7.706c-10.291-10.284-26.938-10.267-37.222 0l-38.278 38.278 96.282 96.266 38.254-38.295c10.275-10.283 10.292-26.938 0-37.205zM32.815 382.921L0.025 512l129.055-32.83 319.398-319.431-96.249-96.265L32.815 382.921zM93.179 404.792l-21.871-21.871 278.289-278.289 21.887 21.887L93.179 404.792z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-side-tool-icon.home-ui-glyph--edit::after {
  display: none;
}

.home-ui-glyph--home::before {
  top: 9px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f9fbff;
  transform: rotate(45deg);
}

.home-ui-glyph--home::after {
  bottom: 7px;
  width: 19px;
  height: 14px;
  border-radius: 3px;
  background: #f9fbff;
}

.home-ui-glyph--formation::before {
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f9fbff;
  box-shadow: -10px 7px 0 rgba(249, 251, 255, 0.72), 10px 7px 0 rgba(249, 251, 255, 0.72);
}

.home-ui-glyph--formation::after {
  bottom: 7px;
  width: 26px;
  height: 9px;
  border-radius: 999px;
  background: #f9fbff;
}

.home-ui-glyph--story::before {
  width: 24px;
  height: 18px;
  border: 3px solid #f9fbff;
  border-top-width: 5px;
  border-radius: 4px;
}

.home-ui-glyph--story::after {
  width: 2px;
  height: 18px;
  background: #f9fbff;
}

.home-ui-glyph--gacha::before {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #f9fbff;
  transform: rotate(45deg) scale(0.72);
}

.home-ui-glyph--gacha::after {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: rgba(249, 251, 255, 0.85);
  box-shadow: 0 9px 0 rgba(249, 251, 255, 0.65), 0 -9px 0 rgba(249, 251, 255, 0.65);
}

.home-ui-glyph--collection::before {
  width: 18px;
  height: 23px;
  border: 3px solid #f9fbff;
  border-radius: 5px;
  background: rgba(249, 251, 255, 0.14);
  transform: rotate(-7deg);
}

.home-ui-glyph--collection::after {
  width: 18px;
  height: 23px;
  border: 3px solid rgba(249, 251, 255, 0.7);
  border-radius: 5px;
  transform: translate(7px, -2px) rotate(8deg);
}

.home-ui-glyph--battle {
  border-radius: 12px;
  background: linear-gradient(135deg, #42d8d4, #ff66a8 62%, #2f66e8);
}

.home-ui-glyph--battle::before,
.home-ui-glyph--battle::after {
  width: 25px;
  height: 5px;
  border-radius: 999px;
  background: #f9fbff;
  box-shadow: 10px 0 0 -2px rgba(249, 251, 255, 0.92);
}

.home-ui-glyph--battle::before {
  transform: rotate(45deg);
}

.home-ui-glyph--battle::after {
  transform: rotate(-45deg);
}

.home-editable-part {
  touch-action: none;
}

.home-editable-part--selected {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent-2);
  font-size: max(var(--screen-min-font-size), 0.78rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 0.95;
}

p {
  color: var(--muted);
  line-height: 1.8;
}

.secondary-action {
  margin-top: 24px;
  padding: 14px 18px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.home-ui-skin-actions {
  position: absolute;
  left: 28px;
  bottom: 156px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  width: min(760px, calc(100% - 56px));
  z-index: 30;
}

.home-ui-skin-actions .secondary-action {
  margin-top: 0;
}

.home-workspace-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  min-width: 0;
  min-height: 154px;
  padding: 24px 30px;
  color: var(--game-blue-dark);
  border: 4px solid #fff;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(47, 102, 232, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.94);
  background-size: 20px 20px;
  box-shadow:
    6px 7px 0 rgba(33, 75, 143, 0.5),
    inset 0 0 0 2px rgba(47, 102, 232, 0.28);
  cursor: pointer;
  text-align: left;
}

.home-ui-layer-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.0185cqw;
  width: min(760px, 100%);
  max-height: 42.5926cqw;
  min-height: 0;
  padding: 1.4815cqw;
  overflow: hidden;
  color: var(--game-blue-dark);
  border: max(2px, 0.3704cqw) solid #fff;
  border-radius: 2.2222cqw;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0.5556cqw 0.6481cqw 0 rgba(33, 75, 143, 0.36),
    inset 0 0 0 max(1px, 0.1852cqw) rgba(47, 102, 232, 0.2);
}

.home-ui-layer-panel-title {
  margin: 0;
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 1.3889cqw);
  font-weight: 900;
  letter-spacing: 0;
}

.home-ui-layer-list {
  display: grid;
  gap: 0.7407cqw;
  min-height: 0;
  max-height: 32.2222cqw;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.7407cqw;
}

.home-ui-layer-category-title {
  margin-top: 0.463cqw;
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 1.0185cqw);
  font-weight: 900;
}

.home-ui-layer-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3704cqw 0.9259cqw;
  align-items: center;
  min-height: 5.7407cqw;
  padding: 0.9259cqw 1.1111cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.1852cqw) solid rgba(33, 75, 143, 0.22);
  border-radius: 1.4815cqw;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  text-align: left;
}

.home-ui-layer-item--selected {
  border-color: var(--game-blue);
  background: linear-gradient(135deg, rgba(47, 102, 232, 0.16), rgba(66, 216, 212, 0.14));
  box-shadow: inset 0 0 0 max(1px, 0.1852cqw) rgba(47, 102, 232, 0.14);
}

.home-ui-layer-item--hidden {
  opacity: 0.62;
}

.home-ui-layer-item-label {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ui-layer-item-detail {
  overflow: hidden;
  color: #5872a7;
  font-size: max(var(--screen-min-font-size), 1.0185cqw);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ui-layer-item-state {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-width: 4.6296cqw;
  padding: 0.5556cqw 0.8333cqw;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #42d8d4, #2f66e8);
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
  text-align: center;
}

.home-ui-layer-item--hidden .home-ui-layer-item-state {
  background: linear-gradient(135deg, #9aa9c9, #65779c);
}

.home-ui-policy-summary {
  grid-column: 1 / -1;
  padding: 0.7407cqw 1.1111cqw;
  color: #31518f;
  border: max(1px, 0.1852cqw) solid rgba(47, 102, 232, 0.16);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.7);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 900;
}

.home-ui-position-controls button:disabled,
.home-ui-position-controls input:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.home-workspace-card::before {
  position: absolute;
  top: -19px;
  left: 50%;
  padding: 0.3704cqw 2.2222cqw;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--game-pink), #ef3f94);
  box-shadow: 3px 4px 0 rgba(33, 75, 143, 0.42);
  content: "MISSION";
  font-size: max(var(--screen-min-font-size), 0.8333cqw);
  font-weight: 900;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.home-workspace-icon {
  display: grid;
  width: 6.6667cqw;
  height: 6.6667cqw;
  place-items: center;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 46%),
    linear-gradient(135deg, #38d6c8, #7651ff);
}

.home-workspace-copy {
  display: grid;
  gap: 0.463cqw;
}

.home-workspace-copy strong {
  font-size: max(var(--screen-min-font-size), 1.9444cqw);
  line-height: 1.05;
}

.home-workspace-copy span {
  color: var(--muted);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 700;
  line-height: 1.25;
}

.home-ui-skin-draft-status {
  flex-basis: 100%;
  margin: 0;
  padding: 0.9259cqw 1.2963cqw;
  color: var(--text);
  border: max(1px, 0.0926cqw) solid rgba(47, 208, 200, 0.28);
  border-radius: 1.2963cqw;
  background: rgba(47, 208, 200, 0.1);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
  font-weight: 800;
  line-height: 1.45;
}

.home-ui-position-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9259cqw;
  align-items: center;
  flex-basis: 100%;
  padding: 1.1111cqw;
  border: max(1px, 0.0926cqw) solid rgba(255, 255, 255, 0.14);
  border-radius: 1.2963cqw;
  background: rgba(255, 255, 255, 0.06);
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
}

.home-ui-position-field {
  display: inline-flex;
  gap: 0.7407cqw;
  align-items: center;
  color: var(--text);
  font-weight: 800;
}

.home-ui-position-field input {
  width: 7.7778cqw;
  min-height: 3.7037cqw;
  padding: 0.7407cqw 0.9259cqw;
  color: var(--text);
  border: max(1px, 0.0926cqw) solid rgba(255, 255, 255, 0.18);
  border-radius: 0.9259cqw;
  background: rgba(7, 9, 16, 0.52);
  font: inherit;
}

.home-ui-position-stepper {
  display: inline-flex;
  gap: 0.5556cqw;
}

.home-ui-position-step {
  min-width: 3.7037cqw;
  min-height: 3.7037cqw;
  padding: 0.7407cqw 0.9259cqw;
}

.primary-action,
.ghost-action {
  min-height: 3.7037cqw;
  padding: 0.8333cqw 1.2963cqw;
  border-radius: 1.2963cqw;
  cursor: pointer;
  font-weight: 800;
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
}

.primary-action {
  color: #120b08;
  border: 0;
  background: linear-gradient(135deg, var(--accent-2), #f9d37a);
  box-shadow: 0 1.2963cqw 2.7778cqw rgba(47, 208, 200, 0.2);
}

.ghost-action {
  color: var(--text);
  border: max(1px, 0.0926cqw) solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.home-profile-panel {
  position: absolute;
  top: 112px;
  left: 80px;
  z-index: 80;
  display: grid;
  width: 600px;
  gap: 18px;
  padding: 26px;
  color: var(--game-blue-dark);
  border: 4px solid #fff;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(222, 244, 255, 0.92)),
    linear-gradient(135deg, rgba(255, 102, 168, 0.2), rgba(66, 216, 212, 0.22));
  box-shadow:
    8px 10px 0 rgba(33, 75, 143, 0.35),
    inset 0 0 0 2px rgba(47, 102, 232, 0.2);
}

.home-profile-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.home-profile-panel-eyebrow {
  margin: 0 0 6px;
  color: #ff5aa6;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.home-profile-panel h2,
.home-profile-panel h3,
.home-profile-panel dl,
.home-profile-panel p {
  margin: 0;
}

.home-profile-panel h2 {
  font-size: 42px;
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(92, 182, 255, 0.32);
}

.home-profile-panel-close {
  flex: 0 0 auto;
  min-width: 104px;
  padding: 12px 18px;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #3476ff, #6d79ff);
  box-shadow: 4px 5px 0 rgba(33, 75, 143, 0.36);
  font-size: 20px;
  font-weight: 900;
}

.home-profile-panel-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 2px solid rgba(47, 102, 232, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
}

.home-profile-panel-section h3 {
  color: #ff5aa6;
  font-size: 22px;
  line-height: 1.2;
}

.home-profile-panel-list {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 18px;
  align-items: baseline;
}

.home-profile-panel-list dt {
  color: rgba(33, 75, 143, 0.68);
  font-size: 18px;
  font-weight: 900;
}

.home-profile-panel-list dd {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
}

.home-profile-panel-comment {
  padding: 14px 16px;
  color: rgba(33, 75, 143, 0.82);
  border-radius: 16px;
  background: rgba(92, 182, 255, 0.14);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.home-profile-access-guide {
  border-width: 3px;
  background: rgba(255, 255, 255, 0.82);
}

.home-profile-access-guide h3 {
  color: var(--game-blue-dark);
}

.home-profile-access-guide__body,
.home-profile-access-guide__next {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}

.home-profile-access-guide__body {
  color: rgba(33, 75, 143, 0.84);
}

.home-profile-access-guide__next {
  padding: 12px 14px;
  border-radius: 16px;
}

.home-profile-access-guide--warning {
  border-color: rgba(255, 90, 166, 0.72);
  box-shadow: inset 0 0 0 2px rgba(255, 90, 166, 0.12);
}

.home-profile-access-guide--warning .home-profile-access-guide__next {
  color: #9b1850;
  background: rgba(255, 90, 166, 0.16);
}

.home-profile-access-guide--ready {
  border-color: rgba(42, 198, 172, 0.72);
  box-shadow: inset 0 0 0 2px rgba(42, 198, 172, 0.12);
}

.home-profile-access-guide--ready .home-profile-access-guide__next {
  color: #126f5f;
  background: rgba(42, 198, 172, 0.16);
}

.home-profile-access-guide--notice .home-profile-access-guide__next {
  color: #214b8f;
  background: rgba(92, 182, 255, 0.16);
}

.home-profile-operations-list {
  display: grid;
  gap: 12px;
}

.home-profile-operation-block {
  display: grid;
  gap: 10px;
}

.home-profile-operation-block__title {
  color: var(--game-blue-dark);
  font-size: 18px;
  font-weight: 900;
}

.home-profile-operation-block__empty {
  color: rgba(33, 75, 143, 0.62);
  font-size: 17px;
  font-weight: 800;
}

.home-profile-operation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
  border: 2px solid rgba(47, 102, 232, 0.16);
  border-radius: 16px;
  background: rgba(230, 247, 255, 0.76);
}

.home-profile-operation-item__title {
  color: var(--game-blue-dark);
  font-size: 19px;
  font-weight: 900;
}

.home-profile-operation-item__detail,
.home-profile-operation-item__description {
  color: rgba(33, 75, 143, 0.72);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.home-profile-operation-item__title,
.home-profile-operation-item__detail,
.home-profile-operation-item__description {
  grid-column: 1;
}

.home-profile-operation-item__actions {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  gap: 8px;
}

.home-profile-operation-item__action {
  min-width: 104px;
  min-height: 44px;
  padding: 0 18px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #35d0c5 0%, #4f7cff 58%, #ff65aa 100%);
  box-shadow: 0 5px 0 rgba(28, 62, 133, 0.28);
  font-size: 16px;
  font-weight: 900;
}

.home-profile-operation-item__action:disabled {
  color: rgba(33, 75, 143, 0.58);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: none;
}

.home-profile-auth-section {
  gap: 16px;
}

.home-profile-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-profile-auth-tab,
.home-profile-auth-submit {
  border: 3px solid #fff;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 4px 5px 0 rgba(33, 75, 143, 0.28);
}

.home-profile-auth-tab {
  padding: 12px 16px;
  color: var(--game-blue-dark);
  background: rgba(230, 247, 255, 0.9);
  font-size: 20px;
}

.home-profile-auth-tab[data-active="true"] {
  color: #fff;
  background: linear-gradient(135deg, #3476ff, #6d79ff);
}

.home-profile-auth-form {
  display: grid;
  gap: 14px;
}

.home-profile-auth-field {
  display: grid;
  gap: 6px;
  color: rgba(33, 75, 143, 0.72);
  font-size: 17px;
  font-weight: 900;
}

.home-profile-auth-input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  color: var(--game-blue-dark);
  border: 2px solid rgba(47, 102, 232, 0.25);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-sizing: border-box;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
}

.home-profile-auth-input:focus {
  border-color: #3476ff;
  outline: 4px solid rgba(92, 182, 255, 0.28);
}

.home-profile-auth-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-profile-auth-submit {
  justify-self: start;
  min-height: 54px;
  padding: 0 24px;
  color: #fff;
  background: linear-gradient(135deg, #3476ff, #6d79ff);
  font-size: 20px;
}

.home-profile-auth-submit:disabled {
  opacity: 0.62;
}

.home-profile-auth-submit--secondary {
  color: var(--game-blue-dark);
  background: linear-gradient(135deg, #fff, #dff6ff);
}

.home-profile-auth-message {
  min-height: 24px;
  color: rgba(33, 75, 143, 0.76);
  font-size: 17px;
  font-weight: 900;
}

.home-profile-auth-message[data-status="success"] {
  color: #16895f;
}

.home-profile-auth-message[data-status="error"] {
  color: #d82768;
}

.home-profile-members-section {
  gap: 16px;
}

.home-profile-members-list {
  display: grid;
  gap: 10px;
}

.home-profile-members-capacity {
  margin: 0;
  padding: 10px 14px;
  color: var(--game-blue-dark);
  border: 2px solid rgba(47, 102, 232, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  font-weight: 900;
}

.home-profile-members-empty {
  color: rgba(33, 75, 143, 0.62);
  font-size: 17px;
  font-weight: 800;
}

.home-profile-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border: 2px solid rgba(47, 102, 232, 0.16);
  border-radius: 16px;
  background: rgba(230, 247, 255, 0.76);
}

.home-profile-member-row__user {
  color: var(--game-blue-dark);
  font-size: 18px;
  font-weight: 900;
}

.home-profile-member-row__meta {
  color: rgba(33, 75, 143, 0.72);
  font-size: 15px;
  font-weight: 900;
}

.home-profile-member-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto;
  gap: 12px;
  align-items: end;
}

.home-profile-member-invite-form .home-profile-auth-field {
  min-width: 0;
}

.home-profile-member-submit,
.home-profile-member-accept {
  justify-self: stretch;
}

.home-profile-member-role {
  min-height: 44px;
  padding: 0 14px;
  color: var(--game-blue-dark);
  border: 2px solid rgba(47, 102, 232, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  font-weight: 900;
}

.home-profile-member-remove {
  min-height: 38px;
  padding: 0 12px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5e9d, #5c7cff);
  font-size: 14px;
  font-weight: 900;
}

.home-profile-member-remove:disabled {
  opacity: 0.58;
}

.home-profile-member-activity {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 2px solid rgba(47, 102, 232, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
}

.home-profile-member-activity h4 {
  margin: 0;
  color: #ff5e9d;
  font-size: 15px;
  font-weight: 1000;
}

.home-profile-member-activity-list {
  display: grid;
  gap: 6px;
}

.home-profile-member-activity-row,
.home-profile-member-activity-empty {
  margin: 0;
  color: rgba(33, 75, 143, 0.74);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
}

.battle-slot-button {
  position: absolute;
  right: 28px;
  bottom: 156px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2963cqw;
  min-width: 32.2222cqw;
  min-height: 15.1852cqw;
  padding: 2.7778cqw 4.8148cqw;
  color: #fff;
  border: max(1px, 0.4630cqw) solid #fff;
  border-radius: 2.2222cqw;
  background: linear-gradient(135deg, #ff66a8, #ef3f94 58%, #7f56ff);
  box-shadow:
    0.6481cqw 0.7407cqw 0 rgba(33, 75, 143, 0.58),
    0 1.6667cqw 5cqw rgba(255, 102, 168, 0.32);
  cursor: pointer;
  font-weight: 900;
  font-size: max(var(--screen-min-font-size), 3.3778cqw);
  letter-spacing: 0;
  touch-action: none;
  user-select: none;
  z-index: 24;
}

.battle-slot-button::before {
  position: absolute;
  inset: -1.1111cqw;
  z-index: -1;
  border-radius: 2.7778cqw;
  background:
    linear-gradient(135deg, rgba(66, 216, 212, 0.95), rgba(255, 214, 90, 0.95));
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  content: "";
}

.battle-slot-button::after {
  display: none;
}

.battle-slot-button-icon {
  width: 7.0370cqw;
  height: 7.0370cqw;
  z-index: 1;
}

.battle-slot-button-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.battle-slot-button--selected {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.battle-slot-button--image {
  color: transparent;
}

.asset-picker-panel {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 292px;
  max-width: 780px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background: rgba(7, 9, 16, 0.88);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(20px);
  z-index: 40;
}

.asset-picker-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.asset-picker-upload {
  margin: 0 0 16px;
}

.asset-picker-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  font-weight: 700;
}

.asset-picker-upload input {
  max-width: 220px;
}

.asset-picker-header h2 {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
}

.asset-picker-close {
  padding: 10px 14px;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.asset-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.asset-picker-card {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  padding: 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(47, 208, 200, 0.2), rgba(241, 90, 56, 0.16));
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.asset-picker-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  pointer-events: none;
}

.asset-picker-card__name {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
}

.asset-picker-empty {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 720px) {
  .battle-screen {
    padding: min(3.3333vw, 1.875dvh);
  }
}

.content-editor-screen .screen-shell__content {
  gap: 3.6cqw;
  padding: 1cqw 1.4cqw 15cqw;
}

.content-editor-header {
  padding-top: 2cqw;
}

.content-editor-header .screen-shell__lead {
  max-width: none;
  font-size: max(var(--screen-min-font-size), 2.4cqw);
}

.content-editor-windows {
  display: grid;
  gap: 3.2cqw;
}

.content-editor-safety {
  display: grid;
  gap: 1.2cqw;
  padding: 2.6cqw 3cqw;
  border-color: rgba(62, 202, 205, .44);
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(204, 244, 255, .74));
}

.content-editor-safety__title {
  margin: 0;
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 2.9cqw);
  font-weight: 1000;
}

.content-editor-safety__body {
  margin: 0;
  color: rgba(16, 55, 120, .82);
  font-size: max(var(--screen-min-font-size), 2.45cqw);
  font-weight: 850;
  line-height: 1.55;
}

.content-editor-window {
  display: grid;
  gap: 2.4cqw;
  padding: 3cqw;
  border-width: max(1px, .34cqw);
  border-radius: 2.6cqw;
}

.content-editor-window__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
}

.content-editor-window__titlebar .screen-panel__title {
  font-size: max(var(--screen-min-font-size), 3.2cqw);
}

.content-editor-window__badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .8cqw 1.8cqw;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.95cqw);
  font-weight: 900;
}

.content-editor-window__recovery {
  margin: 0;
  color: rgba(16, 55, 120, .72);
  font-size: max(var(--screen-min-font-size), 2.2cqw);
  font-weight: 850;
  line-height: 1.55;
}

.content-editor-window__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.2cqw;
  margin-right: .8cqw;
  border-radius: 999px;
  padding: .45cqw 1.2cqw;
  background: rgba(51, 125, 238, .14);
  color: var(--game-blue);
  font-size: max(var(--screen-min-font-size), 1.8cqw);
  font-weight: 1000;
}

.content-editor-window__next-step {
  display: inline;
}

.content-editor-window__description {
  margin: 0;
  color: rgba(16, 55, 120, .76);
  font-size: max(var(--screen-min-font-size), 2.85cqw);
  font-weight: 800;
  line-height: 1.6;
}

.content-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6cqw;
}

.content-editor-member-list,
.content-editor-card-list,
.content-editor-event-list,
.content-editor-login-bonus-list {
  display: grid;
  gap: 1cqw;
  max-height: 28cqw;
  overflow: auto;
  padding-right: .8cqw;
}

.content-editor-member-list__item,
.content-editor-card-list__item,
.content-editor-event-list__item,
.content-editor-login-bonus-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2cqw;
  align-items: center;
  width: 100%;
  border: max(1px, .22cqw) solid rgba(33, 75, 143, .22);
  border-radius: 999px;
  padding: 1.2cqw 1.8cqw;
  background: rgba(255, 255, 255, .72);
  color: var(--game-blue-dark);
  text-align: left;
}

.content-editor-member-list__item--selected,
.content-editor-card-list__item--selected,
.content-editor-event-list__item--selected,
.content-editor-login-bonus-list__item--selected {
  border-color: rgba(255, 91, 166, .75);
  background: linear-gradient(135deg, rgba(255, 91, 166, .18), rgba(51, 125, 238, .2));
}

.content-editor-member-list__name,
.content-editor-card-list__name,
.content-editor-event-list__name,
.content-editor-login-bonus-list__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-member-list__meta,
.content-editor-card-list__meta,
.content-editor-event-list__meta,
.content-editor-login-bonus-list__meta {
  color: rgba(16, 55, 120, .72);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
}

.content-editor-member-actions,
.content-editor-card-actions,
.content-editor-event-actions,
.content-editor-login-bonus-actions,
.content-editor-system-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
}

.content-editor-story-list {
  display: grid;
  gap: 1cqw;
  max-height: 24cqw;
  overflow: auto;
  padding-right: .8cqw;
}

.content-editor-story-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2cqw;
  align-items: center;
  width: 100%;
  border: max(1px, .22cqw) solid rgba(33, 75, 143, .22);
  border-radius: 1.8cqw;
  padding: 1.2cqw 1.8cqw;
  background: rgba(255, 255, 255, .72);
  color: var(--game-blue-dark);
  text-align: left;
}

.content-editor-story-list__item--selected {
  border-color: rgba(255, 91, 166, .75);
  background: linear-gradient(135deg, rgba(255, 91, 166, .16), rgba(51, 125, 238, .24));
}

.content-editor-story-list__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-story-list__meta {
  color: rgba(16, 55, 120, .72);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
}

.content-editor-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
}

.content-editor-gacha-list {
  display: grid;
  gap: 1cqw;
  max-height: 24cqw;
  overflow: auto;
  padding-right: .8cqw;
}

.content-editor-gacha-list__item {
  display: grid;
  gap: .45cqw;
  width: 100%;
  border: max(1px, .22cqw) solid rgba(33, 75, 143, .22);
  border-radius: 1.8cqw;
  padding: 1.2cqw 1.8cqw;
  background: rgba(255, 255, 255, .72);
  color: var(--game-blue-dark);
  text-align: left;
}

.content-editor-gacha-list__item--selected {
  border-color: rgba(255, 91, 166, .75);
  background: linear-gradient(135deg, rgba(74, 115, 242, .92), rgba(243, 90, 169, .84));
  color: #fff;
}

.content-editor-gacha-list__name {
  overflow: hidden;
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-gacha-list__meta {
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
  opacity: .78;
}

.content-editor-gacha-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
}

.content-editor-list-empty {
  margin: 0;
  padding: 1.2cqw 1.8cqw;
  border-radius: 1.8cqw;
  background: rgba(255, 255, 255, .62);
  color: rgba(16, 55, 120, .7);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 900;
}

.content-editor-speech-list {
  display: grid;
  gap: 1.4cqw;
  max-height: 36cqw;
  overflow: auto;
  padding: 1.8cqw;
  border: max(1px, .22cqw) solid rgba(33, 75, 143, .2);
  border-radius: 2cqw;
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(203, 234, 255, .58));
}

.content-editor-speech-list__title {
  margin: 0;
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 2.45cqw);
  font-weight: 1000;
}

.content-editor-speech-list__group {
  display: grid;
  gap: .8cqw;
}

.content-editor-speech-list__group-label {
  color: var(--game-blue-900);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 1000;
}

.content-editor-speech-list__items {
  display: grid;
  gap: .7cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-editor-speech-list__item {
  display: grid;
  grid-template-columns: minmax(9cqw, auto) minmax(0, 1fr);
  gap: 1cqw;
  align-items: start;
  border-radius: 1.3cqw;
  padding: .9cqw 1.2cqw;
  background: rgba(255, 255, 255, .7);
  color: rgba(16, 55, 120, .86);
  font-size: max(var(--screen-min-font-size), 2.15cqw);
  font-weight: 850;
  line-height: 1.45;
}

.content-editor-speech-list__key {
  color: var(--game-blue);
  font-weight: 1000;
  overflow-wrap: anywhere;
}

.content-editor-speech-list__text {
  overflow-wrap: anywhere;
}

.content-editor-speech-list__empty {
  margin: 0;
  color: rgba(16, 55, 120, .68);
  font-size: max(var(--screen-min-font-size), 2.1cqw);
  font-weight: 900;
}

.content-editor-field {
  display: grid;
  gap: .8cqw;
  min-width: 0;
}

.content-editor-field--wide {
  grid-column: 1 / -1;
}

.content-editor-skill-effect-add {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 18cqw;
  margin: .4cqw 0 1.2cqw;
}

.content-editor-skill-effect-summary {
  display: grid;
  grid-column: 1 / -1;
  gap: .55cqw;
  padding: 1.4cqw 1.6cqw;
  border: max(1px, .22cqw) solid rgba(51, 125, 238, .3);
  border-radius: 1.6cqw;
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(203, 234, 255, .66));
  box-shadow: 0 .45cqw 0 rgba(33, 75, 143, .14);
  color: var(--game-blue-dark);
}

.content-editor-skill-effect-summary__label {
  color: var(--game-pink);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 1000;
}

.content-editor-skill-effect-summary__body {
  margin: 0;
  color: var(--game-blue-900);
  font-size: max(var(--screen-min-font-size), 2.35cqw);
  font-weight: 950;
  line-height: 1.45;
}

.content-editor-skill-effect-summary__note {
  margin: 0;
  color: rgba(16, 55, 120, .66);
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 850;
  line-height: 1.45;
}

.content-editor-field__label {
  color: var(--game-blue-900);
  font-size: max(var(--screen-min-font-size), 2.05cqw);
  font-weight: 900;
}

.content-editor-field__input {
  width: 100%;
  min-height: 5.6cqw;
  border: max(1px, .24cqw) solid rgba(33, 75, 143, .24);
  border-radius: 1.6cqw;
  padding: 1.2cqw 1.4cqw;
  background: rgba(255, 255, 255, .82);
  color: var(--game-blue-dark);
  font: inherit;
  font-size: max(var(--screen-min-font-size), 2.3cqw);
  font-weight: 800;
}

.content-editor-field__input--textarea {
  min-height: 14cqw;
  resize: vertical;
  line-height: 1.55;
}

.content-editor-asset-field {
  display: grid;
  gap: .8cqw;
  min-width: 0;
}

.content-editor-asset-field__select {
  min-height: 5cqw;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(204, 244, 255, .74));
}

.content-editor-card-selector {
  gap: 1.2cqw;
  padding: 1.6cqw;
  border: max(1px, .22cqw) solid rgba(33, 75, 143, .22);
  border-radius: 1.8cqw;
  background: rgba(255, 255, 255, .64);
}

.content-editor-card-selector__header,
.content-editor-card-selector__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}

.content-editor-card-selector__count {
  border-radius: 999px;
  padding: .45cqw 1.2cqw;
  background: rgba(51, 125, 238, .14);
  color: var(--game-blue);
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 1000;
}

.content-editor-card-selector__description,
.content-editor-card-selector__empty {
  margin: 0;
  color: rgba(16, 55, 120, .68);
  font-size: max(var(--screen-min-font-size), 1.9cqw);
  font-weight: 850;
  line-height: 1.45;
}

.content-editor-card-selector__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9cqw;
  max-height: 30cqw;
  overflow: auto;
  padding-right: .6cqw;
}

.content-editor-card-selector__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35cqw .8cqw;
  align-items: center;
  min-width: 0;
  border: max(1px, .18cqw) solid rgba(33, 75, 143, .18);
  border-radius: 1.3cqw;
  padding: .9cqw 1cqw;
  background: rgba(255, 255, 255, .78);
}

.content-editor-card-selector__option input {
  grid-row: span 2;
  width: max(8px, 2.4cqw);
  height: max(8px, 2.4cqw);
  accent-color: var(--game-blue);
}

.content-editor-card-selector__card,
.content-editor-card-selector__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-editor-card-selector__card {
  color: var(--game-blue-dark);
  font-size: max(var(--screen-min-font-size), 2cqw);
  font-weight: 950;
}

.content-editor-card-selector__meta {
  color: rgba(16, 55, 120, .66);
  font-size: max(var(--screen-min-font-size), 1.75cqw);
  font-weight: 850;
}

.content-editor-card-selector__tool {
  min-height: 4.4cqw;
  border: 0;
  border-radius: 999px;
  padding: .8cqw 1.4cqw;
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 1000;
}

.content-editor-structured-list {
  gap: 1.2cqw;
  padding: 1.6cqw;
  border: max(1px, .22cqw) solid rgba(33, 75, 143, .22);
  border-radius: 1.8cqw;
  background: rgba(255, 255, 255, .66);
}

.content-editor-structured-list__title,
.content-editor-structured-list__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}

.content-editor-structured-list__rows {
  display: grid;
  gap: 1cqw;
  max-height: 38cqw;
  overflow: auto;
  padding-right: .6cqw;
}

.content-editor-structured-list__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: .9cqw;
  align-items: end;
  min-width: 0;
  border: max(1px, .18cqw) solid rgba(33, 75, 143, .16);
  border-radius: 1.35cqw;
  padding: 1cqw;
  background: rgba(255, 255, 255, .78);
}

.content-editor-structured-list__cell {
  display: grid;
  gap: .45cqw;
  min-width: 0;
}

.content-editor-structured-list__cell-label {
  color: rgba(16, 55, 120, .78);
  font-size: max(var(--screen-min-font-size), 1.75cqw);
  font-weight: 900;
}

.content-editor-structured-list__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45cqw;
  justify-content: flex-end;
}

.content-editor-structured-list__add,
.content-editor-structured-list__move,
.content-editor-structured-list__remove {
  min-height: 4.4cqw;
  border: 0;
  border-radius: 999px;
  padding: .8cqw 1.35cqw;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 1.85cqw);
  font-weight: 1000;
}

.content-editor-structured-list__add {
  background: linear-gradient(135deg, var(--game-blue), #6d79ff);
}

.content-editor-structured-list__move {
  background: linear-gradient(135deg, #4ac7f1, #5475f5);
}

.content-editor-structured-list__remove {
  background: linear-gradient(135deg, #ff5ba6, #ff8fbf);
}

.content-editor-action {
  align-self: flex-start;
  min-width: 20cqw;
}

@media (max-width: 760px) {
  .content-editor-form {
    grid-template-columns: 1fr;
  }

  .content-editor-card-selector__grid {
    grid-template-columns: 1fr;
  }

  .content-editor-structured-list__row {
    grid-template-columns: 1fr;
  }
}

.battle-screen .screen-shell__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1.4815cqw;
  overflow: hidden;
}

.battle-stage {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 1.1111cqw;
  color: #fff;
}

.battle-arena {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.68);
  border-radius: 2.2222cqw;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.16), transparent 19%),
    radial-gradient(circle at 72% 72%, rgba(255, 102, 168, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%),
    linear-gradient(180deg, #15213f 0%, #050817 100%);
  box-shadow:
    inset 0 -1.8519cqw 4.6296cqw rgba(0, 0, 0, 0.28),
    0 1.4815cqw 3.3333cqw rgba(33, 75, 143, 0.22);
}

.battle-arena__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 5.5556cqw 5.5556cqw;
  opacity: 0.52;
}

.battle-enemy-stage {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 42.5926cqw;
  place-items: center;
}

.battle-enemy-shadow {
  position: absolute;
  bottom: 7.4074cqw;
  width: 38.8889cqw;
  height: 5.5556cqw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  filter: blur(0.4630cqw);
}

.battle-enemy-avatar {
  width: 34.8148cqw;
  aspect-ratio: 1 / 1.2;
  border-radius: 42% 42% 24% 24%;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.98) 0 8%, transparent 9%),
    radial-gradient(ellipse at 50% 30%, var(--game-cyan) 0 24%, transparent 25%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 102, 168, 0.52));
  filter: drop-shadow(0 1.8519cqw 2.9630cqw rgba(0, 0, 0, 0.42));
}

.battle-enemy-info {
  position: absolute;
  z-index: 2;
  left: 2.0370cqw;
  right: 2.0370cqw;
  bottom: 2.0370cqw;
  display: grid;
  gap: 0.7407cqw;
  padding: 1.4815cqw;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.28);
  border-radius: 1.4815cqw;
  background: rgba(4, 8, 24, 0.64);
  backdrop-filter: blur(0.7407cqw);
}

.battle-enemy-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9259cqw;
  align-items: center;
}

.battle-unit__label,
.battle-unit__meta,
.battle-enemy-stats,
.battle-mode-chip {
  margin: 0;
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
  letter-spacing: 0;
}

.battle-unit__label {
  color: var(--game-cyan);
}

.battle-unit__name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: max(var(--screen-min-font-size), 2.0370cqw);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-mode-chip {
  padding: 0.4630cqw 1.1111cqw;
  color: var(--game-pink);
  border-radius: 999px;
  background: #fff;
}

.battle-hp {
  height: 1.2963cqw;
  overflow: hidden;
  border: max(1px, 0.1852cqw) solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.battle-hp span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--game-yellow), var(--game-pink));
}

.battle-hp--player span {
  background: linear-gradient(90deg, var(--game-cyan), var(--game-blue));
}

.battle-battlelog,
.battle-player-status {
  display: grid;
  gap: 0.7407cqw;
  padding: 1.2963cqw 1.4815cqw;
  color: var(--game-blue-dark);
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.82);
  border-radius: 1.4815cqw;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0.9259cqw 0 rgba(33, 75, 143, 0.18);
}

.battle-battlelog {
  min-height: 7.7778cqw;
  align-content: center;
  font-size: max(var(--screen-min-font-size), 1.4815cqw);
  font-weight: 900;
  line-height: 1.55;
}

.battle-battlelog p,
.battle-player-status p {
  margin: 0;
}

.battle-battlelog__headline {
  display: grid;
  gap: 0.3704cqw;
}

.battle-battlelog__list {
  display: grid;
  gap: 0.3704cqw;
  max-height: 9.2593cqw;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.battle-battlelog__item {
  padding: 0.3704cqw 0.7407cqw;
  color: rgba(11, 58, 145, 0.78);
  border-radius: 999px;
  background: rgba(47, 124, 246, 0.12);
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 800;
}

.battle-player-status {
  grid-template-columns: minmax(0, 1fr);
}

.battle-player-status .battle-unit__label {
  color: var(--game-blue);
}

.battle-player-status .battle-unit__name {
  display: block;
  margin-top: 0.3704cqw;
  color: var(--game-blue-dark);
}

.battle-footer {
  display: grid;
  gap: 1.1111cqw;
  min-height: 0;
}

.battle-party-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9259cqw;
}

.battle-party-slot,
.battle-party-empty {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 13.3333cqw;
  margin: 0;
  padding: 1.0185cqw;
  overflow: hidden;
  align-content: end;
  color: #fff;
  border: max(1px, 0.2778cqw) solid rgba(255, 255, 255, 0.68);
  border-radius: 1.2963cqw;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(47, 102, 232, 0.62), rgba(4, 8, 24, 0.94));
  box-shadow: 0 0.6481cqw 0 rgba(3, 8, 24, 0.34);
}

.battle-party-card-empty {
  opacity: 0.48;
  border-style: dashed;
}

.battle-party-index {
  position: absolute;
  top: 0.6481cqw;
  left: 0.6481cqw;
  display: grid;
  width: 2.3148cqw;
  height: 2.3148cqw;
  place-items: center;
  border-radius: 999px;
  background: rgba(3, 8, 24, 0.78);
  font-size: max(var(--screen-min-font-size), 1.1111cqw);
  font-weight: 900;
}

.battle-party-portrait {
  position: absolute;
  top: 1.6667cqw;
  left: 50%;
  width: 6.4815cqw;
  aspect-ratio: 1 / 1.25;
  border-radius: 42% 42% 24% 24%;
  background:
    radial-gradient(circle at 50% 19%, rgba(255, 255, 255, 0.88) 0 10%, transparent 11%),
    radial-gradient(ellipse at 50% 36%, var(--game-cyan) 0 28%, transparent 29%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 102, 168, 0.5));
  transform: translateX(-50%);
  opacity: 0.9;
}

.battle-party-portrait--empty {
  background: rgba(255, 255, 255, 0.18);
}

.battle-party-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.battle-party-card__role {
  color: var(--game-cyan);
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 900;
}

.battle-party-slot strong,
.battle-party-slot p {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-party-slot strong {
  font-size: max(var(--screen-min-font-size), 1.2037cqw);
}

.battle-party-slot p {
  font-size: max(var(--screen-min-font-size), 0.9259cqw);
  font-weight: 800;
}

.battle-party-card__skill {
  color: #fff;
  text-shadow: 0 max(1px, .12cqw) max(1px, .18cqw) rgba(8, 24, 62, .55);
}

.battle-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7407cqw;
}

.battle-actions .screen-action {
  width: 100%;
  min-width: 0;
  padding-inline: 0.7407cqw;
}