:root {
  --orange: #ff7a26;
  --blue: #1a6bff;
  --cream: #fff4dc;
  --ink: #120d16;
  --red: #ff2f4a;
  --gold: #ffd23d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { font-family: Rubik, system-ui, sans-serif; color: var(--cream); }

/* One 1280x720 stage, scaled to fit the window (game.js sets the scale). */
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center; overflow: hidden; background: #0b0a10; }
#bg { position: absolute; inset: -4%; background: url("arena/arena-1.jpg") center / cover; filter: brightness(0.9) saturate(1.1); will-change: transform; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.side { position: absolute; top: 18px; width: 540px; display: flex; gap: 10px; align-items: flex-start; }
.side.p1 { left: 22px; }
.side.p2 { right: 22px; flex-direction: row-reverse; }
.face { width: 74px; height: 74px; border-radius: 12px; border: 3px solid var(--cream); background: #221a2a; object-fit: cover; box-shadow: 0 4px 0 #0008; }
.bars { flex: 1; }
.name { font-family: Bangers, sans-serif; font-size: 28px; letter-spacing: 1px; line-height: 1; margin-bottom: 4px; text-shadow: 2px 2px 0 #000; }
.p2 .name { text-align: right; }
.health { position: relative; height: 28px; border: 3px solid var(--cream); border-radius: 6px; background: #3a0d16; overflow: hidden; transform: skewX(-12deg); box-shadow: 0 4px 0 #0008; }
.p2 .health { transform: skewX(12deg); }
.health .lag, .health .fill { position: absolute; top: 0; bottom: 0; width: 100%; }
.p1 .health .lag, .p1 .health .fill { right: 0; transform-origin: right; }
.p2 .health .lag, .p2 .health .fill { left: 0; transform-origin: left; }
.health .lag { background: var(--red); }
.health .fill { background: linear-gradient(#ffe36b, #ffb000); }
.health.low .fill { background: linear-gradient(#ff9b6b, #ff5a1f); animation: blink 0.4s steps(2) infinite; }
@keyframes blink { 50% { filter: brightness(1.5); } }
.pips { display: flex; gap: 6px; margin-top: 6px; }
.p2 .pips { justify-content: flex-end; }
.pips i { width: 26px; height: 16px; background: #0006; border: 2px solid var(--cream); border-radius: 3px 8px 8px 3px; position: relative; }
.pips i::after { content: ""; position: absolute; left: 3px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--cream); }
.pips i.won { background: var(--orange); }
#timer { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: Bangers, sans-serif; font-size: 64px; line-height: 1; padding: 4px 12px;
  background: var(--ink); border: 3px solid var(--cream); border-radius: 10px; min-width: 96px; text-align: center; box-shadow: 0 4px 0 #0008; }
#timer.hurry { color: var(--red); }
.meter { position: absolute; bottom: 22px; width: 300px; height: 20px; border: 3px solid var(--cream); border-radius: 12px; background: #0009; overflow: hidden; }
.meter.p1 { left: 22px; }
.meter.p2 { right: 22px; }
.meter .fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: linear-gradient(90deg, var(--blue), #3ad0ff); transition: width 0.12s; }
.meter.p2 .fill { left: auto; right: 0; }
.meter span { position: absolute; inset: 0; display: grid; place-items: center; font-family: Bangers, sans-serif; font-size: 16px; letter-spacing: 2px; text-shadow: 1px 1px 0 #000; }
.meter.full .fill { background: linear-gradient(90deg, var(--orange), var(--gold), var(--orange)); background-size: 200% 100%; animation: shine 0.6s linear infinite; }
.meter.full span::after { content: " · SUPER READY"; }
@keyframes shine { to { background-position: -200% 0; } }
.combo { position: absolute; top: 150px; font-family: Bangers, sans-serif; font-size: 44px; color: var(--gold); text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; opacity: 0; transition: opacity 0.2s; }
.combo.p1 { left: 40px; }
.combo.p2 { right: 40px; text-align: right; }
.combo.on { opacity: 1; }
.combo small { display: block; font-size: 24px; color: var(--cream); }

#banner { position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center; pointer-events: none;
  font-family: Bangers, sans-serif; font-size: 140px; letter-spacing: 4px; color: var(--gold);
  -webkit-text-stroke: 4px #000; text-shadow: 6px 6px 0 #000; opacity: 0; }
#banner.show { animation: slam 0.35s cubic-bezier(.2, 1.6, .4, 1) forwards; }
#banner.small { font-size: 90px; }
#banner.red { color: var(--red); }
@keyframes slam { from { opacity: 0; transform: translateY(-50%) scale(2.4); } to { opacity: 1; transform: translateY(-50%) scale(1); } }

/* ---------- Screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at center, #0000 30%, #000a 100%); text-align: center; }
#select, #versus { background: none; justify-content: flex-start; padding-top: 26px; }
.logo { font-family: Bangers, sans-serif; font-size: 64px; line-height: 0.9; letter-spacing: 3px; color: var(--cream); -webkit-text-stroke: 3px #000; text-shadow: 5px 5px 0 #000;
  transform: rotate(-3deg); }
.logo b { display: block; font-weight: normal; font-size: 150px; color: var(--orange); background: linear-gradient(var(--gold), var(--orange) 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(6px 6px 0 #000); }
.logo.small { font-size: 40px; }
.logo.small b { font-size: 90px; }
h2 { font-family: Bangers, sans-serif; font-size: 64px; margin: 0; letter-spacing: 3px; color: var(--gold); -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; }
h3 { font-family: Bangers, sans-serif; font-size: 30px; margin: 0 0 6px; letter-spacing: 2px; color: var(--orange); }
.menu { display: flex; flex-direction: column; gap: 12px; min-width: 420px; }
.menu button, #mute { font: 800 22px Rubik, sans-serif; letter-spacing: 1px; color: var(--ink); background: var(--cream); border: 3px solid #000; border-radius: 12px; padding: 12px 20px;
  box-shadow: 0 6px 0 #000; cursor: pointer; transition: transform 0.06s; }
.menu button.on, .menu button:hover { background: var(--orange); color: #fff; transform: translateY(-2px) rotate(-1deg); }
.menu button:active { transform: translateY(4px); box-shadow: 0 2px 0 #000; }
.hint { font-size: 18px; color: #fff; opacity: 0.85; text-shadow: 1px 1px 0 #000; margin: 0; }
.loadbar { width: 420px; height: 18px; border: 3px solid var(--cream); border-radius: 10px; overflow: hidden; background: #0008; }
.loadbar div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width 0.2s; }
#loading { background: #0b0a10 url("arena/arena-1.jpg") center / cover; background-blend-mode: multiply; }

.picks { position: absolute; bottom: 40px; left: 40px; right: 40px; display: flex; justify-content: space-between; }
.pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: #000b; border: 3px solid var(--orange); border-radius: 14px; padding: 10px 18px; min-width: 330px; }
.pick.p2 { border-color: var(--blue); align-items: flex-end; }
.pick .who { font: 800 16px Rubik, sans-serif; opacity: 0.8; }
.pick .nm { font-family: Bangers, sans-serif; font-size: 44px; letter-spacing: 2px; line-height: 1; }
.pick .tag { font-size: 16px; opacity: 0.9; }
.pick.locked { background: var(--orange); color: #fff; }
.pick.p2.locked { background: var(--blue); }
#select .hint { position: absolute; bottom: 10px; }

#versus { flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 0 40px 90px; }
.vs { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg); font-family: Bangers, sans-serif; font-size: 200px; color: var(--gold); -webkit-text-stroke: 5px #000; text-shadow: 8px 8px 0 #000; animation: slam 0.4s both; }
.vs-name { font-family: Bangers, sans-serif; font-size: 72px; letter-spacing: 2px; -webkit-text-stroke: 3px #000; text-shadow: 5px 5px 0 #000; }
.vs-name.l { color: var(--orange); animation: inL 0.4s both; }
.vs-name.r { color: #6fb0ff; animation: inR 0.4s both; }
@keyframes inL { from { transform: translateX(-120%); } }
@keyframes inR { from { transform: translateX(120%); } }

.keys { display: flex; gap: 60px; text-align: left; }
.keys p { margin: 6px 0; font-size: 19px; }
kbd { display: inline-block; min-width: 30px; padding: 2px 8px; margin: 0 2px; font: 800 17px Rubik, sans-serif; color: var(--ink); background: var(--cream); border: 2px solid #000; border-radius: 6px; box-shadow: 0 3px 0 #000; text-align: center; }
.moves { text-align: left; font-size: 19px; line-height: 1.55; max-width: 860px; margin: 0; background: #000a; padding: 16px 30px; border-radius: 14px; border: 2px solid #fff3; }
.moves b { color: var(--gold); }
#result-sub { font-size: 24px; margin: 0; text-shadow: 2px 2px 0 #000; }

#mute { position: absolute; right: 14px; bottom: 60px; width: 52px; height: 52px; padding: 0; font-size: 22px; border-radius: 50%; box-shadow: 0 4px 0 #000; opacity: 0.8; z-index: 5; }

/* The price tag (health): every hit is a markdown. */
.health .price { position: absolute; top: 50%; transform: translateY(-50%) skewX(12deg); font-family: Bangers, sans-serif; font-size: 22px; letter-spacing: 1px;
  color: #fff; -webkit-text-stroke: 1px #000; text-shadow: 2px 2px 0 #000; z-index: 2; }
.p1 .health .price { left: 10px; }
.p2 .health .price { right: 10px; transform: translateY(-50%) skewX(-12deg); }
.health.low .price { color: #fff; text-shadow: 1px 1px 0 #000; }
.health.low .price::after { content: " CLEARANCE"; font-size: 16px; }
#pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop { position: absolute; font-family: Bangers, sans-serif; font-size: 38px; color: var(--red); -webkit-text-stroke: 2px #000; text-shadow: 3px 3px 0 #000;
  transform: translate(-50%, -50%); animation: pop 0.9s ease-out forwards; white-space: nowrap; }
.pop.big { font-size: 56px; color: var(--gold); }
.pop.block { color: #bcd; font-size: 28px; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6) rotate(-8deg); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1) rotate(-2deg); } }

/* ---------- 3 to 5 fighters: price-tag cards along the bottom, name tags over heads ---------- */
#hud.wide .side, #hud.wide .meter, #hud.wide .combo { display: none; }
#cards { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 10px; justify-content: center; }
#hud:not(.wide) #cards { display: none; }
.card { position: relative; flex: 1; max-width: 250px; display: flex; gap: 8px; align-items: center; padding: 8px; background: #000c; border: 3px solid var(--slot); border-radius: 12px; box-shadow: 0 4px 0 #000; }
.card .face { width: 52px; height: 52px; border-width: 2px; border-color: var(--slot); }
.card .cbody { flex: 1; min-width: 0; }
.cname { font-family: Bangers, sans-serif; font-size: 18px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cname b { color: var(--slot); font-weight: normal; }
.card .health { height: 22px; transform: skewX(-10deg); }
.card .health .lag, .card .health .fill { right: 0; transform-origin: left; left: 0; }
.card .health .price { left: 8px; font-size: 17px; transform: translateY(-50%) skewX(10deg); }
.crow { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.card .meter { position: relative; flex: 1; height: 10px; bottom: auto; left: auto; right: auto; width: auto; border-width: 2px; }
.card .pips { margin: 0; gap: 3px; }
.card .pips i { width: 16px; height: 11px; border-width: 1.5px; }
.card .pips i::after { display: none; }
.card.out { opacity: 0.45; filter: grayscale(0.8); }
.ccombo { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 6px; text-align: center; font-family: Bangers, sans-serif; font-size: 28px; color: var(--gold); text-shadow: 2px 2px 0 #000; line-height: 1; }
.ccombo small { display: block; font-size: 16px; color: var(--cream); }
#tags { position: absolute; inset: 0; pointer-events: none; }
#tags .tag { position: absolute; transform: translate(-50%, -100%); font-family: Bangers, sans-serif; font-size: 22px; letter-spacing: 1px; padding: 1px 10px 0; color: #fff;
  background: var(--slot); border: 2px solid #000; border-radius: 8px; box-shadow: 0 3px 0 #000; white-space: nowrap; }
#tags .tag::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #000; }

/* ---------- Party lobby ---------- */
#party { gap: 16px; background: radial-gradient(ellipse at center, #000a 30%, #000d 100%); }
#party h2 { font-size: 54px; }
.party-wrap { display: flex; gap: 34px; align-items: stretch; }
.join { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #000b; border: 3px solid var(--orange); border-radius: 16px; padding: 16px 20px; }
#qr { width: 230px; height: 230px; background: #fff; border-radius: 10px; padding: 10px; display: grid; place-items: center; }
#qr svg, #qr img { width: 100%; height: 100%; }
.room { margin: 0; font: 800 18px Rubik, sans-serif; letter-spacing: 3px; }
.room b { font-family: Bangers, sans-serif; font-size: 44px; letter-spacing: 8px; color: var(--gold); vertical-align: middle; }
.url { margin: 0; font-size: 15px; max-width: 260px; word-break: break-all; opacity: 0.9; }
.slots { display: flex; flex-direction: column; gap: 8px; width: 520px; }
.slot { display: flex; align-items: center; gap: 12px; height: 62px; padding: 6px 12px; border: 3px dashed #fff4; border-radius: 12px; background: #0008; text-align: left; }
.slot.on { border-style: solid; border-color: var(--slot); background: #000c; }
.slot .num { font-family: Bangers, sans-serif; font-size: 30px; width: 44px; color: var(--slot); }
.slot img { width: 46px; height: 46px; border-radius: 8px; border: 2px solid var(--slot); background: #221a2a; }
.slot .who { flex: 1; }
.slot .who b { display: block; font-family: Bangers, sans-serif; font-size: 26px; letter-spacing: 1px; line-height: 1; }
.slot .who span { font-size: 15px; opacity: 0.85; }
.slot .kind { font: 800 13px Rubik, sans-serif; padding: 3px 8px; border-radius: 6px; background: var(--slot); color: #000; }
.slot button { font: 800 14px Rubik, sans-serif; border: 2px solid #000; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.menu.row { flex-direction: row; min-width: 0; }
.menu.row button { min-width: 200px; }
.menu button:disabled { opacity: 0.4; cursor: default; transform: none; }

#soundhint { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); padding: 8px 18px; font: 800 18px Rubik, sans-serif; color: var(--ink);
  background: var(--gold); border: 3px solid #000; border-radius: 12px; box-shadow: 0 4px 0 #000; pointer-events: none; z-index: 6; animation: blink 1s steps(2) infinite; }

#pausebtn { position: absolute; right: 14px; bottom: 124px; width: 52px; height: 52px; padding: 0; font: 900 18px Rubik, sans-serif; color: var(--ink); background: var(--cream);
  border: 3px solid #000; border-radius: 50%; box-shadow: 0 4px 0 #000; opacity: 0.85; z-index: 5; }
#turn { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  #turn { display: flex; position: fixed; inset: auto 0 0 0; z-index: 9; justify-content: center; padding: 10px; font: 800 16px Rubik, sans-serif; color: var(--ink); background: var(--gold); }
}

/* ---------- Playing on a touch screen: Haggle Mart stick + buttons over (sideways) or under (upright) the fight ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 4; display: none; }
body.touch.fighting #touch { display: block; }
#touch .stick, #touch .buttons { position: absolute; pointer-events: auto; }
#touch .stick { background: none; border: 0; }
/* Sideways: the fight fills the screen; stick bottom-left, buttons bottom-right, a little see-through. */
#touch .stick { left: max(6px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom)); width: 34vw; height: 58vh; }
#touch .stick .base { width: min(34vmin, 90%); opacity: 0.82; }
#touch .buttons { right: max(6px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); width: min(34vw, 340px); height: min(50vh, 280px); opacity: 0.82; gap: 1.4vmin; grid-template-rows: 0.4fr 1fr 1fr; }
#touch .b span { font-size: clamp(14px, 5vmin, 30px); }
#touch .b.s span { font-size: clamp(18px, 6.4vmin, 36px); }
/* Upright: the fight fills the top, the controls sit in a strip at the bottom for two thumbs: stick under the left, buttons under the right. */
@media (orientation: portrait) {
  body.touch.fighting #touch { top: var(--stage-bottom, 70vh); display: flex; flex-direction: row; align-items: stretch; gap: 3vw;
    padding: 1.6vh max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: linear-gradient(#003e7d, #06213f); }
  #touch .stick, #touch .buttons { position: relative; inset: auto; width: auto; height: auto; opacity: 1; }
  #touch .stick { flex: 0.9 1 0; border-radius: 18px; }
  #touch .stick .base { width: min(38vw, 88%); opacity: 1; border-width: 4px; }
  #touch .buttons { flex: 1.1 1 0; gap: 1.6vw; grid-template-rows: 0.55fr 1fr 1fr; }
  #touch .b span { font-size: clamp(13px, 4.6vw, 22px); }
  #touch .b small { font-size: clamp(9px, 2.6vw, 12px); }
  #touch .b.s span { font-size: clamp(16px, 6vw, 28px); }
  #touch .b.t span, #touch .b.j span { font-size: clamp(11px, 3.6vw, 17px); }
  #touch .b.t small { display: none; }
}
body.touch.fighting #turn { display: none !important; }
body.touch.fighting #mute { bottom: auto; top: 110px; }
body.touch.fighting #pausebtn { bottom: auto; top: 50px; }
body.touch #pausebtn, body.touch #mute { width: 86px; height: 86px; font-size: 30px; }

#fullbtn { position: absolute; right: 76px; bottom: 60px; width: 52px; height: 52px; padding: 0; font: 900 24px Rubik, sans-serif; color: var(--ink); background: var(--cream);
  border: 3px solid #000; border-radius: 12px; box-shadow: 0 4px 0 #000; opacity: 0.85; z-index: 5; }
body.touch #fullbtn { width: 86px; height: 86px; font-size: 38px; }
body.touch.fighting #fullbtn { bottom: auto; top: 50px; left: auto; right: 120px; }
#iostip { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: 900px; padding: 16px 22px; z-index: 7; font: 800 26px Rubik, sans-serif; color: var(--ink);
  background: var(--gold); border: 4px solid #000; border-radius: 16px; box-shadow: 0 6px 0 #000; text-align: center; line-height: 1.4; }
#iostip .share { padding: 0 8px; border-radius: 6px; background: #fff; }
#iostip button { margin-left: 10px; font: 900 24px Rubik, sans-serif; padding: 4px 18px; border: 3px solid #000; border-radius: 10px; background: var(--orange); color: #fff; }

/* ---------- First person (phone upright) ---------- */
/* Attacked from behind (first person): the Haggle Mart caution sign flashes on the side the foe is on, arrow pointing at them. */
#behind { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; z-index: 6; pointer-events: none; animation: warn 0.7s ease-in-out infinite; }
#behind.l { left: 18px; flex-direction: row; }
#behind.r { right: 18px; flex-direction: row-reverse; }
#behind img { width: 190px; height: 190px; filter: drop-shadow(0 6px 0 #0008); }
#behind .arrow { font: 900 110px "Roboto Condensed", sans-serif; color: #fff; -webkit-text-stroke: 6px #d81f26; text-shadow: 0 6px 0 #0008; }
#behind .say { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; padding: 4px 14px; border-radius: 10px; white-space: nowrap;
  font: 900 italic 34px "Roboto Condensed", sans-serif; color: #fff; background: #d81f26; border: 4px solid #fff; box-shadow: 0 5px 0 #0008; }
#behind.danger { animation-duration: 0.25s; }
#behind.danger img { filter: drop-shadow(0 0 22px #ff2f4a) drop-shadow(0 6px 0 #0008); }
@keyframes warn { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: 0.35; scale: 0.9; } }
#viewbtn { display: none; position: absolute; top: 50px; right: 222px; width: 86px; height: 86px; padding: 0; font-size: 40px; background: var(--cream);
  border: 3px solid #000; border-radius: 12px; box-shadow: 0 4px 0 #000; z-index: 5; }
@media (orientation: portrait) { body.touch.fighting #viewbtn { display: block; } }

#touch .b.j { display: none; }
body.fpv #touch .b.j { display: flex; border-radius: 10px; background: #19b85a; box-shadow: 0 4px 0 #0c7a3a; color: #fff; }
body.fpv #touch .b.j span { font-style: italic; font-size: clamp(14px, 4.4vmin, 24px); }
body.fpv #touch .b.t { grid-column: 1 / 2; }
body.fpv #touch .b.t small { display: none; }

/* ---------- Nothing covered ---------- */
/* The SALE meter sits right under each price bar (it used to live in the bottom corners, under the thumbs). */
.side .meter { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: 16px; margin-top: 5px; border-width: 2px; transform: skewX(-12deg); }
.side.p2 .meter { transform: skewX(12deg); }
.side .meter span { font-size: 12px; }
.side.p2 .meter .fill { left: auto; right: 0; }
/* Touch: pause / full screen / view / sound in one row under the timer, clear of both players' bars. */
body.touch.fighting #pausebtn, body.touch.fighting #fullbtn, body.touch.fighting #viewbtn, body.touch.fighting #mute {
  top: 104px; bottom: auto; right: auto; width: 72px; height: 72px; font-size: 30px; border-radius: 14px; opacity: 0.9; }
body.touch.fighting #pausebtn { left: calc(50% - 158px); }
body.touch.fighting #fullbtn { left: calc(50% - 78px); }
body.touch.fighting #viewbtn { left: calc(50% + 2px); }
body.touch.fighting #mute { left: calc(50% + 82px); }
/* Touch with 3-5 fighters: the price-tag cards go to the top (the thumbs own the bottom), the timer and buttons under them. */
body.touch #hud.wide #cards { top: 8px; bottom: auto; }
body.touch #hud.wide .ccombo { bottom: auto; top: 100%; margin: 6px 0 0; }
body.touch #hud.wide #timer { top: 92px; }
body.touch.fighting:has(#hud.wide) #pausebtn, body.touch.fighting:has(#hud.wide) #fullbtn,
body.touch.fighting:has(#hud.wide) #viewbtn, body.touch.fighting:has(#hud.wide) #mute { top: 176px; }

/* First round on a keyboard: a key strip at the bottom until you've got the hang of it. */
#keystrip { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 16px; white-space: nowrap; z-index: 5;
  font: 700 18px Rubik, sans-serif; color: #fff; background: #000c; border: 2px solid #fff4; border-radius: 12px; transition: opacity 0.6s; }
#keystrip kbd { font-size: 15px; min-width: 24px; padding: 1px 6px; }
#keystrip.fade { opacity: 0; }
.keys .note { font-size: 16px; opacity: 0.85; }
/* Menus over a fight get a solid backing so nothing shows through the text. */
#howto, #pause, #result { background: radial-gradient(ellipse at center, #06213fe6 20%, #000f 100%); z-index: 8; }

/* Touch: each icon button says what it is; the row closes up when the VIEW button isn't there (sideways). */
body.touch.fighting #pausebtn::after, body.touch.fighting #fullbtn::after, body.touch.fighting #viewbtn::after, body.touch.fighting #mute::after {
  content: attr(data-label); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px;
  font: 900 15px "Roboto Condensed", sans-serif; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000; white-space: nowrap; }
@media (orientation: landscape) {
  body.touch.fighting #pausebtn { left: calc(50% - 118px); }
  body.touch.fighting #fullbtn { left: calc(50% - 38px); }
  body.touch.fighting #mute { left: calc(50% + 42px); }
}
/* Touch: the icon buttons flank the timer in the top row (two left, two right) to keep the screen clear.
   The players' bars narrow a little to make room. */
body.touch.fighting .side { width: 420px; }
body.touch.fighting #pausebtn, body.touch.fighting #fullbtn, body.touch.fighting #viewbtn, body.touch.fighting #mute { top: 14px; width: 62px; height: 62px; font-size: 26px; }
body.touch.fighting #pausebtn { left: calc(50% - 196px); }
body.touch.fighting #fullbtn { left: calc(50% - 126px); }
body.touch.fighting #viewbtn { left: calc(50% + 64px); }
body.touch.fighting #mute { left: calc(50% + 134px); }
@media (orientation: landscape) {
  body.touch.fighting #pausebtn { left: calc(50% - 196px); }
  body.touch.fighting #fullbtn { left: calc(50% - 126px); }
  body.touch.fighting #mute { left: calc(50% + 64px); }
}
body.touch.fighting:has(#hud.wide) #pausebtn, body.touch.fighting:has(#hud.wide) #fullbtn,
body.touch.fighting:has(#hud.wide) #viewbtn, body.touch.fighting:has(#hud.wide) #mute { top: 94px; }

/* Touch, final: just PAUSE (left of the timer) and SOUND (right of it), mirror images. FULL SCREEN and VIEW live in the pause menu. */
body.touch.fighting #fullbtn, body.touch.fighting #viewbtn { display: none !important; }
body.touch.fighting #pausebtn, body.touch.fighting #mute { top: 14px; width: 62px; height: 62px; }
body.touch.fighting #pausebtn { left: calc(50% - 126px) !important; }
body.touch.fighting #mute { left: calc(50% + 64px) !important; }
body.touch.fighting:has(#hud.wide) #pausebtn, body.touch.fighting:has(#hud.wide) #mute { top: 94px; }

/* ---------- Live view on a phone (?mirror): just the fight, no menus or buttons ---------- */
#mirrorwait { position: absolute; inset: 0; display: grid; place-items: center; z-index: 9; font: 900 italic 64px "Roboto Condensed", sans-serif; color: #ffd21f;
  text-shadow: 4px 4px 0 #d81f26; background: #003e7dcc; text-align: center; padding: 40px; }
html.mirror #mute, html.mirror #pausebtn, html.mirror #fullbtn, html.mirror #viewbtn, html.mirror #soundhint, html.mirror #iostip, html.mirror #keystrip,
html.mirror #touch, html.mirror #turn, html.mirror .screen:not(#mirrorwait) { display: none !important; }
html.mirror body { background: #000; }
html.mirror, html.mirror body { touch-action: none; overscroll-behavior: none; }

/* ---------- Station mode (the stream): QR in the corner during fights, countdown in the lobby ---------- */
#stationqr { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px; background: #fffdf5; border: 4px solid #ff8105; border-radius: 14px; box-shadow: 0 6px 0 #0008; color: #003e7d; }
#stationqr .code { width: 150px; height: 150px; }
#stationqr .code svg { width: 100%; height: 100%; }
#stationqr b { font: 900 italic 22px "Roboto Condensed", sans-serif; color: #d81f26; }
#stationqr span { font: 900 16px "Roboto Condensed", sans-serif; letter-spacing: 2px; }
#stationqr .room { font-style: normal; font-size: 22px; letter-spacing: 4px; }
#partycount { margin: 0; font: 900 italic 44px "Roboto Condensed", sans-serif; color: #ffd21f; text-shadow: 3px 3px 0 #d81f26, 5px 5px 0 #0008; }
html.station #party .menu, html.station #mute, html.station #pausebtn, html.station #fullbtn, html.station #soundhint, html.station #iostip, html.station #keystrip { display: none !important; }
html.station #party .hint { font-size: 22px; }
html.station #result .menu { display: none !important; }