:root {
  color-scheme: light;
  --bg: #f4f7f5;
  --panel: #ffffff;
  --line: #d8e0dd;
  --text: #15201c;
  --muted: #66756f;
  --accent: #0f766e;
  --accent-strong: #0b5f59;
  --danger: #b42318;
  --warn: #a15c07;
  --fire: #df5a32;
  --water: #2878c2;
  --thunder: #9b7a00;
  --earth: #7c6a35;
  --none: #64748b;
  --front: #fff2ea;
  --back: #eef7ff;
  --app-vw: 100dvw;
  --app-vh: 100dvh;
  --app-rotation: 90deg;
  font-family: "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

button,
select,
input,
textarea {
  font: inherit;
}

button,
select,
input,
textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  min-height: 34px;
}

button {
  cursor: pointer;
  padding: 6px 10px;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.primary:hover {
  background: var(--accent-strong);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

select {
  padding: 5px 8px;
}

input,
textarea {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

textarea {
  min-height: 74px;
  resize: vertical;
}

.app-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 16px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}

#phaseText {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen {
  padding: 16px 0;
}

body[data-phase="title"] {
  overflow: hidden;
  background: #080a0d;
}

body[data-phase="home"] {
  overflow: hidden;
}

body[data-phase="title"] .app-shell {
  width: 100%;
  min-height: var(--app-vh);
  padding: 0;
}

body[data-phase="title"] .topbar {
  display: none;
}

.title-screen {
  min-height: var(--app-vh);
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(115deg, rgba(16, 76, 118, 0.28), transparent 31%),
    linear-gradient(245deg, rgba(190, 78, 26, 0.3), transparent 34%),
    linear-gradient(180deg, #111419 0%, #1e2326 48%, #080a0d 100%);
}

.title-stage {
  position: relative;
  width: 100%;
  min-height: var(--app-vh);
  border: 0;
  border-radius: 0;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.title-stage::before,
.title-stage::after,
.title-backdrop,
.title-lines,
.title-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.title-stage::before {
  content: "";
  z-index: -4;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 92px);
  opacity: 0.28;
  animation: titleGridDrift 16s linear infinite;
}

.title-stage::after {
  content: "";
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 8, 11, 0.86), transparent 18%, transparent 82%, rgba(6, 8, 11, 0.86)),
    linear-gradient(180deg, rgba(6, 8, 11, 0.58), transparent 36%, rgba(6, 8, 11, 0.84));
}

.title-backdrop {
  z-index: -3;
  background:
    linear-gradient(100deg, transparent 0 22%, rgba(33, 170, 255, 0.18) 42%, transparent 58%),
    linear-gradient(260deg, transparent 0 24%, rgba(255, 104, 24, 0.22) 45%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 48%);
  filter: blur(10px);
  opacity: 0.72;
  animation: titleAuraPulse 4.8s ease-in-out infinite;
}

.title-lines {
  z-index: -2;
  opacity: 0.82;
}

.title-lines::before,
.title-lines::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(92vw, 1120px);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(50, 190, 255, 0.72), rgba(255, 120, 33, 0.72), transparent);
  box-shadow: 0 0 16px rgba(255, 118, 36, 0.32), 0 0 20px rgba(49, 185, 255, 0.28);
}

.line-front::before {
  top: 38%;
  animation: titleLineSweep 3.8s ease-in-out infinite;
}

.line-front::after {
  top: 56%;
  animation: titleLineSweep 4.2s ease-in-out infinite reverse;
}

.line-back::before {
  top: 44%;
  opacity: 0.55;
  animation: titleLineSweep 5s ease-in-out infinite;
}

.line-back::after {
  top: 62%;
  opacity: 0.38;
  animation: titleLineSweep 5.4s ease-in-out infinite reverse;
}

.title-logo-wrap {
  position: relative;
  z-index: 2;
  width: min(92vw, 1080px);
  display: grid;
  place-items: center;
  animation: titleLogoEnter 900ms cubic-bezier(0.16, 1, 0.3, 1) both, titleLogoFloat 4.8s ease-in-out 900ms infinite;
}

.title-logo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 26px rgba(74, 186, 255, 0.18));
}

.touch-start {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 13dvh;
  transform: translateX(-50%);
  min-width: 168px;
  border: 1px solid rgba(237, 245, 255, 0.36);
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(3, 8, 12, 0.54);
  box-shadow: 0 0 22px rgba(255, 122, 36, 0.18), inset 0 0 16px rgba(95, 198, 255, 0.12);
  color: #f5f0d4;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0;
  animation: touchStartPulse 1.4s ease-in-out infinite;
}

.title-spark {
  position: absolute;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 206, 91, 0.94), transparent);
  opacity: 0;
  transform: rotate(18deg);
  animation: titleSparkRise 3.6s linear infinite;
}

.spark-1 { left: 9%; top: 70%; animation-delay: 0s; }
.spark-2 { left: 15%; top: 44%; animation-delay: 1.1s; background: linear-gradient(180deg, transparent, rgba(78, 198, 255, 0.9), transparent); }
.spark-3 { left: 22%; top: 62%; animation-delay: 2.4s; }
.spark-4 { left: 30%; top: 34%; animation-delay: 0.7s; background: linear-gradient(180deg, transparent, rgba(103, 224, 148, 0.78), transparent); }
.spark-5 { left: 38%; top: 72%; animation-delay: 1.8s; }
.spark-6 { left: 46%; top: 28%; animation-delay: 2.9s; background: linear-gradient(180deg, transparent, rgba(78, 198, 255, 0.9), transparent); }
.spark-7 { left: 55%; top: 74%; animation-delay: 0.4s; }
.spark-8 { left: 64%; top: 35%; animation-delay: 1.5s; }
.spark-9 { left: 72%; top: 64%; animation-delay: 2.2s; background: linear-gradient(180deg, transparent, rgba(78, 198, 255, 0.9), transparent); }
.spark-10 { left: 82%; top: 46%; animation-delay: 0.9s; }
.spark-11 { left: 89%; top: 67%; animation-delay: 2.7s; background: linear-gradient(180deg, transparent, rgba(103, 224, 148, 0.78), transparent); }
.spark-12 { left: 5%; top: 52%; animation-delay: 1.9s; }
.spark-13 { left: 26%; top: 78%; animation-delay: 3.1s; background: linear-gradient(180deg, transparent, rgba(78, 198, 255, 0.9), transparent); }
.spark-14 { left: 41%; top: 46%; animation-delay: 0.2s; }
.spark-15 { left: 59%; top: 48%; animation-delay: 2.5s; }
.spark-16 { left: 76%; top: 78%; animation-delay: 1.3s; background: linear-gradient(180deg, transparent, rgba(103, 224, 148, 0.78), transparent); }
.spark-17 { left: 93%; top: 36%; animation-delay: 3.4s; }
.spark-18 { left: 51%; top: 82%; animation-delay: 0.8s; background: linear-gradient(180deg, transparent, rgba(78, 198, 255, 0.9), transparent); }

.title-stage.leaving .title-logo-wrap {
  animation: titleLogoExit 820ms ease-in both;
}

.title-stage.leaving .touch-start {
  animation: titleStartExit 520ms ease-in both;
}

.title-stage.leaving .title-backdrop,
.title-stage.leaving .title-lines {
  animation: titleFlashOut 760ms ease-in both;
}

@keyframes titleGridDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-74px, -92px, 0); }
}

@keyframes titleAuraPulse {
  0%, 100% { opacity: 0.58; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

@keyframes titleLineSweep {
  0%, 100% { transform: translateX(-50%) scaleX(0.82); opacity: 0.35; }
  50% { transform: translateX(-50%) scaleX(1.05); opacity: 0.92; }
}

@keyframes titleLogoEnter {
  0% { opacity: 0; transform: translateY(24px) scale(0.9); filter: brightness(1.9) blur(2px); }
  62% { opacity: 1; transform: translateY(-4px) scale(1.025); filter: brightness(1.25) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes titleLogoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.008); }
}

@keyframes touchStartPulse {
  0%, 100% { opacity: 0.58; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-2px); }
}

@keyframes titleSparkRise {
  0% { opacity: 0; transform: translateY(34px) rotate(18deg) scaleY(0.5); }
  18% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-82px) rotate(18deg) scaleY(1); }
}

@keyframes titleLogoExit {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  42% { opacity: 1; transform: scale(1.035); filter: brightness(1.8); }
  100% { opacity: 0; transform: scale(1.12); filter: brightness(2.3) blur(4px); }
}

@keyframes titleStartExit {
  to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

@keyframes titleFlashOut {
  0% { opacity: 0.86; }
  55% { opacity: 1; filter: brightness(1.7); }
  100% { opacity: 0; filter: brightness(2.2); }
}

.home-grid,
.online-layout,
.profile-layout,
.room-layout {
  display: grid;
  gap: 12px;
}

.home-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-panel,
.online-card,
.profile-card,
.room-side,
.battle-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.home-panel {
  min-height: 156px;
  display: grid;
  align-content: space-between;
  gap: 16px;
}

.home-panel h2,
.online-card h3,
.profile-card h3,
.battle-table h3 {
  margin: 0;
}

.home-panel p,
.online-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.primary-panel {
  border-top: 4px solid var(--accent);
}

.profile-layout {
  grid-template-columns: minmax(240px, 0.8fr) minmax(260px, 1fr);
}

.profile-card,
.online-card,
.room-side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.profile-card.wide {
  grid-column: 1 / -1;
}

.profile-id {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 8px;
  padding: 8px;
  background: #f2fbf8;
}

.profile-id span {
  color: var(--muted);
  font-size: 12px;
}

.profile-id strong {
  font-size: 18px;
  letter-spacing: 0.03em;
}

.friend-list,
.room-list {
  display: grid;
  gap: 8px;
}

.player-row,
.room-list-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: #fbfdfc;
}

.player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.player-row strong,
.player-row small {
  display: block;
}

.player-row small,
.profile-card small,
.room-summary small,
.seat-card small {
  color: var(--muted);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 999px;
  padding: 2px 8px;
  background: #edf9f6;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill.muted {
  border-color: var(--line);
  background: #f6f8f7;
  color: var(--muted);
}

.status-pill.locked {
  border-color: rgba(161, 92, 7, 0.26);
  background: #fff8eb;
  color: var(--warn);
}

.search-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.online-layout {
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 1fr) minmax(320px, 1.2fr);
  align-items: start;
}

.online-card header,
.room-list-item header,
.battle-table header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.create-room-card label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.create-room-card label input,
.create-room-card label select,
.create-room-card label textarea {
  color: var(--text);
  font-weight: 400;
}

.room-list-item {
  display: grid;
  gap: 8px;
}

.room-list-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.room-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.room-layout {
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  align-items: start;
}

.room-summary {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  padding: 8px;
  background: #f4fbf9;
}

.team-mini-preview {
  min-height: 56px;
  display: grid;
  grid-template-columns: repeat(4, 42px);
  gap: 6px;
  align-items: center;
}

.team-mini-preview .monster-avatar {
  width: 42px;
  height: 42px;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.battle-table {
  display: grid;
  gap: 10px;
}

.seat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.seat-card {
  min-height: 128px;
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: start;
  border: 1px dashed #b8c5c0;
  border-radius: 8px;
  padding: 9px;
  background: #fbfdfc;
}

.seat-card.occupied {
  border-style: solid;
  background: #fff;
}

.seat-card.ready {
  border-color: rgba(15, 118, 110, 0.38);
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.1);
}

.hidden {
  display: none !important;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.team-layout {
  grid-template-columns: minmax(0, 1fr);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title h2 {
  margin: 0;
  margin-right: auto;
  font-size: 18px;
}

.section-title span {
  color: var(--muted);
  font-size: 13px;
}

.back-button {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.monster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  gap: 8px;
}

.monster-card,
.unit-card,
.field-unit,
.side-panel,
.log-panel,
.log-dock,
.action-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.monster-card {
  position: relative;
  min-height: 156px;
  padding: 8px;
  display: grid;
  gap: 6px;
  align-content: start;
  border-top: 4px solid var(--line);
}

.monster-card.element-fire {
  border-top-color: var(--fire);
}

.monster-card.element-water {
  border-top-color: var(--water);
}

.monster-card.element-thunder {
  border-top-color: var(--thunder);
}

.monster-card.element-earth {
  border-top-color: var(--earth);
}

.monster-card.element-none {
  border-top-color: var(--none);
}

.monster-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.16);
}

.avatar-button {
  min-height: 0;
  border: 0;
  border-radius: 12px;
  padding: 0;
  background: transparent;
  line-height: 0;
}

.avatar-button:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.26);
  outline-offset: 2px;
}

.card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
}

.card-head > div:not(.monster-avatar) {
  min-width: 0;
}

.card-head .badge {
  display: none;
}

.mobile-monster-meta {
  display: none;
}

.selected-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  width: fit-content;
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 999px;
  padding: 2px 8px;
  background: #e8f7f4;
  color: var(--accent-strong);
  font-size: 10.5px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(21, 32, 28, 0.16);
}

.monster-name {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.15;
}

.monster-summary {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.summary-group {
  min-width: 0;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 3px;
  color: var(--muted);
  font-size: 9.2px;
  line-height: 1.05;
}

.summary-group > span {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 15px;
  border-radius: 4px;
  background: #eef6f3;
  color: var(--accent-strong);
  font-size: 8px;
  font-weight: 800;
}

@media (max-width: 760px) and (orientation: portrait) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

.summary-group > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.summary-group b {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 2px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #33423d;
  font-weight: 700;
}

.monster-card .monster-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

.monster-card .stat-grid,
.monster-card .tags {
  display: none;
}

.monster-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.monster-card-actions button:only-child {
  grid-column: 1 / -1;
}

.team-dock {
  position: fixed;
  top: 92px;
  right: 14px;
  z-index: 35;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.team-tab {
  min-width: 94px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-color: rgba(15, 118, 110, 0.34);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(21, 32, 28, 0.14);
  font-weight: 800;
}

.team-tab b {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}

.team-tray-panel {
  width: min(270px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 28px rgba(21, 32, 28, 0.18);
}

.team-tray-panel #goSetup {
  width: 100%;
}

.team-icon-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 9px;
}

.team-icon-chip {
  position: relative;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  background: #f8fbfa;
  overflow: hidden;
}

.team-icon-chip .monster-avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 9px;
}

.team-icon-chip span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(21, 32, 28, 0.82);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.empty-team {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(11, 18, 16, 0.42);
}

.monster-detail-card {
  width: min(560px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  position: relative;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(21, 32, 28, 0.24);
}

.monster-detail-card header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.monster-detail-card h3,
.monster-detail-card h4 {
  margin: 0;
}

.monster-detail-card h3 {
  font-size: 20px;
}

.monster-detail-card h4 {
  font-size: 14px;
}

.detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 28px;
  padding: 3px 8px;
  font-size: 12px;
}

.detail-meta,
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.detail-meta span:not(.badge),
.detail-tags span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  background: #fbfdfc;
  color: var(--muted);
  font-size: 12px;
}

.detail-passive-list {
  display: grid;
  gap: 7px;
}

.detail-passive {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #f7fbf9;
}

.detail-passive em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.detail-skill-list {
  display: grid;
  gap: 7px;
}

.detail-skill {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fbfdfc;
  color: var(--text);
}

.detail-skill.fire {
  background: #fff1ec;
  border-color: rgba(223, 90, 50, 0.25);
}

.detail-skill.water {
  background: #edf7ff;
  border-color: rgba(40, 120, 194, 0.24);
}

.detail-skill.thunder {
  background: #fff8d7;
  border-color: rgba(155, 122, 0, 0.25);
}

.detail-skill.earth {
  background: #f7f1df;
  border-color: rgba(124, 106, 53, 0.25);
}

.detail-skill.none {
  background: #f4f6f8;
  border-color: rgba(100, 116, 139, 0.22);
}

.detail-skill small,
.detail-skill em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.role {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.monster-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  border: 2px solid rgba(21, 32, 28, 0.16);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: #f4f7f5;
  box-shadow: 0 8px 18px rgba(21, 32, 28, 0.12), inset 0 -12px 18px rgba(0, 0, 0, 0.12), inset 0 10px 18px rgba(255, 255, 255, 0.3);
}

.monster-avatar.compact {
  width: 58px;
  height: 58px;
  border-radius: 12px;
}

.monster-portrait {
  padding: 3px;
}

.monster-portrait::before,
.monster-portrait::after {
  display: none;
}

.monster-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 5px 4px rgba(21, 32, 28, 0.18));
}

.monster-portrait img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(21, 32, 28, 0.2));
}

.monster-avatar::before,
.monster-avatar::after,
.monster-avatar span,
.monster-avatar span::before,
.monster-avatar span::after {
  content: "";
  position: absolute;
  display: block;
}

.monster-avatar::after {
  inset: 4px;
  z-index: 1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.56), transparent 24%);
  pointer-events: none;
}

.monster-avatar span {
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -45%);
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid rgba(21, 32, 28, 0.18);
  box-shadow: inset 0 -8px 0 rgba(21, 32, 28, 0.08);
}

.monster-avatar span::before {
  left: 10px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #15201c;
  box-shadow: 14px 0 0 #15201c;
}

.monster-avatar span::after {
  left: 13px;
  top: 23px;
  width: 13px;
  height: 5px;
  border-radius: 0 0 999px 999px;
  border-bottom: 2px solid rgba(21, 32, 28, 0.34);
}

.monster-avatar.compact span {
  width: 27px;
  height: 27px;
}

.monster-avatar.compact span::before {
  left: 6px;
  top: 8px;
  width: 4px;
  height: 4px;
  box-shadow: 10px 0 0 #15201c;
}

.monster-avatar.compact span::after {
  left: 9px;
  top: 16px;
  width: 9px;
  height: 4px;
}

.avatar-flame {
  background: linear-gradient(145deg, #ffb15f, #df5a32);
}

.avatar-flame span {
  border-radius: 48% 48% 42% 42%;
  background: #fff1d4;
}

.avatar-flame::before {
  left: 37px;
  top: 9px;
  width: 14px;
  height: 34px;
  background: #8f2f1e;
  border-radius: 999px 999px 2px 2px;
  transform: rotate(34deg);
}

.avatar-blade {
  background: linear-gradient(145deg, #d6e0e7, #64748b);
}

.avatar-blade span {
  border-radius: 42% 42% 50% 50%;
  background: #f5f7f8;
  clip-path: polygon(50% 0, 92% 25%, 83% 92%, 50% 100%, 17% 92%, 8% 25%);
}

.avatar-blade::before,
.avatar-blade::after {
  top: 10px;
  width: 15px;
  height: 22px;
  background: #1f2937;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.avatar-blade::before {
  left: 13px;
  transform: rotate(-18deg);
}

.avatar-blade::after {
  right: 13px;
  transform: rotate(18deg);
}

.avatar-block {
  background: linear-gradient(145deg, #c2a66d, #7c6a35);
}

.avatar-block span {
  border-radius: 5px;
  background: #d8c38b;
  box-shadow: -13px 9px 0 #9a8247, 13px 9px 0 #9a8247;
}

.avatar-shield {
  background: linear-gradient(145deg, #8cc6dd, #2878c2);
}

.avatar-shield span {
  border-radius: 50% 50% 46% 46%;
  background: #cde9f6;
  box-shadow: inset 0 -12px 0 #5b9fc6;
}

.avatar-shield::before {
  left: 15px;
  top: 13px;
  width: 32px;
  height: 27px;
  border: 3px solid rgba(21, 32, 28, 0.26);
  border-radius: 50%;
}

.avatar-drop {
  background: linear-gradient(145deg, #b9e8ff, #2878c2);
}

.avatar-drop span {
  border-radius: 52% 52% 60% 60%;
  background: #d8f5ff;
  clip-path: path("M17 0 C28 10 34 19 34 27 C34 36 26 42 17 42 C8 42 0 36 0 27 C0 19 6 10 17 0 Z");
}

.avatar-mist {
  background: linear-gradient(145deg, #e9f3f2, #9fb5bf);
}

.avatar-mist span {
  border-radius: 50%;
  background: #ffffff;
  box-shadow: -16px 3px 0 rgba(255, 255, 255, 0.72), 16px 4px 0 rgba(255, 255, 255, 0.72);
}

.avatar-mist::before {
  left: 12px;
  top: 17px;
  width: 44px;
  height: 22px;
  border-top: 4px solid rgba(100, 116, 139, 0.5);
  border-radius: 50%;
}

.avatar-wisp {
  background: linear-gradient(145deg, #ffe1a5, #df5a32);
}

.avatar-wisp span {
  background: #fff7cf;
  border-radius: 50% 50% 45% 45%;
  clip-path: polygon(52% 0, 73% 25%, 95% 38%, 78% 100%, 50% 88%, 22% 100%, 5% 38%, 31% 26%);
}

.avatar-wisp::before {
  left: 21px;
  top: 6px;
  width: 20px;
  height: 30px;
  background: rgba(255, 249, 206, 0.65);
  border-radius: 50%;
}

.avatar-mud {
  background: linear-gradient(145deg, #b39162, #6f5a37);
}

.avatar-mud span {
  border-radius: 7px 7px 16px 16px;
  background: #d1b07a;
}

.avatar-mud::before {
  left: 16px;
  top: 15px;
  width: 30px;
  height: 14px;
  background: #4d3d29;
  clip-path: polygon(0 100%, 18% 0, 50% 70%, 82% 0, 100% 100%);
}

.avatar-wing {
  background: linear-gradient(145deg, #ffe88b, #9b7a00);
}

.avatar-wing span {
  width: 28px;
  height: 26px;
  border-radius: 50%;
  background: #fff4b5;
}

.avatar-wing::before,
.avatar-wing::after {
  top: 19px;
  width: 22px;
  height: 22px;
  background: #f4ca35;
  clip-path: polygon(0 50%, 100% 0, 72% 100%);
}

.avatar-wing::before {
  left: 7px;
  transform: rotate(-18deg);
}

.avatar-wing::after {
  right: 7px;
  transform: scaleX(-1) rotate(-18deg);
}

.avatar-spark {
  background: linear-gradient(145deg, #fff3a6, #9b7a00);
}

.avatar-spark span {
  border-radius: 50%;
  background: #fffbd2;
}

.avatar-spark::before {
  left: 25px;
  top: 5px;
  width: 17px;
  height: 50px;
  background: #fff15a;
  clip-path: polygon(42% 0, 100% 0, 65% 38%, 100% 38%, 28% 100%, 42% 51%, 0 51%);
}

.avatar-flame span::before,
.avatar-wisp span::before {
  background: #6d2418;
  box-shadow: 14px 0 0 #6d2418;
}

.avatar-drop span::before,
.avatar-shield span::before,
.avatar-mist span::before {
  background: #0f5b7a;
  box-shadow: 14px 0 0 #0f5b7a;
}

.avatar-blade::before,
.avatar-blade::after,
.avatar-wing::before,
.avatar-wing::after {
  z-index: 1;
  border: 0;
  opacity: 1;
}

.avatar-blade::after,
.avatar-wing::after {
  inset: auto;
  border-radius: 0;
}

.avatar-block span::before,
.avatar-mud span::before {
  background: #2f2518;
  box-shadow: 14px 0 0 #2f2518;
}

.avatar-spark::before {
  z-index: 3;
  filter: drop-shadow(0 0 8px rgba(255, 241, 90, 0.82));
}

.avatar-spark span::before,
.avatar-wing span::before {
  background: #5c4300;
  box-shadow: 14px 0 0 #5c4300;
}

.monster-avatar.compact.avatar-flame span::before,
.monster-avatar.compact.avatar-wisp span::before,
.monster-avatar.compact.avatar-drop span::before,
.monster-avatar.compact.avatar-shield span::before,
.monster-avatar.compact.avatar-mist span::before,
.monster-avatar.compact.avatar-block span::before,
.monster-avatar.compact.avatar-mud span::before,
.monster-avatar.compact.avatar-spark span::before,
.monster-avatar.compact.avatar-wing span::before {
  box-shadow: 10px 0 0 currentColor;
}

.monster-avatar.compact.avatar-flame span::before,
.monster-avatar.compact.avatar-wisp span::before {
  color: #6d2418;
  background: #6d2418;
}

.monster-avatar.compact.avatar-drop span::before,
.monster-avatar.compact.avatar-shield span::before,
.monster-avatar.compact.avatar-mist span::before {
  color: #0f5b7a;
  background: #0f5b7a;
}

.monster-avatar.compact.avatar-block span::before,
.monster-avatar.compact.avatar-mud span::before {
  color: #2f2518;
  background: #2f2518;
}

.monster-avatar.compact.avatar-spark span::before,
.monster-avatar.compact.avatar-wing span::before {
  color: #5c4300;
  background: #5c4300;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  min-height: 22px;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.fire {
  background: var(--fire);
}

.water {
  background: var(--water);
}

.thunder {
  background: var(--thunder);
}

.earth {
  background: var(--earth);
}

.none {
  background: var(--none);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.stat {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 5px;
  background: #fafcfb;
}

.stat b {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.stat span {
  font-size: 13px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 12px;
  color: var(--muted);
  background: #fff;
}

.side-panel {
  padding: 12px;
  position: sticky;
  top: 12px;
}

.selected-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.unit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: #fbfdfc;
}

.unit-row small,
.field-unit small {
  color: var(--muted);
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.setup-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.setup-board-panel {
  display: grid;
  gap: 10px;
}

.setup-grid-board,
.field-board {
  display: grid;
  gap: 4px;
}

.setup-row-label,
.field-row-label {
  color: var(--muted);
  font-size: 12px;
}

.setup-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.setup-cell {
  min-height: 96px;
  border: 1px dashed #b8c5c0;
  border-radius: 8px;
  padding: 6px;
  background: #fbfdfc;
  display: flex;
  align-items: stretch;
}

.setup-cell.front {
  background: var(--front);
}

.setup-cell.back {
  background: var(--back);
}

.setup-cell.editable:hover {
  border-color: var(--accent);
}

.setup-cell.selected-target {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.22);
}

.setup-cell.unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}

.setup-cell.unavailable:hover {
  border-color: #b8c5c0;
}

.setup-cell.locked {
  cursor: default;
}

.empty-slot {
  margin: auto;
  color: #9aa8a2;
  font-size: 13px;
  display: grid;
  place-items: center;
  gap: 2px;
}

.empty-slot b {
  color: #6d7b76;
  font-size: 18px;
}

.empty-slot small {
  font-size: 11px;
}

.setup-token {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  cursor: grab;
}

.setup-token.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}

.setup-token strong,
.setup-token small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-token small {
  color: var(--muted);
}

.setup-token button {
  grid-column: 1 / -1;
  min-height: 28px;
  padding: 3px 8px;
}

.setup-token-summary {
  display: none;
}

.setup-token .avatar-button {
  border-radius: 10px;
}

.setup-token button[data-place-setup] {
  background: #e8f7f4;
  border-color: rgba(15, 118, 110, 0.32);
  color: var(--accent-strong);
  font-weight: 800;
}

.setup-bench {
  min-height: 98px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.setup-reserve-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.setup-reserve-icon {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 5px;
  border-radius: 8px;
  background: #f8fbfa;
}

.setup-reserve-icon .monster-avatar {
  width: min(58px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
}

.setup-reserve-icon strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.1;
}

.setup-reserve-icon > span {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(21, 32, 28, 0.82);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.unit-card {
  padding: 10px;
  display: grid;
  gap: 8px;
}

.unit-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.unit-card.active {
  border-color: var(--accent);
}

.unit-card.front {
  background: var(--front);
}

.unit-card.back {
  background: var(--back);
}

.battle-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 14px;
  height: clamp(560px, calc(100vh - 128px), 900px);
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.command-stack {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.battlefield-wrap {
  min-height: 0;
  overflow: hidden;
}

.battlefield {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-content: start;
  height: 100%;
  overflow: hidden;
}

.battle-target-arrows {
  position: absolute;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.battle-target-arrow {
  fill: none;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2.8 1.4;
  animation: targetArrowPulse 900ms ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(21, 32, 28, 0.22));
}

.battle-target-arrow.enemy {
  stroke: #dc2626;
}

.battle-target-arrow.ally {
  stroke: #16a34a;
}

.battle-target-arrow.aux {
  stroke-width: 1.2;
  opacity: 0.78;
}

.arrow-marker.enemy {
  fill: #dc2626;
}

.arrow-marker.ally {
  fill: #16a34a;
}

.battle-target-anchor {
  stroke: #fff;
  stroke-width: 0.7;
  animation: targetAnchorPulse 900ms ease-in-out infinite;
}

.battle-target-anchor.enemy {
  fill: #dc2626;
}

.battle-target-anchor.ally {
  fill: #16a34a;
}

.battle-banner {
  border: 1px solid #f0c36b;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff8e1;
  font-weight: 700;
  text-align: center;
}

.team-field {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  align-content: start;
}

.field-label {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.battlefield .field-board {
  gap: 3px;
}

.battlefield .field-row-label {
  font-size: 11px;
  line-height: 1;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.field-unit {
  position: relative;
  height: clamp(64px, 8vh, 82px);
  padding: 5px;
  display: grid;
  gap: 3px;
  align-content: center;
  border-left: 4px solid var(--line);
  overflow: visible;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.battlefield .reserve-strip {
  display: none;
}

.field-unit.front {
  background: var(--front);
  border-left-color: var(--fire);
}

.field-unit.back {
  background: var(--back);
  border-left-color: var(--water);
}

.field-unit.dead {
  opacity: 0.55;
  filter: grayscale(0.5);
}

.field-unit.empty {
  border-style: dashed;
  background: #f8faf9;
  color: #a0aca7;
  align-content: center;
  justify-content: center;
}

.field-unit.commanding {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22);
}

.field-unit.acting {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.24);
  border-color: var(--accent);
}

.field-unit.targeted {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.22);
}

.field-unit.stage-down {
  border-color: #ef4444;
}

.field-unit.stage-down .monster-portrait {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.34), 0 0 18px rgba(239, 68, 68, 0.18);
}

.field-unit.stage-up .monster-portrait {
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.28), 0 0 18px rgba(22, 163, 74, 0.16);
}

.field-unit > :not(.status-aura):not(.floating-result) {
  position: relative;
  z-index: 1;
}

.status-aura {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0.85;
}

.status-aura.poison {
  background:
    radial-gradient(circle at 24% 20%, rgba(147, 51, 234, 0.28), transparent 30%),
    radial-gradient(circle at 72% 72%, rgba(88, 28, 135, 0.24), transparent 36%);
  animation: poisonPulse 1300ms ease-in-out infinite;
}

.status-aura.paralyze {
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(250, 204, 21, 0.42) 37% 40%, transparent 41% 100%),
    linear-gradient(72deg, transparent 0 58%, rgba(255, 247, 128, 0.42) 59% 62%, transparent 63% 100%);
  animation: paralyzeFlash 900ms steps(2, end) infinite;
}

.status-aura.confuse {
  background:
    conic-gradient(from 45deg, rgba(168, 85, 247, 0.2), rgba(59, 130, 246, 0.18), rgba(236, 72, 153, 0.18), rgba(168, 85, 247, 0.2));
  animation: confuseSpin 1600ms linear infinite;
}

.field-unit.status-confuse .monster-portrait {
  animation: confuseWobble 800ms ease-in-out infinite;
}

.tempo-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.segmented button,
.sfx-toggle {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

.segmented button.active,
.sfx-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.battle-fx {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.central-cutin {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(380px, calc(100% - 24px));
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(21, 32, 28, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86)),
    radial-gradient(circle at 0 50%, rgba(15, 118, 110, 0.18), transparent 52%);
  box-shadow: 0 20px 44px rgba(21, 32, 28, 0.22);
  backdrop-filter: blur(4px);
}

.central-cutin.enter {
  animation: cutinCenterIn calc(620ms * var(--fx-rate, 1)) cubic-bezier(.2, .9, .2, 1) both;
}

.central-cutin.hold {
  animation: cutinCenterHold calc(900ms * var(--fx-rate, 1)) ease-out both;
}

.central-cutin .monster-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
}

.central-cutin span,
.central-cutin strong,
.central-cutin em {
  display: block;
}

.central-cutin span {
  color: var(--muted);
  font-size: 12px;
}

.central-cutin strong {
  margin-top: 2px;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
}

.central-cutin em {
  width: fit-content;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(21, 32, 28, 0.12);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

.battle-fx.effect-fire .central-cutin {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(255, 242, 224, 0.88)),
    radial-gradient(circle at 0 50%, rgba(255, 111, 45, 0.34), transparent 58%);
  border-color: rgba(217, 65, 36, 0.32);
}

.battle-fx.effect-water .central-cutin,
.battle-fx.effect-heal .central-cutin {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(225, 248, 255, 0.9)),
    radial-gradient(circle at 0 50%, rgba(67, 184, 232, 0.34), transparent 58%);
  border-color: rgba(29, 111, 183, 0.3);
}

.battle-fx.effect-thunder .central-cutin {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 189, 0.9)),
    radial-gradient(circle at 0 50%, rgba(245, 196, 0, 0.42), transparent 58%);
  border-color: rgba(131, 95, 0, 0.32);
}

.battle-fx.effect-earth .central-cutin {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(243, 235, 215, 0.9)),
    radial-gradient(circle at 0 50%, rgba(138, 106, 55, 0.28), transparent 58%);
  border-color: rgba(138, 106, 55, 0.34);
}

.battle-fx.effect-status .central-cutin {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(244, 234, 255, 0.9)),
    radial-gradient(circle at 0 50%, rgba(155, 93, 229, 0.34), transparent 58%);
  border-color: rgba(77, 42, 122, 0.3);
}

.battle-fx.effect-buff .central-cutin,
.battle-fx.effect-shield .central-cutin {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(232, 251, 255, 0.9)),
    radial-gradient(circle at 0 50%, rgba(120, 214, 255, 0.34), transparent 58%);
  border-color: rgba(45, 136, 200, 0.3);
}

.battle-fx.effect-break .central-cutin,
.battle-fx.effect-slash .central-cutin,
.battle-fx.effect-force .central-cutin {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(236, 241, 246, 0.9)),
    radial-gradient(circle at 0 50%, rgba(74, 86, 103, 0.24), transparent 58%);
  border-color: rgba(62, 76, 93, 0.28);
}

.battle-fx.category-attack .central-cutin em {
  background: #fee2e2;
  color: #991b1b;
}

.battle-fx.category-debuff .central-cutin em,
.battle-fx.category-status .central-cutin em {
  background: #f3e8ff;
  color: #6d28d9;
}

.battle-fx.category-heal .central-cutin em {
  background: #dcfce7;
  color: #166534;
}

.battle-fx.category-buff .central-cutin em {
  background: #e0f2fe;
  color: #075985;
}

.field-unit.effect-fire::before {
  background: radial-gradient(circle, #ffe87a 0 24%, #ff8a2a 25% 62%, #d94124 63% 100%);
}

.field-unit.effect-water::before {
  background: radial-gradient(circle, #e0f9ff 0 22%, #43b8e8 23% 68%, #1d6fb7 69% 100%);
}

.field-unit.effect-thunder::before {
  background: linear-gradient(135deg, #fff47a, #f5c400 48%, #835f00);
}

.field-unit.effect-earth::before {
  background: radial-gradient(circle, #d9c08a 0 28%, #8a6a37 29% 100%);
}

.field-unit.effect-heal::before {
  background: radial-gradient(circle, #eafff3 0 24%, #48c78e 25% 72%, #18875d 73% 100%);
}

.field-unit.effect-status::before {
  background: radial-gradient(circle, #f1ddff 0 18%, #9b5de5 19% 66%, #4d2a7a 67% 100%);
}

.field-unit.effect-buff::before,
.field-unit.effect-shield::before {
  background: radial-gradient(circle, #ffffff 0 20%, #78d6ff 21% 65%, #2d88c8 66% 100%);
}

.field-unit.effect-break::before,
.field-unit.effect-slash::before,
.field-unit.effect-force::before {
  background: linear-gradient(135deg, #ffffff, #9aa8b8 50%, #3e4c5d);
}

.field-unit.acting.anim-ready .monster-portrait {
  animation: actorReadyBounce calc(420ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit.acting.anim-cast .monster-portrait,
.field-unit.acting.anim-fly .monster-portrait,
.field-unit.acting.anim-hit .monster-portrait {
  animation: actorFocusPulse calc(920ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit.targeted.anim-fly::before {
  content: "";
  position: absolute;
  z-index: 6;
  left: -30px;
  top: 32px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.72);
  animation: projectileFly calc(480ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit.effect-slash.targeted.anim-fly::before,
.field-unit.effect-break.targeted.anim-fly::before {
  width: 34px;
  height: 9px;
  border-radius: 999px;
  transform: rotate(-24deg);
}

.field-unit.effect-thunder.targeted.anim-fly::before {
  border-radius: 2px;
  clip-path: polygon(35% 0, 100% 0, 62% 42%, 100% 42%, 22% 100%, 40% 55%, 0 55%);
}

.field-unit.vfx-clean-slash.targeted.anim-fly::before,
.field-unit.vfx-basic-strike.targeted.anim-fly::before {
  width: 42px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff 22% 55%, #9aa8b8 76%, transparent);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
  transform: rotate(-22deg);
}

.field-unit.vfx-flame-slash.targeted.anim-fly::before {
  width: 54px;
  height: 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 14% 50%, #fff5a8 0 14%, transparent 16%),
    linear-gradient(90deg, transparent, #ffe66d 12%, #ff8a2a 52%, #d94124 86%, transparent);
  box-shadow: 0 0 16px rgba(255, 111, 45, 0.9), 10px 0 18px rgba(217, 65, 36, 0.45);
  transform: rotate(-25deg);
}

.field-unit.vfx-water-slash.targeted.anim-fly::before {
  width: 54px;
  height: 12px;
  border-radius: 999px 30% 999px 30%;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 12%, transparent 15%),
    linear-gradient(90deg, transparent, #dff9ff 15%, #43b8e8 50%, #1d6fb7 86%, transparent);
  box-shadow: 0 0 16px rgba(67, 184, 232, 0.78), 12px 0 14px rgba(29, 111, 183, 0.38);
  transform: rotate(-18deg);
}

.field-unit.vfx-thunder-claw.targeted.anim-fly::before {
  width: 48px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fff47a, #f5c400 48%, #835f00);
  clip-path: polygon(0 48%, 22% 34%, 20% 0, 50% 35%, 72% 18%, 64% 48%, 100% 54%, 67% 66%, 78% 100%, 48% 68%, 22% 86%, 28% 58%);
  box-shadow: 0 0 18px rgba(245, 196, 0, 0.88);
}

.field-unit.vfx-rock-smash.targeted.anim-fly::before,
.field-unit.vfx-stone-bolt.targeted.anim-fly::before {
  width: 30px;
  height: 22px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 24% 24%, #f1dfb5 0 16%, transparent 18%),
    linear-gradient(135deg, #d9c08a, #8a6a37 72%);
  clip-path: polygon(18% 0, 82% 8%, 100% 54%, 62% 100%, 14% 86%, 0 34%);
  box-shadow: 10px 4px 0 -4px rgba(100, 75, 42, 0.72), -8px -5px 0 -5px rgba(217, 192, 138, 0.7);
}

.field-unit.vfx-break-hit.targeted.anim-fly::before {
  width: 46px;
  height: 12px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #f8fafc 0 8px, #64748b 9px 13px, #334155 14px 18px);
  box-shadow: 0 0 14px rgba(51, 65, 85, 0.42);
  transform: rotate(-22deg);
}

.field-unit.vfx-fire-bolt.targeted.anim-fly::before {
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle at 42% 34%, #fff7a3 0 18%, #ff8a2a 20% 58%, #d94124 60% 100%);
  clip-path: polygon(50% 0, 74% 30%, 100% 52%, 72% 68%, 54% 100%, 34% 70%, 0 52%, 28% 32%);
  box-shadow: 0 0 18px rgba(255, 111, 45, 0.88);
}

.field-unit.vfx-water-bolt.targeted.anim-fly::before {
  width: 30px;
  height: 30px;
  border-radius: 56% 44% 62% 38%;
  background: radial-gradient(circle at 35% 28%, #fff 0 16%, #8ee8ff 18% 42%, #1d6fb7 78%);
  box-shadow: 0 0 18px rgba(67, 184, 232, 0.72);
}

.field-unit.vfx-thunder-bolt.targeted.anim-fly::before {
  width: 28px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fff47a, #f5c400 52%, #835f00);
  clip-path: polygon(40% 0, 100% 0, 63% 42%, 96% 42%, 18% 100%, 39% 58%, 0 58%);
  box-shadow: 0 0 18px rgba(245, 196, 0, 0.9);
}

.field-unit.vfx-force-bolt.targeted.anim-fly::before {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #b8c2cf 20% 56%, #3e4c5d 58% 100%);
  box-shadow: 0 0 18px rgba(184, 194, 207, 0.76);
}

.field-unit.effect-fire.targeted.anim-fly::before,
.field-unit.effect-water.targeted.anim-fly::before,
.field-unit.effect-earth.targeted.anim-fly::before,
.field-unit.effect-status.targeted.anim-fly::before,
.field-unit.effect-heal.targeted.anim-fly::before {
  animation-name: projectileArc;
}

.field-unit.vfx-heal-sparkle.targeted.anim-fly::before,
.field-unit.vfx-heal-wave.targeted.anim-fly::before,
.field-unit.vfx-recover-light.targeted.anim-fly::before {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 16%, #baf7d4 17% 34%, transparent 36%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(72, 199, 142, 0.9) 13% 18%, transparent 19% 37%, rgba(72, 199, 142, 0.8) 38% 44%, transparent 45% 100%);
  box-shadow: 0 0 18px rgba(72, 199, 142, 0.7);
  animation-name: healFloat;
}

.field-unit.vfx-poison-mist.targeted.anim-fly::before {
  width: 42px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 48%, rgba(196, 132, 252, 0.9), transparent 34%),
    radial-gradient(circle at 62% 38%, rgba(109, 40, 217, 0.78), transparent 38%);
  filter: blur(1px);
  box-shadow: 0 0 16px rgba(109, 40, 217, 0.56);
  animation-name: poisonDrift;
}

.field-unit.vfx-paralyze-spark.targeted.anim-fly::before {
  width: 44px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fff47a, #f5c400 55%, transparent 56%);
  clip-path: polygon(0 54%, 20% 38%, 32% 58%, 48% 20%, 58% 66%, 82% 18%, 70% 52%, 100% 50%, 68% 74%, 54% 54%, 38% 92%, 26% 64%);
  box-shadow: 0 0 18px rgba(245, 196, 0, 0.86);
}

.field-unit.vfx-confuse-swirl.targeted.anim-fly::before {
  width: 34px;
  height: 34px;
  border: 5px solid rgba(168, 85, 247, 0.88);
  border-right-color: rgba(59, 130, 246, 0.72);
  border-bottom-color: rgba(236, 72, 153, 0.72);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
  animation-name: confuseProjectile;
}

.field-unit.vfx-flare-burst.targeted.anim-fly::before {
  left: 50%;
  top: -22px;
  width: 30px;
  height: 34px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 48% 26%, #fff5a8 0 14%, transparent 16%),
    linear-gradient(180deg, #ffe66d 0 28%, #ff8a2a 44%, #d94124 100%);
  box-shadow: 0 0 20px rgba(255, 111, 45, 0.82);
  clip-path: polygon(50% 0, 76% 22%, 100% 44%, 76% 72%, 58% 100%, 40% 74%, 0 45%, 27% 24%);
  animation-name: flareDrop;
}

.field-unit.vfx-bolt-storm.targeted.anim-fly::before {
  left: 50%;
  top: -22px;
  width: 30px;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fff47a, #f5c400 55%, #835f00);
  clip-path: polygon(42% 0, 100% 0, 64% 38%, 94% 38%, 18% 100%, 36% 54%, 0 54%);
  box-shadow: 0 0 20px rgba(245, 196, 0, 0.92);
  animation-name: boltDrop;
}

.field-unit.vfx-quake-rocks.targeted.anim-fly::before {
  left: 50%;
  top: -20px;
  width: 30px;
  height: 26px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 24% 24%, #f1dfb5 0 16%, transparent 18%),
    linear-gradient(135deg, #d9c08a, #8a6a37 72%);
  clip-path: polygon(18% 0, 82% 8%, 100% 54%, 62% 100%, 14% 86%, 0 34%);
  box-shadow: -14px -5px 0 -7px rgba(138, 106, 55, 0.78), 14px -8px 0 -8px rgba(217, 192, 138, 0.72);
  animation-name: rockFall;
}

.field-unit.vfx-attack-aura.targeted.anim-fly::before,
.field-unit.vfx-guard-aura.targeted.anim-fly::before,
.field-unit.vfx-guard-stance.targeted.anim-fly::before {
  left: 50%;
  top: 44px;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(120, 214, 255, 0.82);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(120, 214, 255, 0.22) 48%, transparent 70%);
  box-shadow: 0 0 18px rgba(45, 136, 200, 0.46);
  animation-name: auraRise;
}

.field-unit.targeted.anim-hit {
  animation: targetHit calc(620ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit.targeted.anim-hit::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 10px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 120, 72, 0.28) 42%, transparent 70%);
  animation: hitFlash calc(620ms * var(--fx-rate, 1)) ease-out both;
  pointer-events: none;
}

.field-unit.effect-heal.targeted.anim-hit::after,
.field-unit.effect-buff.targeted.anim-hit::after,
.field-unit.effect-shield.targeted.anim-hit::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(70, 210, 150, 0.35) 44%, transparent 72%);
}

.field-unit.effect-heal.targeted.anim-hit,
.field-unit.effect-buff.targeted.anim-hit,
.field-unit.effect-shield.targeted.anim-hit {
  animation: targetSoftPulse calc(720ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit.effect-status.targeted.anim-hit {
  animation: targetStatusPulse calc(760ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit.effect-status.targeted.anim-hit::after {
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.92), transparent 20%),
    radial-gradient(circle, rgba(155, 93, 229, 0.38), rgba(77, 42, 122, 0.22) 54%, transparent 75%);
}

.field-unit.effect-thunder.targeted.anim-hit::after {
  background:
    linear-gradient(128deg, transparent 0 36%, rgba(255, 247, 122, 0.86) 37% 43%, transparent 44% 100%),
    radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(245, 196, 0, 0.32) 46%, transparent 76%);
}

.field-unit.effect-fire.targeted.anim-hit::after {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 234, 122, 0.95), transparent 23%),
    radial-gradient(circle, rgba(255, 138, 42, 0.42), rgba(217, 65, 36, 0.22) 54%, transparent 76%);
}

.field-unit.effect-water.targeted.anim-hit::after {
  background:
    radial-gradient(circle at 38% 30%, rgba(224, 249, 255, 0.95), transparent 24%),
    radial-gradient(circle, rgba(67, 184, 232, 0.38), rgba(29, 111, 183, 0.22) 54%, transparent 76%);
}

.field-unit.effect-earth.targeted.anim-hit::after {
  background:
    radial-gradient(circle at 36% 70%, rgba(217, 192, 138, 0.7), transparent 28%),
    radial-gradient(circle, rgba(138, 106, 55, 0.32), rgba(80, 60, 34, 0.18) 56%, transparent 78%);
}

.field-unit.vfx-flame-slash.targeted.anim-hit::after {
  background:
    linear-gradient(130deg, transparent 0 34%, rgba(255, 238, 136, 0.9) 35% 41%, rgba(255, 138, 42, 0.8) 42% 49%, transparent 50% 100%),
    radial-gradient(circle at 44% 46%, rgba(255, 111, 45, 0.45), transparent 58%);
}

.field-unit.vfx-water-slash.targeted.anim-hit::after {
  background:
    linear-gradient(130deg, transparent 0 34%, rgba(224, 249, 255, 0.9) 35% 41%, rgba(67, 184, 232, 0.76) 42% 49%, transparent 50% 100%),
    radial-gradient(circle at 42% 50%, rgba(67, 184, 232, 0.36), transparent 62%);
}

.field-unit.vfx-thunder-claw.targeted.anim-hit::after {
  background:
    linear-gradient(128deg, transparent 0 28%, rgba(255, 247, 122, 0.9) 29% 34%, transparent 35% 100%),
    linear-gradient(36deg, transparent 0 54%, rgba(255, 247, 122, 0.82) 55% 60%, transparent 61% 100%),
    radial-gradient(circle, rgba(245, 196, 0, 0.32), transparent 70%);
}

.field-unit.vfx-rock-smash.targeted.anim-hit::after,
.field-unit.vfx-quake-rocks.targeted.anim-hit::after {
  background:
    linear-gradient(16deg, transparent 0 46%, rgba(80, 60, 34, 0.45) 47% 50%, transparent 51% 100%),
    linear-gradient(158deg, transparent 0 38%, rgba(138, 106, 55, 0.38) 39% 43%, transparent 44% 100%),
    radial-gradient(circle at 44% 72%, rgba(217, 192, 138, 0.45), transparent 42%);
}

.field-unit.vfx-break-hit.targeted.anim-hit::after {
  background:
    linear-gradient(130deg, transparent 0 35%, rgba(248, 250, 252, 0.88) 36% 40%, rgba(100, 116, 139, 0.72) 41% 48%, transparent 49% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(220, 38, 38, 0.36) 19% 27%, transparent 28% 100%),
    linear-gradient(180deg, transparent 0 52%, rgba(220, 38, 38, 0.28) 53% 61%, transparent 62% 100%),
    radial-gradient(circle, rgba(51, 65, 85, 0.24), transparent 70%);
}

.field-unit.vfx-break-hit.targeted.anim-hit .monster-portrait {
  animation: debuffIconDrop calc(620ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit.vfx-flare-burst.targeted.anim-hit::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 245, 168, 0.96) 0 16%, rgba(255, 138, 42, 0.52) 17% 46%, rgba(217, 65, 36, 0.24) 47% 72%, transparent 74%);
}

.field-unit.vfx-bolt-storm.targeted.anim-hit::after {
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255, 247, 122, 0.94) 43% 48%, transparent 49% 100%),
    linear-gradient(32deg, transparent 0 54%, rgba(245, 196, 0, 0.8) 55% 60%, transparent 61% 100%),
    radial-gradient(circle, rgba(245, 196, 0, 0.24), transparent 70%);
}

.field-unit.vfx-heal-sparkle.targeted.anim-hit::after,
.field-unit.vfx-heal-wave.targeted.anim-hit::after,
.field-unit.vfx-recover-light.targeted.anim-hit::after {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), transparent 18%),
    radial-gradient(circle at 70% 58%, rgba(186, 247, 212, 0.82), transparent 22%),
    radial-gradient(circle, rgba(72, 199, 142, 0.34), transparent 72%);
}

.field-unit.vfx-poison-mist.targeted.anim-hit::after {
  background:
    radial-gradient(circle at 28% 46%, rgba(196, 132, 252, 0.58), transparent 32%),
    radial-gradient(circle at 64% 40%, rgba(109, 40, 217, 0.42), transparent 38%);
  filter: blur(1px);
}

.field-unit.vfx-confuse-swirl.targeted.anim-hit::after {
  background:
    conic-gradient(from 30deg, rgba(168, 85, 247, 0.42), rgba(59, 130, 246, 0.34), rgba(236, 72, 153, 0.34), rgba(168, 85, 247, 0.42));
}

.floating-result {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 50%;
  min-width: 54px;
  max-width: calc(100% - 12px);
  min-height: 28px;
  padding: 4px 10px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(21, 32, 28, 0.88);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  word-break: keep-all;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(21, 32, 28, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: resultCardPop calc(1700ms * var(--fx-rate, 1)) ease-out both;
}

.field-unit > .floating-result {
  position: absolute;
  z-index: 40;
}

.floating-result.heal,
.floating-result.buff {
  background: rgba(15, 118, 110, 0.9);
}

.floating-result.status {
  background: rgba(109, 40, 217, 0.9);
}

.floating-result.debuff {
  background: rgba(153, 27, 27, 0.92);
}

.floating-result.miss {
  background: rgba(100, 116, 139, 0.9);
}

@keyframes cutinCenterIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.9); }
  58% { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cutinCenterHold {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes targetArrowPulse {
  0%, 100% { opacity: 0.62; stroke-dashoffset: 0; }
  50% { opacity: 1; stroke-dashoffset: -4; }
}

@keyframes targetAnchorPulse {
  0%, 100% { opacity: 0.7; transform: scale(0.92); transform-origin: center; }
  50% { opacity: 1; transform: scale(1.18); transform-origin: center; }
}

@keyframes actorReadyBounce {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-9px) scale(1.1); }
  78% { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes actorFocusPulse {
  0% { transform: scale(1); filter: brightness(1); }
  38% { transform: scale(1.08); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes debuffIconDrop {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  34% { transform: translateY(5px) scale(0.96); filter: brightness(0.76) saturate(0.78); }
  68% { transform: translateY(-2px) scale(1.02); filter: brightness(1.05); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes projectileFly {
  0% { opacity: 0; transform: translateX(-36px) scale(0.65); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translateX(72px) scale(1.12); }
}

@keyframes projectileArc {
  0% { opacity: 0; transform: translate(-38px, 10px) scale(0.65); }
  28% { opacity: 1; }
  100% { opacity: 1; transform: translate(72px, -8px) scale(1.12); }
}

@keyframes healFloat {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(0.7); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -22px) scale(1.08); }
}

@keyframes auraRise {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.72); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -18px) scale(1.08); }
}

@keyframes poisonDrift {
  0% { opacity: 0; transform: translate(-44px, 8px) scale(0.72); }
  35% { opacity: 0.95; }
  100% { opacity: 1; transform: translate(62px, -7px) scale(1.08); }
}

@keyframes confuseProjectile {
  0% { opacity: 0; transform: translate(-38px, 8px) rotate(0deg) scale(0.7); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translate(68px, -5px) rotate(220deg) scale(1.05); }
}

@keyframes flareDrop {
  0% { opacity: 0; transform: translate(-50%, -28px) scale(0.7); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, 52px) scale(1.08); }
}

@keyframes boltDrop {
  0% { opacity: 0; transform: translate(-50%, -32px) scaleY(0.72); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, 52px) scaleY(1.05); }
}

@keyframes rockFall {
  0% { opacity: 0; transform: translate(-50%, -30px) rotate(-12deg) scale(0.76); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, 54px) rotate(12deg) scale(1.05); }
}

@keyframes targetHit {
  0% { transform: translateX(0); }
  22% { transform: translateX(-7px); }
  44% { transform: translateX(7px); }
  66% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

@keyframes hitFlash {
  0% { opacity: 0; transform: scale(0.75); }
  38% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes targetSoftPulse {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-3px) scale(1.025); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes targetStatusPulse {
  0% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-1.5deg) scale(1.025); }
  60% { transform: rotate(1.5deg) scale(1.015); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes resultCardPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.96); }
}

@keyframes poisonPulse {
  0%, 100% { opacity: 0.4; filter: saturate(1); }
  50% { opacity: 0.9; filter: saturate(1.45); }
}

@keyframes paralyzeFlash {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}

@keyframes confuseSpin {
  0% { transform: rotate(0deg); opacity: 0.42; }
  100% { transform: rotate(360deg); opacity: 0.42; }
}

@keyframes confuseWobble {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-2px) rotate(-1deg); }
  70% { transform: translateX(2px) rotate(1deg); }
}

.unit-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.unit-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
}

.battle-mini-stack {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
}

.battle-mini-modifiers {
  position: absolute;
  top: -2px;
  right: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  max-width: 74%;
}

.field-modifier-badge {
  min-width: 20px;
  padding: 1px 4px;
  border: 1px solid rgba(21, 32, 28, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 2px 5px rgba(21, 32, 28, 0.1);
}

.field-modifier-badge.down {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #991b1b;
}

.field-modifier-badge.up {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

.battle-mini-bars {
  width: 100%;
  display: grid;
  gap: 3px;
}

.mini-resource {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px;
  align-items: center;
}

.mini-resource span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.field-unit .monster-portrait.compact {
  width: 40px;
  height: 40px;
}

.unit-copy {
  min-width: 0;
  flex: 1;
}

.unit-title strong {
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hpbar,
.mpbar {
  height: 4px;
  border-radius: 999px;
  background: #e6ece9;
  overflow: hidden;
}

.hpbar span,
.mpbar span {
  display: block;
  height: 100%;
}

.hpbar span {
  background: #16a34a;
}

.mpbar span {
  background: #2563eb;
}

.numbers {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted);
}

.modifier-row {
  min-height: 18px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

.modifier-row:not(.active) {
  opacity: 0;
}

.modifier-chip {
  flex: 0 0 auto;
  min-width: 18px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid rgba(21, 32, 28, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(21, 32, 28, 0.08);
}

.modifier-chip.status.poison {
  background: #f3e8ff;
  border-color: #c084fc;
  color: #6d28d9;
}

.modifier-chip.status.paralyze {
  background: #fef9c3;
  border-color: #facc15;
  color: #854d0e;
}

.modifier-chip.status.confuse {
  background: #fce7f3;
  border-color: #f472b6;
  color: #9d174d;
}

.modifier-chip.stage.up {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.modifier-chip.stage.down {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.modifier-chip.none {
  color: var(--muted);
}

.right-stack {
  display: grid;
  gap: 10px;
}

.action-panel,
.log-panel {
  padding: 12px;
}

.action-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.action-panel.no-run {
  grid-template-rows: auto minmax(0, 1fr);
}

.action-panel.no-tabs {
  grid-template-rows: minmax(0, 1fr) auto;
}

.action-panel.no-tabs.no-run {
  grid-template-rows: minmax(0, 1fr);
}

.action-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
}

.command-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.command-progress button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.command-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.command-tabs button {
  min-width: 0;
  min-height: 38px;
  padding: 6px 5px;
  font-size: 12px;
  font-weight: 900;
}

.command-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.16);
}

.command-card {
  gap: 10px;
}

.command-home-card {
  align-content: start;
}

.command-home-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.command-menu-card {
  display: grid;
  gap: 8px;
}

.command-menu-card small {
  color: var(--muted);
  font-size: 12px;
}

.command-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.command-menu button {
  min-height: 48px;
  font-weight: 800;
}

.command-avatar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.command-modifier-detail {
  display: grid;
  gap: 3px;
  margin-top: 2px;
}

.command-modifier-detail .modifier-row {
  min-height: 18px;
  opacity: 1;
}

.command-modifier-detail small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.switch-panel {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #d8e2de;
  border-radius: 7px;
  background: #fff;
}

.switch-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.switch-head span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.switch-row {
  display: grid;
  gap: 6px;
}

.reserve-switch-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.switch-mode-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.battle-switch-editor {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.switch-editor-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.battle-switch-board {
  display: grid;
  gap: 4px;
}

.battle-switch-board .setup-row {
  gap: 5px;
}

.switch-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}

.battle-switch-cell {
  min-height: 78px;
  padding: 4px;
}

.battle-switch-cell .empty-slot b {
  font-size: 15px;
}

.battle-switch-token {
  min-height: 62px;
  padding: 5px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border-color: #d8e2de;
  background: #fff;
}

.battle-switch-token.selected {
  border-color: var(--accent);
  background: #e8f7f4;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.18);
}

.battle-switch-token:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.battle-switch-token .monster-avatar.compact {
  width: 34px;
  height: 34px;
}

.battle-switch-token strong {
  font-size: 12px;
}

.battle-switch-token small {
  font-size: 10px;
}

.battle-switch-reserve {
  min-height: 70px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px dashed #c3d1cc;
  border-radius: 7px;
  background: #fff;
}

.battle-switch-reserve.compact {
  min-height: 48px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.switch-reserve-pill {
  gap: 5px;
  max-width: none;
}

.switch-reserve-pill .monster-avatar.compact {
  width: 24px;
  height: 24px;
}

.replacement-slot-choice {
  display: grid;
  gap: 5px;
}

.replacement-slot-choice > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reserve-fill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.reserve-fill-choice {
  min-width: 0;
  min-height: 70px;
  padding: 5px 4px;
  display: grid;
  justify-items: center;
  gap: 3px;
  border-left-width: 4px;
  background: #fff;
}

.reserve-fill-choice.fire {
  border-left-color: var(--fire);
}

.reserve-fill-choice.water {
  border-left-color: var(--water);
}

.reserve-fill-choice.thunder {
  border-left-color: var(--thunder);
}

.reserve-fill-choice.earth {
  border-left-color: var(--earth);
}

.reserve-fill-choice.none {
  border-left-color: var(--none);
}

.reserve-fill-choice .monster-avatar.compact {
  width: 34px;
  height: 34px;
}

.reserve-fill-choice span {
  max-width: 100%;
  color: #33423d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-editor-empty {
  padding: 9px;
  border: 1px dashed #c3d1cc;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.switch-editor-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.skill-info {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid #e4ebe8;
}

.skill-info small {
  color: #40504a;
  line-height: 1.45;
}

.skill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.skill-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
  background: #f7faf9;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.command-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.action-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: #fbfdfc;
  display: grid;
  gap: 7px;
}

.action-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.action-line {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.action-line label {
  font-size: 12px;
  color: var(--muted);
}

.target-picker {
  display: grid;
  gap: 6px;
}

.target-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.target-picker-head label {
  color: var(--muted);
  font-size: 12px;
}

.target-picker-head span {
  color: var(--muted);
  font-size: 11px;
}

.target-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.target-icon-choice {
  position: relative;
  min-width: 0;
  min-height: 54px;
  padding: 4px;
  display: grid;
  place-items: center;
  border-width: 2px;
  background: #fff;
}

.target-icon-choice.enemy {
  border-color: rgba(220, 38, 38, 0.22);
}

.target-icon-choice.ally {
  border-color: rgba(22, 163, 74, 0.22);
}

.target-icon-choice.selected.enemy {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

.target-icon-choice.selected.ally {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.target-icon-choice .monster-avatar.compact {
  width: 34px;
  height: 34px;
}

.target-icon-choice span {
  position: absolute;
  right: 3px;
  bottom: 2px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(21, 32, 28, 0.82);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
}

.action-group {
  display: grid;
  gap: 6px;
}

.action-group-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.action-group-head label {
  color: var(--muted);
  font-size: 12px;
}

.action-group-head span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.skill-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.skill-choice {
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border-left-width: 4px;
  text-align: left;
}

.skill-choice strong,
.skill-choice small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-choice small {
  color: var(--muted);
  font-size: 11px;
}

.skill-choice.fire {
  border-left-color: var(--fire);
  background: #fff4ee;
}

.skill-choice.fire strong {
  color: var(--fire);
}

.skill-choice.water {
  border-left-color: var(--water);
  background: #eef7ff;
}

.skill-choice.water strong {
  color: var(--water);
}

.skill-choice.thunder {
  border-left-color: var(--thunder);
  background: #fffbe7;
}

.skill-choice.thunder strong {
  color: var(--thunder);
}

.skill-choice.earth {
  border-left-color: var(--earth);
  background: #f8f3e5;
}

.skill-choice.earth strong {
  color: var(--earth);
}

.skill-choice.none {
  border-left-color: var(--none);
  background: #f8fafc;
}

.skill-choice.none strong {
  color: var(--none);
}

.skill-choice.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.22);
}

.skill-choice.unavailable {
  opacity: 0.42;
  filter: grayscale(0.8);
  cursor: help;
}

.replacement-panel {
  border: 1px solid #f3c96b;
  background: #fff8e7;
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.replacement-targets {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.replacement-target {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(143, 103, 18, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
}

.replacement-target > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reserve-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

.reserve-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: #fff;
  font-size: 12px;
  line-height: 1.3;
  max-width: 160px;
  white-space: nowrap;
}

.log-list {
  height: 240px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding-right: 4px;
}

.log-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  color: #33423d;
  font-size: 13px;
  line-height: 1.45;
}

.log-dock {
  overflow: hidden;
}

.log-toggle {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  text-align: left;
}

.log-toggle span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.log-toggle strong {
  flex: 0 0 auto;
}

.log-toggle em {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-toggle b {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.log-dock.expanded .log-list {
  height: 168px;
  padding: 0 10px 10px;
}

.result {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #eef8f5;
  display: grid;
  gap: 8px;
}

.danger {
  color: var(--danger);
}

@media (max-width: 980px) {
  .layout,
  .battle-layout,
  .setup-board-layout,
  .online-layout,
  .profile-layout,
  .room-layout,
  .table-grid {
    grid-template-columns: 1fr;
  }

  .battle-layout {
    height: auto;
    overflow: visible;
  }

  .command-stack,
  .battlefield-wrap {
    overflow: visible;
  }

  .side-panel {
    position: static;
  }

  .field-row,
  .setup-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-card.wide {
    grid-column: auto;
  }

}

@media (max-width: 640px) {
  .app-shell {
    padding: 10px;
  }

  body[data-phase="battle"] {
    overflow: hidden;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-phase="battle"] .topbar {
    gap: 6px;
    padding-bottom: 6px;
  }

  body[data-phase="battle"] h1 {
    display: none;
  }

  body[data-phase="battle"] #phaseText {
    margin: 0;
    font-size: 12px;
  }

  body[data-phase="battle"] .top-actions {
    min-height: 30px;
  }

  body[data-phase="battle"] .top-actions select,
  body[data-phase="battle"] .top-actions button {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 12px;
  }

  .top-actions {
    justify-content: flex-start;
    padding-right: 98px;
  }

  #resetButton {
    order: -1;
    flex: 0 0 auto;
  }

  #enemyPlan {
    min-width: 0;
    flex: 1 1 150px;
  }

  .screen {
    padding: 10px 0;
  }

  .home-grid,
  .online-layout,
  .profile-layout,
  .room-layout,
  .table-grid,
  .seat-row {
    grid-template-columns: 1fr;
  }

  .home-panel,
  .online-card,
  .profile-card,
  .room-side,
  .battle-table {
    padding: 10px;
  }

  .search-row {
    grid-template-columns: 1fr;
  }

  .team-mini-preview {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .team-mini-preview .monster-avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  #battleScreen.screen {
    height: calc(var(--app-vh) - 78px);
    padding: 6px 0 0;
    overflow: hidden;
  }

  .section-title {
    margin-bottom: 8px;
  }

  #teamScreen .layout {
    padding-bottom: 0;
  }

  .monster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .monster-card {
    position: relative;
    min-height: 162px;
    padding: 8px;
    gap: 6px;
    align-content: start;
  }

  .monster-card .card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
  }

  .monster-card .monster-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }

  .monster-card .card-head > .badge {
    display: none;
  }

  .monster-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    line-height: 1.15;
  }

  .monster-summary {
    gap: 3px;
    margin-top: 3px;
  }

  .summary-group {
    grid-template-columns: 13px minmax(0, 1fr);
    gap: 3px;
    font-size: 9.2px;
    line-height: 1.05;
  }

  .summary-group > span {
    width: 13px;
    height: 15px;
    border-radius: 4px;
    font-size: 8px;
  }

  .summary-group > div {
    gap: 2px;
  }

  .summary-group b {
    padding: 1px 2px;
    font-weight: 700;
  }

  .mobile-monster-meta {
    display: none;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.1;
  }

  .mobile-monster-meta span {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.72);
  }

  .mobile-monster-meta .badge {
    color: #fff;
    font-size: 10px;
    font-weight: 800;
  }

  .monster-card .stat-grid,
  .monster-card .tags {
    display: none;
  }

  .monster-card .selected-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    padding: 2px 7px;
    background: rgba(15, 118, 110, 0.94);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
    font-size: 10.5px;
    box-shadow: 0 4px 10px rgba(21, 32, 28, 0.16);
  }

  .monster-card.selected .monster-avatar {
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22), 0 8px 18px rgba(21, 32, 28, 0.12);
  }

  .monster-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
  }

  .monster-card-actions button {
    min-height: 30px;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 800;
  }

  .monster-card.selected button[data-add],
  .monster-card button[data-remove-one] {
    background: #e8f7f4;
    border-color: rgba(15, 118, 110, 0.36);
    color: var(--accent-strong);
  }

  .team-dock {
    top: 86px;
    right: 10px;
  }

  .team-tab {
    min-width: 82px;
    min-height: 32px;
    padding: 4px 7px;
    font-size: 12px;
  }

  .team-tab b {
    min-width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .team-tray-panel {
    width: min(236px, calc(100vw - 20px));
    padding: 8px;
  }

  .team-icon-list {
    gap: 6px;
    margin-bottom: 8px;
  }

  .monster-detail-card {
    max-height: 88vh;
    padding: 12px;
  }

  .monster-detail-card header {
    grid-template-columns: 58px minmax(0, 1fr);
    padding-right: 54px;
  }

  .monster-detail-card header .monster-avatar {
    width: 58px;
    height: 58px;
  }

  .monster-detail-card h3 {
    font-size: 17px;
  }

  .setup-board-layout {
    gap: 8px;
  }

  .setup-board-panel {
    gap: 5px;
  }

  .setup-grid-board {
    gap: 3px;
  }

  .setup-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .setup-cell {
    min-height: 62px;
    padding: 3px;
    border-radius: 7px;
  }

  .setup-cell .setup-token {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 4px;
    padding: 3px;
    border-radius: 7px;
  }

  .setup-cell .setup-token .monster-avatar {
    width: 30px;
    height: 30px;
  }

  .setup-token strong {
    font-size: 10px;
    line-height: 1.1;
  }

  .setup-token small {
    font-size: 9.5px;
    line-height: 1.1;
  }

  .setup-token button {
    min-height: 24px;
    padding: 2px 5px;
    font-size: 10.5px;
  }

  .setup-bench {
    min-height: 84px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .setup-bench .setup-token {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
    align-content: start;
  }

  .setup-bench .setup-token .monster-avatar {
    width: 42px;
    height: 42px;
  }

  .setup-bench .setup-token strong {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.15;
  }

  .setup-bench .setup-token small {
    display: none;
  }

  .setup-bench .setup-token-summary {
    display: block;
    grid-column: 1 / -1;
  }

  .setup-bench .setup-token-summary .monster-summary {
    margin-top: 0;
  }

  .empty-slot b {
    font-size: 14px;
  }

  .empty-slot small,
  .setup-row-label {
    font-size: 10px;
  }

  .battle-layout {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 50%) minmax(0, 50%);
    gap: 6px;
    overflow: hidden;
  }

  .battlefield-wrap {
    order: 1;
    min-height: 0;
    overflow: hidden;
  }

  .command-stack {
    order: 2;
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
  }

  .battlefield {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 3px;
    height: 100%;
    overflow: hidden;
  }

  .team-field {
    gap: 2px;
    min-height: 0;
  }

  .field-label {
    font-size: 10px;
    line-height: 1.05;
  }

  .battlefield .field-board {
    gap: 1px;
  }

  .battlefield .field-row-label {
    display: none;
  }

  .battlefield .field-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .field-unit {
    height: clamp(45px, 6.4vh, 54px);
    padding: 3px;
    gap: 1px;
    border-left-width: 3px;
    border-radius: 7px;
    overflow: visible;
    align-content: center;
  }

  .field-unit.empty small {
    font-size: 10px;
  }

  .unit-main {
    min-height: 24px;
    gap: 3px;
  }

  .field-unit .monster-portrait.compact {
    width: 27px;
    height: 27px;
    border-radius: 7px;
  }

  .battle-mini-stack {
    gap: 2px;
  }

  .battle-mini-bars {
    gap: 2px;
  }

  .mini-resource {
    gap: 2px;
  }

  .mini-resource span {
    font-size: 7.5px;
  }

  .unit-title {
    gap: 3px;
  }

  .unit-title strong {
    font-size: 9.5px;
    line-height: 1.05;
  }

  .unit-title .badge {
    min-width: 16px;
    padding: 1px 3px;
    font-size: 9px;
  }

  .modifier-row {
    min-height: 12px;
    gap: 2px;
  }

  .modifier-chip {
    min-width: 14px;
    height: 12px;
    padding: 0 2px;
    font-size: 8px;
  }

  .hpbar,
  .mpbar {
    height: 2px;
  }

  .numbers {
    gap: 2px;
    font-size: 8.5px;
    line-height: 1;
  }

  .numbers span {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .log-toggle {
    min-height: 24px;
    padding: 4px 6px;
    font-size: 10px;
  }

  .log-toggle em {
    font-size: 10px;
  }

  .log-toggle b {
    font-size: 10px;
  }

  .log-dock.expanded .log-list {
    height: 66px;
  }

  .action-panel {
    height: 100%;
    min-height: 0;
    padding: 7px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 5px;
    overflow: hidden;
  }

  .action-panel .section-title {
    margin-bottom: 0;
  }

  .action-panel .section-title h2 {
    font-size: 14px;
  }

  .action-panel .section-title span {
    font-size: 11px;
  }

  .tempo-control {
    margin-bottom: 0;
    gap: 5px;
    font-size: 10px;
  }

  .segmented button,
  .sfx-toggle {
    min-height: 24px;
    padding: 2px 5px;
    font-size: 10px;
  }

  .command-tabs {
    gap: 4px;
  }

  .command-tabs button {
    min-height: 28px;
    padding: 3px 4px;
    font-size: 10.5px;
  }

  .action-list,
  .command-card {
    min-height: 0;
  }

  .action-list {
    overflow: auto;
    padding-right: 1px;
  }

  .action-card.command-card {
    overflow: visible;
    padding: 7px;
  }

  .command-menu-card {
    padding: 8px;
    gap: 6px;
  }

  .command-menu {
    gap: 5px;
  }

  .command-menu button {
    min-height: 42px;
    padding: 4px 5px;
    font-size: 12px;
  }

  .command-menu-card small {
    font-size: 10.5px;
  }

  .command-progress {
    gap: 4px;
    margin-bottom: 5px;
  }

  .command-progress button {
    min-height: 25px;
    padding: 2px 4px;
    font-size: 11px;
  }

  .command-avatar-row {
    gap: 6px;
  }

  .command-avatar-row .monster-avatar {
    width: 34px;
    height: 34px;
  }

  .skill-choice-grid,
  .target-icon-grid {
    gap: 4px;
  }

  .target-icon-choice {
    min-height: 42px;
    padding: 3px;
  }

  .target-icon-choice .monster-avatar.compact {
    width: 28px;
    height: 28px;
  }

  .target-icon-choice span {
    font-size: 8px;
  }

  .reserve-fill-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 4px;
  }

  .reserve-fill-choice {
    min-height: 58px;
    padding: 4px 3px;
  }

  .reserve-fill-choice .monster-avatar.compact {
    width: 28px;
    height: 28px;
  }

  .reserve-fill-choice span {
    font-size: 8.5px;
  }

  .skill-choice {
    min-height: 34px;
    padding: 4px 5px;
    gap: 4px;
    border-left-width: 3px;
  }

  .skill-choice strong {
    font-size: 11px;
  }

  .skill-choice small {
    font-size: 9.5px;
  }

  #runTurn {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .central-cutin {
    width: min(280px, calc(100% - 18px));
    padding: 8px 10px 8px 8px;
  }

  .central-cutin .monster-avatar {
    width: 50px;
    height: 50px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  html,
  body {
    height: 100%;
  }

  body:not([data-phase="title"]) {
    overflow: hidden;
  }

  body:not([data-phase="title"]) .app-shell {
    width: 100%;
    height: var(--app-vh);
    padding: 6px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .topbar {
    min-height: 38px;
    padding-bottom: 5px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .topbar h1 {
    font-size: 16px;
  }

  #phaseText {
    margin-top: 1px;
    font-size: 11px;
  }

  .top-actions {
    justify-content: flex-end;
    padding-right: 0;
    gap: 5px;
  }

  #enemyPlan,
  #resetButton,
  .top-actions button,
  .top-actions select {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 11px;
  }

  .screen {
    min-height: 0;
    padding: 6px 0 0;
    overflow: auto;
  }

  #homeScreen.screen {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding-top: 5px;
    display: grid;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #homeScreen.screen.hidden {
    display: none;
  }

  .home-grid {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .home-panel {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 10px;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 10px;
    overflow: hidden;
  }

  .home-panel h2 {
    font-size: 16px;
    line-height: 1.15;
  }

  .home-panel p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
  }

  .home-panel button {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .home-panel > div {
    min-height: 0;
    overflow: hidden;
  }

  body[data-phase="home"] .app-shell,
  body[data-phase="home"] #homeScreen.screen,
  body[data-phase="home"] .home-grid,
  body[data-phase="home"] .home-panel {
    overflow: hidden;
  }

  #teamScreen.screen,
  #setupScreen.screen,
  #battleScreen.screen {
    overflow: hidden;
  }

  #teamScreen .layout {
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
  }

  .section-title {
    margin-bottom: 6px;
  }

  .section-title h2 {
    font-size: 16px;
  }

  .section-title span {
    font-size: 11px;
  }

  .monster-grid {
    height: calc(var(--app-vh) - 88px);
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 6px;
    overflow: auto;
    padding-right: 4px;
  }

  .monster-card {
    min-height: 138px;
    padding: 7px;
    gap: 5px;
  }

  .monster-card .monster-avatar {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .monster-name {
    font-size: 11.5px;
  }

  .monster-summary {
    gap: 3px;
    margin-top: 2px;
  }

  .summary-group {
    grid-template-columns: 12px minmax(0, 1fr);
    font-size: 8.5px;
  }

  .summary-group > span {
    width: 12px;
    height: 13px;
    font-size: 7px;
  }

  .monster-card-actions {
    margin-top: auto;
    gap: 4px;
  }

  .monster-card-actions button {
    min-height: 26px;
    padding: 2px 5px;
    font-size: 10.5px;
  }

  .team-dock {
    top: 48px;
    right: 8px;
  }

  .team-tab {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 11px;
  }

  .team-tray-panel {
    width: min(250px, 34vw);
    padding: 7px;
  }

  #setupScreen.screen {
    height: calc(var(--app-vh) - 44px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  #setupScreen .top-actions {
    margin-top: 0 !important;
    justify-content: flex-start;
  }

  .setup-board-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 0;
    overflow: hidden;
  }

  .setup-board-panel {
    min-height: 0;
    gap: 5px;
    overflow: hidden;
  }

  .setup-grid-board {
    gap: 2px;
    min-height: 0;
  }

  .setup-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .setup-cell {
    min-height: clamp(40px, 13vh, 60px);
    padding: 2px;
    border-radius: 6px;
  }

  .setup-cell .setup-token {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 3px;
    padding: 2px;
    border-radius: 6px;
  }

  .setup-cell .setup-token .monster-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .setup-token strong {
    font-size: 9.5px;
  }

  .setup-token small,
  .setup-token-summary {
    display: none !important;
  }

  .setup-token button {
    min-height: 20px;
    padding: 1px 4px;
    font-size: 9px;
  }

  .setup-bench {
    min-height: 0;
    max-height: 82px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    overflow: auto;
  }

  .setup-bench .setup-token {
    min-height: 38px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px;
  }

  .setup-bench .setup-token .monster-avatar {
    width: 32px;
    height: 32px;
  }

  .setup-reserve-strip {
    min-height: 34px;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
  }

  .setup-reserve-icon {
    min-width: 36px;
    width: 36px;
    min-height: 34px;
    padding: 2px;
  }

  .setup-reserve-icon .monster-avatar {
    width: 28px;
    height: 28px;
  }

  .setup-reserve-icon strong,
  .setup-reserve-icon > span {
    display: none;
  }

  #battleScreen.screen {
    height: calc(var(--app-vh) - 44px);
    padding: 4px 0 0;
    overflow: hidden;
  }

  .battle-layout {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(226px, 32vw) minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 6px;
    overflow: hidden;
  }

  .command-stack {
    order: 1;
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
  }

  .battlefield-wrap {
    order: 2;
    min-height: 0;
    overflow: hidden;
  }

  .battlefield {
    height: 100%;
    gap: 3px;
  }

  .battlefield .field-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .field-unit {
    height: clamp(46px, 13vh, 64px);
  }

  .action-panel {
    height: 100%;
    min-height: 0;
    padding: 7px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 5px;
    overflow: hidden;
  }

  .action-list {
    min-height: 0;
    overflow: auto;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  body:not([data-phase="title"])::before {
    content: "端末を横向きにしてください";
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 1000;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 28px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    padding: 9px 14px;
    background: rgba(8, 10, 13, 0.86);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  :root {
    --app-vw: 100dvh;
    --app-vh: 100dvw;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #080a0d;
  }

  body .app-shell,
  body[data-phase="title"] .app-shell,
  body:not([data-phase="title"]) .app-shell {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--app-vw);
    height: var(--app-vh);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    transform: translate(-50%, -50%) rotate(var(--app-rotation));
    transform-origin: center;
    transition: none !important;
  }

  body[data-phase="title"] .title-screen,
  body[data-phase="title"] .title-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body[data-phase="title"] .title-logo-wrap {
    width: min(92dvh, 1080px);
  }

  body[data-phase="title"] .touch-start {
    bottom: 10dvw;
  }

  body:not([data-phase="title"]) .app-shell {
    background: var(--bg);
  }

  body:not([data-phase="title"])::before {
    content: none;
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 430px), (orientation: portrait) and (max-width: 430px) {
  body[data-phase="home"] .topbar {
    min-height: 32px;
    padding-bottom: 4px;
  }

  body[data-phase="home"] .topbar h1 {
    font-size: 14px;
  }

  body[data-phase="home"] #phaseText {
    display: none;
  }

  .home-panel {
    padding: 8px;
    gap: 7px;
  }

  .home-panel h2 {
    font-size: 14px;
  }

  .home-panel p {
    -webkit-line-clamp: 2;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.28;
  }

  .home-panel button {
    min-height: 26px;
    padding: 3px 7px;
    font-size: 11px;
  }
}

@media (orientation: landscape) and (max-height: 340px), (orientation: portrait) and (max-width: 340px) {
  .home-panel {
    padding: 6px;
    gap: 5px;
  }

  .home-panel p {
    display: none;
  }

  .home-panel button {
    min-height: 24px;
    padding: 2px 6px;
    font-size: 10px;
  }
}