/* Boxring – spiel-eigene Stile (ergänzt css/tv.css + css/game.css) */

/* Lobby: Kampfart + zwei Plätze */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.4 * var(--u)); width: 100%; margin-bottom: calc(2 * var(--u)); }
.mode {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: calc(1.4 * var(--u)); align-items: center; text-align: left;
  background: var(--wine-600); border: 2px solid transparent; border-radius: calc(2.6 * var(--u)); padding: calc(1.6 * var(--u)) calc(2 * var(--u));
  color: #fff; font-family: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s;
}
.mode .mi { grid-row: span 2; font-size: calc(4.4 * var(--u)); }
.mode b { font-size: calc(2.4 * var(--u)); font-weight: 700; }
.mode small { font-size: calc(1.4 * var(--u)); color: var(--text-soft); }
.mode.on { border-color: var(--cream); background: var(--wine-500); }
.mode:hover, .mode:focus-visible { transform: translateY(-2px); outline: none; }
.slots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slot.ai { border-style: dashed; }
.slot.ai .av { font-size: calc(4 * var(--u)); background: var(--wine-600); border: 0; }
.slot .st small { font-size: .85em; color: var(--text-mute); }

/* Ansicht wählen */
.views { display: flex; align-items: center; gap: calc(1 * var(--u)); width: 100%; margin-bottom: calc(2 * var(--u)); }
.views-lbl { font-size: calc(1.4 * var(--u)); color: var(--text-mute); font-weight: 600; margin-right: calc(.4 * var(--u)); }
.view {
  flex: 1; display: grid; gap: calc(.2 * var(--u)); text-align: left; background: var(--wine-600); border: 2px solid transparent;
  border-radius: calc(2 * var(--u)); padding: calc(1 * var(--u)) calc(1.6 * var(--u)); color: #fff; font-family: inherit; cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.view b { font-size: calc(1.8 * var(--u)); font-weight: 700; }
.view small { font-size: calc(1.25 * var(--u)); color: var(--text-soft); }
.view.on { border-color: var(--cream); background: var(--wine-500); }
.view:hover, .view:focus-visible { transform: translateY(-2px); outline: none; }

/* Geteilter Bildschirm + roter Rand bei Treffern */
.split-line { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(.5 * var(--u)); transform: translateX(-50%); background: var(--wine-800); box-shadow: 0 0 calc(2 * var(--u)) rgba(0, 0, 0, .35); display: none; pointer-events: none; }
body.split .split-line { display: block; }
.hurt { position: absolute; top: 0; bottom: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 calc(14 * var(--u)) calc(2 * var(--u)) rgba(226, 87, 76, .85); }
.hurt.on { animation: hurt .45s ease-out; }
@keyframes hurt { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Kampf-Anzeige oben: Lebensbalken, Runde, Zeit */
.bhud {
  position: absolute; left: calc(2.4 * var(--u)); right: calc(2.4 * var(--u)); top: calc(2.4 * var(--u));
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: calc(2 * var(--u)); align-items: start;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.bhud.show { opacity: 1; }
.fpanel { display: flex; align-items: center; gap: calc(1.4 * var(--u)); background: var(--glass); border-radius: calc(2.8 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)); box-shadow: var(--shadow); }
.fpanel.right { flex-direction: row-reverse; text-align: right; }
.fav { flex: none; width: calc(7.6 * var(--u)); height: calc(7.6 * var(--u)); border-radius: 50%; background: var(--wine-600); box-shadow: inset 0 0 0 calc(.45 * var(--u)) var(--c); overflow: hidden; display: grid; place-items: end center; }
.fav svg { width: 100%; height: 100%; display: block; }
.fmain { flex: 1; min-width: 0; display: grid; gap: calc(.7 * var(--u)); }
.fname { display: flex; align-items: baseline; gap: calc(1 * var(--u)); }
.fpanel.right .fname { flex-direction: row-reverse; }
.fname b { font-size: calc(2.4 * var(--u)); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsrc { font-size: calc(1.3 * var(--u)); color: var(--text-mute); font-weight: 600; }
.hpbar { position: relative; height: calc(2.2 * var(--u)); border-radius: 999px; background: var(--wine-800); overflow: hidden; }
.hpbar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
.fpanel.right .hpbar i { left: auto; right: 0; }
.hpbar .hpghost { background: var(--cream); opacity: .55; }
.hpbar .hp { background: var(--c); transition: width .15s; z-index: 1; }
.fpanel.low .hpbar .hp { animation: lowhp .6s ease-in-out infinite; }
@keyframes lowhp { 50% { filter: brightness(1.6); } }
.frow { display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--u)); min-height: calc(2 * var(--u)); }
.fpanel.right .frow { flex-direction: row-reverse; }
.wins { display: flex; gap: calc(.6 * var(--u)); }
.wins i { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); border-radius: 50%; background: var(--wine-800); box-shadow: inset 0 0 0 2px var(--wine-500); }
.wins i.on { background: var(--cream); box-shadow: none; }
.fstate { font-size: calc(1.5 * var(--u)); font-weight: 700; color: var(--cream); }
.bhud .center { display: grid; justify-items: center; gap: calc(.4 * var(--u)); background: var(--glass); border-radius: calc(2.4 * var(--u)); padding: calc(.8 * var(--u)) calc(2.4 * var(--u)); box-shadow: var(--shadow); }
.round { font-size: calc(1.5 * var(--u)); color: var(--text-mute); font-weight: 600; }
.clock { font-size: calc(4.6 * var(--u)); font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }

/* Texte über den Köpfen */
.pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: calc(3.4 * var(--u)); white-space: nowrap;
  color: #fff; text-shadow: 0 3px 0 var(--wine-800), 0 0 calc(2 * var(--u)) rgba(42, 14, 17, .6);
  animation: rise 1s ease-out forwards;
}
.pop.dmg { color: #fff; }
.pop.block { color: #9fd6ef; font-size: calc(2.6 * var(--u)); }
.pop.miss { color: var(--cream); font-size: calc(2.6 * var(--u)); }
.pop.combo { color: var(--cream); font-size: calc(3 * var(--u)); }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }

body.st-intro .corner, body.st-fight .corner, body.st-roundEnd .corner,
body.st-intro .status, body.st-fight .status, body.st-roundEnd .status { opacity: 0; pointer-events: none; }
body.capture #ui { display: none !important; }