:root {
  --bg: #050b14;
  --blue-bg1: #061a33;
  --blue-bg2: #030c18;
  --red-bg1: #330606;
  --red-bg2: #180303;

  --status-bg: #02060c;
  --border2: rgba(255,255,255,0.08);
  --live: #f5c400;

  --gap: 10px;
  --radius: 18px;

  --pad-main: 6px;
  --pad-punch: 14px;

  --shadow: 0 12px 28px rgba(0,0,0,0.55);
  --shadow-soft: 0 8px 18px rgba(0,0,0,0.35);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* STATUS */
.status-bar {
  height: 48px;
  width: 100%;
  background: var(--status-bg);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  font-weight: 800;
  font-size: 13px;
  border-bottom: 1px solid var(--border2);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.status-bar .live {
  color: var(--live);
}

/* GRID */
.judge-grid {
  height: calc(100vh - 48px);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: var(--gap);
  align-items: stretch;
}

/* SIDE */
.side {
  display: grid;

  /* ✅ FIX: TOP HALF + BOTTOM HALF equal */
  grid-template-rows: 1fr 1fr;

  gap: var(--gap);
  padding: var(--gap);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--border2);

  position: relative;
  background-clip: padding-box;
}

/* Glass */
.side::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 260px at 40% -10%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(500px 260px at 90% 30%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}

.side::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.35));
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

.side.blue {
  background: linear-gradient(180deg, var(--blue-bg1), var(--blue-bg2));
}

.side.red {
  background: linear-gradient(180deg, var(--red-bg1), var(--red-bg2));
}

/* BLOCK */
.block {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  overflow: hidden;

  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-soft);

  min-height: 0;
}

.block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    transparent 38%,
    rgba(0,0,0,0.30)
  );
  pointer-events: none;
  opacity: 0.7;
}

/* Bottom row: Chest big + Punch small */
.block-row {
  display: grid;
  grid-template-columns: 1.65fr 0.75fr;
  gap: var(--gap);
  height: 100%;
  min-height: 0;
}

/* Red mirrored */
.side.red .block-row {
  grid-template-columns: 0.75fr 1.65fr;
}

/* ✅ MOST IMPORTANT PART */
.hit {
  width: 100%;
  height: 100%;
  display: block;

  /* ✅ FULL IMAGE ALWAYS, NEVER CUT */
  object-fit: contain;
  object-position: center;

  max-width: 100%;
  max-height: 100%;
  
  transition: transform 0.08s ease, filter 0.08s ease;

  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}

/* ✅ Advanced Kick feedback (slide) */
.hit.adv-hit {
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
  transform: scale(1.04);
  transition: transform 0.18s ease, filter 0.18s ease;
}


/* ✅ Head + Chest same padding so same scale feel */
.hit[src*="head"],
.hit[src*="chest"] {
  padding: var(--pad-main);
}

/* ✅ Punch stays smaller */
.hit[src*="punch"] {
  padding: var(--pad-punch);
}

/* Touch feel */
.hit:active {
  transform: scale(0.965);
  filter: brightness(1.15) saturate(1.08);
}

/* Landscape only */
@media (orientation: portrait) {
  body::before {
    content: "Rotate device to landscape";
    position: fixed;
    inset: 0;
    background: #050b14;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 9999;
  }
}
/* ================= ALIGN HEAD + CHEST ================= */
/* Blue side: head + chest aligned LEFT */
.side.blue .block .hit[src*="head"],
.side.blue .block .hit[src*="chest"] {
  object-position: left center !important;
}

/* Red side: head + chest aligned RIGHT */
.side.red .block .hit[src*="head"],
.side.red .block .hit[src*="chest"] {
  object-position: right center !important;
}

/* Keep punches centered (already perfect) */
.hit[src*="punch"] {
  object-position: center center !important;
}