@charset "utf-8";

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

:root {
  --blue: #2f80ed;
  --blue-deep: #1469dd;
  --ink: #111318;
  --muted: #5f6875;
  --line: #dce3ed;
  --panel: rgba(255,255,255,.93);
  --shadow: 0 12px 28px rgba(51, 70, 96, .15);
  --radius: 22px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: #f8f9fc;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Pretendard, "GMarketSans" , Arial, sans-serif;
  background: #f8f9fc url('/api/assets/bg2.webp') center top / cover fixed no-repeat;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: min(13vw, 170px);
  pointer-events: none;
  display: none;
  opacity: .34;
  background:
    linear-gradient(90deg, transparent 44%, rgba(89,137,207,.32) 45% 46%, transparent 47%) 0 80px/100% 230px,
    linear-gradient(145deg, transparent 48%, rgba(89,137,207,.28) 49% 50%, transparent 51%) 0 0/100% 160px;
  z-index: -1;
}

body::after {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

img, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.container {
  width: min(1260px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  padding-top: 14px;
}

.header-utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
}

.utility-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 17px;
  font-weight: 500;
}

.language-button {
  border: 0;
  background: transparent;
  color: #15171b;
  cursor: pointer;
  padding: 4px 0;
}

.language-button > span:last-child {
  font-size: 10px;
  vertical-align: 2px;
}

.support-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.telegram-dot {
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2ba6d8;
  font-size: 14px;
  transform: rotate(-18deg);
}

.brand-wrap {
  display: flex;
  justify-content: center;
  margin-top: -4px;
  margin-bottom: 17px;
}

.brand-link {
  width: min(540px, 62vw);
}

.brand-link img {
  width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.nav-wrap {
  position: relative;
  z-index: 20;
  border-top: 1px solid rgba(220,227,237,.8);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 14px rgba(48,71,105,.06);
}

body:not([data-title]) .nav-wrap { display: none; }

.nav-inner { position: relative; }
.main-nav { display: flex; justify-content: center; align-items: stretch; }
.nav-item { position: relative; }
.main-nav > .nav-link,
.nav-item > button {
  min-width: 150px;
  height: 54px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  color: #202630;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.nav-item > button svg { flex: 0 0 auto; color: #7c8797; transition: transform .2s; }
.nav-item.is-open > button svg { transform: rotate(180deg); }
.main-nav > .nav-link:hover,
.nav-item > button:hover,
.main-nav a.is-active { color: var(--blue-deep); }
.submenu,
.mega-menu {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  min-width: 210px;
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, 8px);
  border: 1px solid var(--line);
  border-radius: 0 0 15px 15px;
  background: #fff;
  box-shadow: var(--shadow);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.mega-menu { width: 430px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.has-submenu:hover > .submenu,
.has-submenu:hover > .mega-menu,
.has-submenu.is-open > .submenu,
.has-submenu.is-open > .mega-menu { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.submenu a,
.menu-group a { display: block; padding: 10px 12px; border-radius: 8px; color: #4f5967; font-size: 14px; }
.submenu a:hover,
.menu-group a:hover,
.submenu a.is-active,
.menu-group a.is-active { color: var(--blue-deep); background: #edf5ff; }
.menu-group strong { display: block; padding: 7px 12px 8px; border-bottom: 1px solid #e8edf4; color: #1d2632; font-size: 17px; }
.menu-toggle { display: none; }
.drawer-close,
.menu-backdrop { display: none; }

.subpage-main { min-height: 430px; padding: 54px 0 80px; }
.page-heading { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-heading h1 { margin: 0; color: #151a22; font-size: clamp(29px, 4vw, 42px); letter-spacing: -1.8px; }
.page-description { margin: 0px 0 0; color: #697483; font-size: 16px; line-height: 1.6; }
.empty-content { min-height: 250px; }

.game-tabs {
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(43,68,102,.07);
}

.game-tabs a {
  min-height: 54px;
  padding: 12px 8px;
  display: grid;
  place-items: center;
  border-right: 1px solid #dfe5ed;
  color: #4b5563;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.game-tabs a:last-child { border-right: 0; }
.game-tabs a:hover { color: var(--blue-deep); background: #f2f7ff; }
.game-tabs a.is-active { color: #fff; background: linear-gradient(180deg, #4093f2, #2174df); }

.chart-subpage .page-heading { margin-bottom: 22px; }
.chart-content {
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #e0e5ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(44,65,96,.08);
}

.game-experience iframe {
  width: 100%;
  height: min(820px, 78vh);
  min-height: 860px;
  display: block;
  border: 0;
  background: #fff;
}

/* Chart game guide */
.game-guide { color: #202734; }
.guide-hero,
.guide-section {
  margin-bottom: 24px;
  border: 1px solid rgba(213,222,235,.95);
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 28px rgba(44,65,96,.08);
}
.guide-hero {
  position: relative;
  overflow: hidden;
  padding: 54px 52px 45px;
  background: linear-gradient(135deg, #f9fcff 0%, #fff 55%, #eef6ff 100%);
}
.guide-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -155px;
  border: 55px solid rgba(47,128,237,.07);
  border-radius: 50%;
}
.guide-kicker { color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: 1.7px; }
.guide-hero h2 { margin: 12px 0 18px; font-size: clamp(28px, 4vw, 43px); line-height: 1.25; letter-spacing: -2px; }
.guide-hero h2 em { color: var(--blue-deep); font-style: normal; }
.guide-hero > p { max-width: 800px; margin: 0; color: #596575; font-size: 16px; line-height: 1.85; word-break: keep-all; }
.fairness-note { max-width: 800px; margin-top: 25px; padding: 15px 18px; display: flex; align-items: center; gap: 12px; border-radius: 12px; background: #edf6ff; color: #36516f; }
.fairness-note p { margin: 0; font-size: 14px; line-height: 1.6; }
.guide-icon { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 900; }
.guide-section { padding: 38px 42px 42px; }
.guide-section-head { margin-bottom: 27px; display: flex; align-items: center; gap: 14px; }
.section-number { flex: 0 0 auto; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #4b9bf5, #176dd7); box-shadow: 0 6px 14px rgba(32,111,213,.25); font-size: 15px; font-weight: 900; }
.guide-section-head p { margin: 0 0 3px; color: #8290a2; font-size: 10px; font-weight: 900; letter-spacing: 1.3px; }
.guide-section-head h2 { margin: 0; font-size: 26px; letter-spacing: -1px; }
.market-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.market-list span { min-width: 0; padding: 16px 9px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e1e7ef; border-radius: 12px; background: #f9fbfd; color: #3a4554; font-size: 14px; font-weight: 800; }
.market-list b { color: var(--blue); font-size: 18px; }
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.rule-card { min-height: 145px; padding: 22px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #e0e6ef; border-radius: 16px; background: #fafcff; }
.rule-card span { width: fit-content; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 900; }
.rule-card b { font-size: 18px; }
.rule-card small { margin-top: 6px; color: #7b8797; font-size: 13px; }
.rule-card.up span { background: #e64d5f; }
.rule-card.down span { background: #2781ed; }
.rule-card.tie span { background: #7a62d3; }
.rule-notes { margin-top: 14px; padding: 16px 20px; border-left: 4px solid var(--blue); border-radius: 0 12px 12px 0; background: #f4f8fd; }
.rule-notes p { margin: 0; color: #566273; font-size: 14px; line-height: 1.7; }
.rule-notes p + p { margin-top: 4px; }
.pair-panel { margin-top: 28px; padding: 26px; display: grid; grid-template-columns: .72fr 1.55fr; gap: 24px; align-items: center; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #17243a, #213b60); }
.pair-label { color: #7fbaff; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }
.pair-copy h3 { margin: 7px 0 8px; font-size: 31px; }
.pair-copy h3 small { font-size: 17px; font-weight: 500; }
.pair-copy p { margin: 0; color: #bac9dc; font-size: 13px; line-height: 1.6; }
.pair-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair-card { padding: 19px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.07); }
.pair-card strong { font-size: 16px; }
.red-pair strong { color: #ff8794; }
.blue-pair strong { color: #7fbdff; }
.pair-card p { min-height: 58px; margin: 8px 0 12px; color: #cfdae8; font-size: 12px; line-height: 1.55; }
.pair-card code { padding: 5px 8px; border-radius: 6px; color: #e9f2ff; background: rgba(0,0,0,.22); font-family: monospace; font-size: 12px; }
.guide-check-list { margin: 25px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 25px; list-style: none; }
.guide-check-list li { position: relative; padding-left: 24px; color: #596575; font-size: 13px; line-height: 1.65; word-break: keep-all; }
.guide-check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #55a0f3; font-size: 10px; font-weight: 900; }
.howto-start-image { margin: 0 0 20px; overflow: hidden; border: 1px solid #e2e7ef; border-radius: 14px; background: #f5f8fc; box-shadow: 0 10px 28px rgba(25, 53, 84, .08); }
.howto-start-image img { display: block; width: 100%; height: auto; }
.play-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; counter-reset: none; }
.play-steps li { padding: 17px 18px; display: flex; align-items: center; gap: 14px; border: 1px solid #e2e7ef; border-radius: 13px; background: #fafcff; }
.play-steps li > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-deep); background: #e7f2ff; font-size: 13px; font-weight: 900; }
.play-steps b { display: block; margin-bottom: 3px; font-size: 15px; }
.play-steps p { margin: 0; color: #768293; font-size: 13px; line-height: 1.5; }

/* Simple chart game explainer */
.chart-explainer .guide-hero h2,.chart-explainer .guide-section-head h2 { letter-spacing: 0; }
.chart-simple-hero { padding-bottom: 40px; background: #fff; }
.chart-simple-hero::after { display: none; }
.chart-simple-hero h2 { font-size: 40px; }
.chart-simple-hero > p { max-width: 850px; }
.chart-round-flow { max-width: 850px; margin-top: 28px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.chart-round-flow > div { min-height: 82px; padding: 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #dfe5ec; border-radius: 8px; background: #f8fafc; }
.chart-round-flow span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #287fe8; font-size: 13px; font-weight: 900; }
.chart-round-flow p { margin: 0; }
.chart-round-flow b,.chart-round-flow small { display: block; }
.chart-round-flow b { color: #202834; font-size: 14px; }
.chart-round-flow small { margin-top: 4px; color: #778291; font-size: 11px; line-height: 1.4; }
.guide-section-lead { margin: -11px 0 24px; color: #687483; font-size: 14px; line-height: 1.7; word-break: keep-all; }
.outcome-explainer,.pair-explainer { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 22px; align-items: stretch; }
.guide-shot { margin: 0; overflow: hidden; border: 1px solid #dfe4eb; border-radius: 8px; background: #101522; }
.guide-shot img { width: 100%; height: auto; }
.guide-shot figcaption,.howto-start-image figcaption { padding: 11px 14px; color: #697483; background: #f7f8fa; font-size: 11px; line-height: 1.5; text-align: center; }
.outcome-rules { display: grid; grid-template-rows: repeat(3,1fr); gap: 9px; }
.outcome-rule { min-height: 86px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; border: 1px solid #e0e5eb; border-radius: 8px; background: #fff; }
.outcome-rule > span { flex: 0 0 68px; padding: 8px 7px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 900; text-align: center; }
.outcome-rule p { margin: 0; }
.outcome-rule b,.outcome-rule small { display: block; }
.outcome-rule b { color: #262e38; font-size: 14px; }
.outcome-rule small { margin-top: 5px; color: #7b8490; font-size: 11px; }
.outcome-up > span { background: #e64051; }
.outcome-down > span { background: #2879e8; }
.outcome-tie > span { background: #1d9a55; }
.tie-warning { margin-top: 16px; padding: 15px 18px; display: flex; align-items: center; gap: 12px 24px; border-left: 4px solid #20a45d; background: #f1faf5; }
.tie-warning strong { color: #237044; font-size: 13px; }
.tie-warning span { color: #617268; font-size: 12px; }
.pair-explainer { grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); }
.simple-pair-rules { display: grid; grid-template-rows: repeat(2,1fr); gap: 10px; }
.simple-pair-rule { padding: 18px; border: 1px solid #e0e5eb; border-radius: 8px; background: #fff; }
.simple-pair-rule > span { display: inline-flex; padding: 5px 8px; border-radius: 5px; color: #fff; font-size: 10px; font-weight: 900; }
.simple-pair-rule h3 { margin: 9px 0 6px; color: #252d37; font-size: 17px; }
.simple-pair-rule p { margin: 0 0 11px; color: #687382; font-size: 12px; line-height: 1.6; }
.simple-pair-rule code { padding: 5px 8px; border-radius: 5px; color: #3f4853; background: #f0f2f5; font-size: 12px; }
.red-pair-rule { border-left: 4px solid #df3d50; }
.red-pair-rule > span { background: #d83c4f; }
.blue-pair-rule { border-left: 4px solid #2a78dd; }
.blue-pair-rule > span { background: #2876d8; }
.pair-availability { margin: 15px 0 0; color: #77818d; font-size: 12px; text-align: right; }
.chart-howto-layout .howto-start-image { margin-bottom: 20px; }
.chart-play-steps li:last-child { grid-column: auto; }
.chart-notice-list { margin-top: 0; }

/* Rabbit vs turtle guide */
.rabbit-guide-hero { background: linear-gradient(135deg, #fbfff9 0%, #fff 53%, #f0f9eb 100%); }
.rabbit-guide-hero::after { border-color: rgba(63,164,78,.07); }
.rabbit-guide-hero h2 .rabbit-title-rabbit { color: #e53935 !important; }
.rabbit-guide-hero h2 .rabbit-title-turtle { color: #1976d2 !important; }
.rabbit-guide .guide-kicker { color: #35a34b; }
.rabbit-guide .guide-hero h2 em { color: #268d3b; }
.rabbit-note { background: #eef9ef; color: #3f6847; }
.rabbit-note .guide-icon { background: #3aaa50; }
.rabbit-guide .section-number { background: linear-gradient(145deg, #55bc63, #258d39); box-shadow: 0 6px 14px rgba(35,137,55,.22); }
.race-market-card { min-height: 95px; padding: 18px 24px; display: flex; align-items: center; gap: 16px; border: 1px solid #dde8df; border-radius: 16px; background: linear-gradient(120deg, #f8fcf7, #f1f8ef); }
.bitcoin-symbol { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #f7b733, #e58b12); box-shadow: 0 6px 14px rgba(218,137,18,.22); font-size: 28px; font-weight: 900; }
.race-market-card div { min-width: 0; }
.race-market-card strong { display: block; font-size: 20px; }
.race-market-card p { margin: 4px 0 0; color: #738071; font-size: 13px; }
.live-badge { margin-left: auto; padding: 6px 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: #278c3a; background: #e2f4e4; font-size: 11px; font-weight: 900; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #34ad49; box-shadow: 0 0 0 4px rgba(52,173,73,.12); }
.race-rule-grid .rule-card span { padding: 6px 12px; }
.rabbit-win span { background: #e95a65; }
.turtle-win span { background: #3987da; }
.race-tie span { background: #718096; }
.race-mapping { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.race-mapping div { padding: 13px 18px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px dashed #cdd8e5; border-radius: 11px; background: #f8fafc; font-size: 14px; }
.race-mapping span { font-weight: 800; }
.race-mapping i { color: #9aa5b3; font-style: normal; }
.race-mapping strong { color: #2c85e9; font-size: 14px; }
.race-check-list { margin-top: 22px; }
.rabbit-guide .guide-check-list li::before { background: #48ad59; }
.round-timeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; }
.round-timeline > i { align-self: center; color: #aeb8c5; font-size: 31px; font-style: normal; font-weight: 300; }
.timeline-item { min-width: 0; min-height: 116px; padding: 20px; display: flex; align-items: center; gap: 15px; border: 1px solid #e0e7eb; border-radius: 15px; background: #fafcfb; }
.timeline-item > span { flex: 0 0 auto; min-width: 55px; color: #2d973f; font-size: 30px; font-weight: 900; text-align: center; }
.timeline-item > span small { margin-left: 2px; font-size: 12px; }
.timeline-item b { display: block; font-size: 16px; }
.timeline-item p { margin: 5px 0 0; color: #7b887d; font-size: 12px; line-height: 1.45; }
.timeline-item.racing { border-color: #cae2cd; background: #f0f8f1; }
.timeline-item.result { border-color: #dce5ef; background: #f4f8fc; }
.continuous-note { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; color: #506256; background: #edf5ee; font-size: 13px; line-height: 1.6; text-align: center; }
.continuous-note span { margin-right: 5px; color: #36a249; font-size: 18px; font-weight: 900; vertical-align: -1px; }
.rabbit-steps li > span { color: #278e3b; background: #e8f5e9; }

/* Rabbit introduction — complete beginner guide */
.rabbit-intro-guide .guide-hero strong,.rabbit-intro-guide .guide-section-lead b{color:#263b2a}.rabbit-core-grid{margin-bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.rabbit-core{min-height:92px;padding:18px 20px;display:flex;align-items:center;gap:15px;border:1px solid #e1e7eb;border-radius:15px;background:#fff}.rabbit-core>span{font-size:36px}.rabbit-core b{display:block;font-size:17px}.rabbit-core p{margin:5px 0 0;color:#748077;font-size:12px;line-height:1.5}.rabbit-core-up{border-left:5px solid #e95a65;background:#fff9f9}.rabbit-core-down{border-left:5px solid #3987da;background:#f8fbff}.rabbit-guide-image{max-width:1000px;margin:0 auto 22px;overflow:hidden;border:1px solid #dce4df;border-radius:14px;background:#172417;box-shadow:0 8px 22px rgba(31,62,36,.1)}.rabbit-guide-image img{display:block;width:100%;height:auto}.rabbit-examples{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.rabbit-examples p{margin:0;padding:13px 14px;display:flex;flex-direction:column;gap:7px;border:1px solid #e2e7eb;border-radius:10px;background:#fafcfb;font-size:13px}.rabbit-examples span{width:fit-content;padding:4px 8px;border-radius:5px;color:#fff;font-size:11px;font-weight:900}.example-rabbit{background:#df4c59}.example-turtle{background:#347dc9}.example-tie{background:#697787}.rabbit-important{margin:15px 0 0;padding:16px 18px;border-left:4px solid #35a34b;background:#eff8f1;color:#526458;font-size:13px;line-height:1.65}.rabbit-important strong{display:block;margin-bottom:3px;color:#267238}.pair-rule-list{display:grid;grid-template-columns:1fr 1fr;gap:15px}.pair-rule-list article{min-width:0;padding:20px;overflow:hidden;border:1px solid #dde4e9;border-radius:14px;background:#fafcfd}.pair-rule-list article>span{display:inline-block;padding:5px 9px;border-radius:5px;color:#fff;font-size:10px;font-weight:900}.pair-red{background:#d94858}.pair-blue{background:#2f7ed9}.pair-both{background:linear-gradient(90deg,#d94858 0 48%,#2f7ed9 52%)}.pair-rule-list h3{margin:10px 0 6px;font-size:19px}.pair-rule-list p{min-height:42px;margin:0 0 10px;color:#65717e;font-size:13px;line-height:1.6}.pair-rule-list code{display:block;width:fit-content;max-width:100%;padding:7px 9px;border-radius:6px;color:#3e4954;background:#edf1f4;font-size:12px;white-space:normal}.pair-rule-list img{display:block;width:calc(100% + 40px);height:auto;margin:18px -20px -20px;border-top:1px solid #dce3e8}.pair-rule-list .pair-rule-wide{grid-column:1/-1}.tie-pair-box{margin-top:15px;padding:20px;display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr);align-items:center;gap:20px;overflow:hidden;border:1px solid #cfe3d3;border-radius:14px;background:#f4faf5}.tie-pair-box strong{color:#267238;font-size:18px}.tie-pair-box p{margin:8px 0 0;color:#607066;font-size:13px;line-height:1.7}.tie-pair-box img{display:block;width:100%;height:auto;border-radius:9px}.round-timeline.four-stage{grid-template-columns:repeat(4,1fr);gap:9px}.round-timeline.four-stage .timeline-item{padding:15px;gap:10px}.round-timeline.four-stage .timeline-item>span{min-width:45px;font-size:25px}.rabbit-howto-image{max-width:500px;margin:0 auto 22px;overflow:hidden;border:1px solid #dbe4de;border-radius:14px;background:#142015;box-shadow:0 8px 22px rgba(31,62,36,.1)}.rabbit-howto-image img{display:block;width:100%;height:auto}.betting-notice .guide-check-list{margin-top:0}
.rabbit-intro-guide .rabbit-top-layout{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start;gap:24px}.rabbit-intro-guide .rabbit-top-layout>.rabbit-guide-image{width:320px;max-width:100%;margin:0}.rabbit-top-content{min-width:0}.rabbit-rule-top .race-rule-grid{grid-template-columns:1fr}.rabbit-rule-top .rule-card{min-height:0;padding:14px 17px}.rabbit-rule-top .rule-card span{margin-bottom:8px}.rabbit-rule-top .rabbit-examples{grid-template-columns:1fr}.rabbit-rule-top .rabbit-examples p{flex-direction:row;align-items:center;justify-content:space-between}.rabbit-pair-top{margin-bottom:22px}.rabbit-pair-top .guide-section-lead{margin:0 0 15px}.pair-quick-guide{display:grid;gap:8px}.pair-quick-guide p{margin:0;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;border:1px solid #e0e6e9;border-radius:9px;background:#fafcfb;font-size:12px}.pair-quick-guide b{color:#29372d}.pair-quick-guide span{color:#748078;text-align:right}
.pair-rule-list code{padding:9px 12px;font-size:18px;line-height:1.55}
.pair-rule-list code .pair-code-red{color:#d94858;font-weight:900}
.pair-rule-list code .pair-code-blue{color:#2f7ed9;font-weight:900}

/* Game results */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.results-panel { overflow: hidden; border: 1px solid #dce3ed; border-radius: 19px; background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(44,65,96,.09); }
.results-filter { padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e3e8ef; background: linear-gradient(120deg, #f8fbff, #f2f7fd); }
.filter-copy strong,.filter-copy span { display: block; }
.filter-copy strong { color: #26303d; font-size: 16px; }
.filter-copy span { margin-top: 4px; color: #7c8796; font-size: 12px; }
.filter-controls { display: flex; align-items: center; gap: 8px; }
.filter-controls input { width: 170px; height: 42px; padding: 0 12px; border: 1px solid #cfd8e5; border-radius: 9px; color: #303a48; background: #fff; font: inherit; font-size: 13px; outline: none; }
.filter-controls input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,128,237,.1); }
.filter-controls button { height: 42px; padding: 0 17px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.filter-submit { border: 1px solid var(--blue-deep); color: #fff; background: linear-gradient(180deg, #4397f5, #2477df); }
.filter-reset { border: 1px solid #d2dae5; color: #687484; background: #fff; }
.results-summary { min-height: 62px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e9ef; }
.results-summary strong { font-size: 15px; }
.results-summary span { color: #818c9a; font-size: 12px; }
.results-summary b { color: var(--blue-deep); }
.result-row { min-height: 64px; padding: 0 24px; display: grid; grid-template-columns: 1.35fr 1fr 1.2fr .7fr .75fr; align-items: center; border-bottom: 1px solid #edf0f4; }
.result-row:last-child { border-bottom: 0; }
.result-row > div { min-width: 0; color: #46515f; font-size: 14px; text-align: center; }
.result-row > div:first-child { text-align: left; }
.result-head { min-height: 48px; background: #f7f9fc; }
.result-head > div { color: #778292; font-size: 12px; font-weight: 800; }
.time-round small { display: none; }
.symbol-cell { color: #253343 !important; font-weight: 800; }
.type-badge { min-width: 42px; padding: 5px 9px; display: inline-block; border-radius: 7px; color: #596779; background: #edf1f6; font-size: 12px; font-weight: 800; }
.result-badge { min-width: 54px; padding: 6px 11px; display: inline-block; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 900; }
.result-values { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.result-rp { min-width: 38px; background: #e84949; }
.result-bp { min-width: 38px; background: #3479e5; }
.result-up,.result-rabbit { background: linear-gradient(180deg, #ed6672, #d94352); box-shadow: 0 3px 8px rgba(210,57,72,.18); }
.result-down,.result-turtle { background: linear-gradient(180deg, #4a98ee, #2877d2); box-shadow: 0 3px 8px rgba(37,113,202,.18); }
.result-tie { background: linear-gradient(180deg, #8b78d3, #705bbd); }
.results-empty { padding: 55px 20px; color: #8a94a2; font-size: 13px; text-align: center; }
.result-row[hidden],.results-empty[hidden] { display: none; }
.mobile-label { display: none; }

.market-verification { margin-top: 24px; padding: 34px 36px 30px; border: 1px solid #dce3ed; border-radius: 19px; background: #fff; box-shadow: 0 10px 28px rgba(44,65,96,.09); }
.market-verification-head { display: flex; align-items: center; gap: 16px; }
.market-verify-logo { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e6e8ec; border-radius: 8px; background: #fff; }
.market-verify-logo img { width: 100%; height: 100%; object-fit: cover; }
.market-verification-head small { color: #818e9e; font-size: 9px; font-weight: 900; letter-spacing: 1.2px; }
.market-verification-head h2 { margin: 3px 0 5px; color: #202a37; font-size: 23px; letter-spacing: -.8px; }
.market-verification-head p { margin: 0; color: #697687; font-size: 13px; line-height: 1.65; }
.verification-points { margin: 24px 0 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.verification-points div { padding: 15px 17px; border: 1px solid #e0e6ee; border-radius: 11px; background: #f9fbfd; }
.verification-points b,.verification-points span { display: block; }
.verification-points b { color: #2d3948; font-size: 13px; }
.verification-points span { margin-top: 5px; color: #7b8796; font-size: 11px; line-height: 1.5; }
.binance-market-toolbar { min-height: 58px; margin-top: 24px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #e2e5e9; border-bottom: 0; border-radius: 8px 8px 0 0; background: #fafafa; }
.binance-market-toolbar > div { display: flex; align-items: baseline; gap: 9px; }
.binance-market-toolbar strong { color: #161a1e; font-size: 16px; }
.binance-market-toolbar div span { color: #747c86; font-size: 11px; }
.binance-market-refresh { display: inline-flex; align-items: center; gap: 7px; color: #737b85; font-size: 11px; font-weight: 800; white-space: nowrap; }
.binance-market-refresh i { width: 7px; height: 7px; border-radius: 50%; background: #18a76f; box-shadow: 0 0 0 3px rgba(24,167,111,.13); }
.binance-market-table-wrap { max-height: 560px; overflow: auto; border: 1px solid #e2e5e9; background: #fff; scrollbar-color: #c8cdd4 #f5f6f7; }
.binance-market-table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.binance-market-table th,.binance-market-table td { height: 48px; padding: 0 12px; border-bottom: 1px solid #eceef1; color: #444b54; font-size: 12px; text-align: center; white-space: nowrap; }
.binance-market-table th { position: sticky; top: 0; z-index: 1; height: 44px; color: #69717c; background: #f5f6f7; font-size: 11px; font-weight: 900; }
.binance-market-table th:nth-child(1) { width: 105px; }
.binance-market-table th:nth-child(2) { width: 190px; }
.binance-market-table th:nth-child(3) { width: 115px; }
.binance-market-table th:nth-child(4),.binance-market-table th:nth-child(5) { width: 140px; }
.binance-market-table th:nth-child(6) { width: 220px; }
.binance-market-table tbody tr:last-child td { border-bottom: 0; }
.binance-market-table tbody tr:hover { background: #fafbfc; }
.binance-market-table td strong { color: #b78100; font-size: 12px; }
.binance-market-table time { color: #656e79; }
.market-symbol-badge { display: inline-flex; padding: 4px 8px; border: 1px solid #e8d693; border-radius: 999px; color: #936d00; background: #fff9e6; font-size: 10px; font-weight: 900; }
.market-price { color: #22272e; font-weight: 800; }
.market-price-up { color: #09865c; }
.market-price-down { color: #d6384e; }
.market-result-values { display: flex; align-items: center; justify-content: center; gap: 5px; }
.market-result-badge { min-width: 48px; padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 900; }
.market-result-up { background: #0b9b69; }
.market-result-down { background: #e24258; }
.market-result-tie,.market-result-void { background: #717985; }
.market-result-bluepp { background: #2876d8; }
.market-result-redpp { background: #d43d4f; }
.binance-market-state { min-height: 72px; display: grid; place-items: center; border: 1px solid #e2e5e9; border-top: 0; color: #808892; background: #fff; font-size: 12px; font-weight: 800; }
.binance-market-state[hidden] { display: none; }
.chart-disclaimer { margin: 14px 2px 0; color: #8792a0; font-size: 10px; line-height: 1.65; word-break: keep-all; }

/* API integration guide */
.api-guide-page { max-width: 1064px; }
.api-guide-hero,.api-doc-section { margin-bottom: 24px; border: 1px solid #dce4ef; border-radius: 21px; background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(44,65,96,.08); }
.api-guide-hero { position: relative; overflow: hidden; padding: 53px 50px 43px; background: linear-gradient(135deg,#f9fcff,#fff 55%,#edf6ff); }
.api-guide-hero::after { content: "</>"; position: absolute; right: 30px; top: 15px; color: rgba(44,128,232,.06); font-family: monospace; font-size: 170px; font-weight: 900; line-height: 1; pointer-events: none; }
.api-guide-badge { color: var(--blue-deep); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; }
.api-guide-hero h2 { position: relative; z-index: 1; margin: 11px 0 17px; font-size: clamp(31px,4vw,45px); line-height: 1.22; letter-spacing: -2.2px; }
.api-guide-hero h2 em { color: var(--blue-deep); font-style: normal; }
.api-guide-hero > p { position: relative; z-index: 1; max-width: 760px; margin: 0; color: #5d6979; font-size: 15px; line-height: 1.85; word-break: keep-all; }
.api-guide-games { margin-top: 23px; display: flex; flex-wrap: wrap; gap: 8px; }
.api-guide-games span { padding: 7px 12px; border: 1px solid #d8e5f5; border-radius: 999px; color: #43709f; background: #f2f7fd; font-size: 11px; font-weight: 800; }
.private-notice { position: relative; z-index: 1; margin-top: 25px; padding: 14px 17px; display: flex; align-items: center; gap: 14px; border-left: 4px solid #f1a72d; border-radius: 0 10px 10px 0; background: #fff8e9; }
.private-notice strong { flex: 0 0 auto; color: #a66609; font-size: 13px; }
.private-notice p { margin: 0; color: #766348; font-size: 12px; line-height: 1.6; }
.api-guide-toc { position: sticky; top: 0; z-index: 15; margin-bottom: 24px; padding: 9px; display: flex; gap: 5px; overflow-x: auto; border: 1px solid #dce3ed; border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 5px 15px rgba(45,65,95,.08); scrollbar-width: none; }
.api-guide-toc::-webkit-scrollbar { display: none; }
.api-guide-toc a { flex: 1 0 auto; padding: 9px 12px; border-radius: 8px; color: #637082; font-size: 15px; font-weight: 500; text-align: center; transition: color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.api-guide-toc a:hover { color: var(--blue-deep); background: #edf5ff; }
.api-guide-toc a.is-active { color: #fff; background: var(--blue-deep); box-shadow: 0 3px 9px rgba(30,104,190,.24); }
.api-doc-section { padding: 39px 41px 43px; scroll-margin-top: 80px; }
.api-doc-head { margin-bottom: 27px; display: flex; align-items: center; gap: 14px; }
.api-doc-head > span { flex: 0 0 auto; width: 49px; height: 49px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#4999f2,#1b70d8); box-shadow: 0 6px 14px rgba(31,107,203,.22); font-size: 14px; font-weight: 900; }
.api-doc-head small { color: #8793a2; font-size: 9px; font-weight: 900; letter-spacing: 1.3px; }
.api-doc-head h2 { margin: 3px 0 0; font-size: 25px; letter-spacing: -1px; }
.api-doc-lead { margin: -5px 0 24px; color: #5f6b7b; font-size: 14px; line-height: 1.8; word-break: keep-all; }
.integration-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 13px; align-items: center; }
.integration-flow > div { min-height: 180px; padding: 23px; display: flex; flex-direction: column; border: 1px solid #e0e6ee; border-radius: 15px; background: #fafcff; }
.integration-flow > i { color: #a6b1bf; font-size: 30px; font-style: normal; }
.integration-flow b { width: 31px; height: 31px; margin-bottom: 17px; display: grid; place-items: center; border-radius: 9px; color: var(--blue-deep); background: #e6f1ff; font-size: 12px; }
.integration-flow strong { font-size: 15px; }
.integration-flow p { flex: 1; margin: 7px 0 13px; color: #748091; font-size: 12px; line-height: 1.55; }
.integration-flow code { color: #2776d2; font-size: 11px; }
.api-call-direction { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.api-call-direction div { padding: 14px 17px; display: flex; justify-content: space-between; border-radius: 10px; background: #f0f6fd; font-size: 12px; }
.api-call-direction span { color: #718094; }
.credential-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.credential-grid > div { padding: 19px; border: 1px solid #e0e6ee; border-radius: 13px; background: #fafcff; }
.credential-grid span { display: block; margin-bottom: 10px; color: #748092; font-size: 11px; font-weight: 800; }
.credential-grid code { color: #256fc8; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.credential-grid p { margin: 8px 0 0; color: #8a95a3; font-size: 11px; }
.api-warning { margin-top: 16px; padding: 17px 19px; border: 1px solid #f1d8ae; border-radius: 11px; background: #fff9ee; }
.api-warning strong { color: #a5680c; font-size: 13px; }
.api-warning p { margin: 5px 0 0; color: #7a6b52; font-size: 12px; line-height: 1.65; }
.signature-formula { margin-bottom: 19px; padding: 19px; display: flex; align-items: center; gap: 12px; overflow-x: auto; border-radius: 12px; color: #dfeafa; background: #18263a; }
.signature-formula span { flex: 0 0 auto; color: #7faeee; font-size: 12px; font-weight: 800; }
.signature-formula code { white-space: nowrap; font-size: 12px; }
.api-table-wrap { overflow-x: auto; border: 1px solid #e0e6ee; border-radius: 12px; }
.api-field-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.api-field-table th,.api-field-table td { padding: 13px 16px; border-bottom: 1px solid #e8ecf1; text-align: left; }
.api-field-table tr:last-child td { border-bottom: 0; }
.api-field-table th { color: #6f7b8b; background: #f7f9fc; font-size: 11px; }
.api-field-table td:first-child { color: #2d5f97; font-family: monospace; font-weight: 700; white-space: nowrap; }
.code-panel { min-width: 0; overflow: hidden; border-radius: 13px; background: #172334; box-shadow: 0 6px 16px rgba(20,34,52,.12); }
.code-head { min-height: 43px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); color: #b8c7d9; font-size: 11px; font-weight: 800; }
.code-head button { padding: 5px 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; color: #bcd4ef; background: rgba(255,255,255,.06); font: inherit; cursor: pointer; }
.code-panel pre { margin: 0; padding: 19px; overflow-x: auto; color: #dce8f6; font-size: 12px; line-height: 1.65; tab-size: 2; }
.code-panel code { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.code-note { margin: 0; padding: 0 19px 17px; color: #8294a9; font-size: 11px; line-height: 1.55; }
.api-caption { margin: 13px 0 0; color: #85909e; font-size: 11px; line-height: 1.6; }
.endpoint-title { margin-bottom: 17px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; overflow-x: auto; border: 1px solid #dfe6ef; border-radius: 11px; background: #f8fafc; }
.endpoint-title > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 6px; color: #fff; font-size: 10px; font-weight: 900; }
.method-post { background: #287fdf; }.method-get { background: #37a05a; }
.endpoint-title code { color: #32465d; white-space: nowrap; font-size: 12px; font-weight: 700; }
.code-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.launch-options { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.launch-options div { min-width: 0; padding: 15px; border: 1px solid #e0e6ed; border-radius: 10px; background: #fafcff; }
.launch-options b { display: block; margin-bottom: 8px; font-size: 12px; }
.launch-options code { display: block; overflow-x: auto; color: #3b6d9f; font-size: 10px; white-space: nowrap; }
.callback-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.callback-list > div { position: relative; padding: 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; border: 1px solid #e0e6ee; border-radius: 12px; background: #fafcff; }
.callback-list > div:last-child { grid-column: 1/-1; }
.callback-list span { padding: 4px 7px; border-radius: 5px; color: #fff; background: #287fdf; font-size: 9px; font-weight: 900; }
.callback-list code { align-self: center; color: #246bbd; font-size: 12px; font-weight: 800; }
.callback-list b { grid-column: 1/-1; margin-top: 13px; font-size: 14px; }
.callback-list p { grid-column: 1/-1; margin: 5px 0 0; color: #7a8594; font-size: 11px; line-height: 1.5; }
.idempotency-box { margin: 18px 0; padding: 18px; display: flex; gap: 14px; border: 1px solid #f0c8c8; border-radius: 12px; background: #fff6f6; }
.idempotency-box > span { flex: 0 0 auto; height: fit-content; padding: 5px 8px; border-radius: 6px; color: #fff; background: #de5360; font-size: 10px; font-weight: 900; }
.idempotency-box h3 { margin: 0; font-size: 14px; }
.idempotency-box p { margin: 6px 0 0; color: #756268; font-size: 12px; line-height: 1.65; }
.idempotency-box code { color: #bd3f4b; }
.auth-methods { margin-bottom: 17px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.auth-methods div { min-width: 0; padding: 14px; border: 1px solid #e0e6ee; border-radius: 10px; background: #fafcff; }
.auth-methods b { display: block; margin-bottom: 7px; color: #758193; font-size: 10px; }
.auth-methods code { display: block; overflow-x: auto; color: #286fbf; font-size: 10px; white-space: nowrap; }
.release-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.release-checklist label { padding: 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e1e7ef; border-radius: 10px; background: #fafcff; cursor: pointer; }
.release-checklist input { margin-top: 2px; accent-color: var(--blue); }
.release-checklist span { color: #596676; font-size: 12px; line-height: 1.55; }
.integration-cta { margin-top: 22px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 15px; color: #fff; background: linear-gradient(135deg,#246fc9,#338eea); }
.integration-cta small { color: #bcdcff; font-size: 9px; font-weight: 900; letter-spacing: 1.3px; }
.integration-cta h2 { margin: 6px 0; font-size: 22px; }
.integration-cta p { margin: 0; color: #d8eaff; font-size: 12px; }
.integration-cta a { flex: 0 0 auto; min-width: 150px; padding: 12px 17px; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; color: #246fc9; background: #fff; font-size: 13px; font-weight: 900; }
.integration-cta a span { font-size: 22px; line-height: 1; }

/* Subpage header: logo | categories | language & support */
.legal-page { max-width: 1064px; }
.legal-hero { margin-bottom: 18px; padding: 34px 38px; border: 1px solid #dce4ef; border-radius: 20px; background: linear-gradient(135deg,#f8fbff,#edf5ff); box-shadow: 0 9px 25px rgba(44,65,96,.07); }
.legal-hero > span { color: var(--blue-deep); font-size: 10px; font-weight: 900; letter-spacing: 1.4px; }
.legal-hero h1 { margin: 7px 0 8px; font-size: 30px; }
.legal-hero p { margin: 0; color: #657386; line-height: 1.65; }
.legal-hero time { margin-top: 13px; display: block; color: #8490a0; font-size: 12px; }
.legal-toc { position: sticky; top: 0; z-index: 12; margin-bottom: 18px; padding: 8px; display: flex; gap: 5px; overflow-x: auto; border: 1px solid #dde5ef; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 5px 15px rgba(45,65,95,.07); scrollbar-width: none; }
.legal-toc::-webkit-scrollbar { display: none; }
.legal-toc a { flex: 1 0 auto; padding: 8px 11px; border-radius: 7px; color: #637082; font-size: 13px; font-weight: 700; text-align: center; }
.legal-toc a:hover { color: var(--blue-deep); background: #edf5ff; }
.legal-content { padding: 13px 40px 38px; border: 1px solid #dce4ef; border-radius: 20px; background: #fff; box-shadow: 0 9px 25px rgba(44,65,96,.07); }
.legal-content section { padding: 28px 0; border-bottom: 1px solid #e7ecf2; scroll-margin-top: 70px; }
.legal-content section:last-child { border-bottom: 0; }
.legal-content h2 { margin: 0 0 13px; color: #24364c; font-size: 19px; }
.legal-content p,.legal-content li { color: #5f6d7e; font-size: 14px; line-height: 1.85; }
.legal-content p { margin: 8px 0 0; }
.legal-content ul,.legal-content ol { margin: 0; padding-left: 21px; }
.legal-content code { padding: 2px 5px; border-radius: 4px; color: #256fc8; background: #edf5ff; }
.legal-effective { padding: 13px 16px; border-radius: 9px; color: #315f94 !important; background: #f0f6fd; font-weight: 700; }
.legal-table-wrap { overflow-x: auto; border: 1px solid #e0e6ee; border-radius: 11px; }
.legal-table-wrap table { width: 100%; min-width: 720px; border-collapse: collapse; }
.legal-table-wrap th,.legal-table-wrap td { padding: 13px 15px; border-bottom: 1px solid #e8edf3; color: #5f6d7e; font-size: 13px; line-height: 1.6; text-align: left; vertical-align: top; }
.legal-table-wrap th { color: #526174; background: #f7f9fc; }
.legal-table-wrap tr:last-child td { border-bottom: 0; }

body[data-title] .site-header {
  width: 100%;
  min-height: 76px;
  padding: 0 max(20px, calc((100% - 1064px) / 2));
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 14px rgba(48,71,105,.06);
}

body[data-title] .brand-wrap {
  width: auto;
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
}

body[data-title] .brand-link { width: 170px; }

body[data-title] .nav-wrap {
  grid-column: 2;
  grid-row: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-title] .nav-inner { width: auto; margin: 0; }
body[data-title] .main-nav { justify-content: flex-start; }
body[data-title] .main-nav > .nav-link,
body[data-title] .nav-item > button { min-width: auto; height: 76px; padding: 0 18px; font-size: 17px; }

body[data-title] .header-utility {
  width: auto;
  min-height: 0;
  margin: 0;
  grid-column: 3;
  grid-row: 1;
}

body[data-title] .header-utility .utility-spacer { display: none; }
body[data-title] .utility-nav { gap: 18px; font-size: 14px; white-space: nowrap; }

.games-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.game-card {
  overflow: hidden;
  border: 4px solid var(--blue);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(37, 100, 191, .18);
}

.game-title {
  height: 42px;
  margin: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.4px;
  background: linear-gradient(#4c91ef, #246fdc);
  border-bottom: 2px solid #84c3ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.game-title a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.video-link {
  position: relative;
  display: block;
  aspect-ratio: 509 / 400;
  overflow: hidden;
  background: #eaf3ff;
}

.game-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -47%);
  min-width: 154px;
  padding: 14px 27px 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, rgba(75,145,242,.96), rgba(42,112,218,.96));
  box-shadow: 0 5px 10px rgba(14,60,135,.32);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  transition: transform .2s ease, filter .2s ease;
}

.video-link:hover .experience-button {
  transform: translate(-50%, -47%) scale(1.04);
  filter: brightness(1.07);
}

.api-section {
  position: relative;
  min-height: 260px;
  margin-top: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  align-items: center;
  border: 1px solid rgba(219,225,236,.9);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
}

.api-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0 45%;
  height: 76%;
  background: radial-gradient(circle at 50% 45%, rgba(69,143,255,.13), transparent 66%);
  pointer-events: none;
}

.api-copy {
  position: relative;
  z-index: 2;
  align-self: start;
  padding: 16px 10px 10px 30px;
}

.api-label {
  display: inline-block;
  padding: 5px 15px 2px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #4198f7, #2479e5);
  font-size: 16px;
  font-weight: 500;
}

.api-copy h2 {
  margin: 11px 0 7px;
  font-size: 31px;
  line-height: 1.28;
  letter-spacing: -1.6px;
}

.api-copy h2 span,
.api-copy h2 strong {
  display: block;
}

.api-copy h2 strong {
  font-weight: 900;
}

.api-copy h2 em {
  color: #2e83f1;
  font-style: normal;
}

.api-copy p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.api-benefits {
  width: 600px;
  max-width: 100%;
  margin-top: 17px;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e3e9f2;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 4px 12px rgba(52,83,123,.08);
}

.benefit {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border-right: 1px solid #d8dee8;
}

.benefit:first-child {
  padding-left: 0;
}

.benefit:last-child {
  border-right: 0;
  padding-right: 0;
}

.benefit-icon {
  flex: 0 0 auto;
  width: 28px;
  color: #2c87f5;
  font-size: 26px;
  font-weight: 900;
  text-align: center;
}

.code-icon {
  width: 38px;
  font-size: 21px;
}

.benefit span:last-child {
  min-width: 0;
}

.benefit b,
.benefit small {
  display: block;
  white-space: nowrap;
}

.benefit b {
  color: #2d82ee;
  font-size: 14px;
  font-weight: 500;
}

.benefit small {
  margin-top: 2px;
  color: #6b7481;
  font-size: 12px;
}

.api-art {
  position: relative;
  z-index: 1;
  justify-self: end;
  width: 610px;
  margin-right: -11px;
}

.api-art img {
  width: 100%;
  mix-blend-mode: multiply;
}

.guide-button {
  position: absolute;
  right: 30px;
  bottom: 21px;
  z-index: 3;
  min-width: 205px;
  padding: 14px 24px 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #3b96f7, #1776e7);
  box-shadow: 0 5px 11px rgba(29,91,172,.32);
  font-size: 21px;
  font-weight: 900;
}

.guide-button span {
  font-size: 36px;
  line-height: 20px;
  font-weight: 300;
}

.site-footer {
  padding: 30px 0 70px;
}

.footer-divider {
  height: 1px;
  background: #d7dce5;
}

.footer-content {
  padding-top: 29px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-text {
  color: #22252a;
  font-size: 13px;
  line-height: 1.55;
}

.footer-text nav {
  display: flex;
  gap: 10px;
  font-weight: 500;
}

.footer-text p {
  margin: 2px 0 0;
}

.footer-brands {
  width: 124px;
  mix-blend-mode: multiply;
}

.footer-logo{
  display: flex;
  gap: 5px;
}

@media (max-width: 900px) {
  .container {
    width: min(720px, calc(100% - 28px));
  }

  .brand-link {
    width: min(500px, 78vw);
  }

  .games-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .game-title {
    height: 44px;
  }

  .api-section {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .api-copy {
    padding: 10px 10px 200px 10px;
  }

  .api-art {
    position: absolute;
    right: 20px;
    bottom: 5px;
    width: 430px;
    opacity: .96;
  }

  .guide-button {
    right: 20px;
  }

  body[data-title] .site-header {
    padding-inline: 18px;
    grid-template-columns: 155px minmax(0, 1fr) auto;
  }
  body[data-title] .brand-link { width: 145px; }
  body[data-title] .main-nav > .nav-link,
  body[data-title] .nav-item > button { padding-inline: 10px; font-size: 14px; }
  body[data-title] .utility-nav { gap: 10px; font-size: 12px; }
  .market-list { grid-template-columns: repeat(3, 1fr); }
  .outcome-explainer,.pair-explainer { grid-template-columns: 1fr; }
  .outcome-rules { grid-template-columns: repeat(3,1fr); grid-template-rows: none; }
  .outcome-rule { display: block; text-align: center; }
  .outcome-rule > span { display: inline-block; }
  .outcome-rule p { margin-top: 10px; }
  .pair-panel { grid-template-columns: 1fr; }
  .round-timeline { grid-template-columns: 1fr; }
  .round-timeline > i { display: none; }
  .integration-flow { grid-template-columns: 1fr; }
  .integration-flow > i { display: none; }
  .integration-flow > div { min-height: 0; }
}

@media (max-width: 620px) {
  .legal-hero { padding: 27px 20px; border-radius: 15px; }
  .legal-hero h1 { font-size: 25px; }
  .legal-content { padding: 6px 19px 26px; border-radius: 15px; }
  .legal-content section { padding: 23px 0; }
  .legal-content h2 { font-size: 17px; }
  .legal-content p,.legal-content li { font-size: 13px; }
  body::before,
  body::after {
    opacity: .16;
  }

  .container {
    width: calc(100% - 20px);
  }

  .site-header {
    padding-top: 8px;
  }

  .header-utility {
    min-height: 32px;
  }

  .utility-nav {
    margin-left: auto;
    gap: 14px;
    font-size: 13px;
  }

  .telegram-dot {
    width: 19px;
    height: 19px;
    font-size: 11px;
  }

  .brand-wrap {
    margin-top: 2px;
    margin-bottom: 12px;
  }

  .brand-link {
    width: min(390px, 94vw);
  }

  .nav-wrap { border-top: 0; }
  .nav-inner { width: 100%; }
  .menu-toggle {
    width: calc(100% - 20px);
    height: 46px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span { width: 20px; height: 2px; position: absolute; left: 2px; background: #222a35; transition: .2s; }
  .menu-toggle span:nth-child(1) { transform: translateY(-6px); }
  .menu-toggle span:nth-child(3) { transform: translateY(6px); }
  .menu-toggle b { margin-left: 30px; font-size: 14px; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
  .main-nav { display: none; max-height: calc(100vh - 150px); overflow-y: auto; border-top: 1px solid var(--line); background: #fff; }
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 102;
    width: min(340px, 86vw);
    height: 100dvh;
    max-height: none;
    display: block;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    border-top: 0;
    box-shadow: -12px 0 30px rgba(16,31,52,.2);
    transition: transform .25s ease, visibility .25s;
  }
  .main-nav.is-open { visibility: visible; transform: translateX(0); }
  .drawer-close {
    width: 100%;
    height: 62px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: #1e2733;
    background: #f7f9fc;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .drawer-close span { color: var(--blue-deep); font-size: 30px; font-weight: 300; line-height: 1; }
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 101;
    width: 100vw;
    height: 100dvh;
    border: 0;
    background: rgba(17,28,44,.48);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }
  body.menu-open .menu-backdrop { display: block; opacity: 1; visibility: visible; }
  .nav-item { border-bottom: 1px solid #edf0f4; }
  .main-nav > .nav-link,
  .nav-item > button { width: 100%; min-width: 0; height: 50px; padding: 0 20px; justify-content: space-between; font-size: 15px; }
  .main-nav > .nav-link { border-bottom: 1px solid #edf0f4; }
  .submenu,
  .mega-menu { position: static; width: auto; min-width: 0; padding: 0 12px 12px; display: none; visibility: visible; opacity: 1; transform: none; border: 0; border-radius: 0; box-shadow: none; background: #f7f9fc; }
  .has-submenu:hover > .submenu,
  .has-submenu:hover > .mega-menu { display: none; transform: none; }
  .has-submenu.is-open > .submenu { display: block; transform: none; }
  .has-submenu.is-open > .mega-menu { display: grid; grid-template-columns: 1fr; transform: none; }
  .menu-group { padding-top: 8px; }
  .menu-group a,
  .submenu a { padding: 10px 14px; }
  body.menu-open { overflow: hidden; }

  .subpage-main { min-height: 380px; padding: 35px 0 55px; }
  .page-heading { margin-bottom: 20px; padding-bottom: 18px; }
  .page-heading h1 { font-size: 29px; }
  .page-description { margin-top: 7px; font-size: 14px; }
  .empty-content { min-height: 220px; }
  .game-tabs {
    margin-bottom: 18px;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 9px;
  }
  .game-tabs a { min-height: 48px; padding: 10px 6px; font-size: 13px; }
  .chart-subpage .page-heading { margin-bottom: 16px; }
  .chart-content { min-height: 260px; border-radius: 10px; }
  .game-experience iframe { height: 72vh; min-height: 520px; }
  .guide-hero,
  .guide-section { margin-bottom: 15px; border-radius: 15px; }
  .guide-hero { padding: 31px 22px 25px; }
  .guide-hero h2 { margin: 9px 0 13px; font-size: 27px; letter-spacing: -1.3px; }
  .chart-simple-hero h2 { font-size: 27px; letter-spacing: 0; }
  .guide-hero > p { font-size: 14px; line-height: 1.75; }
  .chart-round-flow { margin-top: 20px; grid-template-columns: 1fr; gap: 7px; }
  .chart-round-flow > div { min-height: 68px; padding: 12px; }
  .fairness-note { margin-top: 18px; padding: 13px; align-items: flex-start; }
  .fairness-note p { font-size: 12px; }
  .guide-section { padding: 26px 19px 28px; }
  .guide-section-head { margin-bottom: 20px; gap: 11px; }
  .section-number { width: 42px; height: 42px; border-radius: 11px; font-size: 13px; }
  .guide-section-head h2 { font-size: 22px; }
  .chart-explainer .guide-section-head h2 { letter-spacing: 0; }
  .guide-section-lead { margin-top: -8px; margin-bottom: 17px; font-size: 12px; }
  .market-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .market-list span { padding: 13px 7px; font-size: 12px; }
  .rule-grid { grid-template-columns: 1fr; gap: 9px; }
  .rule-card { min-height: 0; padding: 17px; }
  .rule-card span { margin-bottom: 9px; }
  .rule-card b { font-size: 16px; }
  .rule-notes { padding: 13px 14px; }
  .rule-notes p { font-size: 12px; }
  .outcome-rules { grid-template-columns: 1fr; }
  .outcome-rule { min-height: 0; padding: 13px; display: flex; text-align: left; }
  .outcome-rule p { margin-top: 0; }
  .tie-warning { padding: 13px; display: block; }
  .tie-warning strong,.tie-warning span { display: block; font-size: 11px; line-height: 1.55; }
  .tie-warning span { margin-top: 4px; }
  .simple-pair-rules { grid-template-rows: none; }
  .simple-pair-rule { padding: 15px; }
  .pair-availability { font-size: 10px; text-align: left; line-height: 1.5; }
  .pair-panel { margin-top: 20px; padding: 20px 16px; gap: 17px; }
  .pair-copy h3 { font-size: 27px; }
  .pair-cards { grid-template-columns: 1fr; }
  .pair-card p { min-height: 0; }
  .guide-check-list { grid-template-columns: 1fr; gap: 10px; }
  .guide-check-list li { font-size: 12px; }
  .play-steps { grid-template-columns: 1fr; gap: 9px; }
  .howto-start-image { margin-bottom: 14px; border-radius: 10px; }
  .play-steps li,
  .play-steps li:last-child { grid-column: auto; padding: 14px; }
  .play-steps p { font-size: 12px; }
  .race-market-card { min-height: 80px; padding: 14px; gap: 11px; }
  .bitcoin-symbol { width: 44px; height: 44px; border-radius: 12px; font-size: 23px; }
  .race-market-card strong { font-size: 17px; }
  .race-market-card p { font-size: 11px; }
  .live-badge { padding: 5px 8px; font-size: 9px; }
  .race-mapping { grid-template-columns: 1fr; gap: 8px; }
  .timeline-item { min-height: 92px; padding: 15px; }
  .timeline-item > span { min-width: 48px; font-size: 26px; }
  .continuous-note { font-size: 12px; text-align: left; }
  .results-panel { border-radius: 13px; }
  .results-filter { padding: 18px 15px; display: block; }
  .filter-copy { margin-bottom: 13px; }
  .filter-copy strong { font-size: 15px; }
  .filter-controls { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
  .filter-controls label,.filter-controls input { width: 100%; min-width: 0; }
  .filter-controls input { height: 40px; padding-inline: 9px; font-size: 12px; }
  .filter-controls button { height: 40px; padding: 0 12px; font-size: 12px; }
  .results-summary { min-height: 54px; padding: 0 15px; }
  .result-row { min-height: 65px; padding: 0 12px; grid-template-columns: 1.45fr 1fr .62fr .68fr; column-gap: 5px; }
  .result-row > div { font-size: 12px; text-align: center; }
  .result-row > div:first-child { text-align: left; }
  .round-column { display: none; }
  .time-round time,.time-round small { display: block; }
  .time-round small { margin-top: 5px; color: #8792a0; font-size: 11px; }
  .result-head { min-height: 43px; }
  .result-head > div { font-size: 11px; }
  .desktop-label { display: none; }
  .mobile-label { display: inline; }
  .type-badge { min-width: 34px; padding: 4px 5px; font-size: 10px; }
  .result-badge { min-width: 42px; padding: 5px 7px; font-size: 10px; }
  .market-verification { margin-top: 15px; padding: 23px 15px 19px; border-radius: 13px; }
  .market-verification-head { align-items: flex-start; gap: 11px; }
  .market-verify-logo { width: 43px; height: 43px; border-radius: 7px; }
  .market-verification-head h2 { font-size: 19px; }
  .market-verification-head p { font-size: 11px; }
  .verification-points { margin: 18px 0 13px; grid-template-columns: 1fr; gap: 7px; }
  .verification-points div { padding: 12px 14px; }
  .binance-market-toolbar { min-height: 52px; margin-top: 18px; padding: 0 11px; }
  .binance-market-toolbar > div { display: block; }
  .binance-market-toolbar div span { display: block; margin-top: 2px; font-size: 9px; }
  .binance-market-refresh { font-size: 9px; }
  .binance-market-table-wrap { max-height: 430px; }
  .binance-market-table th,.binance-market-table td { padding: 0 8px; font-size: 11px; }
  .chart-disclaimer { font-size: 9px; }
  .api-guide-hero,.api-doc-section { margin-bottom: 15px; border-radius: 15px; }
  .api-guide-hero { padding: 31px 21px 25px; }
  .api-guide-hero::after { right: -25px; font-size: 100px; }
  .api-guide-hero h2 { margin: 9px 0 13px; font-size: 28px; letter-spacing: -1.4px; }
  .api-guide-hero > p { font-size: 13px; line-height: 1.75; }
  .api-guide-games { margin-top: 17px; }
  .private-notice { margin-top: 18px; align-items: flex-start; display: block; }
  .private-notice p { margin-top: 5px; }
  .api-guide-toc { margin-bottom: 15px; border-radius: 10px; }
  .api-doc-section { padding: 26px 18px 29px; }
  .api-doc-head { margin-bottom: 21px; gap: 11px; }
  .api-doc-head > span { width: 42px; height: 42px; border-radius: 11px; font-size: 12px; }
  .api-doc-head h2 { font-size: 21px; }
  .api-doc-lead { font-size: 12px; }
  .integration-flow > div { padding: 18px; }
  .api-call-direction,.credential-grid,.code-grid,.launch-options,.callback-list,.release-checklist { grid-template-columns: 1fr; }
  .callback-list > div:last-child { grid-column: auto; }
  .api-call-direction div { display: block; }
  .api-call-direction b { display: block; margin-top: 5px; }
  .signature-formula { display: block; }
  .signature-formula code { display: block; margin-top: 8px; font-size: 10px; }
  .api-field-table th,.api-field-table td { padding: 11px 12px; }
  .code-panel pre { padding: 15px; font-size: 10px; }
  .auth-methods { grid-template-columns: 1fr; }
  .integration-cta { padding: 22px 18px; display: block; }
  .integration-cta h2 { font-size: 19px; }
  .integration-cta a { margin-top: 17px; width: 100%; }

  .game-card {
    border-width: 3px;
    border-radius: 16px;
  }

  .game-title {
    height: 39px;
    font-size: 21px;
  }

  .experience-button {
    min-width: 130px;
    padding: 12px 21px 13px;
    font-size: 19px;
  }

  .api-section {
    min-height: 0;
    margin-top: 18px;
    padding: 20px 18px 17px;
    border-radius: 18px;
  }

  .api-copy {
    padding-bottom: 214px;
  }

  .api-label {
    padding: 4px 13px 5px;
    font-size: 13px;
  }

  .api-copy h2 {
    margin-top: 9px;
    font-size: clamp(22px, 6.4vw, 28px);
    letter-spacing: -1.2px;
  }

  .api-copy p {
    font-size: 13px;
  }

  .api-benefits {
    margin-top: 14px;
    padding: 10px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    border-radius: 16px;
  }

  .benefit,
  .benefit:first-child,
  .benefit:last-child {
    padding: 0;
    border-right: 0;
  }

  .benefit b {
    font-size: 12px;
  }

  .benefit small {
    font-size: 10px;
  }

  .api-art {
    right: -16px;
    bottom: 13px;
    width: min(590px, 96vw);
  }

  .guide-button {
    right: 13px;
    bottom: 14px;
    min-width: 162px;
    padding: 11px 18px 12px 22px;
    font-size: 16px;
  }

  .guide-button span {
    font-size: 30px;
  }

  .site-footer {
    padding: 24px 4px 40px;
  }

  .footer-content {
    padding-top: 20px;
    align-items: flex-end;
  }

  .footer-text {
    font-size: 11px;
  }

  .footer-text nav {
    gap: 6px;
  }

  .footer-brands {
    width: 90px;
  }

  .footer-logo { flex: 0 0 auto; width: 82px; margin-left: 10px; }

  body[data-title] .site-header {
    position: relative;
    min-height: 62px;
    padding: 0 10px;
    grid-template-columns: minmax(125px, 1fr) auto;
  }
  body[data-title] .brand-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: auto;
    margin: 0;
    justify-content: center;
    transform: translate(-50%, -50%);
  }
  body[data-title] .brand-link { width: min(170px, 48vw); }
  body[data-title] .header-utility { display: none; }
  body[data-title] .nav-wrap { grid-column: 2; margin-left: auto; }
  body[data-title] .nav-inner { width: auto; }
  body[data-title] .menu-toggle { width: 54px; height: 61px; margin: 0; justify-content: flex-end; }
  body[data-title] .menu-toggle span { left: auto; right: 2px; }
  body[data-title] .menu-toggle b { display: none; }
  body[data-title] .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 86vw);
    max-height: none;
    box-shadow: -12px 0 30px rgba(16,31,52,.2);
  }
  body[data-title] .main-nav > .nav-link,
  body[data-title] .nav-item > button { height: 50px; padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-button {
    transition: none;
  }
}
.language-picker{position:relative}
/* 임시 비활성화: 다국어 기능 사용 시 이 규칙을 제거하세요. */
.language-picker{display:none}
.language-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:1000;display:none;min-width:150px;padding:6px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.15)}
.language-picker.is-open .language-menu{display:grid}
.language-menu button{border:0;background:transparent;padding:9px 12px;border-radius:7px;text-align:left;color:#334155;font:inherit;cursor:pointer;white-space:nowrap}
.language-menu button:hover,.language-menu button[aria-selected="true"]{background:#f1f5f9;color:#2563eb;font-weight:700}
.language-button [data-language-label]{font-size:inherit;vertical-align:baseline}
@media(max-width:768px){body[data-title] .header-utility{display:flex;position:absolute;right:72px;top:14px;z-index:1001;min-height:34px}body[data-title] .header-utility .support-link,body[data-title] .header-utility .utility-spacer{display:none}.language-menu{position:fixed;right:12px;top:58px}}
.demo-status { padding: 12px 16px; color: #dbeafe; background: #0f172a; text-align: center; font-weight: 700; }
.demo-retry { display: block; margin: 12px auto; padding: 10px 18px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 800; cursor: pointer; }
.results-pagination { min-height: 78px; padding: 16px 24px; display: flex; justify-content: center; align-items: center; border-top: 1px solid #e8edf3; background: linear-gradient(180deg,#fbfcfe,#f6f9fc); }
.results-pagination[hidden] { display: none; }
.pager-inner { position: relative; min-width: 430px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.pager-numbers { display: flex; align-items: center; gap: 6px; }
.results-pagination button { border: 0; font-family: inherit; cursor: pointer; transition: border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease; }
.pager-number { width: 34px; height: 34px; padding: 0; border: 1px solid transparent !important; border-radius: 50%; color: #697586; background: transparent; font-size: 12px; font-weight: 800; }
.pager-number:hover:not(:disabled) { border-color: #cbd8e8 !important; color: #1d6fd8; background: #fff; transform: translateY(-1px); }
.pager-number.active { border-color: #2376dc !important; color: #fff; background: linear-gradient(145deg,#4599f5,#1f70d5); box-shadow: 0 5px 12px rgba(31,112,213,.25); }
.pager-move { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d8e1ec !important; border-radius: 17px; color: #536173; background: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 2px 5px rgba(45,65,90,.05); }
.pager-move span { color: #1f70d5; font-size: 15px; line-height: 1; }
.pager-move em { font-style: normal; }
.pager-move:hover:not(:disabled) { border-color: #9fc2ee !important; color: #1768cf; background: #f4f9ff; transform: translateY(-1px); }
.results-pagination button:disabled { opacity: .32; cursor: default; box-shadow: none; }
.pager-counter { position: absolute; left: calc(100% + 13px); min-width: 48px; color: #a0a9b6; font-size: 10px; white-space: nowrap; }
.pager-counter b { color: #2779df; font-size: 12px; }
.pager-counter i { margin: 0 4px; color: #c1c8d1; font-style: normal; }
@media(max-width:620px){.results-pagination{min-height:66px;padding:13px 10px}.pager-inner{min-width:0;width:100%;gap:8px}.pager-numbers{gap:2px}.pager-number{width:30px;height:30px;font-size:11px}.pager-move{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%}.pager-move em,.pager-counter{display:none}.pager-move span{font-size:14px}}

@media (max-width: 620px) {
  .guide-section {
    padding: 26px 10px 28px;
  }
  .guide-hero {
    padding: 31px 14px 25px;
  }
  .game-experience iframe {
    height: 92vh;
    min-height: 530px;
  }
  .rabbit-intro-guide .guide-hero h2 br { display:block; }
  .rabbit-core-grid,.rabbit-examples,.pair-rule-list { grid-template-columns:1fr; }
  .rabbit-intro-guide .rabbit-top-layout { grid-template-columns:1fr; gap:16px; }
  .rabbit-intro-guide .rabbit-top-layout > .rabbit-guide-image { width:100%; margin:0; }
  .rabbit-rule-top .race-rule-grid { grid-template-columns:1fr; }
  .rabbit-pair-top { margin-bottom:17px; }
  .rabbit-core { min-height:0; padding:14px; gap:11px; }
  .rabbit-core > span { font-size:29px; }
  .rabbit-core b { font-size:15px; }
  .rabbit-guide-image { margin-bottom:17px; border-radius:9px; }
  .rabbit-examples p { flex-direction:row; align-items:center; justify-content:space-between; font-size:12px; }
  .rabbit-important { padding:14px; font-size:12px; }
  .pair-rule-list article,.pair-rule-list .pair-rule-wide { grid-column:auto; padding:15px; }
  .pair-rule-list p { min-height:0; font-size:12px; }
  .pair-rule-list img { width:calc(100% + 30px); margin:15px -15px -15px; }
  .tie-pair-box { padding:15px; grid-template-columns:1fr; gap:14px; }
  .tie-pair-box p { font-size:12px; }
  .round-timeline.four-stage { grid-template-columns:1fr 1fr; gap:8px; }
  .round-timeline.four-stage .timeline-item { min-height:105px; padding:12px; display:block; }
  .round-timeline.four-stage .timeline-item > span { display:block; min-width:0; margin-bottom:5px; text-align:left; }
  .rabbit-howto-image { margin-bottom:17px; border-radius:10px; }
}

@media (max-width: 380px) {
  .round-timeline.four-stage { grid-template-columns:1fr; }
  .round-timeline.four-stage .timeline-item { min-height:0; display:flex; }
}