/* Portrait fight mock. Reuses Field grid; zooms two cards for a volley. */
body[data-view="tcg-fight"] .canvas {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.5rem 0.55rem 0.55rem;
}
.view-tcg-fight {
  --tw-rate: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0;
}
.view-tcg-fight .tf-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 0.35rem;
}
.view-tcg-fight[hidden] { display: none !important; }
.view-tcg-fight .tcg-head { margin: 0 0 0.28rem; }
.view-tcg-fight .tf-board.is-war .tf-unit { opacity: 0.28; }
.view-tcg-fight .tf-board.is-war .tf-fx { opacity: 0; }
.tw-war {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  background: rgb(6 8 10 / 0.72);
}
.tw-war[hidden] { display: none !important; }
.tw-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: min(100%, 16.5rem);
  min-height: 0;
  flex: 1 1 auto;
}
.tw-card {
  position: relative;
  width: min(100%, 9.4rem);
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: 2 / 3;
  overflow: visible;
  border-radius: 0.4rem;
  border: 2px solid #e8e4dc;
  background: #14161b;
  isolation: isolate;
}
.tw-card.is-def { border-color: #ff6b6b; }
.tw-card.is-atk { border-color: #f4d35e; }
.tw-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  border-radius: inherit;
}
.tw-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: #fff;
}
.tw-card.is-boom .tw-flash { animation: tw-flash calc(0.55s * var(--tw-rate)) ease; }
.tw-card.is-block .tw-flash { background: #f4d35e; }
.tw-card.is-heal .tw-flash { background: #6fdf9a; }
.tw-card.is-miss .tw-flash { background: #c8c4bc; }
.tw-card.is-hit { animation: tw-shake calc(0.7s * var(--tw-rate)) ease; }
.tw-card.is-boom img { animation: tw-impact calc(0.7s * var(--tw-rate)) ease; }
.tw-card.is-bot.is-swing,
.tw-card.is-bot.is-thrust { animation: tw-lunge-up calc(0.7s * var(--tw-rate)) ease; }
.tw-card.is-top.is-swing,
.tw-card.is-top.is-thrust { animation: tw-lunge-down calc(0.7s * var(--tw-rate)) ease; }
.tw-card.is-bot.is-thrust { animation-name: tw-thrust-up; }
.tw-card.is-top.is-thrust { animation-name: tw-thrust-down; }
.tw-card.is-miss { animation: tw-whiff calc(0.7s * var(--tw-rate)) ease; }
.tw-card.is-block { animation: tw-block calc(0.7s * var(--tw-rate)) ease; }
.tw-card.is-down { filter: grayscale(0.7) brightness(0.7); }
.tw-meta {
  position: absolute;
  left: 0.28rem;
  right: 0.28rem;
  bottom: 0.28rem;
  z-index: 1;
  padding: 0.22rem 0.28rem;
  border-radius: 0.28rem;
  background: rgb(8 10 12 / 0.78);
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.25;
}
.tw-banner {
  margin: 0;
  min-height: 2.2em;
  color: #f4e7c8;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 6px #000;
}
.tw-role {
  position: absolute;
  top: 0.22rem;
  left: 0.22rem;
  z-index: 1;
  padding: 0.08rem 0.22rem;
  border-radius: 0.2rem;
  background: rgb(8 10 12 / 0.72);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tf-unit.is-tank { box-shadow: inset 0 0 0 2px #c9a227; }
.view-tcg-fight .tf-el {
  position: absolute;
  top: 0.16rem;
  right: 0.16rem;
  z-index: 1;
  padding: 0.08rem 0.16rem;
  border-radius: 0.2rem;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.view-tcg-fight .tf-el.is-fire { background: #5a1c16; color: #f4c4bc; }
.view-tcg-fight .tf-el.is-earth { background: #3d2618; color: #e4c4a8; }
.view-tcg-fight .tf-el.is-wind { background: #1c333a; color: #c8e4ec; }
.view-tcg-fight .tf-el.is-water { background: #10263a; color: #b4d4f0; }
body[data-view="tcg-fight"] .tf-unit { overflow: visible; }
body[data-view="tcg-fight"] .tf-bar i { transition: width calc(0.7s * var(--tw-rate)) ease; }
.tw-floats {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}
.tw-float {
  position: absolute;
  left: calc(50% + (var(--tw-i, 0) - 1) * 0.65rem);
  top: 36%;
  z-index: 7;
  transform: translateX(-50%);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
  animation: tw-rise calc(1.85s * var(--tw-rate)) ease-out forwards;
  text-shadow: 0 0 4px #000, 0 2px 0 #000, 0 0 14px currentColor;
}
.tw-float.is-dmg { color: #ff6b6b; }
.tw-float.is-miss { color: #ece8e0; font-size: 1.05rem; }
.tw-float.is-block { color: #f4d35e; }
.tw-float.is-heal { color: #6fdf9a; }
.tw-float.is-ko { color: #ff4a4a; font-size: 1.15rem; top: 54%; }
.tf-unit .tw-float { font-size: 0.85rem; }
.tw-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}
.has-fog .tw-veil.is-fog {
  opacity: 1;
  background:
    radial-gradient(ellipse 80% 50% at 28% 38%, rgb(255 255 255 / 0.46), transparent 56%),
    radial-gradient(ellipse 70% 46% at 78% 62%, rgb(200 214 226 / 0.4), transparent 52%),
    linear-gradient(180deg, rgb(176 188 200 / 0.24), rgb(255 255 255 / 0.08));
  animation: tw-fog 4.8s ease-in-out infinite;
}
.has-tornado .tw-veil.is-tornado {
  opacity: 1;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(200 230 255 / 0) 0 11deg,
    rgb(190 220 255 / 0.3) 11deg 15deg
  );
  animation: tw-spin 2.8s linear infinite;
}
.has-mud .tw-veil.is-mud {
  opacity: 1;
  background: linear-gradient(180deg, transparent 40%, rgb(92 62 28 / 0.58) 100%);
  animation: tw-mud 3.2s ease-in-out infinite;
}
.has-ice .tw-veil.is-ice {
  opacity: 1;
  background:
    linear-gradient(135deg, rgb(180 240 255 / 0.38), transparent 42%),
    linear-gradient(300deg, rgb(120 200 255 / 0.24), transparent 46%);
  box-shadow: inset 0 0 0 2px rgb(160 230 255 / 0.5);
}
.has-armor .tw-veil.is-armor {
  opacity: 1;
  box-shadow: inset 0 0 0 3px #c9a227, inset 0 0 18px rgb(201 162 39 / 0.38);
  background: radial-gradient(circle at 50% 50%, rgb(201 162 39 / 0.16), transparent 62%);
}
.tw-blow {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}
.tw-card.is-slash .tw-blow.is-slash {
  opacity: 1;
  background: linear-gradient(
    128deg,
    transparent 38%,
    #fff 48%,
    #f4d35e 50%,
    #fff 52%,
    transparent 62%
  );
  animation: tw-slash calc(0.55s * var(--tw-rate)) ease-out forwards;
}
.tw-card.is-from-bot.is-slash .tw-blow.is-slash { animation-name: tw-slash-up; }
.tw-card.is-shot .tw-blow.is-shot,
.tw-card.is-cast .tw-blow.is-cast { opacity: 1; }
.tw-card.is-shot .tw-blow.is-shot::before {
  content: "";
  position: absolute;
  left: 46%;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #f4d35e;
  box-shadow: 0 0 16px 4px rgb(244 211 94 / 0.7);
  animation: tw-shot-down calc(0.5s * var(--tw-rate)) ease-in forwards;
}
.tw-card.is-from-bot.is-shot .tw-blow.is-shot::before { animation-name: tw-shot-up; }
.tw-card.is-cast .tw-blow.is-cast {
  background:
    radial-gradient(circle at 28% 34%, #d9b6ff 0 4px, transparent 5px),
    radial-gradient(circle at 68% 30%, #f4d35e 0 3px, transparent 4px),
    radial-gradient(circle at 50% 58%, #9ad4ff 0 5px, transparent 6px),
    radial-gradient(circle at 72% 68%, #d9b6ff 0 3px, transparent 4px);
  animation: tw-cast calc(0.6s * var(--tw-rate)) ease-out forwards;
}
.is-cook-fog .tw-veil.is-fog {
  opacity: 1;
  animation: tw-fog-birth calc(2s * var(--tw-rate)) ease-out forwards;
}
.is-cook-tornado .tw-veil.is-tornado {
  opacity: 1;
  animation: tw-tornado-birth calc(2s * var(--tw-rate)) ease-out forwards;
}
.is-cook-armor .tw-veil.is-armor {
  opacity: 1;
  animation: tw-lehm-birth calc(2s * var(--tw-rate)) ease-out forwards;
}
.is-cook-mud .tw-veil.is-mud,
.is-cook-ice .tw-veil.is-ice { animation-duration: calc(1.2s * var(--tw-rate)); }
.is-cook-sand::after,
.is-cook-tornado::after,
.is-cook-armor::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
}
.is-cook-sand::after {
  background:
    radial-gradient(circle at 22% 30%, #c4a574 0 2px, transparent 3px),
    radial-gradient(circle at 70% 24%, #e0c089 0 2px, transparent 3px),
    radial-gradient(circle at 48% 58%, #b08950 0 3px, transparent 4px),
    radial-gradient(circle at 80% 70%, #d2b07a 0 2px, transparent 3px),
    radial-gradient(circle at 30% 78%, #c4a574 0 2px, transparent 3px);
  animation: tw-sand calc(1.4s * var(--tw-rate)) ease-out forwards;
}
.is-cook-tornado::after {
  box-shadow: 0 0 28px 10px rgb(190 220 255 / 0.4);
}
.is-cook-armor::after {
  background:
    linear-gradient(180deg, transparent 35%, rgb(120 78 32 / 0.45) 100%);
  animation: tw-lehm-plate calc(2s * var(--tw-rate)) ease-out forwards;
}
@keyframes tw-flash {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes tw-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  55% { transform: translateX(6px); }
}
@keyframes tw-impact {
  0% { transform: scale(1); }
  30% { transform: scale(1.07); filter: brightness(1.4); }
  100% { transform: scale(1); }
}
@keyframes tw-lunge-up {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10%); }
}
@keyframes tw-lunge-down {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(10%); }
}
@keyframes tw-thrust-up {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-18%) scale(1.04); }
}
@keyframes tw-thrust-down {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(18%) scale(1.04); }
}
@keyframes tw-slash {
  0% { transform: translate(28%, -32%) scaleX(0.15); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-28%, 32%) scaleX(1.15); opacity: 0; }
}
@keyframes tw-slash-up {
  0% { transform: translate(-28%, 32%) scaleX(0.15); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(28%, -32%) scaleX(1.15); opacity: 0; }
}
@keyframes tw-shot-down {
  0% { top: -8%; opacity: 0; }
  20% { opacity: 1; }
  100% { top: 42%; opacity: 0; }
}
@keyframes tw-shot-up {
  0% { top: 92%; opacity: 0; }
  20% { opacity: 1; }
  100% { top: 38%; opacity: 0; }
}
@keyframes tw-cast {
  0% { opacity: 0; transform: scale(0.4); filter: brightness(1.6); }
  40% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes tw-fog-birth {
  0% { opacity: 0; filter: blur(10px); transform: scale(0.55); }
  45% { opacity: 0.7; filter: blur(4px); transform: scale(1.06); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes tw-tornado-birth {
  0% { opacity: 0; transform: scale(0.12) rotate(0deg); }
  55% { opacity: 1; transform: scale(1.18) rotate(300deg); }
  100% { opacity: 1; transform: scale(1) rotate(360deg); }
}
@keyframes tw-lehm-birth {
  0% { opacity: 0; clip-path: inset(100% 10% 0 10%); box-shadow: inset 0 0 0 0 #c9a227; }
  60% { opacity: 1; clip-path: inset(8% 2% 0 2%); box-shadow: inset 0 0 0 2px #c9a227; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); box-shadow: inset 0 0 0 3px #c9a227, inset 0 0 18px rgb(201 162 39 / 0.38); }
}
@keyframes tw-lehm-plate {
  0% { opacity: 0; transform: translateY(18%); }
  55% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.35; transform: translateY(0); }
}
@keyframes tw-whiff {
  0%, 100% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(8%); opacity: 0.72; }
}
@keyframes tw-block {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.05); }
}
@keyframes tw-rise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.72); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1); }
}
@keyframes tw-fog {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6%); }
}
@keyframes tw-spin { to { transform: rotate(360deg); } }
@keyframes tw-mud {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5%); }
}
@keyframes tw-sand {
  0% { opacity: 1; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.35); }
}
.tw-end {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: calc(100% - 1.2rem);
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}
.tw-end[hidden] { display: none !important; }
.tw-end.is-glad {
  color: #f8e7a8;
  background: rgb(8 10 12 / 0.84);
  box-shadow: 0 0 28px rgb(244 211 94 / 0.32);
  animation: tw-glad calc(0.75s * var(--tw-rate)) ease;
}
.tw-end.is-flat {
  color: #c8c4bc;
  background: rgb(8 10 12 / 0.8);
}
@keyframes tw-glad {
  0% { transform: translate(-50%, -50%) scale(0.84); opacity: 0; }
  55% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@media (min-width: 700px) and (max-height: 820px) {
  .view-tcg-fight { max-width: 34rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-card.is-hit,
  .tw-card.is-boom img,
  .tw-card.is-bot.is-swing,
  .tw-card.is-top.is-swing,
  .tw-card.is-bot.is-thrust,
  .tw-card.is-top.is-thrust,
  .tw-card.is-slash .tw-blow.is-slash,
  .tw-card.is-shot .tw-blow.is-shot::before,
  .tw-card.is-cast .tw-blow.is-cast,
  .is-cook-fog .tw-veil.is-fog,
  .is-cook-tornado .tw-veil.is-tornado,
  .is-cook-armor .tw-veil.is-armor,
  .is-cook-armor::after,
  .tw-card.is-miss,
  .tw-card.is-block,
  .tw-card.is-boom .tw-flash,
  .tw-float,
  .has-fog .tw-veil.is-fog,
  .has-tornado .tw-veil.is-tornado,
  .has-mud .tw-veil.is-mud,
  .is-cook-sand::after,
  .tw-end.is-glad { animation: none; }
  body[data-view="tcg-fight"] .tf-bar i { transition: none; }
}