/* Bus Traffic Fever Guide custom styles. Tailwind utilities load from the CDN in view/layout.html. */

:root {
  --btf-navy:#0f2f5c;
  --btf-navy-deep:#092344;
  --btf-blue:#1258c8;
  --btf-blue-dark:#0d45a0;
  --btf-yellow:#ffc72c;
  --btf-canvas:#f3f6fa;
  --btf-surface:#fff;
  --btf-ink:#172033;
  --btf-muted:#5f6f85;
  --btf-border:#d7e0ea;
  --btf-soft-blue:#eaf1fb;
  --btf-red:#ef4352;
  --btf-cyan:#17c9d7;
  --btf-green:#35a947;
  --btf-magenta:#d83cad;
  --btf-orange:#f58a2a;
  --btf-radius:8px;
  --btf-radius-sm:6px;
  --btf-shadow:0 6px 16px rgba(15,47,92,.09);
  --level-tabs-collapsed-height:108px
}
*,:after,:before {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body.btf-theme {
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:var(--btf-canvas);
  color:var(--btf-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  line-height:1.55;
  text-rendering:optimizeLegibility
}
.btf-theme a {
  color:inherit
}
.btf-theme button,.btf-theme input,.btf-theme select,.btf-theme textarea {
  font:inherit
}
.btf-theme :focus-visible {
  outline:3px solid var(--btf-yellow);
  outline-offset:3px
}
.btf-theme img,.btf-theme video {
  max-width:100%
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,:after,:before {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}
.btf-container {
  width:min(100% - 32px,1200px);
  margin-inline:auto
}
.btf-main {
  min-height:56vh
}
.btf-skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  transform:translateY(-150%);
  border-radius:var(--btf-radius-sm);
  background:var(--btf-yellow);
  padding:10px 14px;
  color:var(--btf-navy-deep);
  font-weight:800
}
.btf-skip-link:focus {
  transform:translateY(0)
}
.btf-topbar {
  border-bottom:1px solid #254b78;
  background:var(--btf-navy);
  color:#f7faff;
  font-size:.8rem
}
.btf-topbar-inner {
  display:flex;
  min-height:36px;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.btf-topbar a,.btf-topbar span {
  display:inline-flex;
  align-items:center;
  gap:8px
}
.btf-topbar a {
  color:var(--btf-yellow);
  font-weight:800;
  text-decoration:none
}
.btf-header {
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--btf-border);
  background:var(--btf-surface);
  box-shadow:0 2px 8px rgba(15,47,92,.06)
}
.btf-nav {
  position:relative;
  display:flex;
  min-height:70px;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.btf-brand {
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:10px;
  text-decoration:none
}
.btf-brand-mark {
  width:42px;
  height:42px;
  flex:0 0 auto;
  -o-object-fit:contain;
  object-fit:contain
}
.btf-brand-copy {
  display:grid;
  color:var(--btf-navy);
  font-size:.84rem;
  font-weight:800;
  line-height:1.02
}
.btf-brand-copy strong {
  font-size:.92rem
}
.btf-brand-copy span {
  color:var(--btf-blue);
  letter-spacing:.04em;
  text-transform:uppercase
}
.btf-desktop-nav {
  display:flex;
  align-items:center;
  gap:3px
}
.btf-menu-button,.btf-mobile-menu a,.btf-nav-cta,.btf-nav-link {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:var(--btf-radius-sm);
  padding:9px 11px;
  color:#39485d;
  font-size:.88rem;
  font-weight:750;
  line-height:1;
  text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease
}
.btf-nav-link:hover {
  border-color:var(--btf-border);
  background:var(--btf-canvas);
  color:var(--btf-navy)
}
.btf-nav-cta {
  margin-left:5px;
  border-color:var(--btf-blue-dark);
  background:var(--btf-blue);
  color:#fff
}
.btf-nav-cta:hover {
  background:var(--btf-blue-dark)
}
.btf-menu-button {
  display:none;
  width:44px;
  padding:0;
  border-color:var(--btf-border);
  background:#fff;
  color:var(--btf-navy);
  cursor:pointer
}
.btf-mobile-menu {
  position:absolute;
  top:calc(100% - 3px);
  right:0;
  left:0;
  display:grid;
  gap:2px;
  border:1px solid var(--btf-border);
  border-radius:var(--btf-radius);
  background:#fff;
  padding:7px;
  box-shadow:var(--btf-shadow)
}
.btf-mobile-menu a {
  justify-content:flex-start;
  color:var(--btf-ink)
}
.btf-mobile-menu a:hover {
  background:var(--btf-soft-blue)
}
.btf-button {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:var(--btf-radius-sm);
  padding:10px 14px;
  font-size:.88rem;
  font-weight:800;
  line-height:1.15;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease
}
.btf-button-primary {
  border-color:var(--btf-blue-dark);
  background:var(--btf-blue);
  color:#fff
}
.btf-button-primary:hover {
  background:var(--btf-blue-dark)
}
.btf-button-secondary {
  border-color:#aebdce;
  background:#fff;
  color:var(--btf-navy)
}
.btf-button-secondary:hover {
  border-color:var(--btf-blue);
  background:var(--btf-soft-blue)
}
.btf-text-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--btf-blue)!important;
  font-weight:800;
  text-decoration:none
}
.btf-text-link:hover {
  text-decoration:underline;
  text-underline-offset:3px
}
.btf-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  color:var(--btf-blue);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.085em;
  text-transform:uppercase
}
.btf-eyebrow-light {
  color:var(--btf-yellow)
}
.btf-kicker {
  margin:0 0 8px;
  color:var(--btf-blue);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase
}
.btf-hero {
  border-bottom:1px solid var(--btf-border);
  background:var(--btf-canvas);
  padding:clamp(38px,6vw,72px) 0
}
.btf-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.55fr);
  gap:clamp(32px,6vw,74px);
  align-items:center
}
.btf-hero-copy {
  max-width:730px
}
.btf-hero h1,.btf-page-header h1 {
  margin:0;
  color:var(--btf-navy-deep);
  font-size:clamp(2.2rem,4.3vw,4rem);
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1.03
}
.btf-hero-text {
  max-width:690px;
  margin:18px 0 0;
  color:#44546a;
  font-size:1.04rem;
  line-height:1.72
}
.btf-level-search {
  max-width:620px;
  margin-top:24px
}
.btf-level-search>label {
  display:block;
  margin-bottom:7px;
  color:var(--btf-navy);
  font-size:.78rem;
  font-weight:850
}
.btf-level-search>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid #aebdce;
  border-radius:var(--btf-radius);
  background:#fff;
  box-shadow:0 3px 8px rgba(15,47,92,.06)
}
.btf-level-search input {
  min-width:0;
  min-height:50px;
  border:0;
  padding:10px 14px;
  color:var(--btf-ink);
  background:#fff
}
.btf-level-search input:focus {
  outline:0;
  box-shadow:inset 0 0 0 3px rgba(18,88,200,.22)
}
.btf-level-search input.btf-input-invalid {
  box-shadow:inset 0 0 0 2px var(--btf-red)
}
.btf-level-search button {
  min-height:50px;
  border:0;
  border-left:1px solid var(--btf-blue-dark);
  padding:10px 16px;
  background:var(--btf-blue);
  color:#fff;
  font-weight:850;
  cursor:pointer
}
.btf-level-search button:hover {
  background:var(--btf-blue-dark)
}
.btf-level-search>p {
  margin:7px 0 0;
  color:var(--btf-muted);
  font-size:.75rem
}
.btf-hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:15px
}
.btf-hero-facts {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:660px;
  margin:24px 0 0;
  border-block:1px solid var(--btf-border)
}
.btf-hero-facts div {
  padding:13px 15px;
  border-right:1px solid var(--btf-border)
}
.btf-hero-facts div:first-child {
  padding-left:0
}
.btf-hero-facts div:last-child {
  border-right:0
}
.btf-hero-facts dt {
  color:var(--btf-muted);
  font-size:.67rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}
.btf-hero-facts dd {
  margin:2px 0 0;
  color:var(--btf-navy);
  font-size:.82rem;
  font-weight:800
}
.btf-game-preview {
  overflow:hidden;
  border:1px solid #264f81;
  border-radius:var(--btf-radius);
  background:var(--btf-navy);
  box-shadow:var(--btf-shadow)
}
.btf-preview-header {
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  color:#fff;
  font-size:.73rem;
  font-weight:800
}
.btf-preview-header span:last-child {
  color:var(--btf-yellow)
}
.btf-game-video {
  display:block;
  width:100%;
  aspect-ratio:9/13.5;
  background:#dce4ef;
  -o-object-fit:cover;
  object-fit:cover
}
.btf-download-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:#315985
}
.btf-download-row a {
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--btf-navy);
  color:#fff;
  font-size:.62rem;
  line-height:1.1;
  text-decoration:none
}
.btf-download-row a:hover {
  background:var(--btf-navy-deep)
}
.btf-download-row i {
  color:var(--btf-yellow);
  font-size:1.05rem
}
.btf-download-row strong {
  font-size:.73rem
}
.btf-section {
  padding:clamp(46px,6vw,76px) 0
}
.btf-section-heading {
  max-width:760px;
  margin-bottom:25px
}
.btf-heading-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,.62fr);
  gap:36px;
  align-items:end;
  max-width:none
}
.btf-editorial-summary h2,.btf-section-heading h2 {
  margin:0;
  color:var(--btf-navy);
  font-size:clamp(1.65rem,3vw,2.45rem);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.08
}
.btf-heading-row>p,.btf-section-heading>p {
  margin:0;
  color:var(--btf-muted);
  font-size:.94rem;
  line-height:1.65
}
.btf-levels-section,.btf-library-page {
  background:#fff
}
.btf-section-action {
  margin-top:22px;
  text-align:right
}
.level-tabs-collapse {
  --level-tabs-collapsed-height:108px
}
.level-tabs-panel {
  overflow:hidden;
  transition:max-height .22s ease
}
.level-tabs-grid {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.level-range-tab,.level-tabs-toggle {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  gap:7px;
  border:1px solid var(--btf-border);
  border-radius:var(--btf-radius-sm);
  padding:7px 11px;
  background:#fff;
  color:#4a5b70;
  font-size:.78rem;
  font-weight:850;
  cursor:pointer
}
.level-range-tab:hover {
  border-color:var(--btf-blue);
  color:var(--btf-blue)
}
.level-range-tab.active {
  border-color:var(--btf-blue-dark);
  background:var(--btf-blue);
  color:#fff
}
.level-tabs-toggle {
  margin-top:9px;
  color:var(--btf-blue)
}
.level-tabs-collapse:not(.has-overflow) .level-tabs-toggle {
  display:none
}
.level-tabs-collapse.has-overflow .level-tabs-toggle.hidden {
  display:inline-flex!important
}
.level-tabs-collapse.is-expanded .level-tabs-toggle i {
  transform:rotate(180deg)
}
.btf-level-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:12px;
  margin-top:18px
}
.btf-level-card {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--btf-border);
  border-radius:var(--btf-radius);
  background:#fff;
  transition:border-color .16s ease,transform .16s ease
}
.btf-level-card:hover {
  border-color:var(--btf-blue);
  transform:translateY(-2px)
}
.btf-level-card-link {
  display:block;
  height:100%;
  text-decoration:none
}
.btf-level-thumb {
  position:relative;
  display:grid;
  min-height:120px;
  place-items:center;
  border-bottom:1px solid var(--btf-border);
  background:var(--btf-canvas)
}
.btf-level-thumb img {
  display:block;
  width:100%;
  height:132px;
  -o-object-fit:contain;
  object-fit:contain
}
.btf-level-thumb-missing:before {
  content:"\f207";
  color:var(--btf-blue);
  font-family:Font Awesome\ 6 Free;
  font-size:1.7rem;
  font-weight:900
}
.btf-level-thumb-missing img {
  display:none
}
.btf-level-number {
  position:absolute;
  top:7px;
  left:7px;
  border:1px solid #d9a300;
  border-radius:999px;
  background:var(--btf-yellow);
  padding:4px 7px;
  color:var(--btf-navy-deep);
  font-size:.67rem;
  font-weight:900;
  line-height:1
}
.btf-level-card-body {
  padding:10px 11px 11px
}
.btf-level-card-body h2,.btf-level-card-body h3 {
  margin:0;
  color:var(--btf-navy);
  font-size:.88rem;
  font-weight:900
}
.btf-level-guide-types {
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:4px
}
.btf-level-guide-types span {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--btf-muted);
  font-size:.66rem;
  font-weight:750
}
.btf-level-guide-types i {
  color:var(--btf-blue)
}
.btf-is-loading {
  opacity:.48;
  pointer-events:none
}
.btf-empty-state {
  grid-column:1/-1;
  border:1px dashed #aebdce;
  border-radius:var(--btf-radius);
  background:var(--btf-canvas);
  padding:44px 18px;
  color:var(--btf-muted);
  text-align:center
}
.btf-empty-state i {
  color:var(--btf-blue);
  font-size:1.8rem
}
.btf-empty-state h2 {
  margin:10px 0 4px;
  color:var(--btf-navy);
  font-size:1.2rem
}
.btf-empty-state p {
  margin:0
}
.btf-strategy-section {
  border-block:1px solid #264f81;
  background:var(--btf-navy);
  color:#fff
}
.btf-strategy-layout {
  display:grid;
  grid-template-columns:minmax(250px,.62fr) minmax(0,1fr);
  border:1px solid #315985
}
.btf-strategy-intro {
  padding:clamp(25px,4vw,42px);
  border-right:1px solid #315985
}
.btf-strategy-intro h2 {
  margin:0;
  color:#fff;
  font-size:clamp(1.7rem,3.2vw,2.6rem);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.08
}
.btf-strategy-intro>p:last-of-type {
  margin:16px 0 22px;
  color:#cbd8e8;
  font-size:.93rem;
  line-height:1.65
}
.btf-strategy-intro a {
  color:var(--btf-yellow);
  font-size:.86rem;
  font-weight:850;
  text-decoration:none
}
.btf-strategy-list {
  margin:0;
  padding:0;
  list-style:none
}
.btf-strategy-list li {
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:15px;
  padding:22px 25px;
  border-bottom:1px solid #315985
}
.btf-strategy-list li:last-child {
  border-bottom:0
}
.btf-strategy-list>li>span {
  color:var(--btf-yellow);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.07em
}
.btf-strategy-list h3 {
  margin:0;
  color:#fff;
  font-size:.98rem;
  font-weight:850
}
.btf-strategy-list p {
  margin:4px 0 0;
  color:#cbd8e8;
  font-size:.86rem;
  line-height:1.58
}
.btf-faq-section {
  background:var(--btf-canvas)
}
.btf-faq-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--btf-border);
  background:#fff
}
.btf-faq-grid>div:first-child {
  border-right:1px solid var(--btf-border)
}
.btf-faq-grid details {
  border-bottom:1px solid var(--btf-border)
}
.btf-faq-grid details:last-child {
  border-bottom:0
}
.btf-faq-grid summary {
  display:flex;
  min-height:62px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 17px;
  color:var(--btf-navy);
  font-size:.91rem;
  font-weight:850;
  cursor:pointer;
  list-style:none
}
.btf-faq-grid summary::-webkit-details-marker {
  display:none
}
.btf-faq-grid summary i {
  color:var(--btf-blue);
  transition:transform .16s ease
}
.btf-faq-grid details[open] summary {
  background:var(--btf-soft-blue)
}
.btf-faq-grid details[open] summary i {
  transform:rotate(45deg)
}
.btf-faq-grid details p {
  margin:0;
  padding:0 17px 17px;
  color:var(--btf-muted);
  font-size:.88rem;
  line-height:1.65
}
.btf-page-header {
  border-bottom:1px solid var(--btf-border);
  background:var(--btf-soft-blue);
  padding:44px 0
}
.btf-page-header-inner {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.58fr);
  gap:38px;
  align-items:end
}
.btf-page-header h1 {
  font-size:clamp(2rem,4vw,3.35rem)
}
.btf-page-header-inner>p {
  margin:0;
  color:#4c5d73;
  font-size:.95rem;
  line-height:1.68
}
.btf-page-header-inner>div>.btf-updated {
  margin:11px 0 0;
  color:var(--btf-muted);
  font-size:.77rem;
  font-weight:800
}
.btf-range-bar {
  border-bottom:1px solid var(--btf-border);
  background:#fff;
  padding:17px 0
}
.btf-editorial-layout {
  display:grid;
  grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);
  gap:clamp(34px,7vw,88px);
  align-items:start
}
.btf-editorial-summary {
  position:sticky;
  top:105px;
  border-top:5px solid var(--btf-yellow);
  background:var(--btf-navy);
  padding:26px;
  color:#fff
}
.btf-editorial-summary .btf-kicker {
  color:var(--btf-yellow)
}
.btf-editorial-summary h2 {
  color:#fff;
  font-size:1.8rem
}
.btf-editorial-summary p:last-child {
  margin:15px 0 0;
  color:#cbd8e8;
  font-size:.91rem;
  line-height:1.65
}
.btf-editorial-content {
  display:grid;
  gap:0
}
.btf-editorial-content>section {
  border-top:1px solid var(--btf-border);
  padding:25px 0 29px
}
.btf-editorial-content>section:first-child {
  border-top:0;
  padding-top:0
}
.btf-editorial-content h2 {
  margin:0 0 10px;
  color:var(--btf-navy);
  font-size:1.32rem;
  font-weight:900
}
.btf-editorial-content p {
  margin:9px 0 0;
  color:var(--btf-muted);
  font-size:.93rem;
  line-height:1.75
}
.btf-editorial-content a,.btf-legal-content a {
  color:var(--btf-blue);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px
}
.btf-process-list {
  border:1px solid var(--btf-border)
}
.btf-process-list>div {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:13px;
  padding:16px;
  border-bottom:1px solid var(--btf-border)
}
.btf-process-list>div:last-child {
  border-bottom:0
}
.btf-process-list span {
  color:var(--btf-blue);
  font-size:.72rem;
  font-weight:900
}
.btf-process-list p {
  margin:0
}
.btf-process-list strong {
  color:var(--btf-ink)
}
.btf-independent-notice {
  border-left:4px solid var(--btf-yellow);
  background:#fff9e7;
  padding:20px!important
}
.btf-contact-layout {
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:clamp(34px,7vw,80px);
  align-items:start
}
.btf-contact-primary {
  border-top:5px solid var(--btf-yellow);
  background:var(--btf-navy);
  padding:27px;
  color:#fff
}
.btf-contact-primary .btf-kicker {
  color:var(--btf-yellow)
}
.btf-contact-primary>a {
  display:block;
  overflow-wrap:anywhere;
  color:#fff;
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:900;
  text-decoration:none
}
.btf-contact-primary>p:not(.btf-kicker) {
  margin:13px 0 0;
  color:#cbd8e8;
  font-size:.88rem;
  line-height:1.65
}
.btf-response-note {
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  margin-top:20px;
  border-top:1px solid #315985;
  padding-top:17px;
  color:#dce6f2;
  font-size:.79rem
}
.btf-response-note i {
  color:var(--btf-yellow)
}
.btf-contact-reasons {
  border-top:1px solid var(--btf-border)
}
.btf-contact-reasons section {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:15px;
  border-bottom:1px solid var(--btf-border);
  padding:20px 0
}
.btf-contact-reasons>section>i {
  color:var(--btf-blue);
  font-size:1.05rem
}
.btf-contact-reasons h2 {
  margin:0;
  color:var(--btf-navy);
  font-size:1.02rem;
  font-weight:900
}
.btf-contact-reasons p {
  margin:5px 0 0;
  color:var(--btf-muted);
  font-size:.89rem;
  line-height:1.6
}
.btf-legal-layout {
  display:grid;
  grid-template-columns:210px minmax(0,820px);
  gap:clamp(34px,6vw,70px);
  align-items:start
}
.btf-legal-nav {
  position:sticky;
  top:100px;
  display:grid;
  border-left:3px solid var(--btf-yellow);
  padding-left:17px
}
.btf-legal-nav h2 {
  margin:0 0 9px;
  color:var(--btf-navy);
  font-size:.83rem;
  font-weight:900;
  text-transform:uppercase
}
.btf-legal-nav a {
  padding:6px 0;
  color:var(--btf-muted);
  font-size:.8rem;
  font-weight:700;
  text-decoration:none
}
.btf-legal-nav a:hover {
  color:var(--btf-blue)
}
.btf-legal-content>section {
  scroll-margin-top:100px;
  border-top:1px solid var(--btf-border);
  padding:24px 0 27px
}
.btf-legal-content>section:first-child {
  border-top:0;
  padding-top:0
}
.btf-legal-content h2 {
  margin:0 0 10px;
  color:var(--btf-navy);
  font-size:1.16rem;
  font-weight:900
}
.btf-legal-content li,.btf-legal-content p {
  color:var(--btf-muted);
  font-size:.91rem;
  line-height:1.75
}
.btf-legal-content p {
  margin:8px 0 0
}
.btf-legal-content ul {
  display:grid;
  gap:5px;
  margin:10px 0 0;
  padding-left:20px
}
.btf-legal-content strong {
  color:var(--btf-ink)
}
.btf-legal-notice {
  border-left:4px solid var(--btf-yellow);
  background:#fff9e7;
  padding:13px 15px;
  color:#4d4530!important
}
.btf-play-page {
  padding:38px 0 0
}
.btf-play-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--btf-border);
  padding-bottom:20px
}
.btf-play-header h1 {
  margin:0;
  color:var(--btf-navy);
  font-size:clamp(1.9rem,3.7vw,3rem);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.06
}
.btf-play-header p:not(.btf-eyebrow) {
  max-width:710px;
  margin:10px 0 0;
  color:var(--btf-muted);
  font-size:.92rem
}
.btf-play-actions {
  display:flex;
  flex:0 0 auto;
  gap:8px
}
.btf-embed-notice {
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  margin:16px 0;
  border:1px solid #c6d5e7;
  background:var(--btf-soft-blue);
  padding:11px 13px;
  color:#465a72;
  font-size:.8rem
}
.btf-embed-notice i {
  color:var(--btf-blue)
}
.btf-embed-notice p {
  margin:0
}
.btf-game-frame-wrap {
  position:relative;
  min-height:540px;
  overflow:hidden;
  border:1px solid #264f81;
  border-radius:var(--btf-radius);
  background:var(--btf-navy);
  box-shadow:var(--btf-shadow)
}
.btf-game-frame {
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  min-height:78vh;
  border:0;
  background:#fff
}
.btf-game-frame-loading {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:8px;
  color:#fff;
  font-weight:800;
  text-align:center
}
.btf-game-frame-loading i {
  color:var(--btf-yellow);
  font-size:1.6rem
}
.btf-footer {
  margin-top:64px;
  border-top:5px solid var(--btf-yellow);
  background:var(--btf-navy-deep);
  color:#fff
}
.btf-footer .btf-container {
  padding-block:42px 24px
}
.btf-footer-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(170px,.55fr) minmax(190px,.65fr);
  gap:48px
}
.btf-footer-logo {
  display:flex;
  align-items:center;
  gap:11px
}
.btf-footer-logo img {
  width:44px;
  height:44px;
  -o-object-fit:contain;
  object-fit:contain
}
.btf-footer-logo div {
  display:grid
}
.btf-footer-logo strong {
  font-size:.95rem
}
.btf-footer-logo span {
  color:#aebfd3;
  font-size:.72rem
}
.btf-footer-brand>p {
  max-width:490px;
  margin:16px 0 0;
  color:#b9c8d9;
  font-size:.84rem;
  line-height:1.65
}
.btf-footer h2 {
  margin:0 0 12px;
  color:var(--btf-yellow);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase
}
.btf-footer ul {
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none
}
.btf-footer a,.btf-footer li,.btf-footer-button {
  color:#c8d4e2;
  font-size:.82rem;
  text-decoration:none
}
.btf-footer a:hover,.btf-footer-button:hover {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px
}
.btf-footer-button {
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer
}
.btf-footer-bottom {
  display:grid;
  gap:7px;
  margin-top:35px;
  border-top:1px solid #29496e;
  padding-top:18px;
  color:#91a6be;
  font-size:.72rem
}
.btf-footer-bottom p {
  margin:0
}
.btf-level-hero {
  border-bottom:1px solid var(--btf-border);
  background:var(--btf-soft-blue)!important;
  padding:28px 0 25px!important
}
.btf-level-hero h1 span {
  color:var(--btf-navy-deep)!important;
  -webkit-text-fill-color:currentColor!important
}
.btf-breadcrumb a {
  color:var(--btf-blue)!important
}
.btf-level-detail {
  background:var(--btf-canvas)!important;
  padding:18px 0 8px!important
}
.btf-level-layout {
  align-items:start;
  gap:24px!important
}
.btf-guide-panel {
  border:1px solid var(--btf-border);
  border-radius:var(--btf-radius)!important;
  padding:14px!important;
  box-shadow:none
}
.btf-board-notice {
  border:1px solid #c6d5e7;
  border-left:4px solid var(--btf-yellow);
  background:var(--btf-soft-blue)!important;
  padding:12px 14px!important
}
.video-tabs {
  border:1px solid var(--btf-border);
  background:var(--btf-canvas)!important;
  padding:9px!important
}
.guide-mode-tab,.quick-level-item-btn,.video-tab {
  min-height:44px;
  border-radius:var(--btf-radius-sm)!important
}
.all-levels-btn,.appv2-quick-level-active,.appv2-video-tab-active,.btn-primary,.submit-comment-btn {
  border-color:var(--btf-blue-dark)!important;
  background:var(--btf-blue)!important;
  background-image:none!important;
  color:#fff!important
}
.appv2-quick-level-idle,.appv2-video-tab-idle {
  border-color:var(--btf-border)!important;
  background:#fff!important;
  color:var(--btf-ink)!important
}
.guide-mode-tabs {
  display:flex;
  gap:6px;
  border-bottom:1px solid var(--btf-border);
  padding:0 0 10px
}
.guide-mode-tab {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--btf-border);
  background:#fff;
  padding:8px 11px;
  color:var(--btf-muted);
  font-size:.8rem;
  font-weight:800;
  cursor:pointer
}
.guide-mode-tab.is-active {
  border-color:var(--btf-blue);
  background:var(--btf-soft-blue);
  color:var(--btf-blue)
}
.version-guide-panel>div,.video-container {
  border-color:var(--btf-border)!important;
  border-radius:var(--btf-radius)!important;
  box-shadow:none!important
}
.video-container {
  background:var(--btf-canvas)!important
}
.btf-level-sidebar>div>div {
  border:1px solid var(--btf-border)!important;
  border-radius:var(--btf-radius)!important;
  box-shadow:none!important
}
.appv2-bottom-nav {
  border-color:var(--btf-border)!important
}
.text-accent,.text-purple-500,.text-purple-600 {
  color:var(--btf-blue)!important
}
.text-orange-500,.text-orange-600 {
  color:var(--btf-orange)!important
}
.border-orange-100,.border-pink-200,.border-purple-100,.border-purple-200 {
  border-color:var(--btf-border)!important
}
.btf-theme [class*=bg-gradient] {
  background-image:none!important
}
.btf-theme [class*=rounded-2xl],.btf-theme [class*=rounded-3xl] {
  border-radius:var(--btf-radius)!important
}
.btf-comments-section {
  width:min(100% - 32px,1120px);
  margin:30px auto 0
}
.btf-comment-module {
  border:1px solid var(--btf-border);
  border-radius:var(--btf-radius);
  background:#fff;
  padding:22px
}
.btf-comments-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.62fr);
  gap:26px;
  align-items:end;
  border-bottom:1px solid var(--btf-border);
  padding-bottom:18px
}
.btf-comments-header h2 {
  margin:0;
  color:var(--btf-navy);
  font-size:1.5rem;
  font-weight:900
}
.comment-count {
  color:var(--btf-blue);
  font-size:.85rem
}
.btf-comments-header>p {
  margin:0;
  color:var(--btf-muted);
  font-size:.82rem
}
.btf-comment-form-panel {
  margin-top:18px;
  border:1px solid #c6d5e7;
  background:var(--btf-soft-blue);
  padding:18px
}
.btf-comment-form-panel h3 {
  margin:0;
  color:var(--btf-navy);
  font-size:1rem;
  font-weight:900
}
.btf-form-note {
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:6px 0 16px;
  color:#4a5c73;
  font-size:.75rem
}
.btf-form-note i {
  margin-top:2px;
  color:var(--btf-blue)
}
.btf-form-grid {
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:14px
}
.btf-field {
  display:grid;
  gap:6px
}
.btf-field-wide {
  grid-column:1/-1
}
.btf-field label,.btf-field-label {
  color:var(--btf-ink);
  font-size:.76rem;
  font-weight:850
}
.btf-field label>span {
  color:var(--btf-red)
}
.btf-field label small,.btf-field-label small {
  color:var(--btf-muted);
  font-weight:600
}
.btf-field input,.btf-field textarea {
  width:100%;
  border:1px solid #aebdce;
  border-radius:var(--btf-radius-sm);
  background:#fff;
  padding:10px 11px;
  color:var(--btf-ink);
  font-size:.85rem
}
.btf-field textarea {
  resize:vertical
}
.btf-field input:focus,.btf-field textarea:focus {
  border-color:var(--btf-blue);
  outline:0;
  box-shadow:0 0 0 3px rgba(18,88,200,.16)
}
.btf-char-count {
  color:var(--btf-muted);
  font-size:.69rem;
  text-align:right
}
.char-count.is-over-limit {
  color:var(--btf-red);
  font-weight:900
}
.btf-upload-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px
}
.btf-upload-button {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  gap:7px;
  border:1px solid #aebdce;
  border-radius:var(--btf-radius-sm);
  background:#fff;
  padding:8px 11px;
  color:var(--btf-navy);
  font-size:.76rem;
  font-weight:800;
  cursor:pointer
}
.btf-upload-button:hover {
  border-color:var(--btf-blue);
  background:var(--btf-soft-blue)
}
.image-file-name {
  color:var(--btf-muted);
  font-size:.72rem
}
.image-preview {
  margin-top:9px
}
.preview-img {
  display:block;
  max-width:100%;
  max-height:200px;
  border:1px solid var(--btf-border);
  border-radius:var(--btf-radius-sm)
}
.remove-image-btn {
  margin-top:5px;
  border:0;
  background:transparent;
  padding:0;
  color:var(--btf-red);
  font-size:.72rem;
  font-weight:750;
  cursor:pointer
}
.btf-form-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:15px
}
.btf-form-actions p {
  margin:0;
  color:var(--btf-muted);
  font-size:.7rem
}
.comment-error {
  margin-top:12px;
  border-left:4px solid var(--btf-red);
  background:#fff0f1;
  padding:10px 12px;
  color:#a52835;
  font-size:.78rem
}
.comment-error i {
  margin-right:6px
}
.comments-stack {
  margin-top:20px;
  border-top:1px solid var(--btf-border)
}
.btf-comment-item {
  border-bottom:1px solid var(--btf-border);
  padding:20px 0
}
.btf-comment-meta {
  display:flex;
  align-items:center;
  gap:10px
}
.btf-avatar {
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 auto;
  place-items:center;
  border-radius:50%;
  background:var(--btf-navy);
  color:#fff;
  font-size:.78rem;
  font-weight:900
}
.btf-avatar-small {
  width:30px;
  height:30px;
  background:var(--btf-blue);
  font-size:.68rem
}
.btf-comment-meta>div {
  display:grid
}
.btf-comment-meta strong {
  color:var(--btf-ink);
  font-size:.84rem
}
.btf-comment-meta em {
  color:var(--btf-muted);
  font-size:.73rem;
  font-style:normal;
  font-weight:600
}
.btf-comment-meta time {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--btf-muted);
  font-size:.68rem
}
.comment-body {
  padding-left:46px
}
.btf-comment-text {
  margin:8px 0 0;
  color:#3e4c5f;
  font-size:.86rem;
  line-height:1.65;
  white-space:pre-wrap
}
.btf-comment-image {
  display:inline-block;
  margin-top:10px
}
.btf-comment-image img {
  display:block;
  max-height:280px;
  border:1px solid var(--btf-border);
  border-radius:var(--btf-radius-sm)
}
.btf-comment-actions {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:10px
}
.btf-comment-actions button {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  gap:5px;
  border:0;
  background:transparent;
  padding:6px 2px;
  color:var(--btf-muted);
  font-size:.73rem;
  font-weight:750;
  cursor:pointer
}
.btf-comment-actions button.btf-vote-active,.btf-comment-actions button:hover {
  color:var(--btf-blue)
}
.replies-list {
  display:grid;
  gap:9px;
  margin-top:14px;
  border-left:3px solid #c6d5e7;
  padding-left:14px
}
.btf-reply-item {
  border:1px solid var(--btf-border);
  background:var(--btf-canvas);
  padding:13px
}
.reply-form-container {
  margin-top:14px;
  border:1px solid #c6d5e7;
  background:var(--btf-soft-blue);
  padding:14px
}
.reply-form-container>p {
  margin:0 0 10px;
  color:var(--btf-muted);
  font-size:.75rem
}
.reply-form {
  display:grid;
  gap:10px
}
.btf-inline-actions {
  display:flex;
  gap:8px
}
.btf-no-comments {
  margin-top:18px;
  border:1px dashed #aebdce;
  background:var(--btf-canvas);
  padding:36px 15px;
  text-align:center
}
.btf-no-comments>i {
  color:var(--btf-blue);
  font-size:1.6rem
}
.btf-no-comments h3 {
  margin:8px 0 2px;
  color:var(--btf-navy);
  font-size:1rem
}
.btf-no-comments p {
  margin:0;
  color:var(--btf-muted);
  font-size:.78rem
}
.btf-success-message {
  margin-top:12px;
  border-left:4px solid var(--btf-green);
  background:#edf8ef;
  padding:10px 12px;
  color:#257634;
  font-size:.78rem;
  font-weight:750
}
.btf-toast {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
  border-radius:var(--btf-radius-sm);
  background:var(--btf-navy-deep);
  padding:11px 15px;
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  box-shadow:var(--btf-shadow)
}
.image-lightbox {
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  background:rgba(9,35,68,.88);
  padding:20px
}
.image-lightbox.active {
  display:grid
}
.image-lightbox-content {
  position:relative;
  max-width:min(94vw,1100px);
  max-height:92vh
}
.image-lightbox-content img {
  display:block;
  max-width:100%;
  max-height:88vh;
  border:3px solid #fff;
  background:#fff;
  -o-object-fit:contain;
  object-fit:contain
}
.image-lightbox-close {
  position:absolute;
  top:-16px;
  right:-16px;
  display:grid;
  width:42px;
  height:42px;
  z-index:2;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--btf-navy);
  color:#fff;
  font-size:1.5rem;
  cursor:pointer
}
.jump-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:var(--btf-canvas);
  color:var(--btf-ink)
}
.jump-card {
  width:min(100%,560px);
  overflow:hidden;
  border:1px solid var(--btf-border);
  border-top:5px solid var(--btf-yellow);
  border-radius:var(--btf-radius);
  background:#fff;
  box-shadow:var(--btf-shadow)
}
.jump-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--btf-border);
  padding:17px 19px
}
.jump-brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--btf-navy);
  font-weight:900;
  line-height:1.05;
  text-decoration:none
}
.jump-brand img {
  width:40px;
  height:40px;
  -o-object-fit:contain;
  object-fit:contain
}
.jump-state {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:var(--btf-radius-sm);
  padding:7px 9px;
  font-size:.74rem;
  font-weight:850
}
.jump-state.is-success {
  background:#edf8ef;
  color:#257634
}
.jump-state.is-error {
  background:#fff0f1;
  color:#a52835
}
.jump-card-body {
  padding:clamp(22px,5vw,34px)
}
.jump-icon {
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border-radius:var(--btf-radius);
  color:#fff;
  font-size:1.25rem
}
.jump-icon.is-success {
  background:var(--btf-green)
}
.jump-icon.is-error {
  background:var(--btf-red)
}
.jump-title {
  margin:17px 0 0;
  color:var(--btf-navy);
  font-size:clamp(1.65rem,5vw,2.25rem);
  font-weight:900;
  line-height:1.08
}
.jump-progress {
  margin-top:20px;
  overflow:hidden;
  border:1px solid var(--btf-border);
  border-radius:999px;
  background:var(--btf-canvas)
}
.jump-progress-bar {
  width:100%;
  height:7px;
  border-radius:inherit;
  background:var(--btf-blue);
  transform-origin:left
}
.jump-meta {
  margin-top:13px;
  color:var(--btf-muted);
  font-size:.78rem
}
.jump-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px
}
.jump-button {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:var(--btf-radius-sm);
  padding:9px 13px;
  font-weight:850;
  text-decoration:none
}
.jump-button-primary {
  border:1px solid var(--btf-blue-dark);
  background:var(--btf-blue);
  color:#fff
}
.jump-button-secondary {
  border:1px solid #aebdce;
  background:#fff;
  color:var(--btf-navy)
}
@keyframes jumpProgress {
  0% {
    transform:scaleX(1)
  }
  to {
    transform:scaleX(0)
  }
}
@media (max-width:900px) {
  .btf-desktop-nav {
    display:none
  }
  .btf-menu-button {
    display:inline-flex
  }
  .btf-hero-grid {
    grid-template-columns:1fr
  }
  .btf-game-preview {
    width:min(100%,420px)
  }
  .btf-strategy-layout {
    grid-template-columns:1fr
  }
  .btf-strategy-intro {
    border-right:0;
    border-bottom:1px solid #315985
  }
  .btf-contact-layout,.btf-editorial-layout {
    grid-template-columns:1fr
  }
  .btf-editorial-summary {
    position:static
  }
  .btf-legal-layout {
    grid-template-columns:1fr
  }
  .btf-legal-nav {
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:2px 14px;
    border-left:0;
    border-bottom:1px solid var(--btf-border);
    padding:0 0 14px
  }
  .btf-legal-nav h2 {
    width:100%
  }
  .btf-footer-grid {
    grid-template-columns:1.2fr 1fr 1fr;
    gap:28px
  }
}
@media (max-width:767px) {
  .btf-container {
    width:min(100% - 24px,1200px)
  }
  .btf-topbar {
    display:none
  }
  .btf-nav {
    min-height:64px
  }
  .btf-brand-mark {
    width:39px;
    height:39px
  }
  .btf-hero {
    padding:31px 0 36px
  }
  .btf-hero-grid {
    gap:28px
  }
  .btf-hero h1 {
    font-size:2.25rem
  }
  .btf-hero-text {
    font-size:.94rem
  }
  .btf-level-search>div {
    grid-template-columns:1fr
  }
  .btf-level-search button {
    border-top:1px solid var(--btf-blue-dark);
    border-left:0
  }
  .btf-hero-actions {
    display:grid
  }
  .btf-hero-actions,.btf-hero-facts {
    grid-template-columns:1fr
  }
  .btf-hero-facts div,.btf-hero-facts div:first-child {
    border-right:0;
    border-bottom:1px solid var(--btf-border);
    padding:10px 0
  }
  .btf-hero-facts div:last-child {
    border-bottom:0
  }
  .btf-game-preview {
    width:100%
  }
  .btf-game-video {
    max-height:560px
  }
  .btf-section {
    padding:38px 0
  }
  .btf-heading-row,.btf-page-header-inner {
    grid-template-columns:1fr;
    gap:12px
  }
  .btf-section-heading {
    margin-bottom:19px
  }
  .btf-level-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }
  .btf-level-thumb {
    min-height:105px
  }
  .btf-level-thumb img {
    height:112px
  }
  .btf-level-card-body {
    padding:8px
  }
  .btf-section-action {
    text-align:left
  }
  .btf-strategy-intro {
    padding:23px 18px
  }
  .btf-strategy-list li {
    grid-template-columns:38px minmax(0,1fr);
    padding:18px
  }
  .btf-faq-grid {
    grid-template-columns:1fr
  }
  .btf-faq-grid>div:first-child {
    border-right:0;
    border-bottom:1px solid var(--btf-border)
  }
  .btf-page-header {
    padding:31px 0
  }
  .btf-page-header h1 {
    font-size:2rem
  }
  .btf-editorial-content>section {
    padding:20px 0 23px
  }
  .btf-play-page {
    padding-top:28px
  }
  .btf-play-header {
    align-items:stretch;
    flex-direction:column
  }
  .btf-play-actions {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .btf-game-frame-wrap {
    min-height:500px
  }
  .btf-game-frame {
    min-height:72vh
  }
  .btf-footer {
    margin-top:42px
  }
  .btf-footer-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .btf-guide-panel {
    border-inline:0;
    border-radius:0!important;
    padding:7px!important
  }
  .btf-level-detail .container {
    width:100%
  }
  .btf-comments-section {
    width:100%;
    margin-top:18px
  }
  .btf-comment-module {
    border-inline:0;
    border-radius:0;
    padding:15px 12px
  }
  .btf-comments-header {
    grid-template-columns:1fr;
    gap:7px
  }
  .btf-comment-form-panel {
    padding:14px 12px
  }
  .btf-form-grid {
    grid-template-columns:1fr
  }
  .btf-form-actions {
    align-items:stretch;
    flex-direction:column
  }
  .comment-body {
    padding-left:0
  }
  .replies-list {
    padding-left:9px
  }
  .btf-inline-actions {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .jump-card-header {
    align-items:flex-start;
    flex-direction:column
  }
  .jump-actions {
    display:grid
  }
}
.hover\:bg-purple-50:hover {
  background-color:var(--btf-canvas)!important
}
.group:hover .group-hover\:text-purple-600 {
  color:var(--btf-blue)!important
}
.group:hover .group-hover\:bg-purple-50 {
  background-color:var(--btf-canvas)!important
}
@media (min-width:640px) {
  .level-tabs-collapse.has-overflow .sm\:hidden.level-tabs-toggle {
    display:inline-flex!important
  }
}
@media (min-width:768px) {
  .level-tabs-collapse.has-overflow .md\:hidden.level-tabs-toggle {
    display:inline-flex!important
  }
}
@media (min-width:1024px) {
  .level-tabs-collapse.has-overflow .lg\:hidden.level-tabs-toggle {
    display:inline-flex!important
  }
}