:root {
  --cream: #fff4e4;
  --paper: #fffaf2;
  --ink: #4a2c1d;
  --ink-soft: #7a5646;
  --red: #e8453c;
  --red-deep: #c23a33;
  --leaf: #5aa83c;
  --leaf-deep: #3f8a2c;
  --check: rgba(232, 69, 60, 0.08);
  --line: #f0d9bf;
  --shadow: 0 10px 28px rgba(122, 59, 30, 0.14), 0 2px 6px rgba(122, 59, 30, 0.08);
  --font: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR",
    system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--cream);
  /* 피크닉 체크 무늬 */
  background-image:
    repeating-linear-gradient(0deg, var(--check) 0 24px, transparent 24px 48px),
    repeating-linear-gradient(90deg, var(--check) 0 24px, transparent 24px 48px);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

.app {
  /* 한 화면 = 헤더 + 판. 판은 남은 칸(.stage)에 맞춰 줄어든다 */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- 좌측/상단 정보 패널 ---------- */
.side {
  background: var(--paper);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-apple { width: 34px; height: 34px; flex: none; animation: sway 3s ease-in-out infinite; transform-origin: 50% 90%; }
.title {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  color: var(--red-deep);
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 6px 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  min-width: 0;
}
.stat .label, .label { font-size: 14px; color: var(--ink-soft); }
.stat strong { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.stat .goal { font-size: 14px; color: var(--ink-soft); }
.sum-stat { transition: background 150ms, border-color 150ms, color 150ms; }
.sum-stat.ok { background: #eaf7df; border-color: #9fd27b; color: var(--leaf-deep); }
.sum-stat.over { background: #ffe3e0; border-color: #f08a82; color: var(--red-deep); animation: shake 300ms; }

.timebar { height: 10px; border-radius: 99px; background: #f5e3cc; overflow: hidden; }
.timebar-fill {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8cc95c, var(--leaf));
  transform-origin: left center;
  transition: transform 1s linear, background 300ms;
}
.timebar-fill.hurry { background: linear-gradient(90deg, #ff9b73, var(--red)); }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: #fff;
  border: 2px solid var(--line);
  font-size: 15px;
  white-space: nowrap;
}
.toggle { cursor: pointer; }
.toggle input { accent-color: var(--leaf); margin: 0; }

.help { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.45; word-break: keep-all; }
.help b { color: var(--red-deep); font-weight: 400; }

/* ---------- 버튼 ---------- */
.btn {
  font-family: var(--font);
  font-size: 18px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 #ecd2b4;
  transition: transform 90ms, box-shadow 90ms;
  white-space: nowrap;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #ecd2b4; }
.btn.primary { background: var(--red); border-color: var(--red-deep); color: #fff; box-shadow: 0 4px 0 #a52f29; }
.btn.primary:active { box-shadow: 0 1px 0 #a52f29; }
.btn.small { font-size: 15px; padding: 6px 12px; border-radius: 99px; margin-left: auto; }
/* 좁은 화면: 모드·난이도·배경음·처음으로 를 한 줄로. 넘치면 모드 칩만 말줄임 */
@media (max-width: 819px) {
  .controls { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .controls .chip, .controls .btn.small { font-size: 14px; padding: 6px 9px; }
  .controls .btn.small { flex: none; }
  .mode-chip { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
}
.btn:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }

/* ---------- 보드 ---------- */
.stage { position: relative; display: flex; justify-content: center; align-items: flex-start; flex: 1 1 auto; min-height: 0; container-type: size; }

.board {
  --gap: 6px;
  position: relative;
  width: min(100%, calc((100svh - 250px) * 0.75), 560px);
  /* 남은 칸 안에 3:4 로 다 들어가게(구형 WebView 는 위 줄로 폴백) */
  width: min(100cqw, 75cqh, 560px);
  min-width: 200px;
  aspect-ratio: 3 / 4;
  padding: 10px;
  border-radius: 26px;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(0deg, rgba(246, 182, 50, 0.10) 0 20px, transparent 20px 40px),
    repeating-linear-gradient(90deg, rgba(246, 182, 50, 0.10) 0 20px, transparent 20px 40px);
  border: 4px solid #fff;
  box-shadow: var(--shadow), inset 0 0 0 2px #f6e2c4;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gap);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* 게임 중: 페이지 스크롤·당겨서 새로고침 잠금, 설명 줄 숨겨 판 자리 확보 */
html.playing, html.playing body { overflow: hidden; overscroll-behavior: none; }
html.playing .help { display: none; }

.cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.cell.empty::after {
  content: "";
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(122, 59, 30, 0.07);
}

.apple {
  position: relative;
  width: 100%;
  height: 100%;
  background: center / contain no-repeat url("assets/apple-cute.png");
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 18%;
  transition: transform 140ms cubic-bezier(.3, 1.6, .5, 1), filter 140ms;
  animation: drop-in 420ms cubic-bezier(.3, 1.5, .5, 1) backwards;
  animation-delay: var(--d, 0ms);
}
.apple .num {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fffaf0;
  color: var(--ink);
  font-size: clamp(16px, 4.4vw, 26px);
  line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(122, 59, 30, 0.12), 0 1px 2px rgba(122, 59, 30, 0.25);
}
.apple.selected { transform: scale(1.12) translateY(-3px); filter: drop-shadow(0 6px 5px rgba(90, 168, 60, 0.35)); }
.apple.selected .num { background: #eaf7df; color: var(--leaf-deep); box-shadow: inset 0 0 0 3px #7cc254; }
.apple.over { filter: saturate(0.7) drop-shadow(0 4px 4px rgba(194, 58, 51, 0.35)); }
.apple.over .num { background: #ffe3e0; color: var(--red-deep); box-shadow: inset 0 0 0 3px var(--red); }
.board.over { animation: shake 300ms; }
.apple.popping { animation: pop 320ms cubic-bezier(.3, 1.4, .6, 1) forwards; pointer-events: none; }

/* ---------- 효과 ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.score-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: var(--leaf-deep);
  text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
  animation: float-up 900ms ease-out forwards;
  white-space: nowrap;
}
.spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: spark 520ms ease-out forwards;
}

@keyframes drop-in { from { transform: translateY(-14px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(1.12); } 40% { transform: scale(1.35) rotate(-6deg); opacity: 1; } 100% { transform: scale(0) rotate(12deg); opacity: 0; } }
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@keyframes spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14px) scale(1.05, .95); } }

/* ---------- 모달(시작·결과) ---------- */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(74, 44, 29, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 50;
}
.modal.show { display: flex; }
.card {
  width: min(420px, 100%);
  background: var(--paper);
  border-radius: 28px;
  padding: 22px 20px 20px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(74, 44, 29, 0.3);
  border: 4px solid #fff;
  animation: card-in 360ms cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes card-in { from { transform: translateY(20px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.card-title { margin: 6px 0 6px; font-size: 32px; font-weight: 400; color: var(--red-deep); word-break: keep-all; }
.card-sub { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); word-break: keep-all; }
.card-sub b { color: var(--red-deep); font-weight: 400; }
.hop-row { display: flex; justify-content: center; gap: 6px; }
.hop-row img { width: 56px; height: 56px; animation: hop 1.1s ease-in-out infinite; }
.hop-row img:nth-child(2) { width: 70px; height: 70px; animation-delay: .15s; }
.hop-row img:nth-child(3) { animation-delay: .3s; }

.rule { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; font-size: 22px; }
.mini-apple {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  padding-top: 8px;
  background: center / contain no-repeat url("assets/apple-cute.png");
  color: var(--ink);
}
.plus { color: var(--ink-soft); }
.ten { background: var(--leaf); color: #fff; border-radius: 12px; padding: 2px 10px; }
.diff-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.result .ribbon {
  display: inline-block;
  margin-top: -6px;
  padding: 6px 22px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 3px 0 #a52f29;
}
.stars { margin: 12px 0 2px; font-size: 38px; letter-spacing: 4px; color: #e6d3bd; }
.stars .on { color: #f6b632; display: inline-block; animation: hop .7s ease-out both; }
.stars .on:nth-child(2) { animation-delay: .15s; }
.stars .on:nth-child(3) { animation-delay: .3s; }
.final-score { font-size: 22px; color: var(--ink-soft); }
.final-score strong { font-size: 60px; font-weight: 400; color: var(--ink); margin-right: 4px; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.result-grid > div { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.result-grid strong { font-size: 22px; font-weight: 400; }
.comment { margin-bottom: 16px; font-size: 18px; color: var(--leaf-deep); word-break: keep-all; }

/* ---------- 넓은 화면(폴드 펼침 ~1,100px)·폰 가로: 좌 패널 + 우 보드 ---------- */
@media (min-width: 820px), (orientation: landscape) and (min-width: 600px) {
  .app { flex-direction: row; align-items: center; justify-content: center; gap: 28px; padding: 24px; }
  .side { width: 300px; flex: none; padding: 22px 20px; gap: 16px; }
  .brand { flex-direction: column; align-items: flex-start; gap: 6px; }
  .brand-apple { width: 56px; height: 56px; }
  .title { font-size: 34px; white-space: normal; }
  .stats { grid-template-columns: 1fr; }
  .stat { justify-content: space-between; padding: 8px 14px; }
  .stat strong { font-size: 28px; margin-left: auto; }
  .btn.small { margin-left: 0; }
  .stage { align-self: stretch; align-items: center; }
  .board { width: min(calc((100svh - 48px) * 0.75), 600px); width: min(100cqw, 75cqh, 600px); --gap: 8px; padding: 14px; }
  .apple .num { font-size: clamp(18px, 2.6vh, 30px); }
}

/* 낮은 가로 화면(폰 가로 ~412px 높이): 좌 패널을 접어 한 화면에 */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  .app { padding: 12px; gap: 16px; }
  .side { width: 280px; padding: 10px 12px; gap: 8px; }
  .brand { flex-direction: row; align-items: center; }
  .brand-apple { width: 30px; height: 30px; }
  .title { font-size: 22px; white-space: nowrap; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stat { justify-content: center; gap: 3px; padding: 4px; }
  .stat .label, .stat .goal { font-size: 12px; }
  .stat strong { font-size: 20px; margin-left: 0; }
  .controls { flex-wrap: wrap; }
  .help { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- 2단계: 모드·기록·공유·광고 자리·설명문 ---------- */
.mode-chip { background: #fff3d6; border-color: #f3d58c; }
.btn.big { width: 100%; font-size: 20px; padding: 14px 18px; }
.tiny { margin: 8px 0 14px; font-size: 14px; color: var(--ink-soft); word-break: keep-all; }
.practice { border-top: 2px dashed var(--line); padding-top: 12px; display: grid; gap: 8px; }

/* 결과 화면: 판을 완전히 가리고(불투명) 세로로 스크롤 */
#overlay { flex-direction: column; justify-content: flex-start; overflow-y: auto; background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; }
#overlay .card { margin: auto auto 0; flex: none; }
.final-mode { margin-top: 8px; font-size: 16px; color: var(--ink-soft); }
.records { margin: -2px 0 10px; font-size: 15px; color: var(--ink-soft); display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.new-record { background: #f6b632; color: #fff; border-radius: 99px; padding: 2px 10px; animation: hop .8s ease-out both; }
.diff-row.second { margin-top: 10px; }
.btn.share { background: #fff3d6; border-color: #f3d58c; box-shadow: 0 4px 0 #e8c56f; }

/* 광고 자리: 결과 카드 아래, 버튼과 충분히 떨어뜨린다 */
.ad-slot { flex: none; width: min(420px, 100%); min-height: 120px; margin: 48px auto auto; border: 2px dashed #e6cfb0; border-radius: 16px; display: grid; place-items: center; color: #b39479; font-size: 14px; }
.ad-slot[hidden] { display: none; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 15px; z-index: 70; transition: opacity 200ms, transform 200ms; pointer-events: none; max-width: calc(100% - 32px); text-align: center; word-break: keep-all; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.about { max-width: 760px; margin: 8px auto 40px; padding: 20px 18px; background: var(--paper); border-radius: 22px; box-shadow: var(--shadow); line-height: 1.6; word-break: keep-all; }
.about h2 { margin: 0 0 8px; font-size: 22px; font-weight: 400; color: var(--red-deep); }
.about h3 { margin: 18px 0 6px; font-size: 18px; font-weight: 400; }
.about p { margin: 0 0 8px; font-size: 16px; color: var(--ink-soft); }
.about b { font-weight: 400; color: var(--ink); }
.about details { border-top: 2px dashed var(--line); padding: 8px 0; }
.about summary { cursor: pointer; font-size: 16px; }
@media (max-width: 819px) { .about { margin: 0 12px 32px; } }

/* ---------- 겨루기(도전장) ---------- */
.mode-group { display: grid; gap: 8px; border-top: 2px dashed var(--line); padding-top: 12px; margin-top: 12px; }
.mode-group .tiny { margin: 0; }
.group-title { font-size: 18px; color: var(--ink); text-align: left; }
.challenge-banner { background: #fff3d6; border: 2px solid #f3d58c; border-radius: 18px; padding: 12px; margin-bottom: 4px; display: grid; gap: 8px; }
.challenge-banner p { margin: 0; font-size: 16px; line-height: 1.5; word-break: keep-all; }
.challenge-banner b { font-weight: 400; color: var(--red-deep); }
.challenge-banner[hidden] { display: none; }
.vs-box { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 12px; margin: 4px 0 12px; display: grid; gap: 10px; }
.vs-box[hidden] { display: none; }
.vs-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.vs-side { display: grid; gap: 2px; min-width: 0; flex: 1; }
.vs-side strong { font-size: 30px; font-weight: 400; }
.vs-side[hidden] { display: none; }
.vs-side .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-mark { color: var(--red); font-size: 20px; }
.vs-verdict { font-size: 18px; color: var(--ink-soft); word-break: keep-all; }
.vs-verdict.win { color: var(--leaf-deep); }
.vs-verdict.lose { color: var(--red-deep); }
.vs-send { display: flex; gap: 8px; }
.vs-send input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); }
.vs-send input:focus-visible { outline: 3px solid var(--leaf); outline-offset: 1px; }
.modal { overflow-y: auto; }
.modal .card { margin: auto; }
.vs-box { grid-template-columns: minmax(0, 1fr); }
.vs-send input { width: 0; }
.vs-box > *, .vs-row > * { min-width: 0; }

/* ---------- 실시간 대결 ---------- */
.live-open { background: #eaf7df; border-color: #9fd27b; box-shadow: 0 4px 0 #8cc26a; }
.live-open[hidden], #liveJoin[hidden], #liveRoom[hidden], .team-pick[hidden], .live-board[hidden], .team-result[hidden], .countdown[hidden] { display: none; }
#liveModal, #liveResult { z-index: 55; }
.card-title.small { font-size: 26px; margin-top: 0; }
.live-status { min-height: 22px; margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); word-break: keep-all; }
.live-status.err { color: var(--red-deep); }
#liveJoin, #liveRoom { display: grid; gap: 10px; margin-bottom: 12px; }
.text-in { width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.text-in:focus-visible { outline: 3px solid var(--leaf); outline-offset: 1px; }
.join-row { display: flex; gap: 8px; }
.join-row .text-in { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 3px; }
.room-code { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.room-code strong { font-size: 34px; font-weight: 400; letter-spacing: 5px; color: var(--red-deep); }
.room-code .btn.small { margin-left: 0; }
.team-toggle { justify-self: center; }
.team-toggle input:disabled + span { opacity: .6; }
.team-pick { display: flex; gap: 8px; justify-content: center; }
.btn.team-a.on { background: #ffe3e0; border-color: #f08a82; }
.btn.team-b.on { background: #e3efff; border-color: #8ab4f0; }
.players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.players li { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; min-width: 0; }
.players .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 13px; padding: 1px 8px; border-radius: 99px; background: #f5e3cc; white-space: nowrap; }
.tag.A { background: #ffe3e0; color: var(--red-deep); }
.tag.B { background: #e3efff; color: #2f5fa8; }
.tag.host { background: #fff3d6; }
.tag.gone { background: #eee; color: #888; }
.live-board { display: grid; gap: 4px; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; font-size: 15px; }
.live-board .row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.live-board .row.me { color: var(--leaf-deep); }
.live-board .row.gone { opacity: .5; }
.live-board .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-board .teams { display: flex; justify-content: space-between; border-bottom: 2px dashed var(--line); padding-bottom: 4px; margin-bottom: 2px; }
.countdown { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; background: rgba(74,44,29,.25); font-size: 120px; color: #fff; text-shadow: 0 6px 0 var(--red-deep); pointer-events: none; }
.ranking { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; text-align: left; }
.ranking li { display: flex; gap: 8px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ranking li.me { border-color: #9fd27b; background: #f3fbec; }
.ranking .rk { width: 28px; color: var(--red-deep); }
.ranking .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking strong { font-weight: 400; font-size: 20px; }
.team-result { margin-top: 12px; font-size: 20px; }
.team-result .sc { display: flex; justify-content: center; gap: 14px; font-size: 16px; color: var(--ink-soft); }
.beta { display: inline-block; vertical-align: middle; font-size: 13px; line-height: 1; padding: 4px 8px; border-radius: 99px; background: var(--leaf); color: #fff; letter-spacing: 0; }