/* The duel gets room to play; the map remains still behind the arena. */
body:not(.home-screen):not(.online-screen) .panel.fighter-on{
  inset:80px 16px 16px; width:min(1000px,calc(100% - 32px)); height:auto;
  margin-inline:auto; transform:none; padding:22px; overflow-y:auto;
  background:#0c202bed; contain:layout paint;
}
.fighter-on #mg{display:flex;flex:1;gap:12px;min-height:0}
.fighter-heading{display:flex;align-items:center;justify-content:space-between;color:#a4b6ba;font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.fighter-pause{height:32px;min-width:38px;border:1px solid #ffffff26;border-radius:7px;background:#183746;color:#f3f1e8;cursor:pointer;font-weight:700}
.fighter-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fighter-title h2{margin:0;font-size:clamp(22px,3vw,34px)!important;line-height:1.1}
.fighter-title>span{border:1px solid #f8cf7555;background:#f8cf751a;color:#f8cf75;padding:7px 9px;border-radius:5px;font:600 9px var(--f-mono);letter-spacing:.08em;white-space:nowrap}
.fighter-hud{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);align-items:center;gap:14px;padding:12px;border:1px solid #ffffff26;border-radius:10px;background:#ffffff08}
.fighter-name{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:7px;font-size:13px;font-weight:700;color:#f3f1e8}
.fighter-name img{width:30px;height:21px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #67492f40}
.fighter-name span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}
.fighter-name b{font:700 15px var(--f-mono);font-variant-numeric:tabular-nums}
.fighter-health[data-impact="hit"] .fighter-meter{box-shadow:0 0 0 3px #c6543040}
.fighter-health[data-impact="block"] .fighter-meter{box-shadow:0 0 0 3px #328f9a40}
.fighter-health[data-impact="hit"] .fighter-name b{color:#ad3f29;transform:scale(1.15)}
.fighter-health[data-impact="block"] .fighter-name b{color:#247b84}
.fighter-meter{height:13px;border-radius:3px;overflow:hidden;background:#ffffff14;border:1px solid #ffffff26}
.fighter-meter i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,#a6422c,#f1925f);transition:transform .12s linear}
.fighter-health-b .fighter-meter i{transform-origin:right;background:linear-gradient(90deg,#6bc4bc,#247b84)}
.fighter-health.low .fighter-meter i{background:#c14c3e}
.fighter-health>small{display:block;margin-top:5px;font:500 9px var(--f-mono);letter-spacing:.13em;color:#ffb08f}
.fighter-health-b>small{text-align:right;color:#66d9db}
.fighter-clock{text-align:center;color:#f3f1e8}
.fighter-clock b{display:block;font:700 29px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.fighter-clock small{font:500 8px var(--f-mono);letter-spacing:.08em}
.fighter-stage{position:relative;flex:1;min-height:200px;max-height:510px;border:1px solid #ffffff2655;border-radius:10px;overflow:hidden;background:#cbd6d6;isolation:isolate}
.fighter-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline-offset:-4px}
.fighter-canvas:focus-visible{outline:2px solid #eac46b}
.fighter-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:22px;text-align:center;color:#f3f1e8;background:#0c202bf2}
.fighter-overlay[hidden]{display:none}
.fighter-overlay strong{font:700 clamp(22px,4vw,40px)/1.1 var(--f-display)}
.fighter-resume{min-height:44px;min-width:150px;padding:10px 22px;border-radius:7px;border:1px solid #ffffff26;background:#f8cf75;color:#1c1606;font-weight:700;cursor:pointer}
.fighter-callout{position:absolute;inset:22% 0 auto;text-align:center;pointer-events:none;color:#7e492a;text-shadow:2px 2px 0 #fff4d8;font:900 clamp(40px,8vw,84px)/1 var(--f-display)}
.fighter-callout.go{color:#247b84}
.fighter-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fighter-controls{display:flex;gap:24px;justify-content:space-between}
.fighter-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1;max-width:320px}
.fighter-pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:53px;min-width:0;border:1px solid #ffffff26;border-bottom-width:3px;border-radius:9px;background:#173544;color:#f3f1e8;font:700 14px var(--f-display);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fighter-pad button[data-control="punch"]{background:linear-gradient(#b7583e,#8b3527);border-color:#7c3429;color:#fff1d6}
.fighter-pad button[data-control="kick"]{background:linear-gradient(#3c9297,#256771);border-color:#265b63;color:#fff1d6}
.fighter-pad button.pressed,.fighter-pad button:active{transform:translateY(2px);border-bottom-width:1px;filter:brightness(1.12)}
.fighter-pad kbd{font:500 9px var(--f-mono);opacity:.65}
.fighter-on button:focus-visible{outline:2px solid #f8cf75;outline-offset:2px}
body.reduced-motion .fighter-on,body.reduced-motion .fighter-on .fighter-meter i{transition:none!important}
body.reduced-motion .fighter-health .fighter-name b{transform:none}
@media(max-width:899px){
  body:not(.home-screen):not(.online-screen) .panel.fighter-on{inset:auto 0 0;width:100%;height:min(var(--sheet-height,75dvh),var(--sheet-max,calc(100dvh - 88px)));padding:62px 12px max(14px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0}
  body:not(.home-screen):not(.online-screen) .panel.fighter-on.is-hidden{transform:translateY(calc(100% + 20px))}
  .fighter-on #mg{gap:10px;min-height:440px}
  .fighter-heading{display:contents}.fighter-heading>span{display:none}
  .fighter-pause{position:absolute;top:10px;right:100px;z-index:11}
  .fighter-title h2{font-size:25px!important}
  .fighter-title>span{font-size:8px;padding:6px}
  .fighter-hud{gap:8px;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);padding:9px}
  .fighter-name{font-size:11px;gap:5px}.fighter-name img{width:22px;height:16px}.fighter-name b{font-size:12px}
  .fighter-clock b{font-size:25px}.fighter-clock small{font-size:7px}
  .fighter-controls{gap:12px}.fighter-pad{gap:6px}.fighter-pad button{font-size:12px;min-height:54px}
  .fighter-overlay{gap:10px;padding:16px}
}
@media(max-width:899px) and (max-height:700px){
  .fighter-on #mg{min-height:0;gap:6px}
  .fighter-title h2{font-size:21px!important}.fighter-title>span{font-size:7px;padding:4px}
  .fighter-hud{padding:6px}.fighter-name{margin-bottom:4px}.fighter-health>small{margin-top:3px}
  .fighter-stage{min-height:130px}.fighter-pad button{min-height:46px}
}
@media(max-width:899px) and (max-height:450px){
  .fighter-title{display:none}
  .fighter-on #mg{gap:5px}.fighter-stage{min-height:110px}
  .fighter-health>small,.fighter-clock small{display:none}
  .fighter-hud{padding:5px}.fighter-name img{width:20px;height:14px}.fighter-meter{height:8px}
  .fighter-pad button{min-height:44px}
}
@media(pointer:coarse){.fighter-pad kbd{display:none}.fighter-pad button{min-height:54px}}
@media(prefers-reduced-motion:reduce){.fighter-meter i{transition:none}.fighter-health .fighter-name b{transform:none}}

/* Fit the restored arena into the current floating UI. */
body:not(.home-screen):not(.online-screen) .panel.fighter-on{
  inset:0;width:100%;height:100%;margin:0;padding:0;transform:none;
  background:none;border:0;box-shadow:none;overflow:visible;contain:none;pointer-events:none;
}
body:not(.home-screen):not(.online-screen) .panel.fighter-on>#mg{
  position:absolute;inset:88px auto 24px 50%;transform:translateX(-50%);
  width:min(1100px,calc(100% - 48px));height:calc(100dvh - 112px);max-height:760px;
  min-height:0;padding:16px;display:flex;gap:10px;container-type:inline-size;
  border:1px solid #ffffff26;border-radius:20px;background:#0c202bf5;pointer-events:auto;
}
.fighter-on .fighter-title h2{font-family:var(--f-display)}
.fighter-on .fighter-stage{min-height:120px;max-height:none}
@media(max-width:899px){
  body:not(.home-screen):not(.online-screen) .panel.fighter-on{
    inset:76px 0 0;width:100%;height:calc(100dvh - 76px);padding:52px 10px 10px;
    background:#0c202bf5;border-radius:18px 18px 0 0;pointer-events:auto;
  }
  body:not(.home-screen):not(.online-screen) .panel.fighter-on>#mg{
    position:static;inset:auto;transform:none;width:100%;height:100%;max-height:none;
    padding:0;border:0;background:none;border-radius:0;gap:8px;
  }
  .fighter-on .fighter-controls{gap:12px}
  .fighter-on .fighter-pad{gap:5px}
  .fighter-on .fighter-pad button{min-height:48px;font-size:12px;padding:6px 4px}
}
@media(max-height:500px){
  body:not(.home-screen):not(.online-screen) .panel.fighter-on>#mg{gap:5px;padding:8px}
  .fighter-on .fighter-stage{min-height:80px}
  .fighter-on .fighter-heading{display:contents}.fighter-on .fighter-heading>span{display:none}
  .fighter-on .fighter-pause{position:absolute;top:6px;right:8px;z-index:2}
}
@media(max-width:899px){
  body:not(.home-screen):not(.online-screen) .panel.fighter-on{
    inset:auto 0 0;height:clamp(248px,38dvh,340px);max-height:calc(100dvh - 76px);
    padding:40px 10px max(10px,env(safe-area-inset-bottom));overflow:hidden;
  }
  body:not(.home-screen):not(.online-screen) .panel.fighter-on>#mg{gap:6px;padding:0}
  .fighter-on .fighter-title{display:none}
  .fighter-on .fighter-pause{top:3px;right:88px;height:28px;min-width:32px}
  .fighter-on .fighter-hud{padding:6px;gap:6px}
  .fighter-on .fighter-name{font-size:10px;margin-bottom:4px}
  .fighter-on .fighter-name img{width:20px;height:14px}
  .fighter-on .fighter-name b{font-size:12px}
  .fighter-on .fighter-meter{height:7px}
  .fighter-on .fighter-health>small,.fighter-on .fighter-clock small{display:none}
  .fighter-on .fighter-clock b{font-size:21px}
  .fighter-on .fighter-stage{min-height:84px}
  .fighter-on .fighter-pad button{min-height:44px;font-size:11px;padding:5px 3px}
  .fighter-on .fighter-controls{gap:8px}
  .fighter-on .fighter-pad kbd{display:none}
}