/* Arena + Combat UI V2. Presentation only: combat geometry and action owners stay unchanged. */

:root {
  --arena-v2-ink: #080b09;
  --arena-v2-panel: rgba(13, 18, 15, .94);
  --arena-v2-panel-soft: rgba(23, 28, 22, .88);
  --arena-v2-line: rgba(211, 170, 82, .28);
  --arena-v2-gold: #e1b85d;
  --arena-v2-cyan: #76d3df;
  --arena-v2-red: #dc7770;
}

/* Arena Hub: one place, then one mode decision. */
.arena-hub {
  width: min(1040px, calc(100vw - 28px));
  max-height: min(920px, calc(100dvh - 28px));
  padding: 0;
  overflow: auto;
  border-color: rgba(225, 184, 93, .54);
  border-radius: 20px;
  background: #090d0b;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .72);
}
.arena-hub::backdrop { background: rgba(2, 4, 3, .84); backdrop-filter: blur(4px); }
.arena-hub-header {
  position: sticky;
  z-index: 8;
  top: 0;
  min-height: 62px;
  padding: 10px 12px 9px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(225, 184, 93, .2);
  background: rgba(8, 12, 9, .94);
  backdrop-filter: blur(14px);
}
.arena-hub-header > div { display: grid; gap: 1px; }
.arena-hub-header h2 { margin: 0; font-family: Georgia, serif; font-size: 25px; color: #fff7e8; }
.arena-hub-header .home-kicker { color: #d9ad53; font-size: 10px; letter-spacing: .15em; }
.arena-hub-header > button { width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 25px; }
.arena-hub-scene {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(225, 184, 93, .26);
}
.arena-hub-scene > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.arena-hub-scene-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5, 8, 6, .92) 0%, rgba(5, 8, 6, .52) 43%, rgba(5, 8, 6, .12) 70%), linear-gradient(0deg, #090d0b 0%, transparent 52%); }
.arena-hub-scene-copy { width: min(460px, 58%); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 34px 28px; box-sizing: border-box; }
.arena-hub-scene-copy h3 { margin: 0; max-width: 10ch; color: #fff8e9; font-family: Georgia, serif; font-size: clamp(34px, 4vw, 55px); line-height: .98; }
.arena-hub-scene-copy p { margin: 4px 0 0; max-width: 36ch; color: #d1c6b0; }
.arena-hub-workspace { display: grid; gap: 12px; padding: 18px 20px 20px; }
.arena-hub-resume { margin: 0; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; }
.arena-hub-resume:not([hidden]) { display: grid; }
.arena-hub-resume-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #17140a; background: linear-gradient(145deg, #f0cd73, #9b722e); box-shadow: 0 0 24px rgba(225, 184, 93, .25); }
.arena-hub-resume p { margin: 3px 0 0; color: #c7bda9; }
.arena-hub-resume button { width: auto; min-width: 170px; }
.arena-hub-formats { gap: 12px; }
.arena-hub-format {
  position: relative;
  min-height: 180px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px 13px;
  padding: 16px;
  overflow: hidden;
  border-color: rgba(225, 184, 93, .24);
  background: linear-gradient(145deg, rgba(32, 37, 29, .98), rgba(10, 14, 11, .98));
}
.arena-hub-format::after { content: ""; position: absolute; right: -42px; top: -58px; width: 180px; height: 180px; border: 1px solid rgba(225, 184, 93, .08); border-radius: 50%; box-shadow: 0 0 0 28px rgba(225, 184, 93, .025), 0 0 0 58px rgba(225, 184, 93, .018); pointer-events: none; }
.arena-hub-format[data-state="ready"] { border-color: rgba(225, 184, 93, .45); }
.arena-hub-format-mark { grid-row: 1; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(225, 184, 93, .5); border-radius: 14px; color: #f0c96f; background: rgba(225, 184, 93, .08); font: 700 24px/1 Georgia, serif; }
.arena-hub-format-copy { min-width: 0; display: grid; align-content: start; gap: 5px; }
.arena-hub-format-copy .home-kicker { color: #c99c48; font-size: 10px; }
.arena-hub-format h3 { color: #fff6e4; font: 700 23px/1.08 Georgia, serif; }
.arena-hub-description { max-width: 36ch; }
.arena-hub-status { color: #d8c69f; }
.arena-hub-format > button { grid-column: 1 / -1; position: relative; z-index: 1; min-height: 48px; }
.arena-hub-format #matchmakingStatus { grid-column: 1 / -1; position: relative; z-index: 1; }
.arena-hub-footer { margin: 0; }

/* Spatial combat: the battlefield is the visual owner. */
.actor-3x3-dialog {
  border-color: rgba(225, 184, 93, .48);
  background: #080c0a;
  box-shadow: 0 30px 110px rgba(0, 0, 0, .78);
}
.actor-3x3-dialog::backdrop { background: rgba(1, 3, 2, .91); backdrop-filter: blur(3px); }
.actor-3x3-dialog .team-combat-header {
  position: relative;
  z-index: 90;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(225, 184, 93, .2);
  background: linear-gradient(90deg, rgba(16, 23, 18, .98), rgba(8, 12, 9, .96));
}
.actor-3x3-dialog .team-combat-header h2 { color: #fff5df; font-family: Georgia, serif; }
.actor-3x3-dialog .team-combat-header .home-kicker { color: #d4aa56; letter-spacing: .12em; }
.actor-3x3-dialog .team-combat-close { border-color: rgba(255, 255, 255, .12); border-radius: 12px; background: #31362f; color: #f6f0e4; }
.actor-3x3-dialog[data-ui-v2-flow="active"] { width: min(1600px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
.actor-3x3-dialog[data-ui-v2-flow="active"] .team-combat-shell { padding: 0; }
.actor-3x3-dialog[data-ui-v2-flow="active"] #arenaActor3x3Content { gap: 0; }
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-human-loop {
  border-color: rgba(225, 184, 93, .18);
  background: radial-gradient(circle at 50% 46%, rgba(79, 70, 43, .17), transparent 46%), #090d0b;
}
.actor-3x3-dialog[data-ui-v2-flow="active"] .arena-readable-scroll {
  border-color: rgba(225, 184, 93, .24);
  background: radial-gradient(circle at 50% 43%, rgba(80, 72, 48, .14), transparent 54%), linear-gradient(#0d120f, #080b09);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, .44);
}
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-cell:not(.is-occupied):not(.is-move-option):not(.is-selected-move):not(.is-planned-move):not(.is-team-intent):not(.is-clone-summon-option):not(.is-planned-clone)::before { border-color: rgba(193, 151, 75, .22); background: rgba(31, 34, 28, .72); }
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-cell.is-blocked::before { background: rgba(5, 7, 6, .94); }
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-cell.is-inspected:is(.is-self, .is-ally)::before {
  border-color: #8eeaff;
  background: rgba(21, 94, 118, .92);
  box-shadow: inset 0 0 0 2px rgba(201, 247, 255, .72), 0 0 20px rgba(91, 196, 232, .7);
}
.actor-3x3-dialog[data-ui-v2-flow="active"] .is-overview .actor-3x3-cell.is-inspected:is(.is-self, .is-ally)::before {
  border-color: #8eeaff !important;
  background: rgba(21, 94, 118, .92) !important;
  box-shadow: inset 0 0 0 2px rgba(201, 247, 255, .72), 0 0 20px rgba(91, 196, 232, .7) !important;
}
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-round-dock {
  border-color: rgba(225, 184, 93, .28);
  background: rgba(12, 17, 14, .97);
}
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-plan-bar {
  border-top-color: rgba(225, 184, 93, .2);
  background: rgba(17, 22, 18, .98);
}
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-plan-bar .primary:not(:disabled) {
  border-color: #ebc76e;
  background: linear-gradient(180deg, #6f5421, #493613);
  box-shadow: 0 0 0 1px rgba(255, 218, 126, .16), 0 8px 24px rgba(0, 0, 0, .34);
}
.actor-3x3-dialog[data-ui-v2-flow="active"] .arena-mobile-tools button,
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-movement-actions button,
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-workspaces button { border-color: rgba(225, 184, 93, .2); background: #252a24; }
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-workspaces button.active { color: #f3ce77; border-color: #d2a951; background: #3a301c; }
.actor-3x3-dialog[data-ui-v2-flow="active"] .arena-mobile-action-sheet,
.actor-3x3-dialog[data-ui-v2-flow="active"] .arena-mobile-extras,
.actor-3x3-dialog[data-ui-v2-flow="active"] .arena-mobile-review-sheet,
.actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-owned-clone-tactics[open] {
  border-color: rgba(225, 184, 93, .48);
  background: rgba(10, 15, 12, .985);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .65);
}
.actor-3x3-dialog .arena-overview-hit { border-radius: 9px; box-shadow: 0 9px 26px rgba(0, 0, 0, .66); }
.actor-3x3-dialog .arena-overview-hit.is-counter { box-shadow: 0 0 0 1px rgba(214, 172, 249, .22), 0 9px 26px rgba(0, 0, 0, .66); }
.actor-3x3-dialog .actor-3x3-effect-summary { backdrop-filter: blur(5px); }

/* Preparation, waiting and result belong to the same Arena story. */
.actor-3x3-dialog[data-ui-v2-flow="pre"] .team-combat-shell,
.actor-3x3-dialog[data-ui-v2-flow="post"] .team-combat-shell { background: radial-gradient(circle at 74% 8%, rgba(116, 86, 35, .17), transparent 34%), #0a0f0c; }
.actor-3x3-dialog[data-ui-v2-flow="pre"] .actor-3x3-pre-flow > header,
.actor-3x3-dialog[data-ui-v2-flow="post"] .actor-3x3-post-primary { padding: clamp(17px, 3vw, 32px); border: 1px solid rgba(225, 184, 93, .28); border-radius: 16px; background: linear-gradient(125deg, rgba(47, 43, 28, .78), rgba(10, 15, 12, .94)); }
.actor-3x3-dialog[data-ui-v2-flow="pre"] .actor-3x3-pre-flow > header h3,
.actor-3x3-dialog[data-ui-v2-flow="post"] .actor-3x3-post-primary h3 { max-width: 18ch; color: #fff4dd; font-family: Georgia, serif; font-size: clamp(27px, 4vw, 44px); line-height: 1.03; }
.actor-3x3-dialog[data-ui-v2-flow="pre"] .clone-trial-field-picker,
.actor-3x3-dialog[data-ui-v2-flow="pre"] .actor-3x3-setup-options { gap: 10px; }
.actor-3x3-dialog[data-ui-v2-flow="pre"] .clone-trial-field-choice,
.actor-3x3-dialog[data-ui-v2-flow="pre"] .actor-3x3-setup-options > article,
.actor-3x3-dialog[data-ui-v2-flow="post"] .home-journey-card,
.actor-3x3-dialog[data-ui-v2-flow="post"] .actor-3x3-flow-disclosure { border-color: rgba(225, 184, 93, .22); background: rgba(15, 21, 17, .88); }

/* Classic/training compatibility flow, styled as the same Arena family. */
body[data-game-screen="battle"] #battleScreen { background: radial-gradient(circle at 50% 20%, rgba(109, 81, 34, .13), transparent 42%); }
body[data-game-screen="battle"] .battle-shell { border-color: rgba(225, 184, 93, .3); background: #0b100d; }
body[data-game-screen="battle"] .battle-hud-heading { border-bottom-color: rgba(225, 184, 93, .2); }
body[data-game-screen="battle"] .battle-hud-kicker,
body[data-game-screen="battle"] .battle-hud-live { color: #e0b85e; }
body[data-game-screen="battle"] .battle-scene { border-color: rgba(225, 184, 93, .28); background: radial-gradient(circle at center, rgba(76, 65, 40, .2), transparent 54%), #090d0b; }
body[data-game-screen="battle"] .battle-controls { border-color: rgba(225, 184, 93, .24); background: rgba(13, 18, 15, .96); }
body[data-game-screen="battle"] .battle-result-panel { border-color: rgba(225, 184, 93, .24); background: #0b100d; }

@media (min-width: 960px) and (min-height: 600px) {
  .actor-3x3-dialog[data-ui-v2-flow="active"] { height: calc(100dvh - 16px); }
  .actor-3x3-dialog[data-ui-v2-flow="active"] .team-combat-shell { height: 100%; display: flex; flex-direction: column; }
  .actor-3x3-dialog[data-ui-v2-flow="active"] #arenaActor3x3Content { flex: 1; min-height: 0; overflow: auto; }
  .actor-3x3-dialog[data-ui-v2-flow="active"] .actor-3x3-human-loop { min-height: min(690px, calc(100dvh - 106px)); }
  .actor-3x3-dialog[data-ui-v2-flow="post"] #arenaActor3x3Content { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: start; }
  .actor-3x3-dialog[data-ui-v2-flow="post"] .actor-3x3-post-primary { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .arena-hub { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .arena-hub-header { min-height: 54px; padding: 6px 8px 6px 14px; }
  .arena-hub-header h2 { font-size: 21px; }
  .arena-hub-scene { min-height: 250px; }
  .arena-hub-scene > img { object-position: center center; }
  .arena-hub-scene-shade { background: linear-gradient(0deg, #090d0b 0%, rgba(5, 8, 6, .28) 58%, rgba(5, 8, 6, .14)); }
  .arena-hub-scene-copy { width: 100%; min-height: 250px; justify-content: flex-end; padding: 22px 16px; }
  .arena-hub-scene-copy h3 { max-width: 12ch; font-size: 34px; }
  .arena-hub-scene-copy p { font-size: 13px; }
  .arena-hub-workspace { padding: 12px; }
  .arena-hub-resume { grid-template-columns: 38px minmax(0, 1fr); }
  .arena-hub-resume-mark { width: 36px; height: 36px; }
  .arena-hub-resume button { grid-column: 1 / -1; width: 100%; }
  .arena-hub-format { min-height: 156px; grid-template-columns: 44px minmax(0, 1fr); padding: 13px; }
  .arena-hub-format-mark { width: 42px; height: 42px; font-size: 20px; }
  .arena-hub-format h3 { font-size: 20px; }

  body.arena-combat-focus { padding-bottom: 0 !important; overflow: hidden; }
  body.arena-combat-focus > .app > .global-shell-v2 { visibility: hidden; pointer-events: none; }
  .actor-3x3-dialog[data-ui-v2-flow="active"] { width: 100vw; max-width: 100vw; }
  .actor-3x3-dialog[data-ui-v2-flow="active"] .team-combat-shell { padding: env(safe-area-inset-top) 6px env(safe-area-inset-bottom); }
  .actor-3x3-dialog.is-combat-viewport .team-combat-header { padding: 2px 4px 2px 9px; background: rgba(8, 13, 10, .98); }
  .actor-3x3-dialog.is-combat-viewport .team-combat-header h2 { font-size: 16px; }
  .actor-3x3-dialog.is-combat-viewport .team-combat-close { width: 40px; border-radius: 10px; }
  .actor-3x3-dialog.is-combat-viewport .arena-read-context { color: #dbc99e; }
  .actor-3x3-dialog.is-combat-viewport .arena-readable-scroll { border-radius: 12px; }
  .actor-3x3-dialog.is-mobile-result .team-combat-header { padding: 4px 6px 4px 10px; }

  body[data-game-screen="battle"] { padding-bottom: 0; }
  body[data-game-screen="battle"] > .app > .global-shell-v2 { min-height: 46px; }
  body[data-game-screen="battle"] .global-shell-v2 .screen-tabs { display: none !important; }
  body[data-game-screen="battle"] #battleScreen { min-height: calc(100dvh - 62px); }
  body[data-game-screen="battle"] .battle-shell { padding: 6px; }
  body[data-game-screen="battle"] .battle-hud-heading { min-height: 32px; padding: 3px 6px; }
  body[data-game-screen="battle"] .battle-hud-heading strong { display: none; }
}

@media (max-width: 600px) and (orientation: portrait) {
  .arena-hub-scene { min-height: 220px; }
  .arena-hub-scene-copy { min-height: 220px; }
  .arena-hub-scene-copy h3 { font-size: 30px; }
  .arena-hub-formats { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  .arena-hub { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(430px, 1.2fr); grid-template-rows: 50px minmax(0, 1fr); overflow: hidden; }
  .arena-hub-header { grid-column: 1 / -1; min-height: 50px; }
  .arena-hub-scene { grid-column: 1; grid-row: 2; min-height: 0; }
  .arena-hub-scene-copy { min-height: 100%; padding: 15px; }
  .arena-hub-scene-copy h3 { font-size: 29px; }
  .arena-hub-workspace { grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; padding: 10px; }
  .arena-hub-format { min-height: 132px; padding: 10px; }
  .arena-hub-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-hub-format-mark { display: none; }
  .arena-hub-format { grid-template-columns: 1fr; }
  .arena-hub-format h3 { font-size: 18px; }
  .arena-hub-format > button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-hub *, .actor-3x3-dialog *, body[data-game-screen="battle"] #battleScreen * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}