.boxing-lobby { width: min(620px, 100%); background: #1e173df5; }
.boxing-lobby .boxing-tag { color: #70e8db; }
.boxing-lobby .boxing-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.boxing-lobby .boxing-options .btn { justify-content: center; }
.boxing-lobby h2 { color: #fff1d7; }
.boxing-invite { display: grid; gap: 8px; }
.boxing-invite input { width: 100%; min-width: 0; }
.boxing-lobby details summary { cursor: pointer; color: #d6c8ef; font-size: 13px; }
#boxingHud { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.boxing-bars { position: absolute; top: 18px; left: 4%; right: 4%; display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); gap: 14px; max-width: 1100px; margin: auto; padding-bottom: 12px; background: #100d25; }
.boxing-side { display: grid; gap: 5px; min-width: 0; }
.boxing-side:last-child { text-align: right; }
.boxing-side label { font: 600 12px var(--font-mono); color: #ffbc48; }
.boxing-side:last-child label { color: #64e8dc; }
.boxing-side progress { appearance: none; width: 100%; height: 16px; border: 1px solid #655078; border-radius: 5px; background: #201831; overflow: hidden; }
.boxing-side progress::-webkit-progress-bar { background: #201831; }
.boxing-side progress::-webkit-progress-value { background: linear-gradient(90deg,#dc7b35,#ffcb63); transition: width .1s; }
.boxing-side:last-child progress::-webkit-progress-value { background: linear-gradient(90deg,#27a6b4,#91f0de); }
.boxing-side progress::-moz-progress-bar { background: #ffbc48; }
.boxing-side:last-child progress::-moz-progress-bar { background: #64e8dc; }
.boxing-side progress.stamina { height: 7px; border: 0; }
.boxing-side .stamina::-webkit-progress-value { background: #a59ad0; }
.boxing-side small { font: 10px var(--font-mono); color: #afa1c3; }
.boxing-round { text-align: center; color: #ffe5ae; font: 400 20px/1.1 var(--font-display); }
.boxing-round small { display: block; color: #b3a4c9; font: 600 10px var(--font-mono); margin-bottom: 4px; }
.boxing-top-actions { position: absolute; top: 98px; left: 4%; right: 4%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.boxing-top-actions button { pointer-events: auto; padding: 7px 12px; font-size: 12px; }
.boxing-connection { font: 600 10px/1.3 var(--font-mono); letter-spacing: .05em; color: #9cdace; max-width: 55%; }
.boxing-pad { position: absolute; bottom: 18px; left: 4%; right: 4%; display: flex; align-items: end; justify-content: center; gap: clamp(12px, 4vw, 60px); }
.boxing-pad-group { display: grid; grid-template-columns: repeat(4, minmax(48px, 1fr)); gap: 6px; }
.boxing-pad-group.punches { grid-template-columns: repeat(5, minmax(56px, 1fr)); }
.boxing-control { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; min-height: 48px; min-width: 46px; padding: 7px 9px; border: 1px solid #76628f; border-radius: 10px; background: #211a37ed; color: #e9dff7; font: 700 11px/1.3 var(--font-body); cursor: pointer; box-shadow: 0 4px 0 #100c20; }
.boxing-control small { display: block; margin-top: 3px; color: #9e90b2; font: 10px var(--font-mono); }
.boxing-control[data-pressed="true"], .boxing-control:active { border-color: #ffbc48; background: #56412e; transform: translateY(2px); box-shadow: 0 2px 0 #100c20; }
.boxing-pad-group.punches .boxing-control { border-color: #98704d; }
.boxing-pad-caption { position: absolute; bottom: 1px; left: 4%; right: 4%; text-align: center; color: #a498bc; font: 10px var(--font-mono); }
.boxing-replay-controls { grid-column: 1/-1; display: grid; gap: 10px; }
@media(max-width: 700px) {
 .boxing-bars { grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); gap: 8px; top: 14px; }
 .boxing-side label { font-size: 10px; }
 .boxing-side small { font-size: 8px; }
 .boxing-round { font-size: 17px; }
 .boxing-round small { font-size: 9px; }
 .boxing-top-actions { top: 87px; }
 .boxing-pad { bottom: 22px; gap: 10px; align-items: stretch; }
 .boxing-pad-group { grid-template-columns: repeat(2, minmax(48px,1fr)); gap: 5px; flex: 1; max-width: 130px; }
 .boxing-pad-group.punches { grid-template-columns: repeat(3,minmax(44px,1fr)); flex: 1.6; max-width: 210px; }
 .boxing-control { min-height: 43px; padding: 5px; font-size: 10px; }
 .boxing-control small { font-size: 9px; margin-top: 1px; }
 .boxing-lobby .boxing-options { gap: 7px; }
 .boxing-lobby .btn { padding-inline: 10px; font-size: 14px; }
}