/* Maple Arena alpha: scoped styles independent from existing PvP analysis */
.arena-page{width:min(1160px,calc(100% - 32px));margin:0 auto 50px}
.arena-intro{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:28px 0 18px}
.arena-intro h1{font-size:clamp(25px,3.3vw,43px);line-height:1.14;margin:7px 0 12px;letter-spacing:-.055em}
.arena-intro p:not(.eyebrow){color:#9fabba;line-height:1.7;max-width:710px;font-size:13px}
.arena-intro strong{color:#e8b866}
.arena-old-link{flex-shrink:0;padding:10px 13px;border:1px solid #364355;color:#e3c188;border-radius:11px;font-size:12px;text-decoration:none}
.arena-setup{display:grid;grid-template-columns:minmax(140px,1fr) minmax(140px,1fr) auto auto;gap:9px;align-items:end;padding:15px;border:1px solid #344453;border-radius:16px;background:linear-gradient(120deg,#141e27,#101720)}
.arena-setup label{display:grid;gap:7px;font-size:11px;color:#c5cfda;font-weight:750}
.arena-setup input{height:44px;padding:0 12px;width:100%;box-sizing:border-box;background:#0b1219;color:#f3f3f6;border:1px solid #344454;border-radius:10px;font:inherit;font-size:13px}
.arena-setup button{min-height:44px;border-radius:10px;padding:0 13px;border:1px solid #d5a250;background:#e5b464;color:#111923;font-size:12px;font-weight:850;cursor:pointer;white-space:nowrap}
.arena-setup button.arena-secondary{background:#1c2d3a;color:#cfdeeb;border-color:#41566a}
.arena-setup button:disabled{opacity:.5;cursor:wait}
.arena-status{margin:11px 0 14px;color:#a8bfd0;font-size:12px;line-height:1.6;min-height:22px}
.arena-status[data-tone=error]{color:#ff8f97}.arena-status[data-tone=success]{color:#9ce6c6}
.arena-game{overflow:hidden;border:1px solid #455b64;border-radius:19px;background:#101c26;box-shadow:0 16px 50px #070d14a8}
.arena-score{display:grid;grid-template-columns:minmax(0,1fr) 95px minmax(0,1fr);gap:16px;align-items:center;padding:15px 21px;background:linear-gradient(90deg,#203e4c,#1c2832,#463240)}
.arena-health strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#edf4f2;font-size:15px}
.arena-health small{display:block;color:#aec3cf;font-size:10px;text-align:left;margin-top:3px;font-variant-numeric:tabular-nums}
.arena-health-track{height:12px;margin:8px 0 2px;border-radius:20px;overflow:hidden;background:#111b25;border:1px solid #526b76}
.arena-health-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#48a3dc,#9de3f6);transition:width .08s}
.arena-health.opponent{text-align:right}.arena-health.opponent small{text-align:right}.arena-health.opponent i{background:linear-gradient(90deg,#ea7186,#ffba97)}
.arena-clock{text-align:center;color:#e6e0c0}.arena-clock span{display:block;font-size:10px;font-weight:800;letter-spacing:.18em}
.arena-clock strong{font-size:30px;font-variant-numeric:tabular-nums;line-height:1}
#arena-canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#18323a;outline:none}
#arena-canvas:focus-visible{outline:3px solid #dcb665;outline-offset:-4px}
.arena-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#101b26;padding:9px 17px;border-top:1px solid #3c4c57;color:#b7d3d5;font-size:11px}
.arena-toolbar>div{display:flex;gap:7px}
.arena-toolbar button{padding:8px 11px;border:1px solid #47616e;background:#203440;border-radius:8px;font-size:11px;font-weight:750;color:#e0eef3;cursor:pointer}
.arena-toolbar button:disabled{opacity:.45}
.arena-input-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 27px;background:linear-gradient(120deg,#15232d,#1b2733)}
.arena-pad{display:grid;grid-template-areas:". up ." "left down right";grid-template-columns:repeat(3,53px);grid-template-rows:repeat(2,48px);gap:5px}
.arena-pad .up{grid-area:up}.arena-pad .left{grid-area:left}.arena-pad .down{grid-area:down}.arena-pad .right{grid-area:right}
.arena-pad button,.arena-actions button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;color:#f2f9fc;font-family:inherit;font-weight:850;border:1px solid #526e7e;background:#263d4b;border-radius:13px;box-shadow:0 4px 0 #101b24}
.arena-pad button{font-size:20px}
.arena-actions{display:flex;gap:12px;align-items:center}
.arena-actions button{width:86px;height:75px;font-size:14px}
.arena-actions .arena-attack{background:linear-gradient(145deg,#bc7353,#dc8f60);border-color:#e7a581;color:#fff4db}
.arena-actions .arena-dash{background:linear-gradient(145deg,#386f8c,#3d92b0);border-color:#7dc0d7}
.arena-pad button.is-held,.arena-actions button.is-held{transform:translateY(3px);box-shadow:0 1px 0 #101b24;filter:brightness(1.16)}
.arena-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.arena-help>div{display:grid;gap:6px;border:1px solid #263642;background:#121b23;padding:14px;border-radius:12px;font-size:11px;line-height:1.6;color:#9caebd}
.arena-help strong{font-size:12px;color:#ebd4a9}
@media(max-width:870px){
 .arena-intro{align-items:start;flex-direction:column}
 .arena-setup{grid-template-columns:1fr 1fr}
 .arena-setup button{white-space:normal}
 .arena-help{grid-template-columns:1fr}
}
@media(max-width:450px){
 .arena-page{width:calc(100% - 18px)}
 .arena-intro{margin-top:19px}
 .arena-setup{padding:10px;gap:8px}
 .arena-setup label{font-size:10px}
 .arena-setup input{padding:0 9px;font-size:12px}
 .arena-setup button{font-size:11px;padding:0 6px}
 .arena-score{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:6px;padding:10px 8px}
 .arena-health strong{font-size:11px}.arena-health small{font-size:9px}
 .arena-clock strong{font-size:24px}.arena-clock span{font-size:8px}
 .arena-input-panel{padding:12px 9px;gap:4px}
 .arena-pad{grid-template-columns:repeat(3,39px);grid-template-rows:repeat(2,42px);gap:3px}
 .arena-pad button{font-size:15px}
 .arena-actions{gap:7px}.arena-actions button{width:65px;height:63px;font-size:12px}
 .arena-toolbar{padding:8px 9px}.arena-toolbar button{font-size:10px;padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){.arena-health-track i{transition:none}}

/* Arena v2 original five-style skill HUD and touch actions */
.arena-style-tag{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.04em}
.arena-cooldowns{display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.arena-cooldowns span:nth-child(2){color:#ecd79e}
.arena-actions .arena-skill{background:linear-gradient(145deg,#654e91,#9767b0);border-color:#c3a0e4;color:#faf0ff}
.arena-actions .arena-skill:disabled{opacity:.5;filter:grayscale(.35);box-shadow:0 2px 0 #131522;cursor:not-allowed}
@media(max-width:450px){.arena-actions{gap:4px}.arena-actions button{width:51px;height:63px;font-size:10px}.arena-actions .arena-skill{font-size:9px;line-height:1.3}.arena-cooldowns{gap:5px;flex-direction:column;align-items:flex-start}.arena-style-tag{font-size:9px}}

@media(min-width:451px) and (max-width:600px){.arena-input-panel{padding:12px 14px;gap:8px}.arena-pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:3px}.arena-actions{gap:5px}.arena-actions button{width:64px;height:65px;font-size:11px}.arena-actions .arena-skill{font-size:10px}}

/* Arena v4 visual feedback: optional and separate from battle calculation. */
.arena-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.arena-reduce-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:7px 9px;border:1px solid #374e5d;border-radius:8px;color:#b9ced7;font-size:11px;white-space:nowrap}
.arena-reduce-toggle input{accent-color:#90d8dd;width:15px;height:15px;margin:0}
.arena-reduce-toggle:focus-within{outline:2px solid #82cbd9;outline-offset:2px}
#arena-canvas{touch-action:pan-y;image-rendering:auto}
@media(max-width:650px){
  .arena-toolbar{align-items:flex-start}
  .arena-toolbar-actions{gap:5px;justify-content:flex-end}
  .arena-reduce-toggle{font-size:10px;padding:6px;white-space:normal}
}
@media(max-width:370px){
  .arena-toolbar{flex-wrap:wrap}
  .arena-toolbar-actions{width:100%;justify-content:space-between}
}
