/* Full-screen TRIX match and result surfaces, composed around the generated game art. */
@property --timer-progress { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.duel-overlay {
  z-index: 80;
  /* The battle surface replaces another full-screen surface; do not fade the
     entire overlay over the arena when the result is mounted. */
  animation: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 48%, #052034a8 0, transparent 43%),
    linear-gradient(180deg, #02050cf5 0%, #02050ce8 62%, #03050bf5 100%),
    url('/assets/backgrounds/neon-arena.webp?v=20260924-scene') center / cover no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.duel-overlay::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0 45%, #00d9ef13, transparent 40%),
    radial-gradient(ellipse at 100% 45%, #dd28f313, transparent 40%),
    linear-gradient(180deg, transparent 55%, #02040b9c);
  content: '';
}
.duel-overlay.choice-overlay { background: linear-gradient(180deg, #01040bc2, #01040bc9), url('/assets/backgrounds/choice-mesh.webp?v=20261020') center / cover no-repeat; }
.duel-overlay.result-overlay {
  background:
    linear-gradient(180deg, #02050ce9 0%, #02050c2b 54%, #03050b18 82%, #03050b70 100%),
    url('/assets/backgrounds/neon-arena-result-20261021.webp?v=20261021-arena1') center 68% / cover no-repeat;
  background-color: #02050b;
}
.duel-overlay.result-overlay::before {
  background:
    radial-gradient(ellipse at 0 45%, #00d9ef10, transparent 40%),
    radial-gradient(ellipse at 100% 45%, #dd28f310, transparent 40%),
    linear-gradient(180deg, #02040b00 48%, #02040b16 78%, #02040b78 100%);
}
.duel-modal {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 620px);
  height: 100dvh;
  max-height: 100dvh;
  flex-direction: column;
  gap: 0;
  margin: 0 auto;
  padding: max(5px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}
.duel-modal::-webkit-scrollbar { display: none; }
.battle-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  min-height: 52px;
  flex: 0 0 52px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 -14px;
  padding: 0 13px;
  border-bottom: 1px solid #12d9ec35;
  background: #030711ee;
}
.battle-brand {
  display: inline-flex;
  width: max-content;
  min-width: 90px;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f8ff;
  text-align: left;
}
.battle-brand-static { cursor: default; pointer-events: none; }
.battle-brand img { width: clamp(98px, 26vw, 165px); height: auto; max-height: 48px; object-fit: contain; filter: drop-shadow(0 0 10px #08ddef66); }
.battle-brand strong { font: 700 20px/1 var(--display); letter-spacing: 1.5px; }
.battle-live-label {
  display: flex;
  max-width: min(52vw, 290px);
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: #ed63f3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.battle-live-label i,.status-light { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #ee37ed; box-shadow: 0 0 12px #ee37ed; }
.battle-live-label.is-finished i { background: #96a9b8; box-shadow: none; }
.battle-header .close-duel {
  display: grid;
  width: 44px;
  height: 44px;
  justify-self: end;
  place-items: center;
  border: 1px solid #ffffff18;
  border-radius: 50%;
  background: #111b2b;
  color: #d8e5f5;
}
.battle-header .close-duel svg { width: 21px; height: 21px; }
.battle-header .close-duel span { font-size: 27px; line-height: 1; }
.battle-main {
  display: grid;
  width: 100%;
  min-height: 0;
  flex: 1 0 auto;
  grid-template-rows: auto auto minmax(230px, 1fr) auto auto;
  align-content: stretch;
  gap: clamp(7px, 1.25vh, 12px);
  padding: 12px 0 5px;
}
.choice-overlay .battle-main { grid-template-rows: auto minmax(230px, 1fr) auto; gap: clamp(12px, 2vh, 23px); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.choice-overlay .battle-scoreline,.choice-overlay .battle-choice-heading,.choice-overlay .battle-statusbar { display: none; }
.opponent-banner {
  display: grid;
  min-height: 94px;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 7px 8px;
  border: 1px solid #e242ef91;
  border-radius: 8px;
  background:
    linear-gradient(100deg, #0b1322 0%, #111324 74%, #20102a 100%);
  box-shadow: inset 0 0 20px #d731f312, 0 0 22px #cf32ef13;
}
.opponent-portrait {
  width: 78px;
  height: 78px;
  overflow: hidden;
  border: 1px solid #f14cff;
  border-radius: 50%;
  background: #090f1c;
  box-shadow: 0 0 12px #dc3df063;
}
.opponent-portrait .avatar-art { object-position: 50% 30%; }
.opponent-identity { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.opponent-identity small { color: #b293c5; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.opponent-identity strong { overflow: hidden; color: #f5f6ff; font: 700 clamp(15px, 4.3vw, 21px)/1.15 var(--display); letter-spacing: .4px; text-overflow: ellipsis; white-space: nowrap; }
.opponent-identity span { color: #b7c5d6; font-size: 11px; }
.opponent-identity span i { padding: 0 3px; color: #67788c; font-style: normal; }
.opponent-power { display: flex; align-items: center; gap: 4px; color: #e9a0ff; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.opponent-power img { width: 24px; height: 24px; object-fit: contain; }
.opponent-profile-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #ffffff1a;
  border-radius: 50%;
  background: #0a1120;
  color: #b1c3d8;
}
.opponent-profile-button svg { width: 21px; height: 21px; }
.opponent-profile-button { border-color: #18d9ea67; color: var(--cyan); transition: transform var(--motion-press,120ms) ease,background var(--motion-control,220ms) ease; }
.opponent-profile-button:active { transform: scale(.94); background: #13dce91a; }
.opponent-profile-view { display: flex; flex-direction: column; gap: 15px; }
.opponent-profile-heading { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #16d9ea42; border-radius: 10px; background: linear-gradient(110deg,#0b1927,#151025); }
.opponent-profile-heading .avatar { flex: 0 0 60px; width: 60px; height: 60px; }
.opponent-profile-heading > div { min-width: 0; }
.opponent-profile-heading h2 { overflow: hidden; margin: 2px 0; font: 19px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.opponent-profile-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.opponent-patterns,.opponent-history { padding: 12px; border: 1px solid #ffffff14; border-radius: 10px; background: #070d17; }
.opponent-patterns h3,.opponent-history h3 { margin: 0 0 9px; color: #b8c8da; font: 11px var(--display); text-transform: uppercase; }
.opponent-pattern-row { display: grid; grid-template-columns: 27px 72px minmax(40px,1fr) 35px; align-items: center; gap: 8px; min-height: 32px; color: #d7e0ed; font-size: 10px; }
.opponent-pattern-row img { width: 25px; height: 25px; object-fit: contain; }
.opponent-pattern-track { height: 5px; overflow: hidden; border-radius: 5px; background: #172334; }
.opponent-pattern-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#09c9de,#dc39f2); }
.opponent-pattern-row > strong { color: var(--cyan); text-align: right; }
.opponent-history-row { display: grid; grid-template-columns: minmax(0,1fr) auto 52px; gap: 8px; align-items: center; min-height: 34px; border-top: 1px solid #ffffff0d; color: #bac7d7; font-size: 10px; }
.opponent-history-row b { color: var(--cyan); font: 10px var(--display); }
.opponent-history-row.loss b { color: #ff718d; }
.opponent-history-row small { color: var(--muted); text-align: right; }
.opponent-profile-actions { display: flex; justify-content: flex-end; }
.battle-scoreline {
  display: grid;
  min-height: 36px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.battle-round,.battle-my-name { overflow: hidden; color: #9aabc1; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.battle-round b { margin-left: 3px; color: #f2f7ff; font: 700 16px/1 var(--display); }
.battle-my-name { text-align: right; }
.battle-score { display: flex; align-items: center; gap: 9px; color: #f5f8ff; font: 700 20px/1 var(--display); }
.battle-score i { color: #64768b; font-size: 15px; font-style: normal; }
.battle-playfield {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.battle-playfield::before {
  position: absolute;
  inset: 3% 3% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #00cce91a, #03101a00 67%);
  content: '';
}
.battle-timer-ring {
  position: relative;
  display: grid;
  width: min(82vw, 340px);
  max-width: 100%;
  aspect-ratio: 1;
  place-items: center;
  padding: clamp(6px, 2vw, 10px);
  border: 1px solid #31eff47d;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #08e8f0 var(--timer-progress, 100%), #142d3b var(--timer-progress, 100%));
  box-shadow: 0 0 12px #00e9f367, 0 0 40px #00d9f029, inset 0 0 12px #00dff169;
  transition: --timer-progress .95s linear;
}
.battle-timer-ring::before,.battle-timer-ring::after {
  position: absolute;
  inset: 8px;
  border: 1px solid #22cce65c;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}
.battle-timer-ring::after { inset: 17px; border-color: #267c9757; }
.battle-timer-inner {
  display: flex;
  width: 82%;
  height: 82%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #09b7d442;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #07141f 0%, #02070e 76%);
  box-shadow: inset 0 0 40px #00c8e40d, 0 0 22px #000c;
  text-align: center;
}
.battle-timer-inner > span { color: #8ea7bd; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.battle-timer-inner strong { color: #14edf4; font: 400 clamp(82px, 34vw, 155px)/.95 var(--display); letter-spacing: 0; text-shadow: 0 0 8px #00edf6, 0 0 29px #00d9f6a3; font-variant-numeric: tabular-nums; }
.battle-timer-inner > span,.battle-timer-inner > i { display: none; }
.battle-timer-inner > i { margin-top: 5px; color: #b4c4d5; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.battle-waiting { display: flex; width: min(74vw, 310px); aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 2px solid #17dfea; border-radius: 50%; background: radial-gradient(circle, #0a2230 0%, #030710 71%); box-shadow: 0 0 20px #00dcec6e, 0 0 55px #00dcec24, inset 0 0 28px #00dcec24; }
.battle-waiting-art { display: grid; width: 48%; height: 48%; place-items: center; }
.battle-waiting-art .waiting-item { width: 100%; height: 100%; object-fit: contain; }
.battle-waiting strong { max-width: 90%; color: #e7f7ff; font-size: 13px; letter-spacing: 1.5px; text-align: center; overflow-wrap: anywhere; text-transform: uppercase; }
.battle-waiting-dots { display: flex; gap: 5px; }
.battle-waiting-dots i { width: 5px; height: 5px; border-radius: 50%; background: #1de5ed; }
.battle-choice-area { display: flex; flex-direction: column; gap: 9px; }
.battle-choice-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.battle-choice-heading h1 { margin: 0; color: #f4f7ff; font: 400 clamp(17px, 5vw, 23px)/1.1 var(--display); letter-spacing: .7px; text-transform: uppercase; }
.battle-choice-heading p { max-width: 62%; margin: 0; color: #9fadc0; font-size: 11px; line-height: 1.35; text-align: right; }
.battle-moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(7px, 2vw, 13px); }
.battle-move {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px 5px;
  overflow: hidden;
  border: 2px solid #717d8e;
  border-radius: 50%;
  background: radial-gradient(circle at center, #243746 1px, transparent 1.5px) center / 7px 7px, radial-gradient(circle at 50% 40%, #0b1721, #02060d 78%);
  color: #edf6ff;
  box-shadow: inset 0 0 18px #00d9ee0a;
  transition: transform .2s cubic-bezier(.2,.75,.25,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.battle-move::after { position: absolute; inset: 5px; border: 1px solid #6d8090a3; border-radius: 50%; content: ''; pointer-events: none; }
.battle-move.rock { color: #43eaf4; }
.battle-move.scissors { border-color: #717d8e; color: #ed7cf4; }
.battle-move.paper { border-color: #717d8e; color: #76caff; }
.battle-move:active { transform: scale(.96); }
.battle-move:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.battle-move:disabled { opacity: .46; filter: saturate(.7); }
.battle-move.selected,.battle-move.powered { border-color: currentColor; background: linear-gradient(145deg, #0c2939, #111027); box-shadow: 0 0 0 2px #29e4ed2b, 0 0 24px #0adfec33, inset 0 0 20px #06e3f519; opacity: 1; }
.battle-move.selected::after,.battle-move.powered::after { border-color: #43e8f4; }
.battle-move-art { display: grid; width: clamp(66px, 68%, 128px); height: clamp(62px, 68%, 128px); place-items: center; }
.battle-move-art .move-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 11px #04dff765); }
.battle-move.scissors .move-art { filter: drop-shadow(0 0 12px #ed35f581); }
.battle-move b,.battle-move small { display: none; }
.battle-power-mark { width: 19px; height: 19px; object-fit: contain; }
.battle-statusbar {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
  border-top: 1px solid #d4e6f414;
  color: #95a7bc;
  font-size: 10px;
}
.battle-statusbar > span { display: flex; align-items: center; gap: 5px; }
.battle-statusbar img { width: 21px; height: 21px; object-fit: contain; }
.status-light { width: 7px; height: 7px; background: #5af7ab; box-shadow: 0 0 10px #40ffa7; }
.battle-search-state {
  display: flex;
  width: min(100%, 500px);
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 28px);
  align-self: center;
  padding: 20px 8px max(18px, env(safe-area-inset-bottom));
  text-align: center;
}
.search-duelists { display: grid; width: min(100%, 420px); grid-template-columns: 1fr 92px 1fr; align-items: center; gap: 8px; }
.search-avatar { width: clamp(92px, 25vw, 134px); aspect-ratio: 1; justify-self: center; overflow: hidden; border: 2px solid #11dce8; border-radius: 50%; background: #071321; box-shadow: 0 0 0 7px #04e5ef13, 0 0 35px #08dff547; }
.search-avatar.rival { border-color: #e746ed; box-shadow: 0 0 0 7px #e33cfa13, 0 0 35px #e33cfa47; }
.search-avatar .avatar-art { width: 100%; height: 100%; object-fit: cover; }
.search-pulse { position: relative; display: grid; width: 86px; height: 86px; place-items: center; }
.search-pulse span { color: #eaf5ff; font: 700 16px/1 var(--display); text-shadow: 0 0 13px #fc3df5; }
.search-pulse i { position: absolute; inset: 7px; border: 1px solid #11e9ec8c; border-radius: 50%; animation: battle-search-pulse 1.5s ease-out infinite; }
.search-pulse i:nth-child(2) { animation-delay: .5s; }
.search-pulse i:nth-child(3) { animation-delay: 1s; border-color: #e33bfb85; }
.search-state-copy { max-width: 430px; }
.battle-eyebrow { color: #32e4eb; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.search-state-copy h1 { margin: 7px 0 9px; color: #f4f7ff; font: 400 clamp(26px, 7vw, 39px)/1.05 var(--display); text-transform: uppercase; }
.search-state-copy p { margin: 0 auto; color: #aab9cc; font-size: 14px; line-height: 1.5; }
.search-progress { display: flex; gap: 9px; }
.search-progress i { width: 9px; height: 9px; border-radius: 50%; background: #16e0e8; box-shadow: 0 0 13px #16e0e8; animation: search-dot 1.1s ease-in-out infinite; }
.search-progress i:nth-child(2) { animation-delay: .15s; }
.search-progress i:nth-child(3) { animation-delay: .3s; }
.is-waiting .search-avatar.rival { animation: bot-arrive .55s cubic-bezier(.16,.8,.3,1.2) both; }
.battle-secondary-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 1px solid #647b94;
  border-radius: 8px;
  background: #09111e;
  color: #d4e0ef;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.battle-secondary-button:active { transform: scale(.98); }

/* Result focus and art composition. */
.result-modal { width: min(100%,760px); gap: 0; }
.result-content {
  display: flex;
  width: min(100%, 610px);
  min-height: 0;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: clamp(4px, .85vh, 9px);
  padding: 6px 0 max(9px, env(safe-area-inset-bottom));
  text-align: center;
}
.result-modal .result-content { width: 100%; max-width: 720px; }
.result-context { color: #a7b8cc; font-size: 10px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; }
.result-context span { margin: 0 4px; color: #ed4df4; }
.result-impact-stage {
  position: relative;
  display: grid;
  width: min(100%, 720px);
  height: clamp(210px, min(62vw, 35svh), 390px);
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 55%, #07253c87, #03071100 68%);
}
.result-impact-stage::before {
  position: absolute;
  top: 51%;
  right: 8%;
  left: 8%;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #06e9ed9c 33%, #ef45efc9 68%, transparent);
  content: '';
  box-shadow: 0 0 19px #07e9f28a;
}
.result-impact-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f4fcff;
  opacity: 0;
  box-shadow: 0 0 15px 7px #fff, 0 0 43px 21px #ed37ff, 0 0 67px 30px #00eaf3;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
}
.no-impact .result-impact-light { display: none; }
.result-draw-art { display: flex; width: 82%; height: 75%; align-items: center; justify-content: space-around; }
.result-draw-art > div { width: 36%; height: 100%; }
.result-draw-item { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 15px #00dcf485); }
.result-draw-art > span { color: #f1f6ff; font: 700 16px var(--display); }
.result-duel-art { display: grid; width: min(92%, 680px); height: 84%; place-items: center; }
.result-art-row { display: flex; width: 100%; height: 100%; align-items: center; justify-content: space-between; gap: clamp(8px, 4vw, 30px); }
.result-duel-artifact { position: relative; display: grid; width: 40%; height: 100%; place-items: center; isolation: isolate; }
.result-duel-artifact .duel-item { display: block; width: 100%; height: 100%; object-fit: contain; }
.result-duel-artifact .duel-item { position: relative; z-index: 1; filter: drop-shadow(0 0 15px #00dcf45c); }
.result-duel-artifact.opponent-side .duel-item { filter: drop-shadow(0 0 15px #e73bff4f); }
.result-outcome {
  margin: 0;
  color: #42f475;
  font: 400 clamp(70px, 17vw, 130px)/.92 var(--display);
  letter-spacing: 2px;
  text-shadow: 0 0 9px currentColor, 0 0 30px currentColor;
  text-transform: uppercase;
}
.result-outcome.loss { color: #ff648b; }
.result-outcome.draw { color: #ffd465; }
.result-score { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; color: #f5f8ff; direction: ltr; unicode-bidi: isolate; font: 400 clamp(56px, 13vw, 95px)/.9 var(--display); letter-spacing: 2px; text-shadow: 0 0 20px #eef6ff30; }
.result-score i { color: #78899d; font-size: .7em; font-style: normal; }
.result-player-cards { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 4px 0 0; }
.result-player-card {
  display: grid;
  min-width: 0;
  min-height: 75px;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid #0edfe48c;
  border-radius: 7px;
  background: linear-gradient(140deg, #071721ee, #08101bf5);
  box-shadow: inset 0 0 20px #00dff20e;
  text-align: left;
}
.result-player-card.player-two { border-color: #e341ee9c; background: linear-gradient(140deg, #110e20, #0d101b); }
.result-player-avatar { width: 46px; height: 46px; overflow: hidden; border: 1px solid #12e3eb; border-radius: 50%; background: #07111f; }
.player-two .result-player-avatar { border-color: #ea4ff0; }
.result-player-avatar .avatar-art { width: 100%; height: 100%; object-fit: cover; }
.result-player-card > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.result-player-card .result-player-role { color: #9eacc0; font-size: 8px; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.result-player-card.is-you .result-player-role { color: #1adbe9; }
.result-player-card.is-opponent .result-player-role { color: #e968f0; }
.result-player-card strong { min-width: 0; overflow: hidden; color: #f3f7ff; font-size: 12px; font-weight: 700; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.result-player-card small { overflow: hidden; color: #aebed0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.result-player-card > div > span { color: #1adbe9; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.player-two.result-player-card > div > span { color: #e968f0; }
.result-player-card b { margin-left: 3px; font-size: 10px; }
.result-reward {
  display: flex;
  width: min(100%, 380px);
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px;
  border: 1px solid #f4cb5354;
  border-radius: 6px;
  background: #f7cf380e;
  color: #e4d3a0;
  font-size: 11px;
  text-align: left;
}
.result-reward strong { color: #ffd34e; font: 700 21px/1 var(--display); }
.result-reward small { margin-left: 5px; font: 700 10px var(--body); letter-spacing: .8px; }
.result-reactions { display:flex; width:min(100%,380px); min-height:34px; align-items:center; justify-content:center; gap:8px; color:#aebed0; font-size:9px; letter-spacing:.7px; text-transform:uppercase; }
.result-reactions > div { display:flex; align-items:center; gap:5px; }
.result-reactions button { display:grid; width:34px; height:34px; place-items:center; border:1px solid #2c4657; border-radius:50%; background:#081420; font-size:18px; transition:transform .18s,border-color .18s,background .18s; }
.result-reactions button:hover:not(:disabled),.result-reactions button[aria-pressed="true"] { border-color:#14dbe9; background:#0a2a36; transform:translateY(-2px) scale(1.06); }
.result-reactions button:disabled { opacity:.62; }
.result-reactions small { color:#20dce8; font-size:9px; }
.result-actions { display: grid; width: min(100%, 440px); grid-template-columns: 1.3fr 1fr; gap: 8px; margin-top: auto; padding-top: 7px; }
.result-actions .primary-button,.result-actions .battle-secondary-button { min-height: 50px; margin: 0; font-size: 12px; }
.result-actions .primary-button { justify-content: center; }
.result-actions .primary-button svg { width: 20px; height: 20px; }
.result-nav {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  width: calc(100% + 28px);
  min-height: 64px;
  grid-template-columns: repeat(3,1fr);
  align-items: center;
  gap: 4px;
  margin: 5px -14px calc(-7px - env(safe-area-inset-bottom));
  padding: 5px max(9px, env(safe-area-inset-left)) max(5px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-right));
  border-top: 1px solid #254254;
  background: #040912f5;
}
.result-nav button {
  display: flex;
  min-width: 0;
  min-height: 50px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #a8b8ca;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.result-nav button:active { color: #24e3ed; transform: scale(.96); }
.result-nav button img { width: clamp(48px, 13vw, 70px); height: clamp(48px, 13vw, 70px); object-fit: contain; }
.result-nav button:first-child { color: #29e8ef; }
.result-settings-glyph { font-size: 23px; line-height: 22px; }
.result-modal .battle-header { margin-bottom: 0; }
.has-active-duel .toast { z-index: 100; }

@media (max-width: 420px) {
  .battle-live-label { max-width: 36vw; }
  .battle-move b { display: block; font-size: clamp(8px, 2.6vw, 10px); line-height: 1; letter-spacing: .25px; text-shadow: 0 1px 4px #000; }
}

@media (max-width: 380px) {
  .duel-modal { padding-right: 10px; padding-left: 10px; }
  .battle-header { grid-template-columns: minmax(0,1fr) minmax(0,auto) 44px; margin-right: -10px; margin-left: -10px; padding-right: 9px; padding-left: 9px; }
  .battle-live-label { max-width: 32vw; font-size: 9px; letter-spacing: .4px; }
  .battle-main { grid-template-rows: auto auto minmax(206px,1fr) auto auto; gap: 6px; }
  .choice-overlay .battle-main { grid-template-rows: auto minmax(206px, 1fr) auto; gap: 10px; }
  .opponent-banner { min-height: 76px; grid-template-columns: 62px minmax(0,1fr) auto; gap: 8px; padding: 6px; }
  .opponent-portrait { width: 62px; height: 62px; }
  .opponent-power { display: none; }
  .opponent-profile-button { width: 40px; height: 40px; }
  .battle-timer-ring { width: min(82vw, 300px); }
  .battle-timer-inner strong { font-size: clamp(74px, 28vw, 112px); }
  .battle-move { min-height: 0; }
  .battle-move-art { width: clamp(66px, 68%, 106px); height: clamp(62px, 68%, 106px); }
  .battle-choice-heading p { display: none; }
  .result-player-cards { gap: 5px; }
  .result-player-card { grid-template-columns: 38px minmax(0,1fr); gap: 6px; padding: 5px; }
  .result-player-avatar { width: 38px; height: 38px; }
  .result-player-card strong { font-size: 10px; }
  .result-player-card small { font-size: 9px; }
  .result-player-card > div > span { font-size: 8px; }
  .result-nav { width: calc(100% + 20px); margin-right: -10px; margin-left: -10px; }
}

/* Keep the angular result controls while allowing long localized labels to remain readable. */
@media (max-width: 380px) {
  .result-nav button { clip-path: none; }
  .result-nav button::before,
  .result-nav button::after { clip-path: polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%); }
}

@media (max-height: 720px) and (orientation: portrait) {
  .battle-main { grid-template-rows: auto auto minmax(190px, 1fr) auto auto; gap: 5px; padding-top: 8px; }
  .choice-overlay .battle-main { grid-template-rows: auto minmax(190px, 1fr) auto; gap: 6px; }
  .opponent-banner { min-height: 72px; }
  .opponent-portrait { width: 58px; height: 58px; }
  .battle-playfield { min-height: 190px; }
  .battle-timer-ring { width: min(82vw, 42vh, 300px); }
  .battle-timer-ring::before { inset: 6px; }
  .battle-timer-ring::after { inset: 13px; }
  .battle-timer-inner strong { font-size: clamp(74px, 27vw, 108px); }
  .battle-move { min-height: 0; }
  .battle-move-art { width: clamp(72px, 68%, 116px); height: clamp(68px, 68%, 110px); }
  .battle-statusbar { min-height: 27px; }
  .result-content { gap: 3px; }
  .result-impact-stage { height: clamp(170px, 29svh, 220px); }
  .result-player-card { min-height: 65px; }
  .result-actions { padding-top: 3px; }
  .result-actions .primary-button,.result-actions .battle-secondary-button { min-height: 46px; }
  .result-nav { min-height: 58px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .duel-modal { width: min(100%, 900px); padding-right: max(18px, env(safe-area-inset-right)); padding-left: max(18px, env(safe-area-inset-left)); }
  .battle-header { min-height: 44px; flex-basis: 44px; margin-right: -18px; margin-left: -18px; padding: 0 16px; }
  .battle-header .battle-brand { min-height: 40px; }
  .battle-brand img { width: 108px; max-height: 36px; }
  .battle-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto auto 1fr auto; gap: 5px 16px; padding-top: 5px; }
  .choice-overlay .battle-main { grid-template-rows: auto 1fr; }
  .opponent-banner { grid-column: 1; grid-row: 1; min-height: 58px; grid-template-columns: 44px minmax(0,1fr) auto 40px; padding: 4px; }
  .opponent-portrait { width: 44px; height: 44px; }
  .opponent-profile-button { width: 38px; height: 38px; }
  .battle-scoreline { grid-column: 2; grid-row: 1; min-height: 58px; }
  .battle-playfield { grid-column: 1; grid-row: 2 / 4; min-height: 155px; }
  .battle-timer-ring { width: min(32vh, 190px); }
  .battle-timer-inner strong { font-size: min(17vh, 76px); }
  .battle-choice-area { grid-column: 2; grid-row: 2 / 4; justify-content: center; }
  .choice-overlay .battle-playfield,.choice-overlay .battle-choice-area { grid-row: 2; }
  .battle-choice-heading { display: block; }
  .battle-choice-heading p { max-width: 100%; margin-top: 3px; text-align: left; }
  .battle-moves { gap: 5px; }
  .battle-move { min-height: 0; padding: 4px 2px; }
  .battle-move-art { width: clamp(44px, 68%, 70px); height: clamp(42px, 68%, 66px); }
  .battle-move b { font-size: 10px; }
  .battle-move small { font-size: 9px; }
  .battle-statusbar { grid-column: 1 / -1; grid-row: 4; min-height: 25px; }
  .result-modal { width: min(100%, 900px); }
}
.tournament-bracket-view { display: flex; flex-direction: column; gap: 14px; }
.bracket-back { align-self: flex-start; min-height: 36px; }
.tournament-bracket-view > header { padding: 12px 14px; border: 1px solid #20ddec42; border-radius: 10px; background: linear-gradient(120deg,#06202a,#121325); }
.tournament-bracket-view > header h2 { margin: 3px 0; font: 20px var(--display); }
.tournament-bracket-view > header p { margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.bracket-rounds { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 1px 10px; scroll-snap-type: x proximity; }
.bracket-round { flex: 0 0 min(245px,82vw); display: flex; flex-direction: column; gap: 7px; scroll-snap-align: start; }
.bracket-round > h3 { margin: 0; padding: 8px 10px; border-bottom: 1px solid #21ddeb45; color: var(--cyan); font: 12px var(--display); text-transform: uppercase; }
.bracket-round > h3 small { float: right; color: var(--muted); font: 9px var(--body); }
.bracket-match { display: grid; gap: 1px; padding: 8px; border: 1px solid #304159; border-radius: 8px; background: #0a111e; }
.bracket-player { display: flex; min-width: 0; justify-content: space-between; gap: 8px; padding: 5px 6px; color: #c2cddd; font-size: 10px; }
.bracket-player b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-player strong { color: #8a9ab1; font: 13px var(--display); }
.bracket-player.winner { color: #63f5b0; background: #32f5aa0d; }
.bracket-player.winner strong { color: #63f5b0; }
.bracket-match-state { padding: 4px 6px 0; color: var(--subtle); font-size: 8px; text-transform: uppercase; }
.bracket-match.playing { border-color: #20ddeb70; box-shadow: inset 0 0 16px #20ddeb0b; }
.bracket-match.playing .bracket-match-state { color: var(--cyan); }
@media (max-width: 520px) {
  .championship-events article { flex-wrap: wrap; }
  .championship-events article > div { min-width: 140px; }
  .championship-events article > button { min-height: 34px; padding-inline: 10px; font-size: 8px; }
  .bracket-round { flex-basis: min(220px,78vw); }
}
@media (prefers-reduced-motion: reduce) {
  .battle-timer-ring,.battle-move,.result-nav button { transition: none; }
}

/* Match the supplied portrait result frame: impact, winning move, score, round and hex nav. */
.result-modal .battle-header { grid-template-columns: minmax(0,1fr) auto; }
.duel-modal:not(.result-modal) .battle-header { grid-template-columns: minmax(0,1fr) 44px; }
.duel-modal:not(.result-modal) .battle-brand { display: none; }
.duel-modal:not(.result-modal) .battle-live-label { max-width: 100%; justify-self: start; font-size: 10px; letter-spacing: .7px; }
.choice-overlay .battle-header { display: none; }
.choice-overlay .battle-main { padding-top: max(28px,env(safe-area-inset-top)); }
.result-modal .battle-brand { min-height: 58px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.result-modal .battle-brand img { width: clamp(100px,26vw,165px); max-height: 43px; }
.result-modal .battle-brand small { color: #dbe4f0; font: 700 6px/1 var(--display); letter-spacing: 1.2px; text-transform: uppercase; }
.result-modal .battle-live-label.result-live-label {
  display: grid;
  grid-template-columns: 8px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: end;
  column-gap: 7px;
  row-gap: 2px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.result-live-label i { grid-row: 1 / 3; align-self: center; }
.result-live-label b { color: #ef48f7; font-size: 11px; letter-spacing: 1.1px; }
.result-live-label time { grid-column: 2; color: #edf3fb; font: 700 20px/1 var(--display); letter-spacing: 1px; }
.result-modal .battle-header .close-duel { display: none; }
.result-content { gap: clamp(3px,.7vh,8px); }
.result-impact-stage { height: clamp(250px,35svh,400px); }
.result-move-caption {
  display: flex;
  min-width: min(58vw,260px);
  min-height: 38px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 18px;
  border: 1px solid #38ff9690;
  background: #03110cf2;
  color: #35fb86;
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  text-transform: uppercase;
}
.result-move-caption.loss { border-color: #ea4df6a6; color: #e94df5; }
.result-move-caption.draw { border-color: #b5a0ffad; color: #c7a9ff; }
.result-move-caption.draw { display: none; }
.result-move-caption b { font: 700 14px/1.05 var(--display); letter-spacing: 1.2px; }
.result-move-caption span { overflow: hidden; max-width: 54vw; color: #d5dce8; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap; }
.result-round { color: #ec52ef; font: 700 12px/1 var(--display); letter-spacing: 3px; text-transform: uppercase; }
.result-player-card { min-height: 82px; grid-template-columns: 54px minmax(0,1fr); gap: 9px; padding: 8px; }
.result-player-avatar { width: 52px; height: 52px; }
.result-player-card { clip-path: polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px); }
.result-player-avatar { display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #07111f; }
.result-move-icon { display: block; width: 88%; height: 88%; object-fit: contain; }
.result-player-card strong { font-size: 13px; }
.result-player-card small { font-size: 10px; }
.result-player-card>div>span { font-size: 9px; }
.result-player-card b { font-size: 11px; }
.result-nav { min-height: 88px; border-top: 0; background: linear-gradient(180deg,#04091200,#040912f7 24%); }
.result-nav button {
  position: relative;
  isolation: isolate;
  min-height: 75px;
  gap: 0;
  clip-path: polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%);
  color: #d4deea;
  font-size: 10px;
  letter-spacing: .7px;
}
.result-nav button::before,.result-nav button::after { position: absolute; inset: 0; z-index: -1; content: ''; pointer-events: none; clip-path: inherit; }
.result-nav button::before { background: #21dbe9a8; }
.result-nav button::after { inset: 1.5px; background: #050b13; }
.result-nav button:nth-child(3)::before { background: #e344f4b0; }
.result-nav button img { width: clamp(42px,10vw,62px); height: clamp(42px,10vw,62px); }
.result-nav button span { position: relative; z-index: 1; }
@media (max-width:640px) {
  .result-modal .battle-header { min-height: 62px; flex-basis: 62px; margin-inline: -13px; padding-inline: 13px; }
  .result-modal .battle-brand { min-height: 58px; }
  .result-modal .battle-brand img { width: clamp(90px,24vw,156px); }
  .result-modal .battle-brand small { font-size: 5.5px; letter-spacing: 1px; }
  .result-modal .battle-live-label.result-live-label { max-width: 48vw; }
  .result-impact-stage { height: clamp(250px,35svh,400px); }
  .result-outcome { font-size: clamp(60px,16vw,105px); letter-spacing: 1px; }
  .result-outcome.locale-ru { font-size: clamp(40px,13.5vw,100px); max-width: 100%; white-space: nowrap; }
  .result-score { font-size: clamp(52px,14vw,86px); gap: 10px; }
  .result-player-cards { gap: 7px; margin-top: 1px; }
  .result-player-card { min-height: 76px; grid-template-columns: 42px minmax(0,1fr); gap: 6px; padding: 6px; }
  .result-player-avatar { width: 40px; height: 40px; }
  .result-player-card strong { font-size: 11px; }
  .result-player-card small { font-size: 9px; }
  .result-player-card>div>span { font-size: 8px; }
  .result-player-card b { font-size: 10px; }
  .result-reward { display: none; }
  .result-actions { display: grid; width: min(100%,480px); grid-template-columns: 1.2fr 1fr; gap: 7px; margin-top: auto; padding-top: 3px; }
  .result-actions .primary-button,.result-actions .battle-secondary-button { min-height: 46px; padding-inline: 9px; font-size: 10px; }
  .result-nav { width: calc(100% + 26px); min-height: calc(86px + env(safe-area-inset-bottom)); margin: auto -13px calc(-10px - env(safe-area-inset-bottom)); padding: 4px max(7px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left)); }
}
@media (max-width:380px) {
  .result-modal .battle-header { min-height: 62px; flex-basis: 62px; margin-inline: -10px; padding-inline: 9px; }
  .result-modal .battle-brand img { width: 92px; }
  .result-modal .battle-live-label.result-live-label { max-width: 49vw; column-gap: 5px; }
  .result-live-label b { font-size: 9px; letter-spacing: .6px; }
  .result-live-label time { font-size: 17px; }
  .result-move-caption { min-height: 34px; }
  .result-move-caption b { font-size: 12px; }
  .result-move-caption span { font-size: 9px; }
  .result-player-card { grid-template-columns: 36px minmax(0,1fr); gap: 5px; padding: 5px; }
  .result-player-avatar { width: 34px; height: 34px; }
  .result-player-card strong { font-size: 10px; }
  .result-player-card small { font-size: 8px; }
  .result-player-card>div>span { font-size: 7px; }
  .result-player-card b { font-size: 9px; }
}

@media (max-width: 640px) and (max-height: 760px) and (orientation: portrait) {
  .result-modal .battle-header { min-height: 54px; flex-basis: 54px; }
  .result-impact-stage { height: clamp(142px, 23svh, 184px); }
  .result-outcome { font-size: clamp(46px, 13vw, 72px); }
  .result-score { font-size: clamp(42px, 12vw, 62px); }
  .result-player-card { min-height: 61px; }
  .result-player-avatar { width: 34px; height: 34px; }
  .result-actions { padding-top: 0; }
  .result-nav { min-height: calc(68px + env(safe-area-inset-bottom)); }
  .result-nav button img { width: 40px; height: 40px; }
}
@media (max-height:720px) and (orientation:portrait) {
  .result-modal .battle-header { min-height: 56px; flex-basis: 56px; }
  .result-modal .battle-brand { min-height: 54px; }
  .result-modal .battle-brand img { width: 112px; max-height: 34px; }
  .result-modal .battle-brand small { font-size: 5px; }
  .result-live-label b { font-size: 9px; }
  .result-live-label time { font-size: 16px; }
  .result-impact-stage { height: clamp(196px,35svh,230px); }
  .result-content { gap: 2px; padding-top: 2px; padding-bottom: 0; }
  .result-move-caption { min-height: 30px; }
  .result-outcome { font-size: clamp(48px,12vw,60px); }
  .result-score { font-size: clamp(44px,11vw,60px); }
  .result-player-card { min-height: 58px; grid-template-columns: 34px minmax(0,1fr); gap: 5px; padding: 4px; }
  .result-player-avatar { width: 32px; height: 32px; }
  .result-player-card strong { font-size: 9px; }
  .result-player-card small { font-size: 7px; }
  .result-player-card>div>span { font-size: 7px; }
  .result-player-card b { font-size: 8px; }
  .result-nav { min-height: calc(64px + env(safe-area-inset-bottom)); margin-top: auto; }
  .result-nav button { min-height: 58px; }
  .result-nav button img { width: 40px; height: 40px; }
}
/* Keep the supplied TRIX / LIVE MATCH masthead visible during the move selection. */
.choice-overlay .battle-header {
  display: grid;
  min-height: 58px;
  flex-basis: 58px;
  grid-template-columns: minmax(0,1fr) auto;
  margin-inline: -14px;
  padding-inline: 9px;
  border-bottom-color: #11d9ec55;
  background: #02060df2;
}
.choice-overlay .battle-brand {
  min-height: 54px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
}
.duel-overlay.choice-overlay .battle-brand { display: flex; }
.duel-overlay.choice-overlay .battle-header { grid-template-columns: minmax(0,1fr) auto; }
.choice-overlay .battle-brand img { width: clamp(96px,27vw,156px); max-height: 37px; }
.choice-overlay .battle-brand small { color: #dbe4f0; font: 700 6px/1 var(--display); letter-spacing: 1.1px; text-transform: uppercase; }
.choice-overlay .battle-live-label.result-live-label {
  display: grid;
  grid-template-columns: 8px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: end;
  column-gap: 7px;
  row-gap: 2px;
  max-width: 49vw;
  overflow: visible;
  white-space: nowrap;
}
.choice-overlay .battle-live-label.result-live-label i { grid-row: 1 / 3; align-self: center; }
.choice-overlay .battle-live-label.result-live-label time { grid-column: 2; color: #edf3fb; font: 700 18px/1 var(--display); letter-spacing: 1px; }
.choice-overlay .battle-live-label.result-live-label b { font-size: 10px; }
.choice-overlay .battle-live-label.result-live-label time { font-size: 18px; }
.choice-overlay .close-duel { display: none; }
.choice-overlay .battle-main { padding-top: 8px; }
@media (max-width:380px) {
  .choice-overlay .battle-header { min-height: 52px; flex-basis: 52px; }
  .choice-overlay .battle-brand { min-height: 49px; }
  .choice-overlay .battle-brand img { width: 88px; max-height: 32px; }
  .choice-overlay .battle-live-label.result-live-label { max-width: 50vw; column-gap: 5px; }
  .choice-overlay .battle-live-label.result-live-label b { font-size: 9px; }
  .choice-overlay .battle-live-label.result-live-label time { font-size: 16px; }
}

/* Result sequence: generated raster sprite sheets keep the loser-specific breakup crisp. */
.result-content { --result-elapsed: 0ms; }
.result-impact-stage.artifact-clash-stage {
  background:
    radial-gradient(ellipse at 50% 53%, #1029449c 0, #08101d62 40%, transparent 72%),
    linear-gradient(180deg, #02050b08 44%, #02050b70 100%);
}
.result-duel-art { position: relative; width: min(100%,720px); isolation: isolate; }
.result-duel-art::before {
  position: absolute;
  right: 9%;
  bottom: 4%;
  left: 9%;
  height: 13%;
  border-radius: 50%;
  background: linear-gradient(90deg, #04dff000, #05dbf52e 36%, #ee37f72e 64%, #ed3af000);
  filter: blur(13px);
  content: '';
}
.result-art-row { position: relative; z-index: 1; }
.result-duel-artifact { overflow: visible; }
.artifact-portrait {
  display: block;
  width: min(118%,34svh);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: 0% 0%;
  will-change: transform, opacity;
}
.result-duel-artifact[data-artifact="rock"] .artifact-portrait { background-image: url('/assets/battle/animations/rock-break-sheet.webp?v=20261021-motion4'); }
.result-duel-artifact[data-artifact="paper"] .artifact-portrait { background-image: url('/assets/battle/animations/paper-break-sheet.webp?v=20261021-motion4'); }
.result-duel-artifact[data-artifact="scissors"] .artifact-portrait { background-image: url('/assets/battle/animations/scissors-break-sheet.webp?v=20261021-motion4'); }
.result-duel-artifact.player-side.winner .artifact-portrait { animation: result-winner-drive 560ms calc(70ms - var(--result-elapsed)) cubic-bezier(.16,.82,.2,1) both; }
.result-duel-artifact.opponent-side.winner .artifact-portrait { animation: result-winner-drive-reverse 560ms calc(70ms - var(--result-elapsed)) cubic-bezier(.16,.82,.2,1) both; }
.result-content .result-duel-artifact.loser .artifact-portrait { animation: result-loser-hit 540ms calc(180ms - var(--result-elapsed)) ease-in both; }
.artifact-break-sprite {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: block;
  width: min(142%, 34svh, 380px);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.84);
  /* Keep the sprite sheet paint-based; only hint its transform and opacity layers. */
  will-change: opacity, transform;
}
.result-duel-artifact[data-artifact="rock"] .artifact-break-sprite { background-image: url('/assets/battle/animations/rock-break-sheet.webp?v=20261021-motion4'); }
.result-duel-artifact[data-artifact="paper"] .artifact-break-sprite { background-image: url('/assets/battle/animations/paper-break-sheet.webp?v=20261021-motion4'); }
.result-duel-artifact[data-artifact="scissors"] .artifact-break-sprite { background-image: url('/assets/battle/animations/scissors-break-sheet.webp?v=20261021-motion4'); }
.result-duel-artifact.loser .artifact-break-sprite { animation: result-artifact-break 720ms calc(360ms - var(--result-elapsed)) steps(1,end) both; }
.result-clash-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: clamp(14px,4vw,30px);
  aspect-ratio: 1;
  border: 2px solid #f4fcff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 9px 3px #fff, 0 0 24px 8px #06e8f3, 0 0 40px 14px #ea3ef3;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.1);
  animation: result-core-burst 440ms calc(300ms - var(--result-elapsed)) cubic-bezier(.16,.82,.2,1) both;
}
.artifact-clash-stage .result-impact-light { animation: result-flash 400ms calc(280ms - var(--result-elapsed)) ease-out both; }
.result-clash-core::after {
  position: absolute;
  inset: -3px;
  border: 2px solid #9ffbff;
  border-radius: 50%;
  content: '';
  opacity: 0;
  pointer-events: none;
  animation: result-shockwave 600ms calc(300ms - var(--result-elapsed)) ease-out both;
}
.result-impact-stage.artifact-clash-stage { animation: result-stage-impact 180ms calc(300ms - var(--result-elapsed)) linear both; }
.result-content:not(.draw) .result-move-caption { animation-delay: calc(520ms - var(--result-elapsed)); }
.result-content:not(.draw) .result-outcome { animation: result-word 500ms calc(640ms - var(--result-elapsed)) cubic-bezier(.16,.82,.2,1) both; }
.result-content:not(.draw) .result-score { animation-delay: calc(790ms - var(--result-elapsed)); }
.result-content:not(.draw) .result-round { animation-delay: calc(870ms - var(--result-elapsed)); }
.result-content:not(.draw) .result-player-card { animation-delay: calc(900ms - var(--result-elapsed)); }
.result-content:not(.draw) .result-player-card.player-two { animation-delay: calc(950ms - var(--result-elapsed)); }
.result-content:not(.draw) .result-reward { animation-delay: calc(820ms - var(--result-elapsed)); }
.result-content:not(.draw) .result-actions { animation-delay: calc(720ms - var(--result-elapsed)); }
@keyframes result-winner-drive {
  0% { opacity: .55; transform: translate3d(-14px,13px,0) scale(.78) rotate(-7deg); }
  38% { opacity: 1; transform: translate3d(21px,-2px,0) scale(1.12) rotate(2deg); }
  58% { transform: translate3d(15px,1px,0) scale(1.04) rotate(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes result-winner-drive-reverse {
  0% { opacity: .55; transform: translate3d(14px,13px,0) scale(.78) rotate(7deg); }
  38% { opacity: 1; transform: translate3d(-21px,-2px,0) scale(1.12) rotate(-2deg); }
  58% { transform: translate3d(-15px,1px,0) scale(1.04) rotate(0); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes result-loser-hit {
  0%,45% { opacity: 1; transform: scale(1) rotate(0); }
  54% { opacity: 1; transform: translate3d(0,0,0) scale(1.07,.94) rotate(-3deg); }
  66% { opacity: .78; transform: translate3d(0,0,0) scale(.98,1.04) rotate(3deg); }
  100% { opacity: .08; transform: translate3d(0,7px,0) scale(.72) rotate(10deg); }
}
@keyframes result-artifact-break {
  0%,10% { opacity: 0; transform: translate(-50%,-50%) scale(.8); background-position: 0% 0%; }
  11% { opacity: 1; transform: translate(-50%,-50%) scale(1); background-position: 0% 0%; }
  23% { background-position: 33.333% 0%; }
  35% { background-position: 66.666% 0%; }
  47% { background-position: 100% 0%; }
  59% { background-position: 0% 100%; }
  71% { background-position: 33.333% 100%; }
  83% { background-position: 66.666% 100%; }
  92% { opacity: .88; background-position: 100% 100%; transform: translate(-50%,-50%) scale(1.04); }
  100% { opacity: .78; background-position: 100% 100%; transform: translate(-50%,-50%) scale(1.02); }
}
@keyframes result-core-burst {
  0%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.1); }
  23% { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }
  52% { opacity: .8; transform: translate(-50%,-50%) scale(2.4); }
}
@keyframes result-shockwave {
  0% { opacity: .8; transform: scale(.5); }
  100% { opacity: 0; transform: scale(6); }
}
@keyframes result-stage-impact {
  0%,100% { translate: 0 0; }
  25% { translate: -3px 1px; }
  55% { translate: 3px -1px; }
}
@media (max-width: 420px) {
  .artifact-break-sprite { width: min(116%, 34svh); }
  .result-art-row { gap: 0; }
  .result-duel-artifact { width: 46%; }
  .result-art-row > .reveal-versus { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .result-clash-core::after { animation: none !important; }
  .result-impact-stage.artifact-clash-stage,
  .result-duel-artifact .artifact-portrait,
  .artifact-break-sprite,
  .result-clash-core { animation: none !important; }
  .result-duel-artifact.loser .artifact-portrait { opacity: 0; }
  .result-duel-artifact.loser .artifact-break-sprite { opacity: 1; background-position: 100% 100%; transform: translate(-50%,-50%); }
  .result-clash-core { display: none; }
}
@media (max-width: 380px) and (max-height: 620px) and (orientation: portrait) {
  .result-modal .battle-header { min-height: 48px; flex-basis: 48px; margin-inline: -10px; padding-inline: 8px; }
  .result-modal .battle-brand { min-height: 46px; }
  .result-modal .battle-brand img { width: 96px; max-height: 28px; }
  .result-modal .battle-brand small { font-size: 4px; }
  .result-impact-stage { height: clamp(136px,26svh,156px); }
  .result-content { gap: 2px; padding-top: 0; padding-bottom: 0; }
  .result-move-caption { min-height: 26px; padding-block: 2px; }
  .result-move-caption b { font-size: 10px; }
  .result-move-caption span { font-size: 8px; }
  .result-outcome,.result-outcome.locale-ru { font-size: clamp(35px,11vw,45px); }
  .result-score { font-size: clamp(38px,12vw,46px); }
  .result-round { font-size: 9px; }
  .result-player-card { min-height: 50px; grid-template-columns: 30px minmax(0,1fr); gap: 4px; padding: 3px; }
  .result-player-avatar { width: 28px; height: 28px; }
  .result-player-card strong { font-size: 8px; }
  .result-player-card small,.result-player-card>div>span { font-size: 7px; }
  .result-actions { gap: 5px; padding-top: 0; }
  .result-actions .primary-button,.result-actions .battle-secondary-button { min-height: 40px; font-size: 9px; }
  .result-nav { min-height: calc(54px + env(safe-area-inset-bottom)); }
  .result-nav button { min-height: 48px; font-size: 8px; }
  .result-nav button img { width: 30px; height: 30px; }
}

@media (min-width:600px) and (orientation:landscape) {
  .result-reactions { grid-column:2; grid-row:5; }
  .result-actions { grid-row:6; }
}
@media (orientation:landscape) and (max-height:520px) {
  .result-reactions { display:none; }
}

/* Compact result composition for short landscape phones. Keep the impact art
   and captions in the left column and scores/actions in the right column. */
@media (orientation:landscape) and (max-height:520px) {
  .result-content {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    grid-template-rows: 0 minmax(0,1fr) 0 26px 40px 34px 12px 46px;
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
  }
  .result-context { grid-column: 1; grid-row: 1; }
  .result-impact-stage { grid-column: 1; grid-row: 1 / 4; width: 100%; height: 100%; min-height: 0; }
  .result-move-caption { grid-column: 1; grid-row: 4; justify-self: center; min-height: 24px; padding-block: 2px; }
  .result-move-caption b { font-size: 11px; }
  .result-move-caption span { font-size: 8px; }
  .result-outcome { grid-column: 1; grid-row: 5; align-self: center; font-size: clamp(28px,8vh,38px); line-height: 1; }
  .result-score { grid-column: 1; grid-row: 6; align-self: center; font-size: clamp(32px,9vh,40px); }
  .result-round { grid-column: 1; grid-row: 7; align-self: center; font-size: 9px; }
  .result-player-cards { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .result-player-card { min-height: 52px; grid-template-columns: 36px minmax(0,1fr); gap: 5px; padding: 5px; }
  .result-player-avatar { width: 34px; height: 34px; }
  .result-player-card strong { font-size: 10px; }
  .result-player-card small { font-size: 8px; }
  .result-reward { grid-column: 2; grid-row: 4; }
  .result-actions { grid-column: 2; grid-row: 5; align-self: center; margin: 0; padding: 0; }
  .result-actions .primary-button,.result-actions .battle-secondary-button { min-height: 40px; padding-inline: 6px; font-size: 9px; }
  .result-nav { grid-column: 1 / -1; grid-row: 8; min-height: 46px; margin: 0; padding: 0; }
  .result-nav button { min-height: 44px; font-size: 8px; }
  .result-nav button img { width: 32px; height: 32px; }
}
@media (orientation:landscape) and (max-height:520px) and (min-width:600px) {
  .result-actions { grid-row: 6; }
}

/* Mid-height landscape windows need the same no-overlap guarantee as phones. */
@media (orientation:landscape) and (min-height:521px) and (max-height:800px) {
  .result-content {
    display: grid;
    min-height: 0;
    flex: 0 0 auto;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    grid-template-rows: clamp(170px,35vh,250px) 32px 54px 48px 14px 64px;
    column-gap: 16px;
    row-gap: 2px;
    padding: 2px 0 4px;
    margin-block: auto;
  }
  .result-context { grid-column: 1; grid-row: 1; }
  .result-impact-stage { grid-column: 1; grid-row: 1 / 3; width: 100%; height: 100%; min-height: 0; }
  .result-move-caption { grid-column: 1; grid-row: 2; min-height: 28px; }
  .result-outcome { grid-column: 1; grid-row: 3; font-size: clamp(32px,4vw,52px); white-space: nowrap; }
  .result-content .result-outcome.no-contest { font-size: clamp(28px,3.4vw,42px); overflow-wrap: normal; }
  .result-score { grid-column: 1; grid-row: 4; font-size: clamp(34px,4vw,52px); }
  .result-round { grid-column: 1; grid-row: 5; }
  .result-player-cards { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .result-player-card { min-height: 62px; grid-template-columns: 42px minmax(0,1fr); gap: 6px; padding: 6px; }
  .result-player-avatar { width: 40px; height: 40px; }
  .result-player-card strong { font-size: 11px; }
  .result-player-card small { font-size: 9px; }
  .result-reward,.result-reactions { display: none; }
  .result-actions { grid-column: 2; grid-row: 4 / 6; align-self: center; margin: 0; padding: 0; }
  .result-actions .primary-button,.result-actions .battle-secondary-button { min-height: 42px; padding-inline: 7px; font-size: 9px; }
  .result-nav { grid-column: 1 / -1; grid-row: 6; width: 100%; min-height: 64px; margin: 0; padding: 0 8px; }
  .result-nav button { min-height: 58px; }
  .result-nav button img { width: 38px; height: 38px; }
}

/* Accepted friends can message each other without leaving the friends sheet. */
.friend-item{gap:7px}.friend-item .secondary-button{flex:none}.friend-item [data-action="friend-chat"]{border-color:#1b8291;color:#71f2f4}
.friend-chat-sheet{height:min(78dvh,720px);max-height:calc(100dvh - env(safe-area-inset-top) - 24px);display:flex;flex-direction:column}
.friend-chat-sheet .sheet-content{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
.friend-chat-messages{min-height:140px;flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:9px;padding:12px 2px}
.friend-chat-message{position:relative;align-self:flex-start;max-width:min(86%,420px);padding:9px 12px 20px;border:1px solid #24475a;border-radius:12px 12px 12px 3px;background:#0c1a29}
.friend-chat-message.mine{align-self:flex-end;border-color:#087d8b;background:#06222b;border-radius:12px 12px 3px 12px}
.friend-chat-message b{font-size:9px;color:var(--cyan);letter-spacing:.4px}
.friend-chat-message p{margin:3px 0 0;font-size:12px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.friend-chat-message time{position:absolute;right:9px;bottom:4px;font-size:8px;color:var(--subtle)}
.friend-chat-empty{margin:auto;color:var(--muted);font-size:12px;text-align:center}
.friend-chat-form{display:flex;gap:8px;padding-top:10px;border-top:1px solid #ffffff12}
.friend-chat-form input{height:44px;min-width:0;flex:1;padding:0 12px;border:1px solid #29394f;border-radius:10px;background:#09111d;font-size:12px}
.friend-chat-form .send-button{width:46px;height:44px;flex:none}
@media(max-width:430px){.friend-item{gap:5px}.friend-item b{font-size:9px}.friend-item .avatar{width:29px;height:29px}.friend-item .secondary-button{min-height:30px;padding:0 6px;font-size:7px}.friend-chat-sheet{height:min(82dvh,720px)}}
.result-outcome.no-contest{width:100%;padding:0 4px;font-size:clamp(30px,9vw,86px);line-height:.96;letter-spacing:0;overflow-wrap:anywhere}
@media(max-width:359px){.result-outcome.no-contest{font-size:clamp(27px,8.5vw,36px)}}

/* Mobile controls keep a full-size touch target even when their label is compact. */
@media (max-width: 640px) {
  .app-shell button[data-action],
  .app-shell button[data-route] { min-height: 44px; }
  .app-shell a[data-route] { min-height: 44px; }
  .app-shell .arena-tournament,
  .app-shell .arena-settings,
  .app-shell .route-back,
  .app-shell .route-settings,
  .app-shell .icon-button { min-width: 44px; }
  .app-shell .result-reactions button { width: 44px; height: 44px; }
  .app-shell .toggle {
    position: relative;
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .app-shell .toggle::before {
    position: absolute;
    width: 35px;
    height: 20px;
    border: 1px solid #3d4a5d;
    border-radius: 12px;
    background: #1c283a;
    content: '';
  }
  .app-shell .toggle.on::before { border-color: #22e8f1a1; background: #22e8f131; }
  .app-shell .toggle i { position: relative; z-index: 1; justify-self: start; }
}

@media (max-width: 380px) {
  .app-shell .result-reactions { flex-direction: column; gap: 3px; }
  .app-shell .result-reactions > div { gap: 4px; }
}
@media (max-width: 640px) {
  .store-details > .eyebrow { font-size: 10px; letter-spacing: .8px; }
  .store-details > p { font-size: 11px; line-height: 1.25; }
}
/* Contextual shop links stay with the products; primary navigation remains stable. */
.shop-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.shop-quick-actions button { min-height: 44px; flex: 1 1 145px; }

/* Battle feedback stays above the move controls rather than covering them. */
.has-active-duel .toast { bottom: max(150px, calc(env(safe-area-inset-bottom) + 150px)); }

.rematch-request-card { display: flex; flex-direction: column; gap: 14px; padding: 8px 2px 3px; }
.rematch-request-player { display: flex; align-items: center; gap: 12px; }
.rematch-request-player .avatar { width: 52px; height: 52px; overflow: hidden; }
.rematch-request-player > div { display: flex; flex-direction: column; gap: 3px; }
.rematch-request-player b { color: var(--text); font-size: 15px; }
.rematch-request-player small,.rematch-request-card > p { color: var(--muted); font-size: 12px; }
.rematch-request-card > p { margin: 0; }
.rematch-request-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }