:root {
  /* 세로 미디어월(1080×1920)을 기준으로 1u ≈ 10.8px. 가로 화면에서도 같은 비율로 준다. */
  --u: min(1vw, 0.5625vh);
  --navy: #0f2150;
  --navy-2: #16306e;
  --blue: #1e56c8;
  --sky: #3aa0ff;
  --gold: #ffd23f;
  --orange: #ff8a1f;
  --white: #ffffff;
  --panel: linear-gradient(180deg, rgba(20, 44, 104, 0.92), rgba(10, 26, 70, 0.92));
  --stroke: rgba(126, 190, 255, 0.55);
  --clear: #37d67a;
  --clip: #ffb31f;
  --fall: #ff4d4d;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b1a3a;
  color: var(--white);
  font-family: 'Jua', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wall {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#wall-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.card {
  background: var(--panel);
  border: calc(var(--u) * 0.35) solid var(--stroke);
  border-radius: calc(var(--u) * 2.2);
  box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.4) rgba(0, 10, 40, 0.35),
    inset 0 calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.12);
}

.label {
  font-size: calc(var(--u) * 3);
  color: #cfe3ff;
  letter-spacing: 0.02em;
}

.gold {
  color: var(--gold) !important;
}

em {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

/* ── 위 ─────────────────────────────────────────────────────────────── */
.top-bar {
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.qr-card {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.6);
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--navy);
}

.qr-box {
  position: relative;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 1);
  background: #eef3fb;
  overflow: hidden;
}

.qr-box img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.qr-busy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 3.2);
  color: var(--blue);
  text-align: center;
}

.qr-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.4);
  padding-right: calc(var(--u) * 1);
}

.qr-text .label {
  color: #5a6b8c;
  font-size: calc(var(--u) * 2.6);
}

.qr-text b {
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 400;
  font-size: calc(var(--u) * 6.4);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--blue);
}

.qr-text .hint {
  font-size: calc(var(--u) * 2.3);
  color: #5a6b8c;
  line-height: 1.25;
}

.status-card {
  min-width: calc(var(--u) * 28);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.6);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
}

.status-card b {
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 400;
  font-size: calc(var(--u) * 3.8);
}

.status-card span {
  font-size: calc(var(--u) * 2.4);
  color: #cfe3ff;
}

.status-dots {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--u) * 1.2);
  margin-top: calc(var(--u) * 0.6);
}

.status-dots i {
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  border-radius: 50%;
  border: calc(var(--u) * 0.4) solid rgba(207, 227, 255, 0.7);
}

.status-dots i.on {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 210, 63, 0.8);
}

/* ── 타이틀 ──────────────────────────────────────────────────────────── */
.title {
  position: absolute;
  top: calc(var(--u) * 24);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.logo {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  transform: rotate(-4deg);
}

.logo-runner {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  fill: var(--white);
  stroke: var(--navy);
  stroke-width: 3;
  paint-order: stroke;
  filter: drop-shadow(0 calc(var(--u) * 0.6) 0 var(--navy));
}

.logo-text {
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 14);
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
  background: linear-gradient(180deg, #ffffff 30%, #bfe0ff 70%, #7fb8ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: calc(var(--u) * 0.9) var(--navy);
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--u) * 1) 0 var(--navy)) drop-shadow(0 calc(var(--u) * 1.6) calc(var(--u) * 1.4) rgba(0, 20, 70, 0.55));
}

.ribbon {
  margin-top: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 5);
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 4);
  color: var(--white);
  background: linear-gradient(180deg, #2f78ff, #1a4fc2);
  border: calc(var(--u) * 0.45) solid var(--navy);
  border-radius: calc(var(--u) * 1.2);
  box-shadow: 0 calc(var(--u) * 0.7) 0 var(--navy);
  transform: rotate(-4deg);
}

/* ── 위쪽 기록 카드 ──────────────────────────────────────────────────── */
.top-stats {
  position: absolute;
  top: calc(var(--u) * 52);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(var(--u) * 3);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.stat {
  width: calc(var(--u) * 27);
  padding: calc(var(--u) * 1.4) 0 calc(var(--u) * 1.8);
  text-align: center;
}

.stat b,
.board b {
  display: block;
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 400;
  font-size: calc(var(--u) * 7.6);
  line-height: 1.1;
}

.stat small,
.board small {
  font-family: 'Jua', sans-serif;
  font-size: 0.45em;
  margin-left: 0.1em;
}

/* ── 아래 ─────────────────────────────────────────────────────────────── */
.bottom {
  position: absolute;
  left: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  bottom: calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.8);
  pointer-events: none;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 1);
  text-align: center;
}

.board > div + div {
  border-left: calc(var(--u) * 0.25) solid rgba(126, 190, 255, 0.35);
}

.board b {
  color: var(--gold);
}

.board > div:nth-child(2) b {
  color: var(--white);
}

.howto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.8);
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 5.6);
  background: linear-gradient(180deg, #3b86ff, #1d52c4);
  border: calc(var(--u) * 0.45) solid #9dcbff;
  border-radius: calc(var(--u) * 2.2);
  box-shadow: 0 calc(var(--u) * 0.8) 0 var(--navy);
}

.howto svg {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  fill: var(--white);
}

.tip {
  align-self: center;
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  font-size: calc(var(--u) * 2.8);
  background: rgba(8, 20, 54, 0.78);
  border-radius: 999px;
}

/* ── 가운데 오버레이 ─────────────────────────────────────────────────── */
.countdown,
.verdict,
.notice {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

.countdown {
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 34);
  color: var(--gold);
  -webkit-text-stroke: calc(var(--u) * 1.4) var(--navy);
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--u) * 1.4) 0 var(--navy));
}

.countdown.pop {
  animation: pop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.countdown.go {
  color: #62ff9a;
  font-size: calc(var(--u) * 26);
}

.verdict {
  top: 47%;
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 10);
  -webkit-text-stroke: calc(var(--u) * 0.8) var(--navy);
  paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--u) * 0.9) 0 var(--navy));
}

.verdict.clear { color: #7dffae; }
.verdict.clip { color: #ffcf4a; }
.verdict.fall { color: #ff6b6b; }

.verdict.show {
  animation: verdict 0.9s ease-out both;
}

.notice {
  top: 40%;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  font-size: calc(var(--u) * 4.2);
  background: rgba(8, 20, 54, 0.85);
  border: calc(var(--u) * 0.35) solid var(--stroke);
  border-radius: calc(var(--u) * 2);
}

@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}

@keyframes verdict {
  0% { transform: translate(-50%, -30%) scale(0.6); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  75% { transform: translate(-50%, -58%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(1); opacity: 0; }
}

/* ── 결과 ─────────────────────────────────────────────────────────────── */
.result {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 70);
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
  animation: result-in 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.result-kicker {
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 6);
  color: var(--gold);
}

.result-time {
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 400;
  font-size: calc(var(--u) * 16);
  line-height: 1;
}

.result-time small {
  font-family: 'Jua', sans-serif;
  font-size: 0.35em;
}

.result-best {
  padding: calc(var(--u) * 0.6) calc(var(--u) * 3);
  font-family: 'Black Han Sans', sans-serif;
  font-size: calc(var(--u) * 4);
  color: var(--navy);
  background: var(--gold);
  border-radius: 999px;
  animation: pulse 1s ease-in-out infinite;
}

.result-counts {
  list-style: none;
  display: flex;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 3.4);
}

.result-counts b {
  font-family: 'Black Han Sans', sans-serif;
  font-weight: 400;
  margin-left: 0.2em;
}

.dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.3em;
  border-radius: 50%;
  vertical-align: 0.05em;
}

.dot.clear { background: var(--clear); }
.dot.clip { background: var(--clip); }
.dot.fall { background: var(--fall); }

@keyframes result-in {
  0% { transform: translate(-50%, -40%) scale(0.7); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes pulse {
  50% { transform: scale(1.06); }
}

/* ── 모드별 ───────────────────────────────────────────────────────────── */
.wall[data-mode='race'] .title,
.wall[data-mode='countdown'] .title,
.wall[data-mode='result'] .title {
  transform: translateX(-50%) translateY(calc(var(--u) * -8)) scale(0.72);
}

.wall[data-mode='result'] .top-stats {
  opacity: 0;
}

/* ── 가로 화면 ───────────────────────────────────────────────────────── */
@media (orientation: landscape) {
  :root {
    --u: min(0.62vw, 1vh);
  }

  .title {
    top: calc(var(--u) * 3);
  }

  .wall[data-mode='race'] .title,
  .wall[data-mode='countdown'] .title,
  .wall[data-mode='result'] .title {
    transform: translateX(-50%) scale(0.7);
    transform-origin: top center;
  }

  .top-stats {
    display: none;
  }

  /* 가로 화면은 아래 한 줄: 기록판 | 안내. 선수가 가려지지 않게 낮게 깐다. */
  .bottom {
    left: calc(var(--u) * 3);
    right: calc(var(--u) * 3);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
    gap: calc(var(--u) * 2);
  }

  .board {
    padding: calc(var(--u) * 1) calc(var(--u) * 1);
  }

  .board b {
    font-size: calc(var(--u) * 6);
  }

  .howto {
    font-size: calc(var(--u) * 4.2);
    padding: calc(var(--u) * 1);
  }

  .tip {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--u) * 1.4);
    font-size: calc(var(--u) * 2.4);
  }
}