/* Keep the hit areas tied to the viewport, including the arena's side gutters. */
.in-battle #touch {
  --action-size: 64px;
  --action-gap: 8px;
  --move-size: 64px;
  position: fixed; inset: 0; width: 100%; height: 100dvh;
  margin: 0; padding: 0; z-index: 6; pointer-events: none;
}
.in-battle #touch .dpad {
  position: absolute; left: 0; bottom: 0; width: 44vw; height: 55dvh;
  display: grid !important; grid-template: 1fr / repeat(2, 1fr) !important;
  gap: 0 !important; margin: 0; padding: 0; pointer-events: none;
}
.in-battle #touch .dpad button {
  position: relative; grid-area: auto; width: 22vw; height: 55dvh;
  padding: 0; margin: 0; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  backdrop-filter: none; transform: none; outline: none; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#touch .direction-visual {
  position: absolute; display: grid; place-items: center;
  left: clamp(calc(var(--move-size) / 2), var(--press-x, 50%), calc(100% - var(--move-size) / 2));
  top: clamp(calc(var(--move-size) / 2), var(--press-y, 70%), calc(100% - var(--move-size) / 2));
  width: var(--move-size); height: var(--move-size); border-radius: 50%;
  border: 2px solid #d0ecffab; background: #294e6b70; color: #f0faff;
  box-shadow: inset 0 0 18px #a4d9ff20, 0 0 18px #94ceff25;
  opacity: var(--battle-control-opacity,.86); transform: translate(-50%, -50%) scale(1);
  transition: opacity .1s, transform .1s; pointer-events: none;
}
#touch .dpad .held .direction-visual, #touch .dpad button:focus-visible .direction-visual {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
#touch:not([data-movement-mode=fixed]) .dpad.movement-active button:not(.held) .direction-visual { opacity:0; }
#touch:not([data-movement-mode=fixed]) .dpad:not(.movement-active) .direction-visual { left:50%; top:70%; }
#touch .direction-visual .control-icon { width:48%; height:48%; }
.in-battle #touch .attacks {
  position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: auto !important; height: auto; max-width: none !important;
  display: grid !important; grid-template-columns: repeat(3, var(--action-size)) !important;
  grid-template-rows: var(--action-size) calc(var(--action-size) * 1.65) !important;
  gap: var(--action-gap) !important; align-items: end; justify-items: center;
  pointer-events: none;
}
.in-battle #touch .attacks button {
  --button-tint: 105 184 226;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--action-size); height: var(--action-size); min-width: 0; min-height: 0;
  border-radius: 50% !important; border: 2px solid rgb(var(--button-tint) / .68) !important;
  padding: calc(var(--action-size) * .06) 4px 5px !important; gap: 1px; margin: 0; overflow: hidden; pointer-events: auto;
  background: radial-gradient(circle at 35% 20%, rgb(var(--button-tint) / .22), #10233455 75%) !important;
  color: #edf8ff; box-shadow: inset 0 0 15px rgb(var(--button-tint) / .12), 0 3px 12px #02091033;
  backdrop-filter: none; text-shadow: 0 1px 3px #000b;
  transition: background .1s, border-color .1s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.in-battle #touch .attacks [data-hold=KeyU] { grid-column: 1 !important; grid-row: 1 !important; }
.in-battle #touch .attacks [data-hold=KeyI] { grid-column: 2 !important; grid-row: 1 !important; }
.in-battle #touch .attacks [data-hold=KeyW] { grid-column: 3 !important; grid-row: 1 !important; --button-tint: 155 215 232; }
.in-battle #touch .attacks [data-hold=KeyS] { --button-tint: 140 210 255; }
.in-battle #touch .attacks [data-hold=KeyK] { --button-tint: 255 214 120; color: #fff6d4; }
.in-battle #touch .attacks [data-hold=KeyJ].attack-main {
  grid-column: 2 / 4 !important; grid-row: 2 !important;
  width: calc(var(--action-size) * 1.65); height: calc(var(--action-size) * 1.65);
  --button-tint: 255 138 157; color: #fff1f4;
}
#touch .control-icon { display: block; width: 30%; height: 30%; flex-shrink: 0; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.in-battle #touch .attacks .control-icon { width: 39%; height: 39%; }
#touch .direction-visual .control-icon { width: 48%; height: 48%; }
.in-battle #touch .attacks b {
  display: block; width: 88%; max-width: 88%; max-height: none; overflow: visible;
  font-size: clamp(6px, calc(var(--button-px, var(--action-size)) * .145), 11px) !important;
  line-height: 1.12; font-weight: 700; text-align: center; white-space: normal; overflow-wrap: anywhere;
}
.in-battle #touch .attacks .attack-main b { font-size: clamp(8px, calc(var(--button-px, var(--action-size)) * .16), 13px) !important; }
.in-battle #touch .attacks small { display: none !important; }
.in-battle #touch .attacks em { position: absolute; inset: auto auto 5% 50%; transform: translateX(-50%); display: block; max-width: 80%; padding: 1px 6px; border-radius: 999px; background: #081222b8; color: #ffecb9; font-style: normal; font-size: clamp(11px, calc(var(--action-size) * .16), 18px); line-height: 1.1; white-space: nowrap; text-shadow: 0 1px 4px #000; pointer-events: none; }
.in-battle #touch .attacks em:empty { display: none; }
.in-battle #touch .attacks button.held {
  background: rgb(var(--button-tint) / .48) !important; border-color: #fff !important;
  color: #fff !important; transform: scale(.96); box-shadow: 0 0 20px rgb(var(--button-tint) / .35);
}
.in-battle #touch .attacks [data-hold=KeyO].ultimate-dim {
  filter: grayscale(.82) brightness(.62);
  --button-tint: 92 100 112;
  color: #8d95a3;
  background: radial-gradient(circle at 35% 20%, #3a445255, #141b24cc 75%) !important;
  border-color: #5c6674 !important;
  box-shadow: none;
}
.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready {
  filter: none;
  isolation: isolate;
  overflow: visible !important;
  z-index: 2;
  --button-tint: 255 86 40;
  color: #fff6ec;
  background: radial-gradient(circle at 32% 22%, #ffc078, #ff5a2a 55%, #9a1608 100%) !important;
  border-color: #ffd7a8 !important;
  box-shadow: 0 0 16px #ff5a2acc, 0 0 28px #ff7a3088;
  animation: ultimate-ready-pulse .9s ease-in-out infinite;
}
.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready > * {
  position: relative; z-index: 1;
}
.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready::before,
.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; z-index: 0;
}
.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready::before {
  background: conic-gradient(#ff9a3a, #ffe08a, #ff3d1a, #ff7a2a, #ff9a3a);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 61%);
  mask: radial-gradient(circle, transparent 56%, #000 61%);
  filter: blur(2px); opacity: .9; animation: ultimate-ready-spin 1.6s linear infinite;
}
.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready::after {
  box-shadow: 0 0 18px #ff5a2acc, 0 0 34px #ff7a3066; animation: ultimate-ready-glow .9s ease-in-out infinite;
}
@keyframes ultimate-ready-spin { to { transform: rotate(360deg); } }
/* Moving canvas behind blur and animated box shadows forces repeated raster work. */
.arena-lobby.in-battle .battle-top button,.arena-lobby.in-battle #touch button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.arena-lobby.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready{animation:none!important}
.arena-lobby.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready::before{filter:none!important}
@keyframes ultimate-ready-glow { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.16); } }
@keyframes ultimate-ready-pulse {
  0%, 100% { box-shadow: 0 0 12px #ff5a2a99, 0 0 22px #ff7a3044; }
  50% { box-shadow: 0 0 22px #ff6a2acc, 0 0 38px #ff9a4088; }
}
@media (prefers-reduced-motion: reduce) {
  #touch *, #touch .direction-visual { transition: none !important; }
  .in-battle #touch .attacks [data-hold=KeyO].ultimate-ready,
  .in-battle #touch .attacks [data-hold=KeyO].ultimate-ready::before,
  .in-battle #touch .attacks [data-hold=KeyO].ultimate-ready::after { animation: none !important; }
}

/* The button owns opacity, including its raster art and cooldown overlay. */
#touch .skill-icon { display: none; pointer-events: none; user-select: none; image-rendering: pixelated; object-fit: contain; }
.in-battle:not(.skill-names) #touch .attacks [data-touch-skill] .skill-icon {
  display: block; width: 109%; height: 109%; max-width: 166px; max-height: 166px; flex-shrink: 0;
}
.in-battle:not(.skill-names) #touch .attacks [data-touch-skill] > b,
.in-battle:not(.skill-names) #touch .attacks [data-touch-skill] > .control-icon { display: none; }
.in-battle:not(.skill-names) #touch .attacks .skill-icon-failed > .skill-icon { display: none; }
.in-battle:not(.skill-names) #touch .attacks .skill-icon-failed > .control-icon { display: block; width: 68%; height: 68%; }
.in-battle #touch .attacks [data-touch-skill] > em { z-index: 3; }
.in-battle #touch .attacks [data-hold=KeyO].ultimate-ready > em { position: absolute; }

/* Gray only the skill art/body so the cooldown ring stays easy to read. */
.in-battle #touch .attacks button.skill-unavailable {
  --button-tint: 128 134 143;
  color: #b7bcc4 !important;
  background: radial-gradient(circle at 35% 20%, #555b65b3, #20242be6 75%) !important;
  border-color: #747b86 !important;
  box-shadow: none;
}
.in-battle #touch .attacks button.skill-unavailable > .skill-icon,
.in-battle #touch .attacks button.skill-unavailable > .control-icon {
  filter: grayscale(1) brightness(.65);
}
.in-battle #touch .attacks .skill-cooldown-ring {
  display: none; position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px);
  z-index: 4; pointer-events: none; fill: none; stroke-width: 4;
  transform: rotate(-90deg);
}
.in-battle #touch .attacks .skill-cooling > .skill-cooldown-ring { display: block; }
.in-battle #touch .attacks .skill-cooldown-ring .track { stroke: #747b8680; }
.in-battle #touch .attacks .skill-cooldown-ring .progress { stroke: #bcefff; stroke-dasharray: 100; }

/* One untransformed viewport, with final pixel positions supplied by the shared
   geometry module. These rules also supersede the legacy lobby mobile grids. */
.arena-lobby.in-battle #touch { position:fixed; inset:0 auto auto 0; margin:0; padding:0; border:0; height:100%; gap:0; }
.arena-lobby.in-battle #touch .attacks,
.arena-lobby.in-battle #touch[data-movement-mode=fixed] .dpad {
  position:absolute!important; inset:0!important; width:100%!important; height:100%!important;
  max-width:none!important; display:block!important; margin:0!important; padding:0!important;
  transform:none!important; pointer-events:none; overflow:visible;
}
.arena-lobby.in-battle #touch .attacks button[data-action-control],
.arena-lobby.in-battle #touch[data-movement-mode=fixed] .dpad button {
  --pressed-scale:1; --action-size:var(--button-px,64px);
  position:absolute!important; left:var(--button-x,0px); top:var(--button-y,0px);
  width:var(--button-px,64px)!important; height:var(--button-px,64px)!important;
  min-width:0!important; min-height:0!important; margin:0!important; box-sizing:border-box;
  border-radius:50%!important; transform:translate(-50%,-50%) scale(var(--pressed-scale))!important;
  grid-area:auto!important; align-self:auto!important; pointer-events:auto;
  opacity:var(--battle-control-opacity,.86);
}
.arena-lobby.in-battle #touch .attacks button[data-action-control].held { --pressed-scale:.96; }
.arena-lobby.in-battle #touch button * { pointer-events:none!important; }
.arena-lobby.in-battle #touch .direction-visual { box-sizing:border-box; }
.arena-lobby.in-battle #touch .dpad {
  position:absolute; left:var(--zone-x,12px); top:var(--zone-y); bottom:auto;
  width:var(--zone-width,44%); height:var(--zone-height,55%);
  transform:none!important; display:grid!important; grid-template:1fr / repeat(2,minmax(0,1fr))!important;
  gap:0!important; margin:0!important; padding:0!important;
}
.arena-lobby.in-battle #touch .dpad button { width:100%; height:100%; min-width:0; min-height:0; transition:none!important; }
.arena-lobby.in-battle #touch .attacks button { transition:background .1s,border-color .1s; }
.arena-lobby.in-battle #touch[data-movement-mode=fixed] .direction-visual {
  left:50%; top:50%; width:100%; height:100%; opacity:1; box-sizing:border-box;
  transform:translate(-50%,-50%); transition:none;
}
.arena-lobby.in-battle #touch[data-movement-mode=fixed] .held .direction-visual { background:#568abbcc; border-color:white; }
#control-safe-area { position:fixed; inset:0; visibility:hidden; pointer-events:none; padding:0;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
.arena-lobby #control-layout-dialog {
  position:fixed; inset:0 auto auto 0; width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0; border-radius:0; overflow:hidden; box-sizing:border-box;
  background:#091321ed; touch-action:none;
}
#control-layout-dialog::backdrop { background:#050a11aa; backdrop-filter:none; }
#control-layout-preview {
  position:absolute; inset:0; width:100%; height:100%; max-width:none; aspect-ratio:auto;
  margin:0; border:0; border-radius:0; overflow:hidden; touch-action:none;
  background:linear-gradient(#1d354a55 1px,transparent 1px),linear-gradient(90deg,#1d354a55 1px,transparent 1px);
  background-size:32px 32px;
}
#control-layout-preview::before { display:none; }
#control-layout-preview button {
  position:absolute; left:var(--button-x); top:var(--button-y); width:var(--button-px); height:var(--button-px);
  box-sizing:border-box; min-width:0; min-height:0; margin:0; padding:4px; border:2px solid #7ba1c7;
  border-radius:50%; transform:translate(-50%,-50%); background:#254465; color:#eef6ff;
  opacity:var(--battle-control-opacity,.86); font-size:12px; line-height:1.15;
  touch-action:none; user-select:none; cursor:grab;
}
#control-layout-preview .layout-attack { background:#a73d57; border-color:#ffc0c8; font-weight:900; }
#control-layout-preview .layout-ultimate { background:#d9b56c; color:#39270f; border-color:#ffe6ae; }
#control-layout-preview button.selected { outline:2px solid #ffe19b; outline-offset:2px; z-index:2; }
#control-layout-preview button:active { cursor:grabbing; }
.layout-movement-zone { position:absolute; left:var(--zone-x); top:var(--zone-y); width:var(--zone-width); height:var(--zone-height);
  display:flex; border:1px dashed #6b9bb7; background:#477fa622; color:#9bb7d0; box-sizing:border-box; pointer-events:auto; cursor:pointer; }
.layout-movement-zone span { width:50%; display:grid; place-items:center; font-size:11px; }
.layout-movement-zone span+span { border-left:1px dashed #6b9bb7; }
.layout-movement-zone .layout-direction-preview { width:var(--move-size,88px); height:var(--move-size,88px); border:2px solid #d0ecffab; border-radius:50%; background:#294e6b70; color:#f0faff; font-size:28px; box-sizing:border-box; pointer-events:none; }
.layout-movement-zone>span { padding-top:calc(var(--zone-height) * .4); box-sizing:border-box; }
#control-layout-preview button { z-index:2; }
#control-layout-preview button.selected { z-index:3; }
.layout-movement-zone.selected { outline:2px solid #ffe19b; outline-offset:2px; background:#477fa644; color:#e8f4ff; z-index:2; }
#control-layout-preview[data-movement-mode=fixed] .layout-direction-preview { display:none; }
.layout-reserved { position:absolute; inset:0 0 auto; height:var(--reserved-top,56px); background:#53688022; color:#7890a8; font-size:10px; padding:8px; pointer-events:none; }
.layout-toolbar { position:absolute; top:max(8px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:380px; max-width:calc(100% - 16px); max-height:calc(100% - 16px); overflow:auto;
  border:1px solid #516780; border-radius:10px; background:#101d2cf5; padding:10px; box-sizing:border-box; touch-action:pan-y; z-index:4; }
.layout-toolbar-head { display:flex; align-items:center; gap:8px; }
.layout-toolbar-head strong { font-size:11px; flex:1; }
.layout-toolbar button { padding:6px 9px; font-size:11px; }
.layout-toolbar .layout-fixed-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-top:10px; }
.layout-toolbar input[type=checkbox] { width:20px; height:20px; accent-color:#ffe19b; }
.layout-toolbar .layout-size-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12px; margin:8px 0; }
.layout-toolbar .layout-size-row[hidden] { display:none; }
.layout-toolbar .layout-zone-select { width:100%; min-height:44px; margin-top:8px; border-color:#80c6ef; color:#e6f7ff; background:#203f59; }
.layout-toolbar .layout-zone-select[aria-pressed=true] { border-color:#ffe19b; background:#354c61; box-shadow:0 0 0 1px #ffe19b; }
.layout-toolbar input[type=range] { width:100%; min-width:0; accent-color:#ffe19b; }
#control-layout-status { margin:6px 0; font-size:11px; line-height:1.4; color:#b9c8d8; }
.layout-actions { display:flex; gap:8px; justify-content:flex-end; }
#control-layout-dialog.toolbar-collapsed #layout-toolbar-body { display:none; }
#control-layout-dialog .layout-toolbar .start { background:#ffe19b; color:#281e0b; border-color:#fff0c9; }
#control-layout-dialog .layout-actions button { min-height:34px; min-width:0; height:auto; line-height:1.4; }