/* Gladius Arena — bronze & obsidian, Roman capitals. Shared by the player page and the host broadcast. */
@import url('../assets/fonts/fonts.css');
:root {
  --bg: #0c0a08; --panel: rgba(20, 15, 10, .88); --panel2: rgba(34, 26, 18, .92); --line: rgba(217, 180, 90, .28);
  --gold: #d9b45a; --gold2: #f3d98a; --gold3: #8a6a2a; --red: #c8262e; --red2: #ff4d55; --blue: #2f64e0; --blue2: #5b8dff;
  --text: #f4ece0; --muted: #b9aa92; --good: #56d88a; --bad: #ff5d5d;
  --title: 'Forum', 'Times New Roman', serif; --ui: 'Golos Text', system-ui, sans-serif; --num: 'Unbounded', 'Golos Text', sans-serif;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 500 15px/1.35 var(--ui); overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; touch-action: none; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- panels & buttons */
.panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,230,170,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.title { font-family: var(--title); letter-spacing: .06em; color: var(--gold2); text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(243,217,138,.45);
  background: linear-gradient(180deg, #e3c06a, #a57a2c); color: #1c1307; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.3); box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.btn:active { transform: translateY(1px); filter: brightness(.95); }
.btn.ghost { background: rgba(255,255,255,.04); color: var(--gold2); text-shadow: none; }
.btn.red { background: linear-gradient(180deg, #e04048, #9a1a22); color: #fff; border-color: rgba(255,140,140,.5); text-shadow: none; }
.btn.blue { background: linear-gradient(180deg, #4a7cff, #1f3fa6); color: #fff; border-color: rgba(150,180,255,.5); text-shadow: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.field { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.4); color: var(--text); outline: none; font-size: 17px; }
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,180,90,.2); }
.muted { color: var(--muted); }
.gold { color: var(--gold2); }
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.sp { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(217,180,90,.12); border: 1px solid var(--line); font-size: 13px; color: var(--gold2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #2a2118; border: 2px solid var(--gold3); flex: none; }

/* ---------------------------------------------------------------- brand watermark */
.watermark { position: fixed; right: calc(14px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); height: 22px; opacity: .72; pointer-events: none; z-index: 30; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.watermark.big { height: 34px; }
body.fighting .watermark { right: auto; bottom: auto; left: 50%; top: calc(62px + var(--safe-t)); transform: translateX(-50%); height: 16px; opacity: .6; }

/* ---------------------------------------------------------------- fight HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.hud-top { position: absolute; left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); top: calc(8px + var(--safe-t)); display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; }
.hud-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hud-side.b { align-items: flex-end; }
.hud-name { display: flex; align-items: center; gap: 8px; font-weight: 700; text-shadow: 0 1px 3px #000; max-width: 100%; }
.hud-side.b .hud-name { flex-direction: row-reverse; }
.hud-name .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.hud-name .rank { font: 400 12px var(--title); color: var(--gold2); letter-spacing: .05em; }
.bar { position: relative; height: 16px; width: 100%; border-radius: 3px; background: rgba(0,0,0,.55); border: 1px solid rgba(243,217,138,.5); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hud-side.a .bar { transform: skewX(-18deg); }
.hud-side.b .bar { transform: skewX(18deg); }
.bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transition: width .08s linear; }
.hud-side.b .bar i { left: auto; right: 0; }
.bar .lag { background: #f2e3b0; transition: width .6s ease .25s; opacity: .85; }
.hud-side.a .bar .hp { background: linear-gradient(90deg, #7a0d14, #e0343c); }
.hud-side.b .bar .hp { background: linear-gradient(270deg, #10297a, #3f78ff); }
.bar.st { height: 6px; border-width: 0; width: 78%; }
.bar.st i { background: linear-gradient(90deg, #b8912e, #f3d98a); }
.buffs { display: flex; gap: 4px; min-height: 22px; }
.buff { font-size: 16px; filter: drop-shadow(0 1px 2px #000); animation: pulse 1s infinite; }
.hud-mid { text-align: center; }
.timer { font: 800 30px/1 var(--num); color: #fff; text-shadow: 0 2px 6px #000; min-width: 64px; }
.timer.low { color: var(--red2); }
.pips { display: flex; gap: 5px; justify-content: center; margin-top: 4px; }
.pips b { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(0,0,0,.4); }
.pips b.on.a { background: var(--red2); box-shadow: 0 0 6px var(--red2); }
.pips b.on.b { background: var(--blue2); box-shadow: 0 0 6px var(--blue2); }
.round-label { font: 400 12px var(--title); color: var(--gold2); letter-spacing: .12em; margin-top: 3px; }
.announce { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font: 400 clamp(40px, 9vw, 110px)/1 var(--title); letter-spacing: .08em; color: var(--gold2);
  text-shadow: 0 0 30px rgba(255,190,90,.55), 0 6px 18px #000; opacity: 0; transform: scale(.7); transition: none; }
.announce.show { animation: announce 1.3s ease-out forwards; }
.announce small { display: block; font-size: .32em; letter-spacing: .3em; color: #fff; margin-top: 8px; }
@keyframes announce { 0% { opacity: 0; transform: scale(1.8); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.1); } }
.style-pop { position: absolute; top: 24%; font: 400 clamp(18px, 3.2vw, 34px)/1.1 var(--title); letter-spacing: .06em; color: var(--gold2); text-shadow: 0 2px 8px #000, 0 0 16px rgba(255,200,90,.5); animation: pop 1.4s ease-out forwards; white-space: nowrap; }
.style-pop.a { left: 6%; } .style-pop.b { right: 6%; text-align: right; }
.style-pop small { display: block; font: 800 .6em var(--num); color: #fff; }
@keyframes pop { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes pulse { 50% { transform: scale(1.18); } }
.combo { position: absolute; top: 40%; font: 800 clamp(20px, 3.4vw, 40px) var(--num); color: #fff; text-shadow: 0 2px 8px #000; }
.combo.a { left: 3%; } .combo.b { right: 3%; }
.combo small { font: 400 .45em var(--title); letter-spacing: .15em; color: var(--gold2); display: block; }

/* gift feed */
.feed { position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(12px + var(--safe-b)); display: flex; flex-direction: column-reverse; gap: 6px; max-width: 42vw; }
.feed .it { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 99px; background: rgba(12,9,6,.72); border: 1px solid var(--line); animation: slidein .35s ease-out; font-size: 13px; }
.feed .it img.g { width: 30px; height: 30px; }
.feed .it .eff { font-weight: 700; }
.feed .it.a .eff { color: var(--red2); } .feed .it.b .eff { color: var(--blue2); }
@keyframes slidein { from { opacity: 0; transform: translateX(-30px); } }

/* ---------------------------------------------------------------- touch controls */
#touch { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#touch .zone { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; pointer-events: auto; }
.stick { position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; border: 2px solid rgba(243,217,138,.35); background: radial-gradient(circle, rgba(0,0,0,.15), rgba(0,0,0,.35)); opacity: .0; transition: opacity .15s; }
.stick.on { opacity: 1; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f1d68a, #9b7328); box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.stick-hint { position: absolute; left: calc(9% + var(--safe-l)); bottom: 16%; width: 120px; height: 120px; border-radius: 50%; border: 2px dashed rgba(243,217,138,.28); pointer-events: none; }
.btns { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: 300px; height: 250px; pointer-events: none; }
.tb { position: absolute; border-radius: 50%; pointer-events: auto; display: grid; place-items: center; border: 2px solid rgba(243,217,138,.55); background: radial-gradient(circle at 40% 30%, rgba(80,60,34,.92), rgba(28,20,12,.92)); box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,230,170,.2); color: var(--gold2); }
.tb svg { width: 56%; height: 56%; }
.tb span { position: absolute; bottom: -17px; font: 400 11px var(--title); letter-spacing: .06em; color: var(--gold2); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.tb.on { background: radial-gradient(circle at 40% 30%, #f1d68a, #a57a2c); color: #1c1307; transform: scale(.94); }
.tb.L { width: 104px; height: 104px; right: 6px; bottom: 18px; }
.tb.H { width: 78px; height: 78px; right: 126px; bottom: 6px; }
.tb.K { width: 70px; height: 70px; right: 112px; bottom: 112px; }
.tb.D { width: 66px; height: 66px; right: 18px; bottom: 150px; }
.tb.B { width: 78px; height: 78px; right: 206px; bottom: 60px; }
.tb.cool { opacity: .45; }

/* ---------------------------------------------------------------- screens (player) */
.screen { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); }
.screen.dim { background: radial-gradient(ellipse at center, rgba(12,9,6,.35), rgba(12,9,6,.85)); }
.loading { flex-direction: column; gap: 18px; background: #0c0a08; }
.loading img { width: min(70vw, 420px); }
.progress { width: min(60vw, 360px); height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold3), var(--gold2)); transition: width .2s; }
.card { width: min(94vw, 460px); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.card h1 { margin: 0; font: 400 30px/1.1 var(--title); letter-spacing: .06em; color: var(--gold2); text-align: center; }
.card p { margin: 0; }
.code { font: 800 48px/1 var(--num); letter-spacing: .14em; text-align: center; color: #fff; padding: 14px; border-radius: 12px; background: rgba(0,0,0,.45); border: 1px dashed var(--gold); }
/* the whole card always fits: it scrolls instead of being cut, and shrinks on low landscape phones (browser bars) */
.screen .card { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 430px) {
  .card { padding: 14px 18px; gap: 9px; }
  .card h1 { font-size: 24px; }
  .card img[src*="logo-full"] { width: 62% !important; }
  .card .field { min-height: 40px; padding: 7px 12px; font-size: 16px; }
  .card .btn { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
  .card p { font-size: 13px; line-height: 1.35; }
  .code { font-size: 38px; padding: 9px; }
}
@media (max-height: 340px) { .card img[src*="logo-full"] { display: none; } .card h1 { font-size: 21px; } }

#rotate { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; gap: 16px; align-items: center; justify-content: center; background: #0c0a08; text-align: center; padding: 24px; }
#rotate svg { width: 90px; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { body.need-landscape #rotate { display: flex; } }

/* lobby layout (landscape phone first) */
.lobby { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); grid-template-rows: auto 1fr; gap: 10px; padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)); pointer-events: none; }
.lobby > * { pointer-events: auto; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.topbar .logo { height: 20px; }
.topbar .prize { font: 400 16px var(--title); letter-spacing: .06em; color: var(--gold2); }
.topbar .prize b { font: 800 16px var(--num); color: #fff; }
.me-card { align-self: end; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.me-card .nm { font: 400 24px/1.1 var(--title); color: var(--gold2); letter-spacing: .04em; }
.side-panel { display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; gap: 2px; padding: 6px 6px 0; }
.tabs button { flex: 1; min-height: 38px; border: 0; background: transparent; color: var(--muted); font: 400 14px var(--title); letter-spacing: .06em; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--gold2); border-bottom-color: var(--gold); }
.tab-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 12px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid rgba(217,180,90,.12); align-items: center; }
.stat .lv { display: flex; gap: 3px; }
.stat .lv i { width: 16px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.12); }
.stat .lv i.on { background: linear-gradient(90deg, var(--gold3), var(--gold2)); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid rgba(255,255,255,.15); position: relative; }
.swatch.on { border-color: var(--gold2); box-shadow: 0 0 0 2px rgba(243,217,138,.35); }
.swatch.lock::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; background: rgba(0,0,0,.55); border-radius: 8px; }
.moves-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.moves-list .k { font-weight: 700; color: var(--gold2); white-space: nowrap; }

/* bracket */
.bracket { display: flex; gap: 18px; align-items: stretch; min-height: 100%; }
.bracket .rnd { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 150px; }
.bracket .rnd h4 { margin: 0 0 4px; font: 400 13px var(--title); letter-spacing: .1em; color: var(--gold2); text-align: center; text-transform: uppercase; }
.bm { border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.35); overflow: hidden; }
.bm.live { border-color: var(--gold2); box-shadow: 0 0 14px rgba(243,217,138,.35); }
.bm .p { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 13px; min-height: 30px; }
.bm .p + .p { border-top: 1px solid rgba(217,180,90,.14); }
.bm .p.w { color: var(--gold2); font-weight: 700; }
.bm .p.l { opacity: .45; text-decoration: line-through; }
.bm .p .s { margin-left: auto; font: 800 12px var(--num); }
.bm .p img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* results & ceremony */
.result { flex-direction: column; gap: 14px; text-align: center; }
.result h2 { margin: 0; font: 400 clamp(36px, 7vw, 76px)/1 var(--title); letter-spacing: .08em; color: var(--gold2); text-shadow: 0 0 24px rgba(255,190,90,.4); }
.glory-list { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; text-align: left; font-size: 15px; }
.glory-list b { font: 800 15px var(--num); color: var(--gold2); text-align: right; }
.toast { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); z-index: 90; padding: 10px 16px; border-radius: 12px; background: rgba(12,9,6,.92); border: 1px solid var(--gold); color: var(--gold2); font-weight: 600; animation: slidein .3s; max-width: 90vw; text-align: center; }

/* ---------------------------------------------------------------- champion ceremony */
.ceremony { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(40,26,8,.55), rgba(8,6,3,.92)); animation: cerIn .8s ease-out; }
.ceremony.out { animation: cerOut .7s ease-in forwards; }
.ceremony .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cer-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 20px; }
.cer-sub { font: 400 clamp(16px, 2.6vw, 28px) var(--title); letter-spacing: .4em; color: var(--gold2); text-transform: uppercase; animation: rise 1s .2s both; }
.cer-wreath { position: relative; width: clamp(150px, 26vh, 300px); height: clamp(150px, 26vh, 300px); animation: zoomIn 1s .35s both; }
.cer-wreath .laurel { position: absolute; inset: -12%; width: 124%; height: 124%; filter: drop-shadow(0 0 18px rgba(255,200,90,.55)); animation: spinIn 1.4s .35s both; }
.cer-av { position: absolute; inset: 14%; width: 72%; height: 72%; border-radius: 50%; object-fit: cover; border: 4px solid #e2b54a; box-shadow: 0 0 40px rgba(255,200,90,.6); background: #2a2118; }
.cer-av-empty { display: grid; place-items: center; font-size: 64px; }
.cer-name { font: 400 clamp(34px, 7vw, 96px)/1 var(--title); letter-spacing: .05em; color: #fff; text-shadow: 0 0 30px rgba(255,200,90,.7), 0 4px 18px #000; animation: rise 1s .7s both; }
.cer-prize { display: flex; flex-direction: column; align-items: center; animation: prize 1.2s 1.1s both; }
.cer-prize span { font: 400 clamp(14px, 2vw, 22px) var(--title); letter-spacing: .3em; color: var(--gold2); text-transform: uppercase; }
.cer-prize b { font: 800 clamp(40px, 8vw, 110px)/1 var(--num); background: linear-gradient(180deg, #fff6c8, #e2b54a 55%, #9c6d1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.cer-title { font: 400 clamp(13px, 1.8vw, 20px) var(--title); letter-spacing: .15em; color: var(--muted); animation: rise 1s 1.5s both; }
.cer-logo { height: clamp(18px, 3vh, 34px); margin-top: 10px; opacity: .85; animation: rise 1s 1.7s both; }
@keyframes cerIn { from { opacity: 0; } }
@keyframes cerOut { to { opacity: 0; transform: scale(1.05); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.3); } }
@keyframes spinIn { from { opacity: 0; transform: rotate(-120deg) scale(.6); } }
@keyframes prize { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(.95); } 100% { transform: scale(1); } }

/* floating damage numbers */
.dmg { position: absolute; transform: translate(-50%, -50%); font: 800 clamp(16px, 2.2vw, 34px) var(--num); color: #fff; text-shadow: 0 2px 6px #000, 0 0 12px rgba(255,120,60,.6); pointer-events: none; animation: dmgUp .9s ease-out forwards; z-index: 11; }
.dmg.big { font-size: clamp(22px, 3.2vw, 48px); color: #ffd36a; }
.dmg.blk { font: 400 clamp(14px, 1.8vw, 26px) var(--title); letter-spacing: .1em; color: #cfe3ff; text-shadow: 0 2px 6px #000; }
@keyframes dmgUp { 0% { opacity: 0; margin-top: 0; transform: translate(-50%, -50%) scale(1.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; margin-top: -60px; } }
/* no system scrollbars anywhere in the game UI: thin gold ones where a panel scrolls, none on phones */
* { scrollbar-width: thin; scrollbar-color: rgba(217,180,90,.45) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(217,180,90,.45); border-radius: 6px; } ::-webkit-scrollbar-corner { background: transparent; }
@media (pointer: coarse) { * { scrollbar-width: none; } ::-webkit-scrollbar { display: none; } }
.tab-body { overflow-x: hidden; }
.tab-body .row { flex-wrap: wrap; }
/* training levels: two by two when the panel is narrow */
.train-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.train-row .btn { min-width: 0; padding: 8px 4px !important; font-size: 14px; white-space: nowrap; }
@media (max-width: 900px) { .train-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 430px) {
  .tabs button { min-height: 32px; font-size: 13px; letter-spacing: .03em; }
  .me-card { padding: 9px 12px; gap: 4px; } .me-card .nm { font-size: 20px; }
  .topbar { padding: 4px 10px; } .tab-body { padding: 8px 10px 10px; }
}
/* moves: the input keys in a narrow first column, the description gets the room */
.moves-list { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 10px; }
.moves-list .k { white-space: normal; max-width: 110px; }
/* in a fight the studio mark sits at the bottom centre, clear of the timer, round label and controls */
body.fighting .watermark { top: auto; bottom: calc(6px + var(--safe-b)); left: 50%; transform: translateX(-50%); height: 15px; opacity: .55; }
/* names over the 3D arena stay readable whatever is behind them (gold lettering on the brand ribbon…) */
.hud-name { padding: 2px 9px; border-radius: 7px; background: linear-gradient(90deg, rgba(8,6,4,.62), rgba(8,6,4,.38)); }
.hud-side.b .hud-name { background: linear-gradient(270deg, rgba(8,6,4,.62), rgba(8,6,4,.38)); }
.hud-name .rank { text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.9); }

/* knocked out of the running tournament */
.out-screen { background: radial-gradient(ellipse at 50% 40%, rgba(60,10,6,.55), rgba(8,5,4,.94) 70%); }
.out-card { width: min(94vw, 520px); align-items: center; text-align: center; animation: outIn .7s cubic-bezier(.2,1.4,.4,1) both; }
.out-logo { width: 46%; max-width: 220px; }
.out-ic { width: 84px; height: 84px; filter: drop-shadow(0 4px 10px #000) drop-shadow(0 0 14px rgba(255,120,60,.35)); animation: outIc 1.1s .25s ease-out both; }
.card h1.out-t { font: 400 clamp(34px, 7vw, 54px)/1 var(--title); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffe6a8 0%, #e7a948 45%, #b3421f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.8)); animation: outT .9s .15s ease-out both; }
.out-s { font-size: 17px; line-height: 1.35; }
.out-m { font-size: 14px; line-height: 1.4; }
@keyframes outIn { from { opacity: 0; transform: scale(.9) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes outIc { 0% { opacity: 0; transform: rotate(-30deg) scale(1.6); } 60% { opacity: 1; transform: rotate(6deg) scale(.95); } 100% { transform: none; } }
@keyframes outT { 0% { opacity: 0; letter-spacing: .5em; } 100% { opacity: 1; letter-spacing: .08em; } }
@media (max-height: 430px) { .out-card { gap: 8px; padding: 14px 18px; } .card img.out-logo { width: 32% !important; } .out-ic { width: 54px; height: 54px; } .card h1.out-t { font-size: 34px; } .out-s { font-size: 15px; } }
@media (max-height: 340px) { .out-logo { display: none; } .out-ic { display: none; } }
.next-cd b { font: 700 1.1em var(--num); color: #fff; }
.next-box { display: flex; flex-direction: column; gap: 6px; } .next-box p { margin: 0; line-height: 1.35; }
.feed .it.wait { border-color: rgba(243,217,138,.8); box-shadow: 0 0 12px rgba(243,217,138,.35); }
.feed .it .eff.pick { color: #f3d98a; font-weight: 600; }
.feed .it .eff.pick i { font-style: normal; font-weight: 800; color: #fff; margin-left: 4px; }
.feed .it .eff .num { font: 800 1em var(--num); margin: 0 2px 0 4px; }
.feed .it .eff img.avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin: 0 3px; }